diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/locales/en.json | 1 | ||||
| -rw-r--r-- | src/routes/(app)/send/lightning/[payreq]/+page.svelte | 97 |
2 files changed, 60 insertions, 38 deletions
diff --git a/src/locales/en.json b/src/locales/en.json index 5d42e9fa..64b72ded 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -298,6 +298,7 @@ "details": "Transaction Details", "header": "Payments", "preimage": "Proof of payment", + "maxfee": "Max fee", "type": "Type", "time": "Time", "sent": "Sent", diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte index a5b812cb..12b5c858 100644 --- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte +++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte @@ -5,21 +5,43 @@ import Numpad from "$comp/Numpad.svelte"; import Spinner from "$comp/Spinner.svelte"; import { page } from "$app/stores"; - import { back, s } from "$lib/utils"; - import { pin } from "$lib/store"; + import { back, fiat, f, s } from "$lib/utils"; + import { rate, pin } from "$lib/store"; export let data; export let form; let { payreq } = $page.params; - let { alias, rates } = data; - - let { currency } = data.user; + let { + alias, + rates, + user: { currency }, + } = data; let a; - let maxfee = 10000; + + $: reload(data); + let reload = (data) => { + ({ + alias, + rates, + user: { currency }, + } = data); + if (!$rate) $rate = rates[currency]; + }; $: amount = form?.amount || data.amount; - $: rate = rates[currency]; + $: maxfee = + amount < 100 + ? amount * 5 + : amount < 1000 + ? amount + : amount < 10000 + ? amount * 0.5 + : amount < 100000 + ? amount * 0.1 + : amount < 1000000 + ? amount * 0.05 + : amount * 0.01; let loading; let submit = () => (loading = true); @@ -43,21 +65,25 @@ </div> {/if} -<div class="container px-4 mt-20 max-w-xl mx-auto"> +<div class="container px-4 max-w-xl mx-auto text-center space-y-5"> {#if amount} - <div class="text-center mb-8"> - <h1 class="text-xl md:text-2xl text-secondary mb-2"> - {$t("payments.send")} - </h1> - <p class="text-6xl break-words mb-4"> - ⚡️{s(amount)} - </p> - <h1 class="text-xl md:text-2xl text-secondary mb-2"> - {$t("payments.to")} - </h1> - <p class="text-4xl break-words">{alias}</p> + <h1 class="text-4xl mb-2 font-semibold"> + {$t("payments.send")} + </h1> + + <div class="text-center"> + <h2 class="text-2xl md:text-3xl font-semibold"> + {f(fiat(amount, $rate), currency)} + </h2> + <h3 class="text-secondary md:text-lg mb-6 mt-1">⚡️{s(amount)}</h3> </div> + <h1 class="text-xl md:text-xl text-secondary mb-2"> + {$t("payments.to")} + </h1> + + <p class="text-4xl break-words">{alias}</p> + <form method="POST" use:enhance @@ -68,7 +94,19 @@ <input name="payreq" value={payreq} type="hidden" /> <input name="amount" value={amount} type="hidden" /> <input name="pin" value={$pin} type="hidden" /> - <input name="maxfee" value={maxfee} type="hidden" /> + + <div class="relative w-40 mx-auto text-left"> + <label for="maxfee" class="text-xl text-secondary" + >{$t("payments.maxfee")}</label + > + <input name="maxfee" bind:value={maxfee} class="text-lg" /> + + <div + class="absolute right-[2px] top-[25px] text-gray-600 rounded-r-2xl p-4 h-[54px] my-auto border-l" + > + ⚡️ + </div> + </div> <div class="flex w-full"> <button @@ -84,23 +122,6 @@ </button> </div> </form> - - {#if show} - <div class="relative w-96 mx-auto"> - <label for="maxfee">Max fee</label> - <input name="maxfee" bind:value={maxfee} /> - - <div - class="absolute right-[2px] top-[25px] text-gray-600 rounded-r-2xl p-4 h-[54px] my-auto border-l" - > - ⚡️ - </div> - </div> - {:else} - <div class="flex w-full mt-5"> - <button class="mx-auto" on:click={toggle}>Settings</button> - </div> - {/if} {:else} <form method="POST" @@ -109,7 +130,7 @@ use:enhance > <input type="hidden" value={a} name="amount" /> - <Numpad bind:amount={a} {currency} {rate} /> + <Numpad bind:amount={a} {currency} bind:rate={$rate} /> <button type="submit" class="bg-black text-white rounded-xl h-[48px] flex w-full justify-center items-center font-semibold |