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 23, 2024 · f5e9889 · f5e9889
1 parent 9d5f7ea
commit f5e9889
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 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
@@ -9,7 +9,7 @@ import { useGlobalContext } from "../context/Global";
 import { usePayContext } from "../context/Pay";
 import { useWeb3Signer } from "../context/Web3";
 import { denominations, formatAmount } from "../utils/denomination";
-import { clipboard, cropString } from "../utils/helper";
+import { clipboard, cropString, isMobile } from "../utils/helper";
 import { decodeInvoice } from "../utils/invoice";
 import { prefix0x, satoshiToWei } from "../utils/rootstock";
 
@@ -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)}
@@ -77,9 +79,6 @@ const InvoiceSet = () => {
                 <hr />
             </Show>
             <div class="btns">
-                <span class="btn" onclick={() => clipboard(swap().bip21)}>
-                    {t("copy_bip21")}
-                </span>
                 <span
                     class="btn"
                     onclick={() =>
@@ -92,9 +91,19 @@ const InvoiceSet = () => {
                     }>
                     {t("copy_amount")}
                 </span>
-                <span class="btn" onclick={() => clipboard(swap().address)}>
-                    {t("copy_address")}
+                <Show when={!isMobile}>
+                    <span class="btn" onclick={() => clipboard(swap().address)}>
+                        {t("copy_address")}
+                    </span>
+                </Show>
+                <span class="btn" onclick={() => clipboard(swap().bip21)}>
+                    {t("copy_bip21")}
                 </span>
+                <Show when={isMobile}>
+                    <a href={swap().bip21} class="btn">
+                        {t("open_in_wallet")}
+                    </a>
+                </Show>
             </div>
             <hr />
         </div>

diff --git a/src/status/SwapCreated.tsx b/src/status/SwapCreated.tsx
@@ -7,7 +7,8 @@ import { BTC } from "../consts";
 import { useGlobalContext } from "../context/Global";
 import { usePayContext } from "../context/Pay";
 import { denominations, formatAmount } from "../utils/denomination";
-import { clipboard, cropString } from "../utils/helper";
+import { clipboard, cropString, isMobile } 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)}
@@ -50,9 +53,17 @@ const SwapCreated = () => {
                     {t("pay_invoice_webln")}
                 </span>
             </Show>
-            <span class="btn" onclick={() => clipboard(swap().invoice)}>
-                {t("copy_invoice")}
-            </span>
+            <hr class="spacer" />
+            <div class="btns">
+                <span class="btn" onclick={() => clipboard(swap().invoice)}>
+                    {t("copy_invoice")}
+                </span>
+                <Show when={isMobile}>
+                    <a href={invoicePrefix + swap().invoice} class="btn">
+                        {t("open_in_wallet")}
+                    </a>
+                </Show>
+            </div>
         </div>
     );
 };