From fd137d961392ebd8f6da9f86e57a1d7dfe07eef1 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 20 Dec 2023 14:41:19 -0800
Subject: new on-chain send ui

---
 .../(app)/send/bitcoin/[address]/+page.svelte      |  56 +++++++
 .../bitcoin/[address]/[...amount]/+page.server.js  |  40 -----
 .../bitcoin/[address]/[...amount]/+page.svelte     | 162 ---------------------
 .../[amount]/[...feeRate]/+page.server.js          |  36 +++++
 .../[address]/[amount]/[...feeRate]/+page.svelte   | 134 +++++++++++++++++
 5 files changed, 226 insertions(+), 202 deletions(-)
 create mode 100644 src/routes/(app)/send/bitcoin/[address]/+page.svelte
 delete mode 100644 src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js
 delete mode 100644 src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
 create mode 100644 src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.server.js
 create mode 100644 src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte

(limited to 'src/routes/(app)/send')

diff --git a/src/routes/(app)/send/bitcoin/[address]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
new file mode 100644
index 00000000..7648d41f
--- /dev/null
+++ b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
@@ -0,0 +1,56 @@
+<script>
+  import { t } from "$lib/translations";
+  import Icon from "$comp/Icon.svelte";
+  import Numpad from "$comp/Numpad.svelte";
+  import { page } from "$app/stores";
+  import { rate } from "$lib/store";
+  import { back, s } from "$lib/utils";
+
+  export let data;
+
+  let { rates } = data;
+  let { address } = $page.params;
+  let { balance, currency } = data.user;
+
+  let amount = 0;
+  let submit, fiat;
+
+  $: update(data);
+  let update = () => ($rate = data.rates[currency]);
+
+  let setMax = () => {
+    fiat = false;
+    amount = balance;
+  };
+</script>
+
+<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
+  <Icon icon="arrow-left" style="w-10" />
+</button>
+
+<div class="container px-4 max-w-xl mx-auto space-y-5 text-center">
+  <h1 class="text-3xl md:text-4xl font-semibold mb-2">{$t("payments.send")}</h1>
+
+  <div class="text-lg text-secondary break-all">{address}</div>
+
+  <Numpad bind:amount bind:fiat {currency} {submit} bind:rate={$rate} />
+
+  <div class="flex justify-center gap-2">
+    <button
+      type="button"
+      class="hover:opacity-80 bg-black text-white rounded-2xl py-3 px-4 mt-2 border font-bold"
+      on:click|preventDefault={setMax}
+      on:keydown={setMax}>Max ⚡️{s(balance)}</button
+    >
+
+    <form action={`./${address}/${amount}`}>
+      <button
+        bind:this={submit}
+        type="submit"
+        class="opacity-100 hover:opacity-80 rounded-2xl border py-3 font-bold mt-2 bg-black text-white px-4 w-24"
+      >
+        {$t("payments.next")}
+      </button>
+    </form>
+  </div>
+</div>
diff --git a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js
deleted file mode 100644
index 2998f22a..00000000
--- a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { fail, redirect } from "@sveltejs/kit";
-import { auth, post, fd } from "$lib/utils";
-
-let seen = {};
-export const actions = {
-  default: async ({ cookies, request }) => {
-    try {
-      let {
-        address,
-        amount,
-        confirmed,
-        feeRate,
-        subtract,
-        pin,
-        stale,
-        ts,
-      } = await await fd(request);
-      if (seen[ts]) return fail(400, { message: "Duplicate form submission" });
-
-      let estimate = await post(
-        "/bitcoin/fee",
-        { address, amount, feeRate, subtract },
-        auth(cookies)
-      );
-
-      let { tx } = estimate;
-
-      if (stale || !confirmed) return fail(400, estimate);
-
-      seen[ts] = 1;
-      setTimeout(() => delete seen[ts], 30000);
-
-      await post("/bitcoin/send", { pin, subtract, tx }, auth(cookies));
-    } catch (e) {
-      return fail(400, { message: e.message });
-    }
-
-    redirect(307, "/sent");
-  },
-};
diff --git a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
deleted file mode 100644
index a8b86718..00000000
--- a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
+++ /dev/null
@@ -1,162 +0,0 @@
-<script>
-  import { tick } from "svelte";
-  import { t } from "$lib/translations";
-  import { enhance } from "$app/forms";
-  import Toggle from "$comp/Toggle.svelte";
-  import Slider from "$comp/Slider.svelte";
-  import Icon from "$comp/Icon.svelte";
-  import Numpad from "$comp/Numpad.svelte";
-  import Spinner from "$comp/Spinner.svelte";
-  import { page } from "$app/stores";
-  import { fiat as toFiat, f, back, s, sat } from "$lib/utils";
-  import { pin } from "$lib/store";
-
-  export let data;
-  export let form;
-
-  let { rates } = data;
-  let { address, amount } = $page.params;
-  let { balance, currency } = data.user;
-  let loading,
-    submit,
-    fiat,
-    confirmed,
-    feeRate,
-    min,
-    max,
-    fee,
-    ourfee,
-    stale,
-    subtract,
-    adjusting;
-
-  $: rate = rates[currency];
-
-  let toggle = () => (loading = true);
-  let toggleAdjusting = () => (adjusting = !adjusting);
-
-  $: update(form);
-  let update = () => {
-    loading = false;
-    if (form?.message?.includes("pin")) $pin = undefined;
-    if (form) ({ min, max, feeRate, fee, ourfee, subtract } = form);
-    if (!ourfee) ourfee = 0;
-    if (feeRate) confirmed = true;
-    stale = false;
-  };
-
-  let setMax = () => {
-    fiat = false;
-    amount = balance;
-    subtract = true;
-  };
-
-  $: if (amount + fee > balance) subtract = true;
-
-  let timeout;
-  let handle = (e) => {
-    stale = true;
-    feeRate = e.target.value;
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      tick().then(() => submit.click());
-    }, 200);
-  };
-</script>
-
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={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 space-y-5 text-center">
-  <h1 class="text-3xl md:text-4xl font-semibold mb-2">{$t("payments.send")}</h1>
-
-  <div class="text-lg text-secondary break-all">{address}</div>
-
-  {#if confirmed}
-    <div class="text-center">
-      <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>
-
-    <div class="text-center">
-      <h2 class="text-secondary mb-5 text-lg">with fee</h2>
-
-      <div class="relative">
-        <h2 class="text-xl font-semibold">
-          {f(toFiat(fee + ourfee, rate), currency)}
-        </h2>
-        <h3 class="text-secondary mb-6 mt-1">⚡️{s(fee + ourfee)}</h3>
-        <button
-          class="absolute right-1/4 top-0 text-secondary p-4"
-          on:click={toggleAdjusting}
-          ><Icon icon="settings" style="opacity-30" /></button
-        >
-      </div>
-    </div>
-  {:else}
-    <Numpad bind:amount bind:fiat {currency} {submit} bind:rate />
-  {/if}
-
-  <form method="POST" use:enhance on:submit={toggle}>
-    <input name="ts" value={Date.now()} type="hidden" />
-    <input name="address" value={address} type="hidden" />
-    <input name="amount" value={amount} type="hidden" />
-    <input name="pin" value={$pin} type="hidden" />
-    <input name="confirmed" value={confirmed} type="hidden" />
-    <input name="feeRate" value={feeRate} type="hidden" />
-    <input name="stale" value={stale} type="hidden" />
-    <input name="subtract" value={subtract} type="hidden" />
-
-    {#if confirmed && adjusting}
-      <div class="relative mt-10 mb-20">
-        <div class="absolute top-5 left-0 text-secondary">
-          Slower (~40 blocks)
-        </div>
-        <div class="absolute top-5 right-0 text-secondary">
-          Faster (~1 block)
-        </div>
-        <Slider bind:value={feeRate} {handle} {min} {max} />
-      </div>
-      <div class="flex justify-center gap-2 mb-10">
-        <div class="my-auto">
-          <Toggle id="subtract" checked={subtract} bind:value={subtract} />
-        </div>
-        <label for="subtract" class="text-secondary text-lg my-auto mb-2"
-          >Take fee from amount</label
-        >
-      </div>
-    {/if}
-
-    <div class="flex justify-center gap-2">
-      {#if !confirmed}
-        <button
-          type="button"
-          class="hover:opacity-80 bg-black text-white rounded-2xl py-3 px-4 mt-2 border font-bold"
-          on:click|preventDefault={setMax}
-          on:keydown={setMax}>Max ⚡️{s(balance)}</button
-        >
-      {/if}
-
-      <button
-        bind:this={submit}
-        type="submit"
-        class="opacity-100 hover:opacity-80 rounded-2xl border py-3 font-bold mt-2 bg-black text-white px-4 w-24"
-        disabled={loading}>
-        {#if confirmed}
-          {$t("payments.send")}
-        {:else}
-          {$t("payments.next")}
-        {/if}
-      </button>
-    </div>
-  </form>
-</div>
diff --git a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.server.js b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.server.js
new file mode 100644
index 00000000..08741296
--- /dev/null
+++ b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.server.js
@@ -0,0 +1,36 @@
+import { fail, redirect } from "@sveltejs/kit";
+import { auth, post, fd } from "$lib/utils";
+
+let seen = {};
+
+export async function load({ params: { address, amount, feeRate }, cookies }) {
+  try {
+    let fees = await fetch(
+      `https://mempool.space/api/v1/fees/recommended`
+    ).then((r) => r.json());
+
+    if (!feeRate) feeRate = fees.halfHourFee;
+
+    let { fee, ourfee, hex } = await post(
+      "/bitcoin/fee",
+      { address, amount, feeRate: feeRate },
+      auth(cookies)
+    );
+
+    return { amount, address, fee, fees, feeRate, ourfee, hex };
+  } catch (e) {
+    throw redirect(307, `/send/bitcoin/${address}`);
+    }
+}
+
+export const actions = {
+  default: async ({ cookies, request }) => {
+    try {
+      let r = await post("/bitcoin/send", await fd(request), auth(cookies));
+    } catch (e) {
+      return fail(400, { message: e.message });
+    }
+
+    redirect(307, "/sent");
+  },
+};
diff --git a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
new file mode 100644
index 00000000..d583024c
--- /dev/null
+++ b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
@@ -0,0 +1,134 @@
+<script>
+  import { t } from "$lib/translations";
+  import { enhance } from "$app/forms";
+  import Toggle from "$comp/Toggle.svelte";
+  import Icon from "$comp/Icon.svelte";
+  import Spinner from "$comp/Spinner.svelte";
+  import { page } from "$app/stores";
+  import { fiat as toFiat, f, back, s, sat, closest } from "$lib/utils";
+  import { pin } from "$lib/store";
+  import { goto, invalidate } from "$app/navigation";
+  import { rate } from "$lib/store";
+
+  export let data;
+  export let form;
+
+  let { amount, address, fee, fees, feeRate, ourfee, rates, hex } = data;
+
+  $: reload(data);
+  let reload = () => {
+    ({ amount, address, fee, fees, feeRate, ourfee, rates, hex } = data);
+    feeRate = closest(Object.values(fees), feeRate);
+    if (!$rate) $rate = rates[currency];
+  };
+
+  let { balance, currency } = data.user;
+  let submitting, submit, showSettings;
+
+  let feeNames = {
+    fastestFee: "Fastest",
+    halfHourFee: "Fast",
+    hourFee: "Medium",
+    economyFee: "Slow",
+    minimumFee: "Slowest",
+  };
+
+  let toggleSettings = () => (showSettings = !showSettings);
+
+  $: update(form);
+  let update = () => {
+    submitting = false;
+    if (form?.message?.includes("pin")) $pin = undefined;
+  };
+
+  let setFee = () => goto(`/send/bitcoin/${address}/${amount}/${feeRate}`);
+</script>
+
+<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
+  <Icon icon="arrow-left" style="w-10" />
+</button>
+
+<div
+  class="container px-4 max-w-xl mx-auto space-y-5 text-center no-transition"
+>
+  {#if form?.message}
+    <div class="mb-5">
+      <div class="text-red-600">{form.message}</div>
+    </div>
+  {/if}
+
+  <h1 class="text-3xl md:text-4xl font-semibold mb-2">{$t("payments.send")}</h1>
+
+  <div class="text-xl text-secondary break-all">{address}</div>
+
+  <div class="text-center">
+    <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>
+
+  <div class="text-center">
+    <h2 class="text-secondary text-lg">{$t("payments.networkFee")}</h2>
+
+    <div class="flex flex-wrap gap-4 justify-center">
+      <select
+        bind:value={feeRate}
+        on:change={setFee}
+        class="border text-lg bg-white p-4 rounded-2xl text-center my-auto"
+      >
+        {#each Object.keys(fees) as feeName}
+          <option value={fees[feeName]}
+            >{feeNames[feeName]} &mdash; ⚡️{fees[feeName]}/vb</option
+          >
+        {/each}
+      </select>
+      <div class="my-auto">
+        <h2 class="text-xl">
+          {f(toFiat(fee, $rate), currency)}
+        </h2>
+        <h3 class="text-secondary">⚡️{s(fee)}</h3>
+      </div>
+    </div>
+  </div>
+
+  <div class="text-center">
+    <h2 class="text-secondary text-lg">{$t("payments.ourFee")}</h2>
+
+    <div class="flex flex-wrap gap-4 justify-center">
+      <div class="my-auto">
+        <h2 class="text-xl">
+          {f(toFiat(ourfee, $rate), currency)}
+        </h2>
+        <h3 class="text-secondary">⚡️{s(ourfee)}</h3>
+      </div>
+    </div>
+  </div>
+
+  <form method="POST" use:enhance on:submit={() => (submitting = true)}>
+    <input name="pin" value={$pin} type="hidden" />
+    <input name="hex" value={hex} type="hidden" />
+    <input name="rate" value={$rate} type="hidden" />
+
+    <div class="flex justify-center gap-2">
+      <button
+        bind:this={submit}
+        type="submit"
+        class="opacity-100 hover:opacity-80 rounded-2xl border py-3 font-bold mt-2 bg-black text-white px-4 w-24"
+        disabled={submitting}
+      >
+        {#if submitting}
+          <Spinner />
+        {:else}
+          {$t("payments.send")}
+        {/if}
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .no-transition {
+    view-transition-name: fee;
+  }
+</style>
-- 
cgit v1.2.3