invoice types

1 files changed, 130 insertions, 108 deletions

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}