区块链Dapp前端开发常用技能点整理

import {
  JsonRpcProvider,
  Web3Provider,
  BaseProvider,
} from "@ethersproject/providers";

// metamask提供的，可以直接使用detectEthereumProvider
import detectEthereumProvider from "@metamask/detect-provider";
const currentProvider = await detectEthereumProvider();
...
let currentProvider: JsonRpcProvider | BaseProvider;
// getDefaultProvider() 这是默认推荐的连接以太坊网络的方法
if (ChainInfo.mainnet.network) {
  currentProvider = ethers.getDefaultProvider(ChainInfo.mainnet.network);
} else {
// JsonRpcProvider() 这是通过节点 urlorInfo 的 JSON-RPC API URL 进行连接
  currentProvider = new ethers.providers.JsonRpcProvider(
    ChainInfo.mainnet.rpc
  );
}

 // xxx
const provider: Web3Provider = new ethers.providers.Web3Provider(window.ethereum);
const signer: Signer = provider.getSigner();
return signer;
// xxx

// 只读
contract = new ethers.Contract(contractAddress,contractAbi,provider)
// 读写
contract = new ethers.Contract(contractAddress,contractAbi,signer)

xxx
// 先连接一波合约
 const contract = new ethers.Contract(
      ChainInfo.mainnet.contractAddress,
      TomCatABI.abi,
      signer
    );
// 一个查询剩余数量的合约方法
const availableCount = await contract.numberMinted(account);
// 一个调用合约上交易的方法
const tx = await contract.buy(amount, { value: ethers.utils.parseEther(currentPrice) })
xxx

const handleOnEvent = () => {
    try {
      contract.on("Transfer", () => {
        toDoSomething();
      });
    } catch (error) {
      console.log(error);
    }
  };

xxx
    {
      "anonymous": false,
      "inputs": [
        {
          "indexed": true,
          "internalType": "address",
          "name": "from",
          "type": "address"
        },
        {
          "indexed": true,
          "internalType": "address",
          "name": "to",
          "type": "address"
        },
        {
          "indexed": true,
          "internalType": "uint256",
          "name": "tokenId",
          "type": "uint256"
        }
      ],
      "name": "Transfer",
      "type": "event"
    },
xxx

// 获取当前的区块链地址
const accounts = await window.ethereum.request({ method: "eth_requestAccounts", });
// 获取当前的链Id
const chainId = await window.ethereum.request({  method: "eth_chainId", });
// 切链
await window.ethereum.request({
        method: "wallet_switchEthereumChain",
        params: [{ chainId: "0x1" }],
      });
// 签名，这里签名需要传一个msg，是一个字符串，在签名的弹窗里面会展示
await window.ethereum.request({
        method: "personal_sign",
        params: [msg, account],
      })
// 添加一个链
await window.ethereum.request({
        method: "wallet_addEthereumChain",
        params: [AddChainList[chainId]],
      });

目前开发时主要用到的应该就这几个

4001：User Rejected Request -The user rejected the request.
用户拒绝了请求
4100：Unauthorized-The requested method and/or account has not been authorized by the user.
请求的方法或账户未获得用户授权
4200：Unsupported Method-The Provider does not support the requested method.
提供的程序不支持请求的方法
4900：Disconnected-The Provider is disconnected from all chains.
提供程序已端口与所有链的连接
4901：Chain Disconnected-The Provider is not connected to the requested chain.
提供程序未连接到请求的链

// 判断 MetaMask 的环境
export function isMetaMask() {
  return Boolean(window.ethereum && window.ethereum.isMetaMask);
}
// 判断 TokenPocket 环境
export function isTokenPocket() {
  return Boolean(window.ethereum && window.ethereum.isTokenPocket);
}

export function formatEther(wei: BigNumberish): string {
    return formatUnits(wei, 18);
}
export function parseEther(ether: string): BigNumber {
    return parseUnits(ether, 18);
}

 const computedPrice = () => {
    let currentAmount = 1;
    if (amount) currentAmount = amount;
    if (unitPrice) {
      const price = new Decimal(unitPrice);
      const current = price.mul(currentAmount);
      setCurrentPrice(`${current}`);
    }
  };