Skip to content
A modular, extendable Burner Wallet
TypeScript HTML JavaScript CSS Shell
Branch: burner-2
Clone or download
Latest commit 38e2008 Oct 4, 2019

README.md

Burner Wallet 2.0

The Burner Wallet 2.0 is a modular, extendable and customizable web application for seamless crypto payments.

Create a burner wallet in just a few lines of code:

const core = new BurnerCore({
  signers: [new InjectedSigner(), new LocalSigner()],
  gateways: [new InfuraGateway(process.env.REACT_APP_INFURA_KEY), new XDaiGateway()],
  assets: [xdai, dai, eth],
});

const exchange = new Exchange({ pairs: [xdaiBridge, uniswapDai] });

const BurnerWallet = () =>
  <BurnerUI
    core={core}
    plugins={[exchange, new LinkPlugin()]}
  />

Running the wallet

Simple, customized wallet

Do you want to customize your own version of the wallet? Check out the simple application in the basic-wallet directory.

Alternatively, visit https://burnerfactory.com to create your own wallet without writing any code!

Setting Infura key

By default, basic-wallet uses the InfuraGateway for connecting to commonly used Ethereum chains.

The entry point takes an Infura key from the REACT_APP_INFURA_KEY environment variable. For your wallet to function correctly, you must create a file named .env in the basic-wallet folder with the following value:

REACT_APP_INFURA_KEY=<your infura key>

You can generate an Infura key at https://infura.io/

Add a custom token

You can add any ERC20 token to your wallet by constructing a new ERC20Asset and adding it to the asset list.

The id parameter is the internal ID used by the wallet, while the name parameter is the display name that will be displayed to the user. network is the chain ID of the chain the token is deployed to ('1' for mainnet, '100' xDai, etc). address is the address where the token contract is deployed.

import { xdai, dai, eth, ERC20Asset } from '@burner-wallet/assets';

const bos = new ERC20Asset({
  id: 'bos',
  name: 'Boston Token',
  network: '100',
  address: '0x52ad726d80dbb4A9D4430d03657467B99843406b',
});

const core = new BurnerCore({
  assets: [bos, xdai, dai, eth],
});

Developer wallet

Are you a developer, hoping to test changes to other modules in this project (burner-ui, exchange or plugins)?

The local-wallet directory has a wallet that will connect to a local Ganache instance and transfer 10 Ganache ETH to your wallet.

To start this wallet, cd into the local-wallet directory, run yarn install-all to install dependencies, then run yarn start.

Note that Metamask will override the local account, disable it or open in incognito mode for local development.

Alternatively, the code in the wallet directory will let you develop locally, while connecting to Mainnet and xDai.

Customization

The wallet can be visually customized by passing theme and title props to the BurnerUI component.

const theme = {
  background: '#282325',
  titleFont: '"workSans", sans-serif',
  paperBackground: '#282325',
  accentColor: '#E84441',
  homeButtonColor: '#BBBBBB',
};

const BurnerWallet = () =>
  <BurnerUI
    title="daedalus industries"
    theme={theme}
    core={core}
  />

Packages

This is a monorepo that contains the following packages:

  • @burner-wallet/ui: The basic UI structure for any Burner Wallet
  • @burner-wallet/exchange: An extendable plugin for implementing asset exchanges and bridges
  • @burner-wallet/plugins: Collection of standard Burner Wallet plugins (see below)

The Burner Wallet 2 is dependent on the burner-core packages (@burner-wallet/core and @burner-wallet/assets) for handling core blockchain functionality.

Plugin Development

The burner wallet functionality can be extended by passing plugin objects to the BurnerUI component.

Sample Plugins

The following plugins are part of the @burner-wallet/plugins package, and can be considered "officially supported"

  • Exchange: For exchanging or bridging different assets. Note that the exchange itself is also extendable by adding new exchange pairs.
  • LegacyPlugin: Supports URLs and QR codes from Austin's original burner code
  • LinkPlugin: Allows generating links, which can be opened to claim tokens

There are also a number of other plugins that have been developed, which may be useful for reference:

  • VendorPlugin: Use the burner wallet for ordering off a pre-set menu
  • HelenaPlugin: Support for Helena prediction markets
  • ScorpioPlugin: For connecting wallets with social media accounts
  • DaedalusIndustriesPlugin: Created for the escape room at ETHBerlin 2019, this plugin facilitates staking an asset in a contract, collecting private keys as "clues", and submitting signed messages to the game contract.

Plugin Context

When the wallet is loaded, the wallet will call the initializePlugin(pluginContext) function for each plugin. The plugin has access to the following methods of pluginContext object:

  • addElement: (position: string, Component: PluginElement) => void: Add a React component to a defined position in the app. The following positions are supported: "home-top", "home-middle" and "home-bottom".
  • addHomeButton: (title: string, path: string) => void: Adds a button to the home screen that will link to the provided path.
  • addPage: (path: string, Component: PluginPage) => void: Add a React component to the router at the provided path.
  • getAssets: () => Asset[]: Returns all assets.
  • getWeb3: (network: string, options?: any) => void: Returns a Web3 object for the provided network ID (ex: '1' for mainnet, '100' for xDai).
  • onAccountSearch: (callback: (query: string) => Promise<Account[]>) => void: Provide a function to be called when the user types into an account input field. Used to suggest accounts to the user.
  • onQRScanned: (callback: (qr: string, { actions }) => bool) => void: Provide a function to be called when the user scans a QR code on the home page. The function is passed the text of the QR code and the "actions" object (see below). The function must return true if is taking an action based on the QR code. Note: URLs on the wallet's current domain are automatically handled
  • onSent: (callback: (txData) => string | null) => void: Provide a function to be called when the user sends an asset through the normal send mechanism. Callback will receive an object with the asset, sender and recipient address, amount, message, web3 receipt, transaction hash and an id if specified in the send function. If the function returns a string, the wallet will redirect to that address.

Burner Plugin Props

Pages (added with pluginContext.addPage) and elements (added with pluginContext.addElement) will receive the following props:

  • assets: an array of Asset objects
  • defaultAccount: the primary account used by the wallet. Equivalent to accounts[0].
  • accounts: an array of ethereum addresses that are available to use.
  • actions: an object containing a number of functions that plugins may call:
    • actions.scanQrCode(): Opens a full-screen QR code scanner. Returns a promise, which is resolved to the scanned value or rejected if the user cancels the scan.
    • actions.send({ to, from?, asset, ether, id? }): Call to send an asset. Will redirect the user to a send confirmation page. If from is not set, it will default to the primary account. The optional id parameter is used to identify transactions in the onSent callback.
    • actions.navigateTo(path, [state]): Navigates the app to a new URL.
    • actions.callSigner(action, ...props): call functions in the signer objects. Used for burning accounts or setting new private keys.
    • actions.canCallSigner(action, ...props): check if a function is available to call.
  • burnerComponents: an object containing a number of useful React components
    • burnerComponents.AccountBalance: Provides the balance of an account through a render prop
    • burnerComponents.AccountKeys: Provides information about signing keys through a render prop
    • burnerComponents.AmountInput: Component to input values of various assets (xDai, ETH)
    • burnerComponents.AssetSelector: A drop down for selecting an asset
    • burnerComponents.Assets: Provides an array of assets through a render prop
    • burnerComponents.Button: A simple, styled button to click on
    • burnerComponents.Page: Container for a visual page component
    • burnerComponents.QRCode: Renders a QR code
    • burnerComponents.TransactionDetails: Provides details about a transaction through a render prop
You can’t perform that action at this time.