invoice types

3 files changed, 200 insertions, 121 deletions

diff --git a/src/components/InvoiceActions.svelte b/src/components/InvoiceActions.svelte
index 0f500fe6..31af3d36 100644
--- a/src/components/InvoiceActions.svelte
+++ b/src/components/InvoiceActions.svelte
@@ -1,13 +1,14 @@
 <script>
+  import { amountPrompt } from "$lib/store";
+  import { types } from "$lib/utils";
+  import { page } from "$app/stores";
   import { goto } from "$app/navigation";
-  import InvoiceTypes from "$comp/InvoiceTypes.svelte";
   let {
     user,
     invoice,
     copy,
     t,
     link,
-    type,
     showQr = $bindable(),
     txt,
     setAmount,
@@ -17,19 +18,68 @@
     setType,
     toggleMemo,
   } = $props();
+
+  let { aid, address_type, type } = $derived(invoice);
 </script>
 
 <div class="text-secondary space-y-2 text-xl pt-2">
-  <InvoiceTypes
-    {invoice}
-    {user}
-    {toggleType}
-    bind:newAmount
-    {setAmount}
-    {setType}
-    t={$t}
-    activeOnly={true}
-  />
+  <button
+    class="btn flex-nowrap"
+    class:bg-base-300={type === types.ecash}
+    class:text-secondary={type === types.ecash}
+    class:hidden={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.liquid}
+    class:text-secondary={type === types.liquid}
+    class:hidden={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>
+
+  <div class="flex gap-2">
+    <button
+      class="btn flex-nowrap !w-auto grow"
+      class:bg-base-300={type === types.lightning}
+      class:text-secondary={type === types.lightning}
+      onclick={() => {
+        $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>
+      <div class="my-auto text-lg">Lightning</div>
+    </button>
+
+    <button
+      class="btn flex-nowrap !w-auto grow"
+      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>
+  </div>
 
   <div class="flex flex-wrap gap-2 justify-around text-secondary w-full">
     <button type="button" class="btn !w-auto grow" onclick={() => copy(txt)}>
@@ -93,4 +143,10 @@
       >
     </div>
   {/if}
+
+  <button type="button" class="btn" onclick={toggleType}>
+    <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
+    <img src="/images/cash.png" class="w-8 my-auto" />
+    <div class="my-auto">{t("payments.moreOptions")}</div>
+  </button>
 </div>
diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte
index 0829fc82..a238dcde 100644
--- a/src/components/InvoiceTypes.svelte
+++ b/src/components/InvoiceTypes.svelte
@@ -16,49 +16,10 @@
   let { aid, address_type, type } = $derived(invoice);
 </script>
 
-{#if invoice.uid === aid}
+<div class="text-xl">Bitcoin</div>
+<div class="flex flex-wrap gap-2">
   <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>
-    <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}
-    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="btn flex-nowrap !w-auto grow"
     class:bg-base-300={type === types.bitcoin && address_type === "bech32"}
     class:text-secondary={type === types.bitcoin && address_type === "bech32"}
     class:hidden={activeOnly &&
@@ -70,49 +31,22 @@
   </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"
-    class:bg-base-300={type === types.lightning &&
-      !$page.url.pathname.includes("/receive")}
-    class:text-secondary={type === types.lightning &&
-      !$page.url.pathname.includes("/receive")}
+    class="btn flex-nowrap !w-auto grow"
+    class:bg-base-300={type === types.bitcoin && address_type === "bech32m"}
+    class:text-secondary={type === types.bitcoin && address_type === "bech32m"}
     class:hidden={activeOnly &&
-      (type !== types.lightning || $page.url.pathname.includes("/receive"))}
-    onclick={() => {
-      if (activeOnly) toggleType();
-      else {
-        $amountPrompt = false;
-        newAmount = 0;
-        setType(types.lightning);
-      }
-    }}
+      (type !== types.bitcoin || address_type !== "bech32m")}
+    onclick={() =>
+      activeOnly ? toggleType() : setType(types.bitcoin, "bech32m")}
   >
-    <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>
+    <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
+    <div class="my-auto text-lg">Taproot</div>
   </button>
 
   <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="btn flex-nowrap !w-auto grow"
+    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={() =>
@@ -121,36 +55,124 @@
     <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
     <div class="my-auto text-lg">Legacy</div>
   </button>
+</div>
 
-  <button
-    class="btn flex-nowrap"
-    class:bg-base-300={type === types.bolt12}
-    class:text-secondary={type === 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">
-        <iconify-icon
-          noobserver
-          icon="ph:lightning-fill"
-          class="text-yellow-300 text-2xl"
-        ></iconify-icon>
+{#if invoice.uid === aid}
+  <div class="text-xl">Lightning</div>
+  <div class="flex flex-wrap gap-2">
+    <button
+      class="btn flex-nowrap !w-auto grow"
+      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>
-    </div>
-    <div class="my-auto text-lg">Bolt 12</div>
-  </button>
+      <div class="my-auto text-lg">LNURL</div>
+    </button>
+    <button
+      class="btn flex-nowrap !w-auto grow"
+      class:bg-base-300={type === types.bolt12}
+      class:text-secondary={type === 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">
+          <iconify-icon
+            noobserver
+            icon="ph:lightning-fill"
+            class="text-yellow-300 text-2xl"
+          ></iconify-icon>
+        </div>
+      </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
+      class="btn flex-nowrap !w-auto grow"
+      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>
+  </div>
+
+  <div class="text-xl">{t("payments.other")}</div>
+  <div class="flex flex-wrap gap-2">
+    <button
+      class="btn flex-nowrap !w-auto grow"
+      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 !w-auto grow"
+      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>
+  </div>
+
+  <div></div>
+  <button type="button" class="btn" onclick={toggleType}>
+    <iconify-icon noobserver icon="ph:x-bold" width="32"></iconify-icon>
+    <div class="my-auto">
+      {t("payments.cancel")}
+    </div>
   </button>
 {/if}
diff --git a/src/components/SetType.svelte b/src/components/SetType.svelte
index 7e80d0bc..ecbfcba4 100644
--- a/src/components/SetType.svelte
+++ b/src/components/SetType.svelte
@@ -30,7 +30,8 @@
         {invoice}
         {user}
         {setType}
-        t={$t}
+        {toggleType}
+        {t}
       />
     </div>
   </div>