diff options
7 files changed, 70 insertions, 31 deletions
diff --git a/src/locales/en.json b/src/locales/en.json index 64b72ded..03a5e06b 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -273,7 +273,7 @@ }, "payments": { "networkFee": "Network fee", - "ourFee": "Our fee", + "platformFee": "Platform fee", "fastest": "Fastest", "fast": "Fast", "medium": "Medium", @@ -298,7 +298,7 @@ "details": "Transaction Details", "header": "Payments", "preimage": "Proof of payment", - "maxfee": "Max fee", + "maxfee": "Max routing fee", "type": "Type", "time": "Time", "sent": "Sent", diff --git a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte index 045c44d6..a5811e3c 100644 --- a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte +++ b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte @@ -102,7 +102,7 @@ {#if ourfee} <div class="text-center"> - <h2 class="text-secondary text-lg">{$t("payments.ourFee")}</h2> + <h2 class="text-secondary text-lg">{$t("payments.platformFee")}</h2> <div class="flex flex-wrap gap-4 justify-center"> <div class="my-auto"> diff --git a/src/routes/(app)/send/invoice/[id]/+page.server.js b/src/routes/(app)/send/invoice/[id]/+page.server.js index 39f2a5dd..88017362 100644 --- a/src/routes/(app)/send/invoice/[id]/+page.server.js +++ b/src/routes/(app)/send/invoice/[id]/+page.server.js @@ -20,6 +20,7 @@ export async function load({ params: { id }, parent, url }) { redirect(307, `/${recipient.username}/invoice/${id}/tip`); if (recipient.username === user.username) error(500, { message: "Cannot send to self" }); + return { amount, address, diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte index ae997bce..c2163a81 100644 --- a/src/routes/(app)/send/invoice/[id]/+page.svelte +++ b/src/routes/(app)/send/invoice/[id]/+page.svelte @@ -13,9 +13,17 @@ export let data; export let form; - let { address, hash, rate, payreq, recipient, tip, rates, user } = data; + let { address, hash, payreq, recipient, tip, rates, user } = data; let { currency } = user; + $: reload(data); + let reload = (data) => { + ({ address, hash, payreq, recipient, tip, rates, user } = data); + ({ currency } = user); + }; + + $: rate = data.rate * (rates[user.currency] / rates[data.currency]); + let amount = form?.amount || data.amount; let a, af, @@ -42,8 +50,6 @@ }); }; - $: rate = data.rate * (rates[user.currency] / rates[data.currency]); - $: update(form); let update = () => { if (form?.message.includes("pin")) $pin = undefined; @@ -80,7 +86,7 @@ </div> {/if} -<div class="container px-4 mt-20 max-w-xl mx-auto"> +<div class="container px-4 max-w-xl mx-auto"> {#if amount} <div class="text-center mb-8"> <h1 class="text-xl md:text-2xl text-secondary mb-2"> @@ -164,7 +170,7 @@ {/if} </div> </form> - <div class="flex my-20"> + <div class="flex my-10"> <button class="mx-auto" on:click={external} >{$t("payments.moreOptions")}</button > diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.server.js b/src/routes/(app)/send/lightning/[payreq]/+page.server.js index 49c952bf..a2b60356 100644 --- a/src/routes/(app)/send/lightning/[payreq]/+page.server.js +++ b/src/routes/(app)/send/lightning/[payreq]/+page.server.js @@ -1,9 +1,9 @@ import { fail, redirect } from "@sveltejs/kit"; import { fd, auth, post } from "$lib/utils"; -export async function load({ params }) { - return post("/parse", params); -} +export async function load({ cookies, params }) { + return post("/parse", params, auth(cookies)); + } export const actions = { setAmount: async ({ cookies, request }) => fd(request), diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte index d88e0d97..44a45927 100644 --- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte +++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte @@ -5,7 +5,7 @@ import Numpad from "$comp/Numpad.svelte"; import Spinner from "$comp/Spinner.svelte"; import { page } from "$app/stores"; - import { back, fiat, f, s } from "$lib/utils"; + import { back, fiat, f, s, focus } from "$lib/utils"; import { rate, pin } from "$lib/store"; export let data; @@ -14,6 +14,7 @@ let { payreq } = $page.params; let { alias, + ourfee, rates, user: { currency }, } = data; @@ -23,6 +24,7 @@ let reload = (data) => { ({ alias, + ourfee, rates, user: { currency }, } = data); @@ -59,20 +61,20 @@ <Icon icon="arrow-left" style="w-10" /> </button> -{#if form?.message} - <div class="text-red-600 text-center"> - {form.message} - </div> -{/if} - <div class="container px-4 max-w-xl mx-auto text-center space-y-5"> {#if amount} - <h1 class="text-4xl font-semibold mb-10"> - {$t("payments.send")} - </h1> + {#if form?.message} + <div class="text-red-600 text-center"> + {form.message} + </div> + {/if} - <div class="text-center"> - <h2 class="text-2xl font-semibold"> + <div> + <h1 class="text-2xl text-secondary"> + {$t("payments.send")} + </h1> + + <h2 class="text-3xl font-semibold"> {f(fiat(amount, $rate), currency)} </h2> <h3 class="text-secondary text-xl">⚡️{s(amount)}</h3> @@ -84,6 +86,21 @@ <p class="text-2xl break-words font-semibold mb-8">{alias}</p> + {#if ourfee} + <div class="text-center"> + <h2 class="text-secondary text-lg">{$t("payments.platformFee")}</h2> + + <div class="flex flex-wrap gap-4 justify-center"> + <div class="my-auto"> + <h2 class="text-xl"> + {f(fiat(ourfee, $rate), currency)} + </h2> + <h3 class="text-secondary">⚡️{s(ourfee)}</h3> + </div> + </div> + </div> + {/if} + <form method="POST" use:enhance @@ -95,24 +112,31 @@ <input name="amount" value={amount} type="hidden" /> <input name="pin" value={$pin} type="hidden" /> - <div class="relative w-40 mx-auto text-left"> + <div class="w-40 mx-auto"> <label for="maxfee" class="text-lg 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 class="flex"> + <input + name="maxfee" + bind:value={maxfee} + class="border-r-0 rounded-r-none text-lg py-2" + /> + <div + class="text-gray-600 rounded-r-2xl p-5 my-auto rounded-l-none rounded border bg-gray-100" + > + ⚡️ + </div> </div> </div> <div class="flex w-full"> <button 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-full border py-5 px-7 font-semibold mx-auto mt-2 bg-black text-white text-2xl" disabled={loading} + use:focus > {#if loading} <Spinner /> @@ -130,6 +154,8 @@ use:enhance > <input type="hidden" value={a} name="amount" /> + <input name="rate" value={$rate} type="hidden" /> + <Numpad bind:amount={a} {currency} bind:rate={$rate} /> <button type="submit" 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 e5fa4452..9e586f84 100644 --- a/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js +++ b/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js @@ -20,7 +20,13 @@ export async function load({ cookies, params, parent }) { let { hash } = await post( "/invoice", { - invoice: { amount, prompt: false, type: types.lightning }, + invoice: { + amount, + currency: currency === subject.currency ? currency : undefined, + prompt: false, + rate: currency === subject.currency ? rate : undefined, + type: types.lightning, + }, user: { username }, }, auth(cookies) |