send amount confirmation

6 files changed, 60 insertions, 28 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3517e187..f3a03440 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,7 +21,7 @@
   $: $rate = data.rate;
 
 	$rates = data.rates;
-	$: $selectedRate = $rate * (data.rates[data.user.currency] / data.rates.USD);
+	$: $selectedRate = data.user && $rate * (data.rates[data.user.currency] / data.rates.USD);
 
 	onMount(() => {
 		let localStorageLocale = localStorage.getItem(localeLocalStorageKey);
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index 55fe69ee..1e55867d 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -71,14 +71,17 @@
 		>
 
 		<div class="grid sm:grid-cols-2 gap-2 mt-8">
-			<button
-				class="rounded-full border py-2 px-5 font-bold hover:opacity-80 text-xl w-full mb-2"
-				on:click={() => goto(`/${user.username}/receive`)}>{$t('user.dashboard.receive')}</button
-			>
-			<button
-				class="rounded-full border py-2 px-5 font-bold hover:opacity-80 text-xl w-full mb-2"
-				on:click={() => goto('/send')}>{$t('user.dashboard.withdraw')}</button
-			>
+			<a href={`/${user.username}/receive`}>
+				<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+					>{$t('user.dashboard.receive')}</button
+				>
+			</a>
+			<a href="/send">
+				<button
+					class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+					on:click={() => goto('/send')}>{$t('user.dashboard.withdraw')}</button
+				>
+			</a>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/scan/+page.svelte b/src/routes/scan/+page.svelte
index 9fff1949..0acebb26 100644
--- a/src/routes/scan/+page.svelte
+++ b/src/routes/scan/+page.svelte
@@ -16,12 +16,21 @@
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="flex w-full mb-4">
-	<video bind:this={vid} class="w-full max-w-[600px] mx-auto" />
+<div class="flex w-full mb-4 px-4">
+  <div class="bg-black mx-auto rounded-3xl">
+	<video bind:this={vid} class="border-4 rounded-3xl border-black md:max-w-[600px]" />
+  </div>
 </div>
 
 <div class="flex w-full">
-<button class="mx-auto border rounded-full px-6 py-2 font-bold hover:opacity-80" on:click={back}>
-  Cancel
-</button>
+	<button class="mx-auto border rounded-full px-6 py-2 font-bold hover:opacity-80" on:click={back}>
+		Cancel
+	</button>
 </div>
+
+<style>
+	video {
+		transition: transform 0.3s ease-out;
+		transform: scale(1);
+	}
+</style>
diff --git a/src/routes/send/+page.svelte b/src/routes/send/+page.svelte
index fdaa1db0..8963345a 100644
--- a/src/routes/send/+page.svelte
+++ b/src/routes/send/+page.svelte
@@ -1,29 +1,32 @@
 <script>
+	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import { t } from '$lib/translations';
 	import { AppHeader, Icon, Spinner } from '$comp';
-	import { back } from '$lib/utils';
+	import { back, failure } from '$lib/utils';
 
 	export let form;
 
+	let el;
 	let placeholder = 'Address, Invoice, Username';
 	let text = placeholder,
 		loading;
 
-	let focus = () => {
-		if (text === placeholder) text = '';
-	};
+	let focus = () => text === placeholder && (text = '');
+	let keypress = (e) => e.key === 'Enter' && e.preventDefault() && el.submit();
 
 	let paste = async () => {
 		text = await navigator.clipboard.readText();
 	};
+
+	onMount(() => form?.error && failure(form.error));
 </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>
 
-<form method="POST" class="container px-4 mt-20 max-w-xl mx-auto">
+<form method="POST" class="container px-4 mt-20 max-w-xl mx-auto" bind:this={el}>
 	<div class="mb-2">
 		<label for="invoice" class="font-bold mb-1 block">Destination</label>
 		<input type="hidden" name="text" bind:value={text} />
@@ -35,6 +38,7 @@
 			contenteditable
 			bind:textContent={text}
 			on:focus={focus}
+			on:keypress={keypress}
 		>
 			{text}
 		</div>
@@ -85,7 +89,7 @@
 		overflow: hidden;
 		min-height: 48px;
 		line-height: 20px;
-		@apply block border rounded-2xl p-3 py-4 w-full bg-primary;
+		@apply block border rounded-2xl p-3 py-4 w-full;
 	}
 
 	.expandable-expandable::-webkit-resizer {
diff --git a/src/routes/send/lightning/[payreq]/+page.server.js b/src/routes/send/lightning/[payreq]/+page.server.js
index 89c03b40..885222c1 100644
--- a/src/routes/send/lightning/[payreq]/+page.server.js
+++ b/src/routes/send/lightning/[payreq]/+page.server.js
@@ -1,4 +1,4 @@
-import { redirect } from '@sveltejs/kit';
+import { invalid, redirect } from '@sveltejs/kit';
 import { btc as asset, auth, post } from '$lib/utils';
 
 export async function load({ params }) {
@@ -8,6 +8,12 @@ export async function load({ params }) {
 export const actions = {
 	default: async ({ cookies, request }) => {
 		let body = Object.fromEntries(await request.formData());
+    let { amount, confirmed } = body;
+
+		if (!confirmed) {
+			return invalid(403, { amount, confirm: true });
+		}
+
 		await post('/lightning/send', body, auth(cookies));
 		throw redirect(307, '/sent');
 	}
diff --git a/src/routes/send/lightning/[payreq]/+page.svelte b/src/routes/send/lightning/[payreq]/+page.svelte
index 47c6b763..a2a07a98 100644
--- a/src/routes/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/send/lightning/[payreq]/+page.svelte
@@ -1,14 +1,17 @@
 <script>
 	import { AppHeader, Icon, Numpad, Spinner } from '$comp';
 	import { page } from '$app/stores';
-	import { back } from '$lib/utils';
+	import { back, s } from '$lib/utils';
 	export let data;
+	export let form;
 
 	let { payreq } = $page.params;
 	let { alias } = data;
 
 	let { currency } = data.user;
-	let amount, loading;
+  let amount = form?.amount || data.amount;
+
+	let loading;
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
@@ -16,15 +19,22 @@
 </button>
 
 <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">Send to</h1>
-		<p class="text-lg text-secondary break-words">{alias}</p>
-	</div>
-	<Numpad bind:amount {currency} />
+	{#if amount}
+		<div class="text-center mb-8">
+			<h1 class="text-3xl md:text-4xl font-semibold mb-2">Send</h1>
+			<p class="text-lg text-secondary break-words mb-4">{s(amount)} sats</p>
+			<h1 class="text-xl md:text-2xl font-semibold mb-2">To</h1>
+			<p class="text-lg text-secondary break-words">{alias}</p>
+		</div>
+	{:else}
+		<Numpad bind:amount {currency} />
+	{/if}
 
 	<form method="POST">
 		<input name="payreq" value={payreq} type="hidden" />
 		<input name="amount" value={amount} type="hidden" />
+    <input name="confirmed" value={form?.confirm} type="hidden" />
+
 		<div class="flex w-full">
 			<button
 				type="submit"