feat: add WalletConnect

.env.sample

@@ -1,6 +1,10 @@
 # RSK RPC URL for logs scanning which is not supported by the public RPCs
 VITE_RSK_LOG_SCAN_ENDPOINT=
 
+# WalletConnect project id
+# WalletConnect option will not be visible if not set
+VITE_WALLETCONNECT_PROJECT_ID=
+
 # Token for the Chatwoot website inbox
 # The chat widget will not be loaded if not set
 VITE_CHATWOOT_TOKEN=

build.py

@@ -34,9 +34,11 @@ def handle_coop_disabled():
 
             for var in [
                 "VITE_RSK_LOG_SCAN_ENDPOINT",
-                "VITE_CHATWOOT_TOKEN"
+                "VITE_WALLETCONNECT_PROJECT_ID",
+                "VITE_CHATWOOT_TOKEN",
             ]:
                 if var not in data:
                     print(f"WARN: {var} not in .env file")
+
     except Exception as e:
         print("WARN: could not open .env file:", e)

eslint.config.mjs

@@ -49,10 +49,12 @@ export default [
                             message: "It is a heavy dependency",
                             group: [
                                 "boltz-bolt12",
+                                "@reown/appkit",
                                 "@trezor/connect",
                                 "@trezor/connect-web",
                                 "@ledgerhq/hw-app-eth",
                                 "@ledgerhq/hw-transport",
+                                "@reown/appkit-adapter-ethers",
                                 "@ledgerhq/hw-transport-webhid",
                                 "@vulpemventures/secp256k1-zkp",
                             ],

package.json

@@ -65,6 +65,8 @@
         "@fontsource/noto-sans": "^5.1.0",
         "@ledgerhq/hw-app-eth": "6.38.2",
         "@ledgerhq/hw-transport-webhid": "^6.29.4",
+        "@reown/appkit": "^1.5.3",
+        "@reown/appkit-adapter-ethers": "^1.5.3",
         "@scure/base": "^1.2.1",
         "@solid-primitives/i18n": "^2.1.1",
         "@solid-primitives/storage": "^4.2.1",

src/components/ConnectWallet.tsx

@@ -18,6 +18,7 @@ import "../style/web3.scss";
 import { formatError } from "../utils/errors";
 import { cropString, isMobile } from "../utils/helper";
 import HardwareDerivationPaths, { connect } from "./HardwareDerivationPaths";
+import { WalletConnect } from "./WalletConnect";
 
 const Modal = (props: {
     derivationPath: string;
@@ -213,6 +214,7 @@ export const ConnectAddress = (props: {
                     );
                 }
             }}>
+            <WalletConnect />
             {t("connect_to_address")}
         </button>
     );
@@ -276,6 +278,7 @@ const ConnectWallet = (props: {
                     {t("no_wallet")}
                 </button>
             }>
+            <WalletConnect />
             <Show
                 when={address() !== undefined}
                 fallback={

src/components/WalletConnect.tsx

@@ -0,0 +1,92 @@
+import { BrowserProvider } from "ethers";
+import log from "loglevel";
+import { createEffect, createResource } from "solid-js";
+
+import { config } from "../config";
+import { RBTC } from "../consts/Assets";
+import { useWeb3Signer } from "../context/Web3";
+import loader from "../lazy/walletConnect";
+import WalletConnectProvider from "../utils/WalletConnectProvider";
+
+const getLocation = () => {
+    const { protocol, host } = window.location;
+    return `${protocol}//${host}`;
+};
+
+export const WalletConnect = () => {
+    const { openWalletConnectModal, setOpenWalletConnectModal } =
+        useWeb3Signer();
+
+    const [createdKit] = createResource(async () => {
+        const configRsk = config.assets[RBTC];
+
+        const { appKit, EthersAdapter } = await loader.get();
+        const created = appKit.createAppKit({
+            themeMode: "dark",
+            enableEIP6963: false,
+            enableInjected: false,
+            adapters: [new EthersAdapter()],
+            projectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID as string,
+            networks: [
+                {
+                    id: configRsk.network.chainId,
+                    name: configRsk.network.chainName,
+                    nativeCurrency: {
+                        name: RBTC,
+                        symbol: RBTC,
+                        decimals: 18,
+                    },
+                    rpcUrls: {
+                        default: {
+                            http: configRsk.network.rpcUrls,
+                        },
+                    },
+                    blockExplorers: {
+                        default: {
+                            name: "Explorer",
+                            url: configRsk.blockExplorerUrl.normal,
+                        },
+                    },
+                },
+            ],
+            metadata: {
+                name: "Boltz",
+                description: "Boltz Web App",
+                url: getLocation(),
+                icons: [`${getLocation()}/android-chrome-512x512.png`],
+            },
+            features: {
+                email: false,
+                socials: false,
+                analytics: true,
+            },
+        });
+
+        created.subscribeEvents(async (ev) => {
+            log.debug(`WalletConnect event: ${ev.data.event}`);
+
+            if (ev.data.event !== "MODAL_CLOSE") {
+                setOpenWalletConnectModal(false);
+                return;
+            }
+
+            const address = created.getAddress();
+            const provider = new BrowserProvider(
+                await created.getUniversalProvider(),
+            );
+
+            WalletConnectProvider.resolveClosePromise(provider, address);
+        });
+
+        return created;
+    });
+
+    // eslint-disable-next-line solid/reactivity
+    createEffect(async () => {
+        if (openWalletConnectModal()) {
+            await createdKit().open();
+        }
+    });
+
+    return <></>;
+};

src/config.ts

@@ -40,6 +40,7 @@ type Asset = {
     };
     network?: {
         chainName: string;
+        chainId: number;
         rpcUrls: string[];
         nativeCurrency: {
             name: string;

src/configs/beta.json

@@ -26,6 +26,7 @@
             },
             "network": {
                 "chainName": "Rootstock",
+                "chainId": 30,
                 "rpcUrls": ["https://public-node.rsk.co"],
                 "nativeCurrency": {
                     "name": "RBTC",

src/configs/mainnet.json

@@ -25,6 +25,7 @@
             },
             "network": {
                 "chainName": "Rootstock",
+                "chainId": 30,
                 "rpcUrls": ["https://public-node.rsk.co"],
                 "nativeCurrency": {
                     "name": "RBTC",

src/configs/testnet.json

@@ -23,6 +23,7 @@
             },
             "network": {
                 "chainName": "Rootstock Testnet",
+                "chainId": 31,
                 "rpcUrls": ["https://public-node.testnet.rsk.co"],
                 "nativeCurrency": {
                     "name": "RBTC",

src/context/Web3.tsx

@@ -11,23 +11,26 @@ import {
     Accessor,
     JSXElement,
     Resource,
+    Setter,
     createContext,
     createResource,
     createSignal,
     onMount,
     useContext,
 } from "solid-js";
 
+import LedgerIcon from "../assets/ledger.svg";
+import TrezorIcon from "../assets/trezor.svg";
+import WalletConnectIcon from "../assets/wallet-connect.svg";
 import { config } from "../config";
 import { RBTC } from "../consts/Assets";
 import { EIP1193Provider, EIP6963ProviderDetail } from "../consts/Types";
+import WalletConnectProvider from "../utils/WalletConnectProvider";
 import { Contracts, getContracts } from "../utils/boltzClient";
 import { HardwareSigner } from "../utils/hardware/HadwareSigner";
 import LedgerSigner from "../utils/hardware/LedgerSigner";
 import TrezorSigner from "../utils/hardware/TrezorSigner";
 import { useGlobalContext } from "./Global";
-import LedgerIcon from "/ledger.svg";
-import TrezorIcon from "/trezor.svg";
 
 declare global {
     interface WindowEventMap {
@@ -57,6 +60,7 @@ enum HardwareRdns {
 }
 
 const browserRdns = "browser";
+const walletConnectRdns = "wallet-connect";
 
 const customDerivationPathRdns: string[] = [
     HardwareRdns.Ledger,
@@ -80,6 +84,9 @@ const Web3SignerContext = createContext<{
 
     getContracts: Resource<Contracts>;
     getEtherSwap: () => EtherSwap;
+
+    openWalletConnectModal: Accessor<boolean>;
+    setOpenWalletConnectModal: Setter<boolean>;
 }>();
 
 const Web3SignerProvider = (props: {
@@ -121,6 +128,10 @@ const Web3SignerProvider = (props: {
     >(undefined);
     const [hasBrowserWallet, setHasBrowserWallet] =
         createSignal<boolean>(false);
+    const [openWalletConnectModal, setOpenWalletConnectModal] =
+        createSignal<boolean>(false);
+
+    WalletConnectProvider.initialize(t, setOpenWalletConnectModal);
 
     onMount(() => {
         if (window.ethereum !== undefined) {
@@ -139,6 +150,22 @@ const Web3SignerProvider = (props: {
             });
         }
 
+        if (import.meta.env.VITE_WALLETCONNECT_PROJECT_ID !== undefined) {
+            setProviders({
+                ...providers(),
+                [walletConnectRdns]: {
+                    provider: new WalletConnectProvider(),
+                    info: {
+                        name: "WalletConnect",
+                        uuid: "wallet-connect",
+                        icon: WalletConnectIcon,
+                        isHardware: false,
+                        rdns: walletConnectRdns,
+                    },
+                },
+            });
+        }
+
         window.addEventListener(
             "eip6963:announceProvider",
             (event: EIP6963AnnounceProviderEvent) => {
@@ -278,6 +305,8 @@ const Web3SignerProvider = (props: {
                 switchNetwork,
                 connectProvider,
                 hasBrowserWallet,
+                openWalletConnectModal,
+                setOpenWalletConnectModal,
                 connectProviderForAddress,
                 getContracts: contracts,
                 clearSigner: () => {

src/i18n/i18n.ts

@@ -224,6 +224,7 @@ const dict = {
         sent: "Sent",
         will_receive: "Will receive",
         refund_available_in: "Refund will be available in {{ blocks }} blocks",
+        no_wallet_connected: "No wallet connected",
     },
     de: {
         language: "Deutsch",
@@ -460,6 +461,7 @@ const dict = {
         sent: "Gesendet",
         will_receive: "Sie erhalten",
         refund_available_in: "Rückerstattung möglich in {{ blocks }} Blöcken",
+        no_wallet_connected: "Kein Wallet verbunden",
     },
     es: {
         language: "Español",
@@ -692,6 +694,7 @@ const dict = {
         sent: "Enviado",
         will_receive: "Recibirá",
         refund_available_in: "Reembolso disponible en {{ blocks }} bloques",
+        no_wallet_connected: "No hay monedero conectado",
     },
     zh: {
         language: "中文",
@@ -898,6 +901,7 @@ const dict = {
         sent: "已发送",
         will_receive: "将收到",
         refund_available_in: "退款将分 {{ blocks }} 区块提供",
+        no_wallet_connected: "未连接钱包",
     },
     ja: {
         language: "日本語",
@@ -1129,6 +1133,7 @@ const dict = {
         sent: "送信済み",
         will_receive: "受信予定",
         refund_available_in: "返金は {{ blocks }} つのブロックに分かれる",
+        no_wallet_connected: "財布はつながっていない！",
     },
 };
 

src/index.tsx

@@ -60,7 +60,7 @@ const App = (props: RouteSectionProps) => {
     return (
         <Switch>
             <Match when={configError() === true}>
-                <div>Invalid or missing app configuration</div>
+                <h1>Invalid or missing app configuration</h1>
             </Match>
             <Match when={configError() === false}>
                 <GlobalProvider>

src/lazy/walletConnect.ts

@@ -0,0 +1,16 @@
+import Loader from "./Loader";
+
+export default new Loader("WalletConnect", async () => {
+    const [appKit, EthersAdapter] = await Promise.all([
+        import("@reown/appkit"),
+        (async () => {
+            const ethersAdapter = await import("@reown/appkit-adapter-ethers");
+            return ethersAdapter.EthersAdapter;
+        })(),
+    ]);
+
+    return {
+        appKit,
+        EthersAdapter,
+    };
+});