In the last development, the main functions of our wallet have been developed. However, there is still work to be done after the development is completed to the deployment of the online application: such as code optimization, testing, packaging and publishing. Due to time constraints, code optimization and testing have not been processed, and they have been packaged and released directly. Readers are reminded here that there may be errors, clerical errors or imperfections in the code.
This simple MetaMask web version of the Ethereum wallet has been published on the Internet. You can visit: https://kaihua.xyz/khwallet/create to experience it. The webpage will be a little slow to open, it seems faster to use safari browser, chrome browser recommends using mobile mode. The wallet was originally developed using the mobile phone mode preview and no corresponding adaptation adjustments were made on the desktop.
This development is mainly about the wallet package release, but also some minor adjustments on the interface. This article first introduces a method for customizing button styles, and then details the detailed process of publishing our wallet in the Apache secondary directory.
Solemnly declare: The wallet private key is encrypted and stored on the client, and the password is in the hands of the user, and the developer cannot obtain it. This can also be seen in the code.
One, custom button style
Here we will focus on customizing button colors. In Material UI, there are only a limited number of button colors primary, such as , secondaryand inherit. Corresponding to blue, red, and gray respectively. But the orange button on the MetaMask login interface is very beautiful, so let's also use the orange button.
The code snippet defining the button style:
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],
}
},
}));
Here first import the orange of Material UI orange. It is a color object. The subscript is actually the number, from 50, 100, 200...900, then A100, A200, A400 and A700. Note that the attributes beginning with A must be quoted when used, such as orange["A100"]. Here is the documentation for the Material UI color system: https://material-ui.com/zh/customization/color/ . You can choose the color you like. Pay attention to the settings of the pseudo-style styles in the styles, which hovermust be set after testing , otherwise the default gray will be displayed after clicking.
The code snippet applying the above style is:
const classes = useStyles()
......
<Button variant="contained" className={
classes.submit}>创建</Button>
Let's take a look at the effect, where the button is disabled:
a light-colored button means that it is not clickable. After we enter two passwords at will, the creation button becomes available, as shown in the figure below:
You can see that the button color has become darker and the transition is very smooth.
Here is a way to customize the appearance of UI components, but this method has a premise: it has a corresponding pseudo-class in its css rules, and you can style it in this way. For example, a <MenuItem />component has a selectedsum in its properties disabled, but there are only selectedpseudo-classes in its css rules , but not disabled. So you can use this method to change its selectedappearance in time, but you cannot change its disabledappearance in time.
There are some other page adjustments in the wallet, I won't introduce them here.
2. Client modification before package release
Package release is still very important for React or Vue projects, because React or Vue is a single-page application, routing is often used, so some server-side settings are sometimes required. The author uses Centos 7.6 + Apache as the web-side server, and publishes under nginx or other web services. I hope interested readers can study it by themselves.
2.1 Do not display source code
.env.localAdd the following line in the project root directory :
GENERATE_SOURCEMAP=false
2.2 Define benchmark directory variables
The wallet link is given earlier: https://kaihua.xyz/khwallet/create . It can be seen here that our wallet is configured in a secondary directory khwallet. The last thing createis routing, don't care about it. So the base directory of our routing is khwallet, env.localadd another line in it:
REACT_APP_PATH_BASE ='/khwallet'
We use this custom variable to represent the reference directory of the React project. Of course, it can also be written directly in the code. It is convenient to modify it here, so you don't need to look around. Remember that this variable is custom, as long as it has a REACT_APP_prefix.
2.3 Set the benchmark directory in the code
src/index.jsAdd the following code:
//获取路由的基准路径，注意在开发环境和生产环境的区别
export function getPathBase() {
return process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PATH_BASE : ''
}
src/views/Main.jsxIncrease in:
import {
getPathBase } from 'utils'
RouterAdd basenameattributes to the component :
<Router basename={
getPathBase()}>
2.4 Modificationhomepage
Under the modified project root package.jsonin the dependenciesproperty increases above this line:
"homepage":".",
It means that the project can be configured in any directory of any domain name.
2.5 Modify html file related
Modify the project root directory public\index.html, modify the title <title>, and copy your logo to this directory and rename it to favicon.ico. Modify the corresponding line <meta>:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Open this directory manifest.json, delete iconsthe content related to the React logo in the properties, and only keep the favicon.icorelated content.
2.6 Package release
Open the terminal, switch to the project root record, and run npm run build. Then you can buildsee the packaged files in the directory under the project root directory .
Three, server-side configuration
The following operations on the server require rootpermissions, use root user login or sudo.
3.1 Apache installation
Generally in China, whether it is Alibaba Cloud or Tencent Cloud, if you buy ECS, Apache is probably pre-installed. If you are using a virtual host, then php will install it for you. If apache is not installed, execute in order:
sudo yum install httpd
sudo systemctl enable httpd
sudo systemctl start httpd
If you are using a MacBook Pro personal computer, then Apache is also pre-installed, but the configuration file location and content are slightly different.
3.2 Modify Apache configuration to allow rewriting
Use vimor nanoopen /etc/httpd/conf/httpd.conf. Find <Directory "/var/www/html">this column and change it AllowOverrideto All. Save and exit, run apachectl configtest, see the results as a Syntax OKrunning back apachectl restart.
If it is a virtual host, generally the first two steps do not need to be set up, it has been set up, and the user permissions may be restricted and cannot be set.
3.3 Create a new secondary directory
As mentioned earlier, our wallet is published in a secondary directory khwallet. /var/www/htmlCreate a new directory in the directory khwallet, then switch to the directory, use nano or vim to create a new one .htaccess, the content is as follows:
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{
REQUEST_FILENAME} !-f
RewriteCond %{
REQUEST_FILENAME} !-d
RewriteCond %{
REQUEST_FILENAME} !-l
RewriteRule . khwallet/index.html [L]
.htaccessIt is a command file. The main function of the command is to redirect all files that cannot be found to the khwallet/index.htmlnext. See https://baike.baidu.com/item/htaccess for details . Although it is not recommended .htaccess, but for the convenience of operation, we do not need to set the apache configuration every time and are compatible with sites built with virtual hosts .htaccess.
3.4 Upload files
Although you can also use scpcommands to upload files, professional tools are recommended. Winscp is recommended under windows. Yummy Ftp can be used under mac, but it is 32-bit. After the system is upgraded to Catalina, it cannot be used, so FileZilla can be used currently. buildUpload all the files in the aforementioned directory to the server's khwalletdirectory, and you're done. Open the khwalletdirectory under your domain name in the browser, and you will see the following screen:
You can see that you don't see any log in the chrome developer tool console column. As a development suggestion, only use the log in the development environment, console.logand remove all and console.warnother log output before publishing .
Fourth, the conclusion
Starting on January 22, 2020, and ending today on February 8th, a total of 18 days, our imitation MetaMask web wallet has finally been developed and released. During this period, I wrote ten articles, recording the whole process from scratch step by step. Compared with commercial wallets, the functions we make are very limited and the implementation method is not efficient. But our main purpose is to learn the front-end Materia UI framework, plus learn a bit of Ethereum-related knowledge. In this development, I not only learned a lot of knowledge related to React and Material UI (including some skills of css, javascript, etc.), but also further mastered knowledge related to Ethereum. There will always be rewards for giving.
The functions implemented by this wallet include: account creation, import, export, view and login on etherscan; addition, balance update, hiding and transfer of ERC20 tokens; real-time update and transfer of ETH balance; signature transactions, etc.
The main functions not implemented by this wallet include: multi-account management, historical record preservation, etc.
There are definitely many shortcomings or bugs in this wallet. On the one hand, I look forward to detailed testing and optimization in the future. On the other hand, I hope readers can correct or suggest improvements.
The warehouse address of this wallet on gitee: https://gitee.com/TianCaoJiangLin/khwallet , is a public warehouse, anyone can download it.
The online publishing address of this wallet: https://kaihua.xyz/khwallet/
A reward Author:
0x2267E877215fC21514BF507F30f553AF2342b6c2