Connecting with Wagmi

Using Wagmi we would be connecting our wallet with sevral wallet connect like Coinbase, Wallet Connect and More

What is Wagmi ?

wagmi is a collection of React Hooks containing everything you need to start working with Ethereum. wagmi makes it easy to "Connect Wallet," display ENS and balance information, sign messages, interact with contracts, and much more — all with caching, request deduplication, and persistence.

Example

Step 1

Next Js

npx create-next-app@latest

Set up your environment you can use Typescript or JavaScript

Step 2

Viem

npm i wagmi

We would be using the Following Connectors in this tutorial Metamask, Coinbase, Wallet Connect

Step 3

set up your _app.tsx environment by importing this connectors.

pages/_app.tsx

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
///Wagmi
import { WagmiConfig, createConfig, configureChains, mainnet } from 'wagmi'
import { alchemyProvider } from 'wagmi/providers/alchemy'
import { publicProvider } from 'wagmi/providers/public'

import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
import { InjectedConnector } from 'wagmi/connectors/injected'
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [alchemyProvider({ apiKey: 'yourAlchemyApiKey' }), publicProvider()],
)

// Set up wagmi config
const config = createConfig({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({ chains }),
    new CoinbaseWalletConnector({
      chains,
      options: {
        appName: 'wagmi',
      },
    }),
    new WalletConnectConnector({
      chains,
      options: {
        projectId: '...',
      },
    }),
    new InjectedConnector({
      chains,
      options: {
        name: 'Injected',
        shimDisconnect: true,
      },
    }),
  ],
  publicClient,
  webSocketPublicClient,
})

export default function App({ Component, pageProps }: AppProps) {
  return<div>
    <WagmiConfig config={config}>
    <Component {...pageProps} />
    </WagmiConfig>
  </div> 
}

Feel free to play around and edit this post as much you like.

Step 4

Importing react Hooks to get Wallet Details such as Address, ENSname and perform some action such as connecting and disconecting.

component/profile.tsx

import {
    useAccount,
    useConnect,
    useDisconnect,
    useEnsAvatar,
    useEnsName,
  } from 'wagmi'
  import Image from 'next/image'
  
  export default function Profile() {
    const { address, connector, isConnected } = useAccount()
    const { data: ensName } = useEnsName({ address })
    const { connect, connectors, error, isLoading, pendingConnector } =
      useConnect()
    const { disconnect } = useDisconnect()
  
    if (isConnected) {
      return (
        <div>
          <div>{ensName ? `${ensName} (${address})` : address}</div>
        </div>
      )
    }
  
    return (
      <div >
        <p className='text-center mt-5'> WAGMI Connect Wallet</p>
      <div className='flex flex-col items-center'>
      {connectors.map((connector) => (
        <button
          key={connector.id}
          onClick={() => connect({ connector })}
          className={`bg-blue-500 hover:bg-blue-700 text-white m-2 text-center font-bold py-2 px-4 rounded ${
            !connector.ready ? 'opacity-50 cursor-not-allowed' : ''
          }`}
          disabled={!connector.ready}
        >
          {connector.name}
          {!connector.ready && ' (unsupported)'}
          {isLoading && connector.id === pendingConnector?.id && ' (connecting)'}
        </button>
      ))}
    
      {error && <div className="text-red-500">{error.message}</div>}
    </div>
    </div>
    )
  }
  
Feel free to play around and edit this post as much you like.

using Wagmi you have been able to connect your wallet with sevral connector in a fast and efficient way.