本文目录
什么是 Web3 反应？
为什么使用 Web3-react 可能是一个更好的主意？
安装 web3-react
连接钱包第 1 步：设置 Web3ReactProvider第 2 步：设置挂钩
合同中的读写读数写作
什么是 Web3-React？
Web3-react 是一个基于 React 的框架，有助于简化 dApp 的前端开发。
Web3-react 还充当状态机，用于维护与您的 dApp 相关的数据，并将其注入组件树中任何需要的位置。Web3-React 支持多种钱包，从 Metamask 和 Coinbase 等浏览器钱包到 Trezor 和 Ledger 等硬件钱包。
在 Web3 中，我们使用 Web3-Modal 在 dApp 中进行钱包连接。Web3-模态非常适合初学者，但随着我们扩展项目，处理 Web3-模态变得更加困难。
因此，web3-react 可能是一个更好的选择，因为：
更适合构建现代 dApp
拥有更好的开发人员体验
减少代码冗余
并且是一个直观的框架，可以使用
为什么使用 Web3-react 可能是一个更好的选择？
Web3-React 在许多方面提供了灵活性。如前所述，它对许多钱包都有很好的支持。
但即使钱包不包含在 web3-react 包中，您也可以创建自定义连接器并连接 web3-react 列出的钱包以外的钱包！
Web3-react 在引擎盖下使用以太币.js或 Web3.js从而提供流畅的体验，因为仅使用以太币连接钱包.js可能是一个非常痛苦的过程。
注意：在继续之前，请确保您了解 ContextAPI，换句话说，使用上下文钩子。这是 Web3-React 的关键功能。
安装 web3-react
在本文中，我们假设您已经设置了 ReactJS/NextJS 应用程序。
在您的应用目录中，运行以下命令以安装 web-react：
npm install @web-react/core
yarn add @web3-react/core
现在，为了连接基于浏览器的钱包，我们需要安装以下 web3-react 包：
npm install @web3-react/injected-connector
yarn add @web3-react/injected-connector
和。您拥有将dApp连接到浏览器钱包所需的所有成分！让我们开始编写代码来连接钱包！
连接钱包
本部分假定你已创建应用并安装了以前的依赖项。现在它已经解决了，让我们直接进入这个！
第 1 步：设置Web3ReactProvider
让我们跳到文件夹下的（下一步）文件！_app.jspages
import ../styles/globals.cssimport { Web3ReactProvider } from @web3-react/coreimport { providers, Web3Provider } from ethersfunction getLibrary(provider, connector) { return new providers.Web3Provider(provider)}function MyApp({ Component, pageProps }) { return( <Web3ReactProvider getLibrary={getLibrary}> <Component {...pageProps} /> </Web3ReactProvider> )}export default MyApp
function getLibrary(provider, connector) { return new providers.Web3Provider(provider)}
Web3ReactProvider 是上下文提供程序，它将所有数据传递到组件树中。
function MyApp({ Component, pageProps }) {return ( <Web3ReactProvider getLibrary={getLibrary}> <Component {...pageProps} /> </Web3ReactProvider> )}
第 2 步：设置挂钩
现在让我们跳到您的文件夹中。index.jspages
import Head from next/headimport Image from next/imageimport styles from ../styles/Home.module.cssimport { InjectedConnector } from @web3-react/injected-connectorimport { useWeb3React } from @web3-react/coreimport { useState } from reactimport { CONTRACT_ADDRESS, CONTRACT_ABI } from ../constantsexport default function Home() { const [ result, setResult ] = useState("") // web3-react hook, helps in fetching // the data passed by Web3ReactProvider const { active, activate, deactivate, account, library, connector, error } = useWeb3React() // injected provider identifier const injected = new InjectedConnector( { supportedChainIds:[80001] } ) const connectWallet = async () => { try { await activate(injected) } catch (err) { console.error(err) } } const disconnectWallet = async () => { try { deactivate(injected) } catch (err) { console.error(err) } }return ( <div className={styles.container}> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> <button onClick={connectWallet}>Connect Wallet</button> {active? <span>Connected with <b>{account}</b></span>: <span>Not Connected</span>} <button onClick={disconnectWallet}>Disconnect Wallet</button> </div> )}
好的，现在让我们看看 useWeb3React hook
const { active, activate, deactivate, account, library, connector, error } = useWeb3React()
useWeb3React是来自 Web-React 库的自定义钩子，它返回了许多有用的功能。
此钩子返回：
connector; // connector object returns some useful connection // methods like activate() and deactivate() library; // library is the provider object that we // passed with the Web3ReactProvider chainId; // returns the chainId for the account that // is connected to the dApp account; // the account address of the connected account active; // active is a state variable which returns boolean values // that determines whether the wallet connection is // active or inactive error; // returns any error happening with the wallet connection
const injected = new InjectedConnector({ supportedChainIds:[80001]})// we can list multiple networks by listing their// chainIds, separated by comma
注入连接器是一个类，它接受支持的 chainIds 的输入并返回一组与浏览器钱包交互的方法。
如果钱包未连接到正确的网络，它将返回错误。可以从挂钩返回的对象访问此错误。UnsupportedChainIderroruseWeb3React
至于 和 ，它们是连接或断开注入的提供程序（浏览器钱包）的方法。activate(injected)deactivate(injected)
合同中的读写
现在我们已经连接了我们的钱包，剩下的就是读取和写入区块链的方式！
我们将使用 web3-react （provider） 对象从区块链读取/写入library
因此，我们将使用在LearnWeb3DAO的新生轨道中构建的Mood dApp合约。单击此处获取智能合约。
在我们深入研究之前，请确保您已在文件夹（在根目录中）中创建了一个，并且它应该具有以下代码 -index.jsconstants
// put your contract address in place of this gibberishexport const CONTRACT_ADDRESS = "0xabcabcabcabcabcabc";// put your abi in this variable, it will be of the form [{},{}]export const CONTRACT_ABI = [...]
读数
const getMood = async () => { const provider = library; const contract = new Contract( CONRTACT_ADDRESS, CONTRACT_ABI, provider ); const tx = await contract.getMood(); tx.wait(); setResult(tx); }
我们将变量设置为 .请记住，是从钩子返回的，它是一个提供程序对象。很方便，不是吗？providerlibrarylibraryuseWeb3React
然后，我们创建一个新的合约实例，这使我们能够与合约进行交互。
现在是时候创建交易了！我们在这里从合约调用 getMood（） 函数。
tx.wait()等待事务完成。
setResult(tx)将状态变量的值设置为 的值。resulttx
写作
const setMood = async ( mood ) => { const signer = await library.getSigner() const contract = new Contract( CONRTACT_ADDRESS, CONTRACT_ABI, signer ) const tx = await contract.setMood(mood) tx.wait() alert("Mood set!") }
library是一个提供程序对象，但我们需要一个签名者，对吧？好吧，提供程序对象具有一个名为的方法，该方法返回附加到此提供程序的签名者对象！getSigner()
这是一个合约实例，但在这里，我们传递的不是提供者，而是签名者，因为为了编写事务，我们需要签名者来签署事务。contract
最后，我们现在向合约函数传递了一个参数，因为来自合约的函数需要一个参数来设置情绪。
您已经使用 web3-react制作了一个 dApp 前端！它也可以在区块链上读取和写入！
结论
Web3-react 是一个非常方便的框架，用于在 React/NextJS 中构建 dApp 前端。
这是一个非常易于使用的工具，但对于初学者来说可能会令人困惑。要使用此工具，您可能需要一些上下文 API 知识。
Web3 是未来世界一大变数，我想帮助更多人了解并加入 Web3，如果你对 Web3 感兴趣，记得关注我~
