move more components closer to the place of usage

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
@@ -64,10 +64,12 @@ export const AvatarInput = ({
           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 @@ export const AvatarInput = ({
   )
 }
 
-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>

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

@@ -29,11 +29,11 @@ import {
   fromLegacyConnection,
 } from '../legacyConnectionMigrations'
 import { useRoute, useRoutes, useSelectedRouteId } from '../routeHooks'
-import useConnectionDryRun from '../useConnectionDryRun'
 import { AvatarInput } from './AvatarInput'
 import { ChainSelect } from './ChainSelect'
 import { ModSelect, NO_MODULE_OPTION } from './ModSelect'
 import classes from './style.module.css'
+import { useConnectionDryRun } from './useConnectionDryRun'
 import { ConnectWallet } from './wallet'
 
 type ConnectionPatch = {

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

@@ -4,6 +4,7 @@ import { PropsWithChildren } from 'react'
 import { Props as SelectProps } from 'react-select'
 
 export const NO_MODULE_OPTION = { value: '', label: '' }
+
 export interface Option {
   value: string
   label: string

extension/src/panel/routes/useConnectionDryRun.tsx → extension/src/panel/routes/Edit/useConnectionDryRun.tsx

@@ -1,18 +1,18 @@
+import { getReadOnlyProvider } from '@/providers'
+import { JsonRpcError, LegacyConnection } from '@/types'
 import { isSmartContractAddress, validateAddress } from '@/utils'
 import { KnownContracts } from '@gnosis.pm/zodiac'
 import { useEffect, useState } from 'react'
-import { JsonRpcError, LegacyConnection } from '../../types'
-import { getReadOnlyProvider } from '../providers/readOnlyProvider'
 import {
   decodeGenericError,
   decodeRoleKey,
   decodeRolesV1Error,
   decodeRolesV2Error,
-} from '../utils'
-import { useRoute } from './routeHooks'
+} from '../../utils'
+import { useRoute } from '../routeHooks'
 import { wrapRequest } from './wrapRequest'
 
-const useConnectionDryRun = (connection: LegacyConnection) => {
+export const useConnectionDryRun = (connection: LegacyConnection) => {
   const [error, setError] = useState<string | null>(null)
   const { connected } = useRoute(connection.id)
 
@@ -148,5 +148,3 @@ async function dryRun(connection: LegacyConnection) {
 
   await provider.estimateGas(request)
 }
-
-export default useConnectionDryRun

extension/src/panel/routes/wrapRequest.ts → extension/src/panel/routes/Edit/wrapRequest.ts

@@ -1,7 +1,6 @@
+import { LegacyConnection, TransactionData } from '@/types'
 import { ContractFactories, KnownContracts } from '@gnosis.pm/zodiac'
-
 import { MetaTransactionData } from '@safe-global/safe-core-sdk-types'
-import { LegacyConnection, TransactionData } from '../../types'
 
 const RolesV1Interface =
   ContractFactories[KnownContracts.ROLES_V1].createInterface()