Skip to content

Commit

Permalink
fix:404 page (#1357)
Browse files Browse the repository at this point in the history 
* fix:404 page

* Changed href to Link and updated imports acc. to standards

---------

Co-authored-by: Nilesh Gupta <[email protected]>
  • Loading branch information
@route-2 @0xNilesh
route-2 and 0xNilesh authored Jan 4, 2024
1 parent 9d1bf21 commit 856e973
Show file tree
Hide file tree
Showing 2 changed files with 189 additions and 39 deletions.
61 changes: 61 additions & 0 deletions src/pages/NotFoundPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
// React + Web3 Essentials
import React from "react";
import { Link } from 'react-router-dom';

// External Packages
import styled from 'styled-components';

// Internal Configs
import GLOBALS from "config/Globals";

const NotFoundPage: React.FC = () => {
return (
<NotFoundContainer>
<NotFoundContent>
<NotFoundTitle> Page Not Found</NotFoundTitle>
<NotFoundText>The page you are looking for doesn't exist or has been moved.</NotFoundText>
<HomeLink to="/channels">Go to Home</HomeLink>
</NotFoundContent>
</NotFoundContainer>
);
};

export default NotFoundPage;

const NotFoundContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px);
background: ${(props) => props.theme.default.bg};
box-shadow: ${GLOBALS.ADJUSTMENTS.MODULE_BOX_SHADOW};
border-radius: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE};
margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.DESKTOP};
padding: 20px;
box-sizing: border-box;
`;

const NotFoundContent = styled.div`
text-align: center;
`;

const NotFoundTitle = styled.h1`
color: black;
font-size: 2.5rem;
margin-bottom: 1rem;
`;

const NotFoundText = styled.p`
color: ${(props) => props.theme.default.text};
font-size: 1.2rem;
margin-bottom: 1.5rem;
`;

const HomeLink = styled(Link)`
color: ${(props) => props.theme.default.link};
font-size: 1rem;
text-decoration: none;
&:hover {
text-decoration: underline;
}
`;
167 changes: 128 additions & 39 deletions src/structure/MasterInterfacePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const InboxPage = lazy(() => import('pages/InboxPage'));
const InternalDevPage = lazy(() => import('pages/InternalDevPage'));
const NFTPage = lazy(() => import('pages/NFTPage'));
const NotAvailablePage = lazy(() => import('pages/NotAvailablePage'));
const NotFoundPage = lazy(() => import('pages/NotFoundPage'));
const ReceiveNotifsPage = lazy(() => import('pages/ReceiveNotifsPage'));
const NotifSettingsPage = lazy(() => import('pages/NotifSettingsPage'));
const SendNotifsPage = lazy(() => import('pages/SendNotifsPage'));
Expand Down Expand Up @@ -72,59 +73,141 @@ function MasterInterfacePage() {
const [loadTeaserVideo, setLoadTeaserVideo] = React.useState(null);
const location = useLocation();

const { MetamaskPushSnapModalComponent }:AppContextType = React.useContext(AppContext);
const { MetamaskPushSnapModalComponent }: AppContextType = React.useContext(AppContext);

const { showMetamaskPushSnap } = React.useContext(AppContext);

React.useEffect(()=>{
if(location.hash == '#receive-notifications'){
React.useEffect(() => {
if (location.hash == '#receive-notifications') {
showMetamaskPushSnap();
}
},[location])
}, [location]);

// Render
return (
<Container>
<Interface location={location.pathname}>
<Suspense fallback={
<ItemVV2>
<LoaderSpinner type={LOADER_TYPE.SEAMLESS} spinnerSize={24} />
</ItemVV2>
}
<Suspense
fallback={
<ItemVV2>
<LoaderSpinner
type={LOADER_TYPE.SEAMLESS}
spinnerSize={24}
/>
</ItemVV2>
}
>
<Routes>
<Route path={APP_PATHS.Inbox} element={<InboxPage />} />
<Route path={APP_PATHS.Spam} element={<InboxPage />} />
<Route path={`${APP_PATHS.Chat}/:chatid`} element={<ChatPage />} />
<Route path={APP_PATHS.Chat} element={<ChatPage />} />
<Route path={`${APP_PATHS.Spaces}/:spaceid`} element={<SpacePage />} />
<Route path={APP_PATHS.Spaces} element={<SpacePage />} />
<Route
path={APP_PATHS.Inbox}
element={<InboxPage />}
/>
<Route
path={APP_PATHS.Spam}
element={<InboxPage />}
/>
<Route
path={`${APP_PATHS.Chat}/:chatid`}
element={<ChatPage />}
/>
<Route
path={APP_PATHS.Chat}
element={<ChatPage />}
/>
<Route
path={`${APP_PATHS.Spaces}/:spaceid`}
element={<SpacePage />}
/>
<Route
path={APP_PATHS.Spaces}
element={<SpacePage />}
/>
{/* <Route path="chat-new" element={<NewChatPage />} /> */}

<Route
path={APP_PATHS.Channels}
element={<ChannelsPage loadTeaser={setLoadTeaserVideo} playTeaser={setPlayTeaserVideo} />}
element={
<ChannelsPage
loadTeaser={setLoadTeaserVideo}
playTeaser={setPlayTeaserVideo}
/>
}
/>
<Route
path={APP_PATHS.Dashboard}
element={<ChannelDashboardPage />}
/>
<Route
path={APP_PATHS.Send}
element={<SendNotifsPage />}
/>
<Route
path={APP_PATHS.Receive}
element={<ReceiveNotifsPage />}
/>
<Route path={APP_PATHS.Dashboard} element={<ChannelDashboardPage />} />
<Route path={APP_PATHS.Send} element={<SendNotifsPage />} />
<Route path={APP_PATHS.Receive} element={<ReceiveNotifsPage />} />

<Route path={APP_PATHS.Govern} element={<GovPage />} />
<Route path={APP_PATHS.Snap} element={<SnapPage />} />
<Route
path={APP_PATHS.Govern}
element={<GovPage />}
/>
<Route
path={APP_PATHS.Snap}
element={<SnapPage />}
/>

{/* <Route path="yield" element={<YieldFarmingPage />} /> */}
<Route path={APP_PATHS.YieldV2} element={<YieldFarmingV2Page />} />
<Route path={APP_PATHS.Rockstar} element={<NFTPage />} />
<Route path={APP_PATHS.Gratitude} element={<AirdropPage />} />
<Route path={APP_PATHS.LiveWalkthrough} element={<TutorialPage />} />
<Route path={APP_PATHS.ComingSoon} element={<ComingSoonPage />} />
<Route path={APP_PATHS.NotAvailable} element={<NotAvailablePage />} />
<Route path={APP_PATHS.FAQ} element={<FAQPage />} />
<Route path={APP_PATHS.Internal} element={<InternalDevPage />} />
<Route path="/" element={<Navigate to={APP_PATHS.Channels} />} />
<Route path={APP_PATHS.Support} element={<SupportPage />} />
<Route path={APP_PATHS.UserSettings} element={<UserSettingsPage />} />
<Route path={APP_PATHS.ChannelSettings} element={<NotifSettingsPage />} />
<Route
path={APP_PATHS.YieldV2}
element={<YieldFarmingV2Page />}
/>
<Route
path={APP_PATHS.Rockstar}
element={<NFTPage />}
/>
<Route
path={APP_PATHS.Gratitude}
element={<AirdropPage />}
/>
<Route
path={APP_PATHS.LiveWalkthrough}
element={<TutorialPage />}
/>
<Route
path={APP_PATHS.ComingSoon}
element={<ComingSoonPage />}
/>
<Route
path={APP_PATHS.NotAvailable}
element={<NotAvailablePage />}
/>
<Route
path={APP_PATHS.FAQ}
element={<FAQPage />}
/>
<Route
path={APP_PATHS.Internal}
element={<InternalDevPage />}
/>
<Route
path="/"
element={<Navigate to={APP_PATHS.Channels} />}
/>
<Route
path={APP_PATHS.Support}
element={<SupportPage />}
/>
<Route
path={APP_PATHS.UserSettings}
element={<UserSettingsPage />}
/>
<Route
path={APP_PATHS.ChannelSettings}
element={<NotifSettingsPage />}
/>
<Route
path="*"
element={<NotFoundPage />}
/>
</Routes>
</Suspense>
</Interface>
Expand All @@ -142,9 +225,9 @@ function MasterInterfacePage() {

{/* Modal displaying ReceiveNotifications */}
<MetamaskPushSnapModalComponent
id='receive-notifications'
id="receive-notifications"
InnerComponent={MetamaskPushSnapModal}
modalPadding='0px'
modalPadding="0px"
modalPosition={MODAL_POSITION.ON_ROOT}
/>

Expand All @@ -157,7 +240,8 @@ function MasterInterfacePage() {
onClick={(e) => {
e.preventDefault();
setPlayTeaserVideo(!playTeaserVideo);
}}>
}}
>
<PreviewContent className="contentBox">
<PreviewClose
href="#"
Expand All @@ -167,16 +251,21 @@ function MasterInterfacePage() {
onClick={(e) => {
e.preventDefault();
setPlayTeaserVideo(!playTeaserVideo);
}}>
<VscClose size={40} color="#fff" />
}}
>
<VscClose
size={40}
color="#fff"
/>
</PreviewClose>
<Preview>
<div className="videoWrapper">
<iframe
src={loadTeaserVideo}
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
allowfullscreen
></iframe>
</div>
</Preview>
</PreviewContent>
Expand Down

0 comments on commit 856e973

Please sign in to comment.