For this hackathon we wanted to make the Brave browser a first class citizen of the blockchain ecosystem. MetaMask extension support allows us to natively handle a wide range of previously deployed ÐApps. We also wanted to build a proof of concept ÐApp to test our MetaMask integration.
What it does
We added support for the MetaMask extension into the Bave browser, allowing the Brave browser to run ÐApps.
We also added in independent detection for ÐApps when the extension is not installed, and we display UI which prompts the user for a one click install of the extension when visiting a ÐApps.
How we built it
After having these missing APIs, we were able to re-use the Chrome MetaMask extension.
This detection was done in 2 ways:
web3 object exists on the page.
web3 object is assumed to exist as a global and is accessed.
We also attempted to build Android MetaMask support but were not successful. Android does not have support for extensions so we attempted to use a service worker method. We were able to webpack the code and inject it but it still had problems to work correctly.
We also built a proof of concept ÐApp to verify the MetaMask integration.
Challenges we ran into
The code that needed to be written was not immediately obvious to us. We had to trace many code paths to ultimately build out our solution.
Integrating MetaMask into Android was not possible within the timeframe of the hackathon but a lot of progress was made for the future.
Accomplishments that we're proud of
We did a security audit on the code and we’re planning to ship this support to our entire user base on desktop platforms on our next hotfix.
We’re proud of asking the user to install MetaMask when a ÐApp is detected because it will mean a lot more users of MetaMask.
Shipping this feature to our user base will open up a wide set of applications previously not available to our users on the Brave browser.
What we learned
We learned the application lifecycle of the MetaMask extension, the workings of the web3.js module, and methods to retrieve information from the Ethereum blockchain, more about Solidity, service workers, JS proxy objects, and more.
What's next for MetaMask Brave Integration
We’re planning to release in our next hotfix release currently scheduled for the start of this week.
In the future we’ll work more on building mobile ÐApp support for our Android and iOS browsers. We may also look into supporting the mist API.