How to set up Web3Modal on a website (legacy and modern versions)

1import React from 'react';
2import * as ReactDOMClient from "react-dom/client";
3import { Provider } from "react-redux";
4import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
5import { Web3Modal } from '@web3modal/react'
6import { configureChains, createConfig, WagmiConfig } from 'wagmi'
7import { setupStore } from "./redux";
8import { chains } from "./constants/chains.config";
9import { config } from "./app-config";
10import './index.scss';
11import ErrorBoundry from './components/error-boundry';
12import App from './App';
13
14const store = setupStore();
15
16// Wagmi client
17const { publicClient } = configureChains(chains, [w3mProvider({ projectId: config.walletConnectId })])
18
19const wagmiConfig = createConfig({
20  autoConnect: true,
21  connectors: w3mConnectors({ projectId: config.walletConnectId, version: 1, chains }),
22  publicClient
23})
24
25// Web3Modal Ethereum Client
26const ethereumClient = new EthereumClient(wagmiConfig, chains)
27
28const container = document.getElementById("root");
29const root = ReactDOMClient.createRoot(container);
30
31root.render(
32  <>
33      <WagmiConfig config={wagmiConfig}>
34        <Provider store={store}>
35          <ErrorBoundry>
36            <App />
37            </ErrorBoundry>
38        </Provider>
39      </WagmiConfig>
40
41      <Web3Modal
42        projectId={config.walletConnectId}
43        ethereumClient={ethereumClient}
44        themeMode={"light"}
45        themeColor={"default"}
46        // Select a network before connecting
47        enableNetworkView={true}
48      />
49    </>
50);
51

1export const isMainnet = false;
2
3export const config = {
4    lang: 'ru',
5    walletConnectId: "",
6    contractAddress: "",
7    version: "1.0.0",
8}
9

1import { isMainnet } from "../app-config";
2import { avalanche, bsc, mainnet, fantom, fantomTestnet, polygon, gnosis, harmonyOne, bscTestnet } from 'wagmi/chains';
3
4export const defaultChain = isMainnet ?  bsc : bscTestnet;
5export const chains = isMainnet ? [{
6    ...mainnet
7}, {
8    ...avalanche
9}, {
10    ...bsc,
11}, {
12    ...polygon
13}, {
14    ...fantom
15}, {
16    ...gnosis
17}, {
18   ...harmonyOne
19}, {
20    id: 195,
21    name: 'Tron Mainnet',
22    network: 'tron-mainnet',
23    nativeCurrency: {
24        decimals: 18,
25        name: 'Tron',
26        symbol: 'TRX',
27    },
28    rpcUrls: {
29        default: {
30            http: ['https://api.trongrid.io']
31        },
32        public: {
33            http: ['https://api.trongrid.io']
34        },
35    },
36    blockExplorers: {
37        etherscan: {
38            name: 'tronscan',
39            url: 'https://tronscan.org/'
40        },
41        default: {
42            name: 'tronscan',
43            url: 'https://tronscan.org/'
44        },
45    },
46}] : [{
47   ...fantomTestnet
48}, {
49    id: 1666700000,
50    name: 'Harmony Testnet',
51    network: 'harmony-testnet',
52    nativeCurrency: {
53        decimals: 8,
54        name: 'Harmony',
55        symbol: 'ONE',
56    },
57    rpcUrls: {
58        default: {
59            http: ['https://api.s0.b.hmny.io']
60        },
61        public: {
62            http: ['https://api.s0.b.hmny.io']
63        },
64    },
65    blockExplorers: {
66        etherscan: {
67            name: 'explorer.harmony',
68            url: 'https://explorer.ps.hmny.io/'
69        },
70        default: {
71            name: 'explorer.harmony',
72            url: 'https://explorer.ps.hmny.io/'
73        },
74    },
75}, {
76    ...bscTestnet,
77}]

1import React from "react";
2
3const Home = () => {
4    const onConnect = async() => {
5        try {
6            var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) {
7                return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
8
9            if (isSafari) {
10                return false;
11            }
12
13            await open();
14
15        } catch(e) {
16            console.log('Connect error: ', e)
17        }
18    }
19
20
21    return (
22        <div className="page_container">
23            <button
24               className="btn"
25               onClick={connectHandle}>
26                   Connect to Metamask
27            </button>      
28        </div>
29    )
30}
31
32export default Home;

1import React from "react";
2
3const Home = () => {
4  const onDisconnect = async() => {
5        try {
6            await disconnect();
7            await localStorage.clear();
8            dispatch(setSign({data: ""}));
9            dispatch(setSignError({data: ""}));
10        } catch(e) {
11            if(isError) {
12                console.log("Disconnect error: ", error)
13            }
14        }
15    }
16
17    return (
18        <div className="page_container">
19            <button
20                className="btn"
21                onClick={() => {onDisconnect()}}>
22                    Disconnect
23            </button>     
24        </div>
25    )
26}
27
28export default Home;

1const initWeb3Modal = () => {
2    try {
3        const newWeb3Modal = new Web3Modal({
4            cacheProvider: true,
5            providerOptions: {
6                walletconnect: {
7                    package: WalletConnectProvider,
8                    options: {
9                        rpc: {
10                            56: 'https://bscrpc.com',
11// There may be a long list here
12
13                        },
14                        infuraId: '',
15                        bridge: 'https://bridge.walletconnect.org',
16                        chainId: 56,
17                        qrcode: true,
18                        qrcodeModalOptions: {
19                            mobileLinks: [
20                                'metamask'
21                            ],
22                        },
23                    }
24                }
25            }
26        })
27
28	return newWeb3Modal
29    } catch (error) {
30        console.log(error)
31    }

1const connectWallet = async () => {
2    try {
3        const web3modal = initWeb3Modal()
4        const provider = web3modal && await web3modal.connect();
5        const library = new ethers.providers.Web3Provider(provider, "any") //any sets the anyNetwork option to true. If you remove it, the value will become false.
6        const signer = await library.getSigner()
7        const network = await library.getNetwork()
8        library.pollingInterval = 12000;
9        const account = await library.listAccounts()
10        const signerAddress = account[0]
11        const balance = await library.getBalance(signerAddress)
12        return { provider, library, signer, signerAddress, network, balance }
13
14    } catch (er) {
15        console.log(er)
16    }
17}
18

1const onDisconnect = async () => {
2    const web3modal = initWeb3Modal()
3    await web3modal.clearCachedProvider();
4}
5

1await provider.request({
2            method: "wallet_switchEthereumChain",
3            params: [{
4                chainId: 1
5            }],
6        });
7