Third party smart contract interactions in the đ„wallet
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
Troubleshooting
Refer to the repo first: https://github.com/austintgriffith/burner-wallet
If you have problems with Clevis: https://github.com/austintgriffith/clevis
If you have problems with Dapparatus: https://github.com/austintgriffith/dapparatus
Feel free to him me up on Twitter/Telegram: @austingriffith