aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/routes/(app)/[username]/invoice/[id]/+layout.server.js5
-rw-r--r--src/routes/(app)/[username]/invoice/[id]/+page.svelte122
-rw-r--r--src/routes/(app)/send/invoice/[id]/+page.svelte2
-rw-r--r--static/images/lightning.svg67
4 files changed, 137 insertions, 59 deletions
diff --git a/src/routes/(app)/[username]/invoice/[id]/+layout.server.js b/src/routes/(app)/[username]/invoice/[id]/+layout.server.js
index 46246724..9c5f9f77 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+layout.server.js
+++ b/src/routes/(app)/[username]/invoice/[id]/+layout.server.js
@@ -33,7 +33,6 @@ export async function load({ depends, params, url, parent }) {
);
}
- let sm = Qr.drawImg(invoice.text || "", { size: 380 });
-
- return { id, invoice, sm, lg: sm };
+ let src = Qr.drawImg(invoice.text || "", { size: 340 });
+ return { id, invoice, src };
}
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index 17882e1a..c9225998 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -35,7 +35,7 @@
let readingerror = (e) => console.log("nfc error", e);
$: refresh(data);
- let { invoice, id, user, sm, lg } = data;
+ let { invoice, id, user, src } = data;
let {
amount,
hash,
@@ -50,13 +50,12 @@
} = invoice;
let showQr = true;
- $: src = sm;
let qr;
let tipPercent = 0;
let refresh = async (data) => {
- ({ invoice, id, user, sm, lg } = data);
+ ({ invoice, id, user, src } = data);
({
amount,
hash,
@@ -121,24 +120,26 @@
user: { username, currency },
}));
- goto(`./${id}`, { invalidateAll: true });
+ goto(`./${id}`, { invalidateAll: true, noScroll: true });
};
</script>
-<div class="container mx-auto max-w-xl px-4 space-y-5">
+<div class="invoice 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>
+ <div>
+ <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>
+ </div>
{/if}
{#if amount > 0}
@@ -154,67 +155,80 @@
</div>
<div>
<span class="text-secondary font-normal text-lg"
- >{`${sat(amount)}`}</span
+ >⚡️{`${s(amount)}`}</span
>
{#if tip}
<span class="text-sm text-secondary font-normal">
- +{sat(tip)}
+ +⚡️{s(tip)}
</span>
{/if}
</div>
</div>
{/if}
- <div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+ {#if type === types.liquid}
+ <div class="flex justify-center">
+ <div class="my-auto text-xl text-center">
+ We only support <span class="text-teal-500 font-bold">L-BTC</span>,
+ don't deposit Liquid assets
+ </div>
+ </div>
+ {/if}
+
+ <div class="flex justify-center 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}
- class:text-white={type === types.bitcoin}
+ class="rounded-full hover:opacity-80 my-auto"
on:click={() => setType(types.bitcoin)}
>
<img
src="/images/bitcoin.svg"
- class="my-auto w-8 border-4 border-transparent"
+ class="w-12"
+ class:w-16={type === types.bitcoin}
+ class:h-16={type === types.bitcoin}
alt="Bitcoin"
/>
- <div class="my-auto">Bitcoin</div>
</button>
<button
- class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full flex justify-center"
- class:bg-black={type === types.liquid}
- class:text-white={type === types.liquid}
- on:click={() => setType(types.liquid)}
+ class="rounded-full hover:opacity-80 text-2xl p-1 my-auto bg-gray-700 w-12 h-12"
+ class:w-16={type === types.lightning}
+ class:h-16={type === types.lightning}
+ class:text-3xl={type === types.lightning}
+ on:click={() => setType(types.lightning)}
>
- <img
- src="/images/liquid.svg"
- class="my-auto w-8 border-4 border-transparent"
- alt="Bitcoin"
- />
- <div class="my-auto">Liquid</div>
+ ⚡️
</button>
<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)}
+ class="rounded-full hover:opacity-80 my-auto"
+ on:click={() => setType(types.liquid)}
>
- ⚡️ Lightning
+ <img
+ src="/images/liquid.svg"
+ class="w-12"
+ class:w-16={type === types.liquid}
+ class:h-16={type === types.liquid}
+ alt="Liquid"
+ />
</button>
</div>
- <div class="text-center break-all">
- <a href={link}>
- {txt}
- </a>
- </div>
+ <button
+ type="button"
+ class="flex gap-2 text-center break-all rounded-full text-white bg-black hover:opacity-80 p-4 w-full md:w-80 mx-auto text-xl justify-center"
+ on:click={() => copy(txt)}
+ >
+ <Icon icon="copy" style="w-8 invert my-auto" />
+ <div class="my-auto font-semibold">
+ {txt.substr(0, 6)} ... {txt.substr(-10)}
+ </div>
+ </button>
<div class="w-full flex justify-center gap-2 flex-wrap">
<a href={link} class="w-full md:w-auto">
<button
- class="w-full md:w-auto flex justify-center rounded-full border py-3 px-5 hover:opacity-80"
+ class="w-full md:w-auto flex justify-center rounded-full border py-3 px-5 hover:opacity-80 font-semibold"
>
<Icon icon="mobile" style="mr-1 w-6" />
<div class="text-secondary">{$t("payments.openLink")}</div>
@@ -222,15 +236,7 @@
</a>
<button
- class="flex rounded-full justify-center border py-3 px-5 hover:opacity-80 w-full md:w-auto"
- on:click={() => copy(txt)}
- >
- <Icon icon="copy" style="mr-1" />
- <div class="text-secondary">{$t("payments.copyText")}</div></button
- >
-
- <button
- class="w-full md:w-auto flex justify-center rounded-full border py-3 px-5 hover:opacity-80"
+ class="w-full md:w-auto flex justify-center rounded-full border py-3 px-5 hover:opacity-80 font-semibold"
on:click={() => (showQr = !showQr)}
>
<Icon icon="qr" style="mr-1 invert" />
@@ -241,3 +247,9 @@
>
</div>
</div>
+
+<style>
+ .invoice {
+ view-transition-name: invoice;
+ }
+</style>
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index c2163a81..6970d74b 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+ <script>
import { onDestroy, onMount } from "svelte";
import { t } from "$lib/translations";
import { goto, invalidateAll } from "$app/navigation";
diff --git a/static/images/lightning.svg b/static/images/lightning.svg
new file mode 100644
index 00000000..60241b06
--- /dev/null
+++ b/static/images/lightning.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+ width="800px"
+ height="800px"
+ viewBox="0 0 24 24"
+ version="1.1"
+ id="svg87"
+ sodipodi:docname="lightning-bolt-svgrepo-com.svg"
+ inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs91" />
+ <sodipodi:namedview
+ id="namedview89"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ showgrid="false"
+ inkscape:zoom="1.01"
+ inkscape:cx="400"
+ inkscape:cy="400"
+ inkscape:window-width="1920"
+ inkscape:window-height="1011"
+ inkscape:window-x="0"
+ inkscape:window-y="32"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg87" />
+ <title
+ id="title81">Lightning-Bolt</title>
+ <g
+ id="Page-1"
+ stroke="none"
+ stroke-width="1"
+ fill="none"
+ fill-rule="evenodd">
+ <g
+ id="Lightning-Bolt">
+ <rect
+ id="Rectangle"
+ fill-rule="nonzero"
+ x="0"
+ y="0"
+ width="24"
+ height="24" />
+ <path
+ d="M6.8618,11.2764 L10.8618,3.27639 C10.9465,3.107 11.1196,3 11.309,3 L17.0397,3 C17.4442,3 17.6813,3.45534 17.4493,3.78673 L15.0507,7.21327 C14.8187,7.54466 15.0558,8 15.4603,8 L16.9129,8 C17.3401,8 17.5705,8.50106 17.2925,8.8254 L7.96557,19.7068 C7.59763,20.1361 6.91173,19.7207 7.1217,19.1957 L9.72572,12.6857 C9.85709,12.3573 9.61522,12 9.26148,12 L7.30902,12 C6.93733,12 6.69558,11.6088 6.8618,11.2764 Z"
+ id="Path"
+ stroke="#0C0310"
+ stroke-width="2"
+ stroke-linecap="round" />
+ </g>
+ </g>
+ <path
+ style="fill:#ffff00;stroke-width:0.990099"
+ d="m 309.11158,552.47525 c 0.29265,-1.08911 10.44631,-26.70792 22.56368,-56.9307 25.5147,-63.638 26.40814,-66.09599 27.25978,-74.99599 1.89612,-19.81526 -10.12798,-40.64864 -28.40785,-49.22044 -9.2762,-4.34979 -17.66725,-5.48654 -40.49982,-5.48654 -9.76258,0 -17.75014,-0.22226 -17.75014,-0.49392 0,-0.27166 25.95208,-52.40037 57.67128,-115.84158 L 387.6198,134.15842 h 73.60116 73.60116 l -3.40814,4.70297 c -12.47355,17.21255 -57.90408,82.80193 -60.16781,86.86602 -8.39177,15.0658 -7.93812,36.09332 1.08971,50.51021 6.47527,10.34061 16.35865,18.14187 27.62748,21.80723 2.9749,0.96764 10.02642,2.02616 15.67006,2.35229 l 10.26115,0.59296 -108.65754,126.73267 C 357.47538,497.42574 308.81892,553.56436 309.11158,552.47525 Z"
+ id="path266"
+ transform="scale(0.03)" />
+</svg>
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 04:01:06 +0000