本文目录
什么是Web3反应？
为什么使用Web3-act可能是一个更好的主意？
安装web3-act
连接钱包第1步：设置Web3ReactProvider第2步：设置挂钩
合同中的读写读数写作
什么是Web3-React？
Web3-act是一个基于React的框架，有助于简化dApp的前端开发。
Web3-act还充当状态机，用于维护与您的dApp相关的数据，并将其注入组件树中任何需要的位置。Web3-React支持多种钱包，从Metamask和Coinbase等浏览器钱包到Tzor和Ledger等硬件钱包。
在Web3中，我们使用Web3-Modal在dApp中进行钱包连接。Web3-模态非常适合初学者，但随着我们扩展项目，处理Web3-模态变得更加困难。
因此，web3-act可能是一个更好的选择，因为：
更适合构建现代dApp
拥有更好的开发人员体验
减少代码冗余
并且是一个直观的框架，可以使用
为什么使用Web3-act可能是一个更好的选择？
Web3-React在许多方面提供了灵活性。如前所述，它对许多钱包都有很好的支持。
但即使钱包不包含在web3-act包中，您也可以创建自定义连接器并连接web3-act列出的钱包以外的钱包！
Web3-act在引擎盖下使用以太币.js或Web3.js从而提供流畅的体验，因为仅使用以太币连接钱包.js可能是一个非常痛苦的过程。
注意：在继续之前，请确保您了解ContextAPI，换句话说，使用上下文钩子。这是Web3-React的关键功能。
安装web3-act
让我们安装web3-act！
在本文中，我们假设您已经设置了ReactJS/NextJS应用程序。
在您的应用目录中，运行以下命令以安装web-act：
npminstall
web-act/co或者
yarnadd
web3-act/co现在，为了连接基于浏览器的钱包，我们需要安装以下web3-act包：
npminstall
web3-act/injected-connector或者
yarnadd
web3-act/injected-connector和。您拥有将dApp连接到浏览器钱包所需的所有成分！让我们开始编写代码来连接钱包！
连接钱包
本部分假定你已创建应用并安装了以前的依赖项。现在它已经解决了，让我们直接进入这个！
第1步：设置Web3ReactProvider
让我们跳到文件夹下的（下一步）文件！_app.jspages
编辑代码，使其如下所示：
import../styles/globals.cssimport{Web3ReactProvider}from
web3-act/coimport{providers,Web3Provider}fromethersfunctiongetLibrary(provider,connector){turnnewproviders.Web3Provider(provider)}functionMyApp({Component,pageProps}){turn(Web3ReactProvidergetLibrary={getLibrary}Component{...pageProps}//Web3ReactProvider)}exportdefaultMyApp完成？现在让我们了解代码！
此函数返回提供程序对象。
functiongetLibrary(provider,connector){turnnewproviders.Web3Provider(provider)}
Web3ReactProvider是上下文提供程序，它将所有数据传递到组件树中。
functionMyApp({Component,pageProps}){turn(Web3ReactProvidergetLibrary={getLibrary}Component{...pageProps}//Web3ReactProvider)}
第2步：设置挂钩
现在让我们跳到您的文件夹中。index.jspages
importHeadfromnext/headimportImagefromnext/imageimportstylesfrom../styles/Home.module.cssimport{InjectedConnector}from
web3-act/injected-connectorimport{useWeb3React}fromweb3-act/coimport{useState}fromactimport{CONTRACT_ADDRESS,CONTRACT_ABI}from../constantsexportdefaultfunctionHome(){const[sult,setResult]=useState("")//web3-acthook,helpsinfetching//thedatapassedbyWeb3ReactProviderconst{active,activate,deactivate,account,library,connector,error}=useWeb3React()//injectedprovideridentifierconstinjected=newInjectedConnector({supportedChainIds:[]})constconnectWallet=async()={try{awaitactivate(injected)}catch(err){console.error(err)}}constdisconnectWallet=async()={try{deactivate(injected)}catch(err){console.error(err)}}turn(divclassName={styles.container}HeadtitleCateNextApp/titlemetaname="description"content="Generatedbycatenextapp"/linkl="icon"hf="/favicon.ico"//HeadbuttononClick={connectWallet}ConnectWallet/button{active?spanConnectedwithb{account}/b/span:spanNotConnected/span}buttononClick={disconnectWallet}DisconnectWallet/button/div)}好的，现在让我们看看useWeb3Reacthook
const{active,activate,deactivate,account,library,connector,error}=useWeb3React()
useWeb3React是来自Web-React库的自定义钩子，它返回了许多有用的功能。
此钩子返回：
connector;//connectorobjectturnssomeusefulconnection//methodslikeactivate()anddeactivate()library;//libraryistheproviderobjectthatwe//passedwiththeWeb3ReactProviderchainId;//turnsthechainIdfortheaccountthat//isconnectedtothedAppaccount;//theaccountaddssoftheconnectedaccountactive;//activeisastatevariablewhichturnsbooleanvalues//thatdetermineswhetherthewalletconnectionis//activeorinactiveerror;//turnsanyerrorhappeningwiththewalletconnection
现在让我们看看注入的变量
constinjected=newInjectedConnector({supportedChainIds:[]})//wecanlistmultiplenetworksbylistingtheir//chainIds,separatedby