Introducing the Burner Wallet 2

A set of building blocks for making fast, lightweight crypto experiences.

In February 2019, hundreds of Ethereans descended on Denver, Colorado for the ETHDenver hackathon. This event introduced the community to Austin Griffith’s Burner Wallet: a lightweight web-based wallet that attendees could use to buy tacos and beers. This experiment in micro-economies was so successful, that the phrase “burner wallet” grew from more than a single application, into a general design pattern for building blockchain applications.

Since February, many projects have popped up using some sort of burner wallet. At this past Berlin Blockchain week I counted 4 different exhibits using some type of burner wallet, and 2 of the winning teams at ETHBerlin incorporated burner wallets as well.

However, all burner wallets so far have either completely forked Austin’s original codebase, or started a new project from scratch. It was clear to me that a set of shared libraries and components for building a burner wallets could significantly lower the barrier for anybody trying to build their own project.

Just as the Ethereum community has rallied around the “money legos” that make up a composable finance system, I’m hoping that these “wallet legos” will help facilitate many more experiments in the area of decentralized applications.

The following components make up the “Burner Wallet 2” project. These components have powered the popular Burner Factory, as well as events at ETHBerlin, and ETHBoston.

Burner Core

The Burner Wallet 2.0 is built upon the foundation of the Burner Core project: a set of interface-agnostic libraries for handling the blockchain communication.

Since Burner Wallets have always supported multiple chains as well as multiple methods of signing transactions, these behaviors have all been broken out into individual components. Developers can import the Infura, Rivet and xDai gateways to access various chains, and InjectedSigner and LocalSigner provide access to different methods of signing transactions. These modules are all available in the @burner-wallet/core package.

Another package, @burner-wallet/assets contains a set of components for accessing various crypto-assets with a uniform API. Objects for ETH, Dai and xDai are pre-defined by the package, while other assets can be created using the NativeAsset, ERC20Asset and ERC777Asset classes.

const mkr = new ERC20Asset({
  id: 'mkr',
  name: 'Maker',
  network: '1',
  address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2',
};
const core = new BurnerCore({
  signers: [new InjectedSigner(), new LocalSigner()],
  gateways: [
    new InjectedGateway(),
    new InfuraGateway(process.env.REACT_APP_INFURA_KEY),
    new XDaiGateway(),
  ],
  assets: [xdai, dai, eth, mkr],
});

Burner UI

The heart of the project is the BurnerUI React component, which ties all pieces of the project together. This component contains the basic wallet interface, with functionality for sending and receiving assets. Internally, this component handles routing, querying balances, QR scanning, and plugin integration.

Theming

Basic visual customization can be achieved by passing a theme object to the BurnerUI component.

const theme = {
  background: '#282325',
  titleFont: '"workSans", sans-serif',
  paperBackground: '#282325',
  accentColor: '#E84441',
  homeButtonColor: '#BBBBBB',
};
const BurnerWallet = () =>
  <BurnerUI core={core} theme={theme} />

This functionality will be expanded in the future.

The escape room at ETHBerlin featured a Burner Wallet with a dark theme

Plugins

The BurnerUI component only only provides the core functionality and UI components, all other functionality can be added using

The @burner-ui/plugins package contains the basic, “officially supported” plugins, such as the Link Plugin for sending xDai with a URL, or the Legacy Plugin, which provides support for URLs generated with the original xdai.io Burner Wallet.

The plugin system allows any developer with basic knowledge of React to easily extend and customize the wallet. Plugins can create new pages, add buttons and React components to the home page, handle special QR codes, and more.

Plugins have already been built for selling beer, running prediction markets and integration with the Ching POS system. Look out for more information and tutorials about developing plugins soon 😀.

A user orders a beer with the Vendor Plugin at ETHBoston

Exchange

While the Exchange module (@burner-wallet/exchange) is really just another plugin, it provides an important functionality for the wallet: the ability to convert between different assets.

The package provides 2 exchange pairs by default: xdaiBridge for moving Dai across the POA Bridge to the xDai chain, and uniswapDai for exchanging ETH and Dai on Uniswap. A generic Uniswap bridge class is also available, that can easily exchange any

const mkr = new ERC20Asset({
  id: 'mkr',
  name: 'Maker',
  network: '1',
  address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2',
});
const core = new BurnerCore({ assets: [xdai, dai, eth, mkr] });
const exchange = new Exchange({
  pairs: [xdaiBridge, uniswapDai, new Uniswap('mkr')],
});
const BurnerWallet = () =>
  <BurnerUI core={core} plugins={[exchange]} />

I’m excited to be bring this project to the community and see what people build with it! Check out the Burner Wallet 2 repo on Github for more documentation and information about building your own wallet. And look out for the Burner Wallet 2 being used at DevCon and ETHWaterloo!