博客
关于我
边学边用--使用React下的Material UI框架开发一个简单的仿MetaMask的网页版以太坊钱包(一)
阅读量:854 次
发布时间:2019-03-25

本文共 4363 字,大约阅读时间需要 14 分钟。

开发一个简单的以太坊钱包:仿MasterMask的网页版钱包

随着区块链技术的快速发展,以太坊的推广和应用越来越受到重视。近年来,国家和各地政府都在积极推动区块链技术的发展,央行数字货币的研发也在逐步推进。以太坊作为区块链技术的升级版,其应用场景无处不在。然而,现有的以太坊钱包大多需要依赖浏览器插件,比如MetaMask,使用时又需翻墙下载,使用体验较差。作为一个学习Material UI的开发者,本文旨在开发一个简单易用的以太坊钱包。

1. 功能设计

我们的目标是开发一个功能基础但实用性强的以太坊钱包,满足以下需求:

  • 私钥加密管理:私钥加密存储,本地解密使用密码
  • 支持多网络:主网、测试网(如Ropsten、Rinkeby、Kovan)
  • 用户管理:新建账号、导入钱包
  • 基本交易功能:ERC20代币转账、ETH转账、签名交易
  • 界面友好:适配电脑和手机端

本文将重点介绍用户新建钱包时的界面设计与实现过程。

2. 技术实现

开发过程选用React框架与Material UI组件,确保界面简洁且易用。以下是主要技术要点:

2.1 消息条优化

为了提升用户体验,我们自定义消息条显示,将enqueueSnackbar封装为SimpleSnackbar,并新增Provider供跨组件调用。代码如下:

import React, { createContext, useContext } from 'react'import { useSnackbar } from 'notistack'const SnackbarContext = createContext()export function useSimpleSnackbar() {    return useContext(SnackbarContext)}const VARIANTS = ['default', 'success', 'error', 'warning', 'info']export default function Provider({ children }) {    const { enqueueSnackbar } = useSnackbar()    const showSnackbar = (message, variant = 'default', closeNotification) => {        // 判断是否为有效的variant        const finalVariant = VARIANTS.includes(variant)             ? variant             : 'default'                enqueueSnackbar(message, {            variant: finalVariant,            onClose: closeNotification        })    }    return (        
{children}
)}

2.2 网络选择

在钱包选择网络时,需支持多种网络环境,我们开发了一个网络上下文管理器:

import React, { useState, createContext, useMemo } from 'react'const NetworkContext = createContext()export default function NetworkProvider({ children }) {    const [network, setNetwork] = useState('homestead')        const value = useMemo(() => ({        network,        updateNetwork: setNetwork    }), [network])        return (        
{children}
)}export function useUpdateNetwork() { const [, setNetwork] = useNetworkContext() return setNetwork}export function useNetwork() { const [network] = useNetworkContext() return network}

2.3 界面设计

新建钱包界面遵循扁平化设计理念,主要分为Logo和网络选择模块,以及密码设置模块。

2.3.1 Logo展示

为提升品牌识别度,我们开发了Logo组件,支持布局自适应:

import React from 'react'import Typography from '@material-ui/core/Typography'import { makeStyles } from '@material-ui/core/styles'import WalletIcon from './components/Logo'const useStyles = makeStyles((theme) => ({    icon: {        width: 50,        height: 50    },    grow: {        marginTop: theme.spacing(-0.5),        fontSize: 15    }}))export default function Logo() {    const classes = useStyles()    return (        
KHWallet
KHWallet
)}

2.3.2 网络选择按钮

通过Material UI菜单组件实现,支持多种网络切换。

import React, { useState, useEffect } from 'react'import { makeStyles, withStyles } from '@material-ui/core/styles'import MenuItem from '@material-ui/core/MenuItem'import CloseIcon from '@material-ui/icons/Close'import { purple, green } from '@material-ui/core/colors'const useStyles = makeStyles((theme) => ({    root: {        display: 'flex'    },    btnIcon: {        fontSize: 15,        height: 40,        fontWeight: 'solid',        border: '1px solid black',        borderRadius: 25    },    btnContext: {        marginTop: theme.spacing(-0.7)    },    btnText: {        position: 'relative',        top: theme.spacing(-1)    }}))

2.3.3 密码设置

使用Material UI的Form组件进行密码管理,支持12位及以上密码:

import React, { useState } from 'react'import { makeStyles } from '@material-ui/core/styles'import TextField from '@material-ui/core/TextField'import Typography from '@material-ui/core/Typography'const useStyles = makeStyles((theme) => ({    form: {        width: '100%',        marginTop: theme.spacing(1),        textAlign: 'center'    },    submit: {        fontSize: 20,        width: '50%',        marginTop: theme.spacing(5)    }}))

3. 页面布局

将各模块组合成一个统一的钱包页面,使用React的Grid布局:

import { Grid } from '@material-ui/core'import WalletBar from './components/WalletBar'import CreateWallet from './CreateWallet'import Paper from '@material-ui/core/Paper'const useStyles = makeStyles((theme) => ({    root: {        marginTop: theme.spacing(isMobile ? 8 : 10),        display: 'flex',        justifyContent: 'center'    }}))

4. 上线与优化

完成开发后,对代码进行最终优化和部署:

4.1 代码优化

去除冗余代码,优化UI组件,提升运行效率。

4.2 部署环境

将项目部署至CodeSrium云端,作为开发调试基础。

4.3 首次运行

检查运行时依赖,安装必要的第三方库,确保钱包界面呈现预期效果。

5. 总结

开发本以太坊钱包项目遵循"开发者优先"原则,注重易用性和简洁性。虽然功能还处于基础阶段,但从设计到实现的每一步都体现了对Material UI的熟练掌握。未来计划完善交易历史和多用户支持等功能。

转载地址:http://mtpyk.baihongyu.com/

你可能感兴趣的文章
MySQL 字符串截取函数,字段截取,字符串截取
查看>>
MySQL 存储引擎
查看>>
mysql 存储过程 注入_mysql 视图 事务 存储过程 SQL注入
查看>>
MySQL 存储过程参数:in、out、inout
查看>>
mysql 存储过程每隔一段时间执行一次
查看>>
mysql 存在update不存在insert
查看>>
Mysql 学习总结(86)—— Mysql 的 JSON 数据类型正确使用姿势
查看>>
Mysql 学习总结(87)—— Mysql 执行计划(Explain)再总结
查看>>
Mysql 学习总结(88)—— Mysql 官方为什么不推荐用雪花 id 和 uuid 做 MySQL 主键
查看>>
Mysql 学习总结(89)—— Mysql 库表容量统计
查看>>
mysql 实现主从复制/主从同步
查看>>
mysql 审核_审核MySQL数据库上的登录
查看>>
mysql 导入 sql 文件时 ERROR 1046 (3D000) no database selected 错误的解决
查看>>
mysql 导入导出大文件
查看>>
MySQL 导出数据
查看>>
mysql 将null转代为0
查看>>
mysql 常用
查看>>
MySQL 常用列类型
查看>>
mysql 常用命令
查看>>
Mysql 常见ALTER TABLE操作
查看>>