web3，区块链

任小栗
786 阅读6分钟

钱包交互

  1. 链接钱包：

    import { useWeb3React } from '@web3-react/core';
import { injected } from '../../utils/connectors';

const { activate } = useWeb3React();

const connectWallet = () => {
  activate(injected);
};

  2. 添加Chain节点：

    const addChain = () => {
  window.ethereum.request({
    method: 'wallet_addEthereumChain',
    params: [
      {
        chainId: '0x4',
        chainName: 'Rinkeby Test Network',
        nativeCurrency: {
          name: 'Ether',
          symbol: 'ETH',
          decimals: 18,
        },
        rpcUrls: ['https://rinkeby.infura.io/v3/your_project_id'],
        blockExplorerUrls: ['https://rinkeby.etherscan.io'],
      },
    ],
  });
};

  3. 切换节点：

    const switchChain = () => {
  window.ethereum.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: '0x1' }],
  });
};

  4. 获取账户余额：

    import { useWeb3React } from '@web3-react/core';
import { formatEther } from '@ethersproject/units';

const { account, library } = useWeb3React();

const getBalance = async () => {
  const balance = await library.getBalance(account);
  const formattedBalance = formatEther(balance);
  console.log(formattedBalance);
};

  5. 获取账户签名：

    const getSignature = async () => {
  const message = 'Hello, World!';
  const signature = await library.getSigner().signMessage(message);
  console.log(signature);
};

ERC20合约

  1. 初始化ERC20合约：

    import { Contract } from '@ethersproject/contracts';
import { useWeb3React } from '@web3-react/core';
import ERC20_ABI from '../../abis/ERC20.json';

const { library } = useWeb3React();
const address = '0x...'; // ERC20合约地址
const contract = new Contract(address, ERC20_ABI, library.getSigner());

  2. 获取ERC20的Name和Symbol：

    const getNameAndSymbol = async () => {
  const name = await contract.name();
  const symbol = await contract.symbol();
  console.log(name, symbol);
};

  3. 获取ERC20的Token余额：

    const { account } = useWeb3React();

const getBalance = async () => {
  const balance = await contract.balanceOf(account);
  console.log(balance.toString());
};

  4. 将ERC20的Token Transfer给另一个账户：

    const recipient = '0x...'; // 接收地址
const amount = '1000000000000000000'; // 转账数量

const transfer = async () => {
  const tx = await contract.transfer(recipient, amount);
  console.log(tx);
};

  5. 将ERC20授权给合约使用：

    const spender = '0x...'; // 合约地址
const amount = '1000000000000000000'; // 授权数量

const approve = async () => {
  const tx = await contract.approve(spender, amount);
  console.log(tx);
};

流动池

  1. 创建流动池：

    import { Contract } from '@ethersproject/contracts';
import { useWeb3React } from '@web3-react/core';
import UNISWAP_ROUTER_ABI from '../../abis/UniswapV2Router02.json';

const { library } = useWeb3React();
const routerAddress = '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D';
const routerContract = new Contract(routerAddress, UNISWAP_ROUTER_ABI, library.getSigner());

const tokenAAddress = '0x...'; // TokenA地址
const tokenBAddress = '0x...'; // TokenB地址
const amountADesired = '1000000000000000000'; // TokenA数量
const amountBDesired = '1000000000000000000'; // TokenB数量
const amountAMin = '0';
const amountBMin = '0';
const to = '0x...'; // 接收地址
const deadline = Math.floor(Date.now() / 1000) + 60 * 20; // 20分钟

const createPool = async () => {
  const tx = await routerContract.addLiquidity(
    tokenAAddress,
    tokenBAddress,
    amountADesired,
    amountBDesired,
    amountAMin,
    amountBMin,
    to,
    deadline
  );
  console.log(tx);
};

  2. 输入TokenA数量，并自动计算出TokenB的数量：

    import { useState } from 'react';

const [amountA, setAmountA] = useState('');
const [amountB, setAmountB] = useState('');

const getAmountB = async () => {
  const amounts = await routerContract.getAmountsOut(amountA, [tokenAAddress, tokenBAddress]);
  setAmountB(amounts[1]);
};

return (
  <div>
    <input value={amountA} onChange={(e) => set


3. 交换Token：

```javascript
const path = [tokenAAddress, tokenBAddress];
const amountIn = '1000000000000000000'; // TokenA数量
const amountOutMin = '0';
const to = '0x...'; // 接收地址
const deadline = Math.floor(Date.now() / 1000) + 60 * 20; // 20分钟

const swapTokens = async () => {
  const tx = await routerContract.swapExactTokensForTokens(
    amountIn,
    amountOutMin,
    path,
    to,
    deadline
  );
  console.log(tx);
};

  1. 移除流动池：

    const liquidity = '1000000000000000000'; // 流动池份额
const amountAMin = '0';
const amountBMin = '0';
const to = '0x...'; // 接收地址
const deadline = Math.floor(Date.now() / 1000) + 60 * 20; // 20分钟

const removeLiquidity = async () => {
  const tx = await routerContract.removeLiquidity(
    tokenAAddress,
    tokenBAddress,
    liquidity,
    amountAMin,
    amountBMin,
    to,
    deadline
  );
  console.log(tx);
};

  2. 添加流动池：

    const amountADesired = '1000000000000000000'; // TokenA数量
const amountBDesired = '1000000000000000000'; // TokenB数量
const amountAMin = '0';
const amountBMin = '0';
const to = '0x...'; // 接收地址
const deadline = Math.floor(Date.now() / 1000) + 60 * 20; // 20分钟

const addLiquidity = async () => {
  const tx = await routerContract.addLiquidity(
    tokenAAddress,
    tokenBAddress,
    amountADesired,
    amountBDesired,
    amountAMin,
    amountBMin,
    to,
    deadline
  );
  console.log(tx);
};

总结

本文介绍了在React中使用Web3 React库与以太坊交互的基础知识和技巧。我们先介绍了Web3 React的基本用法，包括连接以太坊网络、获取账户信息等。然后，我们介绍了如何使用Web3 React与ERC20合约交互，包括获取合约的Name和Symbol、获取Token余额、转账和授权等。最后，我们介绍了如何使用Web3 React与Uniswap V2交互，包括创建流动池、计算Token的交换量、交换Token、移除流动池和添加流动池等。通过本文的学习，读者可以了解到如何在React中使用Web3 React与以太坊进行交互，并可以根据需要进行扩展和优化。

import { injected } from '../../utils/connectors';

这是一个从 @web3-react/injected-connector 模块导入的 injected 变量，它是一个Web3 React的Connector对象，用于连接到以太坊网络并获取用户的账户信息。

在使用Web3 React与以太坊进行交互时，我们需要使用一个连接器（Connector）对象来连接到以太坊网络，并获取用户的账户信息。injected 连接器是一种常见的连接器，它允许用户使用他们的Web3浏览器插件（如Metamask）与以太坊进行交互。

当我们在React中使用Web3 React时，通常会在应用程序的根组件中使用 Web3ReactProvider 包装整个应用程序，并将连接器作为其 getLibrary 函数的参数传递，以便在整个应用程序中共享连接器对象。

例如：

import { Web3ReactProvider } from '@web3-react/core';
import { injected } from '../../utils/connectors';

function getLibrary(provider) {
  return new Web3Provider(provider);
}

function App() {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <YourApp />
    </Web3ReactProvider>
  );
}

在这里，我们将 injected 连接器作为 getLibrary 函数的参数传递，以便在整个应用程序中共享连接器对象。在其他组件中，我们可以使用 useWeb3React 钩子来访问当前连接器和用户的账户信息，从而与以太坊进行交互。

import ERC20_ABI from '../../abis/ERC20.json';

ERC20_ABI 是一个ERC20代币合约的ABI（Application Binary Interface，应用程序二进制接口），它定义了合约的函数和事件等信息，用于与合约进行交互。

ERC20是以太坊上最常见的代币标准之一，它定义了代币的基本功能和行为，包括代币的名称、符号、总供应量、余额查询、转账、授权等。由于ERC20代币合约的标准化，使得代币之间可以互相交换和使用，大大促进了以太坊生态系统的发展。目前，大部分DeFi项目都使用ERC20代币作为其交易和治理的基础。

ERC20_ABI 可以从多个地方获取，其中包括：

  1. OpenZeppelin：OpenZeppelin是以太坊上最流行的智能合约库之一，提供了许多常用的智能合约模板和工具。他们的ERC20合约实现是最常用的之一，可以从他们的GitHub仓库中获取。
  2. Etherscan：如果你想获取某个ERC20代币的ABI，可以在Etherscan上搜索该代币的合约地址，并在合约详情页面中找到ABI信息。注意，这种方法只适用于已经部署在以太坊上的合约。
  3. Solidity编译器：如果你有该合约的源代码，可以使用Solidity编译器编译合约并获取ABI信息。

一旦获取了ERC20代币合约的ABI，我们就可以使用Web3.js或Web3 React等工具来与该合约进行交互，包括查询代币余额、转账、授权等操作。

流动池合约  UNISWAP_ROUTER_ABI 是 Uniswap v2 路由合约的 ABI（Application Binary Interface，应用程序二进制接口），它定义了合约的函数和事件等信息，用于与合约进行交互。

要获取 Uniswap v2 路由合约的 ABI，可以从以下几个途径中获取：

  1. Uniswap v2 GitHub 仓库：Uniswap v2 是一个开源项目，其 GitHub 仓库中包含了 Uniswap v2 路由合约的源代码和 ABI 等信息，可以从仓库中获取。
  2. Etherscan：Uniswap v2 路由合约已经部署在以太坊上，可以在 Etherscan 上搜索该合约的地址，并在合约详情页面中找到 ABI 信息。
  3. Solidity 编译器：如果你有 Uniswap v2 路由合约的源代码，可以使用 Solidity 编译器编译合约并获取 ABI 信息。

一旦获取了 Uniswap v2 路由合约的 ABI，我们就可以使用 Web3.js 或 Web3 React 等工具来与该合约进行交互，包括添加流动性、交换代币等操作。

avatar
文章
阅读
粉丝