Wagmi:以太坊的 React Hooks

Wagmi:以太坊的 React Hooks

React Hooks for Ethereum

瓦格米 是一个集合 反应钩子 包含开始使用以太坊所需的一切。 wagmi 很容易 “连接钱包” 显示 ENS 和平衡信息、签署消息、与合约交互等等——所有这些都具有缓存、请求重复数据删除和持久性。

安装

您可以使用这些代码安装 wagmi.sh。

 npm i wagmi 醚

或者

 纱线添加wagmi醚

快速开始

您可以从导入 wagmi.sh 开始。

 从“wagmi”导入 { WagmiConfig,createClient }  
 从“ethers”导入 { getDefaultProvider }  
  
 常量客户端 = createClient({  
 自动连接:真,  
 提供者:getDefaultProvider(),  
 })  
  
 函数应用程序(){  
 返回 (  
 <WagmiConfig client={client}>  
 <Profile />  
 </WagmiConfig>  
 )  
 }

然后你可以用这些钩子方法连接钱包。还有更多关于网站和文档的例子。

 从“wagmi”导入 { useAccount、useConnect、useDisconnect }  
 从 'wagmi/connectors/injected' 导入 { InjectedConnector }  
  
 功能简介(){  
 const { 地址,isConnected } = useAccount()  
 常量 { 连接 } = useConnect({  
 连接器:新的 InjectedConnector(),  
 })  
 常量 { 断开连接 } = useDisconnect()  
  
 如果(已连接)  
 返回 (  
 <div>  
 已连接到 {address}  
 <button onClick={() =>断开()}>断开</button>  
 </div>  
 )  
 return <button onClick={() =>connect()}>连接钱包</button>  
 }

在这个例子中,我们创建了一个 wagmi **客户** **** 并将其传递给 **WagmiConfig** **** 反应上下文。客户端设置为使用 ethers 默认提供程序并自动连接到以前连接的钱包。

接下来,我们使用 **使用连接** **** 将注入的钱包(例如 MetaMask)连接到应用程序的钩子。最后,我们显示连接帐户的地址 **使用帐户** **** 并允许他们与 **使用断开连接** .

特征

瓦格米 开箱即用地支持所有这些功能:

  • 20 多个用于处理钱包、ENS、合同、交易、签名等的钩子。
  • MetaMask、WalletConnect、Coinbase Wallet 和 Injected 的内置钱包连接器
  • 缓存、请求重复数据删除、多路调用、批处理和持久性
  • 自动刷新钱包、区块和网络变化的数据
  • 准备好打字稿
  • 针对分叉的以太坊网络运行的测试套件

……还有更多。

概括

Wagmi 很容易用于反应。它还解决了很多问题,使开发人员的一切变得更容易。你可以阅读 文档化 .你也可以检查更多 例子 .

下篇文章见。不要忘记关注我并点击这篇文章。你也可以关注我 领英 .

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/3082/19373109

posted @ 2022-08-31 09:21  哈哈哈来了啊啊啊  阅读(1111)  评论(0编辑  收藏  举报