Merge pull request #849 from makerdao/fix-metamask-on-firefox

Fix MetaMask connection on Firefox

middleware.ts

@@ -33,7 +33,7 @@ export async function middleware(request: NextRequest) {
   const cspHeader = `
     default-src 'self' https://*.makerdao.com;
     script-src 'self'  ${
-      dev ? ` 'unsafe-eval' 'unsafe-inline'` : ''
+      dev ? "'unsafe-eval' 'unsafe-inline'" : ''
     } cdn.vercel-insights.com 'nonce-${nonce}'; 
     style-src 'self' 'unsafe-inline';
     frame-src https://connect.trezor.io https://www.youtube-nocookie.com https://player.vimeo.com https://vercel.live https://verify.walletconnect.com;

modules/app/components/layout/header/AccountSelect.tsx

@@ -26,6 +26,7 @@ import { getIsMetaMask } from 'modules/web3/helpers/getIsMetaMask';
 import logger from 'lib/logger';
 import useSelectedConnectionStore from 'modules/app/stores/selectedConnection';
 import { DialogContent, DialogOverlay } from '../../Dialog';
+import { checkInjectedProvider } from 'modules/web3/helpers/checkInjectedProvider';
 
 const closeButtonStyle: ThemeUICSSObject = {
   height: 4,
@@ -90,6 +91,9 @@ const AccountSelect = (): React.ReactElement => {
       // Temporarily close the connections modal to move focus to the WalletConnect modal
       handleModalToggle(connectionType, false);
 
+      // This is needed because of this issue https://github.com/MetaMask/metamask-extension/issues/3133
+      checkInjectedProvider();
+
       await connection.connector.activate();
 
       setSelectedConnection(connection.type);

modules/web3/helpers/checkInjectedProvider.ts

@@ -0,0 +1,23 @@
+import { detect as detectBrowser } from 'detect-browser';
+import { WindowPostMessageStream } from '@metamask/post-message-stream';
+import { initializeProvider } from '@metamask/providers';
+
+export function checkInjectedProvider() {
+  if (!window.ethereum) {
+    const browser = detectBrowser();
+    if (browser && browser.name === 'firefox') {
+      // Due to https://github.com/MetaMask/metamask-extension/issues/3133
+      // setup background connection
+      const metamaskStream = new WindowPostMessageStream({
+        name: 'metamask-inpage',
+        target: 'metamask-contentscript'
+      });
+
+      // this will initialize the provider and set it as window.ethereum
+      initializeProvider({
+        connectionStream: metamaskStream,
+        shouldShimWeb3: true
+      });
+    }
+  }
+}

modules/web3/hooks/useEagerlyConnect.ts

@@ -10,9 +10,13 @@ import { Connector } from '@web3-react/types';
 import { useEffect } from 'react';
 import { useOrderedConnections } from 'modules/web3/hooks/useOrderedConnections';
 import logger from 'lib/logger';
+import { checkInjectedProvider } from '../helpers/checkInjectedProvider';
 
 export async function connect(connector: Connector) {
   try {
+    // This is needed because of this issue https://github.com/MetaMask/metamask-extension/issues/3133
+    checkInjectedProvider();
+
     if (connector.connectEagerly) {
       await connector.connectEagerly();
     } else {

package.json

@@ -41,6 +41,8 @@
     "@makerdao/dai-ui-icons": "^0.0.39",
     "@makerdao/dai-ui-icons-branding": "^0.0.39",
     "@makerdao/i18n-helper": "^0.1.8",
+    "@metamask/post-message-stream": "^7.0.0",
+    "@metamask/providers": "^14.0.2",
     "@octokit/core": "^4.0.5",
     "@reach/dialog": "^0.16.2",
     "@reach/listbox": "^0.18.0",