refactor: remove connectionState

packages/arb-token-bridge-ui/src/components/App/App.tsx

@@ -13,7 +13,6 @@ import { createOvermind, Overmind } from 'overmind'
 import { Provider } from 'overmind-react'
 import { useLocalStorage } from '@uidotdev/usehooks'
 
-import { ConnectionState } from '../../util'
 import { TokenBridgeParams } from '../../hooks/useArbTokenBridge'
 import { WelcomeDialog } from './WelcomeDialog'
 import { BlockedDialog } from './BlockedDialog'
@@ -98,26 +97,12 @@ const ArbTokenBridgeStoreSyncWrapper = (): JSX.Element | null => {
   useEffect(() => {
     // Any time one of those changes
     setTokenBridgeParams(null)
-    actions.app.setConnectionState(ConnectionState.LOADING)
     actions.app.reset(networks.sourceChain.id)
     actions.app.setChainIds({
       l1NetworkChainId: parentChain.id,
       l2NetworkChainId: childChain.id
     })
 
-    if (
-      isDepositMode({
-        sourceChainId: networks.sourceChain.id,
-        destinationChainId: networks.destinationChain.id
-      })
-    ) {
-      console.info('Deposit mode detected:')
-      actions.app.setConnectionState(ConnectionState.L1_CONNECTED)
-    } else {
-      console.info('Withdrawal mode detected:')
-      actions.app.setConnectionState(ConnectionState.L2_CONNECTED)
-    }
-
     setTokenBridgeParams({
       l1: {
         network: parentChain,

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx

@@ -13,7 +13,10 @@ import {
   TokenDepositCheckDialog,
   TokenDepositCheckDialogType
 } from './TokenDepositCheckDialog'
-import { TokenImportDialog } from './TokenImportDialog'
+import {
+  TokenImportDialog,
+  useTokenImportDialogStore
+} from './TokenImportDialog'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 import { useDialog } from '../common/Dialog'
 import { TokenApprovalDialog } from './TokenApprovalDialog'
@@ -47,7 +50,6 @@ import {
   getWarningTokenDescription,
   useTokenFromSearchParams
 } from './TransferPanelUtils'
-import { useImportTokenModal } from '../../hooks/TransferPanel/useImportTokenModal'
 import { useTransactionHistory } from '../../hooks/useTransactionHistory'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
@@ -106,7 +108,6 @@ export function TransferPanel() {
 
   const {
     app: {
-      connectionState,
       selectedToken,
       arbTokenBridge: { token },
       warningTokens
@@ -171,6 +172,7 @@ export function TransferPanel() {
   ] = useDialog()
 
   const { destinationAddress } = useDestinationAddressStore()
+  const { openDialog: openTokenImportDialog } = useTokenImportDialogStore()
 
   const isCustomDestinationTransfer = !!destinationAddress
 
@@ -193,6 +195,14 @@ export function TransferPanel() {
     setShowProjectsListing(false)
   }, [childChain.id, parentChain.id])
 
+  useEffect(() => {
+    if (importTokenModalStatus !== ImportTokenModalStatus.IDLE) {
+      return
+    }
+
+    openTokenImportDialog()
+  }, [importTokenModalStatus, openTokenImportDialog])
+
   function closeWithResetTokenImportDialog() {
     setTokenQueryParam(undefined)
     setImportTokenModalStatus(ImportTokenModalStatus.CLOSED)
@@ -205,11 +215,6 @@ export function TransferPanel() {
     setAmount2('')
   }
 
-  useImportTokenModal({
-    importTokenModalStatus,
-    connectionState
-  })
-
   const isBridgingANewStandardToken = useMemo(() => {
     const isUnbridgedToken =
       selectedToken !== null && typeof selectedToken.l2Address === 'undefined'

packages/arb-token-bridge-ui/src/state/app/actions.ts

@@ -3,16 +3,8 @@ import {
   ERC20BridgeToken
 } from '../../hooks/arbTokenBridge.types'
 import { Context } from '..'
-import { ConnectionState } from '../../util'
 import { WarningTokens } from './state'
 
-export const setConnectionState = (
-  { state }: Context,
-  connectionState: ConnectionState
-) => {
-  state.app.connectionState = connectionState
-}
-
 export const setChainIds = (
   { state }: Context,
   payload: { l1NetworkChainId: number; l2NetworkChainId: number }
@@ -40,7 +32,6 @@ export const reset = ({ state }: Context, newChainId: number) => {
   }
 
   state.app.arbTokenBridge = {} as ArbTokenBridge
-  state.app.connectionState = ConnectionState.LOADING
   state.app.arbTokenBridgeLoaded = false
 }
 

packages/arb-token-bridge-ui/src/state/app/state.ts

@@ -11,7 +11,6 @@ import {
   L2ToL3MessageData,
   TxnType
 } from '../../hooks/useTransactions'
-import { ConnectionState } from '../../util'
 import { CCTPSupportedChainId } from '../cctpState'
 import { Address } from '../../util/AddressUtils'
 
@@ -85,7 +84,6 @@ export interface WarningTokens {
 export type AppState = {
   arbTokenBridge: ArbTokenBridge
   warningTokens: WarningTokens
-  connectionState: number
   selectedToken: ERC20BridgeToken | null
   l1NetworkChainId: number | null
   l2NetworkChainId: number | null
@@ -95,7 +93,6 @@ export type AppState = {
 export const defaultState: AppState = {
   arbTokenBridge: {} as ArbTokenBridge,
   warningTokens: {} as WarningTokens,
-  connectionState: ConnectionState.LOADING,
   l1NetworkChainId: null,
   l2NetworkChainId: null,
   selectedToken: null,

packages/arb-token-bridge-ui/src/util/index.ts

@@ -1,10 +1,3 @@
-export enum ConnectionState {
-  LOADING,
-  L1_CONNECTED,
-  L2_CONNECTED,
-  NETWORK_ERROR
-}
-
 export const sanitizeImageSrc = (url: string): string => {
   if (url.startsWith('ipfs')) {
     return `https://ipfs.io/ipfs/${url.substring(7)}`