使用 Web3-React 更快地开发 dApp 前端

本文目录

什么是 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

让我们安装 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 感兴趣,记得关注我~

头条: 程序猿最幽默

一起沉淀、一起成长、一起拥抱未来。

举报/反馈