move claim button

web/pages/link/[slug].tsx

@@ -38,7 +38,19 @@ export default function ClaimPage() {
       <div className="mx-auto max-w-xl px-2">
         <Row className="items-center justify-between">
           <Title text={`Claim M$${manalink.amount} mana`} />
-          <div className="my-auto">
+          <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)
@@ -56,9 +68,7 @@ export default function ClaimPage() {
               } catch (e) {
                 console.log(e)
                 const message =
-                    e && e instanceof Object
-                      ? e.toString()
-                      : 'An error occurred.'
+                  e && e instanceof Object ? e.toString() : 'An error occurred.'
                 setError(message)
               }
               setClaiming(false)
@@ -66,17 +76,9 @@ export default function ClaimPage() {
             disabled={claiming}
             size="lg"
           >
-              {user ? 'Claim' : 'Login'}
+            {user ? `Claim M$${manalink.amount}` : 'Login to claim'}
           </Button>
-          </div>
         </Row>
-        <ManalinkCard info={info} />
-        {error && (
-          <section className="my-5 text-red-500">
-            <p>Failed to claim manalink.</p>
-            <p>{error}</p>
-          </section>
-        )}
       </div>
     </>
   )