@kirby-web3/ethereum-react 是一款 npm 包，用于开发基于以太坊的 React 应用程序。该包提供了许多以太坊相关的功能，例如 web3 对象、以太坊账户管理以及智能合约交互等等。在本教程中，我们将会探讨如何使用该包，并为您提供一些实用的示例代码。
安装
使用 npm 进行安装：
npm install @kirby-web3/ethereum-react
如果你使用了 Yarn，请使用以下命令：
yarn add @kirby-web3/ethereum-react
使用
@kirby-web3/ethereum-react 提供了三个 React 的上下文：
- EthereumContext：该上下文用于存储 web3 对象实例，并通过 Provider 提供给下游组件。
- AccountContext：该上下文用于存储以太坊账户地址，并通过 Provider 提供给下游组件。
- ContractContext：该上下文用于存储已部署的智能合约实例对象，并通过 Provider 提供给下游组件。
使用 Provider 包装您的组件，即可在该组件中使用对应的上下文：
-- -------------------- ---- ------- ------ - --------------- - ---- ----------------------------- -------- --------------- - ----- ---- - ---------------------------- -- ---- ---- ------- ------ --------- --------- ------------ - ------ ------- -------- ----- - ------ - ------------------ -------------- -- ------------------- -- -展开代码
获取 web3 对象
通过使用 @kirby-web3/web3-provider 包，您可以轻松地获取 web3 对象实例。首先进行安装：
npm install @kirby-web3/web3-provider
然后在应用程序中，使用 Web3Provider 包装您的组件即可获得 web3 对象：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------------------- ------ - ---------------- - ---- ----------------------------- -------- --------------- - ----- ---- - ---------------------------- -- ---- ---- ------- ------ --------- --------- ------------ - ------ ------- -------- ----- - ------ - -------------- ------------------ -------------- -- ------------------- --------------- -- -展开代码
获取以太坊地址
@kirby-web3/ethereum-react 通过使用 web3 对象获取以太坊账户地址。您可以使用 AccountContext 上下文来存储以太坊地址，并将它作为 Provider 提供给下游组件：
-- -------------------- ---- ------- ------ - ----------------- ---------------- ---------- - ---- ----------------------------- -------- --------------- - ----- --------- - ------------- -- ---- ---- ------- ------ --------- --------- ------------ - ------ ------- -------- ----- - ------ - ------------------ ----------------- -------------- -- ------------------ ------------------- -- -展开代码
与智能合约交互
@kirby-web3/ethereum-react 提供了很多有用的钩子，用于在 React 中与以太坊智能合约进行交互。在本节中，我们将深入探讨如何使用 useContract 钩子来与已部署的智能合约进行交互。
首先，我们需要安装 @truffle/contract 包：
npm install @truffle/contract
然后，编写您的智能合约，并使用 truffle 编译它：
-- -------------------- ---- ------- ------ -------- -------- ------- -------- ---------- - ------ ------ -------- ------------- - ------- - ------ -------- - -------- ------------ ------ ---- ------- ------- ------- - ------ -------- - -展开代码
使用 @truffle/contract 可以轻松地构建智能合约实例：
-- -------------------- ---- ------- ------ ---- ---- ------- ------ -------- ---- -------------------- ----- ---- - --- ------------------------------ ----- ---------- - ------------------------------------------------------------- --------------------------------------------- ----- ----------- - ----- -- -- - ----- -------- - ----- ----------------- -------------------------------------------------- ------ --------- --展开代码
getInstance 函数将部署智能合约并返回实例对象。现在我们可以使用该合约与 @kirby-web3/ethereum-react 进行交互：
-- -------------------- ---- ------- ------ - ----------------- ---------------- ----------------- ----------- - ---- ----------------------------- -------- --------------- - ----- ---------- ------------ - -------------- ------------ -- - ----- ----------------- - ----- -- -- - -- ---- --- ----------- --------- ----- -------- - ----- -------------- -- --------- --- ----- - ---------------------- - -- -------------------- -- ------------ -- ----------- - ------ ---------------------- - ----- ------- - ----- ------------------------------------- ------ --------------------- - ------ ------- -------- ----- - ------ - ------------------ ----------------- ------------------ -------------- -- ------------------- ------------------ ------------------- -- -展开代码
在本例中，我们定义了一个 YourComponent 组件，该组件将使用 useEffect 钩子来连接我们的合约并将其返回的实例对象存储在 ContractContext 上下文中。 useEffect 钩子会自动调用 connectToContract 函数，即获取合约实例的函数。函数 await contract.methods.getMessage().call() 将从我们的智能合约中获取消息，这里我们获取的是 Hello World!。
结论
本文中，我们学习了如何使用 @kirby-web3/ethereum-react 包来构建基于以太坊的 React 应用程序。我们使用Three React 上下文（EthereumContext、AccountContext、ContractContext）展示了如何获取 web3 实例、账户和与智能合约进行交互。在本文的最后，我们很高兴展示了如何使用示例代码构建智能合约并进行交互。希望这份教程能够帮助你在使用 @kirby-web3/ethereum-react 进行开发时更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/kirby-web3-ethereum-react
