From 25e3f9890bc214b4c714854f572e7a8c2625a1ee Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Wed, 15 Jan 2025 15:37:19 -0800
Subject: invoice type selection

---
 src/components/InvoiceTypes.svelte | 185 +++++++++++++++++++++++++------------
 1 file changed, 126 insertions(+), 59 deletions(-)

(limited to 'src/components/InvoiceTypes.svelte')

diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte
index c4d7fa77..0829fc82 100644
--- a/src/components/InvoiceTypes.svelte
+++ b/src/components/InvoiceTypes.svelte
@@ -1,79 +1,133 @@
 <script>
   import { types } from "$lib/utils";
-  import { goto } from "$app/navigation";
   import { page } from "$app/stores";
-  let { aid, invoice, user, type, t, setType } = $props();
+  import { amountPrompt } from "$lib/store";
+  let {
+    newAmount = $bindable(),
+    invoice,
+    user,
+    t,
+    toggleType,
+    setAmount,
+    setType,
+    activeOnly,
+  } = $props();
+
+  let { aid, address_type, type } = $derived(invoice);
 </script>
 
 {#if invoice.uid === aid}
-  <div class="grid grid-cols-2 gap-2 justify-around text-secondary">
-    <button
-      class="btn flex-nowrap"
-      class:bg-base-300={type === types.lightning}
-      class:text-secondary={type === types.lightning}
-      onclick={() => setType(types.lightning)}
-    >
-      <div
-        class="bg-black rounded-full w-8 h-8 items-center justify-center flex"
-      >
-        <div class="m-auto">
-          <iconify-icon
-            noobserver
-            icon="ph:lightning-fill"
-            class="text-yellow-300 text-2xl"
-          ></iconify-icon>
-        </div>
+  <button
+    class="btn flex-nowrap"
+    class:bg-base-300={type === types.lightning &&
+      $page.url.pathname.includes("/receive")}
+    class:text-secondary={type === types.lightning &&
+      $page.url.pathname.includes("/receive")}
+    class:hidden={activeOnly &&
+      (type !== types.lightning || !$page.url.pathname.includes("/receive"))}
+    onclick={() => {
+      if (activeOnly) toggleType();
+      else {
+        $amountPrompt = false;
+        newAmount = undefined;
+        setType(types.lightning);
+      }
+    }}
+  >
+    <div class="bg-black rounded-full w-8 h-8 items-center justify-center flex">
+      <div class="m-auto">
+        <iconify-icon
+          noobserver
+          icon="ph:lightning-fill"
+          class="text-yellow-300 text-2xl"
+        ></iconify-icon>
       </div>
-      <div class="my-auto text-lg">Lightning</div>
-    </button>
+    </div>
+    <div class="my-auto text-lg">LNURL</div>
+  </button>
 
-    <button
-      class="btn flex-nowrap"
-      class:bg-base-300={type === types.ecash}
-      class:text-secondary={type === types.ecash}
-      onclick={() => setType(types.ecash)}
-    >
-      <img src="/images/cash.png" class="w-8 my-auto" />
-      <div class="my-auto text-lg">Ecash</div>
-    </button>
+  <button
+    class="btn flex-nowrap"
+    class:bg-base-300={type === types.ecash}
+    class:text-secondary={type === types.ecash}
+    class:hidden={activeOnly && type !== types.ecash}
+    onclick={() => (activeOnly ? toggleType() : setType(types.ecash))}
+  >
+    <img src="/images/cash.png" class="w-8 my-auto" />
+    <div class="my-auto text-lg">Ecash</div>
+  </button>
 
-    <button
-      class="btn flex-nowrap"
-      class:bg-base-300={type === types.bitcoin}
-      class:text-secondary={type === types.bitcoin}
-      onclick={() => setType(types.bitcoin)}
-    >
-      <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
-      <div class="my-auto text-lg">Bitcoin</div>
-    </button>
+  <button
+    class="btn flex-nowrap"
+    class:bg-base-300={type === types.bitcoin && address_type === "bech32"}
+    class:text-secondary={type === types.bitcoin && address_type === "bech32"}
+    class:hidden={activeOnly &&
+      (type !== types.bitcoin || address_type !== "bech32")}
+    onclick={() => (activeOnly ? toggleType() : setType(types.bitcoin))}
+  >
+    <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
+    <div class="my-auto text-lg">Segwit</div>
+  </button>
 
-    <button
-      class="btn flex-nowrap"
-      class:bg-base-300={type === types.liquid}
-      class:text-secondary={type === types.liquid}
-      onclick={() => setType(types.liquid)}
-    >
-      <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
-      <div class="my-auto text-lg">Liquid</div>
-    </button>
+  <button
+    class="btn flex-nowrap"
+    class:bg-base-300={type === types.liquid}
+    class:text-secondary={type === types.liquid}
+    class:hidden={activeOnly && type !== types.liquid}
+    onclick={() => (activeOnly ? toggleType() : setType(types.liquid))}
+  >
+    <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
+    <div class="my-auto text-lg">Liquid</div>
+  </button>
 
-    <button class="btn flex-nowrap" onclick={() => goto("/scan")}>
-      <iconify-icon noobserver icon="ph:camera-bold" width="32"></iconify-icon>
-      <div class="my-auto text-lg">{t("user.send.scan")}</div>
-    </button>
+  <button
+    class="btn flex-nowrap"
+    class:bg-base-300={type === types.lightning &&
+      !$page.url.pathname.includes("/receive")}
+    class:text-secondary={type === types.lightning &&
+      !$page.url.pathname.includes("/receive")}
+    class:hidden={activeOnly &&
+      (type !== types.lightning || $page.url.pathname.includes("/receive"))}
+    onclick={() => {
+      if (activeOnly) toggleType();
+      else {
+        $amountPrompt = false;
+        newAmount = 0;
+        setType(types.lightning);
+      }
+    }}
+  >
+    <div class="bg-black rounded-full w-8 h-8 items-center justify-center flex">
+      <div class="m-auto">
+        <iconify-icon
+          noobserver
+          icon="ph:lightning-fill"
+          class="text-yellow-300 text-2xl"
+        ></iconify-icon>
+      </div>
+    </div>
+    <div class="my-auto text-lg">Bolt 11</div>
+  </button>
 
-    <button class="btn flex-nowrap" onclick={() => goto("/receive")}>
-      <iconify-icon noobserver icon="ph:clipboard-text-bold" width="32"
-      ></iconify-icon>
-      <div class="my-auto text-lg">{t("user.send.paste")}</div>
-    </button>
-  </div>
+  <button
+    class="btn flex-nowrap"
+    class:bg-base-300={type === types.bitcoin && address_type !== "legacy"}
+    class:text-secondary={type === types.bitcoin && address_type !== "legacy"}
+    class:hidden={activeOnly &&
+      (type !== types.bitcoin || address_type !== "legacy")}
+    onclick={() =>
+      activeOnly ? toggleType() : setType(types.bitcoin, "legacy")}
+  >
+    <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
+    <div class="my-auto text-lg">Legacy</div>
+  </button>
 
   <button
     class="btn flex-nowrap"
     class:bg-base-300={type === types.bolt12}
     class:text-secondary={type === types.bolt12}
-    onclick={() => setType(types.bolt12)}
+    class:hidden={activeOnly && type !== types.bolt12}
+    onclick={() => (activeOnly ? toggleType() : setType(types.bolt12))}
   >
     <div class="bg-black rounded-full w-8 h-8 items-center justify-center flex">
       <div class="m-auto">
@@ -86,4 +140,17 @@
     </div>
     <div class="my-auto text-lg">Bolt 12</div>
   </button>
+
+  <button
+    class="btn flex-nowrap"
+    class:bg-base-300={type === types.bitcoin}
+    class:text-secondary={type === types.bitcoin}
+    class:hidden={activeOnly &&
+      (type !== types.bitcoin || address_type !== "bech32m")}
+    onclick={() =>
+      activeOnly ? toggleType() : setType(types.bitcoin, "bech32m")}
+  >
+    <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
+    <div class="my-auto text-lg">Taproot</div>
+  </button>
 {/if}
-- 
cgit v1.2.3