玩转web3第一篇——web3-react
概况
web3-react是由Noah Zinsmeister开发的一个web3框架,主要功能是实时获取DApp里的关键数据(如用户当前连接的地址、网络、余额等)。
Noah也是著名的去中心化交易所uniswap里的工程师,因此这个库在uniswap里也已被大量的使用。
web3-react有两个版本,V6和V8,先把这两个版本的仓库地址都贴一下:
V6:https://github.com/Uniswap/web3-react/tree/v6
V8:https://github.com/Uniswap/web3-react/tree/main
搜了下网上的大部分教程都是针对V6的,V8的很少,官方文档内容也不多。所以这篇文章是基于最新的V8版本的实践教程。
安装
第一步自然需要一个react项目,用create-react-app生成就好了。然后安装@web3-react所需要的依赖。
"@walletconnect/web3-provider": "^1.7.1",
"@web3-react/coinbase-wallet": "^8.0.33-beta.0",
"@web3-react/core": "8.0.35-beta.0",
"@web3-react/gnosis-safe": "^8.0.5-beta.0",
"@web3-react/metamask": "8.0.29-beta.0",
"@web3-react/network": "^8.0.26-beta.0",
"@web3-react/types": "^8.0.19-beta.0",
"@web3-react/walletconnect": "^8.0.34-beta.0",
使用
以连接metamask为例,先创建一个连接器(connector),并将这个连接器对象导出。
import { initializeConnector } from '@web3-react/core'
import { MetaMask } from '@web3-react/metamask' export const [metaMask, hooks] = initializeConnector<MetaMask>((actions) => new MetaMask({ actions }))
上面这个connector暴露了两个属性,hooks和metaMask,通过hooks就可以获取到当前账户的关键信息,比如
获取当前网络的chainId
const chainId = useChainId()
获取当前连接的账户地址
const accounts = useAccounts()
获取当前账户的连接状态
const isActive = useIsActive()
可以将上述值传给一个容器组件
const { useChainId, useAccounts, useIsActivating, useIsActive, useProvider, useENSNames } = hooks export default function MetaMaskCard() {
const chainId = useChainId()
const accounts = useAccounts()
const isActivating = useIsActivating() const isActive = useIsActive() const provider = useProvider()
const ENSNames = useENSNames(provider) const [error, setError] = useState(undefined) // attempt to connect eagerly on mount
useEffect(() => {
void metaMask.connectEagerly().catch(() => {
console.debug('Failed to connect eagerly to metamask')
})
}, []) return (
<Card
connector={metaMask}
chainId={chainId}
isActivating={isActivating}
isActive={isActive}
error={error}
setError={setError}
accounts={accounts}
provider={provider}
ENSNames={ENSNames}
/>
)
}
容器组件Card:
export function Card({
connector,
chainId,
isActivating,
isActive,
error,
setError,
ENSNames,
accounts,
provider,
}: Props) {
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
width: '500px',
padding: '20px',
margin: '20px',
overflow: 'auto',
border: '1px solid',
borderRadius: '10px',
}}
>
{/* <b>{getName(connector)}</b> */}
<div style={{ marginBottom: '1rem' }}>
<Status isActivating={isActivating} isActive={isActive} error={error} />
</div>
<Chain chainId={chainId} />
<div style={{ marginBottom: '1rem' }}>
<Accounts accounts={accounts} provider={provider} ENSNames={ENSNames} />
</div>
<ConnectWithSelect
connector={connector}
chainId={chainId}
isActivating={isActivating}
isActive={isActive}
error={error}
setError={setError}
/>
</div>
)
}
最终出来的效果,样式可能不太美观,关注功能点就好~
默认未登录:
点击登录,登录后的状态:
默认是在主网,还能切换到别的网络
可以看到,切换网络后,余额也实时发生了变化。
和web3Modal对比
有些小伙伴可能有疑惑,要连接钱包的话,用web3Modal就可以实现了,样式还更美观,为什么要多此一举用web3-react呢?
这是因为:
1. web3modal没有提供能直接获取地址,余额和状态的hooks,需要自己去调用api才能获取。
2. 要切换网络的话,用web3modal还得自己去写switch函数,用起来不够方便。
从v6升级
虽然web3-react的内部在v6和v8之间发生了相当大的变化,但升级时改变也不太多。迁移到新的连接器和状态管理模式后,就能够使用@web3-react/core中定义的hooks,特别是useWeb3React
。
v8的最大好处是钩子现在是per-connector,而不是全局钩子,因此不再需要在连接器/多个根之间进行混合了。
玩转web3第一篇——web3-react的更多相关文章
- 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳
学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 ...
- 15天玩转redis —— 第一篇 开始入手
双十一终于还是过去了,我负责的mongodb由于做了副本集,最终还是挺过去了,同事负责的redis,还是遗憾的在早上8点左右宕机了,然后大家就是马不停 蹄的赶往公司解决问题,因为我对redis也不是很 ...
- AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX
AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX 一.什么是JSX 使用JSX声明一个变量(REACT当中的元素): const element =< ...
- 从零构建以太坊(Ethereum)智能合约到项目实战——第22章 玩转truffle framework 、Web3.js 框架
P84 .1-玩转truffle framework.Web3.js 框架 内容介绍 truffle官方网站:https://truffleframework.com/ P85 .2-truffle ...
- Three.js 第一篇:绘制一个静态的3D球体
第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...
- 我的第一篇Markdown语法博客
这是我的第一篇使用markdown语法编写的博客 使用的编辑器为Sublime Text2 并且使用了sublog插件, sublog是一个开源项目 sublog 并且参考了作者的博客 AmongOt ...
- 第一篇:SOUI是什么?
概述 用C++做产品最痛苦的是什么?肯定是做UI. SOUI的使命就是把痛苦的UI变化成快乐的UI. 什么?UI还能快乐?脑子进水了吗? 当你看完这个系统教程的时候相信你面对UI至少不会再痛苦.你可以 ...
- 简单的抓取淘宝关键字信息、图片的Python爬虫|Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇)
Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇) 淘宝改字段,Bugfix,查看https://github.com/hunterhug/taobaoscrapy.git 由于Gith ...
- 从.Net到Java学习第一篇——开篇
以前我常说,公司用什么技术我就学什么.可是对于java,我曾经一度以为“学java是不可能的,这辈子不可能学java的.”结果,一遇到公司转java,我就不得不跑路了,于是乎,回头一看N家公司交过社保 ...
- 解剖SQLSERVER 第一篇 数据库恢复软件商的黑幕(有删减版)
解剖SQLSERVER 第一篇 数据库恢复软件商的黑幕(有删减版) 这一系列,我们一起来解剖SQLSERVER 在系列的第一篇文章里本人可能会得罪某些人,但是作为一位SQLSERVER MVP,在我 ...
随机推荐
- 快读《ASP.NET Core技术内幕与项目实战》EFCore2.5:集合查询原理揭秘(IQueryable和IEnumerable)
本节内容,涉及4.6(P116-P130).主要NuGet包:如前述章节 一.LINQ和EFCore的集合查询扩展方法的区别 1.LINQ和EFCore中的集合查询扩展方法,虽然命名和使用完全一样,都 ...
- AI音乐创作,让每一个人都成为音乐家
从录音带.MP3到专业的耳机.音箱,随着音乐消费方式的不断升级,音乐创作的专业"门槛"也在AI技术的加持下逐渐大众化,创作者的创新设计.创作频率也在持续增强,能降低创作门槛且智能化 ...
- c#显示和隐藏另外一个进程
1 /// <summary> 2 /// 0-关闭窗口 1-正常大小显示 2最小化窗口 3-最大化窗口 3 /// </summary> 4 /// <param na ...
- jquery实现复选框的全选与取消全选功能
HTML代码 首先创建一个表格: <table class="table table-bordered table-hover"> <tr> <th& ...
- SketchUp2020免费中文完整版官网2021教程模型库下载
SketchUp2022 WIN10 64位安装步骤: 1.先使用"百度网盘客户端"下载SU22_CN_x64安装包到电脑磁盘里,并鼠标右击进行解压缩,然后找到SketchUpPr ...
- 轻松玩转sed
sed处理文本方法 1.文本或管道输入 2.读入一行到模式控件 3.sed命令处理 4.输出到屏幕 所以 sed是一个流处理编辑器 sed一次处理一行内容 sed不改变文件内容(可以通过重定向改变文件 ...
- python-面向过程与函数式
面向过程与函数式 面向过程 "面向过程"核心是"过程"二字,"过程"指的是解决问题的步骤,即先干什么再干什么......,基于面向过程开发程 ...
- HCIE Routing&Switching之MPLS LDP理论
前文我们了解了MPLS的静态LSP配置相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16937104.html:今天我们来聊一聊标签分发协议LDP相关 ...
- 【Java EE】Day10 JavaScript高级、DOM、BOM、事件
一.简单入门 1.DOM 功能:获取html文档内容 代码:document.getElementById("id值") 功能: 设置属性值 修改标签体内容:xx.innerHtm ...
- python中文词云生成
一.词云 "词云"就是对网络文本中出现频率较高的"关键词"予以视觉上的突出,形成"关键词云层"或"关键词渲染",从而过滤 ...