chore: make init port a hook

extension/src/bridge/BridgeContext.tsx

@@ -0,0 +1,25 @@
+import { invariant } from '@epic-web/invariant'
+import { createContext, PropsWithChildren, useContext } from 'react'
+
+const BridgeContext = createContext<{ windowId: number | null }>({
+  windowId: null,
+})
+
+type ProvideBridgeContextProps = PropsWithChildren<{ windowId: number }>
+
+export const ProvideBridgeContext = ({
+  children,
+  windowId,
+}: ProvideBridgeContextProps) => (
+  <BridgeContext.Provider value={{ windowId }}>
+    {children}
+  </BridgeContext.Provider>
+)
+
+export const useWindowId = () => {
+  const { windowId } = useContext(BridgeContext)
+
+  invariant(windowId != null, '"windowId" not set on BridgeContext')
+
+  return windowId
+}

extension/src/bridge/index.ts

@@ -0,0 +1,2 @@
+export { ProvideBridgeContext, useWindowId } from './BridgeContext'
+export { useProviderBridge } from './useProviderBridge'

extension/src/panel/useProviderBridge.spec.ts → extension/src/bridge/useProviderBridge.spec.tsx

@@ -1,9 +1,16 @@
 import { ZERO_ADDRESS } from '@/chains'
 import { InjectedProviderMessage, InjectedProviderMessageTyp } from '@/messages'
-import { callListeners, chromeMock, mockActiveTab } from '@/test-utils'
+import {
+  callListeners,
+  chromeMock,
+  createMockTab,
+  mockActiveTab,
+  renderHook,
+} from '@/test-utils'
 import { Eip1193Provider } from '@/types'
-import { cleanup, renderHook, waitFor } from '@testing-library/react'
+import { cleanup, waitFor } from '@testing-library/react'
 import { toQuantity } from 'ethers'
+import { PropsWithChildren } from 'react'
 import { ChainId } from 'ser-kit'
 import {
   afterEach,
@@ -14,6 +21,7 @@ import {
   MockedFunction,
   vi,
 } from 'vitest'
+import { ProvideBridgeContext } from './BridgeContext'
 import { useProviderBridge } from './useProviderBridge'
 
 describe('Bridge', () => {
@@ -28,17 +36,23 @@ describe('Bridge', () => {
     }
   }
 
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <ProvideBridgeContext windowId={1}>{children}</ProvideBridgeContext>
+  )
+
   afterEach(cleanup)
 
   describe('Provider handling', () => {
     beforeEach(() => {
-      mockActiveTab()
+      mockActiveTab({ windowId: 1 })
     })
 
     it('relays requests to the provider', async () => {
       const provider = new MockProvider()
 
-      renderHook(() => useProviderBridge({ provider }))
+      await renderHook(() => useProviderBridge({ provider }), {
+        wrapper: Wrapper,
+      })
 
       const request = { method: 'eth_chainId' }
 
@@ -49,7 +63,7 @@ describe('Bridge', () => {
           request,
           requestId: 'test-id',
         } satisfies InjectedProviderMessage,
-        { id: chromeMock.runtime.id },
+        { id: chromeMock.runtime.id, tab: createMockTab({ windowId: 1 }) },
         vi.fn()
       )
 
@@ -63,7 +77,9 @@ describe('Bridge', () => {
 
       provider.request.mockResolvedValue(response)
 
-      renderHook(() => useProviderBridge({ provider }))
+      await renderHook(() => useProviderBridge({ provider }), {
+        wrapper: Wrapper,
+      })
 
       const request = { method: 'eth_chainId' }
 
@@ -76,7 +92,7 @@ describe('Bridge', () => {
           request,
           requestId: 'test-id',
         } satisfies InjectedProviderMessage,
-        { id: chromeMock.runtime.id },
+        { id: chromeMock.runtime.id, tab: createMockTab({ windowId: 1 }) },
         sendMessage
       )
 
@@ -94,7 +110,9 @@ describe('Bridge', () => {
 
       provider.request.mockRejectedValue(error)
 
-      renderHook(() => useProviderBridge({ provider }))
+      await renderHook(() => useProviderBridge({ provider }), {
+        wrapper: Wrapper,
+      })
 
       const request = { method: 'eth_chainId' }
 
@@ -107,7 +125,7 @@ describe('Bridge', () => {
           request,
           requestId: 'test-id',
         } satisfies InjectedProviderMessage,
-        { id: chromeMock.runtime.id },
+        { id: chromeMock.runtime.id, tab: createMockTab({ windowId: 1 }) },
         sendMessage
       )
 
@@ -124,10 +142,10 @@ describe('Bridge', () => {
 
       const request = { method: 'eth_chainId' }
 
-      const { rerender } = renderHook(
+      const { rerender } = await renderHook(
         ({ provider }: { provider: Eip1193Provider }) =>
           useProviderBridge({ provider }),
-        { initialProps: { provider: providerA } }
+        { initialProps: { provider: providerA }, wrapper: Wrapper }
       )
 
       rerender({ provider: providerB })
@@ -139,7 +157,7 @@ describe('Bridge', () => {
           request,
           requestId: 'test-id',
         } satisfies InjectedProviderMessage,
-        { id: chromeMock.runtime.id },
+        { id: chromeMock.runtime.id, tab: createMockTab({ windowId: 1 }) },
         vi.fn()
       )
 
@@ -154,7 +172,10 @@ describe('Bridge', () => {
     it('emits an "accountsChanged" event when the hook initially renders with an account', async () => {
       const tab = mockActiveTab()
 
-      renderHook(() => useProviderBridge({ provider, account: ZERO_ADDRESS }))
+      await renderHook(
+        () => useProviderBridge({ provider, account: ZERO_ADDRESS }),
+        { wrapper: Wrapper }
+      )
 
       await waitFor(() => {
         expect(chromeMock.tabs.sendMessage).toHaveBeenCalledWith(tab.id, {
@@ -168,19 +189,22 @@ describe('Bridge', () => {
     it('does not emit an "accountsChanged" event when there is no account on the first render', async () => {
       mockActiveTab()
 
-      renderHook(() => useProviderBridge({ provider }))
+      await renderHook(() => useProviderBridge({ provider }), {
+        wrapper: Wrapper,
+      })
 
       expect(chromeMock.tabs.sendMessage).not.toHaveBeenCalledWith()
     })
 
     it('does emit an "accountsChanged" event when the account resets on later renders', async () => {
       const tab = mockActiveTab()
 
-      const { rerender } = renderHook<
+      const { rerender } = await renderHook<
         void,
         { account: `0x${string}` | undefined }
       >(({ account }) => useProviderBridge({ provider, account }), {
         initialProps: { account: ZERO_ADDRESS },
+        wrapper: Wrapper,
       })
 
       rerender({ account: undefined })
@@ -192,10 +216,6 @@ describe('Bridge', () => {
           eventData: [],
         })
       })
-
-      renderHook(() => useProviderBridge({ provider }))
-
-      expect(chromeMock.tabs.sendMessage).not.toHaveBeenCalledWith()
     })
   })
 
@@ -205,7 +225,9 @@ describe('Bridge', () => {
     it('emits a "connect" event when the chainId is initially set', async () => {
       const tab = mockActiveTab()
 
-      renderHook(() => useProviderBridge({ provider, chainId: 1 }))
+      await renderHook(() => useProviderBridge({ provider, chainId: 1 }), {
+        wrapper: Wrapper,
+      })
 
       await waitFor(() => {
         expect(chromeMock.tabs.sendMessage).toHaveBeenCalledWith(tab.id, {
@@ -219,9 +241,9 @@ describe('Bridge', () => {
     it('emits a "chainChanged" event when the chain changes on a later render', async () => {
       const tab = mockActiveTab()
 
-      const { rerender } = renderHook<void, { chainId: ChainId }>(
+      const { rerender } = await renderHook<void, { chainId: ChainId }>(
         ({ chainId }) => useProviderBridge({ provider, chainId }),
-        { initialProps: { chainId: 1 } }
+        { initialProps: { chainId: 1 }, wrapper: Wrapper }
       )
 
       rerender({ chainId: 10 })

extension/src/panel/useProviderBridge.ts → extension/src/bridge/useProviderBridge.ts

@@ -6,13 +6,7 @@ import { invariant } from '@epic-web/invariant'
 import { toQuantity } from 'ethers'
 import { useCallback, useEffect, useRef } from 'react'
 import { ChainId } from 'ser-kit'
-
-let windowId: number | undefined
-
-/** Set the window ID RPC events will only be relayed to tabs in this window */
-export const setWindowId = (id: number) => {
-  windowId = id
-}
+import { useWindowId } from './BridgeContext'
 
 const emitEvent = async (eventName: string, eventData: any) => {
   const tab = await getActiveTab()
@@ -71,6 +65,8 @@ export const useProviderBridge = ({
 }
 
 const useHandleProviderRequests = (provider: Eip1193Provider) => {
+  const windowId = useWindowId()
+
   const handleMessage = useCallback(
     (
       message: InjectedProviderMessage,
@@ -116,7 +112,7 @@ const useHandleProviderRequests = (provider: Eip1193Provider) => {
       // without this the response won't be sent
       return true
     },
-    [provider]
+    [provider, windowId]
   )
 
   useEffect(() => {

extension/src/panel/app-routes/index.tsx

@@ -1,9 +1,9 @@
+import { useProviderBridge } from '@/bridge'
 import { getChainId } from '@/chains'
 import { useProvider } from '@/providers'
 import { useMarkRouteAsUsed, useZodiacRoute } from '@/zodiac-routes'
 import { Outlet, RouteObject } from 'react-router-dom'
 import { parsePrefixedAddress } from 'ser-kit'
-import { useProviderBridge } from '../useProviderBridge'
 import { useStorage } from '../utils'
 import { EditRoute } from './edit-route'
 import { ListRoutes } from './list-routes'

extension/src/panel/app.tsx

@@ -1,5 +1,6 @@
 // This is the entrypoint to the panel app.
 // It has access to chrome.* APIs, but it can't interact with other extensions such as MetaMask.
+import { ProvideBridgeContext } from '@/bridge'
 import { ZodiacToastContainer } from '@/components'
 import { ProvideInjectedWallet, ProvideProvider } from '@/providers'
 import { ProvideZodiacRoutes } from '@/zodiac-routes'
@@ -10,24 +11,30 @@ import { createHashRouter, RouterProvider } from 'react-router-dom'
 import 'react-toastify/dist/ReactToastify.css'
 import { appRoutes } from './app-routes'
 import './global.css'
-import { initPort } from './port'
 import { ProvideState } from './state'
-
-initPort()
+import { usePilotPort } from './usePilotPort'
 
 const router = createHashRouter(appRoutes)
 
 const Root = () => {
+  const { activeWindowId } = usePilotPort()
+
+  if (activeWindowId == null) {
+    return null
+  }
+
   return (
     <StrictMode>
       <ProvideState>
         <ProvideZodiacRoutes>
           <ProvideInjectedWallet>
             <ProvideProvider>
-              <div className="flex flex-1 flex-col">
-                <RouterProvider router={router} />
-                <ZodiacToastContainer />
-              </div>
+              <ProvideBridgeContext windowId={activeWindowId}>
+                <div className="flex flex-1 flex-col">
+                  <RouterProvider router={router} />
+                  <ZodiacToastContainer />
+                </div>
+              </ProvideBridgeContext>
             </ProvideProvider>
           </ProvideInjectedWallet>
         </ProvideZodiacRoutes>