Building a DeFi dApp — React + ethers.js + MetaMask full walkthrough

npx create-react-app my-dapp
cd my-dapp
npm install ethers@6

That is all you need — React for the UI and ethers.js for blockchain interaction. No special Web3 framework required.

// src/hooks/useWallet.js
import { useState, useEffect, useCallback } from 'react';
import { ethers } from 'ethers';

export function useWallet() {
  const [account, setAccount] = useState(null);
  const [provider, setProvider] = useState(null);
  const [signer, setSigner] = useState(null);
  const [chainId, setChainId] = useState(null);

  const connect = useCallback(async () => {
    if (!window.ethereum) {
      alert('Install MetaMask to use this dApp');
      return;
    }

    const provider = new ethers.BrowserProvider(window.ethereum);
    const accounts = await provider.send('eth_requestAccounts', []);
    const signer = await provider.getSigner();
    const network = await provider.getNetwork();

    setProvider(provider);
    setSigner(signer);
    setAccount(accounts[0]);
    setChainId(Number(network.chainId));
  }, []);

  useEffect(() => {
    if (!window.ethereum) return;

    // Listen for account and chain changes
    window.ethereum.on('accountsChanged', (accounts) => {
      setAccount(accounts[0] || null);
    });
    window.ethereum.on('chainChanged', () => {
      window.location.reload();
    });
  }, []);

  return { account, provider, signer, chainId, connect };
}

// src/components/ConnectButton.jsx
import { useWallet } from '../hooks/useWallet';

export function ConnectButton() {
  const { account, connect, chainId } = useWallet();

  if (account) {
    return (
      <div>
        <span>{account.slice(0, 6)}...{account.slice(-4)}</span>
        <span>Chain: {chainId}</span>
      </div>
    );
  }

  return <button onClick={connect}>Connect Wallet</button>;
}

// src/hooks/useTokenBalance.js
import { useState, useEffect } from 'react';
import { ethers } from 'ethers';

const ERC20_ABI = [
  'function balanceOf(address) view returns (uint256)',
  'function decimals() view returns (uint8)',
  'function symbol() view returns (string)',
  'function name() view returns (string)',
];

export function useTokenBalance(tokenAddress, account, provider) {
  const [balance, setBalance] = useState('0');
  const [symbol, setSymbol] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!provider || !account || !tokenAddress) return;

    const fetchBalance = async () => {
      const token = new ethers.Contract(tokenAddress, ERC20_ABI, provider);
      const [bal, dec, sym] = await Promise.all([
        token.balanceOf(account),
        token.decimals(),
        token.symbol(),
      ]);
      setBalance(ethers.formatUnits(bal, dec));
      setSymbol(sym);
      setLoading(false);
    };

    fetchBalance();
    const interval = setInterval(fetchBalance, 15000); // refresh every block
    return () => clearInterval(interval);
  }, [tokenAddress, account, provider]);

  return { balance, symbol, loading };
}

// Usage in a component:
// const { balance, symbol } = useTokenBalance(USDC_ADDRESS, account, provider);
// <p>{balance} {symbol}</p>

// src/hooks/useSwap.js
import { ethers } from 'ethers';

const ROUTER_ABI = [
  'function swapExactTokensForTokens(uint amountIn, uint amountOutMin, address[] path, address to, uint deadline) returns (uint[] amounts)',
  'function getAmountsOut(uint amountIn, address[] path) view returns (uint[] amounts)',
];

const ERC20_ABI = [
  'function approve(address spender, uint256 amount) returns (bool)',
  'function allowance(address owner, address spender) view returns (uint256)',
];

export async function executeSwap(signer, routerAddress, tokenIn, tokenOut, amountIn) {
  const router = new ethers.Contract(routerAddress, ROUTER_ABI, signer);
  const tokenContract = new ethers.Contract(tokenIn, ERC20_ABI, signer);

  // Step 1: Check and set allowance
  const address = await signer.getAddress();
  const allowance = await tokenContract.allowance(address, routerAddress);
  const amountWei = ethers.parseUnits(amountIn, 18);

  if (allowance < amountWei) {
    console.log('Approving token spend...');
    const approveTx = await tokenContract.approve(routerAddress, amountWei);
    await approveTx.wait();
    console.log('Approved');
  }

  // Step 2: Get quote
  const path = [tokenIn, tokenOut];
  const amounts = await router.getAmountsOut(amountWei, path);
  const minOut = amounts[1] * 99n / 100n; // 1% slippage tolerance

  // Step 3: Execute swap
  const deadline = Math.floor(Date.now() / 1000) + 300; // 5 minutes
  const tx = await router.swapExactTokensForTokens(
    amountWei, minOut, path, address, deadline
  );

  const receipt = await tx.wait();
  console.log('Swap complete:', receipt.hash);
  return receipt;
}

This is the complete flow: check allowance, approve if needed, get a price quote, set slippage tolerance, and execute the swap. Every DeFi frontend follows this exact pattern.