clean up request flow, update translations and deps

17 files changed, 79 insertions, 87 deletions

diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 35606958..932ec777 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -24,7 +24,7 @@
 					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
 						<div class="mx-auto flex">
 							<div style="mr-1">⚡️</div>
-							<div>Lightning</div>
+							<div>{$t('user.lightning')}</div>
 						</div>
 					</button>
 				</a>
@@ -35,7 +35,7 @@
 					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
 						<div class="mx-auto flex">
 							<img src="/images/bitcoin.svg" class="w-5 my-auto mr-1" />
-							<div>Bitcoin</div>
+							<div>{$t('user.bitcoin')}</div>
 						</div>
 					</button>
 				</a>
@@ -47,7 +47,7 @@
 						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
 							<div class="mx-auto flex">
 								<Icon icon="support" style="mr-1" />
-								<div>Invoice</div>
+								<div>{$t('user.invoice')}</div>
 							</div>
 						</button>
 					</a>
@@ -71,13 +71,13 @@
 
 			{#if user?.username === subject.username}
 				<p class="text-secondary mb-1">
-					This <a
+        {$t("user.this")} <a
 						href="https://lightningaddress.com"
 						class="underline"
 						target="_blank"
-						rel="noreferrer">lightning address</a
-					> is like an email for bitcoin. You can publish it on your website or business cards and use
-					it multiple times.
+      rel="noreferrer">{$t("user.lightningAddress")}</a
+    > {$t("user.likeAnEmail")}
+					
 				</p>
 			{/if}
 		</div>
diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index eb4b99ae..112162ad 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -71,7 +71,7 @@
 	<div class="grid sm:grid-cols-2 gap-2 text-lg">
 		<a href="/send">
 			<button class="rounded-full border py-4 px-5 font-bold hover:opacity-80 w-full"
-				>{$t('user.dashboard.withdraw')}</button
+				>{$t('user.dashboard.send')}</button
 			>
 		</a>
 		<a href={`/${user.username}/receive`}>
@@ -110,7 +110,7 @@
 								<div class="flex">
 									<Avatar user={requester} size={20} />
 									<div class="my-auto text-left">
-										<p class="text-secondary">Awaiting</p>
+                    <p class="text-secondary">{$t("transactions.awaiting")}</p>
 										<p class="ml-1 text-lg break-words">{requester.username}</p>
 									</div>
 								</div>
@@ -131,26 +131,26 @@
 
 	<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>
+			<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>
 						<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
-			>
+							<button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
+								>Invoice</button
+							>
 						</div>
+					</div>
 				</div>
-			</div>
-      </a>
+			</a>
 		{/each}
 	</div>
 </div>
diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.svelte b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
index cb69b06a..9e9f4f66 100644
--- a/src/routes/(app)/[username]/receive/[...param]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
@@ -43,7 +43,7 @@
 			class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold
 				opacity-100 hover:opacity-80"
 		>
-			{amount ? 'Next' : "Sender's choice"}
+			{amount ? $t("transactions.next") : $t("transactions.sendersChoice")}
 		</button>
 	</div>
 </form>
diff --git a/src/routes/(app)/[username]/request/+page.server.js b/src/routes/(app)/[username]/request/+page.server.js
index 44c9d3a7..4515666f 100644
--- a/src/routes/(app)/[username]/request/+page.server.js
+++ b/src/routes/(app)/[username]/request/+page.server.js
@@ -2,7 +2,7 @@ import { redirect } from '@sveltejs/kit';
 import { auth, post } from '$lib/utils';
 
 export let load = ({ locals }) => {
-  console.log("YO")
+	console.log('YO');
 	if (!locals.user) throw redirect(307, '/login');
 };
 
diff --git a/src/routes/(app)/[username]/request/+page.svelte b/src/routes/(app)/[username]/request/+page.svelte
index 1e62ea00..bbbb514c 100644
--- a/src/routes/(app)/[username]/request/+page.svelte
+++ b/src/routes/(app)/[username]/request/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { t } from '$lib/translations';
 	import { enhance } from '$app/forms';
 	import { Icon } from '$comp';
 	import { back } from '$lib/utils';
@@ -14,7 +15,7 @@
 </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">Request an invoice</h1>
+  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">{$t("transactions.requestAnInvoice")}</h1>
 
 	<form action="?/create" method="POST" use:enhance class="space-y-5">
 		<input type="hidden" name="requester_id" value={user.id} />
@@ -22,7 +23,7 @@
 
 		<textarea
 			name="memo"
-			placeholder="Use this field to describe your order"
+   placeholder={$t("transactions.describeOrder")}
 			class="w-full p-4 border rounded-xl h-48"
 		/>
 
@@ -31,7 +32,7 @@
 				type="submit"
 				class="bg-black text-white border rounded-full px-6 py-2 font-bold mx-auto"
 			>
-				Submit
+        {$t("transactions.submit")}
 			</button>
 		</div>
 	</form>
diff --git a/src/routes/(app)/[username]/request/[id]/+page.server.js b/src/routes/(app)/[username]/request/[id]/+page.server.js
index 8245bef6..7beabfe6 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.server.js
+++ b/src/routes/(app)/[username]/request/[id]/+page.server.js
@@ -10,10 +10,13 @@ export let load = async ({ cookies, depends, locals: { user }, params }) => {
 
 	if (invoice) {
 		let { amount, received, uuid } = invoice;
-		if ((received && !amount) || received >= amount) throw redirect(307, `/send/${uuid}`);
+		if (
+			request.recipient.username === user.username &&
+			((received && !amount) || received >= amount)
+		)
+			throw redirect(307, `/invoice/${uuid}/paid`);
 
-		if (request.requester.username === user.username)
-			throw redirect(307, `/send/${request.invoice.uuid}`);
+		if (request.requester.username === user.username) throw redirect(307, `/send/${uuid}`);
 	}
 
 	return { request };
diff --git a/src/routes/(app)/[username]/request/[id]/+page.svelte b/src/routes/(app)/[username]/request/[id]/+page.svelte
index 0f979284..7dd10e09 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/request/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { t } from '$lib/translations';
 	import { Avatar } from '$comp';
 	import { f, sat, sats } from '$lib/utils';
 	import { request as req, requestRedirect } from '$lib/store';
@@ -20,7 +21,7 @@
 	<div class="text-center mb-8 space-y-5">
 		{#if request.recipient_id === user.id}
 			<p class="text-5xl break-words">
-				<span class="text-xl md:text-2xl">Sent invoice to</span>
+				<span class="text-xl md:text-2xl">{$t('transactions.sentInvoiceTo')}</span>
 			</p>
 			<div class="flex p-1 gap-2 justify-center">
 				<Avatar user={request.requester} size={20} />
@@ -34,7 +35,7 @@
 			</div>
 		{:else}
 			<p class="text-5xl break-words">
-				<span class="text-xl md:text-2xl">Sent request to</span>
+				<span class="text-xl md:text-2xl">{$t('transactions.sentRequestTo')}</span>
 			</p>
 			<div class="flex p-1 gap-2 justify-center">
 				<Avatar user={request.recipient} size={20} />
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index 24e26566..4551ccec 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -165,7 +165,7 @@
 				type="button"
 				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
 				on:click={() => select('profile')}
-        on:keydown={() => select('profile')}>{$t("user.settings.select")}</button
+				on:keydown={() => select('profile')}>{$t('user.settings.select')}</button
 			>
 			<input
 				type="file"
@@ -220,7 +220,7 @@
 		type="button"
 		class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
 		on:click={() => select('banner')}
-      on:keydown={() => select('banner')}>{$t("user.settings.select")}</button
+		on:keydown={() => select('banner')}>{$t('user.settings.select')}</button
 	>
 	<input
 		type="file"
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
index fc83e6f3..f4c04329 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -126,7 +126,9 @@
 <div>
 	<input type="hidden" name="newpin" value={pin} />
 
-	<span class="font-bold mb-1">{verifying ? $t("user.settings.verifyPIN"): $t("user.settings.securityPIN")}</span>
+	<span class="font-bold mb-1"
+		>{verifying ? $t('user.settings.verifyPIN') : $t('user.settings.securityPIN')}</span
+	>
 	<p class="text-secondary mb-1">
 		{$t('user.settings.securityPINDescription')}
 	</p>
@@ -157,7 +159,8 @@
 		</div>
 	{:else}
 		<button type="button" class="primary" on:click={togglePin}
-			><Icon icon="lock" style="mr-1" /> {user.haspin ? $t("user.settings.disablePIN") : $t("user.settings.enablePIN")}</button
+			><Icon icon="lock" style="mr-1" />
+			{user.haspin ? $t('user.settings.disablePIN') : $t('user.settings.enablePIN')}</button
 		>
 	{/if}
 </div>
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
index 7f4410cc..48e710fe 100644
--- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
@@ -15,10 +15,10 @@
 	let change = ({ target: { value } }) => goto(value);
 
 	let presets = [
-		{ title: 'Day', start: sub(new Date(), { days: 1 }), end: null },
-		{ title: 'Week', start: sub(new Date(), { days: 7 }), end: null },
-		{ title: 'Month', start: sub(new Date(), { months: 1 }), end: null },
-		{ title: 'All', start: sub(new Date(), { years: 5 }), end: null }
+		{ title: $t('transactions.day'), start: sub(new Date(), { days: 1 }), end: null },
+		{ title: $t('transactions.week'), start: sub(new Date(), { days: 7 }), end: null },
+		{ title: $t('transactions.month'), start: sub(new Date(), { months: 1 }), end: null },
+		{ title: $t('transactions.all'), start: sub(new Date(), { years: 5 }), end: null }
 	];
 
 	$: selection = start
@@ -66,42 +66,23 @@
 
 <div class="mt-24 mb-20">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
-		{$t('user.transactions.header')}
+		{$t('transactions.header')}
 	</h1>
 
 	<div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
-		<div class="flex text-md text-secondary flex-wrap relative">
-			<Icon icon="clock" style="absolute left-4 top-4 opacity-50 md:hidden" />
-			<select
-				class="md:hidden bg-white border rounded-full text-center w-36 h-14"
-				on:change={change}
-			>
-				{#each presets as { start, end, title }, i}
-					<option
-						selected={selection === i}
-						value={`/${user.username}/transactions/${getUnixTime(start) + '/'}1`}>{title}</option
-					>
-				{/each}
-			</select>
-			<div class="hidden md:block flex">
+		<div class="flex text-md text-secondary relative">
+			<div class="mx-auto flex justify-center w-full gap-1">
 				{#each presets as { start, end, title }, i}
 					<a
 						class:active={selection === i}
 						href={`/${user.username}/transactions/${getUnixTime(start) + '/'}1`}
 					>
-						<button class="rounded-full border px-4 hover:opacity-80 h-14 w-20">
+						<button class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px]">
 							<div class="my-auto">{title}</div>
 						</button>
 					</a>
 				{/each}
 			</div>
-			<button
-				class="ml-auto rounded-full border px-4 w-36 hover:opacity-80 flex h-14"
-				on:click={csv}
-			>
-				<Icon icon="save" style="opacity-50 mr-2 my-auto" />
-				<div class="my-auto">Export</div>
-			</button>
 		</div>
 
 		<div class="flex flex-wrap justify-center mb-8">
@@ -178,9 +159,13 @@
 					</div>
 				</div>
 			{:else}
-				<p class="text-secondary text-lg text-center">{$t('user.transactions.empty')}</p>
+				<p class="text-secondary text-lg text-center">{$t('transactions.empty')}</p>
 			{/each}
 		</div>
+		<button class="ml-auto rounded-full border py-2 px-4 w-36 hover:opacity-80 flex mx-auto" on:click={csv}>
+			<Icon icon="save" style="opacity-50 mr-2 my-auto" />
+			<div class="my-auto">{$t('transactions.export')}</div>
+		</button>
 	</div>
 </div>
 
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index b0ec9a6a..c2c28a6c 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -79,7 +79,7 @@
 
 <div class="container mx-auto max-w-lg px-4 space-y-2 sm:space-y-5">
 	<div>
-		<h1 class="text-secondary text-center text-xl">Please pay</h1>
+    <h1 class="text-secondary text-center text-xl">{$t("transactions.pleasePay")}</h1>
 
 		<div class="flex w-full">
 			<div class="mx-auto">
diff --git a/src/routes/(app)/ln/[lnurl]/+page.svelte b/src/routes/(app)/ln/[lnurl]/+page.svelte
index 95534759..8fb915e8 100644
--- a/src/routes/(app)/ln/[lnurl]/+page.svelte
+++ b/src/routes/(app)/ln/[lnurl]/+page.svelte
@@ -39,7 +39,7 @@
 				{#if loading}
 					<Spinner />
 				{:else}
-          {$t('transactions.send')}
+					{$t('transactions.send')}
 				{/if}
 			</button>
 		</div>
diff --git a/src/routes/(app)/send/[...text]/+page.server.js b/src/routes/(app)/send/[...text]/+page.server.js
index fcfb33a3..dd2619ac 100644
--- a/src/routes/(app)/send/[...text]/+page.server.js
+++ b/src/routes/(app)/send/[...text]/+page.server.js
@@ -8,7 +8,7 @@ let parse = async (t, host) => {
 
 	let amount, user, uuid;
 
-  t = t.toLowerCase();
+	t = t.toLowerCase();
 
 	t.startsWith('bitcoin:') &&
 		({
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 7c81bd74..e620fef4 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { page } from '$app/stores';
-    import { fly } from 'svelte/transition';
+	import { fly } from 'svelte/transition';
 	import { enhance } from '$app/forms';
 	import { tick } from 'svelte';
 	import { browser } from '$app/environment';
@@ -17,7 +17,7 @@
 	let w;
 
 	let el, textarea, text;
-	let placeholder = 'Paste a bitcoin address, lightning invoice or coinos username';
+	let placeholder = $t('user.send.placeholder');
 
 	$: $page && setTimeout(() => w > 800 && textarea?.focus(), 0);
 	let keypress = (e) => e.key === 'Enter' && (e.preventDefault() || el.click());
@@ -31,9 +31,9 @@
 
 <AppHeader {data} />
 <div class="container px-4 max-w-lg mx-auto space-y-5 mt-20">
-  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
-				{$t('transactions.send')}
-  </h1>
+	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
+		{$t('transactions.send')}
+	</h1>
 
 	<form method="POST" use:enhance>
 		{#if form?.error}
@@ -60,7 +60,7 @@
 					class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1"
 				>
 					<Icon icon="scan" style="mr-2 w-6 my-auto" />
-					<div class="my-auto">Scan</div>
+					<div class="my-auto">{$t('user.send.scan')}</div>
 				</button>
 			</a>
 
@@ -70,7 +70,7 @@
 				on:click={paste}
 			>
 				<Icon icon="paste" style="mr-2 w-6 my-auto" />
-				<div class="my-auto">Paste</div>
+				<div class="my-auto">{$t('user.send.paste')}</div>
 			</button>
 
 			<button
@@ -80,14 +80,14 @@
 					? 'opacity-50'
 					: 'opacity-100 hover:opacity-80'} bg-black text-white border rounded-full px-6 py-2 font-bold"
 			>
-				Next
+				{$t('user.send.next')}
 			</button>
 		</div>
 	</form>
 
 	{#if contacts.length}
 		<div class="space-y-5">
-			<h1 class="px-3 md:px-0 text-xl font-semibold mt-10">Contacts</h1>
+			<h1 class="px-3 md:px-0 text-xl font-semibold mt-10">{$t('user.send.contacts')}</h1>
 			<div>
 				{#each contacts as c}
 					<a href={`/send/user/${c.username}`}>
diff --git a/src/routes/(app)/send/[uuid=uuid]/+page.svelte b/src/routes/(app)/send/[uuid=uuid]/+page.svelte
index 6c54f487..23e8a73e 100644
--- a/src/routes/(app)/send/[uuid=uuid]/+page.svelte
+++ b/src/routes/(app)/send/[uuid=uuid]/+page.svelte
@@ -46,15 +46,14 @@
 <div class="container px-4 mt-20 max-w-xl mx-auto">
 	{#if amount}
 		<div class="text-center mb-8">
-      <h1 class="text-xl md:text-2xl text-secondary mb-2">
-        
-					{$t('transactions.send')}
-        </h1>
+			<h1 class="text-xl md:text-2xl text-secondary mb-2">
+				{$t('transactions.send')}
+			</h1>
 			<p class="text-6xl break-words mb-4">
 				{fiat ? f(amountFiat, currency) : '⚡️' + s(amount)}
 			</p>
 
-			<h1 class="text-xl md:text-2xl text-secondary mb-2">to</h1>
+      <h1 class="text-xl md:text-2xl text-secondary mb-2">{$t("transactions.to")}</h1>
 
 			<div class="flex p-1 gap-2 justify-center">
 				<Avatar user={recipient} size={'20'} />
@@ -91,7 +90,7 @@
 					class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24"
 					on:click={setAmount}
 				>
-					Next
+        {$t("transactions.next")}
 				</button>
 			{/if}
 		</div>
diff --git a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
index 87401749..f2643918 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
@@ -33,7 +33,7 @@
 
 <div class="container px-4 mt-20 max-w-xl mx-auto">
 	<div class="text-center mb-8">
-    <h1 class="text-3xl md:text-4xl font-semibold mb-2">{$t("transactions.sendTo")}</h1>
+		<h1 class="text-3xl md:text-4xl font-semibold mb-2">{$t('transactions.sendTo')}</h1>
 		<p class="text-lg text-secondary">{address}</p>
 	</div>
 	<Numpad bind:amount {currency} />
@@ -51,7 +51,7 @@
 				{#if loading}
 					<Spinner />
 				{:else}
-          {$t('transactions.send')}
+					{$t('transactions.send')}
 				{/if}
 			</button>
 		</div>
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
index 46dd71d1..bba2ea45 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
@@ -42,7 +42,7 @@
 			<p class="text-6xl break-words mb-4">
 				{s(amount)} <span class="text-xl md:text-2xl text-secondary">sats</span>
 			</p>
-        <h1 class="text-xl md:text-2xl text-secondary mb-2">{$t('transactions.to')}</h1>
+			<h1 class="text-xl md:text-2xl text-secondary mb-2">{$t('transactions.to')}</h1>
 			<p class="text-6xl break-words">{alias}</p>
 		</div>