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 版权协议,转载请附上原文出处链接和本声明