wagmi.sh

App.tsx

// import requirements 
import {
  WagmiConfig,
  createClient,
  defaultChains,
  configureChains,
} from 'wagmi'
import { alchemyProvider } from 'wagmi/providers/alchemy'
import { publicProvider } from 'wagmi/providers/public'
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'

function MyApp({ Component, pageProps }: AppProps) {
// configure connector 
  const { chains, provider, webSocketProvider } = configureChains(
    defaultChains,
    [alchemyProvider({ apiKey: process.env.ALCHEMY_API_KEY }), publicProvider()]
  )
  const client = createClient({
    autoConnect: true,
    connectors: [new MetaMaskConnector({ chains })],
    provider,
    webSocketProvider,
  })

// wrap app components to access 
  return (
    <WagmiConfig client={client}>
      <Component {...pageProps} />
    </WagmiConfig>
  )
}

WalletConnect.tsx

// import requirements 
import { useAccount, useConnect, useDisconnect } from 'wagmi'

const Wallet = () => {
// instantiate connection functions 
  const { connect, connectors, error, isLoading, pendingConnector } =
    useConnect()
  const { disconnect } = useDisconnect()
  
  return (
      <div className="flex space-x-4 items-center">
        {isConnected ? (
            <button
              onClick={() => disconnect()}
            >
              Disconnect
            </button>
        ) : (
          <div>
            {connectors.map((connector) => (
              <button
                key={connector.id}
                onClick={() => connect({ connector })}
              >
                Connect
              </button>
            ))}
            {error && <div>{error.message}</div>}
          </div>
        )}
      </div>
  ) 
}