Build your own customized Burner Wallet (without the Burner Factory)

David Mihal
4 min readJan 8, 2020

The Burner Wallet has been an important tool for onboarding users that are new to cryptocurrencies and blockchains. This guide will explain how to use the Burner Wallet 2 libraries to easily build your own custom wallet.

Note: the easiest way to create a burner wallet is using burnerfactory.com. However, creating a wallet using code allows further customization.

Starter project

The burner-wallet/sample-wallet repository contains the boilerplate code needed to get a burner wallet running. If you choose to start with this codebase, you can skip to step 4 in this guide

git clone https://github.com/burner-wallet/sample-wallet.git
cd sample-wallet
yarn install

1. Create new React project

Create a new React project using Create React App:

npx create-react-app my-burner-wallet --typescript
cd my-burner-wallet

Note: we’re using Typescript, since the Burner Wallet 2 project fully supports Typescript. However, you can stick with Javascript if you prefer, just leave out the--typescript flag.

2. Install packages

Install the main Burner Wallet packages using Yarn or NPM:

yarn add @burner-wallet/core @burner-wallet/assets @burner-wallet/modern-ui @burner-wallet/exchange

3. Create entry point file

Edit the src/index.ts and add the following content:

Feel free to change the “title” property.

Note: if you would like to use Javascript instead of Typescript, simply rename index.tsx to index.js. The code for this file is the same.

4: Add your Infura key

🔹 If you started with the sample-wallet repo, skip here! 🔹

Notice that we included process.env.REACT_APP_INFURA_KEY in the constructor for the InfuraGateway. We’ll need to add an Infura key in order to use Infura to connect with mainnet & testnets.

Go to infura.io, log in and create a new project. Then, copy the “Project ID” value.

Then, in the root directory of your project, create a file named .env. Add the following to that file, using the key that you’ve copied from the Infur a website:

REACT_APP_INFURA_KEY=<your key from infura.io>

5: Select assets

Next, we can select which assets we would like the user to be able to send & receive.

Pre-configured assets

The @burner-wallet/assets package includes some pre-configured assets: ETH, Dai, xDai and Sai, as well as Kovan ETH and Kovan Dai. These can be easily added to a wallet as follows:

Custom assets

Additionally, you can also easily add any other Ethereum-based token. Use the ERC20Asset, ERC777Asset & NativeAsset classes to configure these assets.

When creating assets, set the following attributes:

  • id: the internal ID used to identify the asset in the code
  • name: the display name for the asset
  • network: the chain ID for the asset ('1' for mainnet, '42' for Kovan, '100' for xDai, etc)
  • address (only for ERC20/ERC777): the contract address for the token
  • icon (optional): URL for an icon image to display
  • usdPrice (optional): If included, the total value will be displayed instead of the number of tokens. Typically used to set stablecoins to a price of $1.
  • priceSymbol (optional): If included, the USD price will be queried from cryptocompare.com

6: Add plugins

A large library of Burner Wallet plugins are available to extend

Standard plugins

There’s a number of simple plugins that provide basic functionality, such as the ENS plugin, ERC 681 plugin, and Recent Accounts plugin. The Metamask Plugin also allows Burner Wallets to work with Metamask and other Web3 browsers. It is recommended that all wallets include these plugins.

To add them, first install the NPM packages:

yarn add @burner-wallet/ens-plugin @burner-wallet/erc681-plugin @burner-wallet/recent-accounts-plugin @burner-wallet/metamask-plugin

Then import the packages and add them to the plugins list:

Exchange plugin

The Exchange plugin enables users to convert between various assets. A list of “pairs” are passed to the Exchange plugin, which defines how assets are transferred.

The Uniswap pair can allow the exchange of any asset that is supported by Uniswap. Also, the xDai bridge pair to allow users convert their Dai to xDai, and vice versa.

“App” plugins

There are also some more powerful plugins available:

With the Linkdrop plugin, users can claim tokens using Linkdrop links.

The Carbon plugin adds the Carbon fiat on-ramp directly to the wallet. Users from supported countries will be able to purchase assets like Eth, Dai & xDai using their credit card and receive the funds right in their burner wallet!

You can add these plugins by installing their packages:

yarn add @linkdrop/burner-plugin @burner-wallet/carbon-plugin

…and then adding them to the plugin list:

Note that Carbon requires an API key, which we will have to add to the .env (the same way we added the Infura key).

Additional plugins, such as a menu for ordering food & drinks, are available through the Burner Factory.

Build your own plugin

If you want to extend the Burner Wallet functionality even further, you can build your own plugin.

A guide will be released in the upcoming weeks describing how to build a plugin. However you can currently look over the documentation for the Burner Wallet Plugin API.

7: Build & deploy

To test your wallet, you can run yarn start or npx react-scripts start, which will start a development server on localhost:3000.

To build a production version of your app, run yarn build or npx react-scripts build. This will compile your application into the “build” directory. You can then publish those files on any web server.

That's it! You’ve made your own Burner Wallet!

--

--