diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Invoice.svelte | 40 | ||||
| -rw-r--r-- | src/components/InvoiceActions.svelte | 14 | ||||
| -rw-r--r-- | src/components/InvoiceData.svelte | 23 | ||||
| -rw-r--r-- | src/components/InvoiceTypes.svelte | 13 | ||||
| -rw-r--r-- | src/components/SetAmount.svelte | 3 | ||||
| -rw-r--r-- | src/components/SetMemo.svelte | 44 |
6 files changed, 81 insertions, 56 deletions
diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte deleted file mode 100644 index 3298dfe5..00000000 --- a/src/components/Invoice.svelte +++ /dev/null @@ -1,40 +0,0 @@ -<script> - import { t } from "$lib/translations"; - import { f, sat, sats } from "$lib/utils"; - import { fly } from "svelte/transition"; - import Avatar from "$comp/Avatar.svelte"; - import Icon from "$comp/Icon.svelte"; - import { invoice } from "$lib/store"; -</script> - -{#if $invoice} - <div class="fixed bottom-0 border-t w-full p-4 bg-white z-50" in:fly> - <div class="flex flex-wrap md:flex-nowrap max-w-xl mx-auto gap-2"> - <div class="my-auto mx-auto"> - <div class="flex"> - <Avatar user={$invoice.user.username} size={12} /> - <h1 class="my-auto"> - <b>{$invoice.user.username}</b> - {$t("payments.isRequesting")} - <b - >{f( - ($invoice.amount * $invoice.rate) / sats, - $invoice.currency, - )}</b - > - {sat($invoice.amount)} - </h1> - </div> - </div> - <div class="mx-auto my-auto flex gap-2"> - <a href={`/invoice/${$invoice.id}/tip`}> - <button - class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-32" - > - {$t("payments.pay")} - </button> - </a> - </div> - </div> - </div> -{/if} diff --git a/src/components/InvoiceActions.svelte b/src/components/InvoiceActions.svelte index cd66fc36..23268a19 100644 --- a/src/components/InvoiceActions.svelte +++ b/src/components/InvoiceActions.svelte @@ -6,10 +6,10 @@ t, link, type, - types, showQr = $bindable(), txt, - toggleAmount + toggleAmount, + toggleMemo, } = $props(); </script> @@ -35,11 +35,19 @@ </a> {/if} + <button class="btn" onclick={toggleMemo}> + <iconify-icon icon="ph:chat-centered-text-bold" width="32"></iconify-icon> + <div class="my-auto"> + {t("invoice.setMemo")} + </div> + </button> + {#if txt.length > 120} <div class="w-full flex justify-center gap-2 flex-wrap"> <button class="btn" onclick={() => (showQr = !showQr)}> {#if showQr} - <iconify-icon icon="ph:text-align-center-bold" width="32"></iconify-icon> + <iconify-icon icon="ph:text-align-center-bold" width="32" + ></iconify-icon> {:else} <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon> {/if} diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte index 4ce39036..bd6adb97 100644 --- a/src/components/InvoiceData.svelte +++ b/src/components/InvoiceData.svelte @@ -1,7 +1,7 @@ <script> import Amount from "$comp/Amount.svelte"; - import { btc, f, sat, s, sats } from "$lib/utils"; + import { btc, f, sat, s, sats, types } from "$lib/utils"; let { showQr, link, @@ -13,7 +13,10 @@ locale, tip, rate, + t, } = $props(); + + let { memo } = $derived(invoice); </script> {#if showQr} @@ -28,6 +31,20 @@ </div> {/if} +{#if invoice.type === types.liquid} + <div class="flex justify-center p-4 shadow items-center gap-2"> + <iconify-icon icon="ph:warning-bold" width="48" class="text-warning" + ></iconify-icon> + <div> + <div class="my-auto text-xl text-center text-secondary"> + {t("payments.onlyLbtc")} + <span class="text-teal-500 font-bold">L-BTC</span> — + {t("payments.dontDeposit")} + </div> + </div> + </div> +{/if} + {#if !showQr || txt.length <= 120} <div class="break-all text-center text-secondary text-xl"> {txt} @@ -52,3 +69,7 @@ {#if amount > 0} <Amount {amount} {currency} {rate} {locale} {tip} /> {/if} + +{#if memo} + <div class="text-xl text-center">{memo}</div> +{/if} diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte index a0a1fc12..00b5cfb3 100644 --- a/src/components/InvoiceTypes.svelte +++ b/src/components/InvoiceTypes.svelte @@ -1,6 +1,7 @@ <script> + import { types } from "$lib/utils"; import { goto } from "$app/navigation"; - let { aid, invoice, user, type, types, t, setType } = $props(); + let { aid, invoice, user, type, t, setType } = $props(); </script> {#if invoice.uid === aid} @@ -89,14 +90,4 @@ </div> <div class="my-auto text-lg">Bolt 12</div> </button> - - {#if type === types.liquid} - <div class="flex justify-center"> - <div class="my-auto text-xl text-center text-secondary"> - {t("payments.onlyLbtc")} - <span class="text-teal-500 font-bold">L-BTC</span>, - {t("payments.dontDeposit")} - </div> - </div> - {/if} {/if} diff --git a/src/components/SetAmount.svelte b/src/components/SetAmount.svelte index ddf90a17..a453b9d1 100644 --- a/src/components/SetAmount.svelte +++ b/src/components/SetAmount.svelte @@ -3,12 +3,13 @@ import Numpad from "$comp/Numpad.svelte"; import Toggle from "$comp/Toggle.svelte"; + let submit = $state(); + let { currency = $bindable(), fiat = $bindable(), locale = $bindable(), rate = $bindable(), - submit = $bindable(), settingAmount, setAmount, newAmount = $bindable(), diff --git a/src/components/SetMemo.svelte b/src/components/SetMemo.svelte new file mode 100644 index 00000000..f11bf780 --- /dev/null +++ b/src/components/SetMemo.svelte @@ -0,0 +1,44 @@ +<script> + import { focus } from "$lib/utils"; + + let { + submit = $bindable(), + settingMemo, + setMemo, + memo = $bindable(), + toggleMemo, + t, + } = $props(); +</script> + +{#if settingMemo} + <div + class="fixed inset-0 bg-base-100 bg-opacity-90 overflow-y-auto h-full w-full z-50" + > + <div + class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-5" + > + <form onsubmit={setMemo} class="space-y-5"> + <input use:focus placeholder={t("invoice.memo")} bind:value={memo} /> + <div class="w-full flex flex-wrap gap-2"> + <button + bind:this={submit} + type="submit" + onclick={setMemo} + class="btn btn-accent" + > + <div class="my-auto">{t("payments.ok")}</div> + </button> + <button + type="button" + class="btn" + onclick={toggleMemo} + onkeydown={toggleMemo} + > + <div class="my-auto">{t("payments.cancel")}</div> + </button> + </div> + </form> + </div> + </div> +{/if} |