diff --git a/packages/arb-token-bridge-ui/src/components/App/App.tsx b/packages/arb-token-bridge-ui/src/components/App/App.tsx index d23f339fb8..7fae403e16 100644 --- a/packages/arb-token-bridge-ui/src/components/App/App.tsx +++ b/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, diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx index 74c4a4c788..1cecfe9516 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx +++ b/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' diff --git a/packages/arb-token-bridge-ui/src/hooks/TransferPanel/useImportTokenModal.ts b/packages/arb-token-bridge-ui/src/hooks/TransferPanel/useImportTokenModal.ts deleted file mode 100644 index 32f4a04d69..0000000000 --- a/packages/arb-token-bridge-ui/src/hooks/TransferPanel/useImportTokenModal.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { useEffect } from 'react' -import { ImportTokenModalStatus } from '../../components/TransferPanel/TransferPanelUtils' -import { ConnectionState } from '../../util' -import { useTokenImportDialogStore } from '../../components/TransferPanel/TokenImportDialog' - -export function useImportTokenModal({ - importTokenModalStatus, - connectionState -}: { - importTokenModalStatus: ImportTokenModalStatus - connectionState: number -}) { - const { openDialog: openTokenImportDialog } = useTokenImportDialogStore() - useEffect(() => { - if (importTokenModalStatus !== ImportTokenModalStatus.IDLE) { - return - } - - if ( - connectionState === ConnectionState.L1_CONNECTED || - connectionState === ConnectionState.L2_CONNECTED - ) { - openTokenImportDialog() - } - }, [connectionState, importTokenModalStatus, openTokenImportDialog]) -} diff --git a/packages/arb-token-bridge-ui/src/state/app/actions.ts b/packages/arb-token-bridge-ui/src/state/app/actions.ts index ee95ce057d..ed2f4fd7c8 100644 --- a/packages/arb-token-bridge-ui/src/state/app/actions.ts +++ b/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 } diff --git a/packages/arb-token-bridge-ui/src/state/app/state.ts b/packages/arb-token-bridge-ui/src/state/app/state.ts index e2b723a676..1f3ea53862 100644 --- a/packages/arb-token-bridge-ui/src/state/app/state.ts +++ b/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, diff --git a/packages/arb-token-bridge-ui/src/util/index.ts b/packages/arb-token-bridge-ui/src/util/index.ts index f7e24c7355..eb08801703 100644 --- a/packages/arb-token-bridge-ui/src/util/index.ts +++ b/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)}`