web3项目自动连接小狐狸以及小狐狸中的各种“地址”详解

刚做web3的时候,比较迷糊的就是人们口中说的各种地址,小狐狸钱包地址,私钥地址,跳转地址,接口地址,交易地址,等等XX地址,常常感觉跟做链的同事们说话不在一个频道。

这一小节,我们说一下唤起小狐狸以及小狐狸中的一些地址

目录

1 唤起小狐狸

1.1 检测是否已安装小狐狸:

1.2 获取钱包地址

1.3 钱包地址长什么样 

2  获取私钥地址

2.1 点击顶部账户

2.2  点击账户详情

2.3 查看私钥地址

3 链地址

3.1 链id地址 

3.2 链的接口地址

3.3 区块链浏览器的跳转URL地址

4 结尾


1 唤起小狐狸

做web3的时候,时常涉及到交易,交易也就是跟web3的rpc接口交互的一种说法,同时涉及到往链上节点写入数据的时候,就需要掏钱,也就是付gas费,所以大家说成是交易

那么就要唤起小狐狸,唤起,也就是我们代码操作,再需要的时候,小狐狸那个弹窗能够自动弹出来,这其实很好理解。也就是链接小狐狸这个钱包呗。

1.1 检测是否已安装小狐狸:
if (typeof window.ethereum !== 'undefined' && window.ethereum.isMetaMask) {// 已安装} else {// 请安装小狐狸钱包}

当安装好小狐狸以后,就可以走入代码中的if判断了。一旦检测到已安装小狐狸,那么最首先需要的就是获取小狐狸的地址,小狐狸的地址,也就是所谓的钱包独有的那一个地址,就像是银行卡号。

1.2 获取钱包地址
if (typeof window.ethereum !== 'undefined' && window.ethereum.isMetaMask) {// 定义初始化钱包地址变量const myaccount = '';const request = window.ethereum.request;let nowAccount = await window.ethereum.request({method: 'eth_requestAccounts', // 固定获取钱包地址写法});if (nowAccount && nowAccount.length > 0) {myaccount = nowAccount[0];}return new Promise((resolve) => {resolve(myaccount);});
} else {// 请安装小狐狸钱包
}

 

因为用户的小狐狸内可能有多个钱包地址,就像你在银行,可以多申请几张银行卡一样,所以如果正常的话,会获取到nowAccount是个数组。其实如果你做需求的时候,还应该判断如果这个nowAccount变量长度为0的话,也给用户一定的提示,比如“请新建账号”。

1.3 钱包地址长什么样 

钱包地址是一个42位长度的字符串,以0x开始,是不是和我们所说的16进制那玩意挺像的。当我们在上面代码中获取myaccount的时候,会得到一个钱包地址,注意,这里的钱包地址,要有个概念,因为地址太多啦。

其实我们在小狐狸的弹窗界面,也可以看到他的钱包地址,并且带有自动复制的功能,如下图:

 

2  获取私钥地址

很稀罕,代码中是无法获取到私钥地址的,私钥地址就像是你的银行卡密码一样,是不能获取的,但我们可以在界面中拿到。步骤如下:

2.1 点击顶部账户

点击顶部账户,顶部也会有你新建那个账户的提示,如下图:

2.2  点击账户详情

这时候会弹出一个“选择一个账户”的弹窗界面,这个时候找到你当前的那个账户,右边有三个点,点击后会弹出账户详情的界面,点击“账户详情”,如下图

2.3 查看私钥地址

这个时候会弹出一个有二维码的界面,同时显示着你的钱包地址,点击“显示私钥”按钮,就可以继续操作,查看私钥地址了。记住,这里又是一个地址了,是私钥地址。

3 链地址

跟做链的同事交互的时候,你就又多了一个概念。测试问,你的界面点不动了,你就跟他说后端的问题。结果测试找到后端了,说赶紧的,网站坏了。

后端同事又赶紧排查,发现,不是后端坏了,链坏了。然后测试跑回来跟前端纠正,你说的不对,不是后端,是链。这时候有前端就会想,我管你这个那个呢,我跟你们交互,你们都是后端。但慢慢的,的确是,这两拨人分的还挺清楚。

3.1 链id地址 

可能是因为区块链这个世界上跑着太多的链服务,然后每个应用,或者说每家公司就对应生成或者定义一个属于自己的链id。前端同学在开发的时候,就要提前判断,我们每一步交易交互都要处于当前我们自己的链id中。代码如果:

// 假使我的链同事给了我一个链id 是  0x313353
const ourChainId = '0x313353';
// 然后我获取一下当前链id
const myChainId = await request({ method: 'eth_chainId' });
if (ourChainId === myChainId) {// 继续操作
} else {// 链不对,不能继续交易交互
}

这个时候当然不能停止操作,那用户不就不操作了。所以当检测到链id不对的时候,需要把链给他切换回来,意思就是把我们需要的这个提前定义的这个链id,给赋值,保证我们当前交互的链服务的准确性。代码如下:

// 假使我的链同事给了我一个链id 是  0x313353
const ourChainId = '0x313353';
// 然后我获取一下当前链id
const myChainId = await request({ method: 'eth_chainId' });
if (ourChainId === myChainId) {// 继续操作
} else {const request = window.ethereum.request;await request({method: 'wallet_switchEthereumChain',params: [{ chainId: 'ourChainId ' }],});
}
3.2 链的接口地址

和链做交互,其实就像咱们和java、phthon他们交互一样,但这次不能写ajax axios fetch这种操作了,他们换模式了。所以,就像我们和java phthon他们交互一样,需要提前定义一个公共的,统一的接口前缀,然后给链传过去,定义好,后续就可以直接使用了。

代码如下:

const customChainId = 1234; // 自定义的以太坊网络的 chainId
const customChainName = 'MyCustomChain'; // 自定义的以太坊网络的名称
const customRpcUrl = 'https://custom-rpc-url.com'; // 自定义的以太坊网络的 RPC URL// 创建请求参数对象
const params = {method: 'wallet_addEthereumChain',params: [{chainId: `0x${customChainId.toString(16)}`, // 转换为十六进制格式chainName: customChainName,rpcUrls: [customRpcUrl],}]
};// 发送请求
window.ethereum.request(params).then((result) => {// 处理结果console.log('Added custom Ethereum chain:', result);}).catch((error) => {// 处理错误console.error('Error adding custom Ethereum chain:', error);});

代码中的 rpcUrls 就是这个所谓的链的服务地址,这也是跟链同事做交互的时候,他们会提前告知的。

3.3 区块链浏览器的跳转URL地址

是的,你没看错,这是一个浏览器。当我第一次接触web3的时候,产品告诉我说,咱们有一个浏览器的项目需要搞一下,之前已经搞了一部分了。我当时震惊的不行。呀,web3,区块链就是不一样,都说做区块链有前景,看来不光是money层面的,技术层面也非同凡响啊。区块链需要一个单独的“浏览器”来支持,这我要是学会了怎么做浏览器,那不得秒杀一众。

后来我发现,区块链浏览器呢,就是用户在这条链上的账户啦、每条交易啦、一些出块信息啦做一个展示的一个破网站。

没啥技术含量,就是调接口,展示,做几个CSS3动效 ,跟传统的大家做的东西没有任何出入,调的接口也还是那些java啦python啦他们提供的接口,仅此而已。而且也不涉及到交易,也不涉及到登录,也没有个人中心啥的,真的就是一个浏览用户交易的小破网站。因为这个网站用于浏览器,所以他们叫他“浏览器”。

而这个浏览器地址在小狐狸中的设置呢,代码中需要添加一个“blockExplorerUrls”的入参,这个参数也是产品或者后端人员(呸,又说错了,做链的同事)告诉你,你就直接做为像本节3.2中rpcUrls 一样一样的入参就可以了。

具体体现在,当我们交易后,小狐狸里会有交易的体现,点击交易链接,就会跳转到我们预设的blockExplorerUrls那个地址上去因为小狐狸也是浏览器(这个浏览器说的是真的浏览器,不是假的)插件嘛,所以这就是一个单纯的浏览器链接跳转。

4 结尾

好啦,这就是这一小节的内容,说一些跟小狐狸相关的知识点,后续说一些和链交互的东西,说一些跟web3相关的东西,这个钱包不是以太坊相关的嘛,后续有空说一些Unisat相关的东西。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/309499.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解锁生成式 AI 的力量:a16z 提供的 16 个企业指南

企业构建和采购生成式AI方面的16项改变 生成式 AI 领域趋势洞察:企业构建和采购生成式 AI 的方式正在发生重大转变,具体表现在:* 专注于可信度和安全性:75% 的企业将信任和安全性视为关键因素。* 优先考虑可扩展性和灵活性&#x…

YOLOv9/YOLOv8算法改进【NO.117】 使用Wasserstein Distance Loss改进小目标的检测效果

前 言 YOLO算法改进系列出到这,很多朋友问改进如何选择是最佳的,下面我就根据个人多年的写作发文章以及指导发文章的经验来看,按照优先顺序进行排序讲解YOLO算法改进方法的顺序选择。具体有需求的同学可以私信我沟通: 首推…

5.7打补丁—编译和官方一致的Linux_Generic包

5.7打补丁—编译和官方一致的Linux_Generic包 需求来源 某客户现场业务系统出现了查询丢失数据问题(数据库为MySQL 5.7.21,使用Linux-Generic包部署)。 已查明:丢数据问题是触发了MySQL 5.7的一个bug,该bug在5.7的后继版本已修…

安装VMware ESXi虚拟机系统

简介:ESXi是VMware公司开发的一款服务器虚拟化操作系统。它能够在一台物理服务器上运行多个虚拟机,每个虚拟机都可以独立运行操作系统和应用程序,而且对硬件配置要求低,系统运行稳定。 准备工具: 1.8G或者8G以上容…

vue快速入门(二十三)侦听器的简单写法与完整写法

注释很详细&#xff0c;直接上代码 上一篇 新增内容 侦听器简单写法侦听对象或属性侦听器完整写法侦听对象&#xff08;可选深度侦听&#xff09; 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name…

《Kubernetes部署篇:基于Kylin V10+ARM架构CPU使用containerd部署K8S 1.26.15集群(一主多从)》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:企业级K8s集群运维实战 1、在当前实验环境中安装K8S1.25.14版本,出现了一个问题,就是在pod中访问百度网站,大概时间有10s多,这个时间太长了,尝试了各种办法,都解决不了,后面尝试安装了了1.26.…

AI技术将影响更长远,比如未来的就业形势

随着人工智能渗透到工作场所&#xff0c;人类将需要掌握新的工作技能。 AI作为新技术已经开始扰乱就业市场了。对于最新的AI人工智能技术&#xff0c;经济学家、教育工作者、监管机构、商业分析师以及相关领域专家预测&#xff0c;在不久的将来&#xff0c;人工智能一代将需要…

OCP Java17 SE Developers 复习题12

答案 E. Modules are required to have a module-info.java file at the root directory of the module. Option E matches this requirement. 答案 B. Options A, C, and E are incorrect because they refer to directives that dont exist. The exports directive i…

IOS 短信拦截插件

在使⽤iOS设备的时候, 我们经常会收到1069、1065开头的垃圾短信, 如果开了iMessage会更严重, 各种乱七⼋糟的垃圾信息会时不时地收到。 从iOS11开始, ⼿机可以⽀持恶短信拦截插件了. 我们可以通过该插件添加⼀些规则通过滤这些不需要的信息. ⼀. 使⽤xcode新建⼀个项⽬ 【1】…

网络篇01 | 入门篇

网络篇01 | 入门篇 01 各层协议目录[网络篇02 | 应用层 kcp&#xff08;王者荣耀&#xff09;](https://blog.csdn.net/qiushily2030/article/details/135835946)[网络篇03 | 应用层 quic](https://blog.csdn.net/qiushily2030/article/details/136192481)[网络篇04 | 应用层 m…

【Ubuntu】 Github Readme导入GIF

1.工具安装 我们使用 ffmpeg 软件来完成转换工作1.1 安装命令 sudo add-apt-repository ppa:jonathonf/ffmpeg-3sudo apt-get updatesudo apt-get install ffmpeg1.2 转换命令 &#xff08;1&#xff09;直接转换命令&#xff1a; ffmpeg -i out.mp4 out.gif(2) 带参数命令&…

系统架构最佳实践 -- 统一身份认证系统

目录 1.系统架构设计&#xff1a; 2.用户认证与授权&#xff1a; 3.用户身份管理&#xff1a; 4.安全性保障&#xff1a; 5.日志记录与审计&#xff1a; 6.高可用性与容错性&#xff1a; 7.用户体验优化&#xff1a; 随着互联网的快速发展和应用的普及&#xff0c;人们在…

嵌入式学习day16-22(2024.04.06-13)

文章目录 C语言网络编程socket主机与网络字节序转换inet_addr、inet_aton&#xff08;ip转换&#xff09;inet_ntoa 网络字节序转换为IP字符串端口转换为网络字节序网络字节序转换为端口atoi &#xff08;字符串转换为整数&#xff09; UDP通信流程UDP多进程并发服务器服务端客…

Vue指令案例

通过Vue完成表格数据的渲染展示 最终结果为&#xff1a; <!DOCTYPE html> <html lang"en"><head><script src"vue.js">//引入vue文件</script><meta charset"UTF-8"><meta name"viewport" c…

设计模式系列:责任链模式

简介 责任链模式是一种行为型设计模式&#xff0c;它允许你将请求沿着处理者链进行发送。每个处理者都可以对请求进行处理&#xff0c;或者将其传递给链上的下一个处理者。责任链模式主要应用于面向对象编程中&#xff0c;特别是当系统中的对象需要根据其属性来决定如何处理请…

DNS正反向解析

1.先连接X-shell 主服务器&#xff1a;192.168.32.168&#xff08;server&#xff09; 从服务器&#xff1a;192.168.32.169&#xff08;node&#xff09; 2.给主从服务器做准备工作 [rootserver ~]# setenforce 0 setenforce: SELinux is disabled [rootserver ~]# systemc…

基于SpringBoot+Mybatis框架的私人影院预约系统(附源码,包含数据库文件)

基于SpringBootMybatis框架的私人影院预约系统&#xff0c;附源码&#xff0c;包含数据库文件。 非常完整的一个项目&#xff0c;希望能对大家有帮助哈。 本系统的完整源码以及数据库文件都在文章结尾处&#xff0c;大家自行获取即可。 项目简介 该项目设计了基于SpringBoo…

季节更迭 关爱不变 | 鲁南制药四季守护您的健康生活

春天&#xff0c;万物复苏的季节&#xff0c;一切都充满了生机和活力。在春日的阳光下&#xff0c;鲜花盛开&#xff0c;绿叶茂盛&#xff0c;鸟儿欢歌&#xff0c;蝴蝶翩翩起舞。我们的身体也需要特别的关爱和养护&#xff0c;保持健康和活力&#xff0c;更好地迎接每一次季节…

冯喜运:4-15周一黄金原油行情分析及操作建议

【 黄金消息面分析】&#xff1a;周五(4月12日)美盘时段&#xff0c;黄金价格再创历史新高一度突破2420美元关口&#xff0c;最高触及2431美元/盎司&#xff0c;尽管相对强弱指数(RSI)显示超买状态&#xff0c;但随着以色列和伊朗之间的地缘政治紧张局势升级&#xff0c;投资者…

Object和Objects

Object Object是Java中的顶级父类.所有的类都直接或间接的继承Object类. Object类中的方法可以被所有子类访问,所以我们要学习Object类和其中的方法. Object的构造方法: Object的成员方法 public class test {public static void main(String[] args) {//1.toString 返回对象…