Launchpad教程之前端框架和结构搭建

目录

Launchpad教程之前端框架和结构搭建

UnicryptPinksale是两个出名的Launchpad平台,在平台上你可以Mint自己的token,还有crypto中需要用的一些工具,这些平台也都有提供。接下来,我会从零开始写前端和Solidit合约教大家,如何搭建一个自己的Launchpad平台,主要参考Pinksale的界面和相关功能。

这篇文章你会学到

  • Launchpad前端架构选型
  • Launchpad整体架构搭建
  • 怎样连接区块链钱包

你需要了解以下相关技术

Launchpad前端架构选型

前端框架我直接选用的是vue2,因为我比较熟悉,如果你对其他如React或Vue3感兴趣,在看过我的教程后你可以自己重构成自己的想要的框架。

因为我们教程主要仿的是Pinksale,分析它的整体页面结构如下:

Launchpad教程之前端框架和结构搭建
pinksale页面

可以看到总共分为三块

  1. 上方header–连接钱包和显示当前链功能
  2. 左边aside–菜单功能选型
  3. 中间content–主要功能页面

结构功能基本类似于一些admin管理框架,我选用了vue-prev-admin来作为我们的前端基本脚手架。

Launchpad整体架构搭建

下面是脚手架基本目录结构

Launchpad教程之前端框架和结构搭建
目录结构
  • api:因为我们后面是和合约交互,所以不需要用到
  • assets:用来放图片,js,css等一些资源
  • components:放置组件
  • i18n:我做了多语言配置
  • layout:全局布局组件
  • router:路由菜单等相关配置
  • store:放置一些全局参数,如用户钱包地址,用户余额等
  • theme:全局的一些css配置
  • utils:一些功能js,合约的abi等
  • views:编写页面
Launchpad教程之前端框架和结构搭建
结构相关代码

根据pinksale整体的页面结构,在相关vue页面中将主要元素加上,编写页面就不详细写了,到时候自己看相关代码就清楚了,这是我仿照写出的页面如下:

Launchpad教程之前端框架和结构搭建
仿Pinksale页面

连接区块链钱包

Launchpad属于Dapp,Dapp最重要的一步就是连接区块链钱包,网上有很多教程,不过我还是带大家走一遍。

先熟悉下相关api:

1.判断浏览器是否支持钱包连接

export function isMetaMaskProvider() {
  return Boolean(window.ethereum)
}

2.连接钱包

await window.ethereum.enable()
let provider = new ethers.providers.Web3Provider(
              window.ethereum,
              'any'
            )

3.获取钱包地址相关信息

 let signer = provider.getSigner()
 web3.userAddress = await signer.getAddress() //获取用户钱包地址
 let balance = await provider.getBalance(web3.userAddress)//获取钱包eth余额
 web3.userBalance = ethers.utils.formatEther(balance)
 web3.network = await provider.getNetwork() //获取连接钱包区块信息

4.监听(metamask建议钱包切换或网络切换时,都刷新页面)

export function listeningMetaMaskChange() {
  // 钱包地址切换事件
  window.ethereum.on('accountsChanged', _ => window.location.reload())
 //区块链网络更改事件
  window.ethereum.on('chainChanged', _ => window.location.reload())
}

以上就是我们连接钱包和切换钱包时,需要用到的几个重要函数和代码,安装好钱包,点击右上角Connect连接效果如下:

Launchpad教程之前端框架和结构搭建
连接钱包演示

接下来我会教你们如何把这些代码串起来,达到以上效果。

本教程仅供学习,如有疑问,请移步Telegram
post-qrcode
gason
版权声明:本站原创文章,由 gason 2022-10-11发表,共计1607字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码