feat: show when no browser wallet found

src/components/ConnectWallet.tsx

@@ -13,11 +13,12 @@ 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";
 import HardwareDerivationPaths, { connect } from "./HardwareDerivationPaths";
+import Warning from "./Warning";
 
 const Modal = (props: {
     derivationPath: string;
@@ -32,6 +33,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 +98,15 @@ const Modal = (props: {
                     <IoClose />
                 </span>
                 <hr class="spacer" />
+                <Show when={!hasBrowserWallet()}>
+                    <hr />
+
+                    <div class="no-browser-wallet">
+                        <Warning />
+                        <h3>{t("no_browser_wallet")}</h3>
+                    </div>
+                    <hr class="spacer" />
+                </Show>
                 <For
                     each={Object.values(providers()).sort((a, b) =>
                         a.info.name

src/components/Warning.tsx

@@ -0,0 +1,5 @@
+const Warning = () => {
+    return <p style={{ "font-size": "46px", margin: "0" }}>⚠️</p>;
+};
+
+export default Warning;

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",

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>

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">

src/style/web3.scss

@@ -33,3 +33,11 @@
     height: 4rem;
     min-width: 5rem;
 }
+
+.no-browser-wallet {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    gap: 1rem;
+}