diff --git a/web/pages/link/[slug].tsx b/web/pages/link/[slug].tsx index af3f01a8..c7457f27 100644 --- a/web/pages/link/[slug].tsx +++ b/web/pages/link/[slug].tsx @@ -38,45 +38,47 @@ export default function ClaimPage() {
- <div className="my-auto"> - <Button - onClick={async () => { - setClaiming(true) - try { - if (user == null) { - await firebaseLogin() - setClaiming(false) - return - } - if (user?.id == manalink.fromId) { - throw new Error("You can't claim your own manalink.") - } - await claimManalink({ slug: manalink.slug }) - user && router.push(`/${user.username}?claimed-mana=yes`) - } catch (e) { - console.log(e) - const message = - e && e instanceof Object - ? e.toString() - : 'An error occurred.' - setError(message) - } - setClaiming(false) - }} - disabled={claiming} - size="lg" - > - {user ? 'Claim' : 'Login'} - </Button> - </div> + <div className="my-auto"></div> </Row> + <ManalinkCard info={info} /> + {error && ( <section className="my-5 text-red-500"> <p>Failed to claim manalink.</p> <p>{error}</p> </section> )} + + <Row className="items-center"> + <Button + onClick={async () => { + setClaiming(true) + try { + if (user == null) { + await firebaseLogin() + setClaiming(false) + return + } + if (user?.id == manalink.fromId) { + throw new Error("You can't claim your own manalink.") + } + await claimManalink({ slug: manalink.slug }) + user && router.push(`/${user.username}?claimed-mana=yes`) + } catch (e) { + console.log(e) + const message = + e && e instanceof Object ? e.toString() : 'An error occurred.' + setError(message) + } + setClaiming(false) + }} + disabled={claiming} + size="lg" + > + {user ? `Claim M$${manalink.amount}` : 'Login to claim'} + </Button> + </Row> </div> </> )