How can I add new custom connectors using the wagmi config fully like walletconnect v5？

[answerBall9527]

1. In version v5, I can use the wagmi config to configure Web3Modal.

createWeb3Modal:

'use client';

import React, { ReactNode, useEffect } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';
import { useWagmiConfig } from '@/context/WagmiConfig';
import { createWeb3Modal } from '@web3modal/wagmi/react';

const queryClient = new QueryClient();

export const dynamic = 'force-dynamic';

export function Web3Modal({ children }: { children: ReactNode }) {
  const wagmiConfig = useWagmiConfig();

  useEffect(() => {
    async function initWagmiConfig() {
      if (typeof window === 'undefined') return;

      try {
        const { TomoWalletTgSdkV2 } = await import('@tomo-inc/tomo-telegram-sdk');
        new TomoWalletTgSdkV2({ injected: true });
      } catch (error) {
        console.error('Failed to initialize Tomo Wallet:', error);
      }
    }

    initWagmiConfig();
  }, []);

  useEffect(() => {
    if (!wagmiConfig) return;
    
    try {
      createWeb3Modal({
        wagmiConfig,
        projectId: '972c11857d9ca138663e5ca130e6fe63',
        themeMode: 'dark',
      });
    } catch (error) {
      console.error('Failed to initialize Web3Modal:', error);
    }
  }, [wagmiConfig]);

  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  );
}

wagmiconfig：

'use client';

import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
import { cookieStorage, createStorage, http, createConfig, Config } from 'wagmi';
import { mainnet, bscTestnet, sepolia, base, arbitrum, bsc } from 'wagmi/chains';
import { tomoConnector } from '@/connectors/tomoConnector';
import { type Chain } from 'wagmi/chains';
import { metaMask, walletConnect, injected } from 'wagmi/connectors';

const WagmiConfigContext = createContext<Config | null>(null);

export function WagmiConfigProvider({ children }: { children: ReactNode }) {
  const [wagmiConfig, setWagmiConfig] = useState<Config | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (typeof window === 'undefined') return;

    try {
      const chains = [mainnet, sepolia, bscTestnet, base, arbitrum, bsc] as const;
      const chainArray: Chain[] = Array.from(chains);

      const connector = tomoConnector({
        chains: chainArray,
        options: {
          shimDisconnect: true,
        },
      });

      const tomoInjectedConnector = injected({
        target() { 
          return { 
            id: 'tomoInjectedProvider', 
            name: 'tomo Injected Provider', 
            provider: window.ethereum, 
          } 
        }, 
      })

      const config = createConfig({
        chains,
        ssr: true,
        transports: {
          [mainnet.id]: http(),
          [sepolia.id]: http(),
          [bscTestnet.id]: http('https://data-seed-prebsc-1-s1.binance.org:8545'),
          [base.id]: http(),
          [arbitrum.id]: http(),
          [bsc.id]: http(),
        },
        storage: createStorage({ 
          storage: cookieStorage,
          key: 'wagmi.wallet',
        }),
        connectors: [connector, metaMask(), walletConnect({
          projectId: '972c11857d9ca138663e5ca130e6fe63',
          relayUrl: 'wss://relay.walletconnect.com', 
          metadata: {
            name: 'pebbles',
            description: 'pebbles',
            url: 'https://next-wagmi-template.vercel.app/',
            icons: ['https://static.stakestone.io/btc/babylon.png'],
          },
        }), tomoInjectedConnector],
        syncConnectedChain: true,
      });

      setWagmiConfig(config);
    } catch (error) {
      console.error('Failed to initialize wagmi config:', error);
    } finally {
      setIsLoading(false);
    }
  }, []);

  if (isLoading) {
    return null;
  }

  return (
    <WagmiConfigContext.Provider value={wagmiConfig}>
      {wagmiConfig ? children : null}
    </WagmiConfigContext.Provider>
  );
}

export function useWagmiConfig() {
  const config = useContext(WagmiConfigContext);
  if (!config) {
    throw new Error('useWagmiConfig must be used within a WagmiConfigProvider');
  }
  return config;
} 

connectors:

import { 
  createConnector,
  normalizeChainId,
} from 'wagmi'
import { type Chain } from 'wagmi/chains'
import { 
  getAddress,
  UserRejectedRequestError,
  ResourceUnavailableRpcError,
  SwitchChainError,
} from 'viem'

export type TomoConnectorOptions = {
  chains?: Chain[]
  options?: {
    shimDisconnect?: boolean
  }
}

export function tomoConnector({å≈
  chains = [],
  options: options_ = {},
}: TomoConnectorOptions = {}) {
  const options = {
    shimDisconnect: true,
    ...options_,
  }

  type Provider = typeof window.ethereum
  type Properties = {
    onAccountsChanged(accounts: string[]): void
    onChainChanged(chainId: string): void
    onDisconnect(): void
  }

  let tomoWallet: any
  let accountsChangedListener: ((accounts: string[]) => void) | undefined
  let chainChangedListener: ((chainId: string) => void) | undefined
  let disconnectListener: (() => void) | undefined

  return createConnector<Provider, Properties>((config) => {
    return {
      id: 'tomoWallet-tg',
      name: 'TomoWallet-tg',
      type: 'tomoWallet-tg',
      rdns: 'io.tomowallet-tg',
      
      async connect({ chainId } = {}) {
        try {
          if (!tomoWallet && typeof window !== 'undefined') {
            const { TomoWalletTgSdkV2 } = await import('@tomo-inc/tomo-telegram-sdk')
            tomoWallet = new TomoWalletTgSdkV2({ injected: true })
          }

          const provider = await this.getProvider()
          if (!provider) throw new Error('Provider not found')

          if (!accountsChangedListener) {
            accountsChangedListener = this.onAccountsChanged.bind(this)
            provider.on('accountsChanged', accountsChangedListener)
          }
          if (!chainChangedListener) {
            chainChangedListener = this.onChainChanged.bind(this)
            provider.on('chainChanged', chainChangedListener)
          }
          if (!disconnectListener) {
            disconnectListener = this.onDisconnect.bind(this)
            provider.on('disconnect', disconnectListener)
          }

          try {
            const accounts = await provider.request({
              method: 'eth_requestAccounts'
            }) as string[]

            const currentChainId = await this.getChainId()

            if (chainId && currentChainId !== chainId) {
              const chain = await this.switchChain?.({ chainId })
              if (chain) {
                return {
                  accounts: accounts.map(getAddress),
                  chainId: chain.id
                }
              }
            }

            return {
              accounts: accounts.map(getAddress),
              chainId: currentChainId
            }
          } catch (error: any) {
            if (error.code === 4001) {
              throw new UserRejectedRequestError(error)
            }
            if (error.code === -32002) {
              throw new ResourceUnavailableRpcError(error)
            }
            throw error
          }
        } catch (error) {
          await this.disconnect()
          throw error
        }
      },

      async getChainId() {
        const provider = await this.getProvider()
        if (!provider) return 1
        try {
          const chainId = await provider.request({ method: 'eth_chainId' }) as string
          return normalizeChainId(chainId)
        } catch {
          return 1
        }
      },

      async switchChain({ chainId }) {
        const provider = await this.getProvider()
        if (!provider) throw new Error('Provider not found')
        
        const chain = chains.find((x) => x.id === chainId)
        if (!chain) {
          throw new SwitchChainError(new Error('Chain not found'))
        }

        try {
          await provider.request({
            method: 'wallet_switchEthereumChain',
            params: [{ chainId: `0x${chainId.toString(16)}` }],
          })
          config.emitter.emit('change', { chainId })
          return chain
        } catch (error: any) {
          throw new SwitchChainError(error)
        }
      },

      async disconnect() {
        const provider = await this.getProvider()
        if (!provider) return

        if (accountsChangedListener) {
          provider.removeListener('accountsChanged', accountsChangedListener)
          accountsChangedListener = undefined
        }
        if (chainChangedListener) {
          provider.removeListener('chainChanged', chainChangedListener)
          chainChangedListener = undefined
        }
        if (disconnectListener) {
          provider.removeListener('disconnect', disconnectListener)
          disconnectListener = undefined
        }
      },

      async getAccounts() {
        const provider = await this.getProvider()
        if (!provider) return []
        try {
          const accounts = await provider.request({ method: 'eth_accounts' }) as string[]
          return accounts.map(getAddress)
        } catch {
          return []
        }
      },

      async getProvider() {
        if (typeof window === 'undefined') return undefined
        return window.ethereum
      },

      async isAuthorized() {
        try {
          const accounts = await this.getAccounts()
          return accounts.length > 0
        } catch {
          return false
        }
      },

      onAccountsChanged(accounts) {
        if (accounts.length === 0) {
          this.onDisconnect()
        } else {
          config.emitter.emit('change', { 
            accounts: accounts.map(getAddress)
          })
        }
      },

      onChainChanged(chainId) {
        const id = normalizeChainId(chainId)
        config.emitter.emit('change', { chainId: id })
      },

      onDisconnect() {
        config.emitter.emit('disconnect')
      },

      async setup() {
        const provider = await this.getProvider()
        if (!provider) return

        if (!accountsChangedListener) {
          accountsChangedListener = this.onAccountsChanged.bind(this)
          provider.on('accountsChanged', accountsChangedListener)
        }
        if (!chainChangedListener) {
          chainChangedListener = this.onChainChanged.bind(this)
          provider.on('chainChanged', chainChangedListener)
        }
        if (!disconnectListener) {
          disconnectListener = this.onDisconnect.bind(this)
          provider.on('disconnect', disconnectListener)
        }
      },
    }
  })
} 

But when updates it to reown, it doesnt work, I can't see the new connector in the modal

import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { cookieStorage, createStorage, CreateConnectorFn } from 'wagmi'
import { ETH_CHAINS } from './network'
import { walletConnect, coinbaseWallet, injected } from 'wagmi/connectors'
import { tomoConnector } from '@/connectors/TomoWalletConnector'
import { mainnet, bscTestnet, sepolia, base, arbitrum, bsc } from 'wagmi/chains'
import { type Chain } from 'wagmi/chains'

export const WALLETCONNECT_PROJECT_ID = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID ?? ''
if (!WALLETCONNECT_PROJECT_ID) {
  console.warn('You need to provide a NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID env variable')
}

const connectors: CreateConnectorFn[] = []
connectors.push(walletConnect({ projectId: WALLETCONNECT_PROJECT_ID, showQrModal: false })) // showQrModal must be false
connectors.push(
  injected({
    shimDisconnect: true,
    target() {
      if (typeof window !== 'undefined') {
        return {
          id: 'tomowallet',
          name: 'tomowallet Provider',
          provider: window.ethereum,
        }
      }
      return undefined
    },
  })
)

const chains = [mainnet, sepolia, bscTestnet, base, arbitrum, bsc] as const
const chainArray: Chain[] = Array.from(chains)

const tomoconnector = tomoConnector({
  chains: chainArray,
  options: {
    shimDisconnect: true,
  },
})

connectors.push(tomoconnector)

export const WALLETCONNECT_ADAPTER = new WagmiAdapter({
  projectId: WALLETCONNECT_PROJECT_ID,
  networks: ETH_CHAINS,
  ssr: false,
  connectors,
  storage: createStorage({
    storage: cookieStorage,
  }),
})