show tips for sender

6 files changed, 72 insertions, 37 deletions

diff --git a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
index 432b137a..3a281728 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
@@ -4,7 +4,7 @@
 	import { toast } from '@zerodevx/svelte-toast';
 	import { browser } from '$app/environment';
 	import { t } from '$lib/translations';
-	import { f, s, sat, sats } from '$lib/utils';
+	import { fiat, f, s, sat, sats } from '$lib/utils';
 	import { goto } from '$app/navigation';
 
 	export let data;
@@ -12,10 +12,6 @@
 	$: data && ({ amount, currency, rate, received, pending, tip, user, id } = data.invoice);
 
 	toast.pop(0);
-
-	$: amountFiat = parseFloat((((received - tip) * rate) / sats).toFixed(2));
-	$: pendingFiat = parseFloat((((pending - tip) * rate) / sats).toFixed(2));
-	$: tipFiat = parseFloat(((tip * rate) / sats).toFixed(2));
 </script>
 
 <div class="container px-4 text-center mx-auto">
@@ -25,15 +21,20 @@
 	{#if received}
 		<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
 		<h2 class="text-2xl md:text-3xl font-semibold">
-			{f(amountFiat, currency)}
+			{f(fiat(received - tip, rate), currency)}
 			{#if tip}
-				+ {f(tipFiat, currency)}
+				<span class="text-lg">
+					+ {f(fiat(tip, rate), currency)}
+				</span>
 			{/if}
 		</h2>
 		<h3 class="text-secondary md:text-lg mb-6 mt-1">
-			{sat(received - tip)}
+			⚡️{s(received - tip)}
+
 			{#if tip}
-				+{sat(tip)}
+				<span class="text-lg">
+					+ ⚡️{s(tip)}
+				</span>
 			{/if}
 		</h3>
 	{/if}
@@ -41,15 +42,17 @@
 	{#if pending}
 		<h1 class="text-3xl md:text-4xl font-bold mb-6">Payment detected</h1>
 		<h2 class="text-2xl md:text-3xl font-semibold">
-			{f(pendingFiat, currency)}
+			{f(fiat(pending, rate), currency)}
 			{#if tip}
-				+ {f(tipFiat, currency)}
+				+ {f(fiat(tip, rate), currency)}
 			{/if}
 		</h2>
 		<h3 class="text-secondary md:text-lg mb-6 mt-1">
-			{sat(pending - tip)}
+			⚡️{s(pending - tip)}
 			{#if tip}
-				+{sat(tip)}
+				<span class="text-lg">
+					+ ⚡️{s(tip)}
+				</span>
 			{/if}
 		</h3>
 	{/if}
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 2988ddb5..b8a23605 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -8,7 +8,7 @@
 	export let data;
 	let { user, payment: p } = data;
 	let { username } = user;
-	let { id, amount, created, rate, type, ref, ourfee, fee, currency } = p;
+	let { id, amount, created, rate, type, ref, tip, ourfee, fee, currency } = p;
 	let a = Math.abs(amount);
 
 	fee = fee || 0;
@@ -26,12 +26,14 @@
 	{#if p.with}
 		<div>
 			<span class="text-lg text-secondary my-auto mr-2">{amount > 0 ? 'From' : 'To'}</span>
+      <a href={`/${p.with.username}`}>
 			<div class="flex">
 				<div class="my-auto">
 					<Avatar user={p.with} size={20} />
 				</div>
-				<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
+				<div class="my-auto ml-1">{p.with.username}</div>
 			</div>
+      </a>
 		</div>
 	{/if}
 
@@ -39,7 +41,19 @@
 		<span class="text-lg text-secondary">Amount</span>
 		<div>
 			{f(fiat(a, rate), currency)}
-			<span class="text-secondary">⚡️{`${s(a)}`}</span>
+			{#if tip}
+        <span class="text-lg">
+				+ {f(fiat(tip, rate), currency)}
+        </span>
+			{/if}
+      <span class="text-secondary">⚡️{`${s(a)}`}
+      
+			{#if tip}
+        <span class="text-lg">
+				+ ⚡️{s(tip)}
+        </span>
+			{/if}
+      </span>
 		</div>
 	</div>
 
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>
diff --git a/src/routes/(app)/sent/+page.svelte b/src/routes/(app)/sent/+page.svelte
index 79a0aa6e..72511487 100644
--- a/src/routes/(app)/sent/+page.svelte
+++ b/src/routes/(app)/sent/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { f, s, sat, sats } from '$lib/utils';
+	import { fiat, f, s, sat, sats } from '$lib/utils';
 	import { scale } from 'svelte/transition';
 	import { Icon } from '$comp';
 	import { toast } from '@zerodevx/svelte-toast';
@@ -7,13 +7,12 @@
 
 	export let data;
 	let { payments, user } = data;
+  let { currency, username } = user;
 
 	let payment = payments[0];
-	let { amount, rate } = payment;
+	let { amount, rate, tip } = payment;
 	amount = Math.abs(amount);
 
-	let fiat = (amount * rate) / sats;
-
 	toast.pop(0);
 </script>
 
@@ -23,12 +22,25 @@
 	</div>
 	<h1 class="text-3xl md:text-4xl font-bold mb-6">Sent!</h1>
 	<h2 class="text-2xl md:text-3xl font-semibold">
-		{f(fiat, user.currency)}
+		{f(fiat(amount, rate), currency)}
+		{#if tip}
+			<span class="text-lg">
+				+ {f(fiat(tip, rate), currency)}
+			</span>
+		{/if}
 	</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)}
+
+		{#if tip}
+			<span class="text-lg">
+				+ ⚡️{s(tip)}
+			</span>
+		{/if}
+	</h3>
 </div>
 
-<a href={`/${user.username}/payments`}>
+<a href={`/${username}/payments`}>
 	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
 </a>