如何在Brownie中获取ERC20地址及ABI供React前端开发类Uniswap应用

• 代币地址获取
  • 本地测试环境下自己部署的测试代币，直接从Brownie部署返回的合约实例中取contract.address字段，存入brownie-config.yaml对应网络的配置项即可。
  • 主网/公链测试网的已上线代币，通用主流代币（如WETH、USDC、USDT等）直接按链维度写死为项目静态常量即可；用户自定义输入的小众代币，在用户输入地址后先做地址合法性校验，再关联对应ABI即可。
• ABI获取
  • 自己开发的合约、本地测试代币，编译完成后直接从项目根目录的build/contracts文件夹下对应合约的JSON文件中提取abi字段即可。
  • 公网已上线的代币，99%都符合ERC20标准，直接用通用ERC20 ABI就可以调用balanceOf、transfer、approve等核心方法，不需要单独拉取每个代币的ABI；有特殊自定义方法的非标准代币再单独存储对应ABI即可。

• 先在前端项目里建立统一的常量配置目录，比如src/constants，分别新建文件存储不同链的代币地址、各类合约的ABI常量，示例配置如下：

// src/constants/abis.js 存储ABI
export const ERC20_ABI = [/* 通用ERC20 ABI内容 */]
export const UNISWAP_V2_FACTORY_ABI = [/*  Factory合约ABI */]

// src/constants/tokens.js 存储代币地址
export const COMMON_TOKEN_ADDRESS = {
  // key为链ID，value对应当前链的代币地址
  1: {
    WETH: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
    USDC: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
  },
  5: {
    WETH: "0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6",
    USDC: "0x07865c6E87B9F70255377e024ace6630C1Eaa37F"
  }
}

• 钱包连接成功后拿到当前链的chainId，用chainId匹配对应链的代币地址，避免跨链调用出错。
• 调用ethers.js/web3.js实例化合约时直接导入对应ABI和地址即可，示例代码如下：

import { ethers } from 'ethers'
import { ERC20_ABI } from '@/constants/abis'

// 生成ERC20合约实例
const getERC20Contract = (tokenAddress, provider) => {
  return new ethers.Contract(tokenAddress, ERC20_ABI, provider)
}

• 配置分层：主流通用资产的地址、ABI做静态预配置，仅用户输入的陌生资产才做动态校验和ABI拉取，减少不必要的请求开销。
• 缓存机制：前端将用户查询过的陌生代币的ABI、精度、符号等信息存入localStorage，用户二次使用相同代币时无需重复拉取数据。
• 批量请求优化：使用Multicall合约批量查询多个代币的余额、授权额度等信息，大幅减少RPC请求次数，提升页面响应速度。
• 合法性校验：所有用户输入的代币地址先做格式校验，再调用totalSupply、symbol等标准方法校验是否为合规ERC20合约，避免恶意地址导致前端报错。
• 链隔离配置：所有代币地址、合约地址都以chainId为key做分组，切换链时自动刷新所有关联的合约实例，完全避免跨链调用错误。

内容的提问来源于stack exchange，提问作者Haidarali Masu