qr styles

4 files changed, 37 insertions, 5 deletions

diff --git a/src/lib/invoice.js b/src/lib/invoice.js
index 4da3c9b4..5b538178 100644
--- a/src/lib/invoice.js
+++ b/src/lib/invoice.js
@@ -11,7 +11,7 @@ export default async ({ cookies, request }) => {
 	let invoice = {
 		amount,
 		tip: parseInt(form.get('tip')),
-		network: 'lightning',
+		network: form.get('network'),
 		prompt: form.get('prompt') === 'true',
 		rate: parseFloat(form.get('rate')) || rates[form.get('currency')],
 		requester
diff --git a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
index 19e307e4..7f2cf666 100644
--- a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
@@ -27,6 +27,8 @@
 
 	$: paid = browser && form && Object.values($invoices).find((inv) => inv.amount === form.amount);
 	$: paid && goto(`/invoice/${paid.uuid}/paid`);
+
+	let network = 'lightning';
 </script>
 
 {#if form && req}
@@ -54,6 +56,7 @@
 		<input type="hidden" name="amount" value={amount} />
 		<input type="hidden" name="currency" value={currency} />
 		<input type="hidden" name="username" value={username} />
+    <input type="hidden" name="network" value={network} />
 
 		{#if req}
 			<input type="hidden" name="requester" value={req.requester.username} />
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index f8ae91f1..cf87d39b 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -7,6 +7,7 @@
 	import { Avatar, Icon, Heart, Image, Qr } from '$comp';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
+	import screenfull from 'screenfull';
 
 	export let data;
 
@@ -15,7 +16,9 @@
 	$: refresh(data);
 	let { invoice, id, user, src } = data;
 	let {
+		address,
 		amount,
+		network,
 		rate,
 		received,
 		prompt,
@@ -24,12 +27,15 @@
 		user: { username, currency }
 	} = invoice;
 
+	let qr;
 	let tipPercent = 0;
 
 	let refresh = (data) => {
 		({ invoice, id } = data);
 		({
+			address,
 			amount,
+			network,
 			rate,
 			received,
 			prompt,
@@ -58,6 +64,13 @@
 				send('subscribe', invoice);
 			});
 	});
+
+	$: link = address ? text : `lightning:${text}`;
+
+	let click = () => {
+		if (screenfull.isFullscreen) screenfull.toggle(qr);
+		else window.location.href = link;
+	};
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
@@ -82,15 +95,23 @@
 
 	<div class="text-center space-y-5">
 		{#if !user || user.username === username || showQr}
-			<Qr {src} />
+			<div class="w-80 md:w-96 mx-auto">
+				<img {src} class="px-4" bind:this={qr} on:click={click} />
+			</div>
 
-			<div>
+			<div class="mb-10 flex gap-2 justify-center">
 				<button
-					class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mx-auto"
+					class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2"
 					on:click={() => copy(text)}
 					><Icon icon="copy" style="mr-1" />
 					<div>Copy</div></button
 				>
+				<button
+					class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2"
+					on:click={() => screenfull.toggle(qr)}
+					><Icon icon="expand" style="mr-1" />
+					<div>Enlarge</div></button
+				>
 			</div>
 		{/if}
 
@@ -141,6 +162,10 @@
 </div>
 
 <style>
+	.full {
+		@apply p-8;
+	}
+
 	.full-shadow {
 		box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25);
 	}
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 8f07fdb8..74c1639e 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -65,6 +65,7 @@
 	let { invoice, id, user } = data;
 	let {
 		amount,
+		network,
 		rate,
 		received,
 		prompt,
@@ -84,6 +85,7 @@
 		({ invoice, id } = data);
 		({
 			amount,
+			network,
 			rate,
 			received,
 			prompt,
@@ -97,7 +99,8 @@
 
 	$: tip = Math.round((amount / 100) * tipPercent);
 
-	$invoices[id] = { amount, id, rate, received, text, tip, username };
+	$invoices[id] = { amount, id, network, rate, received, text, tip, username };
+
 	$: browser &&
 		$invoices[id]?.received >= $invoices[id]?.amount &&
 		goto(($invoices[id].memo === 'launch' && '/launch/purchase') || `/invoice/${id}/paid`);
@@ -120,6 +123,7 @@
 		<input type="hidden" name="username" value={username} />
 		<input type="hidden" name="rate" value={rate} />
 		<input type="hidden" name="prompt" value="false" />
+		<input type="hidden" name="network" value={network} />
 
 		<h1 class="text-4xl font-semibold my-8">{$t('invoice.addTipq')}</h1>
 		{#if !showCustomAmount}