request notifications

6 files changed, 59 insertions, 49 deletions

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;