web3-react（metamask）基本用法
背景：web3真会玩，除了web3js，etherjs外，又搞出来一个web3-react，看不懂原来是知识盲区。
什么是 Web3-react？
Web3-react 是一个易于使用、简单、可扩展的 web3 框架，用于在以太坊区块链网络上构建 dApp。
简而言之，web3-react 是一个状态机，它存储与你的 dApp 相关的某些基本数据位是最新的。
默认情况下，它支持注入的提供者，如Meta Mask、Gnosis Safe、Frame和WalletConnect。
您可以轻松地将其配置为使用其他钱包，例如Portis、Squarelink和 Arkane。
开发参考文档：https://github.com/Uniswap/web3-react/blob/v6/example/pages/index.tsx 解决了metamask如何退出。
metamask官方文档：https://docs.metamask.io/wallet/tutorials/react-dapp-local-state/#5-manage-more-metamask-state 解决监听账户/链切换
在一定意义上来说，web3-react 是一种状态机，可确保与您的 dApp 相关的某些关键数据（例如用户的当前帐户）保持最新。 为此，web3-react 使用 Context 来有效地存储这些数据，并将其注入到应用程序中任何需要的地方。
web3-react/core，负责管理此上下文的包的代码
连接器
Authereum
Fortmatic
Frame
Injected，重要
Ledger
Magic
Network，重要
Portis，重要
Squarelink
Torus
Trezor
WalletConnect
WalletLink
唤起metamask只需要一个activate方法
const { activate } = useWeb3React();
const option = SUPPORTED_WALLETS["METAMASK"];
onClick={() => {
activate(option.connector);
onClose();
}}
export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = {
INJECTED: {
connector: injected,
name: "Injected",
iconURL: INJECTED_ICON_URL,
description: "Injected web3 provider.",
href: null,
color: "#010101",
},
METAMASK: {
connector: injected,
name: "MetaMask",
iconURL: METAMASK_ICON_URL,
description: "Easy-to-use browser extension.",
href: null,
color: "#E8831D",
},
};
// 里面的injected
// InjectedConnector是web3-react的方法
const injected = new InjectedConnector({
supportedChainIds: ALL_SUPPORTED_CHAIN_IDS,
});
// ALL_SUPPORTED_CHAIN_IDS怎么来的
export enum SupportedChainId {
MAINNET = 1,
ROPSTEN = 3,
RINKEBY = 4,
GOERLI = 5,
KOVAN = 42,
BSC = 56,
OKC = 66,
OKCTest = 65,
POLYGON = 137,
// LOCAL = 31337,
LOCAL = 67,
ARBITRUM_ONE = 42161,
ARBITRUM_RINKEBY = 421611,
OPTIMISM = 10,
OPTIMISTIC_KOVAN = 69,
}
export const ALL_SUPPORTED_CHAIN_IDS: SupportedChainId[] = [
SupportedChainId.MAINNET,
SupportedChainId.ROPSTEN,
SupportedChainId.RINKEBY,
SupportedChainId.GOERLI,
SupportedChainId.KOVAN,
SupportedChainId.ARBITRUM_ONE,
SupportedChainId.ARBITRUM_RINKEBY,
SupportedChainId.OPTIMISM,
SupportedChainId.OPTIMISTIC_KOVAN,
SupportedChainId.BSC,
SupportedChainId.OKC,
SupportedChainId.OKCTest,
SupportedChainId.LOCAL,
SupportedChainId.POLYGON,
];
原始语法其实更容易看懂
components/wallet/connectors
import { InjectedConnector } from '@web3-react/injected-connector'
export const injected = new InjectedConnector({
supportedChainIds: [1, 3, 4, 5, 42],
})
index.js，以下是代码
import { useWeb3React } from "@web3-react/core"
import { injected } from "../components/wallet/Connectors"
export default function Home() {
const { active, account: address, library, connector, activate, deactivate, chainId } = useWeb3React()
async function connect() {
try {
await activate(injected)
} catch (ex) {
console.log(ex)
}
}
async function disconnect() {
try {
deactivate()
} catch (ex) {
console.log(ex)
}
}
return (
<div className="flex flex-col items-center justify-center">
<button onClick={connect} className="py-2 mt-20 mb-4 text-lg font-bold text-white rounded-lg w-56 bg-blue-600 hover:bg-blue-800">Connect to MetaMask</button>
{active ? <span>Connected with <b>{account}</b></span> : <span>Not connected</span>}
<button onClick={disconnect} className="py-2 mt-20 mb-4 text-lg font-bold text-white rounded-lg w-56 bg-blue-600 hover:bg-blue-800">Disconnect</button>
</div>
)
}
1，导入injected 连接器，参考上一段代码
2，使用useWeb3React钩子来获得所有需要的值。
const { active, account, library, connector, activate, deactivate } = useWeb3React()
想使用钩子的前提是先注入。
import { Web3ReactProvider } from '@web3-react/core' import Web3 from 'web3'
function getLibrary(provider) { return new Web3(provider) }
<Web3ReactProvider getLibrary={getLibrary}>
<Component {...pageProps} />
</Web3ReactProvider>
// 自己代码中的示例
import { createWeb3ReactRoot, Web3ReactProvider } from "@web3-react/core";
import { getLibrary } from "./utils/getLibrary";
import { NetworkContextName } from "./constants/misc";
import { ChakraProvider } from "@chakra-ui/react";
const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);
root.render(
<Provider store={store}>
<ChakraProvider>
<Web3ReactProvider getLibrary={getLibrary}>
<Web3ProviderNetwork getLibrary={getLibrary}>
<App />
</Web3ProviderNetwork>
</Web3ReactProvider>
</ChakraProvider>
</Provider>
);
// 获取provider，最终靠的是new Web3Provider()，来自@ethersproject/providers
import { Web3Provider } from "@ethersproject/providers";
// 函数中的provider参数，等着metamask注入？？？
export function getLibrary(provider: any): Web3Provider {
const library = new Web3Provider(
provider,
typeof provider.chainId === "number"
? provider.chainId
: typeof provider.chainId === "string"
? parseInt(provider.chainId)
: "any"
);
library.pollingInterval = 15_000;
return library;
}
这行非常重要，学习如下：
1，Web3ReactProvider
查遍资料，也没发现什么有价值的东西。
原来@web3-react/injected-connector是与metamask的组合。
假设您已在项目中安装Web3-react，您现在应该安装允许您连接到 Meta Mask 的依赖项。 yarn add @web3-react/injected-connector
将 Injected-Connector 导入您的connectors.js文件
import { InjectedConnector } from '@web3-react/injected-connector'
export const injected = new InjectedConnector({
supportedChainIds: [1, 3, 4, 5, 42],
})
与Wallet Connect 连接是：yarn add @web3-react/walletconnect-connector
与Portis，可以使用portis-connector连接器连接。yarn add @web3react/portis-connector
不早说，我也不知道啊。搞了半天，终于弄明白了。
2，createWeb3ReactRoot
在某些情况下，您的 dApp 可能希望同时保持 >1 个活动的 web3 连接。 这可能有多种原因，包括：
- 希望“永远在线”访问远程节点，同时允许用户根据需要使用自己的账户
- 与侧链和主网的协同通信
- 使用其他连接方式在浏览器中平衡燃烧器钱包
在这种情况下，您可能想要创建第二个（甚至可能是第三个，但可能不是第四个）根，其功能与另一个 Web3ReactProvider 完全一样（实际上，Web3ReactProvider 在幕后使用 createWeb3ReactRoot）。 它需要一个关键参数来标识使用 Web3React（或 getWeb3ReactContext）的根。
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core'
// import your favorite web3 convenience library here
function getLibrary(provider) {
return new Web3Provider(provider) // this will vary according to whether you use e.g. ethers or web3.js
}
// 原来如此
const Web3ReactProviderReloaded = createWeb3ReactRoot('anotherOne')
// 跟上面一样
function App () {
return (
<Web3ReactProvider getLibrary={getLibrary}>
<Web3ReactProviderReloaded getLibrary={getLibrary}>
{/* <...> */}
</Web3ReactProviderReloaded>
</Web3ReactProvider>
)
}
参考文档：
