From 2a2b3d7074e8a784e5673699af2143fdcb01e728 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Sat, 5 Nov 2022 09:20:01 -0700
Subject: request notifications

---
 src/components/Numpad.svelte                       |  6 ++--
 src/components/Request.svelte                      |  9 +++++
 src/components/index.js                            |  1 +
 src/lib/socket.js                                  | 12 ++++---
 src/lib/store.js                                   |  1 +
 src/routes/(app)/+layout.svelte                    |  9 +++--
 src/routes/(app)/[username]/+page.svelte           | 40 ++++++++++------------
 .../(app)/[username]/request/+page.server.js       |  8 ++---
 src/routes/(app)/[username]/request/+page.svelte   | 33 +++++++++++-------
 .../(app)/[username]/request/sent/+page.svelte     | 16 ++++-----
 .../[username]/transactions/[...page]/+page.svelte |  2 +-
 11 files changed, 80 insertions(+), 57 deletions(-)
 create mode 100644 src/components/Request.svelte

diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index c5f1efa8..36fe9f67 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -90,12 +90,10 @@
 	<div class="space-y-5">
 		<div class="text-center">
 			<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
-				{fiat ? `${symbol}${amountFiat}` : amountSatsFormatted}<span
-					class="tracking-normal text-base font-normal">{fiat ? currency : 'SAT'}</span
-				>
+				{fiat ? `${symbol}${amountFiat}` : '⚡️' + amountSatsFormatted}
 			</div>
 			<span class="text-secondary mr-1"
-				>{fiat ? `${amountSatsConverted} SAT` : amountFiatConverted}</span
+				>{fiat ? `⚡️${amountSatsConverted}` : amountFiatConverted}</span
 			>
 			<button
 				type="button"
diff --git a/src/components/Request.svelte b/src/components/Request.svelte
new file mode 100644
index 00000000..c0e2afc0
--- /dev/null
+++ b/src/components/Request.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { Avatar } from '$comp';
+	import { request } from '$lib/store';
+</script>
+
+<div class="fixed bottom-0 h-24 border-t w-full bg-primary" in:fly>
+	<Avatar user={$request.requester} />
+	{$request.requester.username} is requesting an invoice
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index 468e132e..f3d550ec 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Request } from './Request.svelte';
 export { default as Pin } from './Pin.svelte';
 export { default as Card } from './Card.svelte';
 export { default as Lock } from './Lock.svelte';
diff --git a/src/lib/socket.js b/src/lib/socket.js
index 672d008c..d3cc40ea 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,6 +1,6 @@
 import { get } from 'svelte/store';
-import { invoices, newPayment, last, rate, user } from '$lib/store';
-import { success } from '$lib/utils';
+import { invoices, request, newPayment, last, rate, user } from '$lib/store';
+import { success, sat } from '$lib/utils';
 import { env } from '$env/dynamic/public';
 
 const socketUrl = env.PUBLIC_SOCKET;
@@ -23,6 +23,10 @@ export const messages = (data) => ({
 		rate.set(data);
 	},
 
+	request() {
+		request.set(data);
+	},
+
 	async payment() {
 		let { amount, invoice } = data;
 
@@ -34,9 +38,9 @@ export const messages = (data) => ({
 
 		newPayment.set(true);
 		if (amount > 0) {
-			success(`Received ${amount} sats!`);
+			success(`Received ${sat(amount)}!`);
 		} else {
-			success(`Sent ${-amount} sats!`);
+			success(`Sent ${sat(amount)}!`);
 		}
 	},
 
diff --git a/src/lib/store.js b/src/lib/store.js
index 52f2fe2a..c32ef49b 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -44,3 +44,4 @@ export const avatarUpload = writable();
 export const bannerUpload = writable();
 export const pin = persistSession('pin', undefined, 5 * 60 * 1000);
 export const last = writable();
+export const request = writable();
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index f6d79788..9f29e9a2 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,12 +1,13 @@
 <script>
+	import { fly } from 'svelte/transition';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onDestroy, onMount } from 'svelte';
 	import { close, connect, send } from '$lib/socket';
-	import { last, selectedRate, rate, user } from '$lib/store';
+	import { last, selectedRate, rate, user, request } from '$lib/store';
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
-	import { LoadingSplash } from '$comp';
+	import { LoadingSplash, Request } from '$comp';
 	import { warning, protectedRoutes } from '$lib/utils';
 	import { t, locale } from '$lib/translations';
 
@@ -83,3 +84,7 @@
 <main data-sveltekit-prefetch>
 	<slot />
 </main>
+
+{#if $request}
+	<Request />
+{/if}
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 0f9aa38c..a5b627df 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -37,33 +37,31 @@
 </script>
 
 <div class="container px-4 flex flex-wrap sm:flex-nowrap mb-4">
-	<div class="hidden sm:block w-sm min-w-sm pt-20 space-y-5">
-		<h1 class="text-3xl font-bold">{subject.username}</h1>
+	<div class="w-full sm:w-[340px] pt-20 space-y-5 mr-4">
+		<h1 class="text-3xl font-bold text-center sm:text-left">{subject.username}</h1>
 
-		<p class="text-secondary w-64 mb-4">
+		<div class="text-secondary w-64">
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
-		</p>
+		</div>
 
 		{#if user?.username !== subject.username}
-			<a href={`/${subject.username}/receive`}>
-				<button
-					class="w-full sm:w-40 mt-2 text-black hover:bg-black hover:text-white font-semibold py-3 px-5 rounded-full border border-black"
-				>
-					Pay
-				</button>
-			</a>
+			<div>
+				<a href={`/${subject.username}/receive`}>
+					<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2">
+						Pay
+					</button>
+				</a>
 
-			<a href={`/${subject.username}/request`}>
-				<button class="w-full sm:w-40 mt-2 bg-black text-white font-semibold py-3 px-5 rounded-full"
-					>Request invoice</button
-				>
-			</a>
+				<a href={`/${subject.username}/request`}>
+					<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+						>Request an invoice</button
+					>
+				</a>
+			</div>
 		{/if}
 	</div>
 
-	<div class="space-y-5 mt-20 mx-auto max-w-lg">
-		<h1 class="text-2xl font-bold sm:hidden text-center">{subject.username}</h1>
-		<span class="font-bold mb-1">Lightning address</span>
+	<div class="space-y-5 mt-5 sm:mt-20 mx-auto max-w-lg">
 		<p class="text-secondary mb-1">
 			This <a href="https://lightningaddress.com" class="underline" target="_blank" rel="noreferrer"
 				>lightning address</a
@@ -77,9 +75,9 @@
 		/>
 
 		<div class="bg-primary font-semibold rounded-xl text-sm p-3 flex">
-			<div class="my-auto">{lightningAddress}</div>
+			<div class="my-auto font-semibold text-lg w-full text-center">{lightningAddress}</div>
 			<button class="ml-auto hover:opacity-80" on:click={() => copy(lightningAddress)}>
-				<Icon icon="copy" style="ml-2" />
+				<Icon icon="copy" on:click={() => copy(lightningAddress)} />
 			</button>
 		</div>
 	</div>
diff --git a/src/routes/(app)/[username]/request/+page.server.js b/src/routes/(app)/[username]/request/+page.server.js
index a1d156e5..3ad76184 100644
--- a/src/routes/(app)/[username]/request/+page.server.js
+++ b/src/routes/(app)/[username]/request/+page.server.js
@@ -1,14 +1,14 @@
-import { redirect } from "@sveltejs/kit";
+import { redirect } from '@sveltejs/kit';
 import { auth, post } from '$lib/utils';
 
 export let load = ({ params }) => {
-  let { username } = params;
-} 
+	let { username } = params;
+};
 
 export const actions = {
 	default: async ({ cookies, request, url }) => {
 		let form = Object.fromEntries(await request.formData());
 		await post('/requests', form, auth(cookies));
-    throw redirect(307, url.href + '/sent');
+		throw redirect(307, url.href + '/sent');
 	}
 };
diff --git a/src/routes/(app)/[username]/request/+page.svelte b/src/routes/(app)/[username]/request/+page.svelte
index 32b03eaa..37fdae96 100644
--- a/src/routes/(app)/[username]/request/+page.svelte
+++ b/src/routes/(app)/[username]/request/+page.svelte
@@ -3,27 +3,36 @@
 	import { Icon } from '$comp';
 	import { back } from '$lib/utils';
 
-  export let data;
-  export let form;
+	export let data;
+	export let form;
 
-  let { subject, user } = data;
+	let { subject, user } = data;
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-8">Request an invoice</h1>
+<div class="container max-w-lg px-4 mx-auto">
+	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Request an invoice</h1>
 
-<div class="container max-w-lg px-4 flex mx-auto">
-  <form method="POST" use:enhance>
-    <input type="hidden" name="requester_id" value={user.id} />
-    <input type="hidden" name="recipient" value={subject.username} />
+	<form method="POST" use:enhance class="space-y-5">
+		<input type="hidden" name="requester_id" value={user.id} />
+		<input type="hidden" name="recipient" value={subject.username} />
 
-		<textarea name="memo" placeholder="(Optional) message. You might use this field to identify yourself or your order" class="w-full p-4 border rounded-xl h-48" />
+		<textarea
+			name="memo"
+			placeholder="(Optionally) use this field to describe your order"
+			class="w-full p-4 border rounded-xl h-48"
+		/>
 
-		<button type="submit" class="bg-black text-white border rounded-full px-6 py-2 font-bold">
-		Go	
-		</button>
+		<div class="w-full flex">
+			<button
+				type="submit"
+				class="bg-black text-white border rounded-full px-6 py-2 font-bold mx-auto"
+			>
+				Submit Request
+			</button>
+		</div>
 	</form>
 </div>
diff --git a/src/routes/(app)/[username]/request/sent/+page.svelte b/src/routes/(app)/[username]/request/sent/+page.svelte
index 47d930bf..1ee2cde1 100644
--- a/src/routes/(app)/[username]/request/sent/+page.svelte
+++ b/src/routes/(app)/[username]/request/sent/+page.svelte
@@ -2,8 +2,8 @@
 	import { scale } from 'svelte/transition';
 	import { Icon } from '$comp';
 
-  export let data;
-  let { subject } = data;
+	export let data;
+	let { subject } = data;
 </script>
 
 <div class="container px-4 text-center mx-auto">
@@ -12,11 +12,9 @@
 	</div>
 	<h1 class="text-3xl md:text-4xl font-bold mb-6">Request sent</h1>
 
-  <a href={`/${subject.username}`}>
-	<button
-		class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
-	>
-		Done
-	</button>
-    </a>
+	<a href={`/${subject.username}`}>
+		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
+			Done
+		</button>
+	</a>
 </div>
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
index da023c3d..f5fae1d9 100644
--- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
@@ -7,7 +7,7 @@
 	import { f, s, sat, sats } from '$lib/utils';
 	import { page } from '$app/stores';
 	import { differenceInDays, getUnixTime, sub } from 'date-fns';
-	import { goto } from '$app/navigation';
+	import { goto, invalidate } from '$app/navigation';
 
 	export let data;
 
-- 
cgit v1.2.3