自学Vue开发Dapp去中心化钱包（四）

Provider	A Provider (in ethers) is a class which provides an abstraction for a connection to the Ethereum Network. It provides read-only access to the Blockchain and its status.
Signer	A Signer is a class which (usually) in some way directly or indirectly has access to a private key, which can sign messages and transactions to authorize the network to charge your account ether to perform operations.
Contract	A Contract is an abstraction which represents a connection to a specific contract on the Ethereum Network, so that applications can use it like a normal JavaScript object.

二、ethers.js使用

1.Provider

Provider主要提供读属性，取得provider后可以查询账户信息及太坊状态。

方法示例

1.连接以太坊：MetaMask
//window.ethereum是一个以太坊对象，MetaMask会向网页注入一个全局的API变量window.ethereum
//登录连接到MetaMask后可以获取provider
const provider = new ethers.providers.Web3Provider(window.ethereum)

2.获取signer
const signer = provider.getSigner();
//调取MetaMask小狐狸钱包签名
let msg = address+amount...;//约定好签名规则即可
const signature = await signer.signMessage(msg);

3.获取账户余额

provider.getBalance(address).then((balance) => {

    // 余额是 BigNumber (in wei); 格式化为 ether 字符串
    let etherString = ethers.utils.formatEther(balance);

    console.log("Balance: " + etherString);
});

或者
const balance = await provider.getBalance(address);
// 余额是 BigNumber (in wei); 格式化为 ether 字符串，使用工具包格式化成字符串
let balanceStr = ethers.utils.formatUnits(balance, 18);

4.获取交易数

let address = "0x02F024e0882B310c6734703AB9066EdD3a10C6e0";
provider.getTransactionCount(address).then((transactionCount) => {
    console.log("发送交易总数: " + transactionCount);
});

5.获取当前状态

//当前的区块号
provider.getBlockNumber().then((blockNumber) => {
    console.log("Current block number: " + blockNumber);
});

//当前的gas费
provider.getGasPrice().then((gasPrice) => {
    // gasPrice is a BigNumber; convert it to a decimal string
    gasPriceString = gasPrice.toString();

    console.log("Current gas price: " + gasPriceString);
});

监听


1.监听事件，监听小狐狸钱包余额变化
let address = '';
this.provider.on(address, (bal) => {});

2.监听区块
 provider.on("block", (blockNumber) => {
    // Emitted on every block change
    console.log("blockNumber: " + blockNumber);
 })

2.Wallet

Wallet实现了Signer，所以交易时使用Wallet就行。

本人目前没有使用到wallet对象，目前使用的是后端开发的合约方式。

方法示例

1.创建钱包-随机钱包

//Wallet . createRandom ( [ options ] )   =>   Wallet
//创建一个随机钱包实例。 确保钱包（私钥）存放在安全的位置，如果丢失了就没有办法找回钱包。
let randomWallet = ethers.Wallet.createRandom();

2.创建钱包-加载JSON钱包文件

let data = {
    id: "fb1280c0-d646-4e40-9550-7026b1be504a",
    address: "88a5c2d9919e46f883eb62f7b8dd9d0cc45bc290",
    Crypto: {
        kdfparams: {
            dklen: 32,
            p: 1,
            salt: "bbfa53547e3e3bfcc9786a2cbef8504a5031d82734ecef02153e29daeed658fd",
            r: 8,
            n: 262144
        },
        kdf: "scrypt",
        ciphertext: "10adcc8bcaf49474c6710460e0dc974331f71ee4c7baa7314b4a23d25fd6c406",
        mac: "1cf53b5ae8d75f8c037b453e7c3c61b010225d916768a6b145adf5cf9cb3a703",
        cipher: "aes-128-ctr",
        cipherparams: {
            iv: "1dcdf13e49cea706994ed38804f6d171"
         }
    },
    "version" : 3
};

let json = JSON.stringify(data);
let password = "foo";

ethers.Wallet.fromEncryptedJson(json, password).then(function(wallet) {
    console.log("Address: " + wallet.address);
    // "Address: 0x88a5C2d9919e46F883EB62F7b8Dd9d0CC45bc290"
});

3.创建钱包-加载助记词


let mnemonic = "radar blur cabbage chef fix engine embark joy scheme fiction master release";
let mnemonicWallet = ethers.Wallet.fromMnemonic(mnemonic);

// Load the second account from a mnemonic
let path = "m/44'/60'/1'/0/0";
let secondMnemonicWallet = ethers.Wallet.fromMnemonic(mnemonic, path);

// Load using a non-english locale wordlist (the path "null" will use the default)
let secondMnemonicWallet = ethers.Wallet.fromMnemonic(mnemonic, null, ethers.wordlists.ko);

4.从已有实例创建新的Wallet实例

//privateKey是小狐狸钱包账户的私钥，可以在钱包处看到
let privateKey = "0x0123456789012345678901234567890123456789012345678901234567890123";
let wallet = new ethers.Wallet(privateKey);

// Connect a wallet to mainnet
let provider = ethers.getDefaultProvider();
let walletWithProvider = new ethers.Wallet(privateKey, provider);

5.余额和交易数
let balancePromise = wallet.getBalance();

balancePromise.then((balance) => {
    console.log(balance);
});

let transactionCountPromise = wallet.getTransactionCount();

transactionCountPromise.then((transactionCount) => {
    console.log(transactionCount);
});

3.Contracts

合约Contract对象是一个元类，它是一个在运行时定义类的类。可以提供合约定义（称为应用程序二进制接口或ABI）以及可用的方法和事件可以动态添加到对象中。

创建和部署合约这块我前端没涉及，以后明白了再补偿。

我这里使用到连接已有合约并执行转账等操作。

用法示例

1.连接已有合约
// The Contract interface
let abi = [
    "event ValueChanged(address indexed author, string oldValue, string newValue)",
    "constructor(string value)",
    "function getValue() view returns (string value)",
    "function setValue(string value)"
];
//const abi= require("../config/constants/contract-abi.json");//将abi单独存放到json文件中
// Connect to the network，查看provider获取连接provider对象
let provider = new ethers.providers.Web3Provider(window.ethereum)

// 地址来自上面部署的合约
let contractAddress = "0x2bD9aAa2953F988153c8629926D22A6a5F69b14E";

// 使用Provider 连接合约，将只有对合约的可读权限
let daiContract = new ethers.Contract(contractAddress, abi, provider);

2.合约代币转账

//合约使用signer签名，查询provider的用法
let signer = provider.getSigner();
const daiWithSigner = daiContract.connect(signer);
const dai = ethers.utils.parseUnits(amount.toString(), 18);
//执行转账动作，这里的transfer是部署的合约abi定义的转账方法
daiWithSigner.transfer(to, dai).then((resp) => {})
.catch((err) => {});

3.代币余额查询
const balance = await daiContract.balanceOf(address);
let balanceStr = ethers.utils.formatUnits(balance, 18);

合约abi

//contract-abi.json

[
  {
    "inputs": [
      {
        "internalType": "address",
        "name": "to",
        "type": "address"
      },
      {
        "internalType": "uint256",
        "name": "amount",
        "type": "uint256"
      }
    ],
    "name": "transfer",
    "outputs": [
      {
        "internalType": "bool",
        "name": "",
        "type": "bool"
      }
    ],
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "inputs": [
      {
        "internalType": "address",
        "name": "account",
        "type": "address"
      }
    ],
    "name": "balanceOf",
    "outputs": [
      {
        "internalType": "uint256",
        "name": "",
        "type": "uint256"
      }
    ],
    "stateMutability": "view",
    "type": "function"
  },
  {
  "anonymous": false,
  "inputs": [
      {
        "indexed": false,
        "internalType": "address",
        "name": "from",
        "type": "address"
      },
      {
        "indexed": false,
        "internalType": "uint256",
        "name": "fromBalance",
        "type": "uint256"
      },
      {
        "indexed": false,
        "internalType": "address",
        "name": "to",
        "type": "address"
      },
      {
        "indexed": false,
        "internalType": "uint256",
        "name": "toBalance",
        "type": "uint256"
      },
      {
        "indexed": false,
        "internalType": "uint256",
        "name": "amount",
        "type": "uint256"
      }
    ],
    "name": "TransferNew",
    "type": "event"
  }
]

监听

daiContract.on("TransferNew", (from, fromBalance,to,toBalance, amount, event) => {
    // let balanceStr = ethers.utils.formatUnits(fromBalance, 18);
    // console.log("fromBalance:::"+fromBalance);
    // this.$store.dispatch('SET_BALANCE', balanceStr);
  });

4.utils

部分示例

import * as ethers from 'ethers';

1.BigNumber类型转成可读的字符串
let balanceStr = ethers.utils.formatUnits(balance, 18);

2.字符串转成BigNumber
let amount = 1000;
let amountBig = ethers.utils.parseUnits(amount.toString(), 18);

3.校验是否为以太坊账户地址
//返回true或者false
let isAddress = ethers.utils.isAddress(address);

4.随机数
let randomNumber = utils.bigNumberify(utils.randomBytes(32));
// BigNumber { _hex: 0x617542634156966e0bbb6c673bf88015f542c96eb115186fd93881518f05f7ff }

三、从0到1

需求功能点

1.连接MetaMask小狐狸钱包；

2.监听账户变化，即时更新页面信息；

2.链上转账（代币合约转账），唤起小狐狸钱包签名对转账消息签名；

3.代币余额查询，账户切换时即时刷新；

开发功能

1.连接MetaMask

//我们前面provider提到，MetaMask在安装后会发布一个全局的对象window.ethereum
//参照小狐狸钱包的官方API：https://docs.metamask.io/guide/getting-started.html#basic-considerations

//通过eth_requestAccounts获取连接的账户，未连接时弹出小狐狸钱包的连接页面
const addressArray = await web3Provider.request({
        method: "eth_requestAccounts",
});

//通过eth_accounts获取当前连接的账户
const addressArray = await web3Provider.request({
        method: "eth_accounts",
      });

具体代码

//写在了store的action里
//连接小狐狸钱包
export const connectWallet= async ({ commit }) => {
  let web3Provider;
  if (window.ethereum) {
    web3Provider = window.ethereum;
    try {

      //通过
      const addressArray = await web3Provider.request({
        method: "eth_requestAccounts",
      });

      let address = addressArray[0];
      const obj = {
        status: "👆🏽 Write a message in the text-field above.",
        address: address,
      };
      setProvider({commit},address);
      addWalletListener({commit});
      return obj;
    } catch (err) {
      return {
        address: "",
        status: "😥 " + err.message,
      };
    }
  } else {
    return {
      address: "",
      status: (
        <span>
          <p>
            {" "}
            🦊{" "}
            <a target="_blank" href={`https://metamask.io/download.html`}>
              You must install Metamask, a virtual Ethereum wallet, in your
              browser.
            </a>
          </p>
        </span>
      ),
    };
  }
};

//获得当前连接的账户
export const getCurrentWalletConnected= async ({ commit }) => {
  let web3Provider;
  if (window.ethereum) {
    web3Provider = window.ethereum;
    try {
      const addressArray = await web3Provider.request({
        method: "eth_accounts",
      });
      if (addressArray.length > 0) {
        let address = addressArray[0];
        setProvider({commit},address);
        addWalletListener({commit});

        return {
          address: addressArray[0],
          status: "👆🏽 Write a message in the text-field above.",
        };
      } else {
        return {
          address: "",
          status: "🦊 Connect to Metamask using the top right button.",
        };
      }
    } catch (err) {
      return {
        address: "",
        status: "😥 " + err.message,
      };
    }
  } else {
    return {
      address: "",
      status: (
        <span>
          <p>
            {" "}
            🦊{" "}
            <a target="_blank" href={`https://metamask.io/download.html`}>
              You must install Metamask, a virtual Ethereum wallet, in your
              browser.
            </a>
          </p>
        </span>
      ),
    };
  }
};

2.监听账户变化

//使用方法web3Provider.on('accountsChanged', accounts => {})
export const addWalletListener = ({commit}) => {
  let web3Provider;
  if (window.ethereum) {
    web3Provider = window.ethereum;
    web3Provider.on('accountsChanged', accounts => {
      SET_ACCOUNT({commit},accounts[0]);
      //断开链接后，初始化一些值
      if(accounts.length===0){
        //使用store的commit改变数据状态
        SET_PROVIDER({commit},{});
        SET_CONTRACTS({commit},{});
        SET_IS_CONNECT_WALLET({commit},false);
        SET_SIGNER({commit},{});
        SET_BALANCE({commit},'0.0');
      }
    })
  }
};

3.provider和合约对象

//获得provider,contract,signer对象，改变store的数据状态，全局使用
export const setProvider = ({commit},address) => {
  let web3Provider;
  if (window.ethereum) {
    web3Provider = window.ethereum;

    const provider = new ethers.providers.Web3Provider(web3Provider);
    const signer = provider.getSigner();
    const contractABI = require("../config/constants/contract-abi.json");
    const wethAddress = getWethAddress();
    const daiContract = new ethers.Contract(wethAddress, contractABI, provider);

    //commit('saveAccountStore', address);//另外一种方式
    SET_ACCOUNT({commit},address);
    SET_PROVIDER({commit},provider);
    SET_CONTRACTS({commit},daiContract);
    SET_IS_CONNECT_WALLET({commit},true);
    SET_SIGNER({commit},signer);
  }
};

4.唤起MetaMask签名

1.获取signer，并对数据消息签名
//调取MetaMask小狐狸钱包签名
let signer = this.$store.getters.signer;
let address = this.$store.getters.account;
let msg = address+amount...;//约定好签名规则即可
const signature = await signer.signMessage(msg.toLowerCase());

5.链上转账、余额查询

1.转账
export const sendTransfer = async (store,amount,to) => {

  let isConnectWallet = store.getters.isConnectWallet;
  if(isConnectWallet){
    let daiContract = store.getters.contracts;
    let signer = store.getters.signer;
    const daiWithSigner = daiContract.connect(signer);
    const dai = ethers.utils.parseUnits(amount.toString(), 18);

    //方式一，传参传一个promise  一个方法
    // daiWithSigner.transfer(to, dai).then((resp) => {}).catch((error) => {
    //   errHandler(error);
    // });

    //方式二，直接返回这个promise
    return daiWithSigner.transfer(to, dai);
  }
};

2.余额查询

export const getBalance = async (store) => {
  let balanceStr = '0.0';
  let isConnectWallet = store.getters.isConnectWallet;
  if(isConnectWallet){
    let address = store.getters.account;
    let daiContract = store.getters.contracts;
    if(daiContract.balanceOf!==undefined){
      const balance = await daiContract.balanceOf(address);
      let balanceStr = ethers.utils.formatUnits(balance, 18);
      store.dispatch('SET_BALANCE', balanceStr);
    }

  }
  return {balance: balanceStr,};
};