好久没有更新了,主要是最近忙于工作(偷懒)。
前阵子做了一个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域名绑定。麻烦的是这个域名还要和那个主网页绑定,只是把子路由指向我的这个服务器。
虽然最终顺利解决了,但是中间需要学习的地方还有很多。一段时间没碰,现在写的时候又有点记不清咋弄的了。所以还是得勤记录,不能偷懒。
保持学习,保持进步吧。