目录


Unicrypt和Pinksale是两个出名的Launchpad平台,在平台上你可以Mint自己的token,还有crypto中需要用的一些工具,这些平台也都有提供。接下来,我会从零开始写前端和Solidit合约教大家,如何搭建一个自己的Launchpad平台,主要参考Pinksale的界面和相关功能。
这篇文章你会学到
- Launchpad前端架构选型
- Launchpad整体架构搭建
- 怎样连接区块链钱包
你需要了解以下相关技术
- 前端框架Vue
- ethers.js库
- MetaMask钱包
Launchpad前端架构选型
前端框架我直接选用的是vue2,因为我比较熟悉,如果你对其他如React或Vue3感兴趣,在看过我的教程后你可以自己重构成自己的想要的框架。
因为我们教程主要仿的是Pinksale,分析它的整体页面结构如下:


可以看到总共分为三块
- 上方header–连接钱包和显示当前链功能
- 左边aside–菜单功能选型
- 中间content–主要功能页面
结构功能基本类似于一些admin管理框架,我选用了vue-prev-admin来作为我们的前端基本脚手架。
Launchpad整体架构搭建
下面是脚手架基本目录结构


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


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


连接区块链钱包
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连接效果如下:


接下来我会教你们如何把这些代码串起来,达到以上效果。
本教程仅供学习,如有疑问,请移步Telegram

