refactor: move dialogs to a single component (part 3)

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

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useLatest } from 'react-use'
-import { create } from 'zustand'
 
 import { useERC20L1Address } from '../../hooks/useERC20L1Address'
 import { useAppState } from '../../state'
@@ -39,25 +38,12 @@ type TokenListSearchResult =
       status: ImportStatus
     }
 
-type TokenImportDialogStore = {
-  isOpen: boolean
-  openDialog: () => void
-  closeDialog: () => void
-}
-
-export const useTokenImportDialogStore = create<TokenImportDialogStore>(
-  set => ({
-    isOpen: false,
-    openDialog: () => set({ isOpen: true }),
-    closeDialog: () => set({ isOpen: false })
-  })
-)
-
-type TokenImportDialogProps = Omit<UseDialogProps, 'isOpen'> & {
+type TokenImportDialogProps = UseDialogProps & {
   tokenAddress: string
 }
 
 export function TokenImportDialog({
+  isOpen,
   onClose,
   tokenAddress
 }: TokenImportDialogProps): JSX.Element {
@@ -82,7 +68,6 @@ export function TokenImportDialog({
   const [status, setStatus] = useState<ImportStatus>(ImportStatus.LOADING)
   const [isImportingToken, setIsImportingToken] = useState<boolean>(false)
   const [tokenToImport, setTokenToImport] = useState<ERC20BridgeToken>()
-  const { isOpen } = useTokenImportDialogStore()
   const [isDialogVisible, setIsDialogVisible] = useState(false)
   const { data: l1Address, isLoading: isL1AddressLoading } = useERC20L1Address({
     eitherL1OrL2Address: tokenAddress,
@@ -281,9 +266,11 @@ export function TokenImportDialog({
       selectToken(tokenToImport!)
     } else {
       // Token is not added to the bridge, so we add it
-      storeNewToken(l1Address).catch(() => {
-        setStatus(ImportStatus.ERROR)
-      })
+      storeNewToken(l1Address)
+        .catch(() => {
+          setStatus(ImportStatus.ERROR)
+        })
+        .then(() => onClose(true))
     }
   }
 

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

@@ -14,10 +14,6 @@ import {
   TokenDepositCheckDialog,
   TokenDepositCheckDialogType
 } from './TokenDepositCheckDialog'
-import {
-  TokenImportDialog,
-  useTokenImportDialogStore
-} from './TokenImportDialog'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 import { useDialog } from '../common/Dialog'
 import { TransferPanelSummary } from './TransferPanelSummary'
@@ -40,10 +36,7 @@ import {
   AssetType,
   DepositGasEstimates
 } from '../../hooks/arbTokenBridge.types'
-import {
-  ImportTokenModalStatus,
-  getWarningTokenDescription
-} from './TransferPanelUtils'
+import { getWarningTokenDescription } from './TransferPanelUtils'
 import { useTransactionHistory } from '../../hooks/useTransactionHistory'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
@@ -104,8 +97,6 @@ export function TransferPanel() {
   const [{ token: tokenFromSearchParams }] = useArbQueryParams()
   const [tokenDepositCheckDialogType, setTokenDepositCheckDialogType] =
     useState<TokenDepositCheckDialogType>('new-token')
-  const [importTokenModalStatus, setImportTokenModalStatus] =
-    useState<ImportTokenModalStatus>(ImportTokenModalStatus.IDLE)
   const [showSmartContractWalletTooltip, setShowSmartContractWalletTooltip] =
     useState(false)
 
@@ -115,7 +106,7 @@ export function TransferPanel() {
       warningTokens
     }
   } = useAppState()
-  const [selectedToken, setSelectedToken] = useSelectedToken()
+  const [selectedToken] = useSelectedToken()
   const { address: walletAddress } = useAccount()
   const { switchNetworkAsync } = useSwitchNetworkWithConfig({
     isSwitchingNetworkBeforeTx: true
@@ -169,8 +160,8 @@ export function TransferPanel() {
 
   const [dialogProps, openDialog] = useDialog2()
 
-  const [tokenImportDialogProps] = useDialog()
   const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
+
   const [
     usdcWithdrawalConfirmationDialogProps,
     openUSDCWithdrawalConfirmationDialog
@@ -180,8 +171,6 @@ export function TransferPanel() {
     openUSDCDepositConfirmationDialog
   ] = useDialog()
 
-  const { openDialog: openTokenImportDialog } = useTokenImportDialogStore()
-
   const isCustomDestinationTransfer = !!latestDestinationAddress.current
 
   const {
@@ -201,20 +190,6 @@ export function TransferPanel() {
     setShowProjectsListing(false)
   }, [childChain.id, parentChain.id])
 
-  useEffect(() => {
-    if (importTokenModalStatus !== ImportTokenModalStatus.IDLE) {
-      return
-    }
-
-    openTokenImportDialog()
-  }, [importTokenModalStatus, openTokenImportDialog])
-
-  function closeWithResetTokenImportDialog() {
-    setSelectedToken(null)
-    setImportTokenModalStatus(ImportTokenModalStatus.CLOSED)
-    tokenImportDialogProps.onClose(false)
-  }
-
   function clearAmountInput() {
     // clear amount input on transfer panel
     setAmount('')
@@ -255,6 +230,12 @@ export function TransferPanel() {
     tokensFromUser
   ])
 
+  useEffect(() => {
+    if (isTokenAlreadyImported === false && tokenFromSearchParams) {
+      openDialog('import_token')
+    }
+  }, [isTokenAlreadyImported, tokenFromSearchParams, openDialog])
+
   const isBridgingANewStandardToken = useMemo(() => {
     const isUnbridgedToken =
       selectedToken !== null && typeof selectedToken.l2Address === 'undefined'
@@ -1182,14 +1163,6 @@ export function TransferPanel() {
         />
         <MoveFundsButton onClick={moveFundsButtonOnClick} />
 
-        {isTokenAlreadyImported === false && tokenFromSearchParams && (
-          <TokenImportDialog
-            {...tokenImportDialogProps}
-            onClose={closeWithResetTokenImportDialog}
-            tokenAddress={tokenFromSearchParams}
-          />
-        )}
-
         <TokenDepositCheckDialog
           {...tokenCheckDialogProps}
           type={tokenDepositCheckDialogType}

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelUtils.ts

@@ -1,10 +1,3 @@
-export enum ImportTokenModalStatus {
-  // "IDLE" is here to distinguish between the modal never being opened, and being closed after a user interaction
-  IDLE,
-  OPEN,
-  CLOSED
-}
-
 export function getWarningTokenDescription(warningTokenType: number) {
   switch (warningTokenType) {
     case 0:

packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx

@@ -10,6 +10,7 @@ import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { CustomDestinationAddressConfirmationDialog } from '../TransferPanel/CustomDestinationAddressConfirmationDialog'
+import { TokenImportDialog } from '../TransferPanel/TokenImportDialog'
 /**
  * Returns a promise which resolves to an array [boolean, unknown] value,
  * `false` if the action was canceled and `true` if it was confirmed.
@@ -31,6 +32,7 @@ type DialogType =
   | 'approve_token'
   | 'approve_cctp_usdc'
   | 'approve_custom_fee_token'
+  | 'import_token'
   | 'withdraw'
   | 'scw_custom_destination_address'
 
@@ -79,8 +81,8 @@ type DialogProps = {
 
 export function DialogWrapper(props: DialogProps) {
   const isOftTransfer = useIsOftV2Transfer()
-  const [selectedToken] = useSelectedToken()
-  const [{ amount }] = useArbQueryParams()
+  const [selectedToken, setSelectedToken] = useSelectedToken()
+  const [{ amount, token: tokenFromSearchParams }] = useArbQueryParams()
   const [networks] = useNetworks()
   const { childChainProvider } = useNetworksRelationship(networks)
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
@@ -106,6 +108,20 @@ export function DialogWrapper(props: DialogProps) {
           isOft={isOftTransfer}
         />
       )
+    case 'import_token':
+      if (tokenFromSearchParams) {
+        return (
+          <TokenImportDialog
+            {...commonProps}
+            onClose={imported => {
+              setSelectedToken(imported ? tokenFromSearchParams : null)
+              commonProps.onClose(imported)
+            }}
+            tokenAddress={tokenFromSearchParams}
+          />
+        )
+      }
+      return null
     case 'approve_custom_fee_token':
       if (nativeCurrency.isCustom) {
         return (