feat: deeplinks for wallets

add links on SwapCreated and InvoiceSet on the QR code and as button closes #299 change copy addres to copy bip21
BoltzExchange · Jan 10, 2024 · badb250 · badb250
1 parent a74ed8f
commit badb250
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
@@ -160,6 +160,7 @@ const dict = {
         scan_qr_code: "Scan QR Code",
         version: "Version",
         commithash: "Commit Hash",
+        open_in_wallet: "Open in Wallet",
     },
     de: {
         language: "Deutsch",
@@ -329,6 +330,7 @@ const dict = {
         scan_qr_code: "QR Code scannen",
         version: "Version",
         commithash: "Commit Hash",
+        open_in_wallet: "Im Wallet öffnen",
     },
     es: {
         language: "Español",
@@ -497,6 +499,7 @@ const dict = {
         scan_qr_code: "Escanear código QR",
         version: "Versión",
         commithash: "Commit Hash",
+        open_in_wallet: "Abrir en monedero",
     },
     zh: {
         language: "中文",
@@ -651,6 +654,7 @@ const dict = {
         scan_qr_code: "扫描 QR 码",
         version: "版本",
         commithash: "提交哈希",
+        open_in_wallet: "在钱包中打开",
     },
 };
 

diff --git a/src/status/InvoiceSet.tsx b/src/status/InvoiceSet.tsx
@@ -64,7 +64,9 @@ const InvoiceSet = () => {
                 })}
             </h2>
             <hr />
-            <QrCode data={swap().reverse ? swap().invoice : swap().bip21} />
+            <a href={swap().bip21}>
+                <QrCode data={swap().bip21} />
+            </a>
             <hr />
             <p
                 onclick={() => clipboard(swap().address, t("copied"))}
@@ -77,11 +79,6 @@ const InvoiceSet = () => {
                 <hr />
             </Show>
             <div class="btns">
-                <span
-                    class="btn"
-                    onclick={() => clipboard(swap().bip21, t("copied"))}>
-                    {t("copy_bip21")}
-                </span>
                 <span
                     class="btn"
                     onclick={() =>
@@ -97,9 +94,12 @@ const InvoiceSet = () => {
                 </span>
                 <span
                     class="btn"
-                    onclick={() => clipboard(swap().address, t("copied"))}>
-                    {t("copy_address")}
+                    onclick={() => clipboard(swap().bip21, t("copied"))}>
+                    {t("copy_bip21")}
                 </span>
+                <a href={swap().bip21} class="btn">
+                    {t("open_in_wallet")}
+                </a>
             </div>
             <hr />
         </div>

diff --git a/src/status/SwapCreated.tsx b/src/status/SwapCreated.tsx
@@ -9,6 +9,7 @@ import t from "../i18n";
 import { denomination, webln } from "../signals";
 import { denominations, formatAmount } from "../utils/denomination";
 import { clipboard, cropString } from "../utils/helper";
+import { invoicePrefix } from "../utils/invoice";
 import { enableWebln } from "../utils/webln";
 
 const SwapCreated = () => {
@@ -33,7 +34,9 @@ const SwapCreated = () => {
                 })}
             </h2>
             <hr />
-            <QrCode data={swap().reverse ? swap().invoice : swap().bip21} />
+            <a href={invoicePrefix + swap().invoice}>
+                <QrCode data={swap().invoice} />
+            </a>
             <hr />
             <p
                 onclick={() => clipboard(swap().invoice, t("copied"))}
@@ -50,11 +53,17 @@ const SwapCreated = () => {
                     {t("pay_invoice_webln")}
                 </span>
             </Show>
-            <span
-                class="btn"
-                onclick={() => clipboard(swap().invoice, t("copied"))}>
-                {t("copy_invoice")}
-            </span>
+            <hr class="spacer" />
+            <div class="btns">
+                <span
+                    class="btn"
+                    onclick={() => clipboard(swap().invoice, t("copied"))}>
+                    {t("copy_invoice")}
+                </span>
+                <a href={invoicePrefix + swap().invoice} class="btn">
+                    {t("open_in_wallet")}
+                </a>
+            </div>
         </div>
     );
 };