sweep success

2 files changed, 39 insertions, 24 deletions

diff --git a/src/routes/(app)/fund/[id]/sweep/+page.svelte b/src/routes/(app)/fund/[id]/sweep/+page.svelte
index 0523b85a..986a84bb 100644
--- a/src/routes/(app)/fund/[id]/sweep/+page.svelte
+++ b/src/routes/(app)/fund/[id]/sweep/+page.svelte
@@ -1,35 +1,33 @@
 <script>
+  import Amount from "$comp/Amount.svelte";
+  import Success from "$comp/Success.svelte";
   import { scale } from "svelte/transition";
   import { toFiat, f, s } from "$lib/utils";
   import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
+  import { loc } from "$lib/utils";
 
   let { data } = $props();
 
-  let { amount, id, user, rates } = data;
+  let { amount, id, user, rate, rates } = data;
   let { currency } = user;
-  let rate = $derived(rates[currency]);
+  let locale = $derived(loc(user));
 </script>
 
-<div class="container px-4 max-w-xl mx-auto mt-10 space-y-5 text-center">
-  <div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
-    <Icon icon="check" style="mx-auto" />
-  </div>
-  <h1 class="text-3xl md:text-4xl font-bold mb-6">
-    {$t("payments.fundsClaimed")}
-  </h1>
-  <h2 class="text-2xl md:text-3xl font-semibold">
-    {f(toFiat(amount, rate), currency)}
-  </h2>
-  <h3 class="text-secondary md:text-lg mb-6 mt-1">
-    ⚡️{s(amount)}
-  </h3>
+<div class="container px-4 text-center mx-auto">
+  <Success
+    {amount}
+    {rate}
+    {currency}
+    {locale}
+    title={$t("payments.received")}
+  />
 </div>
 
-<a href={`/${user.username}`}>
-  <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
+<a href={`/${user.username}`} aria-label="Continue">
+  <div class="opacity-0 w-screen h-screen fixed top-24 left-0 z-50"></div>
 </a>
 
-<div class="flex justify-center">
+<div class="flex justify-center mt-4">
   {$t("payments.tapAnywhere")}
 </div>
diff --git a/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
index 314be3ef..652e0885 100644
--- a/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
@@ -7,10 +7,11 @@
   import { pin } from "$lib/store";
   import handler from "$lib/handler";
   import { s } from "$lib/utils";
+  import { applyAction, deserialize } from "$app/forms";
 
   let { data, form } = $props();
-  let { amount } = $state(data);
-  let { balance, currency } = data.user;
+  let { amount, user } = $state(data);
+  let { balance, currency } = $derived(user);
   let { name, rate } = $derived(data);
   let loading = $state();
   let fiat = $state();
@@ -22,11 +23,22 @@
     if (form?.message?.includes("pin")) $pin = undefined;
     loading = false;
   });
+  let formElement = $state();
 
-  let setMax = (e) => {
+  let setMax = async (e) => {
     e.preventDefault();
-    fiat = false;
-    amount = balance;
+    let body = new FormData(formElement);
+    body.set("fiat", false);
+    body.set("amount", user.balance);
+
+    const response = await fetch(formElement.action, {
+      method: "POST",
+      body,
+    });
+
+    const result = deserialize(await response.text());
+    if (result.type === "success") await invalidateAll();
+    applyAction(result);
   };
 </script>
 
@@ -39,7 +51,12 @@
 <div class="container px-4 mt-20 max-w-xl mx-auto">
   <Numpad bind:amount {currency} {rate} {fiat} {submit} />
 
-  <form use:enhance={handler(toggle)} method="POST" class="space-y-5">
+  <form
+    use:enhance={handler(toggle)}
+    method="POST"
+    class="space-y-5"
+    bind:this={formElement}
+  >
     <input name="fund" value={name} type="hidden" />
     <input name="amount" value={amount} type="hidden" />
     <input name="pin" value={$pin} type="hidden" />