Barebones endpoint to claim mana

web/lib/firebase/manalinks.ts

@@ -1,4 +1,11 @@
-import { collection, orderBy, query, setDoc, where } from 'firebase/firestore'
+import {
+  collection,
+  getDoc,
+  orderBy,
+  query,
+  setDoc,
+  where,
+} from 'firebase/firestore'
 import { doc } from 'firebase/firestore'
 import { Manalink } from '../../../common/manalink'
 import { db } from './init'
@@ -53,6 +60,21 @@ function listUserManalinks(fromId?: string) {
   )
 }
 
+export async function getManalink(slug: string) {
+  const docSnap = await getDoc(doc(db, 'manalinks', slug))
+  return docSnap.data() as Manalink
+}
+
+export function useManalink(slug: string) {
+  const [manalink, setManalink] = useState<Manalink | null>(null)
+  useEffect(() => {
+    if (slug) {
+      getManalink(slug).then(setManalink)
+    }
+  }, [slug])
+  return manalink
+}
+
 export function listenForUserManalinks(
   fromId: string | undefined,
   setLinks: (links: Manalink[]) => void

web/pages/send/[slug].tsx

@@ -0,0 +1,39 @@
+import { useRouter } from 'next/router'
+import { Page } from 'web/components/page'
+import { SEO } from 'web/components/SEO'
+import { Title } from 'web/components/title'
+import { claimManalink } from 'web/lib/firebase/api-call'
+import { useManalink } from 'web/lib/firebase/manalinks'
+
+export default function ClaimPage() {
+  const router = useRouter()
+  const { slug } = router.query as { slug: string }
+  const manalink = useManalink(slug)
+
+  if (!manalink) {
+    return <></>
+  }
+
+  return (
+    <Page>
+      <SEO
+        title="Send Mana"
+        description="Send mana to anyone via link!"
+        url="/send"
+      />
+      <Title text={`Claim ${manalink.amount} mana`} />
+      <p>
+        You can claim {manalink.amount} mana from {manalink.fromId} by clicking
+        the button below.
+      </p>
+      <button
+        className="btn"
+        onClick={async () => {
+          await claimManalink(manalink.slug)
+        }}
+      >
+        Claim
+      </button>
+    </Page>
+  )
+}