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.mzph.cn/news/816695.shtml

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

相关文章

Linux的学习之路:10、进程(2)

摘要 本章主要是说一下fork的一些用法、进程状态、优先级和环境变量。 目录 摘要 一、fork 1、fork的基本用法 2、分流 二、进程状态 三、优先级 四、环境变量 1、常见环境变量 2、和环境变量相关的命令 3、通过代码如何获取环境变量 五、导图 一、fork 1、fork…

《自动机理论、语言和计算导论》阅读笔记:p172-p224

《自动机理论、语言和计算导论》学习第 8 天,p172-p224总结,总计 53 页。 一、技术总结 1.Context-Free Grammar(CFG) 2.parse tree (1)定义 p183,But perhaps more importantly, the tree, known as a “parse tree”, when used in a …

事务隔离级别的无锁实现方式 -- MVCC

MVCC的全称是Multiversion Concurrency Control(多版本并发控制器),是一种事务隔离级别的无锁的实现方式,用于提高事务的并发性能,即事务隔离级别的一种底层实现方式。 在了解MVCC之前,我们先来回顾一些简单的知识点:…

基于单片机和安卓平台的移动物联网应用开发实训系统设计

摘要:文章介绍了一种采用单片机和安卓移动设备构建移动物联网应用开发实训系统的方法。并基于该系统完成了实训的项目设计,实现了通过手机远程获取单片机上的传感器数据以及远程控制单片机上的开关设备等典型的物联网应用。 关键词:单片机;传感器;安卓应用开发 1 物联网应…

伺服驱动器算法入门的一些建议和书籍推荐

希望此篇文章对想从事伺服驱动器的研发工作的一些刚刚入门的同学一些建议。 针对伺服驱动器的研发工作涉及的知识和需要掌握的技能主要分为两部分,第一是原理部分、第二是工程实践部分。原理部分的学习在此主要推荐大家查看一些入门书籍,本文章中也对书籍…

【opencv】示例-travelsalesman.cpp 使用模拟退火算法求解旅行商问题

// 载入 OpenCV 的核心头文件 #include <opencv2/core.hpp> // 载入 OpenCV 的图像处理头文件 #include <opencv2/imgproc.hpp> // 载入 OpenCV 的高层GUI(图形用户界面)头文件 #include <opencv2/highgui.hpp> // 载入 OpenCV 的机器学习模块头文件 #includ…

陇剑杯 ios 流量分析

陇剑杯 ios 流量分析 ios 一位ios的安全研究员在家中使用手机联网被黑&#xff0c;不仅被窃密还丢失比特币若干&#xff0c;根据流量分析完成ios1-8 ios 1 ios-1&#xff1a;黑客所控制的C&C服务器IP是_____________。 什么是C&C服务器? C&C&#xff08;Com…

MATLAB GUI图形化界面设计计算器

MATLAB GUI界面设计教程可以帮助用户创建交互式的图形用户界面&#xff0c;以简化与MATLAB程序的交互过程。以下是一个简化的教程&#xff0c;指导你如何进行MATLAB GUI界面设计&#xff1a; 1. 启动GUIDE或App Designer GUIDE&#xff1a;在MATLAB命令窗口中输入guide命令&a…

44.HarmonyOS鸿蒙系统 App(ArkUI)栅格布局介绍

栅格布局是一种通用的辅助定位工具&#xff0c;对移动设备的界面设计有较好的借鉴作用。主要优势包括&#xff1a; 提供可循的规律&#xff1a;栅格布局可以为布局提供规律性的结构&#xff0c;解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数&#xff0c;…

我五年减脂历程中应用的数据指标

对于减脂&#xff0c;理论说的再多无益&#xff0c;关键是要行动起来。只有坚持过&#xff0c;才有资格说&#xff1a;我尽力了。 每天跑步5公里&#xff0c;是改变一个人体态的分水岭。记住是每天&#xff0c;不管春夏秋冬、酷暑寒雪。 我常在想&#xff0c;如何才能变成一个更…

【JavaEE多线程】理解和管理线程生命周期

目录 ThreadThread类的常用构造方法Thread类的常见属性启动一个线程-start()终止一个线程等待一个线程-join()线程的状态 Thread Thread 就是在 Java 中&#xff0c;线程的代言人。系统中的一个线程&#xff0c;就对应到 Java 中的一个 Thread 对象。围绕线程的各种操作&#…

Java 设计模式系列:模板方法模式

简介 模板方法模式是一种行为型设计模式&#xff0c;它定义一个操作中的算法骨架&#xff0c;将一些步骤推迟到子类中。模板方法模式使得子类可以不改变一个算法的结构&#xff0c;即可重定义该算法的某些特定步骤。 在模板方法模式中&#xff0c;抽象类中定义了一系列基本操…

申请OV SSL证书的好处

什么是OV SSL证书&#xff1a; OV SSL证书也叫组织验证型SSL证书&#xff0c;是众多SSL证书当中最受广大用户欢迎的一种类型。因为它不仅需要验证域名的所有权&#xff0c;还需要对企业的相关身份信息进行审核&#xff0c;确保企业是一个真实存在的合法实体。除了这些&#xf…

Rust取代C++? 保守了!关于未来的讨论

当各种平台在大肆讨论rust即将取代C/C的时候&#xff0c;已经有不少人意识到这种讨论是聒噪而无聊的。笔者和老师们通过周末茶会的讨论&#xff0c;认为现今世界常见的大多数编程语言都会在50-80年内被AI取代&#xff0c;同时供人类审计而诞生的“审计语言”会兴起。届时计算机…

华为机考入门python3--(15)牛客15-求int型正整数在内存中存储时1的个数

分类&#xff1a;二进制 知识点&#xff1a; int转二进制 binary bin(n)[2:] 题目来自【牛客】 def count_ones_in_binary(n): # 将输入的整数转换为二进制字符串 # bin(n)为0b11011binary bin(n)[2:]# 初始化计数器为0 count 0 # 遍历二进制字符串的每一位 fo…

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

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

StarUML笔记之从UML图生成C++代码

StarUML笔记之从UML图生成C代码 —— 2024-04-14 文章目录 StarUML笔记之从UML图生成C代码1.Add Diagram2.在TOOLBOX中左键点击Class,松开,然后在中间画面再左键点击&#xff0c;即可出现UML3.修改类图&#xff0c;并添加接口&#xff0c;方法&#xff0c;属性&#xff0c;我…

webpack-(plugin,本地服务器,路径别名,安装vue)

安装vue npm i vue-loader -D npm i vue 编写一个vue文件&#xff1a; 在index.html中设置 一个id为app的div 将vue文件挂载到app中 vue比较特殊&#xff0c;除了使用loader外&#xff0c;还使用了plugin const path require("path"); const { VueLoaderPlugin …

论文笔记:SmartPlay : A Benchmark for LLMs as Intelligent Agents

iclr 2024 reviewer评分 5688 引入了 SmartPlay&#xff0c;一种从 6 种不同游戏中提取的基准 衡量LLM作为智能体的能力 1 智能代理所需的能力 论文借鉴游戏设计的概念&#xff0c;确定了智能LLM代理的九项关键能力&#xff0c;并为每项能力确定了多个等级&#xff1a; 长文…

一个基于单片机内存管理-开源模块

概述 此模块是一位大佬写的应用于单片机内存管理模块mem_malloc,这个mem_malloc的使用不会产生内存碎片,可以高效利用单片机ram空间。 源码仓库:GitHub - chenqy2018/mem_malloc mem_malloc介绍 一般单片机的内存都比较小,而且没有MMU,malloc 与free的使用容易造成内存碎…