6cc2d8af58
* Set up Firestore structure for mana bounty links
* Split up manalinks into successes and failures
* Allow clients to create manalinks
* Track txnId and successful users
* Store custom amounts in the link
* List all manalinks you've created
* Support backend for claiming manalinks
* Add some more error handling
* Tweak readme
* Fix typescript breakage
* Revert "Convert common imports in functions to be absolute"
This reverts commit c03518e906.
* Scaffolding so `claimManalink` works
* Clean up imports
* Barebones endpoint to claim mana
* Fix rules to only allow link creators to query
* Design out claim giftcard
* List all claimed transactions
* Style in a more awesome card
* Fix import
* Padding tweak
* Fix useManalinkTxns hook
* /send -> /link
* Tidy up some details
* Do a bunch of random manalinks work
* Fix up LinksTable to build
* Clean up LinksTable an absurd amount
* Basic details functionality on manalinks table
* Work on manalink claim stuff
* Fix up some merge mess
* Not-signed-in flow implemented
* Better manalinks table
* Only show outstanding links in table
* Use new `ManalinkTxn` type
* /link -> /links
* Change manalinks page UI to use nice looking tabs
* Many fixes to manalinks UI
* Default to 1 use
* Tidying up
* Some copy changes based on feedback
* Add required index
Co-authored-by: Marshall Polaris <marshall@pol.rs>
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import { useState } from 'react'
|
|
import { SEO } from 'web/components/SEO'
|
|
import { Title } from 'web/components/title'
|
|
import { claimManalink } from 'web/lib/firebase/fn-call'
|
|
import { useManalink } from 'web/lib/firebase/manalinks'
|
|
import { ManalinkCard } from 'web/components/manalink-card'
|
|
import { useUser } from 'web/hooks/use-user'
|
|
import { useUserById } from 'web/hooks/use-users'
|
|
import { firebaseLogin } from 'web/lib/firebase/users'
|
|
|
|
export default function ClaimPage() {
|
|
const user = useUser()
|
|
const router = useRouter()
|
|
const { slug } = router.query as { slug: string }
|
|
const manalink = useManalink(slug)
|
|
const [claiming, setClaiming] = useState(false)
|
|
const [error, setError] = useState<string | undefined>(undefined)
|
|
|
|
const fromUser = useUserById(manalink?.fromId)
|
|
if (!manalink) {
|
|
return <></>
|
|
}
|
|
|
|
const info = { ...manalink, uses: manalink.claims.length }
|
|
return (
|
|
<>
|
|
<SEO
|
|
title="Send Mana"
|
|
description="Send mana to anyone via link!"
|
|
url="/send"
|
|
/>
|
|
<div className="mx-auto max-w-xl">
|
|
<Title text={`Claim ${manalink.amount} mana`} />
|
|
<ManalinkCard
|
|
defaultMessage={fromUser?.name || 'Enjoy this mana!'}
|
|
info={info}
|
|
isClaiming={claiming}
|
|
onClaim={async () => {
|
|
setClaiming(true)
|
|
try {
|
|
if (user == null) {
|
|
await firebaseLogin()
|
|
}
|
|
const result = await claimManalink(manalink.slug)
|
|
if (result.data.status == 'error') {
|
|
throw new Error(result.data.message)
|
|
}
|
|
router.push('/account?claimed-mana=yes')
|
|
} catch (e) {
|
|
console.log(e)
|
|
const message =
|
|
e && e instanceof Object ? e.toString() : 'An error occurred.'
|
|
setError(message)
|
|
}
|
|
setClaiming(false)
|
|
}}
|
|
/>
|
|
{error && (
|
|
<section className="my-5 text-red-500">
|
|
<p>Failed to claim manalink.</p>
|
|
<p>{error}</p>
|
|
</section>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|