从零开始的合约交互小知识(2)

614 words

3 minutes

从零开始的合约交互小知识(2)

2022-09-15

web3

区块链

/

metamask

/

ethers

如何显示“正确”的页面#

当用户进入活动页面时，用户链接的是非当前页面期望的网络，例如当前页面接入合约为 BSC 链，用户 MetaMask 链接的为 ETH 链，如果直接请求合约会报错导致页面显示数据错乱甚至无法打开。

如何做到获取合约的信息是正确的？

参考官方示例： Connecting to a Contract

1
// A Human-Readable ABI; for interacting with the contract, we
2
// must include any fragment we wish to use
3
const abi = [
4
    // Read-Only Functions
5
    "function balanceOf(address owner) view returns (uint256)",
6
    "function decimals() view returns (uint8)",
7
    "function symbol() view returns (string)",
8

9
    // Authenticated Functions
10
    "function transfer(address to, uint amount) returns (bool)",
11

12
    // Events
13
    "event Transfer(address indexed from, address indexed to, uint amount)"
14
];
15

16
// This can be an address or an ENS name
17
const address = "0x764a06fDdcE6b8895b6E7F9ba2874711BF31edEa";
18

19
// Read-Only; By connecting to a Provider, allows:
20
// - Any constant function
21
// - Querying Filters
22
// - Populating Unsigned Transactions for non-constant methods
23
// - Estimating Gas for non-constant (as an anonymous sender)
24
// - Static Calling non-constant methods (as anonymous sender)
25
const erc20 = new ethers.Contract(address, abi, provider);
26

27
// Read-Write; By connecting to a Signer, allows:
28
// - Everything from Read-Only (except as Signer, not anonymous)
29
// - Sending transactions for non-constant functions
30
const erc20_rw = new ethers.Contract(address, abi, signer);

这时可以在构建合约对象同步注入 JsonRpcProvider 以支撑运行合约

1
const rpcUrls = 'https://bsc-dataseed1.ninicoin.io' // bsc rpc url
2
const jsonProvider = new ethers.providers.JsonRpcProvider(rpcUrls);
3
const erc20 = new ethers.Contract(address, abi, jsonProvider);

需要注意的是该方法只能读取合约只读方法，无法调用写方法（如：Transfer），若需要实施交互性操作，应提醒用户切换至正确的链。

切链操作#

wallet_addEthereumChain

构建多链数组，数组结构如下：

1
interface AddEthereumChainParameter {
2
  chainId: string; // A 0x-prefixed hexadecimal string
3
  chainName: string;
4
  nativeCurrency: {
5
    name: string;
6
    symbol: string; // 2-6 characters long
7
    decimals: 18;
8
  };
9
  rpcUrls: string[];
10
  blockExplorerUrls?: string[];
11
  iconUrls?: string[]; // Currently ignored.
12
}

尝试调用 ethereum 方法 wallet_switchEthereumChain 切换至用户已添加过的链

wallet_switchEthereumChain 方法入参为指定链ID: [{ chainId: '0x38' }]

1
ethereum.request({
2
    method: 'wallet_switchEthereumChain',
3
    params: [{ chainId: '0x38' }],
4
});

如果请求成功，该方法返回null，否则返回错误。
如果报错则监测报错信息，报错代码为 4902 则表示未添加过目标链至 MetaMask ，调用 wallet_addEthereumChain 新增目标链

1
ethereum.request({
2
   method: 'wallet_addEthereumChain',
3
   params: supportedChains,
4
});

完整示例：

1
const supportedChains = [
2
  {
3
    chainId: '0x38',
4
    chainName: 'Binance Smart Chain',
5
    nativeCurrency: {
6
      name: 'BNB',
7
      symbol: 'BNB',
8
      decimals: 18,
9
    },
10
    rpcUrls: ['https://bsc-dataseed1.ninicoin.io'],
11
    blockExplorerUrls: ['https://bscscan.com/'],
12
  }
13
]
14

15
try {
16
  await ethereum.request({
17
    method: 'wallet_switchEthereumChain',
18
    params: [{ chainId: '0x38' }],
19
  });
20
} catch (switchError) {
21
  // This error code indicates that the chain has not been added to MetaMask.
22
  if (switchError.code === 4902) {
23
    try {
24
      await ethereum.request({
25
        method: 'wallet_addEthereumChain',
26
        params: supportedChains,
27
      });
28
    } catch (addError) {
29
      // handle "add" error
30
    }
31
  }
32
  // handle other "switch" errors
33
}