Workaround to make Metamask inject window.ethereum with strict CSP

middleware.ts

@@ -32,7 +32,9 @@ export async function middleware(request: NextRequest) {
 
   const cspHeader = `
     default-src 'self' https://*.makerdao.com;
-    script-src 'self'  ${dev ? "'unsafe-eval' 'unsafe-inline'" : ''} cdn.vercel-insights.com; 
+    script-src 'self'  ${
+      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;
     font-src 'self' data:;

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,7 @@ const AccountSelect = (): React.ReactElement => {
       // Temporarily close the connections modal to move focus to the WalletConnect modal
       handleModalToggle(connectionType, false);
 
+      checkInjectedProvider();
       await connection.connector.activate();
 
       setSelectedConnection(connection.type);

modules/web3/helpers/checkInjectedProvider.ts

@@ -0,0 +1,25 @@
+import * as env from 'detect-browser';
+import { WindowPostMessageStream } from '@metamask/post-message-stream';
+import { initializeProvider } from '@metamask/providers';
+
+export function checkInjectedProvider() {
+  const injectedAvailable = !!window.ethereum;
+
+  if (!injectedAvailable) {
+    const browser = env.detect();
+    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,11 @@ 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 {
+    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",