chore: move files for more cohesion (#183)

* move avatar input and chain select

* move helper into chains module

* move isConnected helper to providers module

* update exports/imports for useStorage

* update provider exports

* move connect icons

* make route names more obvious

* move mod select into edit route

* move more components closer to the place of usage

extension/src/chains/getChainId.ts

@@ -0,0 +1,11 @@
+import { invariant } from '@epic-web/invariant'
+import { parsePrefixedAddress, PrefixedAddress } from 'ser-kit'
+
+export const getChainId = (address: PrefixedAddress) => {
+  // atm, we don't yet support cross-chain routes, so can derive a general chainId from the avatar
+  const [chainId] = parsePrefixedAddress(address)
+
+  invariant(chainId != null, 'chainId is empty')
+
+  return chainId
+}

extension/src/chains/index.ts

@@ -0,0 +1,2 @@
+export * from './const'
+export { getChainId } from './getChainId'

extension/src/components/Address/index.tsx

@@ -1,10 +1,10 @@
+import { EXPLORER_URL } from '@/chains'
 import { shortenAddress, validateAddress } from '@/utils'
 import cn from 'classnames'
 import copy from 'copy-to-clipboard'
 import React from 'react'
 import { RiExternalLinkLine, RiFileCopyLine } from 'react-icons/ri'
 import { ChainId } from 'ser-kit'
-import { EXPLORER_URL } from '../../chains'
 import { Blockie } from '../Blockie'
 import Box from '../Box'
 import IconButton from '../IconButton'

extension/src/panel/app.tsx

@@ -1,6 +1,12 @@
 // 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 { ZodiacToastContainer } from '@/components'
+import {
+  ProvideInjectedWallet,
+  ProvideProvider,
+  useProvider,
+} from '@/providers'
+import { invariant } from '@epic-web/invariant'
 import React, { useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import { createHashRouter, RouterProvider } from 'react-router-dom'
@@ -9,13 +15,11 @@ import { parsePrefixedAddress } from 'ser-kit'
 import { update } from '../inject/bridge'
 import './global.css'
 import { initPort } from './port'
-import { ProvideInjectedWallet } from './providers'
-import ProvideProvider, { useProvider } from './providers/ProvideProvider'
-import { ProvideRoutes, RoutesEdit, RoutesList } from './routes'
+import { EditConnection, ProvideRoutes, RoutesList } from './routes'
 import { useRoute, useUpdateLastUsedRoute } from './routes/routeHooks'
 import { ProvideState } from './state'
 import Transactions from './transactions'
-import useStorage from './utils/useStorage'
+import { useStorage } from './utils'
 
 initPort()
 
@@ -30,11 +34,11 @@ const router = createHashRouter([
   },
   {
     path: '/routes/:routeId',
-    element: <RoutesEdit />,
+    element: <EditConnection />,
   },
 ])
 
-const App: React.FC = () => {
+const App = () => {
   // update the last used timestamp for the current route
   useUpdateLastUsedRoute()
 
@@ -56,10 +60,10 @@ const App: React.FC = () => {
 }
 
 const rootEl = document.getElementById('root')
-if (!rootEl) throw new Error('invariant violation')
-const root = createRoot(rootEl)
 
-root.render(
+invariant(rootEl != null, 'Could not find DOM node to attach app')
+
+createRoot(rootEl).render(
   <React.StrictMode>
     <ProvideState>
       <ProvideRoutes>

extension/src/panel/integrations/safe/kits.ts

@@ -1,7 +1,7 @@
+import { RPC } from '@/chains'
 import SafeApiKit from '@safe-global/api-kit'
 import Safe from '@safe-global/protocol-kit'
 import { ChainId } from 'ser-kit'
-import { RPC } from '../../../chains'
 
 export const TX_SERVICE_URL: Record<ChainId, string | undefined> = {
   [1]: 'https://safe-transaction-mainnet.safe.global/api',

extension/src/panel/providers/ForkProvider.ts

@@ -34,7 +34,7 @@ interface Handlers {
 }
 
 /** This is separated from TenderlyProvider to provide an abstraction over Tenderly implementation details. That way we will be able to more easily plug in alternative simulation back-ends. */
-class ForkProvider extends EventEmitter {
+export class ForkProvider extends EventEmitter {
   private provider: TenderlyProvider
 
   private chainId: ChainId
@@ -325,8 +325,6 @@ class ForkProvider extends EventEmitter {
   }
 }
 
-export default ForkProvider
-
 /** Encode an execTransactionFromModule call with the given meta transaction data */
 const execTransactionFromModule = (
   metaTx: MetaTransactionData,

extension/src/panel/providers/ProvideProvider.tsx

@@ -1,8 +1,9 @@
+import { Eip1193Provider } from '@/types'
 import { MetaTransactionData } from '@safe-global/safe-core-sdk-types'
 import { AbiCoder, BrowserProvider, id, TransactionReceipt } from 'ethers'
-import React, {
+import {
   createContext,
-  ReactNode,
+  PropsWithChildren,
   useCallback,
   useContext,
   useEffect,
@@ -17,15 +18,10 @@ import {
   planExecution,
   Route as SerRoute,
 } from 'ser-kit'
-import { ForkProvider } from '.'
-import { Eip1193Provider } from '../../types'
 import { useRoute } from '../routes'
 import { ExecutionStatus, useDispatch, useTransactions } from '../state'
 import { fetchContractInfo } from '../utils/abi'
-
-interface Props {
-  children: ReactNode
-}
+import { ForkProvider } from './ForkProvider'
 
 const ProviderContext = createContext<
   (Eip1193Provider & { getTransactionLink(txHash: string): string }) | null
@@ -43,7 +39,7 @@ const SubmitTransactionsContext = createContext<
 >(null)
 export const useSubmitTransactions = () => useContext(SubmitTransactionsContext)
 
-const ProvideProvider: React.FC<Props> = ({ children }) => {
+export const ProvideProvider = ({ children }: PropsWithChildren) => {
   const { provider, route, chainId } = useRoute()
   const dispatch = useDispatch()
   const transactions = useTransactions()
@@ -223,8 +219,6 @@ const ProvideProvider: React.FC<Props> = ({ children }) => {
   )
 }
 
-export default ProvideProvider
-
 const isExecutionFailure = (
   log: TransactionReceipt['logs'][0],
   avatarAddress: string,

extension/src/panel/providers/index.ts

@@ -1,5 +1,10 @@
-export { default as ForkProvider } from './ForkProvider'
-export { getReadOnlyProvider } from './readOnlyProvider'
+export { ForkProvider } from './ForkProvider'
+export { isConnected } from './isConnected'
+export { ProvideProvider, useProvider } from './ProvideProvider'
+export {
+  getEip1193ReadOnlyProvider,
+  getReadOnlyProvider,
+} from './readOnlyProvider'
 export {
   ProvideInjectedWallet,
   useInjectedWallet,

extension/src/panel/providers/isConnected.ts

@@ -0,0 +1,27 @@
+import { ChainId, parsePrefixedAddress, PrefixedAddress } from 'ser-kit'
+import { InjectedWalletContextT } from './useInjectedWallet'
+import { WalletConnectResult } from './useWalletConnect'
+
+export const isConnected = (
+  providerContext: InjectedWalletContextT | WalletConnectResult | null,
+  account: PrefixedAddress,
+  chainId: ChainId
+) => {
+  if (providerContext == null) {
+    return false
+  }
+
+  if (providerContext.connected === false) {
+    return false
+  }
+
+  if (providerContext.chainId !== chainId) {
+    return false
+  }
+
+  const [, accountAddress] = parsePrefixedAddress(account)
+
+  return providerContext.accounts.some(
+    (account) => account.toLowerCase() === accountAddress.toLowerCase()
+  )
+}

extension/src/panel/providers/readOnlyProvider.ts

@@ -1,9 +1,8 @@
-import EventEmitter from 'events'
-
+import { RPC } from '@/chains'
+import { JsonRpcRequest } from '@/types'
 import { JsonRpcProvider, toQuantity } from 'ethers'
+import EventEmitter from 'events'
 import { ChainId } from 'ser-kit'
-import { RPC } from '../../chains'
-import { JsonRpcRequest } from '../../types'
 
 const readOnlyProviderCache = new Map<ChainId, JsonRpcProvider>()
 const eip1193ProviderCache = new Map<string, Eip1193JsonRpcProvider>()

extension/src/panel/providers/useConnectProvider.tsx

@@ -1,8 +1,8 @@
+import { CHAIN_CURRENCY, CHAIN_NAME, EXPLORER_URL, RPC } from '@/chains'
 import { BrowserProvider } from 'ethers'
 import { MutableRefObject, useCallback, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 import { ChainId } from 'ser-kit'
-import { CHAIN_CURRENCY, CHAIN_NAME, EXPLORER_URL, RPC } from '../../chains'
 import ConnectProvider from '../../connect/ConnectProvider'
 import { memoWhilePending } from './memoWhilePending'
 

extension/src/panel/providers/useWalletConnect.ts

@@ -1,3 +1,5 @@
+import { RPC } from '@/chains'
+import { JsonRpcError } from '@/types'
 import { Core } from '@walletconnect/core'
 import WalletConnectEthereumProvider from '@walletconnect/ethereum-provider'
 import { EthereumProviderOptions } from '@walletconnect/ethereum-provider/dist/types/EthereumProvider'
@@ -7,9 +9,6 @@ import { WalletConnectModal } from '@walletconnect/modal'
 import { SignClient } from '@walletconnect/sign-client'
 import { UniversalProvider } from '@walletconnect/universal-provider'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-
-import { RPC } from '../../chains'
-import { JsonRpcError } from '../../types'
 import { waitForMultisigExecution } from '../integrations/safe'
 
 const WALLETCONNECT_PROJECT_ID = '0f8a5e2cf60430a26274b421418e8a27'

extension/src/panel/routes/AvatarInput/index.tsx → extension/src/panel/routes/Edit/AvatarInput.tsx

@@ -3,7 +3,7 @@ import { validateAddress } from '@/utils'
 import { getAddress } from 'ethers'
 import React, { useEffect, useState } from 'react'
 import CreatableSelect from 'react-select/creatable'
-import { Option } from '../ModSelect'
+import { Option } from './ModSelect'
 
 interface Props {
   value: string
@@ -41,11 +41,11 @@ const createSelectStyles = {
   }),
 }
 
-const AvatarInput: React.FC<Props> = ({
+export const AvatarInput = ({
   value,
   onChange,
   availableSafes = [],
-}) => {
+}: Props) => {
   const [pendingValue, setPendingValue] = useState(value)
 
   useEffect(() => {
@@ -64,10 +64,12 @@ const AvatarInput: React.FC<Props> = ({
           placeholder="Paste in Safe address or select from owned Safes"
           styles={createSelectStyles as any}
           value={
-            checksumAvatarAddress && {
-              value: checksumAvatarAddress,
-              label: checksumAvatarAddress,
-            }
+            checksumAvatarAddress !== ''
+              ? {
+                  value: checksumAvatarAddress,
+                  label: checksumAvatarAddress,
+                }
+              : undefined
           }
           options={availableSafes.map((address) => {
             return { value: address, label: address }
@@ -106,10 +108,9 @@ const AvatarInput: React.FC<Props> = ({
   )
 }
 
-const SafeOptionLabel: React.FC<unknown> = (opt) => {
-  const option = opt as Option
-
+const SafeOptionLabel = (option: Option) => {
   const checksumAddress = getAddress(option.value)
+
   return (
     <div className="flex items-center gap-4 py-3">
       <Circle>
@@ -120,5 +121,3 @@ const SafeOptionLabel: React.FC<unknown> = (opt) => {
     </div>
   )
 }
-
-export default AvatarInput