使用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 进行注册创建

页面调用效果图 官方示例
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

CMMI认证含金量高吗

一、CMMI认证含金量解答 CMMI&#xff0c;即能力成熟度模型集成&#xff0c;是由美国卡内基梅隆大学软件工程研究所开发的一种评估企业软件开发过程成熟度的模型。CMMI认证的含金量究竟高不高呢&#xff1f;答案是肯定的。CMMI认证被誉为软件开发行业的“金牌标准”&#xff0…

【算法】合并K个升序链表

这道题主要考察的是归并排序&#xff0c;因为已经升序过了&#xff0c;更好理解了。 当然也可以采用分治的思路&#xff1b;或采用最小堆的思路&#xff1b;面试中校招同学写出一种即可&#xff0c;如果能全概览讲一下&#xff0c;就更加分了。 #############################…

力扣题:字符的统计-12.2

力扣题-12.2 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;423. 从英文中重建数字 解题思想&#xff1a;有的单词通过一个字母就可以确定&#xff0c;依次确定即可 class Solution(object):def originalDigits(self, s):""":typ…

okhttp系列-拦截器的执行顺序

1.将拦截器添加到ArrayList final class RealCall implements Call {Response getResponseWithInterceptorChain() throws IOException {//将Interceptor添加到ArrayListList<Interceptor> interceptors new ArrayList<>();interceptors.addAll(client.intercept…

03-IDEA集成Git,初始化本地库,添加远程仓库,提交,拉取,推送,分支的快捷操作

IDEA集成Git 创建Git忽略文件 不同的IDE开发工具有不同的特点文件,这些文件与项目的实际功能无关且不参与服务器上的部署运行, 把它们忽略掉能够屏蔽之间的差异 局部忽略配置文件: 在本地仓库的根目录即项目根目录下直接创建.gitignore文件, 以文件后缀或目录名的方式忽略指定…

双远心镜头:让视觉检测更精准、高效!

工业镜头是视觉系统中的重要组件&#xff0c;工业镜头的选型影响着整个系统的成像效果。在做视觉检测时&#xff0c;会遇到无法检测空间物体、无法控制视场变化、无法控制图像扭曲、对比度低、畸变大、反光等问题&#xff0c;这时普通的工业镜头并不能有效地解决问题&#xff0…

校园门禁可视化系统解决方案

随着科技的持续进步&#xff0c;数字化校园在教育领域中的地位日益上升&#xff0c;各种智能门禁、安防摄像头等已遍布校园各个地方&#xff0c;为师生提供安全便捷的通行体验。然而数据收集分散、缺乏管理、分析困难等问题也逐渐出现&#xff0c;在这个数字化环境中&#xff0…

《opencv实用探索·六》简单理解图像膨胀

1、图像膨胀原理简单理解 膨胀是形态学最基本的操作&#xff0c;都是针对白色部分&#xff08;高亮部分&#xff09;而言的。膨胀就是使图像中高亮部分扩张&#xff0c;效果图拥有比原图更大的高亮区域。 2、图像膨胀的作用 注意一般情况下图像膨胀和腐蚀是联合使用的。 &…

scrapy介绍,并创建第一个项目

一、scrapy简介 scrapy的概念 Scrapy是一个Python编写的开源网络爬虫框架。它是一个被设计用于爬取网络数据、提取结构性数据的框架。 Scrapy 使用了Twisted异步网络框架&#xff0c;可以加快我们的下载速度。 Scrapy文档地址&#xff1a;http://scrapy-chs.readthedocs.io/z…

【.net core 7】新建net core web api并引入日志、处理请求跨域以及发布

效果图&#xff1a; 1.新建.net core web api项目 选择src文件夹》添加》新建项目 输入框搜索&#xff1a;web api 》选择ASP.NET Core Web API 输入项目名称、选择位置为项目的 src文件夹下 我的项目是net 7.0版本&#xff0c;实际选择请看自己的项目规划 2.处理Progr…

基于SpringBoot自定义线程池实现多线程执行方法,以及多线程之间的协调和同步

前言 在服务端开发中&#xff0c;多线程开发是非常重要的。因为多线程可以同时处理多个请求&#xff0c;从而提高应用程序的性能&#xff0c;大大改善用户体验。 一、先来了解三个问题 1.在SpringBoot项目中为啥需要自定义线程池&#xff1f; &#xff08;1&#xff09;在S…

正则表达式的基本语法

1.正则表达式基本语法 两个特殊的符号^和$。他们的作用是分别指出一个字符串的开始和结束。例子如下&#xff1a; "^The"&#xff1a;表示所有以"The"开始的字符串&#xff08;"There"&#xff0c;"The cat"等&#xff09;&#xff1…

SpringBoot Bean解析

Bean解析 IOC介绍 松耦合灵活性可维护 注解方式配置Bean 实现方式1: Component声明,直接类上进行添加注解, 同时保证包扫描能扫到即可实现方式2: 配置类中使用Bean Configuration public class BeanConfiguration implements SuperConfiguration{Bean("dog")Ani…

基于DigiThread的仿真模型调参功能

仿真模型调参是指通过调整模型内部的参数值&#xff0c;使仿真模型的输出更符合实际系统的行为或者预期结果的过程。 仿真过程中&#xff0c;往往需要频繁对模型参数进行调整&#xff0c;通过观察不同参数下系统整体的运行情况&#xff0c;实现系统的性能、可靠性和效率的优化…

一小时玩转【负载均衡】

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。 &#x1f60a; 座右铭&#xff1a;不…

搜索与回溯算法③

题目&#xff1a; 求0-9所有数字组成的k位不重复的数字。 说明&#xff1a;我们要找到所有不重复数字的k位组合。这个问题相对于前一个问题&#xff08;搜索与回溯算法②&#xff09;增加了一个约束&#xff1a;每个数字只能使用一次。这就需要在代码中加入剪枝逻辑来确保不…

初中数学网上考试系统的设计与实现

摘 要&#xff1a; 科技在人类的历史长流中愈洗愈精&#xff0c;不仅包括人们日常的生活起居&#xff0c;甚至还包括了考试的变化。之前的考试需要大量的时间和精力&#xff0c;组织者还需要挑选并考查结果&#xff0c;以及为了强制有效地进行考试所需要采取的一些步骤&#x…

RocketMQ Copilot 一款面向 Apache RocketMQ 的智能辅助运维系统

一、RocketMQ简介 ocketMQ是阿里巴巴研发的一款分布式消息中间件&#xff0c;后开源给Apache基金会&#xff0c;成为apache的顶级开源项目。它具有高性能、高可靠、高实时和分布式的特点。RocketMQ主要应用于解决应用耦合&#xff0c;消息分发&#xff0c;流量削锋等问题。 R…

flutter布局详解及代码示例(补充)

布局 基本布局 Container&#xff08;基本布局&#xff09;&#xff1a;最常见widgetPadding&#xff08;内边距布局&#xff09;&#xff1a;Container增加padding的布局Center&#xff08;居中布局&#xff09;&#xff1a;Container设置居中的布局Align&#xff08;对齐布…

Java零基础——vue篇

1.【熟悉】Vue简介 1.1 简介 它是一个构建用户界面的框架 Vue是一个前端框架 js jq https://www.pmdaniu.com/#file UI网站 UI 一般开发者使用蓝湖 工具 看着UI图 写接口 https://lanhuapp.com/web/#/item 是一个轻量级的MVVM&#xff08;Model-View-ViewModel&#xff0…