使用WalletConnect Web3Modal v3 链接钱包基础教程
我使用的是vue+ethers
官方文档:WalletConnect
1.安装
yarn add @web3modal/ethers ethers
或者
npm install @web3modal/ethers ethers
2.引用
新建一个js文件,在main.js中引入,初始化配置sdk
import {createWeb3Modal,defaultConfig,
} from "@web3modal/ethers5/vue";// 1. Get projectId
const projectId = import.meta.env.VITE_PROJECT_ID;// 2. Set chains
const mainnet = {chainId: 1,name: 'Ethereum',currency: 'ETH',explorerUrl: 'https://etherscan.io',rpcUrl: 'https://cloudflare-eth.com'
};// 3. Create modal
const metadata = {name: 'My Website',description: 'My Website description',url: 'https://mywebsite.com',icons: ['https://avatars.mywebsite.com/']
}createWeb3Modal({ethersConfig: defaultConfig({ metadata }),chains: [mainnet],projectId
})
获取 address chainId isConnected相关信息
import { useWeb3ModalAccount } from "@web3modal/ethers5/vue";// 一定要先初始化完成才能调用获取到
const { address, chainId, isConnected } = useWeb3ModalAccount();const getWalletInfo = () => {console.log({address,chainId,isConnected})// 获取更改后的相关操作....
};// 这里可以使用 watch 监听钱包变化
watch(() => address.value,() => {getWalletInfo();}
);
调用签名
import { useWeb3ModalSigner } from "@web3modal/ethers5/vue";// 一定要先初始化完成才能调用获取到
const { signer } = useWeb3ModalSigner();const onSignMessage = async ()=> {try {const signature = await signer.value.signMessage("Hello Web3Modal Ethers");console.log('签名信息',signature);} catch (error) {console.log("签名失败", error);}
}
以上调用方法可以自己结合使用, 具体可以参考官方文档
3.网络组件 点这里看文档
初始化引用之后再调用
<w3m-button />
<w3m-account-button />
<w3m-connect-button />
<w3m-network-button />


4.自定义组合 点这里看文档
<script setup>
import { useWeb3Modal } from "@web3modal/ethers5/vue";
const { open } = useWeb3Modal();
</script><van-button round type="primary" @click="open()"><span v-if="userStore.address !== ''">{{ userStore.address) }}</span><span v-else>Connect Wallet</span>
</van-button>
结尾
projectId 可以到 WalletConnect Cloud 进行注册创建
页面调用效果图 官方示例


相关文章:
使用WalletConnect Web3Modal v3 链接钱包基础教程
我使用的是vueethers 官方文档:WalletConnect 1.安装 yarn add web3modal/ethers ethers 或者 npm install web3modal/ethers ethers2.引用 新建一个js文件,在main.js中引入,初始化配置sdk import {createWeb3Modal,defaultConfig, } from…...
黄金比例设计软件Goldie App mac中文版介绍
Goldie App mac是一款测量可视化黄金比例的工具。专门为设计师打造,可以帮助他们在Mac上测量和可视化黄金比例,从而轻松创建出完美、平衡的设计。 Goldie App mac体积小巧,可以驻留在系统的菜单栏之上,随时提供给用户调用。 拥有独…...
el-select实现可复制一段“关键词“(多个)实现搜索 以及 回车选中搜索项
el-select实现可复制一段"关键词"(多个)实现搜索 以及 回车选中搜索项 <el-selectref"productRef"filterableclearablev-model"fItem.productName"multiple:reserve-keyword"true"remote:filter-method&quo…...
C++解析xml示例
C解析xml示例 1. Xml文档介绍1.1 特点及作用1.2 Xml优点1.2.1 良好的可拓展性1.2.2 内容与形式分离 1.3 Xml组成1.3.1 Xml声明1.3.2 根元素1.3.3 元素1.3.4 属性1.3.5 实体1.3.6 注释 2 C解析Xml2.1 tinyXml2类库2.2 关键接口2.2.1 LoadFile2.2.2 RootElement2.2.3 FirstChildE…...
记录 | linux find+rm查找并直接删除
findrm查找并直接删除: find ./ -name "xx_name" |xargs rm -rf...
24.有哪些生命周期回调方法?有哪几种实现方式?
有哪些生命周期回调方法?有哪几种实现方式? 有两个重要的bean 生命周期方法, 第一个是init , 它是在容器加载bean的时候被调用。第二个方法是 destroy 它是在容器卸载类的时候被调用。bean 标签有两个重要的属性(init-method和destroy-method)。用它们你可以自己定制初始…...
C++详解
//7.用new建立一个动态一维数组,并初始化int[10]{1,2,3,4,5,6,7,8,9,10},用指针输出,最后销毁数组所占空间。 #include<iostream> #include<string> using namespace std; int main() { int *p; pnew int[10]; for(i…...
mybatis数据输入-实体类型的参数
1、建库建表 CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT AUTO_INCREMENT,emp_name CHAR(100),emp_salary DOUBLE(10,5),PRIMARY KEY(emp_id) );INSERT INTO t_emp(emp_name,emp_salary) VALUES("tom",200.33); INSERT INTO…...
Java-接口
目录 定义 格式 使用 接口中成员的特点 成员变量 构造方法 成员方法 JDK8新特性:可以定义有方法体的方法 默认方法 作用 定义格式 注意事项 静态方法 定义格式 注意事项 JDK9新特性:可以定义私有方法 私有方法的定义格式 接口和接口之…...
mysql常用命令行代码
连接到 MySQL 服务器: mysql -u your_username -p替换 your_username 为你的 MySQL 用户名。系统会提示你输入密码。 退出 MySQL 命令行: EXIT;或者按 Ctrl D。 显示所有数据库: SHOW DATABASES;选择数据库: USE your_database…...
Python压缩、解压文件
#!/usr/bin/python3 # -*- coding:utf-8 -*- """ author: JHC file: util_compress.py time: 2023/5/28 14:58 desc: rarfile 使用需要安装 rarfile 和 unrar 并且将 unrar.exe 复制到venv/Scrpits目录下 (从WinRar安装目录下白嫖的) 下载…...
面试就是这么简单,offer拿到手软(一)—— 常见非技术问题回答思路
面试系列: 面试就是这么简单,offer拿到手软(一)—— 常见非技术问题回答思路 面试就是这么简单,offer拿到手软(二)—— 常见65道非技术面试问题 文章目录 一、前言二、常见面试问题回答思路问…...
134. 加油站(贪心算法)
根据题解 这道题使用贪心算法,找到当前可解决问题的状态即可 「贪心算法」的问题需要满足的条件: 最优子结构:规模较大的问题的解由规模较小的子问题的解组成,规模较大的问题的解只由其中一个规模较小的子问题的解决定ÿ…...
Springboot3+vue3从0到1开发实战项目(二)
前面完成了注册功能这次就来写登录功能, 还是按照这个方式来 明确需求: 登录接口 前置工作 : 想象一下登录界面(随便在百度上找一张) 看前端的能力咋样了, 现在我们不管后端看要什么参数就好 阅读接口文档…...
Spring中Bean的生命周期
1.生命周期 Spring应用中容器管理了我们每一个bean的生命周期,为了保证系统的可扩展性,同时为用户提供自定义的能力,Spring提供了大量的扩展点。完整的Spring生命周期如下图所示,绿色背景的节点是ApplictionContext生命周期特有的…...
IndexOutOfBoundsException: Index: 2048, Size: 2048] Controller接收对象集合长度超过2048错误
完整异常信息: org.apache.catalina.core.StandardWrapperValve.invoke Servlet.service() for servlet [spring] in context with path [/jsgc] threw exception [Request processing failed; nested exception is org.springframework.beans.InvalidPropertyExce…...
2023年中国消费金融行业研究报告
第一章 行业概况 1.1 定义 中国消费金融行业,作为国家金融体系的重要组成部分,旨在为消费者提供多样化的金融产品和服务,以满足其消费需求。这一行业包括银行、消费金融公司、小额贷款公司等多种金融机构,涵盖了包括消费贷款在内…...
深度学习:什么是知识蒸馏(Knowledge Distillation)
1 概况 1.1 定义 知识蒸馏(Knowledge Distillation)是一种深度学习技术,旨在将一个复杂模型(通常称为“教师模型”)的知识转移到一个更简单、更小的模型(称为“学生模型”)中。这一技术由Hint…...
【Go】protobuf介绍及安装
目录 一、Protobuf介绍 1.Protobuf用来做什么 2. Protobuf的序列化与反序列化 3. Protobuf的优点和缺点 4. RPC介绍 <1>文档规范 <2>消息编码 <3>传输协议 <4>传输性能 <5>传输形式 <6>浏览器的支持度 <7>消息的可读性和…...
c语言编程题经典100例——(41~45例)
1,实现动态内存分配。 在C语言中,动态内存分配使用malloc、calloc、realloc和free函数。以下是一个示例: #include <stdio.h> #include <stdlib.h> int main() { int *ptr NULL; // 初始化为空 int n 5; // 假设我们想要分配5个整数…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...
