Add a custom 404 page that directs to Discord.

web/pages/404.tsx

@@ -0,0 +1,29 @@
+import { Page } from '../components/page'
+import { Title } from '../components/title'
+
+export default function Custom404() {
+  // Get the current URL from the window
+  const url = window.location.href
+
+  return (
+    <Page>
+      <div className="flex flex-col items-center justify-center h-full">
+        <Title text="404: Oops!" />
+        <p>
+          Nothing exists at
+          <span className="p-2 font-mono">{url}</span>
+        </p>
+        <p>If you didn't expect this, let us know on Discord!</p>
+        <br />
+        <iframe
+          src="https://discord.com/widget?id=915138780216823849&theme=dark"
+          width="350"
+          height="500"
+          allowTransparency={true}
+          frameBorder="0"
+          sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
+        ></iframe>
+      </div>
+    </Page>
+  )
+}

web/pages/[username]/[contractSlug].tsx

@@ -21,6 +21,7 @@ import { Page } from '../../components/page'
 import { contractTextDetails } from '../../components/contract-card'
 import { Bet, listAllBets } from '../../lib/firebase/bets'
 import { Comment, listAllComments } from '../../lib/firebase/comments'
+import Custom404 from '../404'
 
 export async function getStaticProps(props: { params: any }) {
   const { username, contractSlug } = props.params
@@ -62,7 +63,7 @@ export default function ContractPage(props: {
   const { bets, comments } = props
 
   if (!contract) {
-    return <div>Contract not found...</div>
+    return <Custom404 />
   }
 
   const { creatorId, isResolved, resolution, question } = contract

web/pages/[username]/index.tsx

@@ -1,10 +1,10 @@
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
-import Error from 'next/error'
 
 import { getUserByUsername, User } from '../../lib/firebase/users'
 import { UserPage } from '../../components/user-page'
 import { useUser } from '../../hooks/use-user'
+import Custom404 from '../404'
 
 export default function UserProfile() {
   const router = useRouter()
@@ -18,13 +18,11 @@ export default function UserProfile() {
 
   const currentUser = useUser()
 
-  const errorMessage = `Who is this "${username}" you speak of..`
-
   if (user === 'loading') return <></>
 
   return user ? (
     <UserPage user={user} currentUser={currentUser || undefined} />
   ) : (
-    <Error statusCode={404} title={errorMessage} />
+    <Custom404 />
   )
 }

web/pages/admin.tsx

@@ -6,6 +6,7 @@ import dayjs from 'dayjs'
 import { useUsers } from '../hooks/use-users'
 import { useUser } from '../hooks/use-user'
 import Error from 'next/error'
+import Custom404 from './404'
 
 function avatarHtml(avatarUrl: string) {
   return `<img
@@ -85,6 +86,6 @@ export default function Admin() {
       <UsersTable />
     </Page>
   ) : (
-    <Error statusCode={404} title='Who is this "admin" you speak of...' />
+    <Custom404 />
   )
 }