fix formatting and linting

extension/src/components/Box/index.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { forwardRef, ReactNode } from 'react'
+import { forwardRef, ReactNode } from 'react'
 
 import classes from './style.module.css'
 

extension/src/components/RouteBubble/index.tsx

@@ -6,10 +6,10 @@ import Box from '../Box'
 import ConnectionStack from '../ConnectionStack'
 import Flex from '../Flex'
 
+import { Link } from 'react-router-dom'
+import { asLegacyConnection } from '../../panel/routes/legacyConnectionMigrations'
 import ConnectionsIcon from './ConnectionsIcon'
 import classes from './style.module.css'
-import { asLegacyConnection } from '../../panel/routes/legacyConnectionMigrations'
-import { Link } from 'react-router-dom'
 
 const RouteBubble: React.FC = () => {
   const { route } = useRoute()

extension/src/components/index.ts

@@ -1,14 +1,14 @@
 export { default as Address } from './Address'
-export { default as ConnectionStack } from './ConnectionStack'
+export { default as BlockButton } from './BlockButton'
 export { default as BlockLink } from './BlockLink'
 export { default as Box } from './Box'
-export { default as Button } from './Button'
-export { default as BlockButton } from './BlockButton'
 export { default as BoxButton } from './BoxButton'
-export { default as IconButton } from './IconButton'
-export { default as ToggleButton } from './ToggleButton'
-export { default as Flex } from './Flex'
+export { default as Button } from './Button'
+export { default as ConnectionStack } from './ConnectionStack'
 export { default as Field } from './Field'
+export { default as Flex } from './Flex'
+export { default as IconButton } from './IconButton'
 export { default as Select } from './Select'
 export { default as Spinner } from './Spinner'
 export { default as Tag } from './Tag'
+export { default as ToggleButton } from './ToggleButton'

extension/src/connect/ConnectProvider.ts

@@ -1,15 +1,15 @@
 // this will be bundled in the panel app
+import { invariant } from '@epic-web/invariant'
 import { EventEmitter } from 'events'
 import { Eip1193Provider } from '../types'
 import {
-  Message,
   CONNECTED_WALLET_ERROR,
   CONNECTED_WALLET_EVENT,
   CONNECTED_WALLET_INITIALIZED,
   CONNECTED_WALLET_REQUEST,
   CONNECTED_WALLET_RESPONSE,
+  Message,
 } from './messages'
-import { invariant } from '@epic-web/invariant'
 
 interface JsonRpcRequest {
   method: string

extension/src/connect/contentScript.ts

@@ -1,9 +1,9 @@
 import {
-  CONNECTED_WALLET_REQUEST,
   CONNECTED_WALLET_ERROR,
-  CONNECTED_WALLET_RESPONSE,
   CONNECTED_WALLET_EVENT,
   CONNECTED_WALLET_INITIALIZED,
+  CONNECTED_WALLET_REQUEST,
+  CONNECTED_WALLET_RESPONSE,
   Message,
 } from './messages'
 

extension/src/connect/injectedScript.ts

@@ -1,11 +1,11 @@
 import { Eip1193Provider } from '../types'
 import {
+  CONNECTED_WALLET_ERROR,
   CONNECTED_WALLET_EVENT,
+  CONNECTED_WALLET_INITIALIZED,
   CONNECTED_WALLET_REQUEST,
-  CONNECTED_WALLET_ERROR,
   CONNECTED_WALLET_RESPONSE,
   Message,
-  CONNECTED_WALLET_INITIALIZED,
 } from './messages'
 
 declare global {

extension/src/inject/bridge.ts

@@ -1,12 +1,12 @@
 // this will be bundled in the panel app
+import { toQuantity } from 'ethers'
 import { ChainId } from 'ser-kit'
 import { Eip1193Provider } from '../types'
 import {
   INJECTED_PROVIDER_EVENT,
   INJECTED_PROVIDER_REQUEST,
   InjectedProviderMessage,
 } from './messages'
-import { toQuantity } from 'ethers'
 
 let windowId: number | undefined
 

extension/src/inject/contentScript.ts

@@ -1,11 +1,11 @@
-import './probeChainId'
+import { Message, PILOT_DISCONNECT } from '../messages'
 import {
   INJECTED_PROVIDER_EVENT,
   INJECTED_PROVIDER_REQUEST,
   InjectedProviderMessage,
   InjectedProviderResponse,
 } from './messages'
-import { Message, PILOT_DISCONNECT } from '../messages'
+import './probeChainId'
 
 // The content script is injected on tab update events, which can be triggered multiple times for the same page load.
 // That's why we need to check if the script has already been injected before injecting it again.

extension/src/inject/injectedScript.ts

@@ -1,7 +1,7 @@
 // This script will be injected via executeScript to all windows in tracked tabs
 
-import InjectedProvider from './InjectedProvider'
 import { Eip1193Provider } from '../types'
+import InjectedProvider from './InjectedProvider'
 
 declare let window: Window & {
   zodiacPilot?: InjectedProvider

extension/src/panel/app.tsx

@@ -1,23 +1,22 @@
 // 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 React, { useEffect } from 'react'
-import { createHashRouter, RouterProvider } from 'react-router-dom'
 import { createRoot } from 'react-dom/client'
+import { createHashRouter, RouterProvider } from 'react-router-dom'
 import 'react-toastify/dist/ReactToastify.css'
 
 import './global.css'
 
-import ProvideProvider, { useProvider } from './providers/ProvideProvider'
-import { ProvideState } from './state'
+import { parsePrefixedAddress } from 'ser-kit'
 import ZodiacToastContainer from '../components/Toast'
+import { update } from '../inject/bridge'
+import { initPort } from './port'
 import { ProvideInjectedWallet } from './providers'
-import { ProvideRoutes, RoutesEdit } from './routes'
+import ProvideProvider, { useProvider } from './providers/ProvideProvider'
+import { ProvideRoutes, RoutesEdit, RoutesList } from './routes'
 import { useRoute, useUpdateLastUsedRoute } from './routes/routeHooks'
+import { ProvideState } from './state'
 import Transactions from './transactions'
-import { RoutesList } from './routes'
-import { update } from '../inject/bridge'
-import { parsePrefixedAddress } from 'ser-kit'
-import { initPort } from './port'
 import useStorage from './utils/useStorage'
 
 initPort()

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

@@ -1,5 +1,5 @@
+export { safeInterface } from './interface'
 export { initSafeApiKit, initSafeProtocolKit } from './kits'
-export { useSafesWithOwner } from './useSafesWithOwner'
 export { useSafeDelegates } from './useSafeDelegates'
+export { useSafesWithOwner } from './useSafesWithOwner'
 export { waitForMultisigExecution } from './waitForMultisigExecution'
-export { safeInterface } from './interface'

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

@@ -1,5 +1,5 @@
-import Safe from '@safe-global/protocol-kit'
 import SafeApiKit from '@safe-global/api-kit'
+import Safe from '@safe-global/protocol-kit'
 import { ChainId } from 'ser-kit'
 import { RPC } from '../../../chains'
 

extension/src/panel/integrations/zodiac/rolesMultisend.ts

@@ -1,8 +1,8 @@
 import { ContractFactories, KnownContracts } from '@gnosis.pm/zodiac'
 import { ChainId } from 'ser-kit'
 import {
-  chains as rolesV2Chains,
   ChainId as RolesV2ChainId,
+  chains as rolesV2Chains,
 } from 'zodiac-roles-deployments'
 import { getReadOnlyProvider } from '../../providers'
 

extension/src/panel/integrations/zodiac/useZodiacModules.ts

@@ -8,11 +8,11 @@ import { Contract, id, Interface } from 'ethers'
 import detectProxyTarget from 'evm-proxy-detection'
 import { useEffect, useState } from 'react'
 
-import { validateAddress } from '../../utils'
-import { useRoute } from '../../routes/routeHooks'
+import { ChainId } from 'ser-kit'
 import { getReadOnlyProvider } from '../../providers/readOnlyProvider'
+import { useRoute } from '../../routes/routeHooks'
+import { validateAddress } from '../../utils'
 import { SupportedModuleType } from './types'
-import { ChainId } from 'ser-kit'
 
 const SUPPORTED_MODULES = [
   KnownContracts.DELAY,

extension/src/panel/providers/ForkProvider.ts

@@ -1,23 +1,23 @@
 import EventEmitter from 'events'
 
 import { ContractFactories, KnownContracts } from '@gnosis.pm/zodiac'
-import { BrowserProvider, toQuantity, ZeroAddress } from 'ethers'
 import { MetaTransactionData } from '@safe-global/safe-core-sdk-types'
+import { BrowserProvider, toQuantity, ZeroAddress } from 'ethers'
 
+import { nanoid } from 'nanoid'
+import { ChainId } from 'ser-kit'
+import { Message, SIMULATE_START, SIMULATE_STOP } from '../../messages'
 import { Eip1193Provider, TransactionData } from '../../types'
-import TenderlyProvider from './TenderlyProvider'
 import { initSafeProtocolKit, safeInterface } from '../integrations/safe'
-import { translateSignSnapshotVote } from '../transactionTranslations/signSnapshotVote'
 import {
   hashMessage,
   signMessage,
   signTypedData,
   typedDataHash,
 } from '../integrations/safe/signing'
-import { ChainId } from 'ser-kit'
+import { translateSignSnapshotVote } from '../transactionTranslations/signSnapshotVote'
 import { decodeGenericError } from '../utils'
-import { nanoid } from 'nanoid'
-import { Message, SIMULATE_START, SIMULATE_STOP } from '../../messages'
+import TenderlyProvider from './TenderlyProvider'
 
 class UnsupportedMethodError extends Error {
   code = 4200

extension/src/panel/providers/TenderlyProvider.tsx

@@ -2,10 +2,10 @@ import EventEmitter from 'events'
 
 import { customAlphabet } from 'nanoid'
 
+import { JsonRpcProvider } from 'ethers'
+import { ChainId } from 'ser-kit'
 import { JsonRpcRequest } from '../../types'
 import { getReadOnlyProvider } from './readOnlyProvider'
-import { ChainId } from 'ser-kit'
-import { JsonRpcProvider } from 'ethers'
 
 const slug = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789')
 

extension/src/panel/providers/readOnlyProvider.ts

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

extension/src/panel/providers/useConnectProvider.tsx

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useState } from 'react'
-import { memoWhilePending } from './memoWhilePending'
-import ConnectProvider from '../../connect/ConnectProvider'
 import { BrowserProvider } from 'ethers'
+import { 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'
 
 // Wallet extensions won't inject connectProvider to the extension panel, so we've built ConnectProvider.
 // connectProvider can be used just like window.ethereum

extension/src/panel/providers/useWalletConnect.ts

@@ -1,16 +1,16 @@
 import { Core } from '@walletconnect/core'
 import WalletConnectEthereumProvider from '@walletconnect/ethereum-provider'
-import { WalletConnectModal } from '@walletconnect/modal'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { EthereumProviderOptions } from '@walletconnect/ethereum-provider/dist/types/EthereumProvider'
 import { RequestArguments } from '@walletconnect/ethereum-provider/dist/types/types'
-import { UniversalProvider } from '@walletconnect/universal-provider'
-import { SignClient } from '@walletconnect/sign-client'
 import { KeyValueStorage } from '@walletconnect/keyvaluestorage'
-import { EthereumProviderOptions } from '@walletconnect/ethereum-provider/dist/types/EthereumProvider'
+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 { waitForMultisigExecution } from '../integrations/safe'
 import { JsonRpcError } from '../../types'
+import { waitForMultisigExecution } from '../integrations/safe'
 
 const WALLETCONNECT_PROJECT_ID = '0f8a5e2cf60430a26274b421418e8a27'
 

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

@@ -7,8 +7,8 @@ import { selectStyles } from '../../../components/Select'
 import { validateAddress } from '../../utils'
 import { Option } from '../ModSelect'
 
-import classes from './style.module.css'
 import { getAddress } from 'ethers'
+import classes from './style.module.css'
 
 interface Props {
   value: string

extension/src/panel/routes/ConnectIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { IconType } from 'react-icons/lib'
 
 export const ConnectedIcon: IconType = ({ size, color, title, role }) => (

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

@@ -5,35 +5,34 @@ import { RiDeleteBinLine } from 'react-icons/ri'
 import { Box, Button, Field, Flex, IconButton } from '../../../components'
 import { useConfirmationModal } from '../../../components/ConfirmationModal'
 
-import { useSafesWithOwner } from '../../integrations/safe'
-import { useSafeDelegates } from '../../integrations/safe'
-import AvatarInput from '../AvatarInput'
-import ConnectButton from '../ConnectButton'
-import ModSelect, { NO_MODULE_OPTION, Option } from '../ModSelect'
+import { useSafeDelegates, useSafesWithOwner } from '../../integrations/safe'
+import { SupportedModuleType } from '../../integrations/zodiac/types'
 import {
   MODULE_NAMES,
   useZodiacModules,
 } from '../../integrations/zodiac/useZodiacModules'
-import { SupportedModuleType } from '../../integrations/zodiac/types'
+import { useClearTransactions } from '../../state/transactionHooks'
+import AvatarInput from '../AvatarInput'
+import ConnectButton from '../ConnectButton'
+import ModSelect, { NO_MODULE_OPTION, Option } from '../ModSelect'
 import { useRoute, useRoutes, useSelectedRouteId } from '../routeHooks'
 import useConnectionDryRun from '../useConnectionDryRun'
-import { useClearTransactions } from '../../state/transactionHooks'
 
-import classes from './style.module.css'
-import { decodeRoleKey, encodeRoleKey } from '../../utils'
-import ChainSelect from '../ChainSelect'
+import { ZeroAddress } from 'ethers'
+import { Link, useNavigate, useParams } from 'react-router-dom'
+import { ChainId } from 'ser-kit'
+import { ProviderType, Route } from '../../../types'
 import {
   queryRolesV1MultiSend,
   queryRolesV2MultiSend,
 } from '../../integrations/zodiac/rolesMultisend'
-import { ChainId } from 'ser-kit'
+import { decodeRoleKey, encodeRoleKey } from '../../utils'
+import ChainSelect from '../ChainSelect'
 import {
   asLegacyConnection,
   fromLegacyConnection,
 } from '../legacyConnectionMigrations'
-import { ZeroAddress } from 'ethers'
-import { Link, useNavigate, useParams } from 'react-router-dom'
-import { ProviderType, Route } from '../../../types'
+import classes from './style.module.css'
 
 type ConnectionPatch = {
   label?: string

extension/src/panel/routes/List/index.tsx

@@ -10,14 +10,14 @@ import {
   Flex,
 } from '../../../components'
 import { useConfirmationModal } from '../../../components/ConfirmationModal'
-import { ConnectedIcon, DisconnectedIcon } from '../ConnectIcon'
-import { useRoute, useRoutes, useSelectedRouteId } from '../routeHooks'
 import { Route } from '../../../types'
 import { useClearTransactions } from '../../state/transactionHooks'
+import { ConnectedIcon, DisconnectedIcon } from '../ConnectIcon'
+import { useRoute, useRoutes, useSelectedRouteId } from '../routeHooks'
 
-import classes from './style.module.css'
-import { asLegacyConnection } from '../legacyConnectionMigrations'
 import { useNavigate } from 'react-router-dom'
+import { asLegacyConnection } from '../legacyConnectionMigrations'
+import classes from './style.module.css'
 
 interface RouteItemProps {
   route: Route

extension/src/panel/routes/ModSelect/index.tsx

@@ -5,8 +5,8 @@ import { Select } from '../../../components'
 import Blockie from '../../../components/Blockie'
 import Box from '../../../components/Box'
 
-import classes from './style.module.css'
 import { getAddress } from 'ethers'
+import classes from './style.module.css'
 
 export const NO_MODULE_OPTION = { value: '', label: '' }
 export interface Option {

extension/src/panel/routes/index.ts

@@ -1,3 +1,3 @@
-export { useRoute, ProvideRoutes } from './routeHooks'
-export { default as RoutesList } from './List'
 export { default as RoutesEdit } from './Edit'
+export { default as RoutesList } from './List'
+export { ProvideRoutes, useRoute } from './routeHooks'