@metamask/inpage [email protected] (#49)

* @metamask/[email protected] * Implement necessary content script updates * Implement METAMASK_STREAM_FAILURE notification * Refactor provider setup function * @metamask/[email protected]
MetaMask · Jan 18, 2021 · 493da4e · 493da4e
1 parent 97543d9
commit 493da4e
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -37,14 +37,14 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
     "@babel/preset-env": "^7.12.7",
     "@metamask/eslint-config": "^4.1.0",
-    "@metamask/inpage-provider": "6.1.0",
+    "@metamask/inpage-provider": "^8.0.2",
+    "@metamask/object-multiplex": "^1.1.0",
     "babel-loader": "^8.0.6",
     "concat-cli": "^4.0.0",
     "eslint": "^7.14.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-json": "^2.0.1",
     "eslint-plugin-node": "^11.1.0",
-    "obj-multiplex": "^1.0.0",
     "pump": "^3.0.0",
     "readable-stream": "^2.3.7",
     "webpack": "^4.44.2",

diff --git a/src/content-script/index.js b/src/content-script/index.js
@@ -1,5 +1,21 @@
 /* global inpageBundle */
 
+if (shouldInject()) {
+  injectScript(inpageBundle)
+  start()
+}
+
+// Functions
+
+/**
+ * Sets up the stream communication and submits site metadata
+ *
+ */
+async function start () {
+  await domIsReady()
+  window._metamaskSetupProvider()
+}
+
 /**
  * Injects a script tag into the current document
  *
@@ -124,17 +140,3 @@ async function domIsReady () {
   // wait for load
   await new Promise((resolve) => window.addEventListener('DOMContentLoaded', resolve, { once: true }))
 }
-
-/**
- * Sets up the stream communication and submits site metadata
- *
- */
-async function start () {
-  await domIsReady()
-  window.setupStreams()
-}
-
-if (shouldInject()) {
-  injectScript(inpageBundle)
-  start()
-}
diff --git a/src/inpage/index.js b/src/inpage/index.js
@@ -1,28 +1,50 @@
-const { initProvider } = require('@metamask/inpage-provider')
-const ObjectMultiplex = require('obj-multiplex')
+const { initializeProvider, shimWeb3 } = require('@metamask/inpage-provider')
+const ObjectMultiplex = require('@metamask/object-multiplex')
 const pump = require('pump')
 const MobilePortStream = require('./MobilePortStream')
 const ReactNativePostMessageStream = require('./ReactNativePostMessageStream')
 
+const INPAGE = 'metamask-inpage'
+const CONTENT_SCRIPT = 'metamask-contentscript'
+const PROVIDER = 'metamask-provider'
+
+// Setup stream for content script communication
 const metamaskStream = new ReactNativePostMessageStream({
-  name: 'inpage',
-  target: 'contentscript',
+  name: INPAGE,
+  target: CONTENT_SCRIPT,
 })
 
-initProvider({
+// Initialize provider object (window.ethereum)
+initializeProvider({
   connectionStream: metamaskStream,
   shouldSendMetadata: false,
 })
 
-window.setupStreams = function () {
+// Set content script post-setup function
+Object.defineProperty(window, '_metamaskSetupProvider', {
+  value: () => {
+    setupProviderStreams()
+    delete window._metamaskSetupProvider
+  },
+  configurable: true,
+  enumerable: false,
+  writable: false,
+})
+
+// Functions
+
+/**
+ * Setup function called from content script after the DOM is ready.
+ */
+function setupProviderStreams () {
   // the transport-specific streams for communication between inpage and background
   const pageStream = new ReactNativePostMessageStream({
-    name: 'contentscript',
-    target: 'inpage',
+    name: CONTENT_SCRIPT,
+    target: INPAGE,
   })
 
   const appStream = new MobilePortStream({
-    name: 'contentscript',
+    name: CONTENT_SCRIPT,
   })
 
   // create and connect channel muxes
@@ -42,11 +64,17 @@ window.setupStreams = function () {
     appMux,
     appStream,
     appMux,
-    (err) => logStreamDisconnectWarning('MetaMask Background Multiplex', err),
+    (err) => {
+      logStreamDisconnectWarning('MetaMask Background Multiplex', err)
+      notifyProviderOfStreamFailure()
+    },
   )
 
   // forward communication across inpage-background for these channels only
-  forwardTrafficBetweenMuxes('provider', pageMux, appMux)
+  forwardTrafficBetweenMuxes(PROVIDER, pageMux, appMux)
+
+  // add web3 shim
+  shimWeb3(window.ethereum)
 }
 
 /**
@@ -81,3 +109,25 @@ function logStreamDisconnectWarning (remoteLabel, err) {
   console.warn(warningMsg)
   console.error(err)
 }
+
+/**
+ * This function must ONLY be called in pump destruction/close callbacks.
+ * Notifies the inpage context that streams have failed, via window.postMessage.
+ * Relies on @metamask/object-multiplex and post-message-stream implementation details.
+ */
+function notifyProviderOfStreamFailure () {
+  window.postMessage(
+    {
+      target: INPAGE, // the post-message-stream "target"
+      data: {
+        // this object gets passed to object-multiplex
+        name: PROVIDER, // the object-multiplex channel name
+        data: {
+          jsonrpc: '2.0',
+          method: 'METAMASK_STREAM_FAILURE',
+        },
+      },
+    },
+    window.location.origin,
+  )
+}