send to tip page

6 files changed, 69 insertions, 55 deletions

diff --git a/src/routes/(app)/send/[...text]/+page.server.js b/src/routes/(app)/send/[...text]/+page.server.js
index 294dbdd0..479bca6b 100644
--- a/src/routes/(app)/send/[...text]/+page.server.js
+++ b/src/routes/(app)/send/[...text]/+page.server.js
@@ -29,7 +29,8 @@ let parse = async (t, host) => {
   if (t.includes("/fund")) redirect(307, t.substring(t.indexOf("/fund")));
 
   // lightning
-  if (t.toLowerCase().startsWith("lightning:")) t = t.toLowerCase().replace("lightning:", "");
+  if (t.toLowerCase().startsWith("lightning:"))
+    t = t.toLowerCase().replace("lightning:", "");
   if (t.toLowerCase().startsWith("lnurl")) redirect(307, `/ln/${t}`);
   if (t.includes(":")) t = t.split(":")[1];
 
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index ee7d7953..71db4e55 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -52,7 +52,7 @@
         on:keypress={keypress}
         class="w-full p-4 border rounded-xl h-48 text-xl"
         bind:value={text}
-          autocapitalize="none"
+        autocapitalize="none"
       />
     </div>
 
diff --git a/src/routes/(app)/send/bitcoin/[address]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
index 84f14c39..838c5c04 100644
--- a/src/routes/(app)/send/bitcoin/[address]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
@@ -25,13 +25,10 @@
 </script>
 
 <a href="/send">
-<button
-  type="button"
-  class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80"
->
-  <Icon icon="arrow-left" style="w-10" />
-</button>
-  </a>
+  <button type="button" class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80">
+    <Icon icon="arrow-left" style="w-10" />
+  </button>
+</a>
 
 <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>
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
index 9d86537d..d4498b39 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.server.js
+++ b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.server.js
@@ -26,7 +26,7 @@ export const actions = {
     try {
       let r = await post("/bitcoin/send", await fd(request), auth(cookies));
     } catch (e) {
-        console.log("problem sending bitcoin", e);
+      console.log("problem sending bitcoin", e);
       return fail(400, { address, amount, feeRate, message: e.message });
     }
 
diff --git a/src/routes/(app)/send/invoice/[id]/+page.server.js b/src/routes/(app)/send/invoice/[id]/+page.server.js
index c6b0a9a4..b0cbef45 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.server.js
+++ b/src/routes/(app)/send/invoice/[id]/+page.server.js
@@ -2,35 +2,18 @@ import { error, fail, redirect } from "@sveltejs/kit";
 import { fd, auth, get, post } from "$lib/utils";
 
 export async function load({ params: { id }, parent, url }) {
-  let { user } = await parent();
+  let { rates, user } = await parent();
 
-  let {
-    amount,
-    address,
-    currency,
-    hash,
-    rate,
-    prompt,
-    tip,
-    text,
-    user: recipient,
-  } = await get(`/invoice/${id}`);
+  let invoice = await get(`/invoice/${id}`);
 
-  if (prompt && tip === null)
-    redirect(307, `/${recipient.username}/invoice/${id}/tip`);
-  if (recipient.username === user.username)
+  console.log("OH", invoice, invoice.prompt, invoice.tip);
+
+  if (invoice.prompt && invoice.tip === null)
+    redirect(307, `/${invoice.user.username}/invoice/${id}/tip`);
+  if (invoice.user.username === user.username)
     error(500, { message: "Cannot send to self" });
 
-  return {
-    amount,
-    address,
-    currency,
-    hash,
-    tip,
-    rate,
-    payreq: text,
-    recipient,
-  };
+  return { invoice, rates, user };
 }
 
 export const actions = {
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index 64db6eb8..e3ee9297 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -9,22 +9,34 @@
   import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
-  import { post, back, f, fiat as toFiat, s, sats, focus } from "$lib/utils";
+  import {
+    btc,
+    sat,
+    post,
+    back,
+    f,
+    fiat as toFiat,
+    s,
+    sats,
+    focus,
+  } from "$lib/utils";
   export let data;
   export let form;
 
-  let { address, hash, payreq, recipient, tip, rates, user } = data;
+  let { invoice, rates, user } = data;
+  let { address, hash, payreq, user: recipient, tip } = invoice;
   let { currency } = user;
 
   $: reload(data);
   let reload = (data) => {
-    ({ address, hash, payreq, recipient, tip, rates, user } = data);
+    ({ invoice, rates, user } = data);
+    ({ address, hash, payreq, user: recipient, tip } = invoice);
     ({ currency } = user);
   };
 
-  $: rate = data.rate * (rates[user.currency] / rates[data.currency]);
+  $: rate = invoice.rate * (rates[user.currency] / rates[invoice.currency]);
 
-  let amount = form?.amount || data.amount;
+  let amount = form?.amount || invoice.amount;
   let a,
     af,
     amountFiat = amount * (rate / sats),
@@ -86,12 +98,12 @@
   </div>
 {/if}
 
-<div class="container px-4 max-w-xl mx-auto">
+<div class="container px-4 max-w-xl mx-auto text-center space-y-5">
   {#if amount}
-    <div class="text-center mb-8">
-      <h1 class="text-xl md:text-2xl text-secondary mb-2">
-        {$t("payments.send")}
-      </h1>
+    <h1 class="text-4xl font-bold">
+      {$t("payments.send")}
+    </h1>
+    <div>
       <h2 class="text-2xl md:text-3xl font-semibold">
         {f(toFiat(amount, rate), currency)}
         {#if tip}
@@ -100,7 +112,7 @@
           </span>
         {/if}
       </h2>
-      <h3 class="text-secondary md:text-lg mb-6 mt-1">
+      <h3 class="text-secondary md:text-lg mt-1">
         ⚡️{s(amount)}
 
         {#if tip}
@@ -109,18 +121,39 @@
           </span>
         {/if}
       </h3>
+    </div>
 
-      <h1 class="text-xl md:text-2xl text-secondary mb-2">
-        {$t("payments.to")}
-      </h1>
+    <h1 class="text-xl md:text-2xl text-secondary">
+      {$t("payments.to")}
+    </h1>
 
-      <div class="flex p-1 gap-2 justify-center">
-        <Avatar user={recipient} size={"20"} />
-        <p class="text-4xl break-words my-auto">
-          {recipient.username}
-        </p>
-      </div>
+    <div class="flex p-1 gap-2 justify-center">
+      <Avatar user={recipient} size={"20"} />
+      <p class="text-4xl break-words my-auto">
+        {recipient.username}
+      </p>
     </div>
+
+    {#if invoice.items.length}
+      <h1 class="text-xl md:text-2xl text-secondary">
+        {$t("payments.for")}
+      </h1>
+
+      {#each invoice.items as i}
+        <div class="grid grid-cols-4 text-xl">
+          <div class="mr-auto grow col-span-2">
+            <span class="mr-2">{i.quantity}</span>
+            {i.name}
+          </div>
+          <div class="font-semibold text-right">
+            {f(i.price * i.quantity, invoice.currency)}
+          </div>
+          <div class="text-secondary text-right text-lg my-auto">
+            {sat(btc(i.price * i.quantity, invoice.rate))}
+          </div>
+        </div>
+      {/each}
+    {/if}
   {:else}
     <Numpad
       bind:amount={a}