在MetaMask中为用户导入代币

用户打开MetaMask后会看到包括代币在内的许多资产。默认情况下，MetaMask会自动检测到一些主要的、流行的代币，并自动地将这些代币展示在界面上。但对于绝大多数代币，用户仍需要自己将它们添加到MetaMask中。

虽然可以通过UI，如一个按钮来完成添加代币的工作，但这背后的过程可能会很麻烦，而且还可能涉及到用户与合约地址的交互，这又非常容易出错。

你可以通过使用wallet_watchAssetAPI来添加代币到MetaMask，使用这个API可以极大地提升添加代币过程的安全性和用户体验。

关键代码如下：

const wasAdded = await window.ethereum.request({
  method: 'wallet_watchAsset',
  params: {
    type: 'ERC20', // 目前仅支持ERC20, 后续可能支持更多类型的资产
    options: {
      address: 代币地址,
      symbol: 代币代号, // 最多5个字符
      decimals: 代币精度,
      image: 代币图片,
    },
  },
});

完整示例代码如下：

const addToken = async () => {
  const tokenAddress = '0xd00981105e61274c8a5cd5a88fe7e037d935b513';
  const tokenSymbol = 'TUT';
  const tokenDecimals = 18;
  const tokenImage = 'http://placekitten.com/200/300';

  try {
    // wasAdded方法会返回一个boolean值，
    // 并且和其它RPC方法一样，该方法可能会抛出错误，例如用户点击取消按钮时
    const wasAdded = await window.ethereum.request({
      method: 'wallet_watchAsset',
      params: {
        type: 'ERC20',
        options: {
          address: tokenAddress,
          symbol: tokenSymbol,
          decimals: tokenDecimals,
          image: tokenImage,
        },
      },
    });

    if (wasAdded) {
      console.log('Token added Successfully!');
    } else {
      console.log('Failed to add the token');
    }
  } catch (error) {
    console.log(error);
  }
};

function TestAddToken() {
  return (
    <div>
      <button onClick={addToken}>Add token</button>
    </div>
  );
}

export default TestAddToken;

执行后MetaMmask会弹出如下窗口：

点击”添加代币“后，该代币就添加到MetaMask了。