[token官网下载网址]自学Vue开发Dapp去中心化钱包（四）

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,}; }; 总结

参与web3开发让我感触颇多，磕磕绊绊，从小白总算是跨出了第一步，算是入了Vue和web3的坑了。本人是那种属于要做就做好的人，看不惯随便做做交代任务完事的研发，所以看到不合适的代码总想换掉，就会去查资料查百度，去找一些合理的写法。对与web3钱包前端门户的开发目前总结到此，待学习后续。

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.  

 具体代码

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

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.    

2.Wallet  类管理着一个公私钥对用于在以太坊网络上密码签名交易以及所有权证明。

用法示例 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.监听账户变化，即时更新页面信息；

//写在了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=http://www.leheavengame.com/article/63afd816c3e6900eda500953/{`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=http://www.leheavengame.com/article/63afd816c3e6900eda500953/{`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());