好久没有更新了，主要是最近忙于工作（偷懒）。

前阵子做了一个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域名绑定。麻烦的是这个域名还要和那个主网页绑定，只是把子路由指向我的这个服务器。

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

保持学习，保持进步吧。

好久没有更新了，主要是最近忙于工作（偷懒）。

前阵子做了一个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域名绑定。麻烦的是这个域名还要和那个主网页绑定，只是把子路由指向我的这个服务器。

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

保持学习，保持进步吧。