show ln platform fee

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)