From 207b3ca5df0aa4c18e7d6fc2a2e06569fc87a593 Mon Sep 17 00:00:00 2001
From: michael1011 <me@michael1011.at>
Date: Fri, 15 Nov 2024 13:06:32 +0100
Subject: [PATCH] feat: show when no browser wallet found

---
 src/components/ConnectWallet.tsx | 19 ++++++++++++++++++-
 src/components/Warning.tsx       |  5 +++++
 src/i18n/i18n.ts                 |  1 +
 src/pages/Error.tsx              |  3 ++-
 src/pages/RefundStep.tsx         |  3 ++-
 src/style/web3.scss              |  8 ++++++++
 6 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Warning.tsx

diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
index c392b6f9..5ba25987 100644
--- a/src/components/ConnectWallet.tsx
+++ b/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
diff --git a/src/components/Warning.tsx b/src/components/Warning.tsx
new file mode 100644
index 00000000..a17e29b5
--- /dev/null
+++ 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
index 6828bc20..e802d0a7 100644
--- 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",
diff --git a/src/pages/Error.tsx b/src/pages/Error.tsx
index c156d0a2..50fcb236 100644
--- 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
index 90e5b735..b3b88a0f 100644
--- 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
index fd9574ad..753ce51a 100644
--- a/src/style/web3.scss
+++ b/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;
+}