Awesome Open Source
Awesome Open Source


Ethereum wallet with ERC20 support - A web wallet

eth-hot-wallet ethereum wallet preview

Technical review article: How to build an Ethereum Wallet web app (Medium)

Created by Paul Laux, @dr_laux for announcements

Core components

API Providers


  • [x] Encryption keys generated from seed and stored in the browser.
  • [x] Network selector including local and remote rpc
  • [x] Eth balance auto converted to btc/usd/euro.
  • [x] Responsive design for mobile support.

ERC20 wallet and native token support

Eth-hot-wallet supports erc20 tokens. From the user side, the tokens will have the same look and feel like Ether. To interact with contracts, we use


Like all other network communication in the wallet, calls to erc20 contracts are done inside app/containers/Header/saga.js. ERC20 Abi can be imported using

import { erc20Abi } from 'utils/contracts/abi';


  • [x] ERC20 native token support
  • [x] Local storage
  • [ ] Tests
  • [ ] Event log
  • [ ] CI for development and production
  • [ ] External security audit
  • [ ] Upgrade to react 16
  • [ ] Upgrade Enzyme 3


4 Major containers were created:

  • Homepage container - all the actions related to keystore, including manipulation and usage.

  • Header container - all the activities related to network communication / web3 API.

  • SendTo container - state and actions related to sendTo modal, actual checks and sending is happening in header container.

eth-hot-wallet send token preview

  • TokenChooser container - allows the user to select which erc20 token will be used from a pre-defined list. The list of supported tokens can be found in app/containers/TokenChooser/token-lists.js. Each network requires a different list.

eth-hot-wallet erc20 token chooser preview

npm scripts for eth-hot wallet:

npm run build:dll to build webpack DLL required for development.

npm run start to start development mode. Go to http://localhost:3001 - changes will be reflected in realtime using hot module reloading.

npm run build to create bundle for publishing

npm run generate to create new components / containers using the generator.

For more documentation regarding the react setup see react-boiledplate docs here or in the official repo.

After build, webpack monitor will generate stats about bundle size:

eth-hot-wallet webpack-monitor


This project is licensed under the MIT license, Copyright (c) 2017 Paul Laux For more information see

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,403
react (5,466
ethereum (747
antd (135
redux-saga (105
web3 (80
erc20 (53
webpack3 (49
eth (37
react-boilerplate (25