blockchain-web3-expert

Blockchain & Web3 Expert (2026 Edition)

English | Bahasa Indonesia

---

English

Orchestration & Integration

• senior-frontend: React and Next.js frontend state for Web3 wallets.
• authentication-identity-expert: Sign-In with Ethereum (SIWE / ERC-4361).
• error-resilience-expert: Handling RPC node timeouts, network switches, and user transaction rejections.
• post-quantum-crypto-migrator: Future-proofing cryptographic signatures and hash functions.

Description

Production-ready guide for building decentralized applications (dApps) on EVM-compatible blockchains. Covers typed smart contract interactions with viem and wagmi v2, wallet connectivity with RainbowKit / AppKit, gas estimation, transaction lifecycle management, ERC-20 / ERC-721 / ERC-1155 standards, and decentralized storage (IPFS/Arweave).

Trigger Conditions

• Integrating crypto wallet connections (MetaMask, Coinbase Wallet, WalletConnect).
• Reading from and writing to Ethereum / Polygon / Arbitrum / Base smart contracts.
• Implementing Sign-In With Ethereum (SIWE) authentication.
• Minting, transferring, or querying ERC-20 tokens or NFTs.

---

Core Architecture & Modern Patterns

1. Wallet Connection & Config (wagmi.config.ts)

import { http, createConfig } from 'wagmi';
import { mainnet, base, arbitrum } from 'wagmi/chains';
import { injected, walletConnect } from 'wagmi/connectors';

export const config = createConfig({
  chains: [mainnet, base, arbitrum],
  connectors: [
    injected(),
    walletConnect({ projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID! }),
  ],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
    [arbitrum.id]: http(),
  },
});

2. Contract Interaction Hook (Wagmi v2 + Viem)

import { useAccount, useReadContract, useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
import { parseAbi } from 'viem';

const ERC20_ABI = parseAbi([
  'function balanceOf(address owner) view returns (uint256)',
  'function transfer(address to, uint256 amount) returns (bool)',
]);

export function TokenTransferCard({ tokenAddress }: { tokenAddress: `0x${string}` }) {
  const { address, isConnected } = useAccount();
  const { data: balance, refetch } = useReadContract({
    address: tokenAddress,
    abi: ERC20_ABI,
    functionName: 'balanceOf',
    args: address ? [address] : undefined,
  });

  const { data: hash, writeContract, isPending } = useWriteContract();
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash });

  const handleSend = (recipient: `0x${string}`, amount: bigint) => {
    writeContract({
      address: tokenAddress,
      abi: ERC20_ABI,
      functionName: 'transfer',
      args: [recipient, amount],
    });
  };

  if (!isConnected) return <p>Please connect your wallet.</p>;

  return (
    <div>
      <p>Balance: {balance?.toString()}</p>
      {isPending && <p>Waiting for signature...</p>}
      {isConfirming && <p>Confirming transaction on-chain...</p>}
      {isSuccess && <p>Transfer completed successfully!</p>}
    </div>
  );
}