Add 404 page

src/app.tsx

@@ -30,7 +30,7 @@ const ErrorBoundary: FallbackRender = (props) => {
   });
 
   return (
-    <BaseLayout subtitle="Unexpected error">
+    <BaseLayout title="Unexpected error">
       <div>An unexpected error has occurred. Please refresh the page and try again.</div>
     </BaseLayout>
   );

src/components/layout/layout.tsx

@@ -17,7 +17,7 @@ type Props = {
 
 const Layout = ({ children, title, subtitle }: Props) => {
   return (
-    <BaseLayout subtitle={title}>
+    <BaseLayout title={title}>
       <Header title={title} subtitle={subtitle} />
       {children}
     </BaseLayout>
@@ -26,10 +26,10 @@ const Layout = ({ children, title, subtitle }: Props) => {
 
 interface BaseLayoutProps {
   children: ReactNode;
-  subtitle: string;
+  title: string;
 }
 
-export const BaseLayout = ({ children, subtitle }: BaseLayoutProps) => {
+export const BaseLayout = ({ children, title }: BaseLayoutProps) => {
   const [showNotice, setShowNotice] = useState(
     () => localStorage.getItem(ALLOW_ERROR_REPORTING) === null || localStorage.getItem(ALLOW_ANALYTICS) === null
   );
@@ -43,7 +43,7 @@ export const BaseLayout = ({ children, subtitle }: BaseLayoutProps) => {
   return (
     <>
       <Helmet>
-        <title>{`API3 DAO | ${subtitle}`}</title>
+        <title>{`API3 DAO | ${title}`}</title>
       </Helmet>
 
       <div className={styles.layout}>

src/pages/history/history.tsx

@@ -44,7 +44,7 @@ const History = () => {
   }, [history, checkedPrimary, checkedSecondary]);
 
   return (
-    <BaseLayout subtitle="History">
+    <BaseLayout title="History">
       <div className={styles.header}>
         <Header title="History"></Header>
       </div>

src/pages/not-found/index.ts

@@ -0,0 +1 @@
+export { default } from './not-found';

src/pages/not-found/not-found.module.scss

@@ -0,0 +1,70 @@
+@import '../../styles/variables.module.scss';
+@import '../../styles/fonts.module.scss';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 48px;
+  height: 100%;
+  width: 100%;
+
+  img {
+    width: 100%;
+    max-width: 310px;
+  }
+
+  @media (min-width: $sm) {
+    gap: 64px;
+
+    img {
+      max-width: 460px;
+    }
+  }
+
+  @media (min-width: $md) {
+    img {
+      max-width: 620px;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+
+  @media (min-width: $sm) {
+    gap: 32px;
+  }
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: center;
+  color: $color-dark-blue-100;
+
+  h1 {
+    @include font-heading-9;
+  }
+
+  p {
+    @include font-body-15;
+  }
+
+  @media (min-width: $sm) {
+    gap: 16px;
+
+    h1 {
+      @include font-heading-5;
+    }
+
+    p {
+      @include font-body-3;
+    }
+  }
+}

src/pages/not-found/not-found.tsx

@@ -0,0 +1,27 @@
+import { BaseLayout } from '../../components/layout';
+import styles from './not-found.module.scss';
+import { images } from '../../utils';
+import Button from '../../components/button';
+
+const NotFoundPage = () => {
+  return (
+    <BaseLayout title="404 Not Found">
+      <div className={styles.wrapper}>
+        <img src={images.notFound} alt="404" className={styles.image} />
+
+        <div className={styles.content}>
+          <div className={styles.text}>
+            <h1>Uh oh, that page doesn’t exist.</h1>
+            <p>Let’s get you back to home.</p>
+          </div>
+
+          <Button href="/" type="primary" className={styles.button} size="sm" sm={{ size: 'lg' }}>
+            Staking
+          </Button>
+        </div>
+      </div>
+    </BaseLayout>
+  );
+};
+
+export default NotFoundPage;

src/pages/proposal-commons/proposal-details/proposal-details.tsx

@@ -66,7 +66,7 @@ const ProposalDetailsLayout = (props: ProposalDetailsContentProps) => {
 
   const proposal = proposalDetailsSelector(provider, proposals, type, voteId);
   return (
-    <BaseLayout subtitle={`Proposal ${voteId.toString()}`}>
+    <BaseLayout title={`Proposal ${voteId.toString()}`}>
       <ProposalDetailsContent proposal={proposal} />
     </BaseLayout>
   );
@@ -82,6 +82,7 @@ const ProposalDetailsPage = () => {
   const decoded = useMemo(() => decodeProposalTypeAndVoteId(typeAndVoteId), [typeAndVoteId]);
 
   if (!decoded) return <NotFoundPage />;
+
   return <ProposalDetailsLayout {...decoded} />;
 };
 

src/utils/image-list.ts

@@ -26,6 +26,7 @@ export const images = {
   info: '/info.svg',
   infoCircle: '/info-circle.svg',
   notificationClose: '/notification-close.svg',
+  notFound: '/not-found.svg',
   success: '/success.svg',
   texture: '/texture.png',
   triangleBracketLeft: '/triangle-bracket-left.svg',