feat: detect and switch network

BoltzExchange · Aug 9, 2024 · f386d8e · f386d8e
1 parent 8d047e5
commit f386d8e
Show file tree

Hide file tree

Showing 8 changed files with 186 additions and 83 deletions.
diff --git a/src/components/ConnectMetamask.tsx b/src/components/ConnectMetamask.tsx
@@ -149,26 +149,45 @@ export const ConnectAddress = ({ address }: { address: string }) => {
     const { connectProviderForAddress } = useWeb3Signer();
 
     return (
-        <>
-            <button
-                id="metamask"
-                class="btn"
-                onClick={async () => {
-                    try {
-                        await connectProviderForAddress(address);
-                    } catch (e) {
-                        log.error(
-                            `Provider connect for address ${address} failed: ${formatError(e)}`,
-                        );
-                        notify(
-                            "error",
-                            `Wallet connection failed: ${formatError(e)}`,
-                        );
-                    }
-                }}>
-                {t("connect_to_address")}
-            </button>
-        </>
+        <button
+            id="metamask"
+            class="btn"
+            onClick={async () => {
+                try {
+                    await connectProviderForAddress(address);
+                } catch (e) {
+                    log.error(
+                        `Provider connect for address ${address} failed: ${formatError(e)}`,
+                    );
+                    notify(
+                        "error",
+                        `Wallet connection failed: ${formatError(e)}`,
+                    );
+                }
+            }}>
+            {t("connect_to_address")}
+        </button>
+    );
+};
+
+export const SwitchNetwork = () => {
+    const { t, notify } = useGlobalContext();
+    const { switchNetwork } = useWeb3Signer();
+
+    return (
+        <button
+            id="metamask"
+            class="btn"
+            onClick={async () => {
+                try {
+                    await switchNetwork();
+                } catch (e) {
+                    log.error(`Network switch failed: ${formatError(e)}`);
+                    notify("error", `Network switch failed: ${formatError(e)}`);
+                }
+            }}>
+            {t("switch_network")}
+        </button>
     );
 };
 
@@ -186,21 +205,17 @@ const ConnectMetamask = () => {
     });
 
     return (
-        <>
-            <Show
-                when={Object.keys(providers()).length > 0}
-                fallback={
-                    <button class="btn" disabled>
-                        {t("no_metamask")}
-                    </button>
-                }>
-                <Show
-                    when={address() !== undefined}
-                    fallback={<ConnectModal />}>
-                    <ShowAddress address={address} />
-                </Show>
+        <Show
+            when={Object.keys(providers()).length > 0}
+            fallback={
+                <button class="btn" disabled>
+                    {t("no_metamask")}
+                </button>
+            }>
+            <Show when={address() !== undefined} fallback={<ConnectModal />}>
+                <ShowAddress address={address} />
             </Show>
-        </>
+        </Show>
     );
 };
 

diff --git a/src/components/ContractTransaction.tsx b/src/components/ContractTransaction.tsx
@@ -1,10 +1,10 @@
 import log from "loglevel";
-import { Show, createSignal } from "solid-js";
+import { Show, createEffect, createSignal } from "solid-js";
 
 import { useGlobalContext } from "../context/Global";
 import { useWeb3Signer } from "../context/Web3";
 import { formatError } from "../utils/errors";
-import { ConnectAddress } from "./ConnectMetamask";
+import { ConnectAddress, SwitchNetwork } from "./ConnectMetamask";
 import LoadingSpinner from "./LoadingSpinner";
 
 const ContractTransaction = ({
@@ -23,49 +23,62 @@ const ContractTransaction = ({
     waitingText?: string;
 }) => {
     const { notify } = useGlobalContext();
-    const { signer } = useWeb3Signer();
+    const { signer, getContracts } = useWeb3Signer();
     const [txSent, setTxSent] = createSignal(false);
     const [clicked, setClicked] = createSignal(false);
 
+    const [signerNetwork, setSignerNetwork] = createSignal<number | undefined>(
+        undefined,
+    );
+
+    createEffect(async () => {
+        const network = await signer()?.provider?.getNetwork();
+        setSignerNetwork(Number(network?.chainId));
+    });
+
     return (
         <Show
             when={signer() !== undefined && address === signer().address}
             fallback={<ConnectAddress address={address} />}>
             <Show
-                when={!txSent()}
-                fallback={
-                    <>
-                        <Show when={waitingText}>
-                            <p>{waitingText}</p>
-                        </Show>
-                        <LoadingSpinner />
-                    </>
-                }>
-                <Show when={promptText}>
-                    <p>{promptText}</p>
-                </Show>
-                <button
-                    class="btn"
-                    disabled={clicked()}
-                    onClick={async () => {
-                        setClicked(true);
-                        try {
-                            await onClick();
-                            setTxSent(true);
-                        } catch (e) {
-                            log.error(`EVM transaction failed`, e);
-                            notify(
-                                "error",
-                                `Transaction failed: ${formatError(e)}`,
-                            );
-                        } finally {
-                            setClicked(false);
-                        }
-                    }}>
-                    {buttonText}
-                </button>
-                <Show when={showHr}>
-                    <hr />
+                when={getContracts().network.chainId === signerNetwork()}
+                fallback={<SwitchNetwork />}>
+                <Show
+                    when={!txSent()}
+                    fallback={
+                        <>
+                            <Show when={waitingText}>
+                                <p>{waitingText}</p>
+                            </Show>
+                            <LoadingSpinner />
+                        </>
+                    }>
+                    <Show when={promptText}>
+                        <p>{promptText}</p>
+                    </Show>
+                    <button
+                        class="btn"
+                        disabled={clicked()}
+                        onClick={async () => {
+                            setClicked(true);
+                            try {
+                                await onClick();
+                                setTxSent(true);
+                            } catch (e) {
+                                log.error(`EVM transaction failed`, e);
+                                notify(
+                                    "error",
+                                    `Transaction failed: ${formatError(e)}`,
+                                );
+                            } finally {
+                                setClicked(false);
+                            }
+                        }}>
+                        {buttonText}
+                    </button>
+                    <Show when={showHr}>
+                        <hr />
+                    </Show>
                 </Show>
             </Show>
         </Show>

diff --git a/src/config.ts b/src/config.ts
@@ -28,6 +28,7 @@ const defaults = {
 
 type Asset = {
     apiUrl?: Url;
+    network?: any;
     blockExplorerUrl?: Url;
 
     rifRelay?: string;

diff --git a/src/configs/regtest.json b/src/configs/regtest.json
@@ -19,6 +19,15 @@
             "blockExplorerUrl": {
                 "normal": "http://localhost:5100"
             },
+            "network": {
+                "chainName": "Anvil",
+                "rpcUrls": ["http://localhost:8545"],
+                "nativeCurrency": {
+                    "name": "RBTC",
+                    "symbol": "RBTC",
+                    "decimals": 18
+                }
+            },
             "rifRelay": "http://localhost:8090",
             "contracts": {
                 "smartWalletFactory": "0x59b670e9fA9D0A427751Af201D676719a970857b",

diff --git a/src/configs/testnet.json b/src/configs/testnet.json
@@ -19,6 +19,15 @@
             "blockExplorerUrl": {
                 "normal": "https://explorer.testnet.rsk.co"
             },
+            "network": {
+                "chainName": "Rootstock Testnet",
+                "rpcUrls": ["https://public-node.testnet.rsk.co"],
+                "nativeCurrency": {
+                    "name": "RBTC",
+                    "symbol": "RBTC",
+                    "decimals": 18
+                }
+            },
             "rifRelay": "https://boltz.testnet.relay.rifcomputing.net",
             "contracts": {
                 "smartWalletFactory": "0xaa67dEDd76f9b540d3c136b1F9095696ac92A5A7",