本文主要围绕如何构建最佳实践，未必是最佳但是必须知道，因为主流项目都这样做，不熟悉就看不懂别人代码，看不懂大部分人的代码，又怎么好意思说在圈子里面混呢。

@web3-react/core

这个是必须了解的，是连接以太生态项目的大部分用法

step 1

import { Web3ReactProvider } from '@web3-react/core';

<Web3ReactProvider getLibrary={(provider: any) => new Web3(provider)}>
    <---this is your code--->
</Web3ReactProvider>

设置Provider，这是必须的哈。也就是在要用的范围内设置provider。一般是在routers上层设置，这样保证所有页面都可以用到。

至于什么是provider，和如何使用，可以看文档，或者看我上一个文章react-Provider使用教程

然后没了，hhh，直接用即可。如下

step 2 使用

const { account: address, chainId } = useWeb3React();

这样你就拿到了account和chainId。account就是账户，chainId就是当前的网络情况，比如主网（1），或者rinkeby(4), 或者bsc网（56）.

不过，你可能拿不到。

因为，还没连接钱包。

下面我们会说到这个。至于更多使用，等下再说哈。

step 3 连接钱包

const { activate } = useWeb3React();
activate(Metamask(), (error) => {
 // your code
}).then((res) => {
 // your code
});

这是连接Metamask的，那么上面函数实现下吧。

我们可以这样

export const supportedChainIds = [
  NetworkChain.Mainnet, // 1
];

const Metamask = () => new InjectedConnector({
      supportedChainIds,
})

上面又涉及一个函数，这个从@web3-react/injected-connector里面引入即可。

到了这样，连接就基本完成了。

不过，如果要支持更多钱包，怎么办，这里有一个协议叫walletConnect协议，记住，它是协议，只要支持这个协议的app都可以用。 @web3-react/walletconnect-connector

import { WalletConnectConnector } from '@web3-react/walletconnect-connector';
new WalletConnectConnector({
      rpc: {
        [this is your chainID ]: 'your rpc ', 
      },
      bridge: 'https://bridge.walletconnect.org', //. 可换桥地址，这个服务可以自己部署的
      qrcode: true,
    });

上面代码用法和metaMask一样。

这样触发walletconnect就会弹出一个二维码，用户扫码就可以登陆。

step 4 DisConnect

有了登陆就有退出登陆，如下即可。

const { deactivate } = useWeb3React();
deactivate();

stpe 5 高级操作 -- 调用合约

好了，我们基本都会了，我们就可以调用合约了。

至于调用合约这部分，我们需要对数据编码等操作，我们可以用abi结合库来帮我们处理。

至于什么是abi，自行搜索哈。 另外操作库，我们用web3.js，当然你也可以用其他的。

另外 还记得 step 1 的时候，getLibrary的时候用Web3包一层么，都是同一个库。

我们可以先获取一个contract实例。

const contract = new web3.eth.Contract(abi, address)

然后就可以调用合约啦。

contract 如我们可以用它来获取代币

contract.methods.balanceOf(account).call()

这个就是典型的读合约，使用call()

读

读就是不用付钱，只获取信息，不能修改信息的操作。上面的balanceOf就是方法名，和合约的方法对应，要调用哪个就用哪个方法，然后把参数传进去就可以。

写

写的话，把call,改成send即可。

erc721Contract.methods
.approve(address, tokenId)
.send({ from: account });

但是还有一个情况，就是发送金额的时候，send里面需要再加一个value方法，这个是转账金额。

对于结果的处理

.on('transactionHash', (hash: string) => {
    setLoading(true);
    // 签名成功，拿到hash
})
.on('receipt', async (receipt: any) => {
    // success
})
.on('error', (error: any) => {
    // error
})

记得，拿到hash只能说明拿到hash，不能说明是成功了，或者发起可，她是未发起请求的本地计算结果。

官方文档

@web3-react/core

web3.js中文教程