dynamic qr lib import and invoice amount param

3 files changed, 25 insertions, 19 deletions

diff --git a/src/routes/invoice.js b/src/routes/invoice/[amount].js
index 4b3327f6..f75a1672 100644
--- a/src/routes/invoice.js
+++ b/src/routes/invoice/[amount].js
@@ -1,12 +1,14 @@
 import { post } from '$lib/utils';
-import { invoiceAmount } from '$lib/store';
 
 const username = 'bob',
 	network = 'lightning';
 
 export async function GET({ params }) {
-	let { text } = await post('/lightning/invoice', { amount: invoiceAmount });
+  let { amount } = params;
+  console.log("AMT", amount);
+	let { text } = await post('/lightning/invoice', { amount });
+  console.log("TXT", text);
 	await post('/invoice', { invoice: { text, network }, user: { username } });
 
-	return { body: { text } };
+	return { body: { amount, text } };
 }
diff --git a/src/routes/invoice.svelte b/src/routes/invoice/[amount].svelte
index 6dce84fe..dd6ed7fa 100644
--- a/src/routes/invoice.svelte
+++ b/src/routes/invoice/[amount].svelte
@@ -1,11 +1,12 @@
 <script>
+	import { browser } from '$app/env';
 	import { rate, user, invoiceAmount, invoiceAmountFiat } from '$lib/store';
 	import { Icon } from '$comp';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import QRCodeStyling from 'qr-code-styling';
 
 	export let text;
+  export let amount;
 
 	let tipPercent = 0;
 	const setRate = ($invoiceAmountFiat / $invoiceAmount) * 100000000;
@@ -61,21 +62,24 @@
 		customTipAmount = e.target.value;
 	};
 
-	onMount(() => {
-		const qrCode = new QRCodeStyling({
-			width: window.screen.width < 640 ? 250 : 300,
-			type: 'svg',
-			data: text,
-			image: '/images/invoice.svg',
-			dotsOptions: {
-				type: 'rounded'
-			},
-			imageOptions: {
-				hideBackgroundDots: false
-			}
-		});
+	onMount(async () => {
+		if (browser) {
+      let { default: QRCodeStyling } = await import('qr-code-styling');
+			const qrCode = new QRCodeStyling({
+				width: window.screen.width < 640 ? 250 : 300,
+				type: 'svg',
+				data: text,
+				image: '/images/invoice.svg',
+				dotsOptions: {
+					type: 'rounded'
+				},
+				imageOptions: {
+					hideBackgroundDots: false
+				}
+			});
 
-		qrCode.append(document.getElementById('qr'));
+			qrCode.append(document.getElementById('qr'));
+		}
 	});
 </script>
 
diff --git a/src/routes/receive.svelte b/src/routes/receive.svelte
index 095a2ba3..ff156783 100644
--- a/src/routes/receive.svelte
+++ b/src/routes/receive.svelte
@@ -160,7 +160,7 @@
 					0
 						? 'opacity-50'
 						: 'opacity-100'}"
-					on:click={() => goto('/invoice')}
+     on:click={() => goto(`/invoice/${$invoiceAmount}`)}
 					disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
 				>
 				<button