set memo

6 files changed, 81 insertions, 56 deletions

diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte
deleted file mode 100644
index 3298dfe5..00000000
--- a/src/components/Invoice.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-  import { t } from "$lib/translations";
-  import { f, sat, sats } from "$lib/utils";
-  import { fly } from "svelte/transition";
-  import Avatar from "$comp/Avatar.svelte";
-  import Icon from "$comp/Icon.svelte";
-  import { invoice } from "$lib/store";
-</script>
-
-{#if $invoice}
-  <div class="fixed bottom-0 border-t w-full p-4 bg-white z-50" in:fly>
-    <div class="flex flex-wrap md:flex-nowrap max-w-xl mx-auto gap-2">
-      <div class="my-auto mx-auto">
-        <div class="flex">
-          <Avatar user={$invoice.user.username} size={12} />
-          <h1 class="my-auto">
-            <b>{$invoice.user.username}</b>
-            {$t("payments.isRequesting")}
-            <b
-              >{f(
-                ($invoice.amount * $invoice.rate) / sats,
-                $invoice.currency,
-              )}</b
-            >
-            {sat($invoice.amount)}
-          </h1>
-        </div>
-      </div>
-      <div class="mx-auto my-auto flex gap-2">
-        <a href={`/invoice/${$invoice.id}/tip`}>
-          <button
-            class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-32"
-          >
-            {$t("payments.pay")}
-          </button>
-        </a>
-      </div>
-    </div>
-  </div>
-{/if}
diff --git a/src/components/InvoiceActions.svelte b/src/components/InvoiceActions.svelte
index cd66fc36..23268a19 100644
--- a/src/components/InvoiceActions.svelte
+++ b/src/components/InvoiceActions.svelte
@@ -6,10 +6,10 @@
     t,
     link,
     type,
-    types,
     showQr = $bindable(),
     txt,
-    toggleAmount
+    toggleAmount,
+    toggleMemo,
   } = $props();
 </script>
 
@@ -35,11 +35,19 @@
     </a>
   {/if}
 
+  <button class="btn" onclick={toggleMemo}>
+    <iconify-icon icon="ph:chat-centered-text-bold" width="32"></iconify-icon>
+    <div class="my-auto">
+      {t("invoice.setMemo")}
+    </div>
+  </button>
+
   {#if txt.length > 120}
     <div class="w-full flex justify-center gap-2 flex-wrap">
       <button class="btn" onclick={() => (showQr = !showQr)}>
         {#if showQr}
-          <iconify-icon icon="ph:text-align-center-bold" width="32"></iconify-icon>
+          <iconify-icon icon="ph:text-align-center-bold" width="32"
+          ></iconify-icon>
         {:else}
           <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon>
         {/if}
diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index 4ce39036..bd6adb97 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -1,7 +1,7 @@
 <script>
   import Amount from "$comp/Amount.svelte";
 
-  import { btc, f, sat, s, sats } from "$lib/utils";
+  import { btc, f, sat, s, sats, types } from "$lib/utils";
   let {
     showQr,
     link,
@@ -13,7 +13,10 @@
     locale,
     tip,
     rate,
+    t,
   } = $props();
+
+  let { memo } = $derived(invoice);
 </script>
 
 {#if showQr}
@@ -28,6 +31,20 @@
   </div>
 {/if}
 
+{#if invoice.type === types.liquid}
+  <div class="flex justify-center p-4 shadow items-center gap-2">
+    <iconify-icon icon="ph:warning-bold" width="48" class="text-warning"
+    ></iconify-icon>
+    <div>
+      <div class="my-auto text-xl text-center text-secondary">
+        {t("payments.onlyLbtc")}
+        <span class="text-teal-500 font-bold">L-BTC</span> &mdash;
+        {t("payments.dontDeposit")}
+      </div>
+    </div>
+  </div>
+{/if}
+
 {#if !showQr || txt.length <= 120}
   <div class="break-all text-center text-secondary text-xl">
     {txt}
@@ -52,3 +69,7 @@
 {#if amount > 0}
   <Amount {amount} {currency} {rate} {locale} {tip} />
 {/if}
+
+{#if memo}
+  <div class="text-xl text-center">{memo}</div>
+{/if}
diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte
index a0a1fc12..00b5cfb3 100644
--- a/src/components/InvoiceTypes.svelte
+++ b/src/components/InvoiceTypes.svelte
@@ -1,6 +1,7 @@
 <script>
+  import { types } from "$lib/utils";
   import { goto } from "$app/navigation";
-  let { aid, invoice, user, type, types, t, setType } = $props();
+  let { aid, invoice, user, type, t, setType } = $props();
 </script>
 
 {#if invoice.uid === aid}
@@ -89,14 +90,4 @@
     </div>
     <div class="my-auto text-lg">Bolt 12</div>
   </button>
-
-  {#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}
diff --git a/src/components/SetAmount.svelte b/src/components/SetAmount.svelte
index ddf90a17..a453b9d1 100644
--- a/src/components/SetAmount.svelte
+++ b/src/components/SetAmount.svelte
@@ -3,12 +3,13 @@
   import Numpad from "$comp/Numpad.svelte";
   import Toggle from "$comp/Toggle.svelte";
 
+  let submit = $state();
+
   let {
     currency = $bindable(),
     fiat = $bindable(),
     locale = $bindable(),
     rate = $bindable(),
-    submit = $bindable(),
     settingAmount,
     setAmount,
     newAmount = $bindable(),
diff --git a/src/components/SetMemo.svelte b/src/components/SetMemo.svelte
new file mode 100644
index 00000000..f11bf780
--- /dev/null
+++ b/src/components/SetMemo.svelte
@@ -0,0 +1,44 @@
+<script>
+  import { focus } from "$lib/utils";
+
+  let {
+    submit = $bindable(),
+    settingMemo,
+    setMemo,
+    memo = $bindable(),
+    toggleMemo,
+    t,
+  } = $props();
+</script>
+
+{#if settingMemo}
+  <div
+    class="fixed inset-0 bg-base-100 bg-opacity-90 overflow-y-auto h-full w-full z-50"
+  >
+    <div
+      class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-5"
+    >
+      <form onsubmit={setMemo} class="space-y-5">
+        <input use:focus placeholder={t("invoice.memo")} bind:value={memo} />
+        <div class="w-full flex flex-wrap gap-2">
+          <button
+            bind:this={submit}
+            type="submit"
+            onclick={setMemo}
+            class="btn btn-accent"
+          >
+            <div class="my-auto">{t("payments.ok")}</div>
+          </button>
+          <button
+            type="button"
+            class="btn"
+            onclick={toggleMemo}
+            onkeydown={toggleMemo}
+          >
+            <div class="my-auto">{t("payments.cancel")}</div>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+{/if}