Ethereum

npm install wagmi [email protected] @tanstack/react-query

// src/wagmi.ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from './wagmi'
import App from './App'

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>,
)

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

export function ConnectWallet() {
  const { address, isConnected, status } = useAccount()
  const { connectors, connect, isPending, error } = useConnect()
  const { disconnect } = useDisconnect()

  if (isConnected) {
    return (
      <section>
        <p>Wallet connected</p>
        <p>{address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </section>
    )
  }

  return (
    <section>
      <p>Status: {status}</p>

      {connectors.map((connector) => (
        <button
          key={connector.uid}
          disabled={isPending}
          onClick={() => connect({ connector })}
        >
          {isPending ? 'Check your wallet' : `Connect ${connector.name}`}
        </button>
      ))}

      {error ? <p>Could not connect: {error.message}</p> : null}
    </section>
  )
}

import { useReadContract } from 'wagmi'

const tokenAbi = [
  {
    type: 'function',
    name: 'totalSupply',
    stateMutability: 'view',
    inputs: [],
    outputs: [{ name: '', type: 'uint256' }],
  },
] as const

const tokenAddress = '0x0000000000000000000000000000000000000000'

export function TotalSupplyCard() {
  const {
    data,
    isLoading,
    isError,
    error,
    refetch,
  } = useReadContract({
    abi: tokenAbi,
    address: tokenAddress,
    functionName: 'totalSupply',
  })

  if (isLoading) return <p>Reading contract...</p>

  if (isError) {
    return (
      <section>
        <p>Could not read total supply.</p>
        <p>{error.message}</p>
        <button onClick={() => refetch()}>Try again</button>
      </section>
    )
  }

  return (
    <section>
      <h2>Total supply</h2>
      <p>{data?.toString() ?? 'No data returned'}</p>
      <button onClick={() => refetch()}>Refresh</button>
    </section>
  )
}

function getWalletErrorMessage(error: unknown) {
  const err = error as { code?: number; message?: string }

  if (err.code === 4001) {
    return 'You rejected the request in your wallet.'
  }

  if (err.code === -32002) {
    return 'A wallet request is already open. Open MetaMask and approve or reject it.'
  }

  return err.message || 'Something went wrong. Please try again.'
}

import { useState } from 'react'
import { useWaitForTransactionReceipt, useWriteContract } from 'wagmi'

export function MintButton({ abi, address }: { abi: any; address: `0x${string}` }) {
  const [hash, setHash] = useState<`0x${string}` | undefined>()
  const [message, setMessage] = useState('')
  const [waitingForWallet, setWaitingForWallet] = useState(false)

  const { writeContractAsync } = useWriteContract()

  const receipt = useWaitForTransactionReceipt({
    hash,
  })

  const busy = waitingForWallet || receipt.isLoading

  async function onMint() {
    if (busy) return

    setMessage('Check your wallet. You are about to send a transaction.')
    setWaitingForWallet(true)

    try {
      const txHash = await writeContractAsync({
        abi,
        address,
        functionName: 'mint',
        args: [],
      })

      setHash(txHash)
      setMessage('Transaction sent. Waiting for confirmation.')
    } catch (error) {
      setMessage(getWalletErrorMessage(error))
    } finally {
      setWaitingForWallet(false)
    }
  }

  return (
    <div>
      <button onClick={onMint} disabled={busy}>
        {waitingForWallet ? 'Waiting for wallet' : receipt.isLoading ? 'Confirming' : 'Mint'}
      </button>
      {hash && <p>Transaction hash: {hash}</p>}
      {receipt.isSuccess && <p>Confirmed.</p>}
      {receipt.isError && <p>Transaction failed or reverted.</p>}
      <p>{message}</p>
    </div>
  )
}