diff options
Diffstat (limited to 'src')
6 files changed, 77 insertions, 66 deletions
diff --git a/src/routes/(app)/[username]/invoice/[id]/+layout.server.js b/src/routes/(app)/[username]/invoice/[id]/+layout.server.js index c69da78a..46246724 100644 --- a/src/routes/(app)/[username]/invoice/[id]/+layout.server.js +++ b/src/routes/(app)/[username]/invoice/[id]/+layout.server.js @@ -33,7 +33,7 @@ export async function load({ depends, params, url, parent }) { ); } - let sm = Qr.drawImg(invoice.text || "", { size: 300 }); + let sm = Qr.drawImg(invoice.text || "", { size: 380 }); return { id, invoice, sm, lg: sm }; } diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte index 9193968a..709f214b 100644 --- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte +++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte @@ -123,17 +123,49 @@ }; </script> -<div class="container mx-auto max-w-lg px-4 space-y-8"> - <div class="whitespace-nowrap my-auto ml-auto flex gap-2"> - <button - class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full" - class:bg-black={type === types.lightning} - class:text-white={type === types.lightning} - on:click={() => setType(types.lightning)} - > - ⚡️ Lightning - </button> +<div class="container mx-auto max-w-xl px-4 space-y-5"> + {#if showQr} + <a + href={[types.bitcoin, types.liquid].includes(invoice.type) + ? invoice.text + : "lightning:" + invoice.text} + > + <img + {src} + class="mx-auto z-10 shadow-inner rounded-2xl" + bind:this={qr} + alt={txt} + /> + </a> + {/if} + + + {#if amount > 0} + <div class="text-center font-bold text-2xl"> + <div> + {f(amountFiat, currency)} + {#if tip} + <span class="text-sm"> + +{f(tip * (rate / sats), currency)} + </span> + {/if} + </div> + <div> + <span class="text-secondary font-normal text-lg" + >{`${sat(amount)}`}</span + > + + {#if tip} + <span class="text-sm text-secondary font-normal"> + +{sat(tip)} + </span> + {/if} + </div> + </div> + {/if} + + <div class="whitespace-nowrap my-auto ml-auto flex gap-2"> <button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full flex justify-center" class:bg-black={type === types.bitcoin} @@ -161,56 +193,17 @@ /> <div class="my-auto">Liquid</div> </button> - </div> - - {#if showQr} - <div> - <a - href={[types.bitcoin, types.liquid].includes(invoice.type) - ? invoice.text - : "lightning:" + invoice.text} - > - <div class="relative flex"> - <div class="flex mx-auto w-[360px] h-[360px]"> - <img - {src} - class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]" - bind:this={qr} - alt={txt} - /> - </div> - <div - class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0" - /> - </div> - </a> - </div> - {/if} - {#if amount > 0} - <div class="text-center font-bold text-2xl"> - <div> - {f(amountFiat, currency)} - - {#if tip} - <span class="text-sm"> - +{f(tip * (rate / sats), currency)} - </span> - {/if} - </div> - <div> - <span class="text-secondary font-normal text-lg" - >{`${sat(amount)}`}</span - > + <button + class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full" + class:bg-black={type === types.lightning} + class:text-white={type === types.lightning} + on:click={() => setType(types.lightning)} + > + ⚡️ Lightning + </button> - {#if tip} - <span class="text-sm text-secondary font-normal"> - +{sat(tip)} - </span> - {/if} - </div> - </div> - {/if} + </div> <div class="text-center break-all"> <a href={link}> diff --git a/src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte index 9740dc92..ee00214c 100644 --- a/src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte +++ b/src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte @@ -8,21 +8,25 @@ export let data; let amount, currency, rate, received, pending, tip, user, id; - $: data && + $: update(data) + let update = (data) => { ({ amount, currency, rate, received, pending, tip, user, id } = data.invoice); + } toast.pop(0); </script> <div class="container px-4 text-center mx-auto"> - <div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}> - <Icon icon="check" style="mx-auto" /> - </div> {#if received} + <div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}> + <Icon icon="check" style="mx-auto" /> + </div> + <h1 class="text-3xl md:text-4xl font-bold mb-6"> {$t("invoice.paymentSuccessful")} </h1> + <h2 class="text-2xl md:text-3xl font-semibold"> {f(fiat(received - tip, rate), currency)} {#if tip} @@ -43,6 +47,10 @@ {/if} {#if pending} + <div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}> + <Icon icon="orangeclock" style="mx-auto" /> + </div> + <h1 class="text-3xl md:text-4xl font-bold mb-6">Payment detected</h1> <h2 class="text-2xl md:text-3xl font-semibold"> {f(fiat(pending - tip, rate), currency)} @@ -50,6 +58,7 @@ + {f(fiat(tip, rate), currency)} {/if} </h2> + <h3 class="text-secondary md:text-lg mb-6 mt-1"> ⚡️{s(pending - tip)} {#if tip} diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte index 1f20ea5c..3237011b 100644 --- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte +++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte @@ -220,6 +220,14 @@ alt="Bitcoin" /> </div> + {:else if p.type === types.liquid} + <div class="my-auto mr-1"> + <img + src="/images/liquid.svg" + class="w-12 border-4 border-transparent" + alt="Liquid" + /> + </div> {/if} <div class="my-auto"> diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.svelte b/src/routes/(app)/[username]/receive/[...param]/+page.svelte index 6d8939a9..7a27bd67 100644 --- a/src/routes/(app)/[username]/receive/[...param]/+page.svelte +++ b/src/routes/(app)/[username]/receive/[...param]/+page.svelte @@ -28,7 +28,7 @@ <form method="POST" - class="flex justify-center items-center mt-24 mb-3 px-3" + class="flex justify-center items-center mb-3 px-3" use:enhance > <input type="hidden" name="amount" value={amount} /> diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte index 15c17a00..49af6f70 100644 --- a/src/routes/(app)/payment/[id]/+page.svelte +++ b/src/routes/(app)/payment/[id]/+page.svelte @@ -136,7 +136,7 @@ </div> </div> - {#if type === "bitcoin"} + {#if type === "bitcoin" || type === "liquid"} <div> <span class="text-lg text-secondary">Txid</span> <div class="flex"> @@ -146,7 +146,8 @@ <button class="flex font-bold hover:opacity-80 mb-auto my-auto" on:click={() => copy(id)} - ><Icon icon="copy" style="ml-2 w-20 my-auto" /> + > + <Icon icon="copy" style="ml-2 w-12 my-auto" /> </button> </div> </div> |