send amount confirmation

3 files changed, 34 insertions, 14 deletions

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"