Connecting Wallets the Right Way: wagmi v2 and EIP-6963

Originally published on — a lightweight, fully typed Ethereum library — and rebuilt its connector system from scratch. EIP-6963 discovery is enabled by default with the injected() connector.

Install the stack:

CODE Kopieren

npm install wagmi viem @tanstack/react-query

Create your config:

CODE Kopieren

// lib/wagmi.ts

import { createConfig, http } from "wagmi";

import { mainnet, sepolia } from "wagmi/chains";

import { injected, walletConnect, coinbaseWallet } from "wagmi/connectors";



export const config = createConfig({

  chains: [mainnet, sepolia],

  connectors: [

    injected(), // discovers ALL EIP-6963 wallets automatically

    walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),

    coinbaseWallet({ appName: "My dApp" }),

  ],

  transports: {

    [mainnet.id]: http(),

    [sepolia.id]: http(),

  },

});

Wrap your app with the providers:

CODE Kopieren

// main.tsx

import { WagmiProvider } from "wagmi";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { config } from "./lib/wagmi";



const queryClient = new QueryClient();



export function App() {

  return (

    <WagmiProvider config={config}>

      <QueryClientProvider client={queryClient}>

        <YourApp />

      </QueryClientProvider>

    </WagmiProvider>

  );

}

That injected() connector does the EIP-6963 legwork automatically. When a user has three wallets installed, your connection UI will show all three.

Building a Wallet Connection Component

With the config in place, wagmi's hooks give you everything you need. Here's a minimal but fully functional wallet picker:

CODE Kopieren

// components/WalletConnect.tsx

import { useConnect, useAccount, useDisconnect, useBalance } from "wagmi";

import { formatEther } from "viem";



export function WalletConnect() {

  const { connectors, connect, isPending } = useConnect();

  const { address, isConnected, chain } = useAccount();

  const { disconnect } = useDisconnect();

  const { data: balance } = useBalance({ address });



  if (isConnected && address) {

    return (

      <div>

        <p>

          {address.slice(0, 6)}…{address.slice(-4)} on {chain?.name}

        </p>

        {balance && (

          <p>{parseFloat(formatEther(balance.value)).toFixed(4)} ETH</p>

        )}

        <button onClick={() => disconnect()}>Disconnect</button>

      </div>

    );

  }



  return (

    <div>

      {connectors.map((connector) => (

        <button

          key={connector.uid}

          onClick={() => connect({ connector })}

          disabled={isPending}

        >

          {connector.name}

        </button>

      ))}

    </div>

  );

}

A few things worth noting here. connectors is populated at runtime based on what's actually available in the browser — if the user has MetaMask and Phantom installed, both show up. The connector.uid is stable across renders so it's safe as a React key. And useBalance returns a bigint value, which is where viem's formatEther utility comes in — it handles the wei-to-ether conversion without floating-point surprises.

For sending transactions, viem's type-safe primitives plug directly into wagmi's useSendTransaction hook:

CODE Kopieren

import { useSendTransaction } from "wagmi";

import { parseEther } from "viem";



const { sendTransaction } = useSendTransaction();



sendTransaction({

  to: "0xRecipientAddress",

  value: parseEther("0.01"),

});

Where This Lands in Practice

EIP-6963 browser support is now effectively universal among modern wallet extensions — MetaMask, Coinbase Wallet, Phantom, Rabby, and most others have shipped it. Users with multiple wallets get a proper choice UI instead of a silent clobber. wagmi v2's default injected() connector handles the discovery without any extra configuration on your end.

If you're maintaining an older dApp that still reaches for window.ethereum directly, migrating to wagmi v2 is the cleanest upgrade path. The . Follow along there for more frontend and dev content.

Vollständiger Original-Bericht

Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

↗ Original-Artikel auf dev.to lesen