Issues Integrating WalletConnect into React Application

[DanChol]

Description:
I am currently facing multiple issues while trying to integrate WalletConnect into my React application. Despite following the documentation and multiple attempts, errors keep appearing, preventing successful integration.

Environment:

Node.js version: v20.15.1
npm version: 10.7.0
React version: 18.3.1
Web3Modal version: 2.7.1
Wagmi version: 1.1.1
Viem version: 1.0.2
Steps to Reproduce:

1. Create a new React application using create-react-app.

2. Install dependencies using:
   npm install @web3modal/react @web3modal/ethereum @wagmi/core @wagmi/chains @tanstack/react-query viem --legacy-peer-deps

3. Follow the setup instructions from the WalletConnect documentation.

4. Attempt to start the application.

Errors Encountered:

1. Module '"@wagmi/core"' has no exported member 'createClient'.
2. Cannot find module 'viem/providers/public' or its corresponding type declarations.
3. Property 'provider' does not exist on type '{ readonly chains: Chain[]; readonly publicClient: ({ chainId }: { chainId?: number | undefined; }) => PublicClient; readonly webSocketPublicClient: ({ chainId }: { ...; }) => WebSocketPublicClient<...> | undefined; }'.
4. Type 'import("c:/Users/User/wallet-connect-demo/node_modules/@wagmi/chains/dist/index").Chain' is not assignable to type 'import("c:/Users/User/wallet-connect-demo/node_modules/@wagmi/core/node_modules/@wagmi/chains/dist/index").Chain'.
5. Only a void function can be called with the 'new' keyword.
6. Object literal may only specify known properties, and 'accentColor' does not exist in type 'ConfigCtrlState & ThemeCtrlState & { ethereumClient?: EthereumClient | undefined; }'.

Code Snippets:

web3modalConfig.ts:

import` { Web3Modal } from '@web3modal/react';
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum';
import { configureChains, createClient } from 'wagmi';
import { mainnet, arbitrum } from 'wagmi/chains';
import { publicProvider } from 'viem/providers/public';

const projectId = 'PROJECT_ID';

const { chains, provider } = configureChains(
  [mainnet, arbitrum],
  [w3mProvider({ projectId }), publicProvider()]
);

const wagmiClient = createClient({
  autoConnect: true,
  connectors: w3mConnectors({ projectId, chains }),
  provider,
});

const ethereumClient = new EthereumClient(wagmiClient, chains);

export const web3Modal = new Web3Modal({
  projectId,
  themeMode: 'dark',
  accentColor: 'default',
  ethereumClient,
});

App.tsx:

import React from 'react';
import { web3Modal } from './web3modalConfig';
import { WagmiConfig } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiConfig client={wagmiClient}>
      <QueryClientProvider client={queryClient}>
        <div className="App">
          <header className="App-header">
            <h1>Token Presale</h1>
            <button onClick={() => web3Modal.openModal()}>Connect Wallet</button>
          </header>
        </div>
      </QueryClientProvider>
    </WagmiConfig>
  );
}

export default App;

Additional Notes:

• I have tried multiple versions of the dependencies and followed the documentation closely, but the errors persist.

• I have also attempted various suggestions found in community discussions and GitHub issues without success.

Any guidance or assistance to resolve these issues would be greatly appreciated. Thank you!