lightning address default

7 files changed, 71 insertions, 137 deletions

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 1b1c4966..51daf6bc 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -13,7 +13,7 @@
   let setAccount = () => (document.cookie = `aid=${id}; path=/; max-age=86400`);
 </script>
 
-<a href={`/payments`} class="block space-y-2 border-b-8 border-primary py-4 last:border-b-0 border-dashed" on:click={setAccount}>
+<a href={`/payments`} class="block space-y-2 border-b-8 border-black py-4 last:border-b-0" on:click={setAccount}>
   <div class="flex">
     <Balance {balance} {user} {rate} />
     <a href={`/payments`} class="contents" on:click={setAccount}>
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 8a9c1d03..5b9aaa01 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -239,7 +239,8 @@
           <button
             type="button"
             class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
-            on:click|preventDefault|stopPropagation={() => handleInput(value)}>{value}</button
+            on:click|preventDefault|stopPropagation={() => handleInput(value)}
+            >{value}</button
           >
         {/if}
       {/each}
diff --git a/src/locales/en.json b/src/locales/en.json
index 7a3d28a9..67e6a318 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -229,7 +229,8 @@
 		},
 		"receive": {
 			"lessThan1BTCWarning": "Please enter an amount less than 1 bitcoin.",
-			"showQR": "Show QR"
+			"showQR": "Show QR",
+			"hideQR": "Hide QR"
 		},
 		"send": {
 			"makeQR": "QR",
@@ -326,6 +327,8 @@
 		}
 	},
 	"payments": {
+    "ok": "Ok",
+    "cancel": "Cancel",
     "failedToRoute": "Failed to route payment, recipient may not be reachable. Try sending a smaller amount or increasing the max fee reserve.",
     "enterWalletPass": "Wallet password",
 		"legacyVersion": "Legacy version",
diff --git a/src/routes/(app)/[username]/receive/+page.server.js b/src/routes/(app)/[username]/receive/+page.server.js
new file mode 100644
index 00000000..8a4d754c
--- /dev/null
+++ b/src/routes/(app)/[username]/receive/+page.server.js
@@ -0,0 +1,8 @@
+import * as Qr from "qrcode-base64";
+export let load = async ({ cookies, url }) => {
+  let username = cookies.get("username");
+  let text = `${username}@${url.host}`;
+  let src = Qr.drawImg(text, { size: 500 });
+
+  return { src, text };
+};
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index 11587211..3307623b 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -1,25 +1,11 @@
 <script>
   import { send } from "$lib/socket";
-  import {
-    btc,
-    post,
-    back,
-    copy,
-    f,
-    get,
-    types,
-    sat,
-    reverseFormat,
-    s,
-    sats,
-  } from "$lib/utils";
+  import { btc, post, copy, f, get, types, sat, s, sats } from "$lib/utils";
   import { tick, onMount, onDestroy } from "svelte";
   import { browser } from "$app/environment";
   import { last, showQr, amountPrompt } from "$lib/store";
   import Avatar from "$comp/Avatar.svelte";
   import Icon from "$comp/Icon.svelte";
-  import Heart from "$comp/Heart.svelte";
-  import Image from "$comp/Image.svelte";
   import Numpad from "$comp/Numpad.svelte";
   import { t } from "$lib/translations";
   import { goto, invalidate } from "$app/navigation";
@@ -29,67 +15,33 @@
 
   let showOptions;
 
-  let reading = async ({ message, serialNumber }) => {
-    let name = serialNumber.replace(/:/g, "-");
-    let result = await post(`/fund/${name}/withdraw`, { amount, hash, name });
-  };
-
-  let readingerror = (e) => console.log("nfc error", e);
-
+  let { id, rates, subject, user, src, text } = data;
   $: refresh(data);
-  let { invoice, id, subject, user, src } = data;
-  let {
-    aid,
-    amount,
-    hash,
-    type,
-    rate,
-    text,
-    tip,
-    user: { username, currency },
-  } = invoice;
-
-  let qr;
-  let tipPercent = 0;
-
-  let refresh = async (data) => {
-    ({ invoice, id, user, src } = data);
-    ({
-      aid,
-      amount,
-      hash,
-      type,
-      rate,
-      text,
-      tip,
-      user: { username, currency },
-    } = invoice);
-
-    tipPercent = (tip / amount) * 100;
+  let refresh = (data) => {
+    ({ id, rates, subject, user, src, text } = data);
   };
 
-  $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
-  $: tipAmount = ((tip * rate) / sats).toFixed(2);
-
-  let subbed;
-
-  onMount(async () => {
-    if (browser) {
-      last.subscribe((v) => {
-        if (!v || subbed) return;
-        subbed = true;
-        send("subscribe", invoice);
-      });
+  let { currency, username } = subject;
+  let rate = rates[currency];
+  let type = types.lightning;
+  let hash = "";
 
-      if ($amountPrompt && tip === undefined) toggleAmount();
-    }
-  });
+  let qr;
 
   $: link = [types.bitcoin, types.liquid].includes(type)
     ? text
     : `lightning:${text}`;
   $: txt = [types.bitcoin, types.liquid].includes(type) ? hash : text;
 
+  let aid = subject.id;
+  let invoice = {
+    aid,
+    type: types.lightning,
+    items: [],
+    user: subject,
+  };
+  let amount, amountFiat, tip;
+
   let setType = async (type) => {
     invoice.type = type;
     ({ id } = await post(`/invoice`, {
@@ -97,7 +49,10 @@
       user: { username, currency },
     }));
 
-    goto(`./${id}?options=true`, { invalidateAll: true, noScroll: true });
+    goto(`/invoice/${id}?options=true`, {
+      invalidateAll: true,
+      noScroll: true,
+    });
   };
 
   let setAmount = async () => {
@@ -111,7 +66,7 @@
       user: { username, currency },
     }));
 
-    let url = `./${id}`;
+    let url = `/invoice/${id}`;
     if (subject?.prompt) url += "/tip";
     else url += "?options=true";
 
@@ -128,11 +83,7 @@
 <div class="invoice container mx-auto max-w-xl px-4 space-y-2">
   {#if $showQr}
     <div>
-      <a
-        href={[types.bitcoin, types.liquid].includes(invoice.type)
-          ? invoice.text
-          : "lightning:" + invoice.text}
-      >
+      <a href={link}>
         <img
           {src}
           class="mx-auto z-10 max-w-[360px]"
@@ -141,12 +92,12 @@
         />
       </a>
     </div>
-  {:else}
-    <div class="break-all pb-5 text-center text-secondary text-xl">
-      {txt}
-    </div>
   {/if}
 
+  <div class="break-all text-center text-secondary text-xl">
+    {txt}
+  </div>
+
   {#each invoice.items as i}
     <div class="grid grid-cols-12 text-xl">
       <div class="col-span-1 my-auto">{i.quantity}</div>
@@ -217,22 +168,6 @@
         </button>
       </a>
     {/if}
-
-    <div class="w-full flex justify-center gap-2 flex-wrap">
-      <button
-        class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
-        on:click={() => ($showQr = !$showQr)}
-      >
-        {#if $showQr}
-          <Icon icon="text" style="w-6 mr-2 my-auto" />
-        {:else}
-          <Icon icon="qr" style="w-8 mr-1 invert my-auto" />
-        {/if}
-        <div class="my-auto">
-          {$showQr ? $t("payments.showText") : $t("payments.showQr")}
-        </div></button
-      >
-    </div>
   </div>
 
   {#if aid === user.id}
@@ -298,7 +233,7 @@
     class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
   >
     <div
-      class="relative mx-auto p-12 border w-96 shadow-lg rounded-md bg-white space-y-5 top-10"
+      class="relative mx-auto p-12 border max-w-xl shadow-lg rounded-md bg-white space-y-5 top-5"
     >
       <form on:submit|preventDefault={setAmount}>
         <Numpad
@@ -315,7 +250,7 @@
             on:click={setAmount}
             class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto bg-black text-white w-full"
           >
-            <div class="my-auto">Ok</div>
+            <div class="my-auto">{$t("payments.ok")}</div>
           </button>
           <button
             type="button"
@@ -323,7 +258,7 @@
             on:click={toggleAmount}
             on:keydown={toggleAmount}
           >
-            <div class="my-auto">Cancel</div>
+            <div class="my-auto">{$t("payments.cancel")}</div>
           </button>
         </div>
       </form>
@@ -335,9 +270,3 @@
     </div>
   </div>
 {/if}
-
-<style>
-  .invoice {
-    view-transition-name: invoice;
-  }
-</style>
diff --git a/src/routes/(app)/invoice/+page.server.ts b/src/routes/(app)/invoice/+page.server.ts
index b8a2fe06..fa644eb9 100644
--- a/src/routes/(app)/invoice/+page.server.ts
+++ b/src/routes/(app)/invoice/+page.server.ts
@@ -5,6 +5,7 @@ import type { Invoice } from "$lib/types";
 export let load = async ({ cookies, parent }) => {
   let aid = cookies.get("aid");
   let { subject, user, rates } = await parent();
+  if (aid === user.id) redirect(307, `/${user.username}/receive`)
 
   let invoice: Invoice = {
     aid,
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index d8b7559f..b59b3f77 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -4,13 +4,11 @@
   import {
     btc,
     post,
-    back,
     copy,
     f,
     get,
     types,
     sat,
-    reverseFormat,
     s,
     sats,
   } from "$lib/utils";
@@ -19,8 +17,6 @@
   import { last, showQr, amountPrompt } from "$lib/store";
   import Avatar from "$comp/Avatar.svelte";
   import Icon from "$comp/Icon.svelte";
-  import Heart from "$comp/Heart.svelte";
-  import Image from "$comp/Image.svelte";
   import Numpad from "$comp/Numpad.svelte";
   import { t } from "$lib/translations";
   import { goto, invalidate } from "$app/navigation";
@@ -142,10 +138,10 @@
         />
       </a>
     </div>
-  {:else}
-    <div
-      class="break-all pb-5 text-center text-secondary text-xl min-h-[120px] flex"
-    >
+  {/if}
+
+  {#if type !== types.lightning || !$showQr}
+    <div class="break-all text-center text-xl text-secondary flex">
       <div class="m-auto">{txt}</div>
     </div>
   {/if}
@@ -221,21 +217,23 @@
       </a>
     {/if}
 
-    <div class="w-full flex justify-center gap-2 flex-wrap">
-      <button
-        class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
-        on:click={() => ($showQr = !$showQr)}
-      >
-        {#if $showQr}
-          <Icon icon="text" style="w-6 mr-2 my-auto" />
-        {:else}
-          <Icon icon="qr" style="w-8 mr-1 invert my-auto" />
-        {/if}
-        <div class="my-auto">
-          {$showQr ? $t("payments.showText") : $t("payments.showQr")}
-        </div></button
-      >
-    </div>
+    {#if type === types.lightning}
+      <div class="w-full flex justify-center gap-2 flex-wrap">
+        <button
+          class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
+          on:click={() => ($showQr = !$showQr)}
+        >
+          {#if $showQr}
+            <Icon icon="text" style="w-6 mr-2 my-auto" />
+          {:else}
+            <Icon icon="qr" style="w-8 mr-1 invert my-auto" />
+          {/if}
+          <div class="my-auto">
+            {$showQr ? $t("payments.showText") : $t("payments.showQr")}
+          </div></button
+        >
+      </div>
+    {/if}
   </div>
 
   {#if aid === user?.id}
@@ -299,7 +297,7 @@
     class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
   >
     <div
-      class="relative mx-auto p-12 border w-96 shadow-lg rounded-md bg-white space-y-5 top-10"
+      class="relative mx-auto p-12 border max-w-xl shadow-lg rounded-md bg-white space-y-5 top-5"
     >
       <form on:submit|preventDefault={setAmount} class="space-y-5">
         <Numpad
@@ -316,7 +314,7 @@
             on:click={setAmount}
             class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto bg-black text-white w-full"
           >
-            <div class="my-auto">Ok</div>
+            <div class="my-auto">{$t("payments.ok")}</div>
           </button>
           <button
             type="button"
@@ -324,7 +322,7 @@
             on:click={toggleAmount}
             on:keydown={toggleAmount}
           >
-            <div class="my-auto">Cancel</div>
+            <div class="my-auto">{$t("payments.cancel")}</div>
           </button>
         </div>
       </form>
@@ -336,9 +334,3 @@
     </div>
   </div>
 {/if}
-
-<style>
-  .invoice {
-    view-transition-name: invoice;
-  }
-</style>