rename ecash routes

6 files changed, 128 insertions, 81 deletions

diff --git a/src/routes/(app)/ecash/[id]/+layout.server.js b/src/routes/(app)/ecash/[id]/+layout.server.js
new file mode 100644
index 00000000..0b8b2917
--- /dev/null
+++ b/src/routes/(app)/ecash/[id]/+layout.server.js
@@ -0,0 +1,10 @@
+import { auth, get } from "$lib/utils";
+import { fail, redirect } from "@sveltejs/kit";
+import parse from "$lib/parse";
+
+export async function load({ cookies, params, request, url }) {
+  let { id } = params;
+  let { token, status } = await get(`/cash/${id}`);
+  let { spent, total, mint, external } = status;
+  return { id, token, spent, total, mint, external };
+}
diff --git a/src/routes/(app)/ecash/[id]/+layout.svelte b/src/routes/(app)/ecash/[id]/+layout.svelte
new file mode 100644
index 00000000..d3c95e00
--- /dev/null
+++ b/src/routes/(app)/ecash/[id]/+layout.svelte
@@ -0,0 +1,53 @@
+<script>
+  import AppHeader from "$comp/AppHeader.svelte";
+  import { getDecodedToken } from "@cashu/cashu-ts";
+  import { copy, sats, f, s } from "$lib/utils";
+  import { t } from "$lib/translations";
+  import Icon from "$comp/Icon.svelte";
+
+  export let data;
+
+  let { id, rates, user, token, total, spent, external, mint } = data;
+  let currency = user?.currency || "USD";
+  let rate = rates[currency];
+
+  let amount = total - spent;
+
+  $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
+  $: spentFiat = parseFloat(((spent * rate) / sats).toFixed(2));
+</script>
+
+<div class="container px-4 max-w-lg mx-auto space-y-5 mt-20">
+  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
+    {$t("payments.ecash")}
+  </h1>
+
+  {#if amount > 0}
+    <div class="text-center font-bold text-2xl">
+      <div>
+        {f(amountFiat, currency)}
+      </div>
+      <div>
+        <span class="text-secondary font-normal text-xl"
+          >⚡️{`${s(amount)}`}</span
+        >
+      </div>
+    </div>
+  {/if}
+
+  {#if spent > 0}
+    <div class="text-center font-bold text-2xl">
+      <div>
+        {f(spentFiat, currency)}
+        <span class=" text-red-600">{$t("payments.spent")}</span>
+      </div>
+      <div>
+        <span class="text-secondary font-normal text-xl"
+          >⚡️{`${s(spent)}`}</span
+        >
+      </div>
+    </div>
+  {/if}
+
+  <slot />
+</div>
diff --git a/src/routes/(app)/ecash/[id]/+page.server.js b/src/routes/(app)/ecash/[id]/+page.server.js
index 421c8cb6..15511174 100644
--- a/src/routes/(app)/ecash/[id]/+page.server.js
+++ b/src/routes/(app)/ecash/[id]/+page.server.js
@@ -1,11 +1,18 @@
-import { auth, get } from "$lib/utils";
 import { fail, redirect } from "@sveltejs/kit";
-import parse from "$lib/parse";
+import { auth, fd, post } from "$lib/utils";
 
-export async function load({ cookies, params, request, url }) {
-  let { id } = params;
-  let { token, status } = await get(`/cash/${id}`);
-  let spent = parseInt(status.spent);
-  let total = parseInt(status.total);
-  return { id, token, spent, total };
-}
+export const actions = {
+  default: async ({ cookies, request }) => {
+    let { token } = await fd(request);
+    let claimed;
+    try {
+      claimed = await post(`/claim`, { token }, auth(cookies));
+      claimed = { ok: true };
+    } catch (e) {
+      return fail(400, { error: e.message });
+    }
+    if (claimed?.ok) {
+      redirect(307, `/${cookies.get("username")}/payments`);
+    }
+  },
+};
diff --git a/src/routes/(app)/ecash/[id]/+page.svelte b/src/routes/(app)/ecash/[id]/+page.svelte
index 18a1cba2..375f168a 100644
--- a/src/routes/(app)/ecash/[id]/+page.svelte
+++ b/src/routes/(app)/ecash/[id]/+page.svelte
@@ -1,95 +1,64 @@
 <script>
-  import AppHeader from "$comp/AppHeader.svelte";
-  import { getDecodedToken } from "@cashu/cashu-ts";
+  import { enhance } from "$app/forms";
   import { copy, sats, f, s } from "$lib/utils";
   import { t } from "$lib/translations";
   import Icon from "$comp/Icon.svelte";
   import { page } from "$app/stores";
 
   export let data;
-
-  let { id, rates, user, token, total, spent } = data;
-  let currency = user?.currency || "USD";
-  let rate = rates[currency];
-
-  let amount = total - spent;
+  export let form;
 
   let link = $page.url.href;
-
-  $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
-  $: spentFiat = parseFloat(((spent * rate) / sats).toFixed(2));
+      let { id, total, token, external, spent } = data;
 </script>
 
-<div class="container px-4 max-w-lg mx-auto space-y-5 mt-20">
-  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
-    {$t("payments.ecash")}
-  </h1>
-
-  {#if amount > 0}
-    <div class="text-center font-bold text-2xl">
-      <div>
-        {f(amountFiat, currency)}
-      </div>
-      <div>
-        <span class="text-secondary font-normal text-xl"
-          >⚡️{`${s(amount)}`}</span
-        >
-      </div>
+{#if form?.error}
+  <div class="mb-5">
+    <div class="text-red-600">
+      {form.error === "default" ? $t("error.unrecognizedInput") : form.error}
     </div>
-  {/if}
-
-  {#if spent > 0}
-    <div class="text-center font-bold text-2xl">
-      <div>
-        {f(spentFiat, currency)}
-        <span class=" text-red-600">{$t("payments.spent")}</span>
-      </div>
-      <div>
-        <span class="text-secondary font-normal text-xl"
-          >⚡️{`${s(spent)}`}</span
-        >
-      </div>
-    </div>
-  {/if}
-
-  <div class="flex flex-wrap gap-2 text-xl">
-    <button
-      type="button"
-      class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full justify-center gap-2"
-      on:click={() => copy(link)}
-    >
-      <Icon icon="link" style="w-8 my-auto" />
-      <div class="my-auto">{$t("payments.copyLink")}</div>
-    </button>
+  </div>
+{/if}
 
-    <!-- TODO we need animated QR's -->
-    <!-- <a href={`/qr/${encodeURIComponent(token)}`} class="contents"> -->
-    <!--   <button -->
-    <!--     type="button" -->
-    <!--     class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full justify-center gap-2" -->
-    <!--   > -->
-    <!--     <Icon icon="qr" style="w-8 my-auto invert" /> -->
-    <!--     <div class="my-auto">{$t("payments.qr")}</div> -->
-    <!--   </button> -->
-    <!-- </a> -->
+<div class="flex flex-wrap gap-2 text-xl">
+  <button
+    type="button"
+    class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full justify-center gap-2"
+    on:click={() => copy(link)}
+  >
+    <Icon icon="link" style="w-8 my-auto" />
+    <div class="my-auto">{$t("payments.copyLink")}</div>
+  </button>
 
-    {#if spent < total}
-      <a href={`/voucher/${id}`} class="contents">
+  {#if spent < total}
+    {#if external}
+      <a href={`/ecash/${id}/swap`} class="contents">
         <button
-          type="button"
+          type="submit"
           class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full justify-center gap-2"
         >
           <Icon icon="receive" style="w-8 my-auto" />
-          <div class="my-auto">{$t("payments.redeem")}</div>
+          <div class="my-auto">{$t("payments.swap")}</div>
         </button>
       </a>
+    {:else}
+      <form method="POST" use:enhance class="w-full">
+        <input type="hidden" name="token" bind:value={token} />
+        <button
+          type="submit"
+          class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full justify-center gap-2"
+        >
+          <Icon icon="receive" style="w-8 my-auto" />
+          <div class="my-auto">{$t("payments.redeem")}</div>
+        </button>
+      </form>
     {/if}
+  {/if}
 
-    <button
-      class="border rounded-2xl px-6 py-5 w-full break-all text-xl hover:bg-slate-100"
-      on:click={() => copy(token)}
-    >
-      {token}
-    </button>
-  </div>
+  <button
+    class="border rounded-2xl px-6 py-5 w-full break-all text-xl hover:bg-slate-100"
+    on:click={() => copy(token)}
+  >
+    {token}
+  </button>
 </div>
diff --git a/src/routes/(app)/ecash/[id]/swap/+page.server.ts b/src/routes/(app)/ecash/[id]/swap/+page.server.ts
new file mode 100644
index 00000000..c8806bf0
--- /dev/null
+++ b/src/routes/(app)/ecash/[id]/swap/+page.server.ts
@@ -0,0 +1,3 @@
+  export async function load() {
+  return { test: 123 };
+}
diff --git a/src/routes/(app)/ecash/[id]/swap/+page.svelte b/src/routes/(app)/ecash/[id]/swap/+page.svelte
new file mode 100644
index 00000000..3df9504d
--- /dev/null
+++ b/src/routes/(app)/ecash/[id]/swap/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let data;
+</script>
+
+<div class="text-center">Support for swapping in cash from other mints is coming soon</div>