aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/InvoiceTypes.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/InvoiceTypes.svelte')
-rw-r--r--src/components/InvoiceTypes.svelte185
1 files changed, 126 insertions, 59 deletions
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}