create fund

5 files changed, 106 insertions, 83 deletions

diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index ebc705b5..261a1784 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -94,6 +94,14 @@
         <div class="my-auto">{$t("payments.createEcash")}</div>
       </button>
     </a>
+
+    <a href="/send/fund" class="block">
+      <button type="button" class="btn">
+        <iconify-icon icon="ph:lightning-fill" class="text-yellow-300 text-2xl"
+        ></iconify-icon>
+        <div class="my-auto">{$t("payments.createFund")}</div>
+      </button>
+    </a>
   </form>
 
   {#if contacts.length}
diff --git a/src/routes/(app)/send/fund/[...name]/[...amount]/+page.server.ts b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.server.ts
new file mode 100644
index 00000000..428d8d78
--- /dev/null
+++ b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.server.ts
@@ -0,0 +1,28 @@
+import getRates from "$lib/rates";
+import { auth, fd, post } from "$lib/utils";
+import { fail, redirect } from "@sveltejs/kit";
+
+export async function load({ parent, params }) {
+  let { name, amount } = params;
+  if (!name) name = crypto.randomUUID();
+	const { user } = await parent();
+	const rates = await getRates();
+	const rate = rates[user.currency];
+	return { name, amount, rate };
+}
+
+export const actions = {
+	default: async ({ cookies, request }) => {
+		const body = await fd(request);
+		let p;
+
+		try {
+			p = await post("/payments", body, auth(cookies));
+		} catch (e) {
+			const { message } = e as Error;
+			return fail(400, { message });
+		}
+
+		if (p) redirect(307, `/fund/${body.fund}`);
+	},
+};
diff --git a/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
new file mode 100644
index 00000000..314be3ef
--- /dev/null
+++ b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
@@ -0,0 +1,70 @@
+<script>
+  import { t } from "$lib/translations";
+  import { enhance } from "$app/forms";
+  import Numpad from "$comp/Numpad.svelte";
+  import Spinner from "$comp/Spinner.svelte";
+  import { page } from "$app/stores";
+  import { pin } from "$lib/store";
+  import handler from "$lib/handler";
+  import { s } from "$lib/utils";
+
+  let { data, form } = $props();
+  let { amount } = $state(data);
+  let { balance, currency } = data.user;
+  let { name, rate } = $derived(data);
+  let loading = $state();
+  let fiat = $state();
+
+  let submit = $state();
+  let submitting = $state();
+  let toggle = () => (submitting = !submitting);
+  $effect(() => {
+    if (form?.message?.includes("pin")) $pin = undefined;
+    loading = false;
+  });
+
+  let setMax = (e) => {
+    e.preventDefault();
+    fiat = false;
+    amount = balance;
+  };
+</script>
+
+{#if form?.message}
+  <div class="text-red-600 text-center">
+    {form.message}
+  </div>
+{/if}
+
+<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">
+    <input name="fund" value={name} type="hidden" />
+    <input name="amount" value={amount} type="hidden" />
+    <input name="pin" value={$pin} type="hidden" />
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="btn !w-auto grow"
+        onclick={setMax}
+        disabled={submitting}
+        onkeydown={setMax}>Max ⚡️{s(balance)}</button
+      >
+
+      <button
+        use:focus
+        bind:this={submit}
+        type="submit"
+        class="btn btn-accent !w-auto grow"
+      >
+        {#if submitting}
+          <Spinner />
+        {:else}
+          <div class="my-auto">{$t("payments.next")}</div>
+        {/if}
+      </button>
+    </div>
+  </form>
+</div>
diff --git a/src/routes/(app)/send/fund/[name]/[...amount]/+page.server.ts b/src/routes/(app)/send/fund/[name]/[...amount]/+page.server.ts
deleted file mode 100644
index ed39f96b..00000000
--- a/src/routes/(app)/send/fund/[name]/[...amount]/+page.server.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { fail, redirect } from "@sveltejs/kit";
-import { auth, fd, post } from "$lib/utils";
-
-export const actions = {
-	default: async ({ cookies, request }) => {
-		const body = await fd(request);
-		let p;
-
-		try {
-			p = await post("/payments", body, auth(cookies));
-		} catch (e: any) {
-			return fail(400, { message: e.message });
-		}
-
-		if (p) redirect(307, `/fund/${body.name}`);
-	},
-};
diff --git a/src/routes/(app)/send/fund/[name]/[...amount]/+page.svelte b/src/routes/(app)/send/fund/[name]/[...amount]/+page.svelte
deleted file mode 100644
index d1c3b204..00000000
--- a/src/routes/(app)/send/fund/[name]/[...amount]/+page.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-  import { run } from 'svelte/legacy';
-
-  import { t } from "$lib/translations";
-  import { enhance } from "$app/forms";
-  import Icon from "$comp/Icon.svelte";
-  import Numpad from "$comp/Numpad.svelte";
-  import Spinner from "$comp/Spinner.svelte";
-  import { page } from "$app/stores";
-  import { back } from "$lib/utils";
-  import { pin } from "$lib/store";
-
-  let { data, form } = $props();
-
-  let { amount, name } = $state($page.params);
-  let { rates } = data;
-  let { currency } = data.user;
-  let loading = $state();
-
-
-  let submit = () => (loading = true);
-  let update = () => {
-    if (form?.message?.includes("pin")) $pin = undefined;
-    loading = false;
-  };
-  let rate;
-  run(() => {
-    rate = rates[currency];
-  });
-  run(() => {
-    update(form);
-  });
-</script>
-
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" onclick={back}>
-  <Icon icon="arrow-left" style="w-10" />
-</button>
-
-{#if form?.message}
-  <div class="text-red-600 text-center">
-    {form.message}
-  </div>
-{/if}
-
-<div class="container px-4 mt-20 max-w-xl mx-auto">
-  <Numpad bind:amount {currency} bind:rate />
-
-  <form method="POST" use:enhance onsubmit={submit}>
-    <input name="name" value={name} type="hidden" />
-    <input name="amount" value={amount} type="hidden" />
-    <input name="pin" value={$pin} type="hidden" />
-
-    <div class="flex w-full">
-      <button
-        type="submit"
-        class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24"
-      >
-        {#if loading}
-          <Spinner />
-        {:else}
-          {$t("payments.send")}
-        {/if}
-      </button>
-    </div>
-  </form>
-</div>