add payment success screen, currency store, ln address, bug fixes + more

7 files changed, 54 insertions, 16 deletions

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/__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/[username]/support.svelte b/src/routes/support.svelte
index 1935b156..1935b156 100644
--- a/src/routes/[username]/support.svelte
+++ b/src/routes/support.svelte
diff --git a/static/images/success.png b/static/images/success.png
new file mode 100644
index 00000000..d547edd9
--- /dev/null
+++ b/static/images/success.png