### [Wagmi Hooks Summary](https://wagmi.sh/react/api/hooks)

### Account & Authentication Hooks
### 1. `useAccount`
**Purpose:** Fetches details about the connected wallet account, such as the account address and connection status.

import { useAccount } from 'wagmi';

function App() {
  const { address, isConnected } = useAccount();

  return <div>Account: {isConnected ? address : 'Not connected'}</div>;
}

### 2. `useConnect`
**Purpose:** Provides functionality to connect a wallet to your Dapp.

import { useConnect } from 'wagmi';

function App() {
  const { connect, connectors } = useConnect();

  return (
    <button onClick={() => connect({ connector: connectors[0] })}>
      Connect Wallet
    </button>
  );
}

### 3. `useDisconnect`
**Purpose:** Disconnects the connected wallet from your Dapp.

import { useDisconnect } from 'wagmi';

function App() {
  const { disconnect } = useDisconnect();

  return <button onClick={disconnect}>Disconnect Wallet</button>;
}

### 4. `useEnsAddress`
**Purpose:** Resolves an ENS (Ethereum Name Service) name to an Ethereum address.

import { useEnsAddress } from 'wagmi';

function App() {
  const { data: address } = useEnsAddress({
    name: 'vitalik.eth',
  });

  return <div>Address: {address}</div>;
}

### 5. `useEnsAvatar`
**Purpose:** Retrieves the avatar associated with an ENS name.

import { useEnsAvatar } from 'wagmi';

function App() {
  const { data: avatar } = useEnsAvatar({
    name: 'vitalik.eth',
  });

  return avatar ? <img src={avatar} alt="ENS Avatar" /> : <div>No Avatar</div>;
}

### 6. `useEnsName`
**Purpose:** Resolves an Ethereum address to an ENS name, if available.

import { useEnsName } from 'wagmi';

function App() {
  const { data: ensName } = useEnsName({
    address: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
  });

  return <div>ENS Name: {ensName || 'No ENS Name'}</div>;
}

### 7. `useEnsResolver`
**Purpose:** Retrieves the resolver for a given ENS name.

import { useEnsResolver } from 'wagmi';

function App() {
  const { data: resolver } = useEnsResolver({
    name: 'vitalik.eth',
  });

  return <div>Resolver: {resolver?.address || 'No Resolver'}</div>;
}

### 8. `useSignMessage`
**Purpose:** Signs a message with the connected account’s private key.

import { useSignMessage } from 'wagmi';

function App() {
  const { signMessage } = useSignMessage({
    message: 'Hello, world!',
  });

  return <button onClick={signMessage}>Sign Message</button>;
}

### 9. `useSignTypedData`
**Purpose:** Signs typed data (EIP-712) with the connected account.

import { useSignTypedData } from 'wagmi';

function App() {
  const { signTypedData } = useSignTypedData({
    domain: { name: 'My Dapp', version: '1' },
    types: { EIP712Domain: [{ name: 'name', type: 'string' }] },
    value: { name: 'My Dapp' },
  });

  return <button onClick={signTypedData}>Sign Typed Data</button>;
}

### Network & Blockchain Hooks

### 10. `useNetwork`
**Purpose:** Retrieves information about the connected blockchain network.

import { useNetwork } from 'wagmi';

function App() {
  const { chain } = useNetwork();

  return <div>Network: {chain?.name}</div>;
}

### 11. `useSwitchNetwork`
**Purpose:** Switches the connected wallet to a different network.

import { useSwitchNetwork } from 'wagmi';

function App() {
  const { switchNetwork } = useSwitchNetwork();

  return (
    <button onClick={() => switchNetwork(1)}>
      Switch to Ethereum Mainnet
    </button>
  );
}

### 12. `useBlockNumber`
**Purpose:** Retrieves the latest block number from the blockchain.

import { useBlockNumber } from 'wagmi';

function App() {
  const { data: blockNumber } = useBlockNumber();

  return <div>Latest Block Number: {blockNumber}</div>;
}

### 13. `useTransaction`
**Purpose:** Retrieves details of a specific transaction by hash.

import { useTransaction } from 'wagmi';

function App() {
  const { data: transaction } = useTransaction({
    hash: '0xYourTransactionHash',
  });

  return <div>Transaction: {transaction?.blockNumber}</div>;
}

### 14. `useWaitForTransactionReceipt`
**Purpose:** Waits for a transaction to be confirmed and retrieves its status.

import { useWaitForTransactionReceipt } from 'wagmi';

function App() {
  const { data: transactionReceipt } = useWaitForTransactionReceipt({
    hash: '0xYourTransactionHash',
  });

  return <div>Status: {transactionReceipt?.status}</div>;
}

### 15. `useChainId`
**Purpose:** Retrieves the chain ID of the current network.

import { useChainId } from 'wagmi';

function App() {
  const chainId = useChainId();

  return <div>Chain ID: {chainId}</div>;
}

### Contract Interaction Hooks

### 16. `useContract`
**Purpose:** Provides a contract instance to interact with.

import { useContract } from 'wagmi';

function App() {
  const contract = useContract({
    address: '0xYourContractAddress',
    abi: YourContractABI,
  });

  return <div>Contract: {contract?.address}</div>;
}

### 17. `useReadContract`
**Purpose:** Reads data from a smart contract.

import { useReadContract } from 'wagmi';

function App() {
  const { data } = useReadContract({
    address: '0xYourContractAddress',
    abi: YourContractABI,
    functionName: 'balanceOf',
    args: ['0xYourAccountAddress'],
  });

  return <div>Balance: {data?.toString()}</div>;
}

### 18. `useWriteContract`
**Purpose:** Sends transactions to write data to a smart contract.

import { useWriteContract } from 'wagmi';

function App() {
  const { write } = useWriteContract({
    address: '0xYourContractAddress',
    abi: YourContractABI,
    functionName: 'transfer',
    args: ['0xRecipientAddress', 1000],
  });

  return <button onClick={() => write()}>Send Tokens</button>;
}

### 19. `useContractEvent`
**Purpose:** Listens for events emitted by a contract.

import { useContractEvent } from 'wagmi';

function App() {
  useContractEvent({
    address: '0xYourContractAddress',
    abi: YourContractABI,
    eventName: 'Transfer',
    listener: (event) => console.log('Transfer Event:', event),
  });

  return <div>Listening for Transfer events...</div>;
}

### 20. `useInfiniteReadContracts`
**Purpose:** Supports infinite scrolling of contract read data.

import { useInfiniteReadContracts } from 'wagmi';

function App() {
  const { data, fetchNextPage } = useInfiniteReadContracts({
    address: '0xYourContractAddress',
    abi: YourContractABI,
    functionName: 'getItems',
    pagination: true,
  });

  return (
    <div>
      {data?.pages.map((page) =>
        page.map((item) => <div key={item.id}>{item.name}</div>)
      )}
      <button onClick={() => fetchNextPage()}>Load More</button>
    </div>
  );
}

### Wallet & Signer Hooks

### 21. `useConnectors`
**Purpose:** Retrieves a list of available wallet connectors, which you can use to connect to different wallets.

import { useConnectors } from 'wagmi';

function App() {
  const { connectors } = useConnectors();

  return (
    <div>
      {connectors.map((connector) => (
        <button key={connector.id} onClick={() => connector.connect()}>
          Connect with {connector.name}
        </button>
      ))}
    </div>
  );
}

### 22. `useBalance`
**Purpose:** Fetches the balance of a specific Ethereum address.

import { useBalance } from 'wagmi';

function App() {
  const { data: balance } = useBalance({
    address: '0xYourAccountAddress',
  });

  return <div>Balance: {balance?.formatted} ETH</div>;
}

### Utility & Miscellaneous Hooks
### 23. `usePublicClient`
**Purpose:** Provides access to a public RPC client, which is useful for sending read-only requests to the blockchain.

import { usePublicClient } from 'wagmi';

function App() {
  const publicClient = usePublicClient();

  return <div>Public Client Ready: {publicClient ? 'Yes' : 'No'}</div>;
}

### 24. `useToken`
**Purpose:** Fetches details about a specific ERC-20 token.

import { useToken } from 'wagmi';

function App() {
  const { data: token } = useToken({
    address: '0xTokenContractAddress',
  });

  return <div>Token Name: {token?.name}</div>;
}

### 25. `useSendTransaction`
**Purpose:** Sends a raw Ethereum transaction from the connected wallet.

import { useSendTransaction } from 'wagmi';

function App() {
  const { sendTransaction } = useSendTransaction({
    to: '0xRecipientAddress',
    value: '1000000000000000000', // 1 ETH in wei
  });

  return <button onClick={() => sendTransaction()}>Send 1 ETH</button>;
}

### 26. `useWaitForTransactionReceipt`
**Purpose:** Waits for a transaction to be mined and returns its status.

import { useWaitForTransactionReceipt } from 'wagmi';

function App() {
  const { data: receipt } = useWaitForTransactionReceipt({
    hash: '0xYourTransactionHash',
  });

  return <div>Transaction Status: {receipt?.status}</div>;
}

### 27. `useWatchBlockNumber`
**Purpose:** Watches for changes in the block number, useful for real-time applications.

import { useWatchBlockNumber } from 'wagmi';

function App() {
  useWatchBlockNumber((blockNumber) => {
    console.log('New block:', blockNumber);
  });

  return <div>Watching block number...</div>;
}

### 28. `useWatchContractEvent`
**Purpose:** Watches for specific events emitted by a smart contract.

import { useWatchContractEvent } from 'wagmi';

function App() {
  useWatchContractEvent({
    address: '0xYourContractAddress',
    abi: YourContractABI,
    eventName: 'Transfer',
    listener: (event) => console.log('Transfer event:', event),
  });

  return <div>Watching contract events...</div>;
}

### 29. `useWatchPendingTransactions`
**Purpose:** Watches for pending transactions related to a specific account or contract.

import { useWatchPendingTransactions } from 'wagmi';

function App() {
  useWatchPendingTransactions((transaction) => {
    console.log('Pending transaction:', transaction);
  });

  return <div>Watching pending transactions...</div>;
}

### 30. `useWatchBlock`
**Purpose:** Watches for new blocks being added to the blockchain and returns the latest block's details.

import { useWatchBlock } from 'wagmi';

function App() {
  const { data: latestBlock } = useWatchBlock();

  return (
    <div>
      Latest Block Number: {latestBlock?.number} <br />
      Block Timestamp: {latestBlock?.timestamp}
    </div>
  );
}

Will be updating this summary soon...
Have a nice read with a cup of coffee ☕️