WalletConnect / Web3Modal

import { EthereumClient } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/react'
import * as React from 'react'
import * as ReactDOM from 'react-dom/client'
import { WagmiConfig } from 'wagmi'

import { App } from "./App";
import { chains, client, walletConnectProjectId } from "./wagmi";

const ethereumClient = new EthereumClient(client, chains)

ReactDOM.createRoot(document.getElementById('root')!).render(

{" "}
<React.StrictMode>
  <WagmiConfig client={client}>
    <App />
    <Web3Modal
      projectId={walletConnectProjectId}
      ethereumClient={ethereumClient}
      mobileWallets={[
        {
          id: "bitski",
          name: "Bitski",
          links: {
            native: "bitski://",
            universal: "https://wallet.bitski.com/walletconnect",
          },
        },
      ]}
      desktopWallets={[
        {
          id: "bitski",
          name: "Bitski",
          links: {
            native:
              "https://chrome.google.com/webstore/detail/bitski/feejiigddaafeojfddjjlmfkabimkell",
            universal: "https://wallet.bitski.com",
          },
        },
      ]}
      walletImages={{
        bitski: "https://cdn.bitskistatic.com/docs-web/bitskiWallet.svg",
      }}
    />
  </WagmiConfig>
</React.StrictMode>) ```

```tsx wagmi.ts
import { w3mConnectors, w3mProvider } from "@web3modal/ethereum";
import { configureChains, createClient } from "wagmi";
import { goerli, mainnet } from "wagmi/chains";

export const walletConnectProjectId = "YOUR WALLET CONNECT CLOUD PROJECT ID";

const { chains, provider, webSocketProvider } = configureChains(
  [mainnet, ...(import.meta.env?.MODE === "development" ? [goerli] : [])],
  [w3mProvider({ projectId: walletConnectProjectId })]
);

export const client = createClient({
  autoConnect: true,
  connectors: w3mConnectors({
    chains,
    projectId: walletConnectProjectId,
    version: 1,
  }),
  provider,
  webSocketProvider,
});

export { chains };