invoice and popup styles

7 files changed, 119 insertions, 84 deletions

diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte
index 4b42f851..d68824a8 100644
--- a/src/components/Invoice.svelte
+++ b/src/components/Invoice.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { f, sat, sats } from '$lib/utils';
 	import { fly } from 'svelte/transition';
 	import { Avatar, Icon } from '$comp';
 	import { invoice } from '$lib/store';
@@ -7,28 +8,31 @@
 </script>
 
 {#if $invoice}
-	<div
-		class="flex flex-wrap md:flex-nowrap fixed bottom-0 border-t w-full p-4 bg-white z-50"
-		in:fly
-	>
-		<div class="my-auto md:w-1/2">
-			<div class="flex">
-				<Avatar user={$invoice.user.username} size={12} />
-				<h1 class="my-auto"><b>{$invoice.user.username}</b> sent an invoice</h1>
+	<div class="fixed bottom-0 border-t w-full p-4 bg-white z-50" in:fly>
+		<div class="flex flex-wrap md:flex-nowrap max-w-xl mx-auto gap-2">
+			<div class="my-auto mx-auto">
+				<div class="flex">
+					<Avatar user={$invoice.user.username} size={12} />
+					<h1 class="my-auto">
+						<b>{$invoice.user.username}</b> sent an invoice for
+						<b>{f(($invoice.amount * $invoice.rate) / sats, $invoice.currency)}</b>
+						{sat($invoice.amount)}
+					</h1>
+				</div>
 			</div>
-		</div>
-		<div class="mx-auto my-auto">
-			<a href={`/invoice/${$invoice.uuid}`}>
-				<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full">
-					Pay
+			<div class="mx-auto my-auto flex gap-2">
+				<a href={`/invoice/${$invoice.uuid}/tip`}>
+					<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40">
+						Pay
+					</button>
+				</a>
+				<button
+					class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40"
+					on:click={() => ($invoice = undefined)}
+				>
+					Dismiss
 				</button>
-			</a>
+			</div>
 		</div>
-		<button
-			class="absolute right-4 top-4 ml-auto mb-auto rounded-full border font-bold hover:opacity-80 p-3"
-			on:click={() => ($invoice = undefined)}
-		>
-			<Icon icon="close" />
-		</button>
 	</div>
 {/if}
diff --git a/src/components/Request.svelte b/src/components/Request.svelte
index 2c87d436..e1071272 100644
--- a/src/components/Request.svelte
+++ b/src/components/Request.svelte
@@ -7,31 +7,30 @@
 </script>
 
 {#if $request}
-	<div
-		class="flex flex-wrap md:flex-nowrap fixed bottom-0 border-t w-full p-4 bg-white z-50"
-		in:fly
-	>
-		<div class="my-auto md:w-1/2">
-			<div class="flex">
-				<Avatar user={$request.requester} size={12} />
-				<h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1>
+	<div class="fixed bottom-0 border-t w-full p-4 bg-white z-50" in:fly>
+		<div class="flex flex-wrap md:flex-nowrap max-w-xl mx-auto gap-2">
+			<div class="my-auto mx-auto">
+				<div class="flex">
+					<Avatar user={$request.requester} size={12} />
+					<h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1>
+				</div>
+				{#if $request.memo}
+					<div class="border-l-4 pl-4 my-2">{$request.memo}</div>
+				{/if}
 			</div>
-			{#if $request.memo}
-				<div class="border-l-4 pl-4 my-2">{$request.memo}</div>
-			{/if}
-		</div>
-		<div class="mx-auto my-auto">
-			<a href={`/${user.username}/receive`}>
-				<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full">
-					Create invoice
+			<div class="mx-auto my-auto flex gap-2">
+				<a href={`/${user.username}/receive`}>
+					<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40">
+						Invoice
+					</button>
+				</a>
+				<button
+					class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full"
+					on:click={() => ($request = undefined)}
+				>
+					Dismiss
 				</button>
-			</a>
+			</div>
 		</div>
-		<button
-			class="absolute right-4 top-4 ml-auto mb-auto rounded-full border font-bold hover:opacity-80 p-3"
-			on:click={() => ($request = undefined)}
-		>
-			<Icon icon="close" />
-		</button>
 	</div>
 {/if}
diff --git a/src/lib/socket.js b/src/lib/socket.js
index a5784f19..acb2b186 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -8,10 +8,11 @@ const btc = env.PUBLIC_BTC;
 
 let socket, token;
 
-export const auth = () => token && send('login', token);
+export const auth = () => token && send('login', token) && send('heartbeat');
 
 export const send = (type, data) => {
 	socket?.readyState === 1 && socket.send(JSON.stringify({ type, data }));
+	return true;
 };
 
 export const messages = (data) => ({
@@ -28,6 +29,7 @@ export const messages = (data) => ({
 	},
 
 	request() {
+    console.log("REQ", data)
 		request.set(data);
 	},
 
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 36e109e0..3485b9eb 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -46,7 +46,8 @@
 	let checkSocket = () => {
 		counter++;
 		lost = Date.now() - $last > 15000;
-		if (lost) close();
+    console.log("lost?", lost);
+    if (lost) connect(token);
 		if (counter > 5) {
 			send('heartbeat');
 			counter = 0;
diff --git a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
index a0f9a1b0..7afc2956 100644
--- a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
@@ -23,7 +23,6 @@
 	let { currency, username } = data.subject;
 	let { user } = data;
 </script>
-
 {#if form}
 	<div class="container px-4 mt-20 max-w-xl mx-auto space-y-8">
 		<div class="text-center mb-8 space-y-5">
@@ -36,11 +35,13 @@
 				<p class="text-4xl break-words my-auto">{req.requester.username}</p>
 			</div>
 		</div>
-		<a href={`/${user.username}/dashboard`} class="mx-auto">
+    <div class="text-center">
+		<a href={`/${user.username}/dashboard`} class="mx-auto text-center">
 			<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
 				Done
 			</button>
 		</a>
+    </div>
 	</div>
 {:else}
 	<form method="POST" class="flex justify-center items-center mt-24 mb-3 px-3" use:enhance>
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 25ebf227..47f5281b 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -3,12 +3,15 @@
 	import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
 	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
-	import { invoice as inv, invoices, last } from '$lib/store';
-	import { Icon, Heart, Image, Qr } from '$comp';
+	import { invoices, last } from '$lib/store';
+	import { Avatar, Icon, Heart, Image, Qr } from '$comp';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
 
 	export let data;
+
+	let showQr;
+
 	$: refresh(data);
 	let { invoice, id, user, src } = data;
 	let {
@@ -24,8 +27,6 @@
 	let tipPercent = 0;
 
 	let refresh = (data) => {
-		$inv = null;
-
 		({ invoice, id } = data);
 		({
 			amount,
@@ -63,18 +64,27 @@
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="container mx-auto max-w-lg px-4 space-y-10 lg:space-y-0">
-	<div class="space-y-10 lg:space-y-0">
-		<div class="text-center">
-			<span class="text-secondary block text-2xl break-all"
-				>Scan to pay <a href="/{username}" class="text-black font-semibold hover:opacity-80"
-					>{username}</a
-				></span
-			>
+<div class="container mx-auto max-w-lg px-4 mt-20">
+	<h1 class="text-secondary block text-2xl flex">
+		<div class="flex mx-auto">
+			<div class="my-auto">Please pay</div>
 
+			<div class="my-auto">
+				<a href="/{username}" class="text-black font-semibold hover:opacity-80">
+					<div class="flex my-auto">
+						<Avatar user={username} size={12} />
+            <div class="my-auto">{username}</div>
+					</div>
+				</a>
+			</div>
+		</div>
+	</h1>
+
+	<div class="text-center space-y-10">
+		{#if !user || user.username === username || showQr}
 			<Qr {src} />
 
-			<div class="mb-10">
+			<div>
 				<button
 					class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2 mx-auto"
 					on:click={() => copy(text)}
@@ -82,35 +92,51 @@
 					<div>Copy</div></button
 				>
 			</div>
+		{/if}
 
-			<div class="px-5 space-y-3 w-80 mx-auto">
-				{#if invoice.tip}
-					<div class="flex justify-between">
-						{$t('invoice.invoice')}
-						<span>
-							{f(amountFiat, currency)}
-							<span class="text-secondary">{`${sat(amount)}`}</span>
-						</span>
-					</div>
-
-					<div class="flex justify-between">
-						{$t('invoice.tip')}
-						<span
-							>{f(tipAmount, currency)}
-							<span class="text-secondary">{`${sat(tip)}`}</span>
-						</span>
-					</div>
-				{/if}
+		<div class="px-5 space-y-4 w-80 mx-auto mb-4">
+			{#if invoice.tip}
+				<div class="flex justify-between">
+					{$t('invoice.invoice')}
+					<span>
+						{f(amountFiat, currency)}
+						<span class="text-secondary">{`${sat(amount)}`}</span>
+					</span>
+				</div>
 
-				<div class="flex flex-wrap justify-between font-bold">
-					<span class="mr-1">{$t('invoice.total')}</span>
+				<div class="flex justify-between">
+					{$t('invoice.tip')}
 					<span
-						>{f(amountFiat + parseFloat(tipAmount), currency)}
-						<span class="text-secondary font-normal">{`${sat(tip + amount)}`}</span></span
-					>
+						>{f(tipAmount, currency)}
+						<span class="text-secondary">{`${sat(tip)}`}</span>
+					</span>
 				</div>
+			{/if}
+
+			<div class="flex flex-wrap justify-between font-bold text-2xl !my-8">
+				<span class="mr-1">{$t('invoice.total')}</span>
+				<span
+					>{f(amountFiat + parseFloat(tipAmount), currency)}
+					<span class="text-secondary font-normal">{`${sat(tip + amount)}`}</span></span
+				>
 			</div>
 		</div>
+
+		{#if user && user.username !== username}
+			<div class="mx-auto my-auto flex gap-2 justify-center">
+				<a href={`/send/${invoice.uuid}`}>
+					<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80">
+						Pay now
+					</button>
+				</a>
+				<button
+					class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80"
+					on:click={() => (showQr = !showQr)}
+				>
+					{showQr ? 'Hide' : 'Show'} QR
+				</button>
+			</div>
+		{/if}
 	</div>
 </div>
 
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index ef878831..8f07fdb8 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { browser } from '$app/environment';
-	import { invoices } from '$lib/store';
+	import { invoice as inv, invoices } from '$lib/store';
 	import { back, copy, f, sat, get, reverseFormat, s, sats } from '$lib/utils';
 	import { Icon } from '$comp';
 	import { goto } from '$app/navigation';
@@ -79,6 +79,8 @@
 	let fullscreen;
 
 	let refresh = (data) => {
+		$inv = null;
+
 		({ invoice, id } = data);
 		({
 			amount,