Burner Modules

Third party smart contract interactions in the 🔥wallet

Published in

Gitcoin

4 min readApr 18, 2019

Imagine opening up a quick web wallet to buy your coffee with a single click and no fees. As you sit down an encrypted message comes in, it’s an invitation to play a blockchain word game from your mom. When did she get a Burner wallet? With buttery smooth UX, you move a few stable tokens out of your Safe to place a bet on the game, you’re pretty confident. While waiting for your opponent to make her first move, you quickly thumb through a couple prediction markets and in five seconds you purchase a position.

We want to build the 🔥wallet into a platform for onboarding, but we need your help! Easily expand the functionality of the wallet with a simple React component that is already supplied with all the web3 stuff you need.

If you’re not a developer but would like to help, we have a Gitcoin Grant that is matching donations that we use to pay bounties and other developers.

To start, you’ll need to have ganache up and running:

ganache-cli

In a new terminal, clone repo:

git clone https://github.com/austintgriffith/burner-wallet.git

Initialize the repo:

cd burner-wallet
npx clevis@0.1.4 init

(You’ll need to hit enter a few times to specify some config directories.)

Install dependencies:

npm i

Link Clevis:

alias clevis='./node_modules/clevis/bin.js'

Compile, deploy, test, and inject your contracts into the frontend:

clevis test full

In a new terminal, start the React app:

npm start

At this point you should have the Burner wallet running locally. If not, see troubleshooting section.

There is a git branch that contains a template for building your own module:

git checkout yourmodule

Yes, there is a branch called “yourmodule”. 😅 This is a template for building modules in the Burner wallet that tries to pass in everything you need as props and abstract away some of complication.

Now you will see a gross scaffolding component ready to be edited:

This module component template is located at src/components/YourModule.js

You can count on this component supplying you with a bunch of web3 objects to make your life easier:

Of course you have the web3 object and the privateKey so you can do ton with that, but there are also a bunch of other helpers and injected data.

The first thing you will want to do is load in your contracts using the contractLoader()function:

YourContract: this.props.contractLoader("YourContract")

Once your contract is loaded into the state, now you can perform transactions on it from the frontend:

tx()

The tx() function is a nice abstraction for making transactions.

this.props.tx(this.state.YourContract.updateVar(name),120000,0,0,(result)=>{
  console.log(result)
})

Notice that to make a transaction on a contract you just pass the contract call with arguments into the tx function. The extra numbers there are things like gas, message value, etc.

send()

The send() function is an easy way to send funds to another address.

this.props.send(toAddress, amount, 120000,"0x00", (result) => {
  console.log(result)
})

Events

Dapparatus provides an Events object to follow specific events of a contract and trigger an onUpdate() function when new events happen. In the template module, we are listening for the user to sign a message and put it on chain.

Deployment

If your contract is already deployed you can enter the address and abi in the src/contracts/ folder. But, you can also empower the user to deploy their own version of the contract too. Take a look at the deployYourContract() function.

let code = require("../contracts/YourContract.bytecode.js")
    this.props.tx(this.state.YourContract._contract.deploy({data:code}),640000,(receipt)=>{
      let yourContract = this.props.contractLoader("YourContract",receipt.contractAddress)
      this.setState({ YourContract: yourContract})
})

Interval

You’ll notice there is a pollInterval() function that is reading from multiple chains. This is a great place to read from your contract or grab other data periodically:

let yourVar = await this.state.YourContract.YourVar().call()
let yourContractBalance = await this.props.web3.eth.getBalance(0x..)

#BUIDL

From there you should hopefully have everything you need to build a module into the Burner wallet. Connect your contract, wire up some UI, and let’s get it deployed to production!

Emojicoin.Exchange

An example of extending the wallet beyond sending and receiving is Emojicoin.exchange. This is a UX study where I created a small shitcoin exchange within a white labeled burner wallet. Onboarding was through the roof and a simple game can be built in an afternoon:

Feedback

Take some time to build out your module and feel free to hit me up. I think this will be a little bit of an iterative process to get everything we need.

Feel free to him me up on Twitter/Telegram: @austingriffith