aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/InvoiceActions.svelte80
-rw-r--r--src/components/InvoiceTypes.svelte238
-rw-r--r--src/components/SetType.svelte3
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>
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 10:42:25 +0000