React Native DApp 开发全栈实战·从 0 到 1 系列（兑换-前端部分）

前言

基于《 React Native DApp 开发全栈实战·从 0 到 1 系列（兑换-合约部分）》,本文进入"前端交互"环节，用 React Native + ethers.js 完成一次"1 ETH 换 BTK"的完整用户旅程：唤起钱包 → 读取实时报价 → 一键兑换 → 余额即时刷新。

前期准备

• hardhat启动网络节点：npx hardhat node
• 合约编译：npx hardhat compile 生成对应的xxx.json用获取abi等相关信息
• 合约部署：npx hardhat deploy --tags token4,MockV3Aggregator,SwapToken 获取合约地址(资产代币、喂价和兑换合约地址)
• 节点的私钥导入钱包：用来与合约交互时支付对应的gas费

核心代码

公共代码

import { abi as MockV3AggregatorABI } from '@/abi/MockV3Aggregator.json';
import { abi as MyTokenABI } from '@/abi/MyToken4.json';
import { abi as SwapTokenABI } from '@/abi/SwapToken.json';
import * as ethers from 'ethers';

铸造兑换流程

• 说明："预言机读价 → 给 swap 合约打币 → 用户把 1 ETH 打进去 → 合约按价放 BTK → 用户余额增加" 。

const SwapTokenFn=async ()=>{
        const provider = new ethers.providers.Web3Provider(window.ethereum);
        await provider.send('eth_requestAccounts', []); // 唤起钱包
        const signer = await provider.getSigner();
        const userAddr = await signer.getAddress();//当前用户地址
        console.log('当前用户地址',userAddr)
        const MyTokenAddress="0x99bbA657f2BbC93c02D617f8bA121cB8Fc104Acf" //代币
        const MockV3AggregatorAddress="0x8f86403A4DE0BB5791fa46B8e795C547942fE4Cf"//MockV3Aggregator地址
        const SwapTokenAddress="0x9d4454B023096f34B160D6B654540c56A1F81688"//兑换地址
        
        const MyTokenContract = new ethers.Contract(MyTokenAddress, MyTokenABI, signer);
        const MockV3AggregatorContract = new ethers.Contract(MockV3AggregatorAddress, MockV3AggregatorABI, signer);
        const SwapTokenContract = new ethers.Contract(SwapTokenAddress, SwapTokenABI, signer);
        //验证
        const price = await MockV3AggregatorContract.latestAnswer();
        console.log("ETH/USD price", price.toString());   // 期望 2000 * 1e8
        const usdEquiv = await SwapTokenContract.getEthInUsd(ethers.utils.parseEther("1"));
        console.log("1 ETH 对应 USD 数量", usdEquiv.toString()); // 期望 2000
        //铸造代币
        const tx = await MyTokenContract.mint(SwapTokenAddress, ethers.utils.parseEther("4000000"));
        const rcpt = await tx.wait();
        console.log('mint status', rcpt.status);
        console.log("兑换余额",ethers.utils.formatEther(await MyTokenContract.balanceOf(SwapTokenAddress)))
        const usd = await SwapTokenContract.getEthInUsd(ethers.utils.parseEther("1")); // 2000
        const btkWei = usd.mul(1000).mul(ethers.utils.parseEther("1")); // 2000*1000*1e18
        console.log("应得 BTK（wei）", btkWei.toString());
        /* 6. 发起兑换：1 ETH -> BTK */
        const ethAmount = ethers.utils.parseEther("1");
        const txSwap = await SwapTokenContract.swap({ value: ethAmount });
        await txSwap.wait();

        /* 7. 查询结果 */
        const btkBalance = await MyTokenContract.balanceOf(userAddr);
        console.log(btkBalance)
        const dec = await MyTokenContract.decimals();
        console.log("💰 兑换后 BTK 余额:", ethers.utils.formatUnits(btkBalance,0));
    }

效果图

总结

1. 三步跑通移动端 swap

   • 本地链准备：npx hardhat node 一键启动，私钥导入 MetaMask 即可秒连。
   • 合约地址注入：通过 npx hardhat deploy --tags token4,MockV3Aggregator,SwapToken 拿到三个核心地址，前端直接引用。
   • 前端调用：借助 ethers.js 的 Web3Provider 把 MetaMask 变成签名器，完成合约实例化，完成 swap。

2. 关键路径拆解

   预言机读价 → 预铸流动性 → 用户输入 1 ETH → 合约按价放 BTK → 余额实时回显，整条链路在 10 秒内闭环。

3. 下一步优化

   • 把 latestAnswer 换成 latestRoundData 并加价格过期校验，满足生产级安全。
   • 用 useContractEvent 监听 Swap 事件，实现"交易成功即弹 Toast + 自动刷新余额"。
   • 把 Hardhat 节点替换成 Alchemy/Infura，即可直接上线 TestFlight 让好友体验。

至此，合约 + 前端 + 钱包 的完整 DeFi 小闭环已经在你的手机里跑通。