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相关的东西。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【C Hash Map from Redis】

将Redis源码中的哈希表底层逻辑提取,并进行最小demo级测试将对应文件抽出,通过宏替换等方式保证源码编译通过main.c编写测试demo ,注册哈希函数和值比较函数(必选项) /* Hash Tables Implementation.** This file imp…

二、Flask会话技术和模板语言

Cookie Session # views.py: 路由 视图函数 import datetimefrom flask import Blueprint, render_template, request, redirect, session from .models import *# 蓝图 blue Blueprint(user, __name__)# 首页 可以写两个路由,都是访问同一个函数 blue.route(/) b…

java数据结构与算法刷题-----LeetCode371. 两整数之和

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 位运算 位运算 解题思路:时间复杂度O( l o g 2 m a …

自顶向下的语法分析器

一、问题及解决: 什么是Dictionary File? 这种类型的文件为Windows虚拟PC 2007,虚拟机,它允许一些版本的Windows在一台计算机上运行生成。它包括像发音和单词的定义以及各种语言,如德国和法国的辞典数据。 如何实现语…

2024/4/15 AD/DA

AD(Analog to Digital):模拟-数字转换,将模拟信号转换为计算机可操作的数字信号 DA(Digital to Analog):数字-模拟转换,将计算机输出的数字信号转换为模拟信号 AD/DA转换打开了计算…

代码学习记录42---动态规划

随想录日记part42 t i m e : time: time: 2024.04.14 主要内容:今天开始要学习动态规划的相关知识了,今天的内容主要涉及:最长递增子序列 ;最长连续递增序列 ;最长重复子数组 ;最长公…

5G网络开通与调测ipv4

要求如下: 1. 勘站规划 1. 【重】首先观察NR频点,完成设备选型 2645--选择N41 3455--选择N78 4725--选择N79 设备选型如下:观察AAU的通道数,最大发射功率;选择N41的选型频段也要选41 2. …

算法:位运算

算法&#xff1a;位运算 常见位运算操作基本题型模拟加法数字查找总结 常见位运算操作 在C/C中&#xff0c;有比较丰富的位运算操作符&#xff0c;常见的有&#xff1a; &&#xff1a;按位与 |&#xff1a;按位或 ~&#xff1a;按位取反 ^&#xff1a;按位异或 <<&a…

stm32开发之threadx+modulex组合开发使用记录

前言 参考博客 论坛官方资料: 微软开发板核心芯片使用的是stm32f407zgtx&#xff0c;烧录工具使用的是jlink模块的构建使用的是脚本进行构建网上针对modulex的资料较少&#xff0c;这里做个记录 项目结构 逻辑框架 主程序代码 主函数 /** Copyright (c) 2024-2024&#xff0…

ansible创建用户账户和更新ansible库的密钥

1.创建⽤户帐户 从 http://materials/user_list.yml 下载要创建的⽤户的列表&#xff0c;并将它保存到 /home/greg/ansible 在本次考试中使⽤在其他位置创建的密码库 /home/greg/ansible/locker.yml 。创建名为 /home/greg/ansible/users.yml 的 playbook &#xff0c;从⽽…

空指针与野指针的辨析

空指针 空指针不指向任何实际的对象或者函数&#xff0c;反过来&#xff0c;任何的对象或者函数也不可能是空指针。 在程序中得到空指针的办法就是使用预定义的NULL&#xff0c; int *ip NULL; 校验一个指针是否为空指针可以用 if (ip NULL) NULL是标准规定的宏定义&am…

使用spring-ai快速对接ChatGpt

什么是spring-ai Spring AI 是一个与 Spring 生态系统紧密集成的项目&#xff0c;旨在简化在基于 Spring 的应用程序中使用人工智能&#xff08;AI&#xff09;技术的过程。 简化集成&#xff1a;Spring AI 为开发者提供了方便的工具和接口&#xff0c;使得在 Spring 应用中集…

Unity类银河恶魔城学习记录12-13 p135 Merge Skill Tree with Dogge skill源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili​​​​​​​ Inventory.cs using System.Collections.Generic; using Un…

链表-双指针-虚拟节点-力扣

链表--双指针--虚拟节点 力扣 142 环形链表求循环起点 重点力扣 21 合并两个有序链表力扣 86 分割链表力扣23 合并K个有序链表 -- 优先队列&#xff08;二叉堆 小顶堆&#xff09;重点力扣19 找倒数第N个元素 快慢指针 一次遍历 重点力扣876 快慢指针找中间节点力扣 160 相交链…

28、链表-两数相加

思路&#xff1a; 有几个方面需要考虑 双指针遍历&#xff0c;如果出现和大于10那么向前进1如果长度不一样那么长的部分直接落下并且考虑进1 的问题 代码如下&#xff1a; class Solution {public ListNode addTwoNumbers(ListNode l1, ListNode l2) {if (l1null||l2null){…

网络编程【InetAddress , TCP 、UDP 、HTTP 案例】

day38上 网络编程 InetAddress 理解&#xff1a;表示主机类 一个域名 对应 多个IP地址 public static void main(String[] args) throws UnknownHostException {//获取本机的IP地址 // InetAddress localHost InetAddress.getLocalHost(); // System.out.println(localHos…

前端标记语言HTML

HTML&#xff08;HyperText Markup Language&#xff09;是一种用于创建网页的标准标记语言。它是构建和设计网页及应用的基础&#xff0c;通过定义各种元素和属性&#xff0c;HTML使得开发者能够组织和格式化文本、图像、链接等内容。 HTML的基本结构 文档类型声明&#xff0…

终端工具命令行颜色配置(解决终端工具连上服务器之后,无颜色问题)

本期主题&#xff1a; 讲解使用mobaxterm等终端工具连上服务器&#xff0c;但是命令行没有颜色的问题 目录 1. 问题描述2. 原因解释3.测试 1. 问题描述 使用终端工具&#xff08;Mobaxterm等&#xff09;连上服务器之后&#xff0c;发现终端工具没有颜色&#xff0c;如下图&am…

基于java的社区生活超市管理系统

开发语言&#xff1a;Java 框架&#xff1a;ssm 技术&#xff1a;JSP JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclip…

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

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