restoring requests

16 files changed, 69 insertions, 67 deletions

diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 5d72bd45..e95e5dde 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -8,9 +8,11 @@
 
 <div class="space-y-2">
 	<div class="text-5xl font-bold tabular-nums">
-		{$animatedRate
-			? f((user.balance * $animatedRate) / sats, user.currency)
-			: $t('user.dashboard.fetchingRate')}
+		{#if isNaN($animatedRate)}
+			<div class="text-gray-200">---</div>
+		{:else}
+			{f((user.balance * $animatedRate) / sats, user.currency)}
+		{/if}
 	</div>
 
 	<div class="text-secondary text-2xl">
diff --git a/src/lib/invoice.js b/src/lib/invoice.js
index 4c487172..5b939079 100644
--- a/src/lib/invoice.js
+++ b/src/lib/invoice.js
@@ -6,7 +6,7 @@ export default async ({ cookies, request, url }) => {
 
 	let rates = await get('/rates');
 	let amount = parseInt(form.get('amount'));
-	let request_id = parseInt(form.get('request_id'));
+	let request_id = form.get('request_id');
 
 	let invoice = {
 		amount,
diff --git a/src/lib/socket.js b/src/lib/socket.js
index 986fc268..ce3cbe4b 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -73,7 +73,7 @@ export const messages = (data) => ({
 		if (amount > 0) {
 			success(`${data.confirmed ? 'Received' : 'Detected'} ${sat(amount)}!`);
 		} else {
-			success(`Sent ${sat(amount)}!`);
+			// success(`Sent ${sat(amount)}!`);
 		}
 	},
 
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 3a644e1f..24991100 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -82,7 +82,7 @@ export function reverseFormat(val, locale) {
 	return Number.isNaN(reversedVal) ? 0 : +reversedVal;
 }
 
-export let protectedRoutes = [/customers/, /dashboard/, /settings/, /payments/, /request/];
+export let protectedRoutes = [/customers/, /dashboard/, /settings/, /payments/];
 
 export const success = (m) => {
 	toast.pop();
@@ -171,7 +171,7 @@ export const sat = (s) => {
 export const sats = 100000000;
 
 export const back = () => browser && history.go(-1);
-export const focus = (el) => setTimeout(() => el.focus(), 1);
+export const focus = (el) => browser && screen.width > 1280 && setTimeout(() => el.focus(), 1);
 
 export const sleep = (n) => new Promise((r) => setTimeout(r, n));
 export const wait = async (f, n = 100, s = 300) => {
diff --git a/src/locales/en.json b/src/locales/en.json
index b39571f6..7e7c235b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -277,7 +277,7 @@
 		"pay": "Pay",
 		"requesting": "is requesting",
 		"sentInvoiceTo": "Sent invoice to",
-		"sentRequestTo": "Sent request to",
+		"sentRequestTo": "Request sent!",
 		"pleasePay": "Please pay",
 		"day": "Day",
 		"week": "Week",
@@ -287,7 +287,7 @@
 		"invoice": "Invoice",
 		"readyToPay": "is ready to pay",
 		"describeOrder": "Use this field to describe your order",
-		"requestAnInvoice": "Request an invoice",
+		"requestAnInvoice": "Request Invoice",
 		"submit": "Submit",
 		"isRequesting": "is requesting",
 		"invoiceFrom": "Invoice from",
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 6dacf2ce..f3488e4b 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -120,51 +120,29 @@
 						</button>
 					</a>
 				</div>
-			{/if}
-			{#if !subject.anon && subject.username !== user?.username}
+
 				<div class="w-full flex">
-					<a href={user ? `/send/${subject.username}` : `/${subject.username}/receive`} class="mx-auto">
+					<a href={`/${subject.username}/request`} class="mx-auto">
 						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
 							<div class="mx-auto flex">
-								<Icon icon="send" style="mr-2" />
-								<div class="mt-1">{$t('user.pay')}</div>
+								<Icon icon="numpad" style="mr-2 my-auto" />
+								<div class="mt-1 my-auto">{$t('payments.requestAnInvoice')}</div>
 							</div>
 						</button>
 					</a>
 				</div>
 			{/if}
-
-			{#if user?.id === subject.id}
+			{#if !subject.anon && subject.username !== user?.username}
 				<div class="w-full flex">
-					<a href={`/send`} class="mx-auto">
+					<a href={user ? `/send/${subject.username}` : `/${subject.username}/receive`} class="mx-auto">
 						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
 							<div class="mx-auto flex">
 								<Icon icon="send" style="mr-2" />
-								<div class="mt-1">{$t('user.dashboard.send')}</div>
-							</div>
-						</button>
-					</a>
-				</div>
-				<div class="w-full flex">
-					<a href={`/${subject.username}/receive`} class="mx-auto">
-						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
-							<div class="mx-auto flex">
-								<Icon icon="numpad" style="mr-2" />
-								<div class="mt-1">{$t('user.dashboard.receive')}</div>
+								<div class="mt-1">{$t('user.pay')}</div>
 							</div>
 						</button>
 					</a>
 				</div>
-				<!-- <div class="w-full flex"> -->
-				<!-- 	<a href={`/${subject.username}/receive`} class="mx-auto"> -->
-				<!-- 		<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"> -->
-				<!-- 			<div class="mx-auto flex"> -->
-				<!-- 				<Icon icon="support" style="mr-2" /> -->
-				<!-- 				<div class="mt-1">{$t('user.messages')}</div> -->
-				<!-- 			</div> -->
-				<!-- 		</button> -->
-				<!-- 	</a> -->
-				<!-- </div> -->
 			{/if}
 		</div>
 	</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.server.js b/src/routes/(app)/[username]/(profile)/+page.server.js
index c29ed7df..553e2559 100644
--- a/src/routes/(app)/[username]/(profile)/+page.server.js
+++ b/src/routes/(app)/[username]/(profile)/+page.server.js
@@ -1,6 +1,6 @@
-import { get } from '$lib/utils';
+import { auth, get } from '$lib/utils';
 
-export async function load({ params, parent, url }) {
+export async function load({ cookies, params, parent, url }) {
 	let { subject } = await parent();
 	let { pubkey } = subject;
 
@@ -16,5 +16,7 @@ export async function load({ params, parent, url }) {
 		e.seen = e.created_at;
 	});
 
-	return { events };
+  let { requests } = await get('/requests', auth(cookies));
+
+	return { events, requests };
 }
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 1cf525a0..ae8add63 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -1,10 +1,9 @@
 <script>
-	import { Balance, Feed } from '$comp';
+	import { Avatar, Balance, Feed } from '$comp';
 	import { t } from '$lib/translations';
 
 	export let data;
-	let { events, subject, user } = data;
-	let v;
+	let { events, requests, subject, user } = data;
 </script>
 
 <div class="flex justify-center lg:justify-start">
@@ -12,3 +11,28 @@
 		<Balance {user} />
 	{/if}
 </div>
+
+<div>
+	{#each requests as { id, invoice, memo, requester: r }}
+		<a href={`/${user.username}/receive/${id}`}>
+			<div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
+				<div class="flex">
+					<div>
+						<div class="flex">
+							<Avatar user={r} size={20} />
+							<div class="my-auto text-left">
+								<p class="ml-1 text-lg break-words">{r.username}</p>
+								<p class="ml-1 text-secondary">{memo}</p>
+							</div>
+						</div>
+					</div>
+					<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+						<button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
+							>Invoice</button
+						>
+					</div>
+				</div>
+			</div>
+		</a>
+	{/each}
+</div>
diff --git a/src/routes/(app)/[username]/request/+page.server.js b/src/routes/(app)/[username]/(profile)/request/+page.server.js
index b4a1e941..2c1d6bde 100644
--- a/src/routes/(app)/[username]/request/+page.server.js
+++ b/src/routes/(app)/[username]/(profile)/request/+page.server.js
@@ -2,10 +2,10 @@ import { redirect } from '@sveltejs/kit';
 import { auth, post } from '$lib/utils';
 
 export const actions = {
-	create: async ({ cookies, request, url }) => {
+	create: async ({ cookies, params, request, url }) => {
 		let form = Object.fromEntries(await request.formData());
 		let { id, requester } = await post('/requests', form, auth(cookies));
-		throw redirect(307, `/${requester.username}/request/${id}`);
+		throw redirect(307, `/${params.username}/request/${id}`);
 	},
 
 	delete: async ({ cookies, request }) => {
diff --git a/src/routes/(app)/[username]/request/+page.svelte b/src/routes/(app)/[username]/(profile)/request/+page.svelte
index 173c2c05..75117ff4 100644
--- a/src/routes/(app)/[username]/request/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/request/+page.svelte
@@ -2,17 +2,12 @@
 	import { t } from '$lib/translations';
 	import { enhance } from '$app/forms';
 	import { Icon } from '$comp';
-	import { back } from '$lib/utils';
 
 	export let data;
 
 	let { subject, user } = data;
 </script>
 
-<button class="ml-5 md:ml-20 mt-10 hover:opacity-80" on:click={back}>
-	<Icon icon="arrow-left" style="w-10" />
-</button>
-
 <div class="container max-w-lg px-4 mx-auto mt-10 space-y-5">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
 		{$t('payments.requestAnInvoice')}
diff --git a/src/routes/(app)/[username]/request/sent/+page.svelte b/src/routes/(app)/[username]/(profile)/request/sent/+page.svelte
index 4995bfb2..4995bfb2 100644
--- a/src/routes/(app)/[username]/request/sent/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/request/sent/+page.svelte
diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.server.js b/src/routes/(app)/[username]/receive/[...param]/+page.server.js
index 1e57aa67..cdd89c8b 100644
--- a/src/routes/(app)/[username]/receive/[...param]/+page.server.js
+++ b/src/routes/(app)/[username]/receive/[...param]/+page.server.js
@@ -2,7 +2,7 @@ import { auth, get } from '$lib/utils';
 import invoice from '$lib/invoice';
 
 export let load = async ({ cookies, params }) => {
-	let id = parseInt(params.param);
+	let id = params.param;
 
 	let request;
 	if (id) ({ request } = await get(`/request/${id}`, auth(cookies)));
diff --git a/src/routes/(app)/[username]/request/[id]/+page.server.js b/src/routes/(app)/[username]/request/[id]/+page.server.js
index 542a3ccb..5fb90bf3 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.server.js
+++ b/src/routes/(app)/[username]/request/[id]/+page.server.js
@@ -1,8 +1,10 @@
 import { auth, get } from '$lib/utils';
 import { redirect } from '@sveltejs/kit';
 
-export let load = async ({ cookies, depends, locals: { user }, params }) => {
+export let load = async ({ cookies, depends, params, parent }) => {
 	depends('app:invoice');
+
+  let { user } = await parent();
 	if (!user) throw redirect(307, '/login');
 
 	let { request } = await get(`/request/${params.id}`, auth(cookies));
@@ -19,5 +21,6 @@ export let load = async ({ cookies, depends, locals: { user }, params }) => {
 		if (request.requester.username === user.username) throw redirect(307, `/send/${id}`);
 	}
 
+
 	return { request };
 };
diff --git a/src/routes/(app)/[username]/request/[id]/+page.svelte b/src/routes/(app)/[username]/request/[id]/+page.svelte
index b061886e..b8dedbfc 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/request/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script>
+	import { scale } from 'svelte/transition';
 	import { t } from '$lib/translations';
-	import { Avatar } from '$comp';
+	import { Avatar, Icon } from '$comp';
 	import { f, sat, sats } from '$lib/utils';
 	import { request as req, requestRedirect } from '$lib/store';
 	import { onMount } from 'svelte';
@@ -17,10 +18,10 @@
 	onMount(() => req.set());
 </script>
 
-<div class="container px-4 mt-20 max-w-xl mx-auto space-y-8">
+<div class="container px-4 max-w-xl mx-auto space-y-8">
 	<div class="text-center mb-8 space-y-5">
 		{#if request.recipient_id === user.id}
-			<p class="text-5xl break-words">
+			<p class="text-4xl break-words">
 				<span class="text-xl md:text-2xl">{$t('payments.sentInvoiceTo')}</span>
 			</p>
 			<div class="flex p-1 gap-2 justify-center">
@@ -34,13 +35,12 @@
 				<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(amount)}</h3>
 			</div>
 		{:else}
-			<p class="text-5xl break-words">
-				<span class="text-xl md:text-2xl">{$t('payments.sentRequestTo')}</span>
-			</p>
-			<div class="flex p-1 gap-2 justify-center">
-				<Avatar user={request.recipient} size={20} />
-				<p class="text-4xl break-words my-auto">{request.recipient.username}</p>
+			<div class="flex w-full max-w-[200px] mx-auto py-20" in:scale={{ start: 0.5 }}>
+				<Icon icon="check" style="mx-auto" />
 			</div>
+			<p class="text-3xl">
+				{$t('payments.sentRequestTo')}
+			</p>
 		{/if}
 	</div>
 </div>
@@ -49,4 +49,4 @@
 	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
 </a>
 
-<div class="fixed bottom-10 w-full text-center">{$t('payments.tapAnywhere')}</div>
+<div class="fixed bottom-10 left-0 text-center w-full">{$t('payments.tapAnywhere')}</div>
diff --git a/src/routes/(app)/login/+page.server.js b/src/routes/(app)/login/+page.server.js
index 27607ff1..a6a7120a 100644
--- a/src/routes/(app)/login/+page.server.js
+++ b/src/routes/(app)/login/+page.server.js
@@ -3,7 +3,7 @@ import { login } from '$lib/utils';
 
 export const load = async ({ parent }) => {
 	let { user } = await parent();
-	if (user?.pubkey) throw redirect(307, `/${user.username}/dashboard`);
+	if (user?.pubkey) throw redirect(307, `/${user.username}`);
 };
 
 export const actions = {
@@ -20,6 +20,6 @@ export const actions = {
 			return fail(400, { error: 'Login failed', message: e.message, ...form });
 		}
 
-		throw redirect(303, loginRedirect || `/${user.username}/dashboard`);
+		throw redirect(303, loginRedirect || `/${user.username}`);
 	}
 };
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.server.js b/src/routes/(app)/send/lightning/[payreq]/+page.server.js
index 21bc9c71..90e6c0cc 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.server.js
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.server.js
@@ -15,8 +15,6 @@ export const actions = {
 			let body = Object.fromEntries(await request.formData());
 			let { amount, confirmed } = body;
 
-			console.log('AMOUNT', amount);
-
 			if (!confirmed) {
 				return fail(400, { amount, confirm: true });
 			}