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

1158 words

6 minutes

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

2022-09-15

web3

区块链

/

metamask

/

ethers

智能合约#

智能合约与平时的代码其实没有什么区别，只是运行于一个以太坊这样的分布式平台上。这个运行的平台，赋予了这些代码不可变，确定性，分布式和可自校验状态等特点。代码运行过程中状态的存储，是不可变的。

在以太坊中，每个合约都有一个唯一的地址来标识它自己（由创建者的哈希地址和曾经发送过的交易的数量推算出来）。客户端可以与这个地址进行交互，可以发送ether，调用函数，查询当前的状态等。

智能合约，本质上就是代码，以及代码运行后存储到区块链上的状态两个元素组成。比如，你用来收发ETH的钱包，本质上就是一个智能合约，只是外面套了一个界面。

Gas#

因为执行计算要花钱，而要执行的运算量与代码直接相关。所以，每个在网络运行的底层操作都需要一定量的gas。gas只是一个名字，它代表的是执行所需要花费的成本（译者注：由于以太坊是图灵完备的，随便一个死循环就将导致网络不可用，所以引入了gas的概念）。

整个分布式网络引入了强制限制，来避免停机问题。因此如果你写一个死循环，当gas耗尽后，网络就会拒绝执行接下来的操作，并且回滚你之前的所有操作。

gas的价格由市场决定，类似于比特币的交易费机制。如果你的gas价格高，节点则将优先因为利益问题打包你的交易。

一般来说，在以太坊网上读取状态是免费的，只有写入状态是收费的。下面这个文章是gas概念的一些深度解析。

GWEI & gasPrice & gasLimit#

gasPrice 是给矿工的费用，GWEI 越高即 gasPrice越高，打包速度越快。而 gasLimit 用于限制本次交易 gas 费用上限，防止无限制烧 gas。

合约交互可入参overrides.gasPrice 修改，示例如下：

1
// 使用 ethers 设置 GWEI:
2
const baseGasPrice = await provider.getGasPrice(); // 基础gasPrice { BigNumber: "23610503242" }
3
const limit = await contract.estimateGas.takeChance(num); // 预估 gaslimt
4
const options = {
5
  gasPrice: baseGasPrice,
6
  gasLimit: (Number(limit) * 1.5).toFixed(0)
7
}
8

9
const res = await this.contract.takeChance(num, options);// 最后一项override
10
const reward = await res.wait();

getGasPrice: 返回交易中使用的 gasPrice 的最佳猜测。

estimateGas: 返回执行带有 args 和 overrides 的 METHOD_NAME 所需的估计 gas 单位。

PS：主链币价格的设置方式#

overrides.value 主链币(比如BNB)，价格的传参方式不能通过参数传入，而要放在最后一项对象的value属性中

1
// 使用 ethers 设置 主链币价格：
2
const options = {
3
    value: 0 // 主链币的数量 bignumber
4
}
5

6
const resp = await contractObj.swap(cloneAmountOut, cloneAmountInMax, options); // 最后一项位对象

MetaMask#

Metamask 是一个Google浏览器扩展，把Chrome变成了一个 DApp 浏览器。它的核心特性是注入以太坊提供的 js 客户端库web3，到每一个界面，来让 DApp 连接到 MetaMask 提供的以太坊节点服务。不过这个 Chrome 扩展，可以允许你管理你的钱包，以及连接到不同的以太坊网络。

常见的 MetaMask 交互

是否安装metamsk#

1
export function isMetaMask() {
2
 const { ethereum } = window;
3
 return Boolean(ethereum && ethereum.isMetaMask);
4
}

获取chainid#

1
async function getChainId() {
2
 const { ethereum } = window;
3
 try {
4
   const chainId = await ethereum.request({
5
     method: "eth_chainId"
6
   });
7
   handleNewChain(chainId);
8
 } catch (err) {
9
   console.error(err);
10
 }
11
}

主动切换到以太坊网络#

1
async function switchToEthereum() {
2
 try {
3
   await window.ethereum.request({
4
     method: "wallet_switchEthereumChain",
5
     params: [
6
       {
7
         chainId: "0x1"
8
       }
9
     ]
10
   });
11
 } catch (error) {
12
   console.log(error);
13
 }
14
}

主动切换到其余链配置#

1
async function switchToOtherNetwork(findChain) {
2
 const data = [];
3
 data.push(findChain);
4
 console.log(findChain, "switchNetwork");
5
 try {
6
   await window.ethereum.request({
7
     method: "wallet_addEthereumChain",
8
     params: data
9
   });
10
 } catch (error) {
11
   console.log(error);
12
 }
13
}

监听链上钱包配置#

1
function handelConnectInfo(info) {
2
 console.log(info, "handelConnectInfo");
3
}
4

5
function handleDisConnect(disconnect) {
6
 console.log(disconnect, "handleDisConnect");
7
}
8

9
function handleNewAccount(account) {
10
 updateAccount(account[0]);
11
}
12

13
function handelNewMessage(msg) {
14
 console.log(msg, "handelNewMessage");
15
}
16

17
function _listeningMetamsk() {
18
 const { ethereum } = window;
19

20
 ethereum.on("chainChanged", handleNewChain);
21

22
 ethereum.on("accountsChanged", handleNewAccount);
23

24
 ethereum.on("message", handelNewMessage);
25

26
 ethereum.on("connect", throttle(handelConnectInfo, 1000));
27

28
 ethereum.on("disconnect", throttle(handleDisConnect, 1000));
29
}

添加自定义代币到metamask#

1
async function addToken() {
2
     let contractAddress = getContractAddress();
3
     window.ethereum
4
       .request({
5
         method: "wallet_watchAsset",
6
         params: {
7
           type: "ERC20",
8
           options: {
9
             address: contractAddress.IPISTR,
10
             symbol: "IPISTR",
11
             decimals: 18,
12
             image: "https://i.loli.net/2021/08/12/BNYGAD9RZUl6nch.png"
13
           }
14
         }
15
       })
16
       .then(success => {
17
         if (success) {
18
           Message.success("IPISTR Token added successfully!");
19
         } else {
20
           Message.error("Something went wrong.");
21
         }
22
       })
23
       .catch(console.error);
24
   }

综合实例-连接钱包#

1
export async function getMetamskConnect() {
2
  if (!isMetaMask()) {
3
    openUrl("https://metamask.io/", "install metamsk");
4
  }
5
  if (window.ethereum) {
6
    window.provider = window.ethereum;
7
    try {
8
      let accounts = await window.ethereum.request({
9
        method: "eth_requestAccounts"
10
      });
11
      await updateAccount(accounts[0]);
12
    } catch (error) {
13
      console.warn("Please authorize to access tour account");
14
    }
15
  }
16
  await getChainId();
17
  _listeningMetamsk();
18
}