From f29464d9300b51210191ba56e33f6f6b64df3497 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 28 Dec 2023 22:45:59 -0800
Subject: liquid

---
 .../[username]/invoice/[id]/+layout.server.js      |   2 +-
 .../(app)/[username]/invoice/[id]/+page.svelte     | 109 ++++++++++-----------
 .../[username]/invoice/[id]/paid/+page.svelte      |  17 +++-
 .../[username]/payments/[...page]/+page.svelte     |   8 ++
 .../[username]/receive/[...param]/+page.svelte     |   2 +-
 src/routes/(app)/payment/[id]/+page.svelte         |   5 +-
 6 files changed, 77 insertions(+), 66 deletions(-)

(limited to 'src')

diff --git a/src/routes/(app)/[username]/invoice/[id]/+layout.server.js b/src/routes/(app)/[username]/invoice/[id]/+layout.server.js
index c69da78a..46246724 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+layout.server.js
+++ b/src/routes/(app)/[username]/invoice/[id]/+layout.server.js
@@ -33,7 +33,7 @@ export async function load({ depends, params, url, parent }) {
     );
   }
 
-  let sm = Qr.drawImg(invoice.text || "", { size: 300 });
+  let sm = Qr.drawImg(invoice.text || "", { size: 380 });
 
   return { id, invoice, sm, lg: sm };
 }
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index 9193968a..709f214b 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -123,17 +123,49 @@
   };
 </script>
 
-<div class="container mx-auto max-w-lg px-4 space-y-8">
-  <div class="whitespace-nowrap my-auto ml-auto flex gap-2">
-    <button
-      class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
-      class:bg-black={type === types.lightning}
-      class:text-white={type === types.lightning}
-      on:click={() => setType(types.lightning)}
-    >
-      ⚡️ Lightning
-    </button>
+<div class="container mx-auto max-w-xl px-4 space-y-5">
+  {#if showQr}
+    <a
+      href={[types.bitcoin, types.liquid].includes(invoice.type)
+     ? invoice.text
+     : "lightning:" + invoice.text}
+     >
+     <img
+     {src}
+     class="mx-auto z-10 shadow-inner rounded-2xl"
+     bind:this={qr}
+     alt={txt}
+     />
+    </a>
+  {/if}
+
+
+  {#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-lg"
+          >{`${sat(amount)}`}</span
+        >
+
+        {#if tip}
+          <span class="text-sm text-secondary font-normal">
+            +{sat(tip)}
+          </span>
+        {/if}
+      </div>
+    </div>
+  {/if}
+
+  <div class="whitespace-nowrap my-auto ml-auto flex gap-2">
     <button
       class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full flex justify-center"
       class:bg-black={type === types.bitcoin}
@@ -161,56 +193,17 @@
       />
       <div class="my-auto">Liquid</div>
     </button>
-  </div>
-
-  {#if showQr}
-    <div>
-      <a
-        href={[types.bitcoin, types.liquid].includes(invoice.type)
-          ? invoice.text
-          : "lightning:" + invoice.text}
-      >
-        <div class="relative flex">
-          <div class="flex mx-auto w-[360px] h-[360px]">
-            <img
-              {src}
-              class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]"
-              bind:this={qr}
-              alt={txt}
-            />
-          </div>
-          <div
-            class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0"
-          />
-        </div>
-      </a>
-    </div>
-  {/if}
 
-  {#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-lg"
-          >{`${sat(amount)}`}</span
-        >
+    <button
+      class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
+      class:bg-black={type === types.lightning}
+      class:text-white={type === types.lightning}
+      on:click={() => setType(types.lightning)}
+    >
+      ⚡️ Lightning
+    </button>
 
-        {#if tip}
-          <span class="text-sm text-secondary font-normal">
-            +{sat(tip)}
-          </span>
-        {/if}
-      </div>
-    </div>
-  {/if}
+  </div>
 
   <div class="text-center break-all">
     <a href={link}>
diff --git a/src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte
index 9740dc92..ee00214c 100644
--- a/src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte
@@ -8,21 +8,25 @@
 
   export let data;
   let amount, currency, rate, received, pending, tip, user, id;
-  $: data &&
+  $: update(data)
+  let update = (data) => {
     ({ amount, currency, rate, received, pending, tip, user, id } =
       data.invoice);
+  }
 
   toast.pop(0);
 </script>
 
 <div class="container px-4 text-center mx-auto">
-  <div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
-    <Icon icon="check" style="mx-auto" />
-  </div>
   {#if received}
+    <div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
+      <Icon icon="check" style="mx-auto" />
+    </div>
+
     <h1 class="text-3xl md:text-4xl font-bold mb-6">
       {$t("invoice.paymentSuccessful")}
     </h1>
+
     <h2 class="text-2xl md:text-3xl font-semibold">
       {f(fiat(received - tip, rate), currency)}
       {#if tip}
@@ -43,6 +47,10 @@
   {/if}
 
   {#if pending}
+    <div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
+      <Icon icon="orangeclock" style="mx-auto" />
+    </div>
+
     <h1 class="text-3xl md:text-4xl font-bold mb-6">Payment detected</h1>
     <h2 class="text-2xl md:text-3xl font-semibold">
       {f(fiat(pending - tip, rate), currency)}
@@ -50,6 +58,7 @@
         + {f(fiat(tip, rate), currency)}
       {/if}
     </h2>
+
     <h3 class="text-secondary md:text-lg mb-6 mt-1">
       ⚡️{s(pending - tip)}
       {#if tip}
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index 1f20ea5c..3237011b 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -220,6 +220,14 @@
                         alt="Bitcoin"
                       />
                     </div>
+                  {:else if p.type === types.liquid}
+                    <div class="my-auto mr-1">
+                      <img
+                        src="/images/liquid.svg"
+                        class="w-12 border-4 border-transparent"
+                        alt="Liquid"
+                      />
+                    </div>
                   {/if}
 
                   <div class="my-auto">
diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.svelte b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
index 6d8939a9..7a27bd67 100644
--- a/src/routes/(app)/[username]/receive/[...param]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
@@ -28,7 +28,7 @@
 
 <form
   method="POST"
-  class="flex justify-center items-center mt-24 mb-3 px-3"
+  class="flex justify-center items-center mb-3 px-3"
   use:enhance
 >
   <input type="hidden" name="amount" value={amount} />
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 15c17a00..49af6f70 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -136,7 +136,7 @@
     </div>
   </div>
 
-  {#if type === "bitcoin"}
+  {#if type === "bitcoin" || type === "liquid"}
     <div>
       <span class="text-lg text-secondary">Txid</span>
       <div class="flex">
@@ -146,7 +146,8 @@
         <button
           class="flex font-bold hover:opacity-80 mb-auto my-auto"
           on:click={() => copy(id)}
-          ><Icon icon="copy" style="ml-2 w-20 my-auto" />
+          >
+          <Icon icon="copy" style="ml-2 w-12 my-auto" />
         </button>
       </div>
     </div>
-- 
cgit v1.2.3