diff options
Diffstat (limited to 'src/routes/(app)/send')
12 files changed, 128 insertions, 62 deletions
diff --git a/src/routes/(app)/send/[...text]/+page.server.js b/src/routes/(app)/send/[...text]/+page.server.js index d09b4da9..9c7d4185 100644 --- a/src/routes/(app)/send/[...text]/+page.server.js +++ b/src/routes/(app)/send/[...text]/+page.server.js @@ -45,14 +45,15 @@ let parse = async (t, host) => { // bitcoin if (validate(t)) { try { - ({ id } = await get(`/invoice/${t}`)); + ({ id, user } = await get(`/invoice/${t}`)); } catch (e) { let r = `/send/bitcoin/${t}`; if (amount) r += '/' + amount; throw redirect(307, r); } - if (id) throw redirect(307, `/send/${id}`); + if (user) throw redirect(307, `/send/${user.username}`); + else if (id) throw redirect(307, `/send/${id}`); } // user diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte index 5a376f9f..3abc5a1a 100644 --- a/src/routes/(app)/send/[...text]/+page.svelte +++ b/src/routes/(app)/send/[...text]/+page.svelte @@ -7,7 +7,6 @@ import { t } from '$lib/translations'; import { AppHeader, Avatar, Icon, Spinner } from '$comp'; import { back, fail } from '$lib/utils'; - import { format, parseISO } from 'date-fns'; export let data; export let form; @@ -99,7 +98,7 @@ <div> {#each contacts as c} <a href={`/send/${c.username}`}> - <div class="border-b p-2 last:border-b-0 hover:bg-gray-100"> + <div class="border-b p-2 last:border-b-0 hover:bg-gray-100 rounded-2xl"> <div class="flex"> <div> <div class="flex"> 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..92a754ae 100644 --- a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js +++ b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.server.js @@ -1,23 +1,29 @@ 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) ); - await post('/bitcoin/send', { pin, tx }, 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, 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 6b216cb3..77d5fde6 100644 --- a/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte +++ b/src/routes/(app)/send/bitcoin/[address]/[...amount]/+page.svelte @@ -1,24 +1,48 @@ <script> + import { tick } from 'svelte'; import { t } from '$lib/translations'; import { enhance } from '$app/forms'; - import { Icon, Numpad, Spinner } from '$comp'; + import { Toggle, Slider, Icon, Numpad, Spinner } from '$comp'; import { page } from '$app/stores'; - import { back } from '$lib/utils'; - import { pin } from '$lib/store'; + import { fiat as toFiat, 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 { currency } = data.user; - let loading, submit; + let { balance, currency } = data.user; + 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 = () => { - if (form?.message.includes('pin')) $pin = undefined; loading = false; + if (form?.message?.includes('pin')) $pin = undefined; + if (form) ({ min, max, feeRate, fee, ourfee, subtract } = form); + if (!ourfee) ourfee = 0; + if (feeRate) confirmed = true; + stale = false; + }; + + let setMax = () => { + fiat = false; + amount = balance; + subtract = true; + }; + + $: if (amount + fee > balance) subtract = true; + + let timeout; + let handle = (e) => { + stale = true; + feeRate = e.target.value; + clearTimeout(timeout); + timeout = setTimeout(() => { + tick().then(() => submit.click()); + }, 200); }; </script> @@ -32,30 +56,82 @@ </div> {/if} -<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">{$t('payments.sendTo')}</h1> - <p class="text-lg text-secondary">{address}</p> - </div> - <Numpad bind:amount {currency} {submit} /> +<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 break-all">{address}</div> + + {#if confirmed} + <div class="text-center"> + <h2 class="text-2xl md:text-3xl font-semibold"> + {f(toFiat(amount, $selectedRate), currency)} + </h2> + <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> + + <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} /> + {/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" /> + <input name="subtract" value={subtract} type="hidden" /> + + {#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> + <Slider bind:value={feeRate} {handle} {min} {max} /> + </div> + <div class="flex justify-center gap-2 mb-10"> + <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" + >Take fee from amount</label + > + </div> + {/if} + + <div class="flex justify-center gap-2"> + {#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} - <div class="flex w-full"> <button bind:this={submit} type="submit" - class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24" + 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} {$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..3db03123 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, auth, get, post } from '$lib/utils'; export async function load({ params: { id }, parent }) { let { user } = await parent(); @@ -13,15 +13,10 @@ 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 { confirmed } = body; + let body = await fd(request); body.amount = parseInt(body.amount); body.hash = hash; - if (!confirmed) { - return fail(400, { amount, confirm: true }); - } - await post('/payments', body, auth(cookies)); } catch (e) { return fail(400, { message: e.message }); diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte index 27837bca..7570a61a 100644 --- a/src/routes/(app)/send/invoice/[id]/+page.svelte +++ b/src/routes/(app)/send/invoice/[id]/+page.svelte @@ -69,7 +69,6 @@ <input name="amount" value={amount} type="hidden" /> <input name="payreq" value={payreq} type="hidden" /> <input name="username" value={recipient.username} type="hidden" /> - <input name="confirmed" value={form?.confirm} type="hidden" /> <input name="pin" value={$pin} type="hidden" /> <div class="flex w-full"> diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.server.js b/src/routes/(app)/send/lightning/[payreq]/+page.server.js index 90e6c0cc..94231376 100644 --- a/src/routes/(app)/send/lightning/[payreq]/+page.server.js +++ b/src/routes/(app)/send/lightning/[payreq]/+page.server.js @@ -1,23 +1,17 @@ import { fail, redirect } from '@sveltejs/kit'; -import { btc as asset, auth, post } from '$lib/utils'; +import { fd, auth, post } from '$lib/utils'; export async function load({ params }) { return post('/parse', params); } export const actions = { - setAmount: async ({ cookies, request }) => { - return Object.fromEntries(await request.formData()); - }, + setAmount: async ({ cookies, request }) => fd(request), send: async ({ cookies, request }) => { try { - let body = Object.fromEntries(await request.formData()); - let { amount, confirmed } = body; - - if (!confirmed) { - return fail(400, { amount, confirm: true }); - } + let body = await fd(request); + let { amount } = body; await post('/payments', body, auth(cookies)); } catch (e) { diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte index 6ae699d2..af07a565 100644 --- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte +++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte @@ -13,10 +13,11 @@ let { alias } = data; let { currency } = data.user; - let amount = form?.amount || data.amount; let a; let maxfee = 100; + $: amount = form?.amount || data.amount; + let loading; let submit = () => (loading = true); $: update(form); @@ -53,7 +54,6 @@ <form method="POST" use:enhance on:submit={submit} action="?/send" class="space-y-5"> <input name="payreq" value={payreq} type="hidden" /> <input name="amount" value={amount} type="hidden" /> - <input name="confirmed" value={form?.confirm} type="hidden" /> <input name="pin" value={$pin} type="hidden" /> <input name="maxfee" value={maxfee} type="hidden" /> @@ -89,7 +89,7 @@ </div> {/if} {:else} - <form method="POST" action="?/setAmount" class="w-[300px] mx-auto"> + <form method="POST" action="?/setAmount" class="w-[300px] mx-auto" use:enhance> <input type="hidden" value={a} name="amount" /> <Numpad bind:amount={a} {currency} /> <button 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/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)/send/user/[username]/[...amount]/+page.server.js b/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js index 42b47c8f..18eda839 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, auth, get, post } from '$lib/utils'; export async function load({ params, parent }) { let { user } = await parent(); @@ -12,14 +12,10 @@ export async function load({ params, parent }) { export const actions = { default: async ({ cookies, request }) => { try { - let body = Object.fromEntries(await request.formData()); - let { amount, confirmed } = body; + let body = await fd(request); + let { amount } = body; amount = parseInt(amount); - if (!confirmed) { - return fail(400, { amount, confirm: true }); - } - await post('/payments', body, auth(cookies)); } catch (e) { console.log(e); diff --git a/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte b/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte index 9704e3c6..74da1fa8 100644 --- a/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte +++ b/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte @@ -16,10 +16,11 @@ let amount = form?.amount || data.amount; let a, af, - amountFiat = amount * ($selectedRate / sats), fiat = !amount, hash; + $: amountFiat = amount * ($selectedRate / sats); + let setAmount = async () => { amount = a; amountFiat = af; @@ -39,7 +40,7 @@ $: update(form); let update = () => { - if (form?.message.includes('pin')) $pin = undefined; + if (form?.message?.includes('pin')) $pin = undefined; loading = false; }; </script> @@ -68,7 +69,6 @@ <form method="POST" use:enhance on:submit={submit}> <input name="amount" value={amount} type="hidden" /> <input name="username" value={subject.username} type="hidden" /> - <input name="confirmed" value={form?.confirm} type="hidden" /> <input name="pin" value={$pin} type="hidden" /> <input name="hash" value={hash} type="hidden" /> |