liquid

3 files changed, 73 insertions, 8 deletions

diff --git a/src/lib/utils.js b/src/lib/utils.js
index 755d8daf..9dbdc2ab 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -266,6 +266,7 @@ export function ss(str1, str2) {
 
 export let types = {
   bitcoin: "bitcoin",
+  liquid: "liquid",
   lightning: "lightning",
   internal: "internal",
   fund: "fund",
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index 0ff1c21c..9193968a 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -109,12 +109,11 @@
     }
   });
 
-  $: link = type === "bitcoin" ? text : `lightning:${text}`;
-  $: txt = type === "bitcoin" ? hash : text;
+  $: link = [types.bitcoin, types.liquid].includes(type) ? text : `lightning:${text}`;
+  $: txt = [types.bitcoin, types.liquid].includes(type) ? hash : text;
 
-  let toggleType = async () => {
-    invoice.type =
-      invoice.type === types.lightning ? types.bitcoin : types.lightning;
+  let setType = async (type) => {
+    invoice.type = type;
     ({ id } = await post(`/${username}/invoice`, {
       invoice,
       user: { username, currency },
@@ -130,7 +129,7 @@
       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={toggleType}
+      on:click={() => setType(types.lightning)}
     >
       ⚡️ Lightning
     </button>
@@ -139,7 +138,7 @@
       class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full flex justify-center"
       class:bg-black={type === types.bitcoin}
       class:text-white={type === types.bitcoin}
-      on:click={toggleType}
+      on:click={() => setType(types.bitcoin)}
     >
       <img
         src="/images/bitcoin.svg"
@@ -148,12 +147,26 @@
       />
       <div class="my-auto">Bitcoin</div>
     </button>
+
+    <button
+      class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full flex justify-center"
+      class:bg-black={type === types.liquid}
+      class:text-white={type === types.liquid}
+      on:click={() => setType(types.liquid)}
+    >
+      <img
+        src="/images/liquid.svg"
+        class="my-auto w-8 border-4 border-transparent"
+        alt="Bitcoin"
+      />
+      <div class="my-auto">Liquid</div>
+    </button>
   </div>
 
   {#if showQr}
     <div>
       <a
-        href={invoice.type === "bitcoin"
+        href={[types.bitcoin, types.liquid].includes(invoice.type)
           ? invoice.text
           : "lightning:" + invoice.text}
       >
diff --git a/static/images/liquid.svg b/static/images/liquid.svg
new file mode 100644
index 00000000..f6879ad1
--- /dev/null
+++ b/static/images/liquid.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 46 46" style="enable-background:new 0 0 46 46;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#46B4A5;}
+	.st1{fill:#FFFFFF;}
+</style>
+<desc>Created with Sketch.</desc>
+<g id="nav_liquid">
+	<g id="Group-7">
+		<circle id="Oval" class="st0" cx="23" cy="23" r="23"/>
+	</g>
+</g>
+<g>
+	<g>
+		<g>
+			<path class="st1" d="M14.6,29c-0.5,0-1-0.3-1.3-0.8c-0.8-1.8-1.1-3.7-1.1-5.6c0-7.3,5.4-13.4,12.6-14.3c0.8-0.1,1.4,0.4,1.5,1.2
+				s-0.4,1.4-1.2,1.5c-5.8,0.7-10.2,5.7-10.2,11.6c0,1.6,0.3,3.1,0.9,4.5c0.3,0.7,0,1.5-0.7,1.8C15,29,14.8,29,14.6,29z"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<path class="st1" d="M17.6,21.4c-0.1,0-0.1,0-0.2,0c-0.4-0.1-0.7-0.6-0.6-1c1.2-4.6,5.4-7.8,10.1-7.8c2.4,0,4.8,0.9,6.7,2.4
+				c0.4,0.3,0.4,0.8,0.1,1.2c-0.3,0.4-0.8,0.4-1.2,0.1c-1.6-1.3-3.6-2-5.6-2c-4,0-7.5,2.7-8.5,6.6C18.3,21.1,17.9,21.4,17.6,21.4z"
+				/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<path class="st1" d="M20.8,38.6c-0.1,0-0.2,0-0.2,0c-6.9-2.1-11.7-8.8-11.7-16.2c0-3.2,0.9-6.3,2.6-9c0.3-0.4,0.8-0.5,1.2-0.3
+				c0.4,0.3,0.5,0.8,0.3,1.2c-1.5,2.4-2.4,5.2-2.4,8.1c0,6.7,4.3,12.7,10.5,14.6c0.4,0.1,0.7,0.6,0.6,1
+				C21.5,38.4,21.2,38.6,20.8,38.6z"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<path class="st1" d="M26.6,36.4c-4.1,0-7.9-1.6-10.5-4.4c-0.4-0.4-0.4-1.1,0.1-1.5c0.4-0.4,1.1-0.4,1.5,0.1
+				c2.2,2.5,5.7,3.8,9.5,3.6c0.6,0,1.1,0.4,1.1,1s-0.4,1.1-1,1.1C27.1,36.4,26.8,36.4,26.6,36.4z"/>
+		</g>
+	</g>
+	<g>
+		<path class="st1" d="M33.6,28.8c-0.3-0.3-0.8-0.4-1.2-0.1c-0.7,0.6-1.5,1.1-2.3,1.5c0,0-0.1,0-0.1,0.1c-0.1,0-0.2,0.1-0.4,0.1l0,0
+			c-0.1,0.1-0.3,0.1-0.4,0.1c-0.3,0.1-0.7,0.2-1,0.2l0,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.2,0s-0.1,0-0.2,0s-0.3,0-0.4,0H27
+			c-0.1,0-0.2,0-0.3,0h-0.1c-0.9,0-1.8-0.2-2.6-0.4c-0.4-0.1-0.9,0.1-1.1,0.5c-0.1,0.4,0.1,0.9,0.5,1.1c1,0.3,2,0.5,3,0.5l0,0
+			c0.1,0,0.1,0,0.2,0l0,0l0,0l0,0c0.2,0,0.3,0,0.5,0c0.1,0,0.1,0,0.2,0s0.2,0,0.3,0c0.1,0,0.3,0,0.4,0s0.1,0,0.2,0s0.2,0,0.3-0.1
+			c0,0,0,0,0.1,0c0.5-0.1,1.1-0.3,1.6-0.4c0,0,0,0,0.1,0s0.3-0.1,0.4-0.2c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1,0,0.1-0.1l0,0
+			c0.9-0.4,1.8-1,2.6-1.7C33.9,29.7,33.9,29.1,33.6,28.8z"/>
+	</g>
+</g>
+</svg>