Overview

Add a desktop popup window. The main motivation for that is performance and an improved desktop experience. Why is it performant? Because on the desktop we can have the popup (approval window) loaded and ready since the moment that the app is initialised. We just hide or display and route accordingly whenever the popup needs to be displayed to the user.

Changes

Root

Two new environment variables:

• DESKTOP_POPUP -> this enables the desktop popup.
• DISABLE_EXTENSION_POPUP -> this one disables the extension popup (but only if the desktop popup is enabled.. there is no path where no popup will be shown)

Patch:

• webextension-polyfill -> this package is only meant to be loaded within an extension environment. Although electron allows loading an extension, we do not want to load the entire MetaMask Extension within electron. We just want to load part of the MetaMask Extension popup. And to do that we are actually creating a different web app within an electron BrowserWindow. As BrowserWindow does not have chrome.runtime global, we had to patch webextension-polyfill to create the required polyfills even if we are not in an extension environment.

Init Extension submodule:

• React - remove react deps from the extension submodule node_modules and link them with the react deps on the app node_modules. This is to prevent the having more than one copy of react in the same app issue. (Also bear in mind that this is just required for the Desktop App.
• webextension-polyfill - replaced the dep from the extension submodule node_modules, using the same strategy used for react. The reason for this one, is that we need to run the patched version when on the desktop popup, but on the extension want to run the version without the patch.

Pipeline

Updated the Circle pipeline, so that the Extension built for the e2e tests does not take into account the linked deps from the App. This allows the Extension to be built with lavamoat enabled and use the policies from the submodule.

App

Desktop popup

This is the actual desktop popup ui react app. It is loaded within an electron browserWindow. The way that it works is super easy.

UI

The ui is quite standard and mimics the structure of the desktop ui. The main differences are:

• the redux store is exactly the same as the MetaMask Extension redux store
• to send the requests to the background script (background is running on desktop main process), we have actually wrapped the electronBridge in a stream and pass that into the MetaRPC client.
• we added a loading page that is the default one and implemented the same logic that the MetaMask Extension default route has in order to decide if the popup should be closed or not (as the popup routes will redirect to the default one up on approval or rejection).
• it is also worth mentioning a browser-shim that was added mainly because the popup-ui is loaded within a browserWindow, and not within a browser extension environment.
  Build process:
  To generate the bundle we have reused the same scripts that we use for desktop-ui. In fact we treated popup-ui as another entry point, but the commons are exactly the same. This means that most of the bundle is reused by both apps. Finally we have also split the css bundling. The dist will now include a popup-index.css file that will be loaded by the popup-ui.html file

Connection with Desktop App

It establishes a connection using the connectRemote but by passing our own duplex stream (called approvalStream). That approval stream is actually just a stream wrapping the popup-ui browser window webContents.send method. So to sum up we are:

• wrapping the ipcRender msg channel into a stream on the popup-ui and also on the main process.
• on the ui we create the background stream by
  • wrapping the electron bridge with a stream
  • passing that stream into the metaRPC client factory
• on the main process we create the communication stream by
  • wrapping the ipcMain and the popup browser window with a stream
  • passing that stream into the MetaMask Extension ConnectRemote

Desktop App

Besides establishing the connection, the main process is also responsible for:

• creating the popup window
  • the window is created whenever the DESKTOP_POPUP env var is set to true. It will load the popup-ui.html (or the dark version, depending on the current theme). And it will have its own context bridge (loaded using the popup-preload.js)
• managing when that window should be visible or hidden
  • the Extension background script is responsible to launch the popup. It is also responsible (in some cases) to close the popup. In order to do the same for the desktop popup, we are adding window handlers that update the desktop popup browser window visibility instead of proxying those requests to the actual paired extension.