feat: sidebar

Author: jxom

bun.lockb

@@ -25,6 +25,9 @@ export const getManifest = ({ dev }: { dev?: boolean }) =>
         all_frames: true,
       },
     ],
+    side_panel: {
+      default_path: 'src/entries/iframe/index.html',
+    },
     icons: {
       '16': `icons/icon${dev ? '-dev' : ''}@16w.png`,
       '32': `icons/icon${dev ? '-dev' : ''}@32w.png`,
@@ -36,6 +39,7 @@ export const getManifest = ({ dev }: { dev?: boolean }) =>
       'contextMenus',
       'declarativeNetRequest',
       'scripting',
+      'sidePanel',
       'storage',
       'tabs',
       'unlimitedStorage',

manifest.config.ts

@@ -77,7 +77,7 @@
     "@biomejs/biome": "1.0.0",
     "@samrum/vite-plugin-web-extension": "^5.1.0",
     "@types/chroma-js": "^2.4.0",
-    "@types/chrome": "^0.0.244",
+    "@types/chrome": "^0.0.266",
     "@types/opentype.js": "^1.3.4",
     "@types/qs": "^6.9.7",
     "@types/react": "^18.2.33",

package.json

@@ -1,4 +1,4 @@
-import { type ReactNode, useCallback, useMemo } from 'react'
+import { type ReactNode, useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import { type Hex, formatGwei } from 'viem'
 
@@ -24,15 +24,12 @@ import { useHost } from '~/hooks/useHost'
 import { useMine } from '~/hooks/useMine'
 import { useNetworkStatus } from '~/hooks/useNetworkStatus'
 import { usePendingBlock } from '~/hooks/usePendingBlock'
-import { getMessenger } from '~/messengers'
 import { useAccountStore, useNetworkStore, useSessionsStore } from '~/zustand'
 
 import { useRevert } from '../hooks/useRevert'
 import { useSnapshot } from '../hooks/useSnapshot'
 import * as styles from './Header.css'
 
-const contentMessenger = getMessenger('wallet:contentScript')
-
 export function Header({ isNetworkOffline }: { isNetworkOffline?: boolean }) {
   const { type } = useAppMeta()
   return (
@@ -62,12 +59,6 @@ export function Header({ isNetworkOffline }: { isNetworkOffline?: boolean }) {
               <Column width="content">
                 <SettingsButton />
               </Column>
-              <Column width="content">
-                <Separator orientation="vertical" />
-              </Column>
-              <Column width="content">
-                <CollapseButton />
-              </Column>
             </>
           )}
         </Columns>
@@ -194,31 +185,6 @@ function DappConnection() {
   )
 }
 
-function CollapseButton() {
-  const handleClose = useCallback(() => {
-    contentMessenger.send('toggleWallet', undefined)
-  }, [])
-
-  return (
-    <Tooltip label="Hide Wallet" height="full">
-      <Box
-        alignItems="center"
-        as="button"
-        backgroundColor={{
-          hover: 'surface/fill/quarternary',
-        }}
-        display="flex"
-        justifyContent="center"
-        height="full"
-        onClick={handleClose}
-        style={{ width: '28px' }}
-      >
-        <SFSymbol size="12px" symbol="chevron.right.2" weight="medium" />
-      </Box>
-    </Tooltip>
-  )
-}
-
 function SettingsButton() {
   return (
     <Tooltip label="Settings" height="full">
@@ -232,7 +198,7 @@ function SettingsButton() {
           display="flex"
           justifyContent="center"
           height="full"
-          style={{ width: '28px' }}
+          style={{ width: '32px' }}
         >
           <SFSymbol size="14px" symbol="gear" weight="medium" />
         </Box>

src/components/Header.tsx

@@ -185,10 +185,15 @@ export const TextTruncated = forwardRef<HTMLDivElement, TextTruncatedProps>(
     }, [])
 
     useLayoutEffect(() => {
-      setWidth(
-        ((wrapperRef.current as any).getBoundingClientRect() as DOMRectReadOnly)
-          .width,
-      )
+      setTimeout(() => {
+        setWidth(
+          (
+            (
+              wrapperRef.current as any
+            ).getBoundingClientRect() as DOMRectReadOnly
+          ).width,
+        )
+      }, 16)
     }, [])
     useResizeObserver(wrapperRef, (entry) =>
       mounted ? setWidth(entry.contentRect.width) : undefined,

src/design-system/components/Text.tsx

@@ -1,11 +1,7 @@
-import { getMessenger } from '~/messengers'
-
-const inpageMessenger = getMessenger('background:inpage')
-
 export function setupContextMenu() {
-  chrome.action.onClicked.addListener(() => {
-    inpageMessenger.send('toggleWallet', undefined)
-  })
+  chrome.sidePanel
+    .setPanelBehavior({ openPanelOnActionClick: true })
+    .catch((error) => console.error(error))
 
   // TODO: Only create context menu if selected text is "openable" in Rivet.
   // chrome.contextMenus.create({

src/entries/background/context-menu.ts

@@ -7,6 +7,7 @@ import { setupExtensionId } from './extension-id'
 import { setupInpage } from './inpage'
 import { interceptJsonRpcRequests } from './intercept-requests'
 import { setupRpcHandler } from './rpc'
+import { setupWalletSidebarHandler } from './wallet-sidebar'
 
 const contentMessenger = getMessenger('background:contentScript')
 const inpageMessenger = getMessenger('background:inpage')
@@ -21,4 +22,5 @@ setupExtensionId()
 setupInpage()
 setupRpcHandler({ messenger: inpageMessenger })
 setupRpcHandler({ messenger: walletMessenger })
+setupWalletSidebarHandler()
 syncStores()

src/entries/background/index.ts

@@ -75,6 +75,7 @@ export function getRpcClient({
 export function setupRpcHandler({ messenger }: { messenger: Messenger }) {
   messenger.reply('request', async ({ request, rpcUrl }, meta) => {
     const isInpage =
+      meta.sender.tab &&
       !meta.sender.tab?.url?.includes('extension://') &&
       (!meta.sender.frameId || meta.sender.frameId === 0)
     const rpcClient = getRpcClient({ rpcUrl })
@@ -104,8 +105,6 @@ export function setupRpcHandler({ messenger }: { messenger: Messenger }) {
 
       addPendingRequest({ ...request, sender: meta.sender })
 
-      inpageMessenger.send('toggleWallet', { open: true })
-
       try {
         const response = await new Promise((resolve, reject) => {
           walletMessenger.reply(
@@ -137,7 +136,6 @@ export function setupRpcHandler({ messenger }: { messenger: Messenger }) {
         })
         return response as RpcResponse
       } finally {
-        inpageMessenger.send('toggleWallet', { useStorage: true })
         removePendingRequest(request.id)
       }
     }
@@ -176,8 +174,6 @@ export function setupRpcHandler({ messenger }: { messenger: Messenger }) {
 
       addPendingRequest({ ...request, sender: meta.sender })
 
-      inpageMessenger.send('toggleWallet', { open: true })
-
       try {
         const response = await new Promise((resolve) => {
           walletMessenger.reply(

src/entries/background/rpc.ts

@@ -0,0 +1,20 @@
+import { settingsStore } from '../../zustand'
+
+export function setupWalletSidebarHandler() {
+  chrome.runtime.onMessage.addListener((message, sender) => {
+    if (message.type === 'openWallet') {
+      const { bypassSignatureAuth, bypassTransactionAuth } =
+        settingsStore.getState()
+      const { method } = message.payload
+      if (
+        method === 'eth_requestAccounts' ||
+        (method === 'eth_sendTransaction' && !bypassTransactionAuth) ||
+        (method === 'eth_sign' && !bypassSignatureAuth) ||
+        (method === 'eth_signTypedData_v4' && !bypassSignatureAuth) ||
+        (method === 'personal_sign' && !bypassSignatureAuth)
+      ) {
+        chrome.sidePanel.open({ tabId: sender.tab!.id! })
+      }
+    }
+  })
+}

src/entries/background/wallet-sidebar.ts

@@ -1,6 +1,14 @@
+import { getMessenger } from '~/messengers'
 import { setupBridgeTransportRelay } from '~/messengers/transports/bridge'
 
-import { injectWallet } from './injectWallet'
-
 setupBridgeTransportRelay()
-injectWallet()
+
+const backgroundMessenger = getMessenger('background:contentScript')
+backgroundMessenger.send('ping', undefined)
+setInterval(() => {
+  backgroundMessenger.send('ping', undefined)
+}, 5000)
+
+window.addEventListener('message', ({ data }) => {
+  if (data.type === 'openWallet') chrome.runtime.sendMessage(data)
+})

src/entries/content/index.ts

@@ -29,14 +29,5 @@ export type Schema = {
     response: RpcResponse,
   ]
   toggleTheme: [payload: void, response: void]
-  toggleWallet: [
-    payload:
-      | ({ route?: string } & (
-          | { open: boolean; useStorage?: never }
-          | { open?: never; useStorage?: true }
-        ))
-      | undefined,
-    response: void,
-  ]
   transactionExecuted: [payload: void, response: void]
 }