小狐狸JSON-RPC:钱包连接,断开连接,监听地址改变

2024-03-29 20:12

本文主要是介绍小狐狸JSON-RPC:钱包连接,断开连接,监听地址改变,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

detect-metamask
创建连接,并监听钱包切换

一、连接钱包,切换地址(监听地址切换),断开连接

  1. 使用npm安装 @metamask/detect-provider在您的项目目录中:
npm i @metamask/detect-provider
import detectEthereumProvider from "@metamask/detect-provider";
async onLoad() {if (typeof window.ethereum !== "undefined") {console.log("MetaMask 已安装!");}this.provider = await detectEthereumProvider();this.provider.request({method: "eth_accounts"}).then(this.handleAccountsChanged).catch((err) => {console.error(err);});this.provider.on("accountsChanged", this.handleAccountsChanged);
},
methods: {// 这个方法,只在钱包APP内可以监听到地址切换,浏览器不行。handleAccountsChanged(accounts) {console.log('监听', accounts);if (accounts.length === 0) {console.log("请连接到MetaMask");} else if (accounts[0] !== this.address) {console.log('地址发生更换', this.address);this.address = accounts[0];}},// 连接钱包async getAccount() {// 1.向用户请求连接钱包,弹出钱包选择账户let res = await window.ethereum.request({"method": "wallet_requestPermissions","params": [{"eth_accounts": {}}]}).catch((err) => {// User rejected the request. (用户拒绝了请求。)console.log(err.message);});if(res){// 2.选择地址并确认let accounts = await this.provider.request({method: "eth_requestAccounts"}).catch((err) => {if (err.code === 4001) {console.log("请连接到MetaMask.");} else {console.error(err);}});this.address = accounts[0]; // 当前钱包地址}},// 关闭连接,仅适用于浏览器扩展。async closeAccount() {var res = await window.ethereum.request({"method": "wallet_revokePermissions","params": [{"eth_accounts": {}}]});this.address = ''console.log('连接已断开', res);},
}

实现的效果图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这篇关于小狐狸JSON-RPC:钱包连接,断开连接,监听地址改变的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/859526

相关文章

JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

《JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)》:本文主要介绍如何在IntelliJIDEA2020.1中创建和部署一个JavaWeb项目,包括创建项目、配置Tomcat服务... 目录简介:一、创建项目二、tomcat部署1、将tomcat解压在一个自己找得到路径2、在idea中添加

通过DBeaver连接GaussDB数据库的实战案例

《通过DBeaver连接GaussDB数据库的实战案例》DBeaver是一个通用的数据库客户端,可以通过配置不同驱动连接各种不同的数据库,:本文主要介绍通过DBeaver连接GaussDB数据库的... 目录​一、前置条件​二、连接步骤​三、常见问题与解决方案​1. 驱动未找到​2. 连接超时​3. 权限不

Navicat连接Mysql8.0.11出现1251错误的解决方案

《Navicat连接Mysql8.0.11出现1251错误的解决方案》在重装电脑并安装最新版MySQL后,Navicat和Sqlyog连接MySQL时遇到的1251和2058错误,通过将MySQL用户... 目录Navicat连接mysql8.0.11出现1251错误原因分析解决问题方法有两种总结Navic

MySQL 中的 JSON_CONTAIN用法示例详解

《MySQL中的JSON_CONTAIN用法示例详解》JSON_CONTAINS函数用于检查一个JSON文档中是否包含另一个JSON文档,这篇文章给大家介绍JSON_CONTAINS的用法、语法、... 目录深入了解 mysql 中的 jsON_CONTAINS1. JSON_CONTAINS 函数的概述2

Python连接Spark的7种方法大全

《Python连接Spark的7种方法大全》ApacheSpark是一个强大的分布式计算框架,广泛用于大规模数据处理,通过PySpark,Python开发者能够无缝接入Spark生态系统,本文给大家介... 目录第一章:python与Spark集成概述PySpark 的核心优势基本集成配置步骤启动一个简单的

java中判断json key是否存在的几种方法

《java中判断jsonkey是否存在的几种方法》在使用Java处理JSON数据时,如何判断某一个key是否存在?本文就来介绍三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的... 目http://www.chinasem.cn录第一种方法是使用 jsONObject 的 has 方法

Go语言中json操作的实现

《Go语言中json操作的实现》本文主要介绍了Go语言中的json操作的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录 一、jsOChina编程N 与 Go 类型对应关系️ 二、基本操作:编码与解码 三、结构体标签(Struc

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,:本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的

Vue3 如何通过json配置生成查询表单

《Vue3如何通过json配置生成查询表单》本文给大家介绍Vue3如何通过json配置生成查询表单,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录功能实现背景项目代码案例功能实现背景通过vue3实现后台管理项目一定含有表格功能,通常离不开表单

java.sql.SQLTransientConnectionException连接超时异常原因及解决方案

《java.sql.SQLTransientConnectionException连接超时异常原因及解决方案》:本文主要介绍java.sql.SQLTransientConnectionExcep... 目录一、引言二、异常信息分析三、可能的原因3.1 连接池配置不合理3.2 数据库负载过高3.3 连接泄漏