Merge pull request #390 from gnosisguild/fix/prevent-global-scope-cla…

…shes

fix: generally prevent global scope clashes

extension/esbuild.mjs

@@ -33,7 +33,8 @@ esbuild
       './src/panel/app.tsx',
     ],
     bundle: true,
-    format: 'esm',
+    /** IMPORTANT: For scripts that are injected into other apps, it's crucial we build to IIFE format to avoid global scope clashes. */
+    format: 'iife',
     treeShaking: true,
     minify: process.env.NODE_ENV === 'production',
     sourcemap: process.env.NODE_ENV !== 'production' ? 'inline' : 'linked',

extension/src/connect/contentScripts/dApp.ts

@@ -4,31 +4,25 @@ import {
 } from '@/messages'
 import { invariant } from '@epic-web/invariant'
 
-// wait for connection from ConnectProvider (running in extension page), then inject iframe to establish a bridge to the user's injected wallet
-chrome.runtime.onConnect.addListener((port) => {
-  // DO NOT MOVE THIS OUT OF THIS SCOPE!
-  // Apparently when building for production this
-  // method might receive a name that clashes with
-  // another variable on the global scope. This results
-  // in the extension not being able to create a port
-  // to a DApp and, therefore, not working. Crazy, right?
-  const ensureIframe = () => {
-    let node: HTMLIFrameElement | null = document.querySelector(
-      'iframe[src="https://connect.pilot.gnosisguild.org/"]',
-    )
-
-    if (!node) {
-      node = document.createElement('iframe')
-      node.src = 'https://connect.pilot.gnosisguild.org/'
-      node.style.display = 'none'
-
-      const parent = document.body || document.documentElement
-      parent.append(node)
-    }
-
-    return node
+const ensureIframe = () => {
+  let node: HTMLIFrameElement | null = document.querySelector(
+    'iframe[src="https://connect.pilot.gnosisguild.org/"]',
+  )
+
+  if (!node) {
+    node = document.createElement('iframe')
+    node.src = 'https://connect.pilot.gnosisguild.org/'
+    node.style.display = 'none'
+
+    const parent = document.body || document.documentElement
+    parent.append(node)
   }
 
+  return node
+}
+
+// wait for connection from ConnectProvider (running in extension page), then inject iframe to establish a bridge to the user's injected wallet
+chrome.runtime.onConnect.addListener((port) => {
   const iframe = ensureIframe()
 
   // relay requests from the panel to the connect iframe