wagmi.js

import { connectorsForWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import '@rainbow-me/rainbowkit/styles.css';
import { braveWallet, coinbaseWallet, injectedWallet, metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
import { useMemo } from 'react';
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider, webSocketProvider } = configureChains(
  [
    ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true'
      ? [chain.goerli]
      : [chain.mainnet]),
  ],
  [
    ...(process.env.NEXT_PUBLIC_ENABLE_GANACHE === 'true'
      ? [publicProvider()]
      : [alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY })]),
  ],
)

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      metaMaskWallet({ chains }),
      coinbaseWallet({ chains }),
      braveWallet({ chains }),
      injectedWallet({ chains }),
    ],
  },
]);

export default function Wagmi({ children }) {
  const wagmiClient = useMemo(() => {
    return createClient({
      autoConnect: true,
      connectors,
      provider,
      webSocketProvider,
    })
  }, [autoConnect])

  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>{children}</RainbowKitProvider>
    </WagmiConfig>
  )
}