From b972aa21389c20ab9da1a627612bbc1dafeec366 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 29 Jul 2022 23:40:59 -0700
Subject: dynamic qr lib import and invoice amount param

---
 src/routes/invoice/[amount].js     |  14 +++
 src/routes/invoice/[amount].svelte | 252 +++++++++++++++++++++++++++++++++++++
 2 files changed, 266 insertions(+)
 create mode 100644 src/routes/invoice/[amount].js
 create mode 100644 src/routes/invoice/[amount].svelte

(limited to 'src/routes/invoice')

diff --git a/src/routes/invoice/[amount].js b/src/routes/invoice/[amount].js
new file mode 100644
index 00000000..f75a1672
--- /dev/null
+++ b/src/routes/invoice/[amount].js
@@ -0,0 +1,14 @@
+import { post } from '$lib/utils';
+
+const username = 'bob',
+	network = 'lightning';
+
+export async function GET({ params }) {
+  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: { amount, text } };
+}
diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte
new file mode 100644
index 00000000..dd6ed7fa
--- /dev/null
+++ b/src/routes/invoice/[amount].svelte
@@ -0,0 +1,252 @@
+<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';
+
+	export let text;
+  export let amount;
+
+	let tipPercent = 0;
+	const setRate = ($invoiceAmountFiat / $invoiceAmount) * 100000000;
+
+	$: tipAmount = customTipAmount
+		? customTipAmount < 0
+			? (customTipAmount = 0)
+			: customTipAmount
+		: ($invoiceAmountFiat / 100) * tipPercent;
+
+	$: tipAmountFormatted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(tipAmount);
+
+	$: tipAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		tipAmount / (setRate / 100000000)
+	);
+
+	$: totalAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		$invoiceAmount + parseFloat(tipAmountSats.replace(/,/g, ''))
+	);
+
+	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($invoiceAmountFiat + tipAmount);
+
+	const invoiceAmountFormatted = new Intl.NumberFormat('en-US', {
+		maximumFractionDigits: 0
+	}).format($invoiceAmount);
+
+	const invoiceAmountFiatFormatted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($invoiceAmountFiat);
+
+	let customTipAmount;
+
+	const tipAmounts = ['None', '10%', '15%', '20%'];
+
+	const handleTipButtonClick = (amount) => {
+		customTipAmount = '';
+		if (amount === 'None') {
+			tipPercent = 0;
+		} else {
+			tipPercent = amount.slice(0, 2);
+		}
+	};
+
+	const handleCustomTipAmount = (e) => {
+		tipPercent = 0;
+		customTipAmount = e.target.value;
+	};
+
+	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'));
+		}
+	});
+</script>
+
+<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={() => goto('/receive')}>
+	<Icon icon="arrow-left" style="w-10" />
+</button>
+
+<div class="flex justify-center items-center mb-20 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"
+	>
+		{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
+			<!-- tipping section  -->
+			<div class="text-center space-y-5">
+				<h1 class="text-4xl font-semibold">Add a tip?</h1>
+
+				<div>
+					<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+						class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+					>
+					<span class="block text-secondary text-sm">{tipPercent}%</span>
+				</div>
+
+				<input
+					id="slider"
+					type="range"
+					min="0"
+					max="100"
+					value={tipPercent}
+					class="px-2"
+					on:input={(e) => {
+						customTipAmount = '';
+						tipPercent = e.target.value;
+					}}
+				/>
+
+				<div>
+					{#each tipAmounts as amount}
+						<button
+							class="bg-primary w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
+								amount.slice(0, 2) ||
+							((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+								? '!bg-black text-white'
+								: ''}"
+							on:click={() => handleTipButtonClick(amount)}>{amount}</button
+						>
+					{/each}
+
+					<div class="relative">
+						<span
+							class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+								? 'opacity-50'
+								: 'opacity-100'}">$</span
+						>
+						<input
+							type="number"
+							min="0"
+							on:input={(e) => handleCustomTipAmount(e)}
+							class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+							placeholder="Other"
+						/>
+						<button
+							class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount
+								? 'opacity-50'
+								: 'opacity-100'}"
+							disabled={!customTipAmount}>Done</button
+						>
+					</div>
+				</div>
+			</div>
+
+			<div
+				class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+				id="section-divider"
+			/>
+
+			<!-- invoice section -->
+			<div class="text-center space-y-5">
+				<span class="text-secondary"
+					>Scan to pay <span class="text-black font-semibold">insert name here</span></span
+				>
+
+				<div
+					id="qr"
+					class="border border-lightgrey rounded-3xl lg:p-5 flex justify-center items-center"
+				/>
+
+				<div class="px-5 space-y-3">
+					<div class="flex justify-between">
+						<span class="font-semibold text-sm">Invoice</span>
+						<span class="font-semibold text-sm"
+							>{invoiceAmountFiatFormatted}
+							<span class="text-secondary font-normal">{`(${invoiceAmountFormatted} SATS)`}</span
+							></span
+						>
+					</div>
+
+					<div class="flex justify-between">
+						<span class="font-semibold text-sm">Tip</span>
+						<span class="font-semibold text-sm"
+							>{tipAmountFormatted}
+							<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+						>
+					</div>
+
+					<div class="flex justify-between">
+						<span class="font-bold">Total</span>
+						<span class="font-bold"
+							>{totalAmountFormatted}
+							<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
+						>
+					</div>
+				</div>
+			</div>
+		{:else}
+			<div
+				class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
+			/>
+			<div
+				class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+				id="section-divider"
+			/>
+			<div
+				class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
+			/>
+		{/if}
+	</div>
+</div>
+
+<style>
+	#slider {
+		-webkit-appearance: none;
+		width: 100%;
+		height: 6px;
+		border-radius: 5px;
+		background: #eaecef;
+		outline: none;
+	}
+
+	#slider:active {
+		background-color: black;
+	}
+
+	#slider::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 25px;
+		height: 25px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+
+	#slider::-moz-range-thumb {
+		width: 25px;
+		height: 25px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+	}
+
+	input[type='number'] {
+		-moz-appearance: textfield;
+	}
+</style>
-- 
cgit v1.2.3


From 8b0d28fecb0e38ac9c85e5e3e7edecc857773f51 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 00:41:39 -0600
Subject: format

---
 src/routes/invoice/[amount].js     | 6 +++---
 src/routes/invoice/[amount].svelte | 4 ++--
 src/routes/receive.svelte          | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/routes/invoice')

diff --git a/src/routes/invoice/[amount].js b/src/routes/invoice/[amount].js
index f75a1672..f9b31211 100644
--- a/src/routes/invoice/[amount].js
+++ b/src/routes/invoice/[amount].js
@@ -4,10 +4,10 @@ const username = 'bob',
 	network = 'lightning';
 
 export async function GET({ params }) {
-  let { amount } = params;
-  console.log("AMT", amount);
+	let { amount } = params;
+	console.log('AMT', amount);
 	let { text } = await post('/lightning/invoice', { amount });
-  console.log("TXT", text);
+	console.log('TXT', text);
 	await post('/invoice', { invoice: { text, network }, user: { username } });
 
 	return { body: { amount, text } };
diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte
index dd6ed7fa..4c1ec199 100644
--- a/src/routes/invoice/[amount].svelte
+++ b/src/routes/invoice/[amount].svelte
@@ -6,7 +6,7 @@
 	import { onMount } from 'svelte';
 
 	export let text;
-  export let amount;
+	export let amount;
 
 	let tipPercent = 0;
 	const setRate = ($invoiceAmountFiat / $invoiceAmount) * 100000000;
@@ -64,7 +64,7 @@
 
 	onMount(async () => {
 		if (browser) {
-      let { default: QRCodeStyling } = await import('qr-code-styling');
+			let { default: QRCodeStyling } = await import('qr-code-styling');
 			const qrCode = new QRCodeStyling({
 				width: window.screen.width < 640 ? 250 : 300,
 				type: 'svg',
diff --git a/src/routes/receive.svelte b/src/routes/receive.svelte
index ff156783..e78934a9 100644
--- a/src/routes/receive.svelte
+++ b/src/routes/receive.svelte
@@ -160,7 +160,7 @@
 					0
 						? 'opacity-50'
 						: 'opacity-100'}"
-     on:click={() => goto(`/invoice/${$invoiceAmount}`)}
+					on:click={() => goto(`/invoice/${$invoiceAmount}`)}
 					disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
 				>
 				<button
-- 
cgit v1.2.3


From df8701369ad08fd171169e10c89640d3a3f370f0 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 29 Jul 2022 23:43:16 -0700
Subject: remove logs

---
 src/routes/invoice/[amount].js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'src/routes/invoice')

diff --git a/src/routes/invoice/[amount].js b/src/routes/invoice/[amount].js
index f9b31211..ea904e03 100644
--- a/src/routes/invoice/[amount].js
+++ b/src/routes/invoice/[amount].js
@@ -4,10 +4,8 @@ const username = 'bob',
 	network = 'lightning';
 
 export async function GET({ params }) {
-	let { amount } = params;
-	console.log('AMT', amount);
+  let { amount } = params;
 	let { text } = await post('/lightning/invoice', { amount });
-	console.log('TXT', text);
 	await post('/invoice', { invoice: { text, network }, user: { username } });
 
 	return { body: { amount, text } };
-- 
cgit v1.2.3


From ceb96cc9c5b627ee0e0df76232f8c921778ddc0e Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 29 Jul 2022 23:44:06 -0700
Subject: format

---
 src/routes/invoice/[amount].js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/routes/invoice')

diff --git a/src/routes/invoice/[amount].js b/src/routes/invoice/[amount].js
index ea904e03..9e9678a6 100644
--- a/src/routes/invoice/[amount].js
+++ b/src/routes/invoice/[amount].js
@@ -4,7 +4,7 @@ const username = 'bob',
 	network = 'lightning';
 
 export async function GET({ params }) {
-  let { amount } = params;
+	let { amount } = params;
 	let { text } = await post('/lightning/invoice', { amount });
 	await post('/invoice', { invoice: { text, network }, user: { username } });
 
-- 
cgit v1.2.3


From 8851572f78a70c7bd02a3d669dc103459323ed8d Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 06:52:55 -0600
Subject: add 404 and error page, redirect to login if trying to access w/o
 user

---
 src/components/AppHeader.svelte    |   4 +-
 src/routes/[...path].svelte        |  16 +++
 src/routes/__error.svelte          |  16 +++
 src/routes/invoice/[amount].svelte | 232 +++++++++++++++++++------------------
 src/routes/receive.svelte          | 184 +++++++++++++++--------------
 static/icons/error.svg             |   3 +
 static/icons/info.svg              |   2 +-
 static/icons/question.svg          |   3 +
 8 files changed, 256 insertions(+), 204 deletions(-)
 create mode 100644 src/routes/[...path].svelte
 create mode 100644 src/routes/__error.svelte
 create mode 100644 static/icons/error.svg
 create mode 100644 static/icons/question.svg

(limited to 'src/routes/invoice')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 3f8e7e87..6376e27f 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -1,7 +1,7 @@
 <script>
 	// we will want to dynamically use the users avatar on this screen if they have uploaded one
 
-  import { user } from "$lib/store";
+	import { user } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
 </script>
@@ -15,7 +15,7 @@
 			><Icon icon="clock" style="mx-auto" /></button
 		>
 		<button class="bg-white p-2 rounded-full  w-12 h-12"
-          ><Icon icon="profile" style="mx-auto" /> {$user.username}</button
+			><Icon icon="profile" style="mx-auto" /></button
 		>
 		<button class="bg-white p-2 rounded-full  w-12 h-12"
 			><Icon icon="menu" style="mx-auto" /></button
diff --git a/src/routes/[...path].svelte b/src/routes/[...path].svelte
new file mode 100644
index 00000000..503316bb
--- /dev/null
+++ b/src/routes/[...path].svelte
@@ -0,0 +1,16 @@
+<script>
+	import { Icon } from '$comp';
+</script>
+
+<div class="flex justify-center items-center mt-20">
+	<div class="space-y-5 text-center">
+		<a href="/">
+			<Icon icon="logo" />
+		</a>
+
+		<Icon icon="question" style="mx-auto w-full" />
+
+		<h1 class="font-bold text-5xl">404</h1>
+		<p>Page not found.</p>
+	</div>
+</div>
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
new file mode 100644
index 00000000..6cdeeac7
--- /dev/null
+++ b/src/routes/__error.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { Icon } from '$comp';
+</script>
+
+<div class="flex justify-center items-center mt-20">
+	<div class="space-y-5 text-center">
+		<a href="/">
+			<Icon icon="logo" />
+		</a>
+
+		<Icon icon="error" style="mx-auto w-full" />
+
+		<h1 class="font-bold text-5xl">Error</h1>
+		<p>Please try again or contact support.</p>
+	</div>
+</div>
diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte
index 4c1ec199..2cf16e37 100644
--- a/src/routes/invoice/[amount].svelte
+++ b/src/routes/invoice/[amount].svelte
@@ -8,6 +8,10 @@
 	export let text;
 	export let amount;
 
+	if (!$user && typeof window !== 'undefined') {
+		window.location = '/login';
+	}
+
 	let tipPercent = 0;
 	const setRate = ($invoiceAmountFiat / $invoiceAmount) * 100000000;
 
@@ -83,131 +87,133 @@
 	});
 </script>
 
-<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={() => goto('/receive')}>
-	<Icon icon="arrow-left" style="w-10" />
-</button>
-
-<div class="flex justify-center items-center mb-20 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"
-	>
-		{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
-			<!-- tipping section  -->
-			<div class="text-center space-y-5">
-				<h1 class="text-4xl font-semibold">Add a tip?</h1>
-
-				<div>
-					<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-						class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
-					>
-					<span class="block text-secondary text-sm">{tipPercent}%</span>
-				</div>
-
-				<input
-					id="slider"
-					type="range"
-					min="0"
-					max="100"
-					value={tipPercent}
-					class="px-2"
-					on:input={(e) => {
-						customTipAmount = '';
-						tipPercent = e.target.value;
-					}}
-				/>
-
-				<div>
-					{#each tipAmounts as amount}
-						<button
-							class="bg-primary w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
-								amount.slice(0, 2) ||
-							((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-								? '!bg-black text-white'
-								: ''}"
-							on:click={() => handleTipButtonClick(amount)}>{amount}</button
+{#if $user}
+	<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={() => goto('/receive')}>
+		<Icon icon="arrow-left" style="w-10" />
+	</button>
+
+	<div class="flex justify-center items-center mb-20 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"
+		>
+			{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
+				<!-- tipping section  -->
+				<div class="text-center space-y-5">
+					<h1 class="text-4xl font-semibold">Add a tip?</h1>
+
+					<div>
+						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+							class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
 						>
-					{/each}
+						<span class="block text-secondary text-sm">{tipPercent}%</span>
+					</div>
 
-					<div class="relative">
-						<span
-							class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-								? 'opacity-50'
-								: 'opacity-100'}">$</span
-						>
-						<input
-							type="number"
-							min="0"
-							on:input={(e) => handleCustomTipAmount(e)}
-							class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-							placeholder="Other"
-						/>
-						<button
-							class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount
-								? 'opacity-50'
-								: 'opacity-100'}"
-							disabled={!customTipAmount}>Done</button
-						>
+					<input
+						id="slider"
+						type="range"
+						min="0"
+						max="100"
+						value={tipPercent}
+						class="px-2"
+						on:input={(e) => {
+							customTipAmount = '';
+							tipPercent = e.target.value;
+						}}
+					/>
+
+					<div>
+						{#each tipAmounts as amount}
+							<button
+								class="bg-primary w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
+									amount.slice(0, 2) ||
+								((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+									? '!bg-black text-white'
+									: ''}"
+								on:click={() => handleTipButtonClick(amount)}>{amount}</button
+							>
+						{/each}
+
+						<div class="relative">
+							<span
+								class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+									? 'opacity-50'
+									: 'opacity-100'}">$</span
+							>
+							<input
+								type="number"
+								min="0"
+								on:input={(e) => handleCustomTipAmount(e)}
+								class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+								placeholder="Other"
+							/>
+							<button
+								class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount
+									? 'opacity-50'
+									: 'opacity-100'}"
+								disabled={!customTipAmount}>Done</button
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-
-			<div
-				class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-				id="section-divider"
-			/>
-
-			<!-- invoice section -->
-			<div class="text-center space-y-5">
-				<span class="text-secondary"
-					>Scan to pay <span class="text-black font-semibold">insert name here</span></span
-				>
 
 				<div
-					id="qr"
-					class="border border-lightgrey rounded-3xl lg:p-5 flex justify-center items-center"
+					class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+					id="section-divider"
 				/>
 
-				<div class="px-5 space-y-3">
-					<div class="flex justify-between">
-						<span class="font-semibold text-sm">Invoice</span>
-						<span class="font-semibold text-sm"
-							>{invoiceAmountFiatFormatted}
-							<span class="text-secondary font-normal">{`(${invoiceAmountFormatted} SATS)`}</span
-							></span
-						>
-					</div>
-
-					<div class="flex justify-between">
-						<span class="font-semibold text-sm">Tip</span>
-						<span class="font-semibold text-sm"
-							>{tipAmountFormatted}
-							<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
-						>
-					</div>
+				<!-- invoice section -->
+				<div class="text-center space-y-5">
+					<span class="text-secondary"
+						>Scan to pay <span class="text-black font-semibold">insert name here</span></span
+					>
 
-					<div class="flex justify-between">
-						<span class="font-bold">Total</span>
-						<span class="font-bold"
-							>{totalAmountFormatted}
-							<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
-						>
+					<div
+						id="qr"
+						class="border border-lightgrey rounded-3xl lg:p-5 flex justify-center items-center"
+					/>
+
+					<div class="px-5 space-y-3">
+						<div class="flex justify-between">
+							<span class="font-semibold text-sm">Invoice</span>
+							<span class="font-semibold text-sm"
+								>{invoiceAmountFiatFormatted}
+								<span class="text-secondary font-normal">{`(${invoiceAmountFormatted} SATS)`}</span
+								></span
+							>
+						</div>
+
+						<div class="flex justify-between">
+							<span class="font-semibold text-sm">Tip</span>
+							<span class="font-semibold text-sm"
+								>{tipAmountFormatted}
+								<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+							>
+						</div>
+
+						<div class="flex justify-between">
+							<span class="font-bold">Total</span>
+							<span class="font-bold"
+								>{totalAmountFormatted}
+								<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-		{:else}
-			<div
-				class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
-			/>
-			<div
-				class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-				id="section-divider"
-			/>
-			<div
-				class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
-			/>
-		{/if}
+			{:else}
+				<div
+					class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
+				/>
+				<div
+					class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+					id="section-divider"
+				/>
+				<div
+					class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
+				/>
+			{/if}
+		</div>
 	</div>
-</div>
+{/if}
 
 <style>
 	#slider {
diff --git a/src/routes/receive.svelte b/src/routes/receive.svelte
index e78934a9..11bafe9a 100644
--- a/src/routes/receive.svelte
+++ b/src/routes/receive.svelte
@@ -2,7 +2,11 @@
 	// in the future we will want to allow users to set their fiat currency in the settings
 	import { AppHeader, Icon } from '$comp';
 	import { goto } from '$app/navigation';
-	import { invoiceAmount, invoiceAmountFiat, rate } from '$lib/store';
+	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
+
+	if (!$user && typeof window !== 'undefined') {
+		window.location = '/login';
+	}
 
 	let useFiat = true;
 	let amountFiat = 0;
@@ -78,98 +82,102 @@
 	};
 </script>
 
-<AppHeader />
+{#if $user}
+	<AppHeader />
 
-<!-- step 1 input amount and generate QR code -->
-<div class="flex justify-center items-center mt-20 mb-3 px-3">
-	{#if $rate}
-		<div class="space-y-5">
-			<!-- amounts -->
-			<div class="text-center">
-				<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
-					{useFiat ? `$${amountFiat}` : amountSatsFormatted}<span
-						class="tracking-normal text-base font-normal">{useFiat ? 'USD' : 'SATS'}</span
+	<!-- step 1 input amount and generate QR code -->
+	<div class="flex justify-center items-center mt-20 mb-3 px-3">
+		{#if $rate}
+			<div class="space-y-5">
+				<!-- amounts -->
+				<div class="text-center">
+					<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
+						{useFiat ? `$${amountFiat}` : amountSatsFormatted}<span
+							class="tracking-normal text-base font-normal">{useFiat ? 'USD' : 'SATS'}</span
+						>
+					</div>
+					<span class="text-secondary mr-1"
+						>{useFiat ? `${amountSatsConverted} SATS` : `${amountFiatConverted} USD`}</span
+					>
+					<button
+						on:click={() => {
+							if (useFiat) {
+								amountSats = (amountFiat / ($rate / 100000000)).toFixed(0).toString();
+							} else {
+								amountFiat =
+									(amountSats * ($rate / 100000000)).toFixed(2) > 0.0
+										? (amountSats * ($rate / 100000000)).toFixed(2).toString()
+										: 0;
+							}
+							useFiat = !useFiat;
+						}}><Icon icon="swap" style="inline" /></button
 					>
 				</div>
-				<span class="text-secondary mr-1"
-					>{useFiat ? `${amountSatsConverted} SATS` : `${amountFiatConverted} USD`}</span
-				>
-				<button
-					on:click={() => {
-						if (useFiat) {
-							amountSats = (amountFiat / ($rate / 100000000)).toFixed(0).toString();
-						} else {
-							amountFiat =
-								(amountSats * ($rate / 100000000)).toFixed(2) > 0.0
-									? (amountSats * ($rate / 100000000)).toFixed(2).toString()
-									: 0;
-						}
-						useFiat = !useFiat;
-					}}><Icon icon="swap" style="inline" /></button
-				>
-			</div>
 
-			<!-- error message -->
-			{#if message}
-				<div
-					class="text-orange-500 text-sm text-center font-bold bg-primary p-2 rounded-xl flex justify-center items-center space-x-1"
-				>
-					<Icon icon="info" style="w-5" />
-					<p>{message}</p>
-				</div>
-			{/if}
+				<!-- error message -->
+				{#if message}
+					<div
+						class="text-orange-500 text-sm text-center font-bold bg-primary p-2 rounded-xl flex justify-center items-center space-x-1"
+					>
+						<Icon icon="info" style="w-5" />
+						<p>{message}</p>
+					</div>
+				{/if}
 
-			<!-- numpad -->
-			<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
-				{#each numPad as value}
-					{#if value === '<'}
-						<button
-							class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center"
-							on:click={() => handleInput(value)}
-						>
-							<svg
-								class="w-5"
-								width="24"
-								height="24"
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
+				<!-- numpad -->
+				<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
+					{#each numPad as value}
+						{#if value === '<'}
+							<button
+								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center"
+								on:click={() => handleInput(value)}
 							>
-								<path
-									d="M15 19L8 12L15 5"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-							</svg>
-						</button>
-					{:else}
-						<button
-							class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
-							on:click={() => handleInput(value)}>{value}</button
-						>
-					{/if}
-				{/each}
-			</div>
+								<svg
+									class="w-5"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										d="M15 19L8 12L15 5"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								</svg>
+							</button>
+						{:else}
+							<button
+								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
+								on:click={() => handleInput(value)}>{value}</button
+							>
+						{/if}
+					{/each}
+				</div>
 
-			<!-- buttons -->
-			<div class="space-y-3 w-full md:w-[300px] mx-auto">
-				<button
-					class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
-					0
-						? 'opacity-50'
-						: 'opacity-100'}"
-					on:click={() => goto(`/invoice/${$invoiceAmount}`)}
-					disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
-				>
-				<button
-					class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
-					disabled={true}><Icon icon="send" style="mr-2" /> Send Invoice</button
-				>
+				<!-- buttons -->
+				<div class="space-y-3 w-full md:w-[300px] mx-auto">
+					<button
+						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
+						0
+							? 'opacity-50'
+							: 'opacity-100'}"
+						on:click={() => goto(`/invoice/${$invoiceAmount}`)}
+						disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
+					>
+					<button
+						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
+						disabled={true}><Icon icon="send" style="mr-2" /> Send Invoice</button
+					>
+				</div>
 			</div>
-		</div>
-	{:else}
-		<div class="w-full md:w-[300px] h-[475px] md:h-[485px] animate-pulse bg-gray-400 rounded-xl" />
-	{/if}
-</div>
+		{:else}
+			<div
+				class="w-full md:w-[300px] h-[475px] md:h-[485px] animate-pulse bg-gray-400 rounded-xl"
+			/>
+		{/if}
+	</div>
+{/if}
diff --git a/static/icons/error.svg b/static/icons/error.svg
new file mode 100644
index 00000000..7d8269a4
--- /dev/null
+++ b/static/icons/error.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 14L12 12M12 12L14 10M12 12L10 10M12 12L14 14M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/info.svg b/static/icons/info.svg
index 80f33b37..e916f53c 100644
--- a/static/icons/info.svg
+++ b/static/icons/info.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 16H12V12H11M12 8H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/static/icons/question.svg b/static/icons/question.svg
new file mode 100644
index 00000000..b7d46339
--- /dev/null
+++ b/static/icons/question.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.22766 9C8.77678 7.83481 10.2584 7 12.0001 7C14.2092 7 16.0001 8.34315 16.0001 10C16.0001 11.3994 14.7224 12.5751 12.9943 12.9066C12.4519 13.0106 12.0001 13.4477 12.0001 14M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
-- 
cgit v1.2.3


From c230185c795b8518e4d94d1cbe80c2596be53ecf Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 08:31:25 -0600
Subject: add mobile view with dynamic tipping menu

---
 src/routes/invoice/[amount].svelte | 284 +++++++++++++++++++++++--------------
 static/icons/heart.svg             |   3 +
 2 files changed, 177 insertions(+), 110 deletions(-)
 create mode 100644 static/icons/heart.svg

(limited to 'src/routes/invoice')

diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte
index 2cf16e37..d1dea907 100644
--- a/src/routes/invoice/[amount].svelte
+++ b/src/routes/invoice/[amount].svelte
@@ -74,6 +74,9 @@
 				type: 'svg',
 				data: text,
 				image: '/images/invoice.svg',
+				backgroundOptions: {
+					color: 'rgba(0, 0, 0, 0)'
+				},
 				dotsOptions: {
 					type: 'rounded'
 				},
@@ -85,132 +88,189 @@
 			qrCode.append(document.getElementById('qr'));
 		}
 	});
+
+	let showMobileTip = false;
+
+	const handleBackButton = () => {
+		if (showMobileTip) {
+			tipPercent = 0;
+			customInput.value = '';
+			customTipAmount = 0;
+			tipAmount = 0;
+			showMobileTip = false;
+		} else {
+			goto('/receive');
+		}
+	};
+
+	let customInput;
 </script>
 
 {#if $user}
-	<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={() => goto('/receive')}>
-		<Icon icon="arrow-left" style="w-10" />
-	</button>
-
-	<div class="flex justify-center items-center mb-20 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"
-		>
-			{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
-				<!-- tipping section  -->
-				<div class="text-center space-y-5">
-					<h1 class="text-4xl font-semibold">Add a tip?</h1>
-
-					<div>
-						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-							class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
-						>
-						<span class="block text-secondary text-sm">{tipPercent}%</span>
-					</div>
-
-					<input
-						id="slider"
-						type="range"
-						min="0"
-						max="100"
-						value={tipPercent}
-						class="px-2"
-						on:input={(e) => {
-							customTipAmount = '';
-							tipPercent = e.target.value;
-						}}
-					/>
+	<div class:full-shadow={showMobileTip}>
+		<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
+			<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"
+			>
+				{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
+					<!-- tipping section  -->
+					<div
+						class="absolute {showMobileTip
+							? 'bottom-0'
+							: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
+					>
+						<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
 
-					<div>
-						{#each tipAmounts as amount}
-							<button
-								class="bg-primary w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
-									amount.slice(0, 2) ||
-								((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-									? '!bg-black text-white'
-									: ''}"
-								on:click={() => handleTipButtonClick(amount)}>{amount}</button
+						<div>
+							<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+								class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
 							>
-						{/each}
+							<span class="block text-secondary text-sm">{tipPercent}%</span>
+						</div>
 
-						<div class="relative">
-							<span
-								class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-									? 'opacity-50'
-									: 'opacity-100'}">$</span
-							>
-							<input
-								type="number"
-								min="0"
-								on:input={(e) => handleCustomTipAmount(e)}
-								class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-								placeholder="Other"
-							/>
-							<button
-								class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount
-									? 'opacity-50'
-									: 'opacity-100'}"
-								disabled={!customTipAmount}>Done</button
-							>
+						<input
+							id="slider"
+							type="range"
+							min="0"
+							max="100"
+							value={tipPercent}
+							class="px-2"
+							on:input={(e) => {
+								customTipAmount = '';
+								tipPercent = e.target.value;
+							}}
+						/>
+
+						<div>
+							{#each tipAmounts as amount}
+								<button
+									class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
+										amount.slice(0, 2) ||
+									((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+										? '!bg-black text-white'
+										: ''}"
+									on:click={() => handleTipButtonClick(amount)}>{amount}</button
+								>
+							{/each}
+
+							<div class="relative">
+								<span
+									class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+										? 'opacity-50'
+										: 'opacity-100'}">$</span
+								>
+								<input
+									bind:this={customInput}
+									type="number"
+									min="0"
+									on:input={(e) => handleCustomTipAmount(e)}
+									class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+									placeholder="Other"
+								/>
+								<button
+									class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+										? !customTipAmount && !tipAmount
+											? 'opacity-50'
+											: 'opacity-100'
+										: !customTipAmount
+										? 'opacity-50'
+										: 'opacity-100'}"
+									disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+									>Done</button
+								>
+							</div>
 						</div>
 					</div>
-				</div>
-
-				<div
-					class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-					id="section-divider"
-				/>
-
-				<!-- invoice section -->
-				<div class="text-center space-y-5">
-					<span class="text-secondary"
-						>Scan to pay <span class="text-black font-semibold">insert name here</span></span
-					>
 
 					<div
-						id="qr"
-						class="border border-lightgrey rounded-3xl lg:p-5 flex justify-center items-center"
+						class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+						id="section-divider"
 					/>
 
-					<div class="px-5 space-y-3">
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Invoice</span>
-							<span class="font-semibold text-sm"
-								>{invoiceAmountFiatFormatted}
-								<span class="text-secondary font-normal">{`(${invoiceAmountFormatted} SATS)`}</span
-								></span
-							>
-						</div>
-
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Tip</span>
-							<span class="font-semibold text-sm"
-								>{tipAmountFormatted}
-								<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+					<!-- invoice section -->
+					<div class="text-center space-y-5">
+						<button
+							class="block md:hidden bg-black {showMobileTip
+								? 'text-white/50'
+								: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
+							on:click={() => (showMobileTip = true)}
+							disabled={showMobileTip}
+						>
+							<svg
+								width="24"
+								height="24"
+								class="mr-1"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
 							>
-						</div>
+								<path
+									d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg> Add a tip
+						</button>
+
+						<span class="text-secondary block"
+							>Scan to pay <span class="text-black font-semibold">{$user.username}</span></span
+						>
 
-						<div class="flex justify-between">
-							<span class="font-bold">Total</span>
-							<span class="font-bold"
-								>{totalAmountFormatted}
-								<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
-							>
+						<div
+							id="qr"
+							class="border {showMobileTip
+								? 'border-gray-400'
+								: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center"
+						/>
+
+						<div class="px-5 space-y-3">
+							<div class="flex justify-between">
+								<span class="font-semibold text-sm">Invoice</span>
+								<span class="font-semibold text-sm"
+									>{invoiceAmountFiatFormatted}
+									<span class="text-secondary font-normal"
+										>{`(${invoiceAmountFormatted} SATS)`}</span
+									></span
+								>
+							</div>
+
+							<div class="flex justify-between">
+								<span class="font-semibold text-sm">Tip</span>
+								<span class="font-semibold text-sm"
+									>{tipAmountFormatted}
+									<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+								>
+							</div>
+
+							<div class="flex justify-between">
+								<span class="font-bold">Total</span>
+								<span class="font-bold"
+									>{totalAmountFormatted}
+									<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span
+									></span
+								>
+							</div>
 						</div>
 					</div>
-				</div>
-			{:else}
-				<div
-					class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
-				/>
-				<div
-					class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-					id="section-divider"
-				/>
-				<div
-					class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
-				/>
-			{/if}
+				{:else}
+					<div
+						class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
+					/>
+					<div
+						class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+						id="section-divider"
+					/>
+					<div
+						class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
+					/>
+				{/if}
+			</div>
 		</div>
 	</div>
 {/if}
@@ -255,4 +315,8 @@
 	input[type='number'] {
 		-moz-appearance: textfield;
 	}
+
+	.full-shadow {
+		box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25);
+	}
 </style>
diff --git a/static/icons/heart.svg b/static/icons/heart.svg
new file mode 100644
index 00000000..f3a5f757
--- /dev/null
+++ b/static/icons/heart.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
-- 
cgit v1.2.3


From 5bf4891768f1ee359ee5795272c289b40745aed5 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Sat, 30 Jul 2022 11:13:39 -0700
Subject: get invoice by uuid

---
 src/components/AppHeader.svelte       |   4 +-
 src/components/RegisterOrLogin.svelte |   2 +-
 src/lib/utils.js                      |   5 +
 src/routes/[username].js              |   3 -
 src/routes/[username].svelte          |  27 ---
 src/routes/[username]/index.js        |   3 +
 src/routes/[username]/index.svelte    |  27 +++
 src/routes/[username]/receive.svelte  | 188 ++++++++++++++++++++
 src/routes/__layout.svelte            |   2 +-
 src/routes/invoice/[amount].js        |  12 --
 src/routes/invoice/[amount].svelte    | 322 ----------------------------------
 src/routes/invoice/[id].js            |  11 ++
 src/routes/invoice/[id].svelte        | 322 ++++++++++++++++++++++++++++++++++
 src/routes/invoice/index.js           |  11 ++
 src/routes/receive.svelte             | 178 -------------------
 15 files changed, 572 insertions(+), 545 deletions(-)
 delete mode 100644 src/routes/[username].js
 delete mode 100644 src/routes/[username].svelte
 create mode 100644 src/routes/[username]/index.js
 create mode 100644 src/routes/[username]/index.svelte
 create mode 100644 src/routes/[username]/receive.svelte
 delete mode 100644 src/routes/invoice/[amount].js
 delete mode 100644 src/routes/invoice/[amount].svelte
 create mode 100644 src/routes/invoice/[id].js
 create mode 100644 src/routes/invoice/[id].svelte
 create mode 100644 src/routes/invoice/index.js
 delete mode 100644 src/routes/receive.svelte

(limited to 'src/routes/invoice')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index b096f01e..99eea6d5 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -8,9 +8,11 @@
 
 <header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative">
 	<nav class="flex justify-end items-center space-x-4 p-5">
-		<button class="bg-white p-2 rounded-full w-12 h-12" on:click={() => goto('/receive')}
+    <a href={`/${$user.username}/receive`}>
+		<button class="bg-white p-2 rounded-full w-12 h-12"
 			><Icon icon="numpad" style="mx-auto" /></button
 		>
+    </a>
 		<button class="bg-white p-2 rounded-full  w-12 h-12"
 			><Icon icon="clock" style="mx-auto" /></button
 		>
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index f5764a85..56b96499 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -22,7 +22,7 @@
 		if (!r.token) r = await post('/login', { username, password });
 		$token = r.token;
 		auth();
-    user.subscribe(() => goto('/receive'));
+    user.subscribe(({ username }) => goto(`/${username}/receive`));
 	};
 </script>
 
diff --git a/src/lib/utils.js b/src/lib/utils.js
index c17b0a98..e9d1b73e 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -6,6 +6,11 @@ export function scroll(section) {
 
 const base = browser ? '' : import.meta.env.VITE_COINOS_URL;
 
+export const get = (url) =>
+	fetch(base + url, {
+		headers: { accept: 'application/json'}
+	}).then((r) => r.json());
+
 export const post = (url, body) =>
 	fetch(base + url, {
 		method: 'POST',
diff --git a/src/routes/[username].js b/src/routes/[username].js
deleted file mode 100644
index 39a216c2..00000000
--- a/src/routes/[username].js
+++ /dev/null
@@ -1,3 +0,0 @@
-export async function GET({ params }) {
-  return { body: params }
-}
diff --git a/src/routes/[username].svelte b/src/routes/[username].svelte
deleted file mode 100644
index fe1f7754..00000000
--- a/src/routes/[username].svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-	import { AppHeader, Icon } from '$comp';
-	import { user } from '$lib/store';
-	export let username;
-
-	console.log($user, username);
-</script>
-
-{#if $user?.username === username}
-	<AppHeader />
-	<div class="flex justify-center items-center mt-20 mb-3 px-3">
-		<div class="space-y-3 w-full md:w-[300px] mx-auto">
-			<div class="text-center">
-				<b>Signed in as {username}</b>
-			</div>
-
-			<div>
-				<a href="/logout" style="cursor: pointer">
-					<button
-						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
-						><Icon icon="logout" style="mr-2" /> Logout</button
-					>
-				</a>
-			</div>
-		</div>
-	</div>
-{/if}
diff --git a/src/routes/[username]/index.js b/src/routes/[username]/index.js
new file mode 100644
index 00000000..39a216c2
--- /dev/null
+++ b/src/routes/[username]/index.js
@@ -0,0 +1,3 @@
+export async function GET({ params }) {
+  return { body: params }
+}
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
new file mode 100644
index 00000000..fe1f7754
--- /dev/null
+++ b/src/routes/[username]/index.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { AppHeader, Icon } from '$comp';
+	import { user } from '$lib/store';
+	export let username;
+
+	console.log($user, username);
+</script>
+
+{#if $user?.username === username}
+	<AppHeader />
+	<div class="flex justify-center items-center mt-20 mb-3 px-3">
+		<div class="space-y-3 w-full md:w-[300px] mx-auto">
+			<div class="text-center">
+				<b>Signed in as {username}</b>
+			</div>
+
+			<div>
+				<a href="/logout" style="cursor: pointer">
+					<button
+						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
+						><Icon icon="logout" style="mr-2" /> Logout</button
+					>
+				</a>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/[username]/receive.svelte b/src/routes/[username]/receive.svelte
new file mode 100644
index 00000000..9ebc0401
--- /dev/null
+++ b/src/routes/[username]/receive.svelte
@@ -0,0 +1,188 @@
+<script>
+	// in the future we will want to allow users to set their fiat currency in the settings
+	import { AppHeader, Icon } from '$comp';
+	import { goto } from '$app/navigation';
+	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
+	import { post } from '$lib/utils';
+	import { page } from '$app/stores';
+
+	let useFiat = true;
+	let amountFiat = 0;
+	let amountSats = 0;
+	let message = '';
+
+	$: amount = useFiat ? Math.round(amountFiat / ($rate / 100000000)) : amountSats;
+
+	$: $invoiceAmount = parseInt(amountSats === 0 ? amountFiat / ($rate / 100000000) : amountSats);
+	$: $invoiceAmountFiat = parseInt(
+		amountFiat === 0 ? amountSats * ($rate / 100000000) : amountFiat
+	);
+	$: amountSatsFormatted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		amountSats
+	);
+
+	$: amountFiatConverted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(amountSats * ($rate / 100000000));
+
+	$: amountSatsConverted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		amountFiat / ($rate / 100000000)
+	);
+
+	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
+
+	const handleInput = (value) => {
+		if (message) {
+			message = '';
+		}
+		if (useFiat) {
+			if (amountFiat === 0 && value !== '.' && value !== '<' && value !== '0') {
+				amountFiat = value;
+			} else if ((amountFiat === 0 || amountFiat === '0') && value === '0') {
+				return;
+			} else if (amountFiat === 0 && value === '.') {
+				amountFiat = '0.';
+			} else if (amountFiat !== 0 && amountFiat.includes('.') && value === '.') {
+				return;
+			} else if (value === '<') {
+				if (amountFiat !== 0) {
+					amountFiat = amountFiat.slice(0, amountFiat.length - 1);
+					if (amountFiat.length === 0) {
+						amountFiat = 0;
+						amountSats = 0;
+					}
+				}
+			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $rate) {
+				message = 'Please enter an amount less than 1 bitcoin.';
+			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
+				return;
+			} else {
+				amountFiat = amountFiat + value;
+			}
+		} else {
+			if (value === '.') {
+				return;
+			} else if (amountSats === 0 && value !== '<' && value !== '0') {
+				amountSats = value;
+			} else if (value === '<') {
+				if (amountSats !== 0) {
+					amountSats = amountSats.slice(0, amountSats.length - 1);
+					if (amountSats.length === 0) {
+						amountSats = 0;
+						amountFiat = 0;
+					}
+				}
+			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
+				message = 'Please enter an amount less than 1 bitcoin.';
+			} else {
+				amountSats = amountSats + value;
+			}
+		}
+	};
+
+	let submit = async () => {
+    let { id } = await post('/invoice', { amount, username: $page.params.username });
+    console.log(id)
+		goto(`/invoice/${id}`);
+	};
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="flex justify-center items-center mt-20 mb-3 px-3">
+		{#if $rate}
+			<div class="space-y-5">
+				<!-- amounts -->
+				<div class="text-center">
+					<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
+						{useFiat ? `$${amountFiat}` : amountSatsFormatted}<span
+							class="tracking-normal text-base font-normal">{useFiat ? 'USD' : 'SATS'}</span
+						>
+					</div>
+					<span class="text-secondary mr-1"
+						>{useFiat ? `${amountSatsConverted} SATS` : `${amountFiatConverted} USD`}</span
+					>
+					<button
+						on:click={() => {
+							if (useFiat) {
+								amountSats = (amountFiat / ($rate / 100000000)).toFixed(0).toString();
+							} else {
+								amountFiat =
+									(amountSats * ($rate / 100000000)).toFixed(2) > 0.0
+										? (amountSats * ($rate / 100000000)).toFixed(2).toString()
+										: 0;
+							}
+							useFiat = !useFiat;
+						}}><Icon icon="swap" style="inline" /></button
+					>
+				</div>
+
+				<!-- error message -->
+				{#if message}
+					<div
+						class="text-orange-500 text-sm text-center font-bold bg-primary p-2 rounded-xl flex justify-center items-center space-x-1"
+					>
+						<Icon icon="info" style="w-5" />
+						<p>{message}</p>
+					</div>
+				{/if}
+
+				<!-- numpad -->
+				<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
+					{#each numPad as value}
+						{#if value === '<'}
+							<button
+								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center"
+								on:click={() => handleInput(value)}
+							>
+								<svg
+									class="w-5"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										d="M15 19L8 12L15 5"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								</svg>
+							</button>
+						{:else}
+							<button
+								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
+								on:click={() => handleInput(value)}>{value}</button
+							>
+						{/if}
+					{/each}
+				</div>
+
+				<!-- buttons -->
+				<div class="space-y-3 w-full md:w-[300px] mx-auto">
+					<button
+						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
+						0
+							? 'opacity-50'
+							: 'opacity-100'}"
+						on:click={submit}
+						disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
+					>
+					<button
+						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
+						disabled={true}><Icon icon="send" style="mr-2" /> Send Invoice</button
+					>
+				</div>
+			</div>
+		{:else}
+			<div
+				class="w-full md:w-[300px] h-[475px] md:h-[485px] animate-pulse bg-gray-400 rounded-xl"
+			/>
+		{/if}
+	</div>
+{/if}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index c01dc848..95b2e0c3 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -14,7 +14,7 @@
 	onMount(() => {
 		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
 			if (!$token) goto('/login');
-      user.subscribe((u) => (ready = true));
+			user.subscribe((u) => (ready = true));
 		} else {
 			ready = true;
 		}
diff --git a/src/routes/invoice/[amount].js b/src/routes/invoice/[amount].js
deleted file mode 100644
index 9e9678a6..00000000
--- a/src/routes/invoice/[amount].js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { post } from '$lib/utils';
-
-const username = 'bob',
-	network = 'lightning';
-
-export async function GET({ params }) {
-	let { amount } = params;
-	let { text } = await post('/lightning/invoice', { amount });
-	await post('/invoice', { invoice: { text, network }, user: { username } });
-
-	return { body: { amount, text } };
-}
diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte
deleted file mode 100644
index d1dea907..00000000
--- a/src/routes/invoice/[amount].svelte
+++ /dev/null
@@ -1,322 +0,0 @@
-<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';
-
-	export let text;
-	export let amount;
-
-	if (!$user && typeof window !== 'undefined') {
-		window.location = '/login';
-	}
-
-	let tipPercent = 0;
-	const setRate = ($invoiceAmountFiat / $invoiceAmount) * 100000000;
-
-	$: tipAmount = customTipAmount
-		? customTipAmount < 0
-			? (customTipAmount = 0)
-			: customTipAmount
-		: ($invoiceAmountFiat / 100) * tipPercent;
-
-	$: tipAmountFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format(tipAmount);
-
-	$: tipAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		tipAmount / (setRate / 100000000)
-	);
-
-	$: totalAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		$invoiceAmount + parseFloat(tipAmountSats.replace(/,/g, ''))
-	);
-
-	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format($invoiceAmountFiat + tipAmount);
-
-	const invoiceAmountFormatted = new Intl.NumberFormat('en-US', {
-		maximumFractionDigits: 0
-	}).format($invoiceAmount);
-
-	const invoiceAmountFiatFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format($invoiceAmountFiat);
-
-	let customTipAmount;
-
-	const tipAmounts = ['None', '10%', '15%', '20%'];
-
-	const handleTipButtonClick = (amount) => {
-		customTipAmount = '';
-		if (amount === 'None') {
-			tipPercent = 0;
-		} else {
-			tipPercent = amount.slice(0, 2);
-		}
-	};
-
-	const handleCustomTipAmount = (e) => {
-		tipPercent = 0;
-		customTipAmount = e.target.value;
-	};
-
-	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',
-				backgroundOptions: {
-					color: 'rgba(0, 0, 0, 0)'
-				},
-				dotsOptions: {
-					type: 'rounded'
-				},
-				imageOptions: {
-					hideBackgroundDots: false
-				}
-			});
-
-			qrCode.append(document.getElementById('qr'));
-		}
-	});
-
-	let showMobileTip = false;
-
-	const handleBackButton = () => {
-		if (showMobileTip) {
-			tipPercent = 0;
-			customInput.value = '';
-			customTipAmount = 0;
-			tipAmount = 0;
-			showMobileTip = false;
-		} else {
-			goto('/receive');
-		}
-	};
-
-	let customInput;
-</script>
-
-{#if $user}
-	<div class:full-shadow={showMobileTip}>
-		<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
-			<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"
-			>
-				{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
-					<!-- tipping section  -->
-					<div
-						class="absolute {showMobileTip
-							? 'bottom-0'
-							: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
-					>
-						<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
-
-						<div>
-							<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-								class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
-							>
-							<span class="block text-secondary text-sm">{tipPercent}%</span>
-						</div>
-
-						<input
-							id="slider"
-							type="range"
-							min="0"
-							max="100"
-							value={tipPercent}
-							class="px-2"
-							on:input={(e) => {
-								customTipAmount = '';
-								tipPercent = e.target.value;
-							}}
-						/>
-
-						<div>
-							{#each tipAmounts as amount}
-								<button
-									class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
-										amount.slice(0, 2) ||
-									((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-										? '!bg-black text-white'
-										: ''}"
-									on:click={() => handleTipButtonClick(amount)}>{amount}</button
-								>
-							{/each}
-
-							<div class="relative">
-								<span
-									class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-										? 'opacity-50'
-										: 'opacity-100'}">$</span
-								>
-								<input
-									bind:this={customInput}
-									type="number"
-									min="0"
-									on:input={(e) => handleCustomTipAmount(e)}
-									class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-									placeholder="Other"
-								/>
-								<button
-									class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
-										? !customTipAmount && !tipAmount
-											? 'opacity-50'
-											: 'opacity-100'
-										: !customTipAmount
-										? 'opacity-50'
-										: 'opacity-100'}"
-									disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
-									>Done</button
-								>
-							</div>
-						</div>
-					</div>
-
-					<div
-						class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-						id="section-divider"
-					/>
-
-					<!-- invoice section -->
-					<div class="text-center space-y-5">
-						<button
-							class="block md:hidden bg-black {showMobileTip
-								? 'text-white/50'
-								: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
-							on:click={() => (showMobileTip = true)}
-							disabled={showMobileTip}
-						>
-							<svg
-								width="24"
-								height="24"
-								class="mr-1"
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								<path
-									d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-							</svg> Add a tip
-						</button>
-
-						<span class="text-secondary block"
-							>Scan to pay <span class="text-black font-semibold">{$user.username}</span></span
-						>
-
-						<div
-							id="qr"
-							class="border {showMobileTip
-								? 'border-gray-400'
-								: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center"
-						/>
-
-						<div class="px-5 space-y-3">
-							<div class="flex justify-between">
-								<span class="font-semibold text-sm">Invoice</span>
-								<span class="font-semibold text-sm"
-									>{invoiceAmountFiatFormatted}
-									<span class="text-secondary font-normal"
-										>{`(${invoiceAmountFormatted} SATS)`}</span
-									></span
-								>
-							</div>
-
-							<div class="flex justify-between">
-								<span class="font-semibold text-sm">Tip</span>
-								<span class="font-semibold text-sm"
-									>{tipAmountFormatted}
-									<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
-								>
-							</div>
-
-							<div class="flex justify-between">
-								<span class="font-bold">Total</span>
-								<span class="font-bold"
-									>{totalAmountFormatted}
-									<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span
-									></span
-								>
-							</div>
-						</div>
-					</div>
-				{:else}
-					<div
-						class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
-					/>
-					<div
-						class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-						id="section-divider"
-					/>
-					<div
-						class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
-					/>
-				{/if}
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	#slider {
-		-webkit-appearance: none;
-		width: 100%;
-		height: 6px;
-		border-radius: 5px;
-		background: #eaecef;
-		outline: none;
-	}
-
-	#slider:active {
-		background-color: black;
-	}
-
-	#slider::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 25px;
-		height: 25px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	#slider::-moz-range-thumb {
-		width: 25px;
-		height: 25px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	input[type='number']::-webkit-inner-spin-button,
-	input[type='number']::-webkit-outer-spin-button {
-		-webkit-appearance: none;
-	}
-
-	input[type='number'] {
-		-moz-appearance: textfield;
-	}
-
-	.full-shadow {
-		box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25);
-	}
-</style>
diff --git a/src/routes/invoice/[id].js b/src/routes/invoice/[id].js
new file mode 100644
index 00000000..37ef098d
--- /dev/null
+++ b/src/routes/invoice/[id].js
@@ -0,0 +1,11 @@
+import { get } from '$lib/utils';
+
+const username = 'bob',
+	network = 'lightning';
+
+export async function GET({ params }) {
+	let { id } = params;
+	let { amount, text } = await get(`/invoice?uuid=${id}`);
+
+	return { body: { amount, text } };
+}
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
new file mode 100644
index 00000000..d1dea907
--- /dev/null
+++ b/src/routes/invoice/[id].svelte
@@ -0,0 +1,322 @@
+<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';
+
+	export let text;
+	export let amount;
+
+	if (!$user && typeof window !== 'undefined') {
+		window.location = '/login';
+	}
+
+	let tipPercent = 0;
+	const setRate = ($invoiceAmountFiat / $invoiceAmount) * 100000000;
+
+	$: tipAmount = customTipAmount
+		? customTipAmount < 0
+			? (customTipAmount = 0)
+			: customTipAmount
+		: ($invoiceAmountFiat / 100) * tipPercent;
+
+	$: tipAmountFormatted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(tipAmount);
+
+	$: tipAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		tipAmount / (setRate / 100000000)
+	);
+
+	$: totalAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		$invoiceAmount + parseFloat(tipAmountSats.replace(/,/g, ''))
+	);
+
+	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($invoiceAmountFiat + tipAmount);
+
+	const invoiceAmountFormatted = new Intl.NumberFormat('en-US', {
+		maximumFractionDigits: 0
+	}).format($invoiceAmount);
+
+	const invoiceAmountFiatFormatted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($invoiceAmountFiat);
+
+	let customTipAmount;
+
+	const tipAmounts = ['None', '10%', '15%', '20%'];
+
+	const handleTipButtonClick = (amount) => {
+		customTipAmount = '';
+		if (amount === 'None') {
+			tipPercent = 0;
+		} else {
+			tipPercent = amount.slice(0, 2);
+		}
+	};
+
+	const handleCustomTipAmount = (e) => {
+		tipPercent = 0;
+		customTipAmount = e.target.value;
+	};
+
+	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',
+				backgroundOptions: {
+					color: 'rgba(0, 0, 0, 0)'
+				},
+				dotsOptions: {
+					type: 'rounded'
+				},
+				imageOptions: {
+					hideBackgroundDots: false
+				}
+			});
+
+			qrCode.append(document.getElementById('qr'));
+		}
+	});
+
+	let showMobileTip = false;
+
+	const handleBackButton = () => {
+		if (showMobileTip) {
+			tipPercent = 0;
+			customInput.value = '';
+			customTipAmount = 0;
+			tipAmount = 0;
+			showMobileTip = false;
+		} else {
+			goto('/receive');
+		}
+	};
+
+	let customInput;
+</script>
+
+{#if $user}
+	<div class:full-shadow={showMobileTip}>
+		<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
+			<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"
+			>
+				{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
+					<!-- tipping section  -->
+					<div
+						class="absolute {showMobileTip
+							? 'bottom-0'
+							: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
+					>
+						<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+
+						<div>
+							<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+								class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+							>
+							<span class="block text-secondary text-sm">{tipPercent}%</span>
+						</div>
+
+						<input
+							id="slider"
+							type="range"
+							min="0"
+							max="100"
+							value={tipPercent}
+							class="px-2"
+							on:input={(e) => {
+								customTipAmount = '';
+								tipPercent = e.target.value;
+							}}
+						/>
+
+						<div>
+							{#each tipAmounts as amount}
+								<button
+									class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
+										amount.slice(0, 2) ||
+									((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+										? '!bg-black text-white'
+										: ''}"
+									on:click={() => handleTipButtonClick(amount)}>{amount}</button
+								>
+							{/each}
+
+							<div class="relative">
+								<span
+									class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+										? 'opacity-50'
+										: 'opacity-100'}">$</span
+								>
+								<input
+									bind:this={customInput}
+									type="number"
+									min="0"
+									on:input={(e) => handleCustomTipAmount(e)}
+									class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+									placeholder="Other"
+								/>
+								<button
+									class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+										? !customTipAmount && !tipAmount
+											? 'opacity-50'
+											: 'opacity-100'
+										: !customTipAmount
+										? 'opacity-50'
+										: 'opacity-100'}"
+									disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+									>Done</button
+								>
+							</div>
+						</div>
+					</div>
+
+					<div
+						class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+						id="section-divider"
+					/>
+
+					<!-- invoice section -->
+					<div class="text-center space-y-5">
+						<button
+							class="block md:hidden bg-black {showMobileTip
+								? 'text-white/50'
+								: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
+							on:click={() => (showMobileTip = true)}
+							disabled={showMobileTip}
+						>
+							<svg
+								width="24"
+								height="24"
+								class="mr-1"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg> Add a tip
+						</button>
+
+						<span class="text-secondary block"
+							>Scan to pay <span class="text-black font-semibold">{$user.username}</span></span
+						>
+
+						<div
+							id="qr"
+							class="border {showMobileTip
+								? 'border-gray-400'
+								: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center"
+						/>
+
+						<div class="px-5 space-y-3">
+							<div class="flex justify-between">
+								<span class="font-semibold text-sm">Invoice</span>
+								<span class="font-semibold text-sm"
+									>{invoiceAmountFiatFormatted}
+									<span class="text-secondary font-normal"
+										>{`(${invoiceAmountFormatted} SATS)`}</span
+									></span
+								>
+							</div>
+
+							<div class="flex justify-between">
+								<span class="font-semibold text-sm">Tip</span>
+								<span class="font-semibold text-sm"
+									>{tipAmountFormatted}
+									<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+								>
+							</div>
+
+							<div class="flex justify-between">
+								<span class="font-bold">Total</span>
+								<span class="font-bold"
+									>{totalAmountFormatted}
+									<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span
+									></span
+								>
+							</div>
+						</div>
+					</div>
+				{:else}
+					<div
+						class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
+					/>
+					<div
+						class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+						id="section-divider"
+					/>
+					<div
+						class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
+					/>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	#slider {
+		-webkit-appearance: none;
+		width: 100%;
+		height: 6px;
+		border-radius: 5px;
+		background: #eaecef;
+		outline: none;
+	}
+
+	#slider:active {
+		background-color: black;
+	}
+
+	#slider::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 25px;
+		height: 25px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+
+	#slider::-moz-range-thumb {
+		width: 25px;
+		height: 25px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+	}
+
+	input[type='number'] {
+		-moz-appearance: textfield;
+	}
+
+	.full-shadow {
+		box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25);
+	}
+</style>
diff --git a/src/routes/invoice/index.js b/src/routes/invoice/index.js
new file mode 100644
index 00000000..26bffd37
--- /dev/null
+++ b/src/routes/invoice/index.js
@@ -0,0 +1,11 @@
+import { post } from '$lib/utils';
+
+let network = 'lightning';
+
+export async function POST({ request }) {
+  let { amount, username } = await request.json();
+	let { text } = await post('/lightning/invoice', );
+	let { uuid: id } = await post('/invoice', { invoice: { text, network }, user: { username } });
+
+	return { body: { id } };
+}
diff --git a/src/routes/receive.svelte b/src/routes/receive.svelte
deleted file mode 100644
index 0329dea4..00000000
--- a/src/routes/receive.svelte
+++ /dev/null
@@ -1,178 +0,0 @@
-<script>
-	// in the future we will want to allow users to set their fiat currency in the settings
-	import { AppHeader, Icon } from '$comp';
-	import { goto } from '$app/navigation';
-	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
-
-	let useFiat = true;
-	let amountFiat = 0;
-	let amountSats = 0;
-	let message = '';
-
-	$: $invoiceAmount = parseInt(amountSats === 0 ? amountFiat / ($rate / 100000000) : amountSats);
-	$: $invoiceAmountFiat = parseInt(
-		amountFiat === 0 ? amountSats * ($rate / 100000000) : amountFiat
-	);
-	$: amountSatsFormatted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		amountSats
-	);
-
-	$: amountFiatConverted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format(amountSats * ($rate / 100000000));
-
-	$: amountSatsConverted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		amountFiat / ($rate / 100000000)
-	);
-
-	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
-
-	const handleInput = (value) => {
-		if (message) {
-			message = '';
-		}
-		if (useFiat) {
-			if (amountFiat === 0 && value !== '.' && value !== '<' && value !== '0') {
-				amountFiat = value;
-			} else if ((amountFiat === 0 || amountFiat === '0') && value === '0') {
-				return;
-			} else if (amountFiat === 0 && value === '.') {
-				amountFiat = '0.';
-			} else if (amountFiat !== 0 && amountFiat.includes('.') && value === '.') {
-				return;
-			} else if (value === '<') {
-				if (amountFiat !== 0) {
-					amountFiat = amountFiat.slice(0, amountFiat.length - 1);
-					if (amountFiat.length === 0) {
-						amountFiat = 0;
-						amountSats = 0;
-					}
-				}
-			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $rate) {
-				message = 'Please enter an amount less than 1 bitcoin.';
-			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
-				return;
-			} else {
-				amountFiat = amountFiat + value;
-			}
-		} else {
-			if (value === '.') {
-				return;
-			} else if (amountSats === 0 && value !== '<' && value !== '0') {
-				amountSats = value;
-			} else if (value === '<') {
-				if (amountSats !== 0) {
-					amountSats = amountSats.slice(0, amountSats.length - 1);
-					if (amountSats.length === 0) {
-						amountSats = 0;
-						amountFiat = 0;
-					}
-				}
-			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
-				message = 'Please enter an amount less than 1 bitcoin.';
-			} else {
-				amountSats = amountSats + value;
-			}
-		}
-	};
-</script>
-
-{#if $user}
-	<AppHeader />
-
-	<div class="flex justify-center items-center mt-20 mb-3 px-3">
-		{#if $rate}
-			<div class="space-y-5">
-				<!-- amounts -->
-				<div class="text-center">
-					<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
-						{useFiat ? `$${amountFiat}` : amountSatsFormatted}<span
-							class="tracking-normal text-base font-normal">{useFiat ? 'USD' : 'SATS'}</span
-						>
-					</div>
-					<span class="text-secondary mr-1"
-						>{useFiat ? `${amountSatsConverted} SATS` : `${amountFiatConverted} USD`}</span
-					>
-					<button
-						on:click={() => {
-							if (useFiat) {
-								amountSats = (amountFiat / ($rate / 100000000)).toFixed(0).toString();
-							} else {
-								amountFiat =
-									(amountSats * ($rate / 100000000)).toFixed(2) > 0.0
-										? (amountSats * ($rate / 100000000)).toFixed(2).toString()
-										: 0;
-							}
-							useFiat = !useFiat;
-						}}><Icon icon="swap" style="inline" /></button
-					>
-				</div>
-
-				<!-- error message -->
-				{#if message}
-					<div
-						class="text-orange-500 text-sm text-center font-bold bg-primary p-2 rounded-xl flex justify-center items-center space-x-1"
-					>
-						<Icon icon="info" style="w-5" />
-						<p>{message}</p>
-					</div>
-				{/if}
-
-				<!-- numpad -->
-				<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
-					{#each numPad as value}
-						{#if value === '<'}
-							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center"
-								on:click={() => handleInput(value)}
-							>
-								<svg
-									class="w-5"
-									width="24"
-									height="24"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M15 19L8 12L15 5"
-										stroke="currentColor"
-										stroke-width="2"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								</svg>
-							</button>
-						{:else}
-							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
-								on:click={() => handleInput(value)}>{value}</button
-							>
-						{/if}
-					{/each}
-				</div>
-
-				<!-- buttons -->
-				<div class="space-y-3 w-full md:w-[300px] mx-auto">
-					<button
-						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
-						0
-							? 'opacity-50'
-							: 'opacity-100'}"
-						on:click={() => goto(`/invoice/${$invoiceAmount}`)}
-						disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
-					>
-					<button
-						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
-						disabled={true}><Icon icon="send" style="mr-2" /> Send Invoice</button
-					>
-				</div>
-			</div>
-		{:else}
-			<div
-				class="w-full md:w-[300px] h-[475px] md:h-[485px] animate-pulse bg-gray-400 rounded-xl"
-			/>
-		{/if}
-	</div>
-{/if}
-- 
cgit v1.2.3


From 7168cd2ea39aaa2158412bb5e966e144e8a22733 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Sat, 30 Jul 2022 11:50:42 -0700
Subject: invoice updates

---
 src/routes/[username]/receive.svelte |   2 +-
 src/routes/invoice/[id].js           |   6 +-
 src/routes/invoice/[id].svelte       | 290 +++++++++++++++++------------------
 src/routes/invoice/index.js          |   4 +-
 4 files changed, 144 insertions(+), 158 deletions(-)

(limited to 'src/routes/invoice')

diff --git a/src/routes/[username]/receive.svelte b/src/routes/[username]/receive.svelte
index 9ebc0401..e0bf7751 100644
--- a/src/routes/[username]/receive.svelte
+++ b/src/routes/[username]/receive.svelte
@@ -82,7 +82,7 @@
 	};
 
 	let submit = async () => {
-    let { id } = await post('/invoice', { amount, username: $page.params.username });
+    let { id } = await post('/invoice', { amount, rate: $rate, username: $page.params.username });
     console.log(id)
 		goto(`/invoice/${id}`);
 	};
diff --git a/src/routes/invoice/[id].js b/src/routes/invoice/[id].js
index 37ef098d..7d18ba86 100644
--- a/src/routes/invoice/[id].js
+++ b/src/routes/invoice/[id].js
@@ -5,7 +5,9 @@ const username = 'bob',
 
 export async function GET({ params }) {
 	let { id } = params;
-	let { amount, text } = await get(`/invoice?uuid=${id}`);
+	let huh = await get(`/invoice?uuid=${id}`);
+  console.log(huh)
+	let { amount, rate, text } = await get(`/invoice?uuid=${id}`);
 
-	return { body: { amount, text } };
+	return { body: { amount, rate, text } };
 }
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index d1dea907..a9f3cefb 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -1,25 +1,25 @@
 <script>
 	import { browser } from '$app/env';
-	import { rate, user, invoiceAmount, invoiceAmountFiat } from '$lib/store';
+	import { user } from '$lib/store';
 	import { Icon } from '$comp';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 
-	export let text;
-	export let amount;
+	export let amount, rate, text;
 
 	if (!$user && typeof window !== 'undefined') {
 		window.location = '/login';
 	}
 
+	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
+
 	let tipPercent = 0;
-	const setRate = ($invoiceAmountFiat / $invoiceAmount) * 100000000;
 
 	$: tipAmount = customTipAmount
 		? customTipAmount < 0
 			? (customTipAmount = 0)
 			: customTipAmount
-		: ($invoiceAmountFiat / 100) * tipPercent;
+		: (amountFiat / 100) * tipPercent;
 
 	$: tipAmountFormatted = new Intl.NumberFormat('en-US', {
 		style: 'currency',
@@ -27,26 +27,26 @@
 	}).format(tipAmount);
 
 	$: tipAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		tipAmount / (setRate / 100000000)
+		tipAmount / (rate / 100000000)
 	);
 
 	$: totalAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		$invoiceAmount + parseFloat(tipAmountSats.replace(/,/g, ''))
+		amount + parseFloat(tipAmountSats.replace(/,/g, ''))
 	);
 
 	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
 		style: 'currency',
 		currency: 'USD'
-	}).format($invoiceAmountFiat + tipAmount);
+	}).format(amountFiat + tipAmount);
 
-	const invoiceAmountFormatted = new Intl.NumberFormat('en-US', {
+	const amountFormatted = new Intl.NumberFormat('en-US', {
 		maximumFractionDigits: 0
-	}).format($invoiceAmount);
+	}).format(amount);
 
-	const invoiceAmountFiatFormatted = new Intl.NumberFormat('en-US', {
+	$: invoiceAmountFiatFormatted = new Intl.NumberFormat('en-US', {
 		style: 'currency',
 		currency: 'USD'
-	}).format($invoiceAmountFiat);
+	}).format(amountFiat);
 
 	let customTipAmount;
 
@@ -99,7 +99,7 @@
 			tipAmount = 0;
 			showMobileTip = false;
 		} else {
-			goto('/receive');
+			goto(`/${$user.username}/receive`);
 		}
 	};
 
@@ -116,160 +116,144 @@
 			<div
 				class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
 			>
-				{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
-					<!-- tipping section  -->
-					<div
-						class="absolute {showMobileTip
-							? 'bottom-0'
-							: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
-					>
-						<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+				<!-- tipping section  -->
+				<div
+					class="absolute {showMobileTip
+						? 'bottom-0'
+						: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
+				>
+					<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+
+					<div>
+						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+							class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+						>
+						<span class="block text-secondary text-sm">{tipPercent}%</span>
+					</div>
+
+					<input
+						id="slider"
+						type="range"
+						min="0"
+						max="100"
+						value={tipPercent}
+						class="px-2"
+						on:input={(e) => {
+							customTipAmount = '';
+							tipPercent = e.target.value;
+						}}
+					/>
 
-						<div>
-							<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-								class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+					<div>
+						{#each tipAmounts as amount}
+							<button
+								class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
+									amount.slice(0, 2) ||
+								((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+									? '!bg-black text-white'
+									: ''}"
+								on:click={() => handleTipButtonClick(amount)}>{amount}</button
 							>
-							<span class="block text-secondary text-sm">{tipPercent}%</span>
-						</div>
+						{/each}
 
-						<input
-							id="slider"
-							type="range"
-							min="0"
-							max="100"
-							value={tipPercent}
-							class="px-2"
-							on:input={(e) => {
-								customTipAmount = '';
-								tipPercent = e.target.value;
-							}}
-						/>
-
-						<div>
-							{#each tipAmounts as amount}
-								<button
-									class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
-										amount.slice(0, 2) ||
-									((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-										? '!bg-black text-white'
-										: ''}"
-									on:click={() => handleTipButtonClick(amount)}>{amount}</button
-								>
-							{/each}
-
-							<div class="relative">
-								<span
-									class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-										? 'opacity-50'
-										: 'opacity-100'}">$</span
-								>
-								<input
-									bind:this={customInput}
-									type="number"
-									min="0"
-									on:input={(e) => handleCustomTipAmount(e)}
-									class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-									placeholder="Other"
-								/>
-								<button
-									class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
-										? !customTipAmount && !tipAmount
-											? 'opacity-50'
-											: 'opacity-100'
-										: !customTipAmount
+						<div class="relative">
+							<span
+								class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+									? 'opacity-50'
+									: 'opacity-100'}">$</span
+							>
+							<input
+								bind:this={customInput}
+								type="number"
+								min="0"
+								on:input={(e) => handleCustomTipAmount(e)}
+								class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+								placeholder="Other"
+							/>
+							<button
+								class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+									? !customTipAmount && !tipAmount
 										? 'opacity-50'
-										: 'opacity-100'}"
-									disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
-									>Done</button
-								>
-							</div>
+										: 'opacity-100'
+									: !customTipAmount
+									? 'opacity-50'
+									: 'opacity-100'}"
+								disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+								>Done</button
+							>
 						</div>
 					</div>
+				</div>
+
+				<div
+					class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+					id="section-divider"
+				/>
+
+				<!-- invoice section -->
+				<div class="text-center space-y-5">
+					<button
+						class="block md:hidden bg-black {showMobileTip
+							? 'text-white/50'
+							: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
+						on:click={() => (showMobileTip = true)}
+						disabled={showMobileTip}
+					>
+						<svg
+							width="24"
+							height="24"
+							class="mr-1"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg> Add a tip
+					</button>
+
+					<span class="text-secondary block"
+						>Scan to pay <span class="text-black font-semibold">{$user.username}</span></span
+					>
 
 					<div
-						class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-						id="section-divider"
+						id="qr"
+						class="border {showMobileTip
+							? 'border-gray-400'
+							: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center"
 					/>
 
-					<!-- invoice section -->
-					<div class="text-center space-y-5">
-						<button
-							class="block md:hidden bg-black {showMobileTip
-								? 'text-white/50'
-								: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
-							on:click={() => (showMobileTip = true)}
-							disabled={showMobileTip}
-						>
-							<svg
-								width="24"
-								height="24"
-								class="mr-1"
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
+					<div class="px-5 space-y-3">
+						<div class="flex justify-between">
+							<span class="font-semibold text-sm">Invoice</span>
+							<span class="font-semibold text-sm"
+								>{invoiceAmountFiatFormatted}
+								<span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
 							>
-								<path
-									d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-							</svg> Add a tip
-						</button>
-
-						<span class="text-secondary block"
-							>Scan to pay <span class="text-black font-semibold">{$user.username}</span></span
-						>
+						</div>
 
-						<div
-							id="qr"
-							class="border {showMobileTip
-								? 'border-gray-400'
-								: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center"
-						/>
-
-						<div class="px-5 space-y-3">
-							<div class="flex justify-between">
-								<span class="font-semibold text-sm">Invoice</span>
-								<span class="font-semibold text-sm"
-									>{invoiceAmountFiatFormatted}
-									<span class="text-secondary font-normal"
-										>{`(${invoiceAmountFormatted} SATS)`}</span
-									></span
-								>
-							</div>
-
-							<div class="flex justify-between">
-								<span class="font-semibold text-sm">Tip</span>
-								<span class="font-semibold text-sm"
-									>{tipAmountFormatted}
-									<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
-								>
-							</div>
-
-							<div class="flex justify-between">
-								<span class="font-bold">Total</span>
-								<span class="font-bold"
-									>{totalAmountFormatted}
-									<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span
-									></span
-								>
-							</div>
+						<div class="flex justify-between">
+							<span class="font-semibold text-sm">Tip</span>
+							<span class="font-semibold text-sm"
+								>{tipAmountFormatted}
+								<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+							>
+						</div>
+
+						<div class="flex justify-between">
+							<span class="font-bold">Total</span>
+							<span class="font-bold"
+								>{totalAmountFormatted}
+								<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
+							>
 						</div>
 					</div>
-				{:else}
-					<div
-						class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
-					/>
-					<div
-						class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-						id="section-divider"
-					/>
-					<div
-						class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
-					/>
-				{/if}
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/invoice/index.js b/src/routes/invoice/index.js
index 26bffd37..d89f7130 100644
--- a/src/routes/invoice/index.js
+++ b/src/routes/invoice/index.js
@@ -3,9 +3,9 @@ import { post } from '$lib/utils';
 let network = 'lightning';
 
 export async function POST({ request }) {
-  let { amount, username } = await request.json();
+  let { amount, rate, username } = await request.json();
 	let { text } = await post('/lightning/invoice', );
-	let { uuid: id } = await post('/invoice', { invoice: { text, network }, user: { username } });
+	let { uuid: id } = await post('/invoice', { invoice: { amount, currency: 'USD', network, rate, text }, user: { username } });
 
 	return { body: { id } };
 }
-- 
cgit v1.2.3


From 926b1cd61d5bca6e6e9fd3420681d0829341a1e0 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 12:59:47 -0600
Subject: add loading splash, start adding toast messages, qr code skeleton

---
 package.json                        |  1 +
 pnpm-lock.yaml                      |  6 ++++++
 src/components/LoadingSplash.svelte |  7 +++++++
 src/components/index.js             |  1 +
 src/routes/__layout.svelte          |  2 ++
 src/routes/invoice/[amount].svelte  | 28 +++++++++++++++++++++-------
 src/routes/receive.svelte           | 18 ++++++++++++++----
 7 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 src/components/LoadingSplash.svelte

(limited to 'src/routes/invoice')

diff --git a/package.json b/package.json
index d4312d1c..25369d0c 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
+		"@zerodevx/svelte-toast": "^0.7.2",
 		"autoprefixer": "^10.4.7",
 		"cookie": "^0.5.0",
 		"postcss": "^8.4.14",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 69b6d84e..e57ddd3e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@sveltejs/adapter-auto': next
   '@sveltejs/kit': next
+  '@zerodevx/svelte-toast': ^0.7.2
   autoprefixer: ^10.4.7
   cookie: ^0.5.0
   postcss: ^8.4.14
@@ -17,6 +18,7 @@ specifiers:
 devDependencies:
   '@sveltejs/adapter-auto': 1.0.0-next.64
   '@sveltejs/kit': 1.0.0-next.398_svelte@3.49.0+vite@3.0.3
+  '@zerodevx/svelte-toast': 0.7.2
   autoprefixer: 10.4.7_postcss@8.4.14
   cookie: 0.5.0
   postcss: 8.4.14
@@ -198,6 +200,10 @@ packages:
       - supports-color
     dev: true
 
+  /@zerodevx/svelte-toast/0.7.2:
+    resolution: {integrity: sha512-vWiY6IqsstcOoQ8PFBuFuxgPkj1JFAGhUF9gC7wLx7c5A9SSfdtxWs/39ekGSIeyJK0yqWhTcmzGrCEWSELzDw==}
+    dev: true
+
   /abbrev/1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     dev: true
diff --git a/src/components/LoadingSplash.svelte b/src/components/LoadingSplash.svelte
new file mode 100644
index 00000000..2ab4c739
--- /dev/null
+++ b/src/components/LoadingSplash.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { Icon } from '$comp';
+</script>
+
+<div class="flex justify-center items-center">
+	<Icon icon="logo" style="mt-[calc(50vh-72px)]" />
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index febf8dac..e41c3d4c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -7,3 +7,4 @@ export { default as Icon } from './Icon.svelte';
 export { default as Image } from './Image.svelte';
 export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
 export { default as AppHeader } from './AppHeader.svelte';
+export { default as LoadingSplash } from './LoadingSplash.svelte';
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 6562db18..f91772e8 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import '../app.css';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
@@ -10,4 +11,5 @@
 	onMount(connect);
 </script>
 
+<SvelteToast />
 <slot />
diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte
index d1dea907..27140519 100644
--- a/src/routes/invoice/[amount].svelte
+++ b/src/routes/invoice/[amount].svelte
@@ -1,17 +1,13 @@
 <script>
 	import { browser } from '$app/env';
 	import { rate, user, invoiceAmount, invoiceAmountFiat } from '$lib/store';
-	import { Icon } from '$comp';
+	import { Icon, LoadingSplash } from '$comp';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 
 	export let text;
 	export let amount;
 
-	if (!$user && typeof window !== 'undefined') {
-		window.location = '/login';
-	}
-
 	let tipPercent = 0;
 	const setRate = ($invoiceAmountFiat / $invoiceAmount) * 100000000;
 
@@ -69,6 +65,13 @@
 	onMount(async () => {
 		if (browser) {
 			let { default: QRCodeStyling } = await import('qr-code-styling');
+			let { default: toast } = await import('@zerodevx/svelte-toast');
+
+			if (!$user && typeof window !== 'undefined') {
+				toast.push('Please login to continue.');
+				window.location = '/login';
+			}
+
 			const qrCode = new QRCodeStyling({
 				width: window.screen.width < 640 ? 250 : 300,
 				type: 'svg',
@@ -104,6 +107,9 @@
 	};
 
 	let customInput;
+
+	let qrSkeleton = true;
+	setTimeout(() => (qrSkeleton = false), 1000);
 </script>
 
 {#if $user}
@@ -226,8 +232,14 @@
 							id="qr"
 							class="border {showMobileTip
 								? 'border-gray-400'
-								: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center"
-						/>
+								: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center h-[300px] w-[250px] md:w-[300px] relative"
+						>
+							<div
+								class="z-100 h-[300px] w-[250px] md:w-[300px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
+									? 'block'
+									: 'hidden'}"
+							/>
+						</div>
 
 						<div class="px-5 space-y-3">
 							<div class="flex justify-between">
@@ -273,6 +285,8 @@
 			</div>
 		</div>
 	</div>
+{:else}
+	<LoadingSplash />
 {/if}
 
 <style>
diff --git a/src/routes/receive.svelte b/src/routes/receive.svelte
index 760733a3..3ccd45e8 100644
--- a/src/routes/receive.svelte
+++ b/src/routes/receive.svelte
@@ -1,12 +1,20 @@
 <script>
 	// in the future we will want to allow users to set their fiat currency in the settings
-	import { AppHeader, Icon } from '$comp';
+	import { onMount } from 'svelte';
+	import { AppHeader, Icon, LoadingSplash } from '$comp';
 	import { goto } from '$app/navigation';
 	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
 
-	if (!$user && typeof window !== 'undefined') {
-		window.location = '/login';
-	}
+	onMount(async () => {
+		if (browser) {
+			let { default: toast } = await import('@zerodevx/svelte-toast');
+
+			if (!$user && typeof window !== 'undefined') {
+				window.location = '/login';
+				toast.push('Please login to continue.');
+			}
+		}
+	});
 
 	let useFiat = true;
 	let amountFiat = 0;
@@ -179,4 +187,6 @@
 			/>
 		{/if}
 	</div>
+{:else}
+	<LoadingSplash />
 {/if}
-- 
cgit v1.2.3


From 19ae0d9eb2f1a1c08b04f5c56e8ebd266ef32da8 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 13:02:42 -0600
Subject: format and remove console logs

---
 src/components/AppHeader.svelte       | 20 +++++++++---------
 src/components/RegisterOrLogin.svelte |  2 +-
 src/lib/socket.js                     |  4 ++--
 src/lib/utils.js                      |  2 +-
 src/routes/[username]/index.js        |  2 +-
 src/routes/[username]/index.svelte    |  2 --
 src/routes/[username]/receive.svelte  |  3 +--
 src/routes/__layout.svelte            |  2 +-
 src/routes/invoice/[id].js            |  1 -
 src/routes/invoice/index.js           |  9 +++++---
 src/routes/logout/done.svelte         | 20 +++++++++---------
 src/routes/logout/index.js            | 40 +++++++++++++++++------------------
 12 files changed, 53 insertions(+), 54 deletions(-)

(limited to 'src/routes/invoice')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 99eea6d5..1c6f639c 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -8,19 +8,19 @@
 
 <header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative">
 	<nav class="flex justify-end items-center space-x-4 p-5">
-    <a href={`/${$user.username}/receive`}>
-		<button class="bg-white p-2 rounded-full w-12 h-12"
-			><Icon icon="numpad" style="mx-auto" /></button
-		>
-    </a>
+		<a href={`/${$user.username}/receive`}>
+			<button class="bg-white p-2 rounded-full w-12 h-12"
+				><Icon icon="numpad" style="mx-auto" /></button
+			>
+		</a>
 		<button class="bg-white p-2 rounded-full  w-12 h-12"
 			><Icon icon="clock" style="mx-auto" /></button
 		>
-    <a href={`/${$user.username}`}>
-    <button class="bg-white p-2 rounded-full  w-12 h-12"
-			><Icon icon="profile" style="mx-auto" /></button
-		>
-    </a>
+		<a href={`/${$user.username}`}>
+			<button class="bg-white p-2 rounded-full  w-12 h-12"
+				><Icon icon="profile" style="mx-auto" /></button
+			>
+		</a>
 		<button class="bg-white p-2 rounded-full  w-12 h-12"
 			><Icon icon="menu" style="mx-auto" /></button
 		>
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 56b96499..3b51346b 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -22,7 +22,7 @@
 		if (!r.token) r = await post('/login', { username, password });
 		$token = r.token;
 		auth();
-    user.subscribe(({ username }) => goto(`/${username}/receive`));
+		user.subscribe(({ username }) => goto(`/${username}/receive`));
 	};
 </script>
 
diff --git a/src/lib/socket.js b/src/lib/socket.js
index 14555bd3..36d41ea8 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -47,8 +47,8 @@ export function connect() {
 }
 
 export function close() {
-  if (socket) socket.close();
-} 
+	if (socket) socket.close();
+}
 
 function onWebsocketMessage(msg) {
 	let { type, data } = JSON.parse(msg.data);
diff --git a/src/lib/utils.js b/src/lib/utils.js
index e9d1b73e..22c88522 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -8,7 +8,7 @@ const base = browser ? '' : import.meta.env.VITE_COINOS_URL;
 
 export const get = (url) =>
 	fetch(base + url, {
-		headers: { accept: 'application/json'}
+		headers: { accept: 'application/json' }
 	}).then((r) => r.json());
 
 export const post = (url, body) =>
diff --git a/src/routes/[username]/index.js b/src/routes/[username]/index.js
index 39a216c2..01613574 100644
--- a/src/routes/[username]/index.js
+++ b/src/routes/[username]/index.js
@@ -1,3 +1,3 @@
 export async function GET({ params }) {
-  return { body: params }
+	return { body: params };
 }
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
index fe1f7754..91744aa3 100644
--- a/src/routes/[username]/index.svelte
+++ b/src/routes/[username]/index.svelte
@@ -2,8 +2,6 @@
 	import { AppHeader, Icon } from '$comp';
 	import { user } from '$lib/store';
 	export let username;
-
-	console.log($user, username);
 </script>
 
 {#if $user?.username === username}
diff --git a/src/routes/[username]/receive.svelte b/src/routes/[username]/receive.svelte
index d588eaed..5865d5e5 100644
--- a/src/routes/[username]/receive.svelte
+++ b/src/routes/[username]/receive.svelte
@@ -94,8 +94,7 @@
 	};
 
 	let submit = async () => {
-    let { id } = await post('/invoice', { amount, rate: $rate, username: $page.params.username });
-    console.log(id)
+		let { id } = await post('/invoice', { amount, rate: $rate, username: $page.params.username });
 		goto(`/invoice/${id}`);
 	};
 </script>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 1e4e2560..85f5a817 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -25,6 +25,6 @@
 </script>
 
 {#if ready}
-<SvelteToast />
+	<SvelteToast />
 	<slot />
 {/if}
diff --git a/src/routes/invoice/[id].js b/src/routes/invoice/[id].js
index 7d18ba86..9a38604f 100644
--- a/src/routes/invoice/[id].js
+++ b/src/routes/invoice/[id].js
@@ -6,7 +6,6 @@ const username = 'bob',
 export async function GET({ params }) {
 	let { id } = params;
 	let huh = await get(`/invoice?uuid=${id}`);
-  console.log(huh)
 	let { amount, rate, text } = await get(`/invoice?uuid=${id}`);
 
 	return { body: { amount, rate, text } };
diff --git a/src/routes/invoice/index.js b/src/routes/invoice/index.js
index d89f7130..f6b1f2cf 100644
--- a/src/routes/invoice/index.js
+++ b/src/routes/invoice/index.js
@@ -3,9 +3,12 @@ import { post } from '$lib/utils';
 let network = 'lightning';
 
 export async function POST({ request }) {
-  let { amount, rate, username } = await request.json();
-	let { text } = await post('/lightning/invoice', );
-	let { uuid: id } = await post('/invoice', { invoice: { amount, currency: 'USD', network, rate, text }, user: { username } });
+	let { amount, rate, username } = await request.json();
+	let { text } = await post('/lightning/invoice');
+	let { uuid: id } = await post('/invoice', {
+		invoice: { amount, currency: 'USD', network, rate, text },
+		user: { username }
+	});
 
 	return { body: { id } };
 }
diff --git a/src/routes/logout/done.svelte b/src/routes/logout/done.svelte
index 894c7b99..50fb766e 100644
--- a/src/routes/logout/done.svelte
+++ b/src/routes/logout/done.svelte
@@ -1,13 +1,13 @@
 <script>
-  import { onMount } from "svelte";
-  import { user, token } from "$lib/store";
-  import { goto } from "$app/navigation";
-  import { close } from "$lib/socket";
+	import { onMount } from 'svelte';
+	import { user, token } from '$lib/store';
+	import { goto } from '$app/navigation';
+	import { close } from '$lib/socket';
 
-  onMount(() => {
-    $token = null;
-    $user = null;
-    close();
-    goto('/');
-  });
+	onMount(() => {
+		$token = null;
+		$user = null;
+		close();
+		goto('/');
+	});
 </script>
diff --git a/src/routes/logout/index.js b/src/routes/logout/index.js
index 80e65f8b..6cbae8f2 100644
--- a/src/routes/logout/index.js
+++ b/src/routes/logout/index.js
@@ -1,26 +1,26 @@
-import cookie from "cookie";
+import cookie from 'cookie';
 
 const opts = {
-  httpOnly: true,
-  sameSite: "lax",
-  path: "/",
+	httpOnly: true,
+	sameSite: 'lax',
+	path: '/'
 };
 
 export async function GET({ request: { headers } }) {
-  return {
-    status: 302,
-    headers: {
-      location: "/logout/done",
-      "set-cookie": [
-        cookie.serialize("token", "", {
-          ...opts,
-          expires: new Date(0),
-        }),
-        cookie.serialize("refresh_token", "", {
-          ...opts,
-          expires: new Date(0),
-        }),
-      ],
-    },
-  };
+	return {
+		status: 302,
+		headers: {
+			location: '/logout/done',
+			'set-cookie': [
+				cookie.serialize('token', '', {
+					...opts,
+					expires: new Date(0)
+				}),
+				cookie.serialize('refresh_token', '', {
+					...opts,
+					expires: new Date(0)
+				})
+			]
+		}
+	};
 }
-- 
cgit v1.2.3


From dd4f645ba8839de54418b59f36119254338a447c Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 14:00:08 -0600
Subject: add 404 component, remove duplicate redirects, loading splash, fix
 lgout

---
 src/components/404.svelte            |  16 ++
 src/components/index.js              |   1 +
 src/routes/[username]/index.svelte   |   4 +-
 src/routes/[username]/receive.svelte |  16 +-
 src/routes/__layout.svelte           |   3 +
 src/routes/invoice/[amount].svelte   | 336 -----------------------------------
 src/routes/invoice/[id].svelte       |  17 +-
 src/routes/logout/done.svelte        |   2 +-
 8 files changed, 36 insertions(+), 359 deletions(-)
 create mode 100644 src/components/404.svelte
 delete mode 100644 src/routes/invoice/[amount].svelte

(limited to 'src/routes/invoice')

diff --git a/src/components/404.svelte b/src/components/404.svelte
new file mode 100644
index 00000000..503316bb
--- /dev/null
+++ b/src/components/404.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { Icon } from '$comp';
+</script>
+
+<div class="flex justify-center items-center mt-20">
+	<div class="space-y-5 text-center">
+		<a href="/">
+			<Icon icon="logo" />
+		</a>
+
+		<Icon icon="question" style="mx-auto w-full" />
+
+		<h1 class="font-bold text-5xl">404</h1>
+		<p>Page not found.</p>
+	</div>
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index e41c3d4c..53f0fe99 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -8,3 +8,4 @@ export { default as Image } from './Image.svelte';
 export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
 export { default as AppHeader } from './AppHeader.svelte';
 export { default as LoadingSplash } from './LoadingSplash.svelte';
+export { default as PageNotFound } from './404.svelte';
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
index 91744aa3..90d0c04a 100644
--- a/src/routes/[username]/index.svelte
+++ b/src/routes/[username]/index.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { AppHeader, Icon } from '$comp';
+	import { AppHeader, Icon, PageNotFound } from '$comp';
 	import { user } from '$lib/store';
 	export let username;
 </script>
@@ -22,4 +22,6 @@
 			</div>
 		</div>
 	</div>
+{:else}
+	<PageNotFound />
 {/if}
diff --git a/src/routes/[username]/receive.svelte b/src/routes/[username]/receive.svelte
index 5865d5e5..50fddbed 100644
--- a/src/routes/[username]/receive.svelte
+++ b/src/routes/[username]/receive.svelte
@@ -1,23 +1,11 @@
 <script>
 	// in the future we will want to allow users to set their fiat currency in the settings
-	import { onMount } from 'svelte';
-	import { AppHeader, Icon, LoadingSplash } from '$comp';
+	import { AppHeader, Icon } from '$comp';
 	import { goto } from '$app/navigation';
 	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
 	import { post } from '$lib/utils';
 	import { page } from '$app/stores';
 
-	onMount(async () => {
-		if (browser) {
-			let { default: toast } = await import('@zerodevx/svelte-toast');
-
-			if (!$user && typeof window !== 'undefined') {
-				window.location = '/login';
-				toast.push('Please login to continue.');
-			}
-		}
-	});
-
 	let useFiat = true;
 	let amountFiat = 0;
 	let amountSats = 0;
@@ -196,6 +184,4 @@
 			/>
 		{/if}
 	</div>
-{:else}
-	<LoadingSplash />
 {/if}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 85f5a817..0b9a9a64 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -7,6 +7,7 @@
 	import { page, session } from '$app/stores';
 	import { browser } from '$app/env';
 	import { goto } from '$app/navigation';
+	import { LoadingSplash } from '$comp';
 
 	browser && ($token ||= $session.token);
 	let protectedRoutes = [/receive/];
@@ -27,4 +28,6 @@
 {#if ready}
 	<SvelteToast />
 	<slot />
+{:else}
+	<LoadingSplash />
 {/if}
diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte
deleted file mode 100644
index 27140519..00000000
--- a/src/routes/invoice/[amount].svelte
+++ /dev/null
@@ -1,336 +0,0 @@
-<script>
-	import { browser } from '$app/env';
-	import { rate, user, invoiceAmount, invoiceAmountFiat } from '$lib/store';
-	import { Icon, LoadingSplash } from '$comp';
-	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
-
-	export let text;
-	export let amount;
-
-	let tipPercent = 0;
-	const setRate = ($invoiceAmountFiat / $invoiceAmount) * 100000000;
-
-	$: tipAmount = customTipAmount
-		? customTipAmount < 0
-			? (customTipAmount = 0)
-			: customTipAmount
-		: ($invoiceAmountFiat / 100) * tipPercent;
-
-	$: tipAmountFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format(tipAmount);
-
-	$: tipAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		tipAmount / (setRate / 100000000)
-	);
-
-	$: totalAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		$invoiceAmount + parseFloat(tipAmountSats.replace(/,/g, ''))
-	);
-
-	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format($invoiceAmountFiat + tipAmount);
-
-	const invoiceAmountFormatted = new Intl.NumberFormat('en-US', {
-		maximumFractionDigits: 0
-	}).format($invoiceAmount);
-
-	const invoiceAmountFiatFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format($invoiceAmountFiat);
-
-	let customTipAmount;
-
-	const tipAmounts = ['None', '10%', '15%', '20%'];
-
-	const handleTipButtonClick = (amount) => {
-		customTipAmount = '';
-		if (amount === 'None') {
-			tipPercent = 0;
-		} else {
-			tipPercent = amount.slice(0, 2);
-		}
-	};
-
-	const handleCustomTipAmount = (e) => {
-		tipPercent = 0;
-		customTipAmount = e.target.value;
-	};
-
-	onMount(async () => {
-		if (browser) {
-			let { default: QRCodeStyling } = await import('qr-code-styling');
-			let { default: toast } = await import('@zerodevx/svelte-toast');
-
-			if (!$user && typeof window !== 'undefined') {
-				toast.push('Please login to continue.');
-				window.location = '/login';
-			}
-
-			const qrCode = new QRCodeStyling({
-				width: window.screen.width < 640 ? 250 : 300,
-				type: 'svg',
-				data: text,
-				image: '/images/invoice.svg',
-				backgroundOptions: {
-					color: 'rgba(0, 0, 0, 0)'
-				},
-				dotsOptions: {
-					type: 'rounded'
-				},
-				imageOptions: {
-					hideBackgroundDots: false
-				}
-			});
-
-			qrCode.append(document.getElementById('qr'));
-		}
-	});
-
-	let showMobileTip = false;
-
-	const handleBackButton = () => {
-		if (showMobileTip) {
-			tipPercent = 0;
-			customInput.value = '';
-			customTipAmount = 0;
-			tipAmount = 0;
-			showMobileTip = false;
-		} else {
-			goto('/receive');
-		}
-	};
-
-	let customInput;
-
-	let qrSkeleton = true;
-	setTimeout(() => (qrSkeleton = false), 1000);
-</script>
-
-{#if $user}
-	<div class:full-shadow={showMobileTip}>
-		<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
-			<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"
-			>
-				{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
-					<!-- tipping section  -->
-					<div
-						class="absolute {showMobileTip
-							? 'bottom-0'
-							: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
-					>
-						<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
-
-						<div>
-							<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-								class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
-							>
-							<span class="block text-secondary text-sm">{tipPercent}%</span>
-						</div>
-
-						<input
-							id="slider"
-							type="range"
-							min="0"
-							max="100"
-							value={tipPercent}
-							class="px-2"
-							on:input={(e) => {
-								customTipAmount = '';
-								tipPercent = e.target.value;
-							}}
-						/>
-
-						<div>
-							{#each tipAmounts as amount}
-								<button
-									class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
-										amount.slice(0, 2) ||
-									((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-										? '!bg-black text-white'
-										: ''}"
-									on:click={() => handleTipButtonClick(amount)}>{amount}</button
-								>
-							{/each}
-
-							<div class="relative">
-								<span
-									class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-										? 'opacity-50'
-										: 'opacity-100'}">$</span
-								>
-								<input
-									bind:this={customInput}
-									type="number"
-									min="0"
-									on:input={(e) => handleCustomTipAmount(e)}
-									class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-									placeholder="Other"
-								/>
-								<button
-									class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
-										? !customTipAmount && !tipAmount
-											? 'opacity-50'
-											: 'opacity-100'
-										: !customTipAmount
-										? 'opacity-50'
-										: 'opacity-100'}"
-									disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
-									>Done</button
-								>
-							</div>
-						</div>
-					</div>
-
-					<div
-						class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-						id="section-divider"
-					/>
-
-					<!-- invoice section -->
-					<div class="text-center space-y-5">
-						<button
-							class="block md:hidden bg-black {showMobileTip
-								? 'text-white/50'
-								: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
-							on:click={() => (showMobileTip = true)}
-							disabled={showMobileTip}
-						>
-							<svg
-								width="24"
-								height="24"
-								class="mr-1"
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								<path
-									d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-							</svg> Add a tip
-						</button>
-
-						<span class="text-secondary block"
-							>Scan to pay <span class="text-black font-semibold">{$user.username}</span></span
-						>
-
-						<div
-							id="qr"
-							class="border {showMobileTip
-								? 'border-gray-400'
-								: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center h-[300px] w-[250px] md:w-[300px] relative"
-						>
-							<div
-								class="z-100 h-[300px] w-[250px] md:w-[300px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
-									? 'block'
-									: 'hidden'}"
-							/>
-						</div>
-
-						<div class="px-5 space-y-3">
-							<div class="flex justify-between">
-								<span class="font-semibold text-sm">Invoice</span>
-								<span class="font-semibold text-sm"
-									>{invoiceAmountFiatFormatted}
-									<span class="text-secondary font-normal"
-										>{`(${invoiceAmountFormatted} SATS)`}</span
-									></span
-								>
-							</div>
-
-							<div class="flex justify-between">
-								<span class="font-semibold text-sm">Tip</span>
-								<span class="font-semibold text-sm"
-									>{tipAmountFormatted}
-									<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
-								>
-							</div>
-
-							<div class="flex justify-between">
-								<span class="font-bold">Total</span>
-								<span class="font-bold"
-									>{totalAmountFormatted}
-									<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span
-									></span
-								>
-							</div>
-						</div>
-					</div>
-				{:else}
-					<div
-						class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
-					/>
-					<div
-						class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-						id="section-divider"
-					/>
-					<div
-						class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
-					/>
-				{/if}
-			</div>
-		</div>
-	</div>
-{:else}
-	<LoadingSplash />
-{/if}
-
-<style>
-	#slider {
-		-webkit-appearance: none;
-		width: 100%;
-		height: 6px;
-		border-radius: 5px;
-		background: #eaecef;
-		outline: none;
-	}
-
-	#slider:active {
-		background-color: black;
-	}
-
-	#slider::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 25px;
-		height: 25px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	#slider::-moz-range-thumb {
-		width: 25px;
-		height: 25px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	input[type='number']::-webkit-inner-spin-button,
-	input[type='number']::-webkit-outer-spin-button {
-		-webkit-appearance: none;
-	}
-
-	input[type='number'] {
-		-moz-appearance: textfield;
-	}
-
-	.full-shadow {
-		box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25);
-	}
-</style>
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index a9f3cefb..2ed1ba67 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -7,10 +7,6 @@
 
 	export let amount, rate, text;
 
-	if (!$user && typeof window !== 'undefined') {
-		window.location = '/login';
-	}
-
 	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
 
 	let tipPercent = 0;
@@ -104,6 +100,9 @@
 	};
 
 	let customInput;
+
+	let qrSkeleton = true;
+	setTimeout(() => (qrSkeleton = false), 1000);
 </script>
 
 {#if $user}
@@ -225,8 +224,14 @@
 						id="qr"
 						class="border {showMobileTip
 							? 'border-gray-400'
-							: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center"
-					/>
+							: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center h-[300px] w-[250px] md:w-[300px] relative"
+					>
+						<div
+							class="z-100 h-[300px] w-[250px] md:w-[300px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
+								? 'block'
+								: 'hidden'}"
+						/>
+					</div>
 
 					<div class="px-5 space-y-3">
 						<div class="flex justify-between">
diff --git a/src/routes/logout/done.svelte b/src/routes/logout/done.svelte
index 50fb766e..fe526357 100644
--- a/src/routes/logout/done.svelte
+++ b/src/routes/logout/done.svelte
@@ -8,6 +8,6 @@
 		$token = null;
 		$user = null;
 		close();
-		goto('/');
 	});
+	goto('/');
 </script>
-- 
cgit v1.2.3


From 6ea99d042f50d2257a8d6abfd763ff4a328e3d38 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 14:33:36 -0600
Subject: fix qr styling

---
 src/routes/invoice/[id].svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/routes/invoice')

diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 2ed1ba67..05d4b9ee 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -224,10 +224,10 @@
 						id="qr"
 						class="border {showMobileTip
 							? 'border-gray-400'
-							: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center h-[300px] w-[250px] md:w-[300px] relative"
+							: 'border-lightgrey'} rounded-3xl block md:flex md:p-5 justify-center items-center h-[300px] md:h-[342px] w-[250px] md:w-[342px] relative"
 					>
 						<div
-							class="z-100 h-[300px] w-[250px] md:w-[300px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
+							class="z-100 h-[300px] md:h-[342px] w-[250px] md:w-[342px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
 								? 'block'
 								: 'hidden'}"
 						/>
-- 
cgit v1.2.3


From 2b232a584144a92188b1ef337e90c7848b007dbe Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 1 Aug 2022 11:32:46 -0700
Subject: pass amount to lightning invoice endpoint

---
 src/routes/invoice/[id].svelte | 1 +
 src/routes/invoice/index.js    | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/routes/invoice')

diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 05d4b9ee..d9b1540e 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -65,6 +65,7 @@
 	onMount(async () => {
 		if (browser) {
 			let { default: QRCodeStyling } = await import('qr-code-styling');
+      console.log("text", text)
 			const qrCode = new QRCodeStyling({
 				width: window.screen.width < 640 ? 250 : 300,
 				type: 'svg',
diff --git a/src/routes/invoice/index.js b/src/routes/invoice/index.js
index f6b1f2cf..2bd95538 100644
--- a/src/routes/invoice/index.js
+++ b/src/routes/invoice/index.js
@@ -4,7 +4,7 @@ let network = 'lightning';
 
 export async function POST({ request }) {
 	let { amount, rate, username } = await request.json();
-	let { text } = await post('/lightning/invoice');
+	let { text } = await post('/lightning/invoice', { amount });
 	let { uuid: id } = await post('/invoice', {
 		invoice: { amount, currency: 'USD', network, rate, text },
 		user: { username }
-- 
cgit v1.2.3


From 44664658d460ba2bee41aa87dbbb3f81ef232402 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 1 Aug 2022 11:44:56 -0700
Subject: display qr on invoice page refresh

---
 src/routes/invoice/[id].svelte | 49 +++++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

(limited to 'src/routes/invoice')

diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index d9b1540e..d5a39daa 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -10,6 +10,7 @@
 	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
 
 	let tipPercent = 0;
+	let qr;
 
 	$: tipAmount = customTipAmount
 		? customTipAmount < 0
@@ -62,29 +63,29 @@
 		customTipAmount = e.target.value;
 	};
 
-	onMount(async () => {
-		if (browser) {
-			let { default: QRCodeStyling } = await import('qr-code-styling');
-      console.log("text", text)
-			const qrCode = new QRCodeStyling({
-				width: window.screen.width < 640 ? 250 : 300,
-				type: 'svg',
-				data: text,
-				image: '/images/invoice.svg',
-				backgroundOptions: {
-					color: 'rgba(0, 0, 0, 0)'
-				},
-				dotsOptions: {
-					type: 'rounded'
-				},
-				imageOptions: {
-					hideBackgroundDots: false
-				}
-			});
-
-			qrCode.append(document.getElementById('qr'));
-		}
-	});
+	$: init(browser && $user);
+	let init = async (ready) => {
+		if (!ready) return;
+		let { default: QRCodeStyling } = await import('qr-code-styling');
+		console.log('text', text);
+		const qrCode = new QRCodeStyling({
+			width: window.screen.width < 640 ? 250 : 300,
+			type: 'svg',
+			data: text,
+			image: '/images/invoice.svg',
+			backgroundOptions: {
+				color: 'rgba(0, 0, 0, 0)'
+			},
+			dotsOptions: {
+				type: 'rounded'
+			},
+			imageOptions: {
+				hideBackgroundDots: false
+			}
+		});
+
+		qrCode.append(qr);
+	};
 
 	let showMobileTip = false;
 
@@ -222,7 +223,7 @@
 					>
 
 					<div
-						id="qr"
+						bind:this={qr}
 						class="border {showMobileTip
 							? 'border-gray-400'
 							: 'border-lightgrey'} rounded-3xl block md:flex md:p-5 justify-center items-center h-[300px] md:h-[342px] w-[250px] md:w-[342px] relative"
-- 
cgit v1.2.3


From 53b35c5b13797ea59bec850447fd347214fef025 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 1 Aug 2022 12:27:49 -0700
Subject: use canvas for qr code

---
 src/components/RegisterOrLogin.svelte |  3 +--
 src/routes/invoice/[id].svelte        | 15 +++------------
 src/routes/register.js                |  2 +-
 3 files changed, 5 insertions(+), 15 deletions(-)

(limited to 'src/routes/invoice')

diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 2463f47f..ae1948f5 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -18,7 +18,6 @@
 	}[page];
 
 	let submit = async () => {
-    console.log("HI")
 		let r = await post(url, { username, password });
 		if (!r.token) r = await post('/login', { username, password });
 		$token = r.token;
@@ -42,7 +41,7 @@
 			<form class="space-y-5" on:submit|preventDefault={submit}>
 				<div>
 					<label for="username" class="font-semibold">Username</label>
-          <!-- svelte-ignore a11y-autofocus -->
+					<!-- svelte-ignore a11y-autofocus -->
 					<input
 						type="text"
 						required
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index d5a39daa..1f1a7aa3 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -67,10 +67,10 @@
 	let init = async (ready) => {
 		if (!ready) return;
 		let { default: QRCodeStyling } = await import('qr-code-styling');
-		console.log('text', text);
+
 		const qrCode = new QRCodeStyling({
 			width: window.screen.width < 640 ? 250 : 300,
-			type: 'svg',
+			type: 'canvas',
 			data: text,
 			image: '/images/invoice.svg',
 			backgroundOptions: {
@@ -102,9 +102,6 @@
 	};
 
 	let customInput;
-
-	let qrSkeleton = true;
-	setTimeout(() => (qrSkeleton = false), 1000);
 </script>
 
 {#if $user}
@@ -227,13 +224,7 @@
 						class="border {showMobileTip
 							? 'border-gray-400'
 							: 'border-lightgrey'} rounded-3xl block md:flex md:p-5 justify-center items-center h-[300px] md:h-[342px] w-[250px] md:w-[342px] relative"
-					>
-						<div
-							class="z-100 h-[300px] md:h-[342px] w-[250px] md:w-[342px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
-								? 'block'
-								: 'hidden'}"
-						/>
-					</div>
+					/>
 
 					<div class="px-5 space-y-3">
 						<div class="flex justify-between">
diff --git a/src/routes/register.js b/src/routes/register.js
index 86f12dda..1bb03ba6 100644
--- a/src/routes/register.js
+++ b/src/routes/register.js
@@ -8,7 +8,7 @@ export async function POST({ request }) {
 	} catch (e) {
 		return {
 			status: 500,
-			body: e,
+			body: e
 		};
 	}
 }
-- 
cgit v1.2.3


From 5428fdf82a4260fa4f5e0bcdb722d6716740d8bf Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 1 Aug 2022 20:50:16 -0700
Subject: update invoice when tip changes

---
 src/lib/utils.js               |  25 +++-
 src/routes/invoice/[id].js     |   9 +-
 src/routes/invoice/[id].svelte | 282 ++++++++++++++++++++++-------------------
 src/routes/invoice/index.js    |   4 +-
 4 files changed, 173 insertions(+), 147 deletions(-)

(limited to 'src/routes/invoice')

diff --git a/src/lib/utils.js b/src/lib/utils.js
index 38f2a010..b80a548b 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -9,13 +9,15 @@ const base = browser ? '' : import.meta.env.VITE_COINOS_URL;
 export const get = (url) =>
 	fetch(base + url, {
 		headers: { accept: 'application/json' }
-	}).then((r) => r.text()).then((body) => {
-    try {
-      return JSON.parse(body);
-    } catch(e) {
-      throw Error(body);
-    } 
-  }) 
+	})
+		.then((r) => r.text())
+		.then((body) => {
+			try {
+				return JSON.parse(body);
+			} catch (e) {
+				throw Error(body);
+			}
+		});
 
 export const post = (url, body) =>
 	fetch(base + url, {
@@ -27,3 +29,12 @@ export const post = (url, body) =>
 export const copy = (text) => {
 	navigator.clipboard.writeText(text);
 };
+
+export function reverseFormat(val, locale) {
+	let parts = new Intl.NumberFormat(locale).formatToParts(1111.1);
+	let group = parts.find((part) => part.type === 'group').value;
+	let decimal = parts.find((part) => part.type === 'decimal').value;
+	let reversedVal = val.replace(new RegExp('\\' + group, 'g'), '');
+	reversedVal = reversedVal.replace(new RegExp('\\' + decimal, 'g'), '.');
+	return Number.isNaN(reversedVal) ? 0 : +reversedVal;
+}
diff --git a/src/routes/invoice/[id].js b/src/routes/invoice/[id].js
index 9a38604f..514e5d69 100644
--- a/src/routes/invoice/[id].js
+++ b/src/routes/invoice/[id].js
@@ -1,12 +1,9 @@
 import { get } from '$lib/utils';
 
-const username = 'bob',
-	network = 'lightning';
-
 export async function GET({ params }) {
 	let { id } = params;
-	let huh = await get(`/invoice?uuid=${id}`);
-	let { amount, rate, text } = await get(`/invoice?uuid=${id}`);
+	let res = await get(`/invoice?uuid=${id}`);
+	let { amount, rate, text, user: { username }} = await get(`/invoice?uuid=${id}`);
 
-	return { body: { amount, rate, text } };
+	return { body: { amount, rate, username, text } };
 }
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 1f1a7aa3..0f5a1437 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -1,11 +1,16 @@
 <script>
+	import { get, post, reverseFormat } from '$lib/utils';
 	import { browser } from '$app/env';
 	import { user } from '$lib/store';
 	import { Icon } from '$comp';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 
-	export let amount, rate, text;
+	export let amount, rate, text, username;
+
+	let mobileMenu;
+	$: logMobileParent(showMobileTip);
+	let logMobileParent = () => mobileMenu && console.log(mobileMenu.offsetParent);
 
 	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
 
@@ -31,6 +36,17 @@
 		amount + parseFloat(tipAmountSats.replace(/,/g, ''))
 	);
 
+	$: update(tipAmountSats);
+	let update = async (n) => {
+		let { id } = await post('/invoice', {
+			amount: amount + reverseFormat(n),
+			rate,
+			text,
+			username
+		});
+		({ text } = await get(`/invoice/${id}`));
+	};
+
 	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
 		style: 'currency',
 		currency: 'USD'
@@ -63,8 +79,9 @@
 		customTipAmount = e.target.value;
 	};
 
-	$: init(browser && $user);
-	let init = async (ready) => {
+	$: generate(text);
+	let generate = async (ready) => {
+		console.log('GENERATE', text);
 		if (!ready) return;
 		let { default: QRCodeStyling } = await import('qr-code-styling');
 
@@ -104,158 +121,159 @@
 	let customInput;
 </script>
 
-{#if $user}
-	<div class:full-shadow={showMobileTip}>
+<div class:full-shadow={showMobileTip}>
+	{#if $user}
 		<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
 			<Icon icon="arrow-left" style="w-10" />
 		</button>
+	{/if}
 
-		<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
+	<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"
+		>
+			<!-- tipping section  -->
 			<div
-				class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
+				bind:this={mobileMenu}
+				class="absolute {showMobileTip
+					? 'top-[calc(100vh - 100%)]'
+					: 'top-[calc(100vh)]'} left-0 bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 md:static text-center space-y-5 z-50"
 			>
-				<!-- tipping section  -->
-				<div
-					class="absolute {showMobileTip
-						? 'bottom-0'
-						: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
-				>
-					<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+				<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+
+				<div>
+					<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+						class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+					>
+					<span class="block text-secondary text-sm">{tipPercent}%</span>
+				</div>
+
+				<input
+					id="slider"
+					type="range"
+					min="0"
+					max="100"
+					value={tipPercent}
+					class="px-2"
+					on:input={(e) => {
+						customTipAmount = '';
+						tipPercent = e.target.value;
+					}}
+				/>
 
-					<div>
-						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-							class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+				<div>
+					{#each tipAmounts as amount}
+						<button
+							class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
+								amount.slice(0, 2) ||
+							((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+								? '!bg-black text-white'
+								: ''}"
+							on:click={() => handleTipButtonClick(amount)}>{amount}</button
 						>
-						<span class="block text-secondary text-sm">{tipPercent}%</span>
-					</div>
+					{/each}
 
-					<input
-						id="slider"
-						type="range"
-						min="0"
-						max="100"
-						value={tipPercent}
-						class="px-2"
-						on:input={(e) => {
-							customTipAmount = '';
-							tipPercent = e.target.value;
-						}}
-					/>
-
-					<div>
-						{#each tipAmounts as amount}
-							<button
-								class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
-									amount.slice(0, 2) ||
-								((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-									? '!bg-black text-white'
-									: ''}"
-								on:click={() => handleTipButtonClick(amount)}>{amount}</button
-							>
-						{/each}
-
-						<div class="relative">
-							<span
-								class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-									? 'opacity-50'
-									: 'opacity-100'}">$</span
-							>
-							<input
-								bind:this={customInput}
-								type="number"
-								min="0"
-								on:input={(e) => handleCustomTipAmount(e)}
-								class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-								placeholder="Other"
-							/>
-							<button
-								class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
-									? !customTipAmount && !tipAmount
-										? 'opacity-50'
-										: 'opacity-100'
-									: !customTipAmount
+					<div class="relative">
+						<span
+							class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+								? 'opacity-50'
+								: 'opacity-100'}">$</span
+						>
+						<input
+							bind:this={customInput}
+							type="number"
+							min="0"
+							on:input={(e) => handleCustomTipAmount(e)}
+							class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+							placeholder="Other"
+						/>
+						<button
+							class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+								? !customTipAmount && !tipAmount
 									? 'opacity-50'
-									: 'opacity-100'}"
-								disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
-								>Done</button
-							>
-						</div>
+									: 'opacity-100'
+								: !customTipAmount
+								? 'opacity-50'
+								: 'opacity-100'}"
+							disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+							on:click={() => (showMobileTip = false)}>Done</button
+						>
 					</div>
 				</div>
+			</div>
+
+			<div
+				class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+				id="section-divider"
+			/>
+
+			<!-- invoice section -->
+			<div class="text-center space-y-5">
+				<button
+					class="block md:hidden bg-black {showMobileTip
+						? 'text-white/50'
+						: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
+					on:click={() => (showMobileTip = true)}
+					disabled={showMobileTip}
+				>
+					<svg
+						width="24"
+						height="24"
+						class="mr-1"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg> Add a tip
+				</button>
+
+				<span class="text-secondary block"
+					>Scan to pay <span class="text-black font-semibold">{username}</span></span
+				>
 
 				<div
-					class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-					id="section-divider"
+					bind:this={qr}
+					class="border {showMobileTip
+						? 'border-gray-400'
+						: 'border-lightgrey'} rounded-3xl block md:flex md:p-5 justify-center items-center h-[300px] md:h-[342px] w-[250px] md:w-[342px] relative"
 				/>
 
-				<!-- invoice section -->
-				<div class="text-center space-y-5">
-					<button
-						class="block md:hidden bg-black {showMobileTip
-							? 'text-white/50'
-							: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
-						on:click={() => (showMobileTip = true)}
-						disabled={showMobileTip}
-					>
-						<svg
-							width="24"
-							height="24"
-							class="mr-1"
-							viewBox="0 0 24 24"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
+				<div class="px-5 space-y-3">
+					<div class="flex justify-between">
+						<span class="font-semibold text-sm">Invoice</span>
+						<span class="font-semibold text-sm"
+							>{invoiceAmountFiatFormatted}
+							<span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
 						>
-							<path
-								d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg> Add a tip
-					</button>
-
-					<span class="text-secondary block"
-						>Scan to pay <span class="text-black font-semibold">{$user.username}</span></span
-					>
+					</div>
 
-					<div
-						bind:this={qr}
-						class="border {showMobileTip
-							? 'border-gray-400'
-							: 'border-lightgrey'} rounded-3xl block md:flex md:p-5 justify-center items-center h-[300px] md:h-[342px] w-[250px] md:w-[342px] relative"
-					/>
-
-					<div class="px-5 space-y-3">
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Invoice</span>
-							<span class="font-semibold text-sm"
-								>{invoiceAmountFiatFormatted}
-								<span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
-							>
-						</div>
-
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Tip</span>
-							<span class="font-semibold text-sm"
-								>{tipAmountFormatted}
-								<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
-							>
-						</div>
-
-						<div class="flex justify-between">
-							<span class="font-bold">Total</span>
-							<span class="font-bold"
-								>{totalAmountFormatted}
-								<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
-							>
-						</div>
+					<div class="flex justify-between">
+						<span class="font-semibold text-sm">Tip</span>
+						<span class="font-semibold text-sm"
+							>{tipAmountFormatted}
+							<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+						>
+					</div>
+
+					<div class="flex justify-between">
+						<span class="font-bold">Total</span>
+						<span class="font-bold"
+							>{totalAmountFormatted}
+							<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
+						>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-{/if}
+</div>
 
 <style>
 	#slider {
diff --git a/src/routes/invoice/index.js b/src/routes/invoice/index.js
index 2bd95538..8ac33a09 100644
--- a/src/routes/invoice/index.js
+++ b/src/routes/invoice/index.js
@@ -3,8 +3,8 @@ import { post } from '$lib/utils';
 let network = 'lightning';
 
 export async function POST({ request }) {
-	let { amount, rate, username } = await request.json();
-	let { text } = await post('/lightning/invoice', { amount });
+	let { amount, rate, username, text } = await request.json();
+  if (!text) ({ text } = await post('/lightning/invoice', { amount }));
 	let { uuid: id } = await post('/invoice', {
 		invoice: { amount, currency: 'USD', network, rate, text },
 		user: { username }
-- 
cgit v1.2.3


From b8a74370541d396246b3a13fe72e6f528ef1a2ea Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Mon, 1 Aug 2022 21:53:11 -0600
Subject: add payment success screen, currency store, ln address, bug fixes +
 more

---
 src/lib/socket.js                    |   5 ++--
 src/lib/store.js                     |   2 ++
 src/routes/[username]/index.svelte   |   7 ++---
 src/routes/[username]/support.svelte |   5 ----
 src/routes/__layout.svelte           |   2 +-
 src/routes/invoice/[id].svelte       |  54 +++++++++++++++++++++++++++++------
 src/routes/support.svelte            |   5 ++++
 static/images/success.png            | Bin 0 -> 191994 bytes
 8 files changed, 59 insertions(+), 21 deletions(-)
 delete mode 100644 src/routes/[username]/support.svelte
 create mode 100644 src/routes/support.svelte
 create mode 100644 static/images/success.png

(limited to 'src/routes/invoice')

diff --git a/src/lib/socket.js b/src/lib/socket.js
index c7c541e1..4898f481 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,5 +1,5 @@
 import { get } from 'svelte/store';
-import { rate, user, token } from '$lib/store';
+import { rate, user, token, invoicePaid, preferredCurrency } from '$lib/store';
 
 let interval, socket;
 
@@ -18,13 +18,14 @@ export const messages = (data) => ({
 	},
 
 	payment() {
-		console.log(data, 'payment');
+		invoicePaid.set(true);
 	},
 
 	connected: auth,
 
 	login() {
 		user.set(data);
+		preferredCurrency.set(data.currency);
 	}
 });
 
diff --git a/src/lib/store.js b/src/lib/store.js
index 6f4a9515..f910dfa6 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -18,3 +18,5 @@ export const user = writable();
 export const invoiceAmount = writable();
 export const invoiceAmountFiat = writable();
 export const token = persisted('token');
+export const invoicePaid = writable();
+export const preferredCurrency = writable();
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
index a53b94cc..6e3978ad 100644
--- a/src/routes/[username]/index.svelte
+++ b/src/routes/[username]/index.svelte
@@ -7,8 +7,7 @@
 	import { copy } from '$lib/utils';
 	export let username;
 
-	//this needs to be pulled from user
-	let lightning = 'lnbc1p3dzl8tpp5jgq2dxefjdhvmvs3uvtjc';
+	let lightningAddress = `${username}@coinos.io`;
 
 	onMount(async () => {
 		if (browser) {
@@ -39,7 +38,7 @@
 	setTimeout(() => (qrSkeleton = false), 100);
 
 	const handleCopy = () => {
-		copy(lightning);
+		copy(lightningAddress);
 		toast.push('Copied!', {
 			theme: {
 				'--toastBarBackground': '#2F855A'
@@ -84,7 +83,7 @@
 				<div
 					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
 				>
-					<span>{lightning}</span>
+					<span>{lightningAddress}</span>
 					<button on:click={handleCopy}>
 						<Icon icon="copy" style="ml-2" />
 					</button>
diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
deleted file mode 100644
index 1935b156..00000000
--- a/src/routes/[username]/support.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import { AppHeader } from '$comp';
-</script>
-
-<AppHeader />
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index b2cb8aae..406c29e2 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -11,7 +11,7 @@
 	import { LoadingSplash } from '$comp';
 
 	browser && ($token ||= $session.token);
-	let protectedRoutes = [/receive/];
+	let protectedRoutes = [/receive/, /customers/, /dashboard/, /settings/, /transactions/];
 	let ready = false;
 
 	onMount(() => {
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 1f1a7aa3..dfb6be8d 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -1,12 +1,16 @@
 <script>
+	import { toast } from '@zerodevx/svelte-toast';
 	import { browser } from '$app/env';
-	import { user } from '$lib/store';
-	import { Icon } from '$comp';
+	import { user, invoicePaid, preferredCurrency } from '$lib/store';
+	import { Icon, Image } from '$comp';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
+	import { copy } from '$lib/utils';
 
 	export let amount, rate, text;
 
+	console.log($user);
+
 	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
 
 	let tipPercent = 0;
@@ -34,7 +38,7 @@
 	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
 		style: 'currency',
 		currency: 'USD'
-	}).format(amountFiat + tipAmount);
+	}).format(amountFiat + parseFloat(tipAmount));
 
 	const amountFormatted = new Intl.NumberFormat('en-US', {
 		maximumFractionDigits: 0
@@ -51,6 +55,8 @@
 
 	const handleTipButtonClick = (amount) => {
 		customTipAmount = '';
+		customInput.value = '';
+
 		if (amount === 'None') {
 			tipPercent = 0;
 		} else {
@@ -102,9 +108,26 @@
 	};
 
 	let customInput;
+
+	const handleCopy = () => {
+		copy(text);
+		toast.push('Copied!', {
+			theme: {
+				'--toastBarBackground': '#2F855A'
+			}
+		});
+	};
+
+	const handleDoneClick = () => {
+		if ($user) {
+			goto(`/${user.username}/receive`);
+		} else {
+			goto('/');
+		}
+	};
 </script>
 
-{#if $user}
+{#if $user && !invoicePaid}
 	<div class:full-shadow={showMobileTip}>
 		<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
 			<Icon icon="arrow-left" style="w-10" />
@@ -116,7 +139,7 @@
 			>
 				<!-- tipping section  -->
 				<div
-					class="absolute {showMobileTip
+					class="w-[100%] md:w-auto absolute {showMobileTip
 						? 'bottom-0'
 						: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
 				>
@@ -138,6 +161,7 @@
 						class="px-2"
 						on:input={(e) => {
 							customTipAmount = '';
+							customInput.value = '';
 							tipPercent = e.target.value;
 						}}
 					/>
@@ -145,9 +169,10 @@
 					<div>
 						{#each tipAmounts as amount}
 							<button
-								class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
-									amount.slice(0, 2) ||
-								((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+								class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount
+									? ''
+									: tipPercent === amount.slice(0, 2) ||
+									  ((tipPercent === 0 || tipPercent === '0') && amount === 'None')
 									? '!bg-black text-white'
 									: ''}"
 								on:click={() => handleTipButtonClick(amount)}>{amount}</button
@@ -221,9 +246,10 @@
 
 					<div
 						bind:this={qr}
+						on:click={handleCopy}
 						class="border {showMobileTip
 							? 'border-gray-400'
-							: 'border-lightgrey'} rounded-3xl block md:flex md:p-5 justify-center items-center h-[300px] md:h-[342px] w-[250px] md:w-[342px] relative"
+							: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center cursor-pointer"
 					/>
 
 					<div class="px-5 space-y-3">
@@ -255,6 +281,16 @@
 			</div>
 		</div>
 	</div>
+{:else}
+	<div class="text-center mt-20 md:mt-0">
+		<Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" />
+		<h1 class="text-3xl md:text-4xl font-bold mb-6">Payment Successful!</h1>
+		<h2 class="text-2xl md:text-3xl font-semibold">{totalAmountFormatted} {$preferredCurrency}</h2>
+		<h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SATS)</h3>
+		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold" on:click={handleDoneClick}>
+			Done
+		</button>
+	</div>
 {/if}
 
 <style>
diff --git a/src/routes/support.svelte b/src/routes/support.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/support.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/static/images/success.png b/static/images/success.png
new file mode 100644
index 00000000..d547edd9
Binary files /dev/null and b/static/images/success.png differ
-- 
cgit v1.2.3


From 5e2c0636f1291ae1bca27a514d5cddde29315801 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Mon, 1 Aug 2022 22:04:19 -0600
Subject: format

---
 src/routes/[username]/index.js |  10 ++--
 src/routes/invoice/[id].js     |   7 ++-
 src/routes/invoice/[id].svelte | 101 ++++++++++++++++++++---------------------
 src/routes/invoice/index.js    |   2 +-
 4 files changed, 62 insertions(+), 58 deletions(-)

(limited to 'src/routes/invoice')

diff --git a/src/routes/[username]/index.js b/src/routes/[username]/index.js
index 5229cc50..5de1316f 100644
--- a/src/routes/[username]/index.js
+++ b/src/routes/[username]/index.js
@@ -4,11 +4,11 @@ export async function GET({ params }) {
 	let { username } = params;
 	let body;
 
-  try {
-    body = await get(`/users/${username}`);
-  } catch(e) {
-    body = {};
-  } 
+	try {
+		body = await get(`/users/${username}`);
+	} catch (e) {
+		body = {};
+	}
 
 	return { body };
 }
diff --git a/src/routes/invoice/[id].js b/src/routes/invoice/[id].js
index 514e5d69..5f85d192 100644
--- a/src/routes/invoice/[id].js
+++ b/src/routes/invoice/[id].js
@@ -3,7 +3,12 @@ import { get } from '$lib/utils';
 export async function GET({ params }) {
 	let { id } = params;
 	let res = await get(`/invoice?uuid=${id}`);
-	let { amount, rate, text, user: { username }} = await get(`/invoice?uuid=${id}`);
+	let {
+		amount,
+		rate,
+		text,
+		user: { username }
+	} = await get(`/invoice?uuid=${id}`);
 
 	return { body: { amount, rate, username, text } };
 }
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 0bb6c41a..b302d12d 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -146,10 +146,10 @@
 			<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="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"
+			>
 				<!-- tipping section  -->
 				<div
 					class="w-[100%] md:w-auto absolute {showMobileTip
@@ -158,12 +158,12 @@
 				>
 					<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
 
-				<div>
-					<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-						class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
-					>
-					<span class="block text-secondary text-sm">{tipPercent}%</span>
-				</div>
+					<div>
+						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+							class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+						>
+						<span class="block text-secondary text-sm">{tipPercent}%</span>
+					</div>
 
 					<input
 						id="slider"
@@ -212,51 +212,50 @@
 										? 'opacity-50'
 										: 'opacity-100'
 									: !customTipAmount
-
-								? 'opacity-50'
-								: 'opacity-100'}"
-							disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
-							on:click={() => (showMobileTip = false)}>Done</button
-						>
+									? 'opacity-50'
+									: 'opacity-100'}"
+								disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+								on:click={() => (showMobileTip = false)}>Done</button
+							>
+						</div>
 					</div>
 				</div>
-			</div>
 
-			<div
-				class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-				id="section-divider"
-			/>
-
-			<!-- invoice section -->
-			<div class="text-center space-y-5">
-				<button
-					class="block md:hidden bg-black {showMobileTip
-						? 'text-white/50'
-						: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
-					on:click={() => (showMobileTip = true)}
-					disabled={showMobileTip}
-				>
-					<svg
-						width="24"
-						height="24"
-						class="mr-1"
-						viewBox="0 0 24 24"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
+				<div
+					class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+					id="section-divider"
+				/>
+
+				<!-- invoice section -->
+				<div class="text-center space-y-5">
+					<button
+						class="block md:hidden bg-black {showMobileTip
+							? 'text-white/50'
+							: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
+						on:click={() => (showMobileTip = true)}
+						disabled={showMobileTip}
+					>
+						<svg
+							width="24"
+							height="24"
+							class="mr-1"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg> Add a tip
+					</button>
+
+					<span class="text-secondary block"
+						>Scan to pay <span class="text-black font-semibold">{username}</span></span
 					>
-						<path
-							d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg> Add a tip
-				</button>
-
-				<span class="text-secondary block"
-					>Scan to pay <span class="text-black font-semibold">{username}</span></span
-				>
 
 					<div
 						bind:this={qr}
diff --git a/src/routes/invoice/index.js b/src/routes/invoice/index.js
index 8ac33a09..cf26b3c6 100644
--- a/src/routes/invoice/index.js
+++ b/src/routes/invoice/index.js
@@ -4,7 +4,7 @@ let network = 'lightning';
 
 export async function POST({ request }) {
 	let { amount, rate, username, text } = await request.json();
-  if (!text) ({ text } = await post('/lightning/invoice', { amount }));
+	if (!text) ({ text } = await post('/lightning/invoice', { amount }));
 	let { uuid: id } = await post('/invoice', {
 		invoice: { amount, currency: 'USD', network, rate, text },
 		user: { username }
-- 
cgit v1.2.3


From 538f0420a27b51bced2b44fe0a28244bc4060b0e Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 1 Aug 2022 21:15:56 -0700
Subject: remove extra invoice call

---
 src/routes/invoice/[id].js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/routes/invoice')

diff --git a/src/routes/invoice/[id].js b/src/routes/invoice/[id].js
index 5f85d192..bba1693c 100644
--- a/src/routes/invoice/[id].js
+++ b/src/routes/invoice/[id].js
@@ -2,7 +2,6 @@ import { get } from '$lib/utils';
 
 export async function GET({ params }) {
 	let { id } = params;
-	let res = await get(`/invoice?uuid=${id}`);
 	let {
 		amount,
 		rate,
-- 
cgit v1.2.3


From b83994d6fb38981607c2cd4d460173457377a9ba Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 1 Aug 2022 22:17:25 -0700
Subject: update invoice paid status

---
 src/lib/socket.js              |  4 ++--
 src/lib/store.js               |  2 +-
 src/routes/invoice/[id].js     |  3 ++-
 src/routes/invoice/[id].svelte | 16 ++++++++++------
 4 files changed, 15 insertions(+), 10 deletions(-)

(limited to 'src/routes/invoice')

diff --git a/src/lib/socket.js b/src/lib/socket.js
index 4898f481..66091d76 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,5 +1,5 @@
 import { get } from 'svelte/store';
-import { rate, user, token, invoicePaid, preferredCurrency } from '$lib/store';
+import { rate, user, token, invoices, preferredCurrency } from '$lib/store';
 
 let interval, socket;
 
@@ -18,7 +18,7 @@ export const messages = (data) => ({
 	},
 
 	payment() {
-		invoicePaid.set(true);
+		invoices.set({ ...get(invoices), [data.invoice.uuid]: data.invoice });
 	},
 
 	connected: auth,
diff --git a/src/lib/store.js b/src/lib/store.js
index f910dfa6..b20fd10f 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -18,5 +18,5 @@ export const user = writable();
 export const invoiceAmount = writable();
 export const invoiceAmountFiat = writable();
 export const token = persisted('token');
-export const invoicePaid = writable();
+export const invoices = writable({});
 export const preferredCurrency = writable();
diff --git a/src/routes/invoice/[id].js b/src/routes/invoice/[id].js
index bba1693c..a58d02a1 100644
--- a/src/routes/invoice/[id].js
+++ b/src/routes/invoice/[id].js
@@ -5,9 +5,10 @@ export async function GET({ params }) {
 	let {
 		amount,
 		rate,
+		status,
 		text,
 		user: { username }
 	} = await get(`/invoice?uuid=${id}`);
 
-	return { body: { amount, rate, username, text } };
+	return { body: { amount, id, rate, username, status, text } };
 }
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index b302d12d..17c7de1f 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -2,15 +2,15 @@
 	import { toast } from '@zerodevx/svelte-toast';
 	import { get, post, reverseFormat } from '$lib/utils';
 	import { browser } from '$app/env';
-	import { user, invoicePaid, preferredCurrency } from '$lib/store';
+	import { invoices, user, preferredCurrency } from '$lib/store';
 	import { Icon, Image } from '$comp';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import { copy } from '$lib/utils';
 
-	export let amount, rate, text, username;
+	export let amount, id, rate, status, text, username;
 
-	console.log($user);
+	$invoices[id] = { amount, id, rate, status, text, username };
 
 	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
 
@@ -133,16 +133,20 @@
 
 	const handleDoneClick = () => {
 		if ($user) {
-			goto(`/${user.username}/receive`);
+			goto(`/${$user.username}/receive`);
 		} else {
 			goto('/');
 		}
 	};
 </script>
 
-{#if $user && !invoicePaid}
+{#if $invoices[id]?.status !== 'paid'}
 	<div class:full-shadow={showMobileTip}>
-		<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
+		<button
+			class="ml-5 md:ml-20 mt-5 md:mt-10"
+			class:invisible={!$user}
+			on:click={handleBackButton}
+		>
 			<Icon icon="arrow-left" style="w-10" />
 		</button>
 
-- 
cgit v1.2.3