《纸上谈兵·solidity》第 36 课：去中心化交易所（DEX）实战 — 上线

// SwapWidget.jsx
import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
import SimpleFactoryABI from "./abi/SimpleFactory.json";
import SimplePairABI from "./abi/SimplePair.json";
import IERC20ABI from "./abi/IERC20.json";

const FACTORY_ADDR = "0x..."; // 部署好的 factory

function getAmountOut(amountIn, reserveIn, reserveOut) {
  // UniswapV2 formula with fee 0.3% (numerator 997, denominator 1000)
  const amountInWithFee = amountIn * 997n;
  const numerator = amountInWithFee * BigInt(reserveOut);
  const denominator = (BigInt(reserveIn) * 1000n) + amountInWithFee;
  return numerator / denominator;
}

export default function SwapWidget({ tokenInAddr, tokenOutAddr }) {
  const [provider, setProvider] = useState(null);
  const [signer, setSigner] = useState(null);
  const [factory, setFactory] = useState(null);
  const [pairAddr, setPairAddr] = useState(null);
  const [reserveIn, setReserveIn] = useState(0n);
  const [reserveOut, setReserveOut] = useState(0n);
  const [amountIn, setAmountIn] = useState("0.0");
  const [amountOutEst, setAmountOutEst] = useState("0.0");
  const [slippage, setSlippage] = useState(0.005); // 0.5%

  useEffect(() => {
    if (!window.ethereum) return;
    const p = new ethers.BrowserProvider(window.ethereum);
    setProvider(p);
    p.getSigner().then(s => setSigner(s));
    const f = new ethers.Contract(FACTORY_ADDR, SimpleFactoryABI, p);
    setFactory(f);
  }, []);

  useEffect(() => {
    if (!factory || !tokenInAddr || !tokenOutAddr) return;
    async function loadPair() {
      const addr = await factory.getPair(tokenInAddr, tokenOutAddr);
      setPairAddr(addr);
      if (addr !== ethers.ZeroAddress) {
        const pair = new ethers.Contract(addr, SimplePairABI, provider);
        const r = await pair.getReserves();
        // need to map reserves to tokenIn/tokenOut order
        const token0 = tokenInAddr.toLowerCase() < tokenOutAddr.toLowerCase() ? tokenInAddr : tokenOutAddr;
        const reserve0 = BigInt(r[0].toString());
        const reserve1 = BigInt(r[1].toString());
        if (token0 === tokenInAddr.toLowerCase()) {
          setReserveIn(reserve0);
          setReserveOut(reserve1);
        } else {
          setReserveIn(reserve1);
          setReserveOut(reserve0);
        }
      }
    }
    loadPair();
  }, [factory, tokenInAddr, tokenOutAddr, provider]);

  useEffect(() => {
    if (!reserveIn || !reserveOut) return;
    try {
      const ai = BigInt(ethers.parseUnits(amountIn || "0", 18).toString());
      const out = getAmountOut(ai, reserveIn, reserveOut);
      setAmountOutEst(ethers.formatUnits(out.toString(), 18));
    } catch (e) {
      setAmountOutEst("0.0");
    }
  }, [amountIn, reserveIn, reserveOut]);

  async function swap() {
    if (!signer || !pairAddr) return alert("Connect wallet or no pair");
    const pair = new ethers.Contract(pairAddr, SimplePairABI, signer);
    const tokenIn = new ethers.Contract(tokenInAddr, IERC20ABI, signer);
    const tokenOut = new ethers.Contract(tokenOutAddr, IERC20ABI, signer);

    const decimals = 18; // adapt per token
    const amountInParsed = ethers.parseUnits(amountIn, decimals);

    // Estimate amountOut
    const amountOut = BigInt(ethers.parseUnits(amountOutEst, decimals).toString());
    const minOut = amountOut - (amountOut * BigInt(Math.floor(slippage * 10000))) / 10000n; // convert slippage to fraction

    // Approve pair to spend tokenIn
    const allowance = await tokenIn.allowance(await signer.getAddress(), pairAddr);
    if (BigInt(allowance.toString()) < BigInt(amountInParsed.toString())) {
      const tx = await tokenIn.approve(pairAddr, amountInParsed);
      await tx.wait();
    }

    // Determine which side to call: we must call swap(amount0Out, amount1Out, to, "")
    // Map tokenIn/tokenOut to token0/token1
    const token0Addr = await pair.token0();
    let tx;
    if (token0Addr.toLowerCase() === tokenInAddr.toLowerCase()) {
      // tokenIn is token0 -> output is token1
      const amount1Out = BigInt(minOut.toString());
      tx = await pair.swap(0n, amount1Out, await signer.getAddress(), "0x");
    } else {
      const amount0Out = BigInt(minOut.toString());
      tx = await pair.swap(amount0Out, 0n, await signer.getAddress(), "0x");
    }
    await tx.wait();
    alert("Swap executed");
  }

  return (
    <div>
      <h3>Swap</h3>
      <input value={amountIn} onChange={(e) => setAmountIn(e.target.value)} />
      <p>Estimated Out: {amountOutEst}</p>
      <p>Slippage: {(slippage*100).toFixed(2)}%</p>
      <button onClick={swap}>Swap</button>
    </div>
  );
}