wagmi

Wallet Connection

This feature allows users to connect and disconnect their Ethereum wallets. It provides hooks to manage the wallet connection state and handle different wallet connectors.

import { useAccount, useConnect, useDisconnect } from 'wagmi';

function Wallet() {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();

  return (
    <div>
      {isConnected ? (
        <div>
          <p>Connected to {address}</p>
          <button onClick={() => disconnect()}>Disconnect</button>
        </div>
      ) : (
        <div>
          {connectors.map((connector) => (
            <button key={connector.id} onClick={() => connect(connector)}>
              Connect with {connector.name}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

Smart Contract Interaction

This feature allows users to read from and write to smart contracts. It provides hooks to interact with smart contract functions and manage the state of these interactions.

import { useContractRead, useContractWrite } from 'wagmi';

const contractConfig = {
  addressOrName: '0xContractAddress',
  contractInterface: ContractABI,
};

function ContractInteraction() {
  const { data: balance } = useContractRead({ ...contractConfig, functionName: 'balanceOf', args: ['0xAddress'] });
  const { write: transfer } = useContractWrite({ ...contractConfig, functionName: 'transfer', args: ['0xRecipient', 100] });

  return (
    <div>
      <p>Balance: {balance?.toString()}</p>
      <button onClick={() => transfer()}>Transfer</button>
    </div>
  );
}

Blockchain Data

This feature allows users to access blockchain data such as the current block number and the connected network. It provides hooks to fetch and display this data in a React component.

import { useBlockNumber, useNetwork } from 'wagmi';

function BlockchainData() {
  const { data: blockNumber } = useBlockNumber();
  const { chain } = useNetwork();

  return (
    <div>
      <p>Current Block Number: {blockNumber}</p>
      <p>Connected Network: {chain?.name}</p>
    </div>
  );
}