在上一次开发中，我们钱包的主要功能已经开发完成了。但是开发完成到部署上线应用还是有一工作要做的：比如代码优化、测试、打包发布等。由于时间关系，代码的优化及测试等并未处理，直接打包发布了，这里提醒读者注意代码中可能有错误、笔误或者不完善的地方。
这个简单的仿MetaMask网页版以太坊钱包已经发布在网上，大家访问：https://kaihua.xyz/khwallet/create 就可以体验了。网页打开会有些慢，用safari浏览器似乎快一些，chrome浏览器推荐使用手机模式。该钱包最初是用手机模式预览开发的，桌面端未做相应的适配调整。
本次开发主要是钱包打包发布，同时也做了一些界面上的小调整。本文先介绍了一种自定义按钮样式的方法，然后详细介绍了我们的钱包发布在Apache二级目录下的详细过程。
郑重声明：钱包私钥是加密后保存在客户端的，并且密码在用户手中，开发人员并不能获取，这一点代码中也可以看出。
一、自定义按钮样式
这里重点讲一下自定义按钮颜色。在Material UI中，按钮颜色只有primary、secondary和inherit等有限几种。分别对应蓝色、红色和灰色等。但是MetaMask登录界面的橙色按钮很漂亮，那我们也来使用橙色按钮。
定义按钮样式的代码片断：
import orange from '@material-ui/core/colors/orange';
const useStyles = makeStyles(theme => ({
submit: {
fontSize: 18,
width: "40%",
background:orange[700],
margin: theme.spacing(0.5),
marginTop:theme.spacing(2.5),
'&:disabled':{
background:orange[200],
},
'&:hover':{
backgroundColor:orange[700],
},
'&:active':{
backgroundColor:orange[700],
}
},
}));
这里首先导入Material UI的橙色orange，它是一个颜色对象，下标其实就是编号，从50,100,200…900，然后A100,A200、A400和A700。注意以A开头的属性在使用时要加引号，如orange["A100"]。这里给出Material UI 颜色系统的说明文档：https://material-ui.com/zh/customization/color/。大家可以对照选择自己喜欢的颜色。注意样式中那些伪类样式的设置，经过测试hover是一定要设置的，否则点击后就会显示默认的灰色。
应用上述样式的代码片断为：
const classes = useStyles()
......
<Button variant="contained" className={classes.submit}>创建</Button>
让我们看一下效果，这里按钮为disabled的时候：
一个浅色的按钮代表不可点击。我们随意输入两个密码后，创建按钮变得可用，如下图：
可以看到，按钮颜色变深了，并且过度很平滑。
这里介绍了一种自定义UI 组件外观的一种方法，但是这个方法有一个前提：它的css规则里有对应的伪类你才可以使用这样的方式来样式化它。举一个例子，<MenuItem />组件，它的属性有selected和disabled，但是它的css规则中只有selected伪类，而没有disabled。所以你可以用这个方法来改变它在selected时的外观，但是改变不了它在disabled时的外观。
钱包里还有一些其它页面调整，我这里就不再介绍了。
二、打包发布前客户端修改
打包发布对于React或者Vue工程来讲还是很重要的，因为React或者Vue为单页面应用，经常会用到路由，所以有时需要进行一些服务器端设置。笔者使用的是Centos 7.6 + Apache 作为web端服务器，nginx或者其它web服务下的发布希望有兴趣的读者自己研究一下。
2.1 不显示源码
在项目根目录下的.env.local里添加下面一行：
GENERATE_SOURCEMAP=false
2.2 定义基准目录变量
前面给出了钱包链接：https://kaihua.xyz/khwallet/create 。这里可以看出我们的钱包是配置在一个二级目录khwallet下。最后的create是路由，不用管它。所以我们路由的基准目录就是khwallet，在env.local中再添加一行：
REACT_APP_PATH_BASE ='/khwallet'
我们用这个自定义变量用来代表React工程的基准目录，当然也可以直接写在代码里，放在这里是方便修改，不用到处找。记住这个变量是自定义的，只要有REACT_APP_前缀就行。
2.3 代码中设置基准目录
src/index.js中增加如下代码：
//获取路由的基准路径，注意在开发环境和生产环境的区别
export function getPathBase() {
return process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PATH_BASE : ''
}
src/views/Main.jsx中增加:
import { getPathBase } from 'utils'
给Router组件增加basename属性：
<Router basename={getPathBase()}>
2.4 修改homepage
修改工程根目录下的package.json，在dependencies属性上面增加这么一行：
"homepage":".",
它代表该工程可以配置在任意域名的任意目录下。
2.5 修改html文件相关
修改项目根目录下public\index.html，修改标题<title>，同时拷贝你的logo到该目录下并重命名为favicon.ico。修改对应的一行<meta>：
<meta name="viewport" content="width=device-width, initial-scale=1" />
打开该目录下的manifest.json，删除icons属性里和React logo相关的内容，仅保留favicon.ico相关的内容。
2.6 打包发布
打开终端，切换到项目根录下，运行npm run build。然后你可以在项目根目录下的build目录看见打包好的文件。
三、服务器端配置
以下服务器上的操作需要root权限，使用root用户登录或者sudo。
3.1 Apache 安装
一般在国内，不管是阿里云还是腾讯云，如果你买的是ECS的话，apache很有可能已经预装了。如果你用的是虚拟主机，那么php都帮你装好了。如果没装apache，就依次执行：
sudo yum install httpd
sudo systemctl enable httpd
sudo systemctl start httpd
如果你用的是MacBook pro个人电脑，那么apache也是已经预装了，但是配置文件位置和内容略有不同。
3.2 修改Apache配置允许重写
使用vim或者nano打开/etc/httpd/conf/httpd.conf。找到<Directory "/var/www/html">这一栏，将它的AllowOverride改成All。保存退出，运行apachectl configtest，看到结果为Syntax OK后运行apachectl restart。
如果是虚拟主机的话，一般前两步不用设置，已经设置好了，并且用户权限有可能受到限制而无法设置。
3.3 新建二级目录
前面提到过，我们的钱包是发布在一个二级目录khwallet下。在/var/www/html目录下新建khwallet，然后切换到该目录，使用nano或者vim新建.htaccess，内容如下：
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . khwallet/index.html [L]
.htaccess是一个指令文件，里面指令的主要作用是将所有找不到的文件重定向到khwallet/index.html下。详细的内容见 https://baike.baidu.com/item/htaccess。虽然不推荐使用.htaccess，但是为了方便操作，不用每次设置apache的配置并且兼容采用虚拟主机建站的站点，我们还是采用.htaccess。
3.4 上传文件
虽然你也可以使用scp命令来上传文件，但是还是推荐使用专业工具。windows下推荐使用winscp，mac下本可以使用Yummy Ftp，但是它是32位的，系统升级到Catalina后就无法使用了，所以目前可以使用FileZilla。将前面提到的build目录下所有文件都上传到服务器的khwallet目录下，好了，大功告成了。在浏览器里打开你域名下的khwallet目录，就会看到如下画面了：
大家可以看到在chrome开发者工具控制台一栏没有看到任何log，作为一个开发建议，只在开发环境中使用log，在发布前要去掉所有console.log及console.warn之类的日志输出。
四、结束语
从2020年1月22日开始，到今天2月8日为止，一共18天，我们的仿MetaMask网页版钱包终于完成开发并发布了。这期间一共写了十篇文章，一步一步的记录了从零开始的全过程。相比商业化的钱包，我们做出来的东西功能很有限，实现方式也并不高效。但是我们的主要目的是学习前端Materia UI框架，再附加学习一点以太坊相关的知识。温故而知新，这次开发中我不仅学习了很多React和Material UI相关的知识（也包括css，javascript的一些技巧等），也进一步掌握了和以太坊相关的知识。付出总是会有收获的。
本钱包实现的功能有：账号的创建、导入、导出、etherscan上查看、登录；ERC20代币的添加、余额更新、隐藏和转移；ETH余额实时更新和转账；签名交易等。
本钱包未实现的主要功能有：多账号管理、历史记录保存等。
本钱包肯定还存在许多不足或者bug，一方面期待以后有空详细测试优化完善，另一方面希望读者能够指正或者提出改进意见。
本钱包在gitee上仓库地址：https://gitee.com/TianCaoJiangLin/khwallet，是一个公开的仓库，任何人都可以下载。
本钱包线上发布的地址：https://kaihua.xyz/khwallet/
打赏作者:
0x2267E877215fC21514BF507F30f553AF2342b6c2
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
