feat: show when no browser wallet found (#742)

* feat: show when no browser wallet found * chore: add missing strings --------- Co-authored-by: Kilian <[email protected]>
BoltzExchange · Nov 21, 2024 · 93464ac · 93464ac
1 parent 8f6e924
commit 93464ac
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 3 deletions.
diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
@@ -13,7 +13,7 @@ import {
 import type { EIP6963ProviderInfo } from "../consts/Types";
 import { useCreateContext } from "../context/Create";
 import { useGlobalContext } from "../context/Global";
-import { useWeb3Signer } from "../context/Web3";
+import { customDerivationPathRdns, useWeb3Signer } from "../context/Web3";
 import "../style/web3.scss";
 import { formatError } from "../utils/errors";
 import { cropString, isMobile } from "../utils/helper";
@@ -32,6 +32,13 @@ const Modal = (props: {
     const [hardwareProvider, setHardwareProvider] =
         createSignal<EIP6963ProviderInfo>(undefined);
 
+    const hasBrowserWallet = createMemo(() => {
+        return Object.values(providers()).some(
+            (provider) =>
+                !customDerivationPathRdns.includes(provider.info.rdns),
+        );
+    });
+
     const Provider = (providerProps: { provider: EIP6963ProviderInfo }) => {
         return (
             <div
@@ -90,6 +97,14 @@ const Modal = (props: {
                     <IoClose />
                 </span>
                 <hr class="spacer" />
+                <Show when={!hasBrowserWallet()}>
+                    <hr />
+
+                    <div class="no-browser-wallet">
+                        <h3>{t("no_browser_wallet")}</h3>
+                    </div>
+                    <hr class="spacer" />
+                </Show>
                 <For
                     each={Object.values(providers()).sort((a, b) =>
                         a.info.name

diff --git a/src/components/Warning.tsx b/src/components/Warning.tsx
@@ -0,0 +1,5 @@
+const Warning = () => {
+    return <p style={{ "font-size": "46px", margin: "0" }}>⚠️</p>;
+};
+
+export default Warning;
diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
@@ -220,6 +220,7 @@ const dict = {
         wallet_connect_failed: "Wallet connection failed: {{ error }}",
         ledger_open_app_prompt: "Open Ethereum or RSK app",
         copy_preimage: "Copy preimage",
+        no_browser_wallet: "No browser wallet detected",
     },
     de: {
         language: "Deutsch",
@@ -452,6 +453,7 @@ const dict = {
             "Verbindung zu Wallet fehlgeschlagen: {{ error }}",
         ledger_open_app_prompt: "Ethereum oder RSK app öffnen",
         copy_preimage: "Preimage Kopieren",
+        no_browser_wallet: "Kein Browser Wallet gefunden",
     },
     es: {
         language: "Español",
@@ -682,6 +684,7 @@ const dict = {
         wallet_connect_failed: "Fallo en la conexión del monedero: {{ error }}",
         ledger_open_app_prompt: "Abrir aplicación Ethereum o RSK",
         copy_preimage: "Copiar preimagen",
+        no_browser_wallet: "No se detectó monedero en el navegador",
     },
     zh: {
         language: "中文",
@@ -885,6 +888,7 @@ const dict = {
         wallet_connect_failed: "钱包连接失败：{{ error }}",
         ledger_open_app_prompt: "打开以太坊或 RSK 应用",
         copy_preimage: "复制预图像",
+        no_browser_wallet: "未检测到浏览器钱包",
     },
     ja: {
         language: "日本語",
@@ -1112,6 +1116,7 @@ const dict = {
         wallet_connect_failed: "ウォレット接続の失敗: {{ error }}",
         ledger_open_app_prompt: "イーサリアムもしくはRSKのアプリを開く",
         copy_preimage: "コピー前画像",
+        no_browser_wallet: "ブラウザのウォレットが検出されない",
     },
 };
 

diff --git a/src/pages/Error.tsx b/src/pages/Error.tsx
@@ -1,10 +1,11 @@
+import Warning from "../components/Warning";
 import { useGlobalContext } from "../context/Global";
 
 const Error = (props: { error?: string; subline?: string }) => {
     const { t } = useGlobalContext();
     return (
         <div class="frame">
-            <p style={{ "font-size": "46px", margin: "0" }}>⚠️</p>
+            <Warning />
             <hr />
             <h2>{props.error || t("error")}</h2>
             <p>{props.subline || t("error_subline")}</p>

diff --git a/src/pages/RefundStep.tsx b/src/pages/RefundStep.tsx
@@ -3,6 +3,7 @@ import log from "loglevel";
 import { For, createResource } from "solid-js";
 
 import DownloadRefund from "../components/DownloadRefund";
+import Warning from "../components/Warning";
 import { useGlobalContext } from "../context/Global";
 import { usePayContext } from "../context/Pay";
 import type { DictKey } from "../i18n/i18n";
@@ -39,7 +40,7 @@ const RefundStep = () => {
                     </For>
                 </ul>
                 <hr />
-                <p style={{ "font-size": "46px", margin: "0" }}>⚠️</p>
+                <Warning />
                 <h3>{t("backup_refund_skip")}</h3>
                 <hr />
                 <div class="btns btns-space-between">

diff --git a/src/style/web3.scss b/src/style/web3.scss
@@ -33,3 +33,7 @@
     height: 4rem;
     min-width: 5rem;
 }
+
+.no-browser-wallet {
+    margin: 1rem;
+}