关于建立一个NFT项目的前端网页

好久没有更新了,主要是最近忙于工作(偷懒)。

前阵子做了一个NFT项目的前端mint页面,起因是用的模板网站想要添加mint功能需要额外付费,所以自己写了一个页面,作为子域名供大家来访问并mint。

这就埋下了一个障碍,下文再说。

对于NFT的mint页面,网上有许多开源的教程,比较有个性的是国产良心项目,主动将整个项目的代码进行了开源,项目方人也很nice。

NFT的mint页面和普通的网页前端最大的区别就是和小狐狸钱包的通信。需要用到web3.js之类的库来进行钱包的登录和mint操作。目前比较流行的一个web3的前端库是rainbow,可以支持连接多种钱包。不过考虑到NFT项目基本上都是通过小狐狸连接的,所以就还是沿用的国产良心代码中的连接钱包方式。

基本的原理就是点击按钮之后,访问小狐狸钱包,这个时候钱包会跳出来让你同意登录这个网页,登录后就可以显示钱包地址或者是ens昵称。登录状态作为一个变量存储,通过这个变量,可以查询用户的WL状态、可以mint的个数等。当然这些操作需要我们去通过合约预留的函数来查询。当用户点击mint之后,就需要与用户钱包进行交互,把一些参数,比如mint的个数,价格传递给钱包,然后发起一个交易,调用NFT合约中的mint函数,当用户点击发送交易的时候,这个交易就会被发送到链上去执行了。

其他的还有读取合约函数,查询当前mint的总量,并实时刷新等,这个功能我实现的不是很好,我是设置的每隔3秒刷新一次,但是不知道为啥我的代码好像是一直在循环,应该是因为setstate的使用不当造成的,不过对网页的正常运行没有太大的影响,所以后来也没有再优化了。

本来还有一个让用户通过前端来获取签名,然后才能mint的设计。但是因为时间太紧了,后来也没有安排这个功能。这个功能是防止科学家批量mint的,不过后续来看没有这个必要。而且这个功能的实现还需要合约工程师的配合,所以搁浅了。

项目的白名单后来采用了默克尔树的形式存储的,为了节省gas。合约预留了白单查询的函数,所以我这边就比较方便一些,直接调取函数就可以判断用户钱包地址是否在白单内了。

这个是没有太大难度的,真正麻烦的地方是网页的部署。按理说这个不属于前端工程师的范畴了,应该归运维来负责。我也是第一次弄这个,本来想通过netlify这个工具平台来发布的,但是这种模板类的网站的自由度太差了,尤其涉及到两个服务器的交叉,所以一直解决不了问题。后来干脆自己租了一个服务器手动部署。这个过程是最麻烦的,国内服务器还得备案,换了香港服务器。把我做的网页发布到服务器上,然后和cloudflare域名绑定。麻烦的是这个域名还要和那个主网页绑定,只是把子路由指向我的这个服务器。

虽然最终顺利解决了,但是中间需要学习的地方还有很多。一段时间没碰,现在写的时候又有点记不清咋弄的了。所以还是得勤记录,不能偷懒。

保持学习,保持进步吧。

Subscribe to JamesTsao的个人成长笔记
Receive the latest updates directly to your inbox.
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.
More from JamesTsao的个人成长笔记

Skeleton

Skeleton

Skeleton