progress on accounts

13 files changed, 475 insertions, 90 deletions

diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
new file mode 100644
index 00000000..7d7958f1
--- /dev/null
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -0,0 +1,343 @@
+<script>
+  import { send } from "$lib/socket";
+  import {
+    btc,
+    post,
+    back,
+    copy,
+    f,
+    get,
+    types,
+    sat,
+    reverseFormat,
+    s,
+    sats,
+  } from "$lib/utils";
+  import { tick, onMount, onDestroy } from "svelte";
+  import { browser } from "$app/environment";
+  import { last, showQr, amountPrompt } from "$lib/store";
+  import Avatar from "$comp/Avatar.svelte";
+  import Icon from "$comp/Icon.svelte";
+  import Heart from "$comp/Heart.svelte";
+  import Image from "$comp/Image.svelte";
+  import Numpad from "$comp/Numpad.svelte";
+  import { t } from "$lib/translations";
+  import { goto, invalidate } from "$app/navigation";
+  import Toggle from "$comp/Toggle.svelte";
+
+  export let data;
+
+  let showOptions;
+
+  let reading = async ({ message, serialNumber }) => {
+    let name = serialNumber.replace(/:/g, "-");
+    let result = await post(`/fund/${name}/withdraw`, { amount, hash, name });
+  };
+
+  let readingerror = (e) => console.log("nfc error", e);
+
+  $: refresh(data);
+  let { invoice, id, subject, user, src } = data;
+  let {
+    account_id,
+    amount,
+    hash,
+    type,
+    rate,
+    text,
+    tip,
+    user: { username, currency },
+  } = invoice;
+
+  let qr;
+  let tipPercent = 0;
+
+  let refresh = async (data) => {
+    ({ invoice, id, user, src } = data);
+    ({
+      account_id,
+      amount,
+      hash,
+      type,
+      rate,
+      text,
+      tip,
+      user: { username, currency },
+    } = invoice);
+
+    tipPercent = (tip / amount) * 100;
+  };
+
+  $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
+  $: tipAmount = ((tip * rate) / sats).toFixed(2);
+
+  let subbed;
+
+  onMount(async () => {
+    if (browser) {
+      last.subscribe((v) => {
+        if (!v || subbed) return;
+        subbed = true;
+        send("subscribe", invoice);
+      });
+
+      if ($amountPrompt && tip === undefined) toggleAmount();
+    }
+  });
+
+  $: link = [types.bitcoin, types.liquid].includes(type)
+    ? text
+    : `lightning:${text}`;
+  $: txt = [types.bitcoin, types.liquid].includes(type) ? hash : text;
+
+  let setType = async (type) => {
+    invoice.type = type;
+    ({ id } = await post(`/invoice`, {
+      invoice,
+      user: { username, currency },
+    }));
+
+    goto(`./${id}?options=true`, { invalidateAll: true, noScroll: true });
+  };
+
+  let setAmount = async () => {
+    if (typeof $amountPrompt === "undefined") $amountPrompt = true;
+    settingAmount = false;
+    amount = newAmount;
+    invoice.amount = newAmount;
+    invoice.tip = 0;
+    ({ id } = await post(`/invoice`, {
+      invoice,
+      user: { username, currency },
+    }));
+
+    let url = `./${id}`;
+    if (subject?.prompt) url += "/tip";
+    else url += "?options=true";
+
+    goto(url, { invalidateAll: true, noScroll: true });
+  };
+
+  let newAmount;
+  let settingAmount;
+  let toggleAmount = () => (settingAmount = !settingAmount);
+  let fiat;
+  let submit;
+</script>
+
+<div class="invoice container mx-auto max-w-xl px-4 space-y-2">
+  {#if $showQr}
+    <div>
+      <a
+        href={[types.bitcoin, types.liquid].includes(invoice.type)
+          ? invoice.text
+          : "lightning:" + invoice.text}
+      >
+        <img
+          {src}
+          class="mx-auto z-10 max-w-[360px]"
+          bind:this={qr}
+          alt={txt}
+        />
+      </a>
+    </div>
+  {:else}
+    <div class="break-all pb-5 text-center text-secondary text-xl">
+      {txt}
+    </div>
+  {/if}
+
+  {#each invoice.items as i}
+    <div class="grid grid-cols-12 text-xl">
+      <div class="col-span-1 my-auto">{i.quantity}</div>
+      <div class="mr-auto grow col-span-7 my-auto">
+        {i.name}
+      </div>
+      <div class="col-span-2 font-semibold text-right my-auto">
+        {f(i.price * i.quantity, currency)}
+      </div>
+      <div class="col-span-2 text-secondary text-right text-lg my-auto">
+        {sat(btc(i.price * i.quantity, rate))}
+      </div>
+    </div>
+  {/each}
+
+  {#if amount > 0}
+    <div class="text-center font-bold text-2xl">
+      <div>
+        {f(amountFiat, currency)}
+
+        {#if tip}
+          <span class="text-sm">
+            +{f(tip * (rate / sats), currency)}
+          </span>
+        {/if}
+      </div>
+      <div>
+        <span class="text-secondary font-normal text-xl"
+          >⚡️{`${s(amount)}`}</span
+        >
+
+        {#if tip}
+          <span class="text-sm text-secondary font-normal">
+            +⚡️{s(tip)}
+          </span>
+        {/if}
+      </div>
+    </div>
+  {/if}
+
+  <div class="text-secondary space-y-2 text-xl pt-2">
+    <button
+      type="button"
+      class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border whitespace-nowrap mb-2"
+      on:click={() => copy(txt)}
+    >
+      <Icon icon="copy" style="w-8 my-auto" />
+      <div class="my-auto">
+        {$t("payments.copy")}
+      </div>
+    </button>
+
+    {#if user?.id === invoice?.user?.id}
+      <button
+        class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
+        on:click={toggleAmount}
+      >
+        <Icon icon="edit" style="mr-1 w-8" />
+        <div class="my-auto">{$t("payments.setAmount")}</div>
+      </button>
+    {:else}
+      <a href={link} class="w-full">
+        <button
+          class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
+        >
+          <Icon icon="mobile" style="mr-1 w-8" />
+          <div class="my-auto">{$t("payments.openLink")}</div>
+        </button>
+      </a>
+    {/if}
+
+    <div class="w-full flex justify-center gap-2 flex-wrap">
+      <button
+        class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
+        on:click={() => ($showQr = !$showQr)}
+      >
+        {#if $showQr}
+          <Icon icon="text" style="w-6 mr-2 my-auto" />
+        {:else}
+          <Icon icon="qr" style="w-8 mr-1 invert my-auto" />
+        {/if}
+        <div class="my-auto">
+          {$showQr ? $t("payments.showText") : $t("payments.showQr")}
+        </div></button
+      >
+    </div>
+  </div>
+
+  {#if account_id === user.id}
+    <div class="grid grid-cols-2 justify-around text-secondary">
+      <button
+        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+        class:bg-primary={type === types.bitcoin}
+        class:text-black={type === types.bitcoin}
+        on:click={() => setType(types.bitcoin)}
+      >
+        <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
+        <div class="my-auto text-lg">Bitcoin</div>
+      </button>
+
+      <button
+        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+        class:bg-primary={type === types.liquid}
+        class:text-black={type === types.liquid}
+        on:click={() => setType(types.liquid)}
+      >
+        <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
+        <div class="my-auto text-lg">Liquid</div>
+      </button>
+
+      <button
+        class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+        class:bg-primary={type === types.lightning}
+        class:text-black={type === types.lightning}
+        on:click={() => setType(types.lightning)}
+      >
+        <div class="bg-white rounded-full w-8 h-8 text-center flex">
+          <div class="m-auto">⚡️</div>
+        </div>
+        <div class="my-auto text-lg">Lightning</div>
+      </button>
+
+      {#if user?.id === invoice?.user?.id}
+        <a href={`/receive`} class="block contents">
+          <button
+            class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+          >
+            <img src="/images/cash.png" class="w-8 my-auto" />
+            <div class="my-auto text-lg">E-cash</div>
+          </button>
+        </a>
+      {/if}
+    </div>
+
+    {#if type === types.liquid}
+      <div class="flex justify-center">
+        <div class="my-auto text-xl text-center text-secondary">
+          {$t("payments.onlyLbtc")}
+          <span class="text-teal-500 font-bold">L-BTC</span>,
+          {$t("payments.dontDeposit")}
+        </div>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+{#if settingAmount}
+  <div
+    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
+  >
+    <div
+      class="relative mx-auto p-12 border w-96 shadow-lg rounded-md bg-white space-y-5 top-10"
+    >
+      <form on:submit|preventDefault={setAmount}>
+        <Numpad
+          bind:amount={newAmount}
+          bind:currency
+          bind:rate
+          bind:fiat
+          bind:submit
+        />
+        <div class="w-full flex flex-wrap gap-2">
+          <button
+            bind:this={submit}
+            type="submit"
+            on:click={setAmount}
+            class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto bg-black text-white w-full"
+          >
+            <div class="my-auto">Ok</div>
+          </button>
+          <button
+            type="button"
+            class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto w-full"
+            on:click={toggleAmount}
+            on:keydown={toggleAmount}
+          >
+            <div class="my-auto">Cancel</div>
+          </button>
+        </div>
+      </form>
+
+      <div class="flex justify-center gap-3">
+        <div class="text-secondary">{$t("payments.amountPrompt")}</div>
+        <Toggle id="notify" bind:value={$amountPrompt} />
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .invoice {
+    view-transition-name: invoice;
+  }
+</style>
diff --git a/src/routes/(app)/account/pass/+page.svelte b/src/routes/(app)/account/pass/+page.svelte
index ee29d2c3..0eb16072 100644
--- a/src/routes/(app)/account/pass/+page.svelte
+++ b/src/routes/(app)/account/pass/+page.svelte
@@ -18,7 +18,7 @@
 
   let { user } = data;
 
-  let confirm, password;
+  let confirm, password, revealPassword, revealConfirm;
 
   onMount(() => {
     if (!$mnemonic) goto("/account/savings");
@@ -65,13 +65,66 @@
     class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5"
   >
     <p class="text-secondary mb-1">
-      Please add a password to the account. It should be different than your
-      login password. <b class="text-red-700">We won't be able to reset it.</b> You'll
-      need it to make withdrawals.
+      Careful! If you lose this password you won't be able to use the account.
+      We can't recover it for you.
     </p>
 
-    <input use:focus type="text" placeholder="Password" bind:value={password} />
-    <input type="text" placeholder="Confirm password" bind:value={confirm} />
+    <div class="relative">
+      {#if revealPassword}
+        <input
+          name="password"
+          type="text"
+          required
+          bind:value={password}
+          autocapitalize="none"
+        />
+      {:else}
+        <input
+          use:focus
+          name="password"
+          type="password"
+          required
+          bind:value={password}
+          autocapitalize="none"
+        />
+      {/if}
+      <button
+        type="button"
+        on:click={() => (revealPassword = !revealPassword)}
+        class="absolute right-5 -translate-y-1/2 top-1/2"
+      >
+        <Icon icon={revealPassword ? "eye" : "eye-off"} />
+      </button>
+    </div>
+
+    <div class="relative">
+      {#if revealConfirm}
+        <input
+          name="password"
+          type="text"
+          placeholder="Confirm password"
+          required
+          bind:value={confirm}
+          autocapitalize="none"
+        />
+      {:else}
+        <input
+          name="password"
+          type="password"
+          placeholder="Confirm password"
+          required
+          bind:value={confirm}
+          autocapitalize="none"
+        />
+      {/if}
+      <button
+        type="button"
+        on:click={() => (revealConfirm = !revealConfirm)}
+        class="absolute right-5 -translate-y-1/2 top-1/2"
+      >
+        <Icon icon={revealConfirm ? "eye" : "eye-off"} />
+      </button>
+    </div>
 
     <button
       class="bg-black text-white w-full px-5 py-6 text-xl rounded-2xl font-bold"
diff --git a/src/routes/(app)/account/seed/+page.svelte b/src/routes/(app)/account/seed/+page.svelte
index 9c19e820..e922d6be 100644
--- a/src/routes/(app)/account/seed/+page.svelte
+++ b/src/routes/(app)/account/seed/+page.svelte
@@ -17,9 +17,6 @@
   });
 
   let generate = async () => {
-    $mnemonic = "- - - - - - - - - - - -";
-    await tick();
-    await new Promise((r) => setTimeout(r, 250));
     $mnemonic = await generateMnemonic(wordlist);
   };
 </script>
@@ -30,7 +27,7 @@
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
     {#if $mnemonic}
       <div
-        class="text-2xl border p-4 rounded-2xl text-secondary grid grid-rows-6 grid-flow-col gap-2 justify-center gap-x-40"
+        class="text-lg border p-4 rounded-2xl text-secondary grid grid-cols-3 gap-2 justify-center"
       >
         {#each $mnemonic.split(" ") as w, i}
           <div>
diff --git a/src/routes/(app)/account/setup/+page.svelte b/src/routes/(app)/account/setup/+page.svelte
index 8304c5ed..f5a5ac09 100644
--- a/src/routes/(app)/account/setup/+page.svelte
+++ b/src/routes/(app)/account/setup/+page.svelte
@@ -8,7 +8,7 @@
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
     <a href="/account/cash" class="block">
       <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
-        <img src="/images/cash.png" class="w-20" />
+        <img src="/images/cash.png" class="w-20 my-auto" />
         <div>
           <div class="text-xl">Cash</div>
           <div class="text-secondary">
@@ -20,7 +20,7 @@
     </a>
     <a href="/account/savings" class="block">
       <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
-        <img src="/images/keys.png" class="w-20" />
+        <img src="/images/keys.png" class="w-20 my-auto" />
         <div>
           <div class="text-xl">Savings</div>
           <div class="text-secondary">
diff --git a/src/routes/(app)/invoice/+page.server.ts b/src/routes/(app)/invoice/+page.server.ts
index 05851430..98bbe8c3 100644
--- a/src/routes/(app)/invoice/+page.server.ts
+++ b/src/routes/(app)/invoice/+page.server.ts
@@ -3,19 +3,18 @@ import { error, redirect } from "@sveltejs/kit";
 import type { Invoice } from "$lib/types";
 
 export let load = async ({ cookies, parent }) => {
-  let account = cookies.get("account");
+  let account_id = cookies.get("account_id");
   let { subject, user, rates } = await parent();
 
   let invoice: Invoice = {
-    account,
-    type: account ? "bitcoin" : "lightning",
+    account_id,
     rate: rates[user?.currency || subject?.currency],
   };
 
   if (!user) user = subject;
 
   try {
-    invoice = await post("/invoice", { invoice, account, user }, auth(cookies));
+    invoice = await post("/invoice", { invoice, account_id, user }, auth(cookies));
   } catch (e) {
     console.log(e);
     error(500, "Failed to generate invoice");
diff --git a/src/routes/(app)/invoice/[id]/+layout.server.ts b/src/routes/(app)/invoice/[id]/+layout.server.ts
index a00515a0..55c44f36 100644
--- a/src/routes/(app)/invoice/[id]/+layout.server.ts
+++ b/src/routes/(app)/invoice/[id]/+layout.server.ts
@@ -7,30 +7,32 @@ export async function load({ depends, params, url, parent }) {
 
   let { subject, user } = await parent();
   let { id } = params;
-  let invoice = await get(`/invoice/${id}`);
-  let options = !!url.searchParams.get("options");
+  let invoice;
 
-  if (
-    user &&
-    invoice.uid !== user.id &&
-    !(url.pathname.includes("tip") || url.pathname.includes("memo")) &&
-    !options
-  ) {
-    console.log("YO")
-    redirect(307, `/send/invoice/${id}`);
-  }
+  if (id) {
+    invoice = await get(`/invoice/${id}`);
+    let options = !!url.searchParams.get("options");
 
-  let { amount, pending, received } = invoice;
-  amount = parseInt(amount);
+    if (
+      user &&
+      invoice.uid !== user.id &&
+      !(url.pathname.includes("tip") || url.pathname.includes("memo")) &&
+      !options
+    ) {
+      redirect(307, `/send/invoice/${id}`);
+    }
 
-  let paid =
-    (!amount && (pending || received)) ||
-    (amount > 0 && (pending >= amount || received >= amount));
-  if (paid && !url.pathname.endsWith("paid")) {
-    redirect(307, `/invoice/${id}/paid` + (options ? "?options=true" : ""));
-  }
+    let { amount, pending, received } = invoice;
+    amount = parseInt(amount);
 
-  let src = Qr.drawImg(invoice.text || "", { size: 500 });
+    let paid =
+      (!amount && (pending || received)) ||
+      (amount > 0 && (pending >= amount || received >= amount));
+    if (paid && !url.pathname.endsWith("paid")) {
+      redirect(307, `/invoice/${id}/paid` + (options ? "?options=true" : ""));
+    }
+  }
 
+  let src = Qr.drawImg(invoice?.text || "", { size: 500 });
   return { id, invoice, subject, src };
 }
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 96ff6406..321129a8 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -40,7 +40,7 @@
   $: refresh(data);
   let { invoice, id, subject, user, src } = data;
   let {
-    account,
+    account_id,
     amount,
     hash,
     type,
@@ -56,7 +56,7 @@
   let refresh = async (data) => {
     ({ invoice, id, user, src } = data);
     ({
-      account,
+      account_id,
       amount,
       hash,
       type,
@@ -82,7 +82,7 @@
         send("subscribe", invoice);
       });
 
-      if ($amountPrompt && !tip) toggleAmount();
+      if ($amountPrompt && tip === null) toggleAmount();
     }
   });
 
@@ -236,10 +236,10 @@
     </div>
   </div>
 
-  {#if !account}
-    <div class="flex justify-around text-secondary">
+  {#if account_id === user.id}
+    <div class="grid grid-cols-2 justify-around text-secondary">
       <button
-        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 w-full justify-center"
+        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
         class:bg-primary={type === types.bitcoin}
         class:text-black={type === types.bitcoin}
         on:click={() => setType(types.bitcoin)}
@@ -249,7 +249,7 @@
       </button>
 
       <button
-        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 w-full justify-center"
+        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
         class:bg-primary={type === types.liquid}
         class:text-black={type === types.liquid}
         on:click={() => setType(types.liquid)}
@@ -259,7 +259,7 @@
       </button>
 
       <button
-        class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 w-full justify-center"
+        class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
         class:bg-primary={type === types.lightning}
         class:text-black={type === types.lightning}
         on:click={() => setType(types.lightning)}
@@ -269,30 +269,28 @@
         </div>
         <div class="my-auto text-lg">Lightning</div>
       </button>
-    </div>
-  {/if}
 
-  {#if type === types.liquid}
-    <div class="flex justify-center">
-      <div class="my-auto text-xl text-center text-secondary">
-        {$t("payments.onlyLbtc")}
-        <span class="text-teal-500 font-bold">L-BTC</span>,
-        {$t("payments.dontDeposit")}
-      </div>
+      {#if user?.id === invoice?.user?.id}
+        <a href={`/receive`} class="block contents">
+          <button
+            class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+          >
+            <img src="/images/cash.png" class="w-8 my-auto" />
+            <div class="my-auto text-lg">E-cash</div>
+          </button>
+        </a>
+      {/if}
     </div>
-  {/if}
 
-  {#if user?.id === invoice?.user?.id}
-    <a href={`/receive`} class="block">
-      <button
-        class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border text-xl whitespace-nowrap text-secondary"
-      >
-        <Icon icon="voucher" style="w-8 my-auto" />
-        <div class="my-auto">
-          {$t("payments.redeemVoucher")}
-        </div></button
-      >
-    </a>
+    {#if type === types.liquid}
+      <div class="flex justify-center">
+        <div class="my-auto text-xl text-center text-secondary">
+          {$t("payments.onlyLbtc")}
+          <span class="text-teal-500 font-bold">L-BTC</span>,
+          {$t("payments.dontDeposit")}
+        </div>
+      </div>
+    {/if}
   {/if}
 </div>
 
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.server.ts b/src/routes/(app)/invoice/[id]/tip/+page.server.ts
index 8417de91..48ebf970 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.server.ts
+++ b/src/routes/(app)/invoice/[id]/tip/+page.server.ts
@@ -1,7 +1,7 @@
 import invoice from "$lib/invoice";
 import { redirect } from "@sveltejs/kit";
 
-export async function load({ parent, params }) {
+export async function load({ parent }) {
   let { invoice } = await parent();
   if (!invoice.amount)
     redirect(307, `/invoice/${invoice.id}`);
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 35b24bf1..e4510693 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -59,6 +59,7 @@
   $: refresh(data);
   let { invoice, id, user, rates } = data;
   let {
+    account_id,
     amount,
     hash,
     items,
@@ -81,6 +82,7 @@
 
     ({ invoice, id } = data);
     ({
+      account_id,
       amount,
       hash,
       items,
@@ -111,6 +113,7 @@
 
 <div class="container px-4 max-w-lg text-center mx-auto">
   <form method="POST" use:enhance class:invisible={submitting}>
+    <input type="hidden" name="account_id" value={account_id} />
     <input type="hidden" name="amount" value={amount} />
     <input type="hidden" name="tip" value={tip} />
     <input type="hidden" name="username" value={username} />
diff --git a/src/routes/(app)/logout/+page.server.ts b/src/routes/(app)/logout/+page.server.ts
index 9c2a029c..03dff6a8 100644
--- a/src/routes/(app)/logout/+page.server.ts
+++ b/src/routes/(app)/logout/+page.server.ts
@@ -7,7 +7,7 @@ const opts = {
 
 export async function load({ cookies }) {
   let lang = cookies.get("lang");
-  cookies.set("account", "", opts);
+  cookies.set("account_id", "", opts);
   cookies.set("lang", "", opts);
   cookies.set("username", "", opts);
   cookies.set("token", "", opts);
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index d1b6cc23..be7fc664 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -18,7 +18,7 @@
 
   let el, text, pasted, w;
 
-  let keypress = (e) => e.key === "Enter" && (e.preventDefault() || el.click());
+  let keypress = (e) => e.key === "Enter" ? (e.preventDefault() || el.click()) : (pasted = false);
 
   let paste = async () => {
     text = await navigator.clipboard.readText();
@@ -52,7 +52,7 @@
         name="text"
         placeholder={$t("user.send.placeholder")}
         on:keypress={keypress}
-        class="w-full p-4 border rounded-xl h-48 text-xl"
+        class="w-full p-4 border rounded-xl h-32 text-xl"
         bind:value={text}
         on:paste={() => (pasted = true)}
         autocapitalize="none"
@@ -95,7 +95,7 @@
           type="button"
           class="flex border rounded-2xl px-6 py-5 w-full font-bold gap-2 justify-center text-xl bg-primary"
         >
-          <Icon icon="voucher" style="w-8 my-auto" />
+          <img src="/images/cash.png" class="w-8" />
           <div class="my-auto">{$t("payments.createEcash")}</div>
         </button>
       </a>
diff --git a/src/routes/(app)/send/ecash/+page.svelte b/src/routes/(app)/send/ecash/+page.svelte
index 615c068a..ef8e368c 100644
--- a/src/routes/(app)/send/ecash/+page.svelte
+++ b/src/routes/(app)/send/ecash/+page.svelte
@@ -30,18 +30,14 @@
 </script>
 
 <div class="container px-4 max-w-xl mx-auto space-y-5 text-center">
-  <h1 class="text-3xl md:text-4xl font-semibold mb-2">
-    {$t("payments.createEcash")}
-  </h1>
-
   <form use:enhance={handler(toggle)} method="POST">
     <Numpad bind:amount bind:fiat {currency} {submit} bind:rate={$rate} />
     <input type="hidden" name="amount" bind:value={amount} />
 
-    <div class="flex justify-center gap-2">
+    <div>
       <button
         type="button"
-        class="hover:opacity-80 bg-black text-white rounded-2xl py-3 px-4 mt-2 border font-bold"
+        class="hover:opacity-80 rounded-2xl py-3 px-4 mt-2 border font-bold w-full max-w-[340px] mx-auto"
         on:click|preventDefault={setMax}
         disabled={submitting}
         on:keydown={setMax}>Max ⚡️{s(balance)}</button
@@ -51,12 +47,13 @@
         use:focus
         bind:this={submit}
         type="submit"
-        class="opacity-100 hover:opacity-80 rounded-2xl border py-3 font-bold 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-full flex justify-center gap-2 max-w-[340px] mx-auto"
       >
         {#if submitting}
           <Spinner />
         {:else}
-          {$t("payments.mint")}
+          <img src="/images/cash.png" class="w-8" />
+          <div class="my-auto">{$t("payments.mint")}</div>
         {/if}
       </button>
     </div>
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
index 57a17e01..74c100f8 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
@@ -58,11 +58,7 @@
   let toggle = () => (show = !show);
 </script>
 
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
-  <Icon icon="arrow-left" style="w-10" />
-</button>
-
-<div class="container px-4 max-w-xl mx-auto text-center space-y-5">
+<div class="container px-4 max-w-xl mx-auto text-center space-y-2">
   {#if amount}
     {#if form?.message}
       <div class="text-red-600 text-center">
@@ -81,12 +77,9 @@
       <h3 class="text-secondary text-xl">⚡️{s(amount)}</h3>
     </div>
 
-    <div>
-      <div class="text-lg text-secondary">
-        {$t("payments.to")}
-      </div>
-
-      <p class="text-2xl break-words font-semibold mb-8">{alias}</p>
+    <div class="text-xl">
+      <span class="text-secondary">{$t("payments.to")}</span>
+      <span class="break-words font-semibold">{alias}</span>
     </div>
 
     {#if ourfee}
@@ -109,7 +102,7 @@
       use:enhance
       on:submit={submit}
       action="?/send"
-      class="space-y-5"
+      class="space-y-2"
     >
       <input name="payreq" value={payreq} type="hidden" />
       <input name="amount" value={amount} type="hidden" />