玩转web3第一篇——web3-react

技术分享 3年前 (2023-01-31) 0 999+

关注

概况

web3-react是由Noah Zinsmeister开发的一个web3框架，主要功能是实时获取DApp里的关键数据（如用户当前连接的地址、网络、余额等）。

Noah也是著名的去中心化交易所uniswap里的工程师，因此这个库在uniswap里也已被大量的使用。

web3-react有两个版本，V6和V8，先把这两个版本的仓库地址都贴一下：

V6：https://github.com/Uniswap/web3-react/tree/v6

V8：https://github.com/Uniswap/web3-react/tree/main

搜了下网上的大部分教程都是针对V6的，V8的很少，官方文档内容也不多。所以这篇文章是基于最新的V8版本的实践教程。

安装

第一步自然需要一个react项目，用create-react-app生成就好了。然后安装@web3-react所需要的依赖。

    "@walletconnect/web3-provider": "^1.7.1",     "@web3-react/coinbase-wallet": "^8.0.33-beta.0",     "@web3-react/core": "8.0.35-beta.0",     "@web3-react/gnosis-safe": "^8.0.5-beta.0",     "@web3-react/metamask": "8.0.29-beta.0",     "@web3-react/network": "^8.0.26-beta.0",     "@web3-react/types": "^8.0.19-beta.0",     "@web3-react/walletconnect": "^8.0.34-beta.0",

使用

以连接metamask为例，先创建一个连接器（connector），并将这个连接器对象导出。

import { initializeConnector } from '@web3-react/core' import { MetaMask } from '@web3-react/metamask'  export const [metaMask, hooks] = initializeConnector<MetaMask>((actions) => new MetaMask({ actions }))

上面这个connector暴露了两个属性，hooks和metaMask，通过hooks就可以获取到当前账户的关键信息，比如

获取当前网络的chainId

const chainId = useChainId()

获取当前连接的账户地址

const accounts = useAccounts()

获取当前账户的连接状态

const isActive = useIsActive()

可以将上述值传给一个容器组件

const { useChainId, useAccounts, useIsActivating, useIsActive, useProvider, useENSNames } = hooks  export default function MetaMaskCard() {   const chainId = useChainId()   const accounts = useAccounts()   const isActivating = useIsActivating()    const isActive = useIsActive()    const provider = useProvider()   const ENSNames = useENSNames(provider)    const [error, setError] = useState(undefined)    // attempt to connect eagerly on mount   useEffect(() => {     void metaMask.connectEagerly().catch(() => {       console.debug('Failed to connect eagerly to metamask')     })   }, [])    return (     <Card       connector={metaMask}       chainId={chainId}       isActivating={isActivating}       isActive={isActive}       error={error}       setError={setError}       accounts={accounts}       provider={provider}       ENSNames={ENSNames}     />   ) }

容器组件Card：

export function Card({   connector,   chainId,   isActivating,   isActive,   error,   setError,   ENSNames,   accounts,   provider, }: Props) {   return (     <div       style={{         display: 'flex',         flexDirection: 'column',         justifyContent: 'space-between',         width: '500px',         padding: '20px',         margin: '20px',         overflow: 'auto',         border: '1px solid',         borderRadius: '10px',       }}     >       {/* <b>{getName(connector)}</b> */}       <div style={{ marginBottom: '1rem' }}>         <Status isActivating={isActivating} isActive={isActive} error={error} />       </div>       <Chain chainId={chainId} />       <div style={{ marginBottom: '1rem' }}>         <Accounts accounts={accounts} provider={provider} ENSNames={ENSNames} />       </div>       <ConnectWithSelect         connector={connector}         chainId={chainId}         isActivating={isActivating}         isActive={isActive}         error={error}         setError={setError}       />     </div>   ) }