send to tip page

14 files changed, 86 insertions, 68 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index bf1090aa..0fbe90ab 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -77,6 +77,7 @@
       amount: btc(total, rate),
       currency,
       items: items.filter((i) => i.quantity > 0),
+      prompt: subject.prompt,
       rate,
     };
 
@@ -85,7 +86,7 @@
       user: { username: subject.username },
     });
 
-    goto(`/${subject.username}/invoice/${id}?options=true`, {
+    goto(`/${subject.username}/invoice/${id}`, {
       invalidateAll: true,
     });
   };
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index dca98c39..56feced6 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -51,7 +51,6 @@
     user: { username, currency },
   } = invoice;
 
-
   let qr;
   let tipPercent = 0;
 
@@ -93,7 +92,7 @@
   let subbed;
 
   onMount(async () => {
-    $showQr = $showQr && 1
+    $showQr = $showQr && 1;
     if (browser) {
       last.subscribe((v) => {
         if (!v || subbed) return;
@@ -146,7 +145,10 @@
 
   {#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="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, currency)}
       </div>
@@ -181,7 +183,6 @@
     </div>
   {/if}
 
-
   <button
     type="button"
     class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border bg-black text-white text-xl whitespace-nowrap"
@@ -193,7 +194,9 @@
     </div>
   </button>
 
-  <div class="w-full flex justify-center gap-2 flex-wrap text-secondary text-xl">
+  <div
+    class="w-full flex justify-center gap-2 flex-wrap text-secondary text-xl"
+  >
     <a href={link} class="w-full">
       <button
         class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
@@ -226,7 +229,6 @@
     <!-- > -->
   </div>
 
-
   <div class="flex justify-around text-secondary">
     <button
       class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 w-full justify-center"
diff --git a/src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte
index 02a896b2..10fbb239 100644
--- a/src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte
@@ -61,6 +61,7 @@
   let {
     amount,
     hash,
+    items,
     type,
     rate,
     received,
@@ -82,6 +83,7 @@
     ({
       amount,
       hash,
+      items,
       type,
       received,
       prompt,
@@ -116,6 +118,7 @@
     <input type="hidden" name="prompt" value="false" />
     <input type="hidden" name="type" value={type} />
     <input type="hidden" name="hash" value={hash} />
+    <input type="hidden" name="items" value={items} />
 
     <input type="hidden" name="request_id" value={invoice.request?.id} />
 
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
index a2044767..5ff691f0 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
@@ -27,7 +27,7 @@ export const actions = {
       return fail(400, { message: e.message });
     }
 
-      if (user.language) cookies.set("lang", user.language, { path: "/" });
+    if (user.language) cookies.set("lang", user.language, { path: "/" });
 
     return { user, success: true };
   },
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
index f31f8cbb..cdbe0623 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -78,7 +78,7 @@
       let data = new FormData(formElement);
 
       if (data.get("newNsec")) {
-          await setNsec(user, data.get("newNsec"));
+        await setNsec(user, data.get("newNsec"));
         data.set("nsec", user.nsec);
         data.set("pubkey", user.pubkey);
       }
diff --git a/src/routes/(app)/login/+page.svelte b/src/routes/(app)/login/+page.svelte
index 0afcad44..eb67bdcd 100644
--- a/src/routes/(app)/login/+page.svelte
+++ b/src/routes/(app)/login/+page.svelte
@@ -20,7 +20,7 @@
     sessionStorage.clear();
 
     let lang = $page.url.searchParams.get("lang");
-      if (lang) document.cookie = `lang=${lang} ;`;
+    if (lang) document.cookie = `lang=${lang} ;`;
   });
 
   export let form;
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}
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
index 03c7ec49..7b5d4f44 100644
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.js
@@ -1,4 +1,4 @@
-import { addTranslations, setLocale, setRoute } from '$lib/translations';
+import { addTranslations, setLocale, setRoute } from "$lib/translations";
 
 /** @type {import('@sveltejs/kit').Load} */
 export const load = async ({ data }) => {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b06c4fb5..f1158391 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,8 +19,6 @@
   let faq;
   let about;
 
-  let log = console.log;
-
   const howItWorksSteps = [
     { image: "hand", stepID: "step1" },
     { image: "bolt", stepID: "step2" },