server side qr

5 files changed, 106 insertions, 69 deletions

diff --git a/package.json b/package.json
index b00befb7..4f99bb9b 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
 		"prettier-plugin-svelte": "^2.8.0",
 		"qr-code-styling": "1.6.0-rc.1",
 		"qr-scanner": "^1.4.1",
+		"qrcode-svg": "^1.1.0",
 		"screenfull": "^6.0.2",
 		"svelte": "^3.52.0",
 		"svelte-outclick": "^3.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c621b24..4d90a1b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,7 @@ specifiers:
   prettier-plugin-svelte: ^2.8.0
   qr-code-styling: 1.6.0-rc.1
   qr-scanner: ^1.4.1
+  qrcode-svg: ^1.1.0
   screenfull: ^6.0.2
   svelte: ^3.52.0
   svelte-outclick: ^3.2.0
@@ -26,7 +27,7 @@ specifiers:
   vite: ^3.1.8
 
 devDependencies:
-  '@sveltejs/adapter-node': 1.0.0-next.99
+  '@sveltejs/adapter-node': 1.0.0-next.100
   '@sveltejs/kit': [email protected][email protected]
   '@zerodevx/svelte-toast': 0.7.2
   autoprefixer: [email protected]
@@ -41,6 +42,7 @@ devDependencies:
   prettier-plugin-svelte: 2.8.0_lrllcp5xtrkmmdzifit4hd52ze
   qr-code-styling: 1.6.0-rc.1
   qr-scanner: 1.4.1
+  qrcode-svg: 1.1.0
   screenfull: 6.0.2
   svelte: 3.52.0
   svelte-outclick: 3.2.0
@@ -95,8 +97,8 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
-  /@rollup/plugin-commonjs/[email protected]:
-    resolution: {integrity: sha512-JbrTRyDNtLQj/rhl7RFUuYXwQ2fac+33oLDAu2k++WD95zweyo28UAomLVA0JMGx4vmCa7Nw4T6k/1F6lelExg==}
+  /@rollup/plugin-commonjs/[email protected]:
+    resolution: {integrity: sha512-e9ThuiRf93YlVxc4qNIurvv+Hp9dnD+4PjOqQs5vAYfcZ3+AXSrcdzXnVjWxcGQOa6KGJFcRZyUI3ktWLavFjg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^2.68.0||^3.0.0
@@ -104,7 +106,7 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 4.2.1
+      '@rollup/pluginutils': [email protected]
       commondir: 1.0.1
       estree-walker: 2.0.2
       glob: 8.0.3
@@ -113,8 +115,8 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /@rollup/plugin-json/[email protected]:
-    resolution: {integrity: sha512-LsWDA5wJs/ggzakVuKQhZo7HPRcQZgBa3jWIVxQSFxaRToUGNi8ZBh3+k/gQ+1eInVYJgn4WBRCUkmoDrmmGzw==}
+  /@rollup/plugin-json/[email protected]:
+    resolution: {integrity: sha512-QCwhZZLvM8nRcTHyR1vOgyTMiAnjiNj1ebD/BMRvbO1oc/z14lZH6PfxXeegee2B6mky/u9fia4fxRM4TqrUaw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0
@@ -122,12 +124,12 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 4.2.1
+      '@rollup/pluginutils': [email protected]
       rollup: 2.79.1
     dev: true
 
-  /@rollup/plugin-node-resolve/[email protected]:
-    resolution: {integrity: sha512-iwJbzfTzlzDDQcGmkS7EkCKwe2kSkdBrjX87Fy/KrNjr6UNnLpod0t6X66e502LRe5JJCA4FFqrEscWPnZAkig==}
+  /@rollup/plugin-node-resolve/[email protected]:
+    resolution: {integrity: sha512-ReY88T7JhJjeRVbfCyNj+NXAG3IIsVMsX9b5/9jC98dRP8/yxlZdz7mHZbHk5zHr24wZZICS5AcXsFZAXYUQEg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^2.78.0||^3.0.0
@@ -135,7 +137,7 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 4.2.1
+      '@rollup/pluginutils': [email protected]
       '@types/resolve': 1.20.2
       deepmerge: 4.2.2
       is-builtin-module: 3.2.0
@@ -152,12 +154,27 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@sveltejs/adapter-node/1.0.0-next.99:
-    resolution: {integrity: sha512-HnAuHtx0kWJrcsQ58YYFJca7FbAHvcuPL4CCEW9XDLTLHnZTwrwcB8eY//NSfxdJeVxf9JroXI3exnY4fYWEtQ==}
+  /@rollup/pluginutils/[email protected]:
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
     dependencies:
-      '@rollup/plugin-commonjs': [email protected]
-      '@rollup/plugin-json': [email protected]
-      '@rollup/plugin-node-resolve': [email protected]
+      '@types/estree': 1.0.0
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 2.79.1
+    dev: true
+
+  /@sveltejs/adapter-node/1.0.0-next.100:
+    resolution: {integrity: sha512-XtyweoRcrnD3T/hkqv4XAlhU24VM6/QiUqR2mfs7I3Ji/KrBKWSM2GCpSptnfk3mELK193sJ0T4m6Z3x8uf47w==}
+    dependencies:
+      '@rollup/plugin-commonjs': [email protected]
+      '@rollup/plugin-json': [email protected]
+      '@rollup/plugin-node-resolve': [email protected]
       rollup: 2.79.1
     dev: true
 
@@ -1299,6 +1316,11 @@ packages:
     resolution: {integrity: sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==}
     dev: true
 
+  /qrcode-svg/1.1.0:
+    resolution: {integrity: sha512-XyQCIXux1zEIA3NPb0AeR8UMYvXZzWEhgdBgBjH9gO7M48H9uoHzviNz8pXw3UzrAcxRRRn9gxHewAVK7bn9qw==}
+    hasBin: true
+    dev: true
+
   /qs/6.11.0:
     resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==}
     engines: {node: '>=0.6'}
diff --git a/src/lib/invoice.js b/src/lib/invoice.js
index e8a5f615..b1330f89 100644
--- a/src/lib/invoice.js
+++ b/src/lib/invoice.js
@@ -16,7 +16,7 @@ export default async ({ cookies, request }) => {
 
 	let user = { username: form.get('username') };
 
-	let { uuid } = await post('/invoice', { invoice, user }, auth(cookies));
+	let { uuid }= await post('/invoice', { invoice, user }, auth(cookies));
 
 	if (invoice.prompt) {
 		throw redirect(307, `/invoice/${uuid}/tip`);
diff --git a/src/routes/invoice/[id]/+layout.server.js b/src/routes/invoice/[id]/+layout.server.js
index e123c7d7..690deda0 100644
--- a/src/routes/invoice/[id]/+layout.server.js
+++ b/src/routes/invoice/[id]/+layout.server.js
@@ -1,6 +1,14 @@
+import Qr from 'qrcode-svg';
 import { get } from '$lib/utils';
 
 export async function load({ params }) {
 	let { id } = params;
-	return { id, invoice: await get(`/invoice?uuid=${id}`) };
+	let invoice = await get(`/invoice?uuid=${id}`);
+	let svg = new Qr({
+		content: invoice.text,
+		join: true,
+		container: 'svg-viewbox'
+	}).svg();
+
+	return { id, invoice, svg };
 }
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index 17eac2f5..7a888d5c 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -6,10 +6,11 @@
 	import { Icon, Heart, Image, Qr } from '$comp';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
+	import screenfull from 'screenfull';
 
 	export let data;
 	$: refresh(data);
-	let { invoice, id, user } = data;
+	let { invoice, id, user, svg } = data;
 	let {
 		amount,
 		rate,
@@ -23,8 +24,6 @@
 	let qr;
 	let tipPercent = 0;
 
-	let fullscreen;
-
 	let refresh = (data) => {
 		({ invoice, id } = data);
 		({
@@ -47,65 +46,72 @@
 
 	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
 	$: tipAmount = ((tip * rate) / sats).toFixed(2);
+
+	let full = () => {
+		screenfull.toggle(qr);
+		let el = document.getElementById('qr');
+		el.style.width = '300px';
+		console.log('yes', el);
+	};
 </script>
 
-<div>
-	<button
-		class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80"
-		class:invisible={!user}
-		on:click={back}
-	>
-		<Icon icon="arrow-left" style="w-10" />
-	</button>
+<button
+	class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80"
+	class:invisible={!user}
+	on:click={back}
+>
+	<Icon icon="arrow-left" style="w-10" />
+</button>
 
-	<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
-		<div
-			class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
-		>
-			<div class="text-center">
-				<span class="text-secondary block text-2xl break-all"
-					>Scan to pay <a href="/{username}" class="text-black font-semibold hover:opacity-80"
-						>{username}</a
-					></span
-				>
+<div class="container mx-auto max-w-lg px-4 space-y-10 lg:space-y-0">
+	<div class="space-y-10 lg:space-y-0">
+		<div class="text-center">
+			<span class="text-secondary block text-2xl break-all"
+				>Scan to pay <a href="/{username}" class="text-black font-semibold hover:opacity-80"
+					>{username}</a
+				></span
+			>
 
-				<Qr {text} image={'/images/invoice.svg'} bind:qr />
-
-				<div class="mb-10">
-					<button
-						class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2 mx-auto"
-						on:click={() => copy(text)}
-						><Icon icon="copy" style="mr-1" />
-						<div>Copy</div></button
-					>
+			<div id="qr" class="w-80 mx-auto" bind:this={qr} on:click={full}>
+				<div class="max-w-lg mx-auto">
+					{@html svg}
 				</div>
+			</div>
 
-				<div class="px-5 space-y-3">
-					{#if invoice.tip}
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">{$t('invoice.invoice')}</span>
-							<span class="font-semibold text-sm"
-								>{f(amountFiat, currency)}
-								<span class="text-secondary font-normal">{`(${s(amount)} SAT)`}</span></span
-							>
-						</div>
+			<div class="mb-10">
+				<button
+					class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2 mx-auto"
+					on:click={() => copy(text)}
+					><Icon icon="copy" style="mr-1" />
+					<div>Copy</div></button
+				>
+			</div>
 
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">{$t('invoice.tip')}</span>
-							<span class="font-semibold text-sm"
-								>{f(tipAmount, currency)}
-								<span class="text-secondary font-normal">{`(${s(tip)} SAT)`}</span></span
-							>
-						</div>
-					{/if}
+			<div class="px-5 space-y-3 w-80 mx-auto">
+				{#if invoice.tip}
+					<div class="flex justify-between">
+						<span class="font-semibold text-sm">{$t('invoice.invoice')}</span>
+						<span class="font-semibold text-sm"
+							>{f(amountFiat, currency)}
+							<span class="text-secondary font-normal">{`(${s(amount)} SAT)`}</span></span
+						>
+					</div>
 
-					<div class="flex flex-wrap justify-between">
-						<span class="font-bold mr-1">{$t('invoice.total')}</span>
-						<span class="font-bold"
-							>{f(amountFiat + parseFloat(tipAmount), currency)}
-							<span class="text-secondary font-normal">{`(${s(tip + amount)} SAT)`}</span></span
+					<div class="flex justify-between">
+						<span class="font-semibold text-sm">{$t('invoice.tip')}</span>
+						<span class="font-semibold text-sm"
+							>{f(tipAmount, currency)}
+							<span class="text-secondary font-normal">{`(${s(tip)} SAT)`}</span></span
 						>
 					</div>
+				{/if}
+
+				<div class="flex flex-wrap justify-between">
+					<span class="font-bold mr-1">{$t('invoice.total')}</span>
+					<span class="font-bold"
+						>{f(amountFiat + parseFloat(tipAmount), currency)}
+						<span class="text-secondary font-normal">{`(${s(tip + amount)} SAT)`}</span></span
+					>
 				</div>
 			</div>
 		</div>