invoice type selection

3 files changed, 223 insertions, 83 deletions

diff --git a/src/components/InvoiceActions.svelte b/src/components/InvoiceActions.svelte
index c0f8f572..0f500fe6 100644
--- a/src/components/InvoiceActions.svelte
+++ b/src/components/InvoiceActions.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { goto } from "$app/navigation";
+  import InvoiceTypes from "$comp/InvoiceTypes.svelte";
   let {
     user,
     invoice,
@@ -8,39 +10,72 @@
     type,
     showQr = $bindable(),
     txt,
+    setAmount,
+    newAmount = $bindable(),
+    toggleType,
     toggleAmount,
+    setType,
     toggleMemo,
   } = $props();
 </script>
 
 <div class="text-secondary space-y-2 text-xl pt-2">
-  <button type="button" class="btn" onclick={() => copy(txt)}>
-    <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
-    <div class="my-auto">
-      {t("payments.copy")}
-    </div>
-  </button>
+  <InvoiceTypes
+    {invoice}
+    {user}
+    {toggleType}
+    bind:newAmount
+    {setAmount}
+    {setType}
+    t={$t}
+    activeOnly={true}
+  />
+
+  <div class="flex flex-wrap gap-2 justify-around text-secondary w-full">
+    <button type="button" class="btn !w-auto grow" onclick={() => copy(txt)}>
+      <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+      <div class="my-auto">
+        {t("payments.copy")}
+      </div>
+    </button>
 
-  {#if user?.id === invoice?.user?.id}
-    <button class="btn" onclick={toggleAmount}>
-      <iconify-icon noobserver icon="ph:pencil-simple-bold" width="32"></iconify-icon>
-      <div class="my-auto">{t("payments.setAmount")}</div>
+    <button class="btn grow !w-auto" 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>
-  {:else}
-    <a href={link} class="block">
-      <button class="btn">
-        <iconify-icon noobserver icon="ph:wallet-bold" width="32"></iconify-icon>
-        <div class="my-auto">{t("payments.openLink")}</div>
+
+    <button class="btn grow !w-auto" 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>
+  </div>
+
+  <div class="flex flex-wrap gap-2 justify-around text-secondary w-full">
+    {#if user?.id === invoice?.user?.id}
+      <button class="btn grow !w-auto" onclick={toggleAmount}>
+        <iconify-icon noobserver icon="ph:pencil-simple-bold" width="32"
+        ></iconify-icon>
+        <div class="my-auto">{t("payments.setAmount")}</div>
       </button>
-    </a>
-  {/if}
+    {:else}
+      <a href={link} class="block">
+        <button class="btn grow !w-auto">
+          <iconify-icon noobserver icon="ph:wallet-bold" width="32"
+          ></iconify-icon>
+          <div class="my-auto">{t("payments.openLink")}</div>
+        </button>
+      </a>
+    {/if}
 
-  <button class="btn" onclick={toggleMemo}>
-    <iconify-icon noobserver icon="ph:chat-centered-text-bold" width="32"></iconify-icon>
-    <div class="my-auto">
-      {t("invoice.setMemo")}
-    </div>
-  </button>
+    <button class="btn grow !w-auto" onclick={toggleMemo}>
+      <iconify-icon noobserver icon="ph:chat-centered-text-bold" width="32"
+      ></iconify-icon>
+      <div class="my-auto">
+        {t("invoice.setMemo")}
+      </div>
+    </button>
+  </div>
 
   {#if txt.length > 120}
     <div class="w-full flex justify-center gap-2 flex-wrap">
@@ -49,7 +84,8 @@
           <iconify-icon noobserver icon="ph:text-align-center-bold" width="32"
           ></iconify-icon>
         {:else}
-          <iconify-icon noobserver icon="ph:qr-code-bold" width="32"></iconify-icon>
+          <iconify-icon noobserver icon="ph:qr-code-bold" width="32"
+          ></iconify-icon>
         {/if}
         <div class="my-auto">
           {showQr ? t("payments.showText") : t("payments.showQr")}
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}
diff --git a/src/components/SetType.svelte b/src/components/SetType.svelte
new file mode 100644
index 00000000..7e80d0bc
--- /dev/null
+++ b/src/components/SetType.svelte
@@ -0,0 +1,37 @@
+<script>
+  import InvoiceTypes from "$comp/InvoiceTypes.svelte";
+  import { focus } from "$lib/utils";
+
+  let {
+    newAmount = $bindable(),
+    invoice,
+    user,
+    submit = $bindable(),
+    settingType,
+    setAmount,
+    setType,
+    toggleType,
+    t,
+  } = $props();
+
+  let { aid, type } = $derived(invoice);
+</script>
+
+{#if settingType}
+  <div
+    class="fixed inset-0 bg-base-100 bg-opacity-90 overflow-y-auto h-full w-full z-50"
+  >
+    <div
+      class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-2"
+    >
+      <InvoiceTypes
+        bind:newAmount
+        {setAmount}
+        {invoice}
+        {user}
+        {setType}
+        t={$t}
+      />
+    </div>
+  </div>
+{/if}