fee sliderfee-slider

6 files changed, 29 insertions, 21 deletions

diff --git a/src/components/Lnurlp.svelte b/src/components/Lnurlp.svelte
index 923441a4..ab0c50ce 100644
--- a/src/components/Lnurlp.svelte
+++ b/src/components/Lnurlp.svelte
@@ -8,7 +8,7 @@
 	let { currency } = data.user;
 	let { minSendable, maxSendable, callback, metadata } = data;
 
-	let amount = Math.round(minSendable/1000),
+	let amount = Math.round(minSendable / 1000),
 		loading;
 	let submit = () => (loading = true);
 </script>
diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte
index 84482c9d..3c94d127 100644
--- a/src/components/Slider.svelte
+++ b/src/components/Slider.svelte
@@ -10,9 +10,9 @@
 	type="range"
 	{min}
 	{max}
- bind:value={value}
+	bind:value
 	class="px-0 py-0 my-5"
-	style="--bgPercent: {(value - min) * 100/(max - min)}%;"
+	style="--bgPercent: {((value - min) * 100) / (max - min)}%;"
 	on:input={handle}
 />
 
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 1d064c9a..7b10c638 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -150,7 +150,8 @@ export const auth = (cookies) => ({ authorization: `Bearer ${cookies.get('token'
 export const fiat = (amount, rate) => (amount * rate) / sats;
 export const fd = async (req) => {
 	let obj = Object.fromEntries(await req.formData());
-	for (let k in obj) (obj[k] === 'undefined' && (obj[k] = undefined)) ||( obj[k] === 'false' && (obj[k] = false));
+	for (let k in obj)
+		(obj[k] === 'undefined' && (obj[k] = undefined)) || (obj[k] === 'false' && (obj[k] = false));
 	return obj;
 };
 
diff --git a/src/routes/(app)/ln/[lnurl]/+page.server.js b/src/routes/(app)/ln/[lnurl]/+page.server.js
index 8269782a..ddd714bf 100644
--- a/src/routes/(app)/ln/[lnurl]/+page.server.js
+++ b/src/routes/(app)/ln/[lnurl]/+page.server.js
@@ -39,8 +39,9 @@ export const actions = {
 	withdraw: async ({ cookies, fetch, request }) => {
 		let error;
 
-		let { callback, amount, username, currency, minWithdrawable, maxWithdrawable, k1 } =
-			await fd(request);
+		let { callback, amount, username, currency, minWithdrawable, maxWithdrawable, k1 } = await fd(
+			request
+		);
 
 		minWithdrawable = Math.round(minWithdrawable / 1000);
 		maxWithdrawable = Math.round(maxWithdrawable / 1000);
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 7b1900cc..6fbe9c7c 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js
+++ b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js
@@ -5,7 +5,9 @@ let seen = {};
 export const actions = {
 	default: async ({ cookies, request }) => {
 		try {
-			let { address, amount, confirmed, feeRate, subtract, pin, stale, ts } = await await fd(request);
+			let { address, amount, confirmed, feeRate, subtract, pin, stale, ts } = await await fd(
+				request
+			);
 			if (seen[ts]) return fail(400, { message: 'Duplicate form submission' });
 
 			let estimate = await post(
diff --git a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
index 3fb7cefb..d283ae7f 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
@@ -51,11 +51,10 @@
 	</div>
 {/if}
 
-<div class="container px-4 mt-20 max-w-xl mx-auto space-y-5">
-	<div class="text-center mb-8">
-		<h1 class="text-3xl md:text-4xl font-semibold mb-2">{$t('payments.send')}</h1>
-		<p class="text-lg text-secondary">{address}</p>
-	</div>
+<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>
 
 	{#if confirmed}
 		<div class="text-center">
@@ -64,6 +63,14 @@
 			</h2>
 			<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(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>
 	{:else}
 		<Numpad bind:amount bind:fiat {currency} {submit} />
 	{/if}
@@ -78,12 +85,11 @@
 		<input name="stale" value={stale} type="hidden" />
 
 		{#if confirmed}
-			<label>Fee rate</label>
-			{min}
-			{max}
-			{fee}
-			<div class="text-lg text-center -mb-2 text-secondary">{feeRate} sats/kb</div>
-			<Slider bind:value={feeRate} {handle} {min} {max} />
+			<div class="relative mb-5">
+				<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>
+				<Slider bind:value={feeRate} {handle} {min} {max} />
+			</div>
 		{/if}
 
 		<div class="flex justify-center gap-2">
@@ -102,9 +108,7 @@
 				class="opacity-100 hover:opacity-80 rounded-2xl border py-3 font-bold mt-2 bg-black text-white px-4 w-24"
 				disabled={loading}
 			>
-				{#if loading}
-					<Spinner />
-				{:else if confirmed}
+				{#if confirmed}
 					{$t('payments.send')}
 				{:else}
 					{$t('payments.next')}