show tips for sender

3 files changed, 20 insertions, 14 deletions

diff --git a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js
index 6fbe9c7c..92a754ae 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js
+++ b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js
@@ -23,7 +23,7 @@ export const actions = {
 			seen[ts] = 1;
 			setTimeout(() => delete seen[ts], 30000);
 
-			await post('/bitcoin/send', { pin, tx }, auth(cookies));
+			await post('/bitcoin/send', { pin, subtract, tx }, auth(cookies));
 		} catch (e) {
 			return fail(400, { message: e.message });
 		}
diff --git a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
index 0a6733de..b3a944f4 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
@@ -4,7 +4,7 @@
 	import { enhance } from '$app/forms';
 	import { Toggle, Slider, Icon, Numpad, Spinner } from '$comp';
 	import { page } from '$app/stores';
-	import { fiat as af, f, back, s, sat } from '$lib/utils';
+	import { fiat as toFiat, f, back, s, sat } from '$lib/utils';
 	import { pin, selectedRate } from '$lib/store';
 
 	export let data;
@@ -12,15 +12,17 @@
 
 	let { address, amount } = $page.params;
 	let { balance, currency } = data.user;
-	let loading, submit, fiat, confirmed, feeRate, min, max, fee, stale, subtract;
+	let loading, submit, fiat, confirmed, feeRate, min, max, fee, ourfee, stale, subtract, adjusting;
 
 	let toggle = () => (loading = true);
+	let toggleAdjusting = () => (adjusting = !adjusting);
 
 	$: update(form);
 	let update = () => {
 		loading = false;
 		if (form?.message?.includes('pin')) $pin = undefined;
-		if (form) ({ min, max, feeRate, fee, subtract } = form);
+		if (form) ({ min, max, feeRate, fee, ourfee, subtract } = form);
+    if (!ourfee) ourfee = 0;
 		if (feeRate) confirmed = true;
 		stale = false;
 	};
@@ -57,22 +59,26 @@
 <div class="container px-4 mt-20 max-w-xl mx-auto space-y-5 text-center">
 	<h1 class="text-3xl md:text-4xl font-semibold mb-2">{$t('payments.send')}</h1>
 
-	<div class="text-lg text-secondary">{address}</div>
+	<div class="text-lg text-secondary break-all">{address}</div>
 
 	{#if confirmed}
 		<div class="text-center">
 			<h2 class="text-2xl md:text-3xl font-semibold">
-				{f(af(amount, $selectedRate), currency)}
+				{f(toFiat(amount, $selectedRate), currency)}
 			</h2>
-			<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(amount)}</h3>
+			<h3 class="text-secondary md:text-lg mb-6 mt-1">⚡️{s(amount)}</h3>
 		</div>
 
 		<div class="text-center">
 			<h2 class="text-secondary mb-5 text-lg">with fee</h2>
-			<h2 class="text-xl font-semibold">
-				{f(af(fee, $selectedRate), currency)}
-			</h2>
-			<h3 class="text-secondary mb-6 mt-1">{sat(fee)}</h3>
+
+			<div class="relative">
+				<h2 class="text-xl font-semibold">
+					{f(toFiat(fee + ourfee, $selectedRate), currency)}
+				</h2>
+				<h3 class="text-secondary mb-6 mt-1">⚡️{s(fee + ourfee)}</h3>
+        <button class="absolute right-1/4 top-0 text-secondary p-4" on:click={toggleAdjusting}><Icon icon="settings" style="opacity-30" /></button>
+			</div>
 		</div>
 	{:else}
 		<Numpad bind:amount bind:fiat {currency} {submit} />
@@ -88,7 +94,7 @@
 		<input name="stale" value={stale} type="hidden" />
 		<input name="subtract" value={subtract} type="hidden" />
 
-		{#if confirmed}
+		{#if confirmed && adjusting}
 			<div class="relative mt-10 mb-20">
 				<div class="absolute top-5 left-0 text-secondary">Slower (~40 blocks)</div>
 				<div class="absolute top-5 right-0 text-secondary">Faster (~1 block)</div>
@@ -98,7 +104,7 @@
 				<div class="my-auto">
 					<Toggle id="subtract" checked={subtract} bind:value={subtract} />
 				</div>
-				<label for="subtract" class="text-secondary text-lg my-auto mb-2">taken from amount</label>
+				<label for="subtract" class="text-secondary text-lg my-auto mb-2">Take fee from amount</label>
 			</div>
 		{/if}
 
diff --git a/src/routes/(app)/send/pot/[name]/[...amount]/+page.svelte b/src/routes/(app)/send/pot/[name]/[...amount]/+page.svelte
index bb11ddde..da761cc2 100644
--- a/src/routes/(app)/send/pot/[name]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/pot/[name]/[...amount]/+page.svelte
@@ -16,7 +16,7 @@
 	let submit = () => (loading = true);
 	$: update(form);
 	let update = () => {
-		if (form?.message.includes('pin')) $pin = undefined;
+		if (form?.message?.includes('pin')) $pin = undefined;
 		loading = false;
 	};
 </script>