update: add 404 page

frontend/src/app/[chain]/[...not-found]/page.tsx

@@ -0,0 +1,5 @@
+import { NotFound } from '../../../views/NotFound';
+
+export default function Page() {
+  return <NotFound />;
+}

frontend/src/app/[chain]/drive/layout.tsx → frontend/src/app/[chain]/layout.tsx

@@ -8,24 +8,24 @@ import {
   UsersIcon,
   Earth,
 } from 'lucide-react';
-import { InternalLink } from '../../../components/common/InternalLink';
-import '../../globals.css';
-import { UserEnsurer } from '../../../components/UserEnsurer';
-import { RoleProtected } from '../../../components/RoleProtected';
-import { UserRole } from '../../../models/User';
-import { RemainingCreditTracker } from '../../../components/RemainingCreditTracker';
+import { InternalLink } from '../../components/common/InternalLink';
+import '../globals.css';
+import { UserEnsurer } from '../../components/UserEnsurer';
+import { RoleProtected } from '../../components/RoleProtected';
+import { UserRole } from '../../models/User';
+import { RemainingCreditTracker } from '../../components/RemainingCreditTracker';
 import { useMemo } from 'react';
 import Image from 'next/image';
-import { useUserStore } from '../../../states/user';
+import { useUserStore } from '../../states/user';
 import { SessionProvider } from 'next-auth/react';
 import {
   defaultNetworkId,
   NetworkId,
   networks,
-} from '../../../constants/networks';
-import { NetworkProvider } from '../../../contexts/network';
+} from '../../constants/networks';
+import { NetworkProvider } from '../../contexts/network';
 import { redirect } from 'next/navigation';
-import { NetworkDropdown } from '../../../components/NetworkDropdown';
+import { NetworkDropdown } from '../../components/NetworkDropdown';
 
 export default function AppLayout({
   children,

frontend/src/views/NotFound/index.tsx

@@ -0,0 +1,36 @@
+// Start of Selection
+'use client';
+
+import { XIcon } from 'lucide-react';
+import { DiscordIcon } from '../../components/common/DiscordIcon';
+import { EXTERNAL_ROUTES } from '../../constants/routes';
+
+export const NotFound = () => {
+  return (
+    <div className='p-8 text-center'>
+      <h1 className='mb-4 text-2xl font-bold'>oops.</h1>
+      <p className='mb-4'>
+        Oops! Looks like the route you&apos;re looking for doesn&apos;t exist.
+      </p>
+      <p className='mb-4 flex items-center justify-center'>
+        If you think this is an error, please contact us at{' '}
+        <a
+          href={EXTERNAL_ROUTES.social.discord}
+          target='_blank'
+          rel='noreferrer'
+          className='pl-[8px]'
+        >
+          <DiscordIcon />
+        </a>{' '}
+        or{' '}
+        <a
+          href={EXTERNAL_ROUTES.social.twitter}
+          target='_blank'
+          rel='noreferrer'
+        >
+          <XIcon />
+        </a>
+      </p>
+    </div>
+  );
+};