invoice types

1 files changed, 68 insertions, 12 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>