From 50b270db6fda60b5b3e39a9dbada5c27a14cbad1 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 22 Feb 2023 19:38:55 -0800
Subject: fee slider wip

---
 src/components/Slider.svelte                       | 56 +++++++++++++++++
 src/components/index.js                            |  1 +
 src/lib/utils.js                                   |  5 ++
 .../[username]/(profile)/request/+page.server.js   |  6 +-
 .../[username]/invoice/[hash]/tip/+page.svelte     | 57 +-----------------
 .../[username]/settings/[...tab]/+page.server.js   |  4 +-
 src/routes/(app)/ln/[lnurl]/+page.server.js        |  9 +--
 src/routes/(app)/login/+page.server.js             |  4 +-
 .../(app)/pot/[name]/withdraw/+page.server.js      |  5 +-
 src/routes/(app)/register/+page.server.js          |  4 +-
 .../bitcoin/[address]/[...amount]/+page.server.js  | 18 +++---
 .../bitcoin/[address]/[...amount]/+page.svelte     | 70 +++++++++++++++++-----
 src/routes/(app)/send/invoice/[id]/+page.server.js |  4 +-
 .../(app)/send/lightning/[payreq]/+page.server.js  |  4 +-
 .../send/pot/[name]/[...amount]/+page.server.js    |  2 +-
 .../user/[username]/[...amount]/+page.server.js    |  4 +-
 src/routes/(app)/support/+page.server.js           |  5 +-
 17 files changed, 152 insertions(+), 106 deletions(-)
 create mode 100644 src/components/Slider.svelte

(limited to 'src')

diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte
new file mode 100644
index 00000000..84482c9d
--- /dev/null
+++ b/src/components/Slider.svelte
@@ -0,0 +1,56 @@
+<script>
+	export let value,
+		handle,
+		min = 0,
+		max = 100;
+</script>
+
+<input
+	id="slider"
+	type="range"
+	{min}
+	{max}
+ bind:value={value}
+	class="px-0 py-0 my-5"
+	style="--bgPercent: {(value - min) * 100/(max - min)}%;"
+	on:input={handle}
+/>
+
+<style>
+	#slider {
+		-webkit-appearance: none;
+		width: 100%;
+		height: 6px;
+		border-radius: 5px;
+		background: linear-gradient(
+			to right,
+			black 0%,
+			black var(--bgPercent),
+			#f5f7fa var(--bgPercent),
+			#f5f7fa 100%
+		);
+		outline: none;
+	}
+
+	#slider:active {
+		background-color: black;
+	}
+
+	#slider::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+
+	#slider::-moz-range-thumb {
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index ab54e09f..0d1d8d1d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Slider } from './Slider.svelte';
 export { default as Pinpad } from './Pinpad.svelte';
 export { default as Balance } from './Balance.svelte';
 export { default as Lnurlp } from './Lnurlp.svelte';
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 86f722b9..1d064c9a 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -148,6 +148,11 @@ export const login = async (user, cookies) => {
 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));
+	return obj;
+};
 
 export const f = (s, currency) =>
 	new Intl.NumberFormat('en-US', {
diff --git a/src/routes/(app)/[username]/(profile)/request/+page.server.js b/src/routes/(app)/[username]/(profile)/request/+page.server.js
index 2c1d6bde..e7ad6a8f 100644
--- a/src/routes/(app)/[username]/(profile)/request/+page.server.js
+++ b/src/routes/(app)/[username]/(profile)/request/+page.server.js
@@ -1,15 +1,15 @@
 import { redirect } from '@sveltejs/kit';
-import { auth, post } from '$lib/utils';
+import { fd, auth, post } from '$lib/utils';
 
 export const actions = {
 	create: async ({ cookies, params, request, url }) => {
-		let form = Object.fromEntries(await request.formData());
+		let form = await fd(request);
 		let { id, requester } = await post('/requests', form, auth(cookies));
 		throw redirect(307, `/${params.username}/request/${id}`);
 	},
 
 	delete: async ({ cookies, request }) => {
-		let form = Object.fromEntries(await request.formData());
+		let form = await fd(request);
 		let r = await post('/requests/delete', form, auth(cookies));
 	}
 };
diff --git a/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
index d033c413..296ef9c6 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
@@ -3,7 +3,7 @@
 	import { browser } from '$app/environment';
 	import { invoice as inv, request } from '$lib/store';
 	import { copy, focus, f, sat, get, reverseFormat, s, sats } from '$lib/utils';
-	import { Icon } from '$comp';
+	import { Icon, Slider } from '$comp';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
 	import { enhance } from '$app/forms';
@@ -37,9 +37,6 @@
 			customInput.value = '';
 		}
 		tipPercent = e.target.value;
-
-		clearTimeout(timeout);
-		timeout = setTimeout(update, 800);
 	};
 
 	let submitting;
@@ -56,10 +53,6 @@
 	};
 
 	let submit;
-	let update = async () => {
-		await tick();
-		//submit.click();
-	};
 
 	export let data;
 	$: refresh(data);
@@ -123,16 +116,7 @@
 		{#if !showCustomAmount}
 			<div class="my-2 text-xl">{Math.round(tipPercent)}%</div>
 
-			<input
-				id="slider"
-				type="range"
-				min="0"
-				max="100"
-				value={tipPercent}
-				class="px-0 py-0 my-5"
-				style="--bgPercent: {tipPercent}%;"
-				on:input={handleSlide}
-			/>
+			<Slider handle={handleSlide} bind:value={tipPercent} />
 
 			<div class="flex mb-8 text-lg">
 				<div>
@@ -201,43 +185,6 @@
 </div>
 
 <style>
-	#slider {
-		-webkit-appearance: none;
-		width: 100%;
-		height: 6px;
-		border-radius: 5px;
-		background: linear-gradient(
-			to right,
-			black 0%,
-			black var(--bgPercent),
-			#f5f7fa var(--bgPercent),
-			#f5f7fa 100%
-		);
-		outline: none;
-	}
-
-	#slider:active {
-		background-color: black;
-	}
-
-	#slider::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	#slider::-moz-range-thumb {
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
 	.active {
 		@apply !bg-black !text-white;
 	}
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
index e833a102..4e80a5ad 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
@@ -1,5 +1,5 @@
 import { fail, redirect } from '@sveltejs/kit';
-import { auth, get, post } from '$lib/utils';
+import { fd, auth, get, post } from '$lib/utils';
 
 export function load({ params, url }) {
 	if (url.pathname.endsWith('settings')) throw redirect(307, url.pathname + '/account');
@@ -8,7 +8,7 @@ export function load({ params, url }) {
 
 export const actions = {
 	default: async ({ cookies, request }) => {
-		let form = Object.fromEntries(await request.formData());
+		let form = await fd(request);
 		form.prompt = form.prompt === 'on';
 		let user = { ...(await get('/me', auth(cookies))), ...form };
 
diff --git a/src/routes/(app)/ln/[lnurl]/+page.server.js b/src/routes/(app)/ln/[lnurl]/+page.server.js
index a12b063c..8269782a 100644
--- a/src/routes/(app)/ln/[lnurl]/+page.server.js
+++ b/src/routes/(app)/ln/[lnurl]/+page.server.js
@@ -1,4 +1,4 @@
-import { auth, get, post } from '$lib/utils';
+import { fd, auth, get, post } from '$lib/utils';
 import { error, fail, redirect } from '@sveltejs/kit';
 
 export async function load({ params, parent }) {
@@ -24,10 +24,7 @@ export const actions = {
 	pay: async ({ cookies, fetch, request }) => {
 		let error;
 
-		let { callback, amount, minSendable, maxSendable } = Object.fromEntries(
-			await request.formData()
-		);
-
+		let { callback, amount, minSendable, maxSendable } = await fd(request);
 		minSendable = Math.round(minSendable / 1000);
 		maxSendable = Math.round(maxSendable / 1000);
 
@@ -43,7 +40,7 @@ export const actions = {
 		let error;
 
 		let { callback, amount, username, currency, minWithdrawable, maxWithdrawable, k1 } =
-			Object.fromEntries(await request.formData());
+			await fd(request);
 
 		minWithdrawable = Math.round(minWithdrawable / 1000);
 		maxWithdrawable = Math.round(maxWithdrawable / 1000);
diff --git a/src/routes/(app)/login/+page.server.js b/src/routes/(app)/login/+page.server.js
index a6a7120a..67f686e0 100644
--- a/src/routes/(app)/login/+page.server.js
+++ b/src/routes/(app)/login/+page.server.js
@@ -1,5 +1,5 @@
 import { fail, redirect } from '@sveltejs/kit';
-import { login } from '$lib/utils';
+import { login, fd } from '$lib/utils';
 
 export const load = async ({ parent }) => {
 	let { user } = await parent();
@@ -8,7 +8,7 @@ export const load = async ({ parent }) => {
 
 export const actions = {
 	default: async ({ cookies, request }) => {
-		let form = Object.fromEntries(await request.formData());
+		let form = await fd(request);
 		let { username, password, token, loginRedirect } = form;
 		let user = { username, password, token };
 
diff --git a/src/routes/(app)/pot/[name]/withdraw/+page.server.js b/src/routes/(app)/pot/[name]/withdraw/+page.server.js
index ab56867d..ac33e940 100644
--- a/src/routes/(app)/pot/[name]/withdraw/+page.server.js
+++ b/src/routes/(app)/pot/[name]/withdraw/+page.server.js
@@ -1,5 +1,5 @@
 import { fail, redirect } from '@sveltejs/kit';
-import { auth, post } from '$lib/utils';
+import { fd, auth, post } from '$lib/utils';
 
 export async function load({ parent }) {
 	let { user } = await parent();
@@ -8,8 +8,7 @@ export async function load({ parent }) {
 
 export const actions = {
 	default: async ({ cookies, request }) => {
-		let body = Object.fromEntries(await request.formData());
-
+		let body = await fd(request);
 		try {
 			await post('/take', body, auth(cookies));
 		} catch (e) {
diff --git a/src/routes/(app)/register/+page.server.js b/src/routes/(app)/register/+page.server.js
index 7799d5ae..e71b2a60 100644
--- a/src/routes/(app)/register/+page.server.js
+++ b/src/routes/(app)/register/+page.server.js
@@ -1,5 +1,5 @@
 import { fail, redirect } from '@sveltejs/kit';
-import { post, login } from '$lib/utils';
+import { fd, post, login } from '$lib/utils';
 
 export const load = async ({ parent }) => {
 	let { user } = await parent();
@@ -8,7 +8,7 @@ export const load = async ({ parent }) => {
 
 export const actions = {
 	default: async ({ cookies, request }) => {
-		let form = Object.fromEntries(await request.formData());
+		let form = await fd(request);
 		let { username, password, cipher, salt, pubkey, loginRedirect } = form;
 		let user = { username, password, cipher, salt, pubkey };
 		let error;
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 59e9326d..7b1900cc 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js
+++ b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js
@@ -1,22 +1,26 @@
 import { fail, redirect } from '@sveltejs/kit';
-import { auth, post } from '$lib/utils';
+import { auth, post, fd } from '$lib/utils';
 
 let seen = {};
 export const actions = {
 	default: async ({ cookies, request }) => {
 		try {
-			let feeRate, subtract;
-			let { address, amount, pin, ts } = Object.fromEntries(await request.formData());
-
+			let { address, amount, confirmed, feeRate, subtract, pin, stale, ts } = await await fd(request);
 			if (seen[ts]) return fail(400, { message: 'Duplicate form submission' });
-			seen[ts] = 1;
-			setTimeout(() => delete seen[ts], 30000);
 
-			let { tx } = await post(
+			let estimate = await post(
 				'/bitcoin/fee',
 				{ address, amount, feeRate, subtract },
 				auth(cookies)
 			);
+
+			let { tx } = estimate;
+
+			if (stale || !confirmed) return fail(400, estimate);
+
+			seen[ts] = 1;
+			setTimeout(() => delete seen[ts], 30000);
+
 			await post('/bitcoin/send', { pin, 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 cabe895f..3fb7cefb 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte
@@ -1,31 +1,44 @@
 <script>
+	import { tick } from 'svelte';
 	import { t } from '$lib/translations';
 	import { enhance } from '$app/forms';
-	import { Icon, Numpad, Spinner } from '$comp';
+	import { Slider, Icon, Numpad, Spinner } from '$comp';
 	import { page } from '$app/stores';
-	import { back, s, sat } from '$lib/utils';
-	import { pin } from '$lib/store';
+	import { fiat as af, f, back, s, sat } from '$lib/utils';
+	import { pin, selectedRate } from '$lib/store';
 
 	export let data;
 	export let form;
 
 	let { address, amount } = $page.params;
 	let { balance, currency } = data.user;
-	let loading, submit;
-	let fiat;
+	let loading, submit, fiat, confirmed, feeRate, min, max, fee, stale;
 
 	let toggle = () => (loading = true);
 
 	$: update(form);
 	let update = () => {
-		if (form?.message.includes('pin')) $pin = undefined;
 		loading = false;
+		if (form?.message?.includes('pin')) $pin = undefined;
+		if (form) ({ min, max, feeRate, fee } = form);
+		if (feeRate) confirmed = true;
+		stale = false;
 	};
 
-	let max = () => {
-    fiat = false;
+	let setMax = () => {
+		fiat = false;
 		amount = balance;
 	};
+
+	let timeout;
+	let handle = (e) => {
+		stale = true;
+		feeRate = e.target.value;
+		clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			tick().then(() => submit.click());
+		}, 200);
+	};
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
@@ -44,21 +57,44 @@
 		<p class="text-lg text-secondary">{address}</p>
 	</div>
 
-	<Numpad bind:amount bind:fiat {currency} {submit} />
+	{#if confirmed}
+		<div class="text-center">
+			<h2 class="text-2xl md:text-3xl font-semibold">
+				{f(af(amount, $selectedRate), currency)}
+			</h2>
+			<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(amount)}</h3>
+		</div>
+	{:else}
+		<Numpad bind:amount bind:fiat {currency} {submit} />
+	{/if}
 
 	<form method="POST" use:enhance on:submit={toggle}>
 		<input name="ts" value={Date.now()} type="hidden" />
 		<input name="address" value={address} type="hidden" />
 		<input name="amount" value={amount} type="hidden" />
 		<input name="pin" value={$pin} type="hidden" />
+		<input name="confirmed" value={confirmed} type="hidden" />
+		<input name="feeRate" value={feeRate} type="hidden" />
+		<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} />
+		{/if}
 
 		<div class="flex justify-center gap-2">
-			<button
-				type="button"
-				class="hover:opacity-80 bg-black text-white rounded-2xl py-3 px-4 mt-2 border font-bold"
-				on:click|preventDefault={max}
-				on:keydown={max}>Max ⚡️{s(balance)}</button
-			>
+			{#if !confirmed}
+				<button
+					type="button"
+					class="hover:opacity-80 bg-black text-white rounded-2xl py-3 px-4 mt-2 border font-bold"
+					on:click|preventDefault={setMax}
+					on:keydown={setMax}>Max ⚡️{s(balance)}</button
+				>
+			{/if}
 
 			<button
 				bind:this={submit}
@@ -68,8 +104,10 @@
 			>
 				{#if loading}
 					<Spinner />
-				{:else}
+				{:else if confirmed}
 					{$t('payments.send')}
+				{:else}
+					{$t('payments.next')}
 				{/if}
 			</button>
 		</div>
diff --git a/src/routes/(app)/send/invoice/[id]/+page.server.js b/src/routes/(app)/send/invoice/[id]/+page.server.js
index 2df19985..0ae097af 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.server.js
+++ b/src/routes/(app)/send/invoice/[id]/+page.server.js
@@ -1,5 +1,5 @@
 import { error, fail, redirect } from '@sveltejs/kit';
-import { btc as asset, auth, get, post } from '$lib/utils';
+import { fd, btc as asset, auth, get, post } from '$lib/utils';
 
 export async function load({ params: { id }, parent }) {
 	let { user } = await parent();
@@ -13,7 +13,7 @@ export async function load({ params: { id }, parent }) {
 export const actions = {
 	default: async ({ cookies, params: { hash }, request }) => {
 		try {
-			let body = Object.fromEntries(await request.formData());
+			let body = await fd(request);
 			let { confirmed } = body;
 			body.amount = parseInt(body.amount);
 			body.hash = hash;
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.server.js b/src/routes/(app)/send/lightning/[payreq]/+page.server.js
index 90e6c0cc..e9e2b12a 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.server.js
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.server.js
@@ -7,12 +7,12 @@ export async function load({ params }) {
 
 export const actions = {
 	setAmount: async ({ cookies, request }) => {
-		return Object.fromEntries(await request.formData());
+		return await fd(request);
 	},
 
 	send: async ({ cookies, request }) => {
 		try {
-			let body = Object.fromEntries(await request.formData());
+			let body = await fd(request);
 			let { amount, confirmed } = body;
 
 			if (!confirmed) {
diff --git a/src/routes/(app)/send/pot/[name]/[...amount]/+page.server.js b/src/routes/(app)/send/pot/[name]/[...amount]/+page.server.js
index 0e1b7f5b..6c11811c 100644
--- a/src/routes/(app)/send/pot/[name]/[...amount]/+page.server.js
+++ b/src/routes/(app)/send/pot/[name]/[...amount]/+page.server.js
@@ -3,7 +3,7 @@ import { auth, post } from '$lib/utils';
 
 export const actions = {
 	default: async ({ cookies, request }) => {
-		let body = Object.fromEntries(await request.formData());
+		let body = await fd(request);
 		let p;
 
 		try {
diff --git a/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js b/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js
index 42b47c8f..40c2d919 100644
--- a/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js
+++ b/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js
@@ -1,5 +1,5 @@
 import { error, fail, redirect } from '@sveltejs/kit';
-import { btc as asset, auth, get, post } from '$lib/utils';
+import { fd, btc as asset, auth, get, post } from '$lib/utils';
 
 export async function load({ params, parent }) {
 	let { user } = await parent();
@@ -12,7 +12,7 @@ export async function load({ params, parent }) {
 export const actions = {
 	default: async ({ cookies, request }) => {
 		try {
-			let body = Object.fromEntries(await request.formData());
+			let body = await fd(request);
 			let { amount, confirmed } = body;
 			amount = parseInt(amount);
 
diff --git a/src/routes/(app)/support/+page.server.js b/src/routes/(app)/support/+page.server.js
index 5d3bf988..6d0af616 100644
--- a/src/routes/(app)/support/+page.server.js
+++ b/src/routes/(app)/support/+page.server.js
@@ -1,10 +1,9 @@
-import { post } from '$lib/utils';
+import { fd, post } from '$lib/utils';
 import { fail } from '@sveltejs/kit';
 
 export const actions = {
 	default: async ({ cookies, request }) => {
-		let form = Object.fromEntries(await request.formData());
-
+		let form = await fd(request);
 		try {
 			await post('/email', form);
 		} catch (e) {
-- 
cgit v1.2.3