UmiJs+react-web3连接Metamask钱包

 本人是步入Web3两个月的小菜鸟,经历了一个月react的后台项目开发,此文章适合刚进入区块链行业的前端同学使用 (掌握html、js、css),还请大佬们轻点!!

需求:

  • 添加Metamask插件

  • 实现点击按钮 -> 链接钱包,并在刷新时自动链接。
  • 实现点击按钮 -> 添加Chain节点。
  • 实现点击按钮 -> 切换Ethereum/Rinkeby节点,切换时页面将刷新。
  • 实现点击按钮 -> 获取账户余额。
  • 实现点击按钮 -> 获取账户签名

       

step1 Google浏览器安装Metamask钱包

        这里就不演示如何安装了,可以自行搜索,google插件进行安装

step2 使用UmiJs构建项目

        UmiJs官网:快速上手

        1、创建好文件夹后在终端中输入  yarn create @umijs/umi-app

        2、安装依赖     yarn add @web3-react/core   

                                 yarn add @web3-react/injected-connector

                                 yarn add @ethersproject/providers

                                 yarn add web

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ts-umijs-react 是一个开源项目,它结合了 TypeScript、UmiJS 和 React 的强大功能。其中,TypeScript 是一种由 Microsoft 开发的静态类型检查工具,它可以帮助我们在开发过程中更早地发现潜在的错误,提高代码的可维护性和可读性。UmiJS 是一个基于 React 的企业级前端框架,它提供了一套完整的生态系统,包含了路由、构建工具、插件等功能,使得开发者可以更轻松地构建大型应用程序。而 React 是一个流行的 JavaScript 库,用于构建用户界面,它提供了高效的组件化开发模式,使得我们可以将整个应用程序分成小块的可复用组件,提高代码的可维护性和可重用性。 ts-umijs-react 项目的优势在于结合了这三者的特点,可以使我们的开发过程更加高效和可靠。首先,使用 TypeScript 可以帮助我们减少许多类型相关的错误,提供更好的代码提示和补全,增加代码的可读性和可维护性。 其次,使用 UmiJS 可以帮助我们快速搭建起一个完整的企业级前端应用程序,它提供了一套约定优于配置的开发规范,使得我们可以更加专注于业务逻辑的实现,而不需要花费过多时间去处理一些基础设施的搭建。 最后,使用 React 可以让我们更加方便地构建用户交互界面,提供高效的渲染和更新机制,使得应用程序可以在不同的平台上都有良好的性能和用户体验。 总之,ts-umijs-react 开源项目的结合了 TypeScript、UmiJS 和 React 的优点,使得我们能够更加高效地开发前端应用程序,提高代码的质量和开发的效率。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值