The Burner Wallet 2.0 is a modular, extendable and cusomizable 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()]}
/>
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!
By default, basic-wallet
uses the InfuraGateway for connecting to commonly used Etherum 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 follwing value:
REACT_APP_INFURA_KEY=<your infura key>
You can generate an Infura key at https://infura.io/
You can add any ERC20 token to your wallet by constructing a new ERC20Asset and adding it to the asset list.
The id
paramater is the internal ID used by the wallet, while the name
paramater 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],
});
Are you a developer, hoping to test changes to other modules in this project (burner-ui, exchange or plugins)?
The local-wallet
diretory 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.
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}
/>
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.
The burner wallet functionality can be extended by passing plugin objects to the BurnerUI component.
The following plugins are part of the @burner-wallet/plugins
package, and can be considered "offically supported"
There are also a number of other plugins that have been developed, which may be useful for reference:
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 handledonSent: (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.Pages (added with pluginContext.addPage
) and elements (added with pluginContext.addElement
) will
receive the following props:
assets
: an array of Asset objectsdefaultAccount
: the primary account used by the wallet. Equivelant 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 paramater
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 propburnerComponents.AccountKeys
: Provides information about signing keys through a render propburnerComponents.AmountInput
: Component to input values of various assets (xDai, ETH)burnerComponents.AssetSelector
: A drop down for selecting an assetburnerComponents.Assets
: Provides an array of assets through a render propburnerComponents.Button
: A simple, styled button to click onburnerComponents.Page
: Container for a visual page componentburnerComponents.QRCode
: Renders a QR codeburnerComponents.TransactionDetails
: Provides details about a transaction through a render prop