fix dialogs

OffchainLabs · Jan 30, 2025 · a079e1a · a079e1a
1 parent af0ffd2
commit a079e1a
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 89 deletions.
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx
@@ -17,11 +17,8 @@ import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
 import { warningToast } from '../common/atoms/Toast'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
-import { isTransferDisabledToken } from '../../util/TokenTransferDisabledUtils'
-import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
 import { TokenInfo } from './TokenInfo'
 import { NoteBox } from '../common/NoteBox'
-import { isTeleportEnabledToken } from '../../util/TokenTeleportEnabledUtils'
 import { useSelectedToken } from '../../hooks/useSelectedToken'
 
 enum ImportStatus {
@@ -72,13 +69,8 @@ export function TokenImportDialog({
   } = useAppState()
   const [selectedToken, setSelectedToken] = useSelectedToken()
   const [networks] = useNetworks()
-  const {
-    childChain,
-    childChainProvider,
-    parentChain,
-    parentChainProvider,
-    isTeleportMode
-  } = useNetworksRelationship(networks)
+  const { childChainProvider, parentChainProvider } =
+    useNetworksRelationship(networks)
 
   const tokensFromUser = useTokensFromUser()
   const latestTokensFromUser = useLatest(tokensFromUser)
@@ -91,8 +83,6 @@ export function TokenImportDialog({
   const [status, setStatus] = useState<ImportStatus>(ImportStatus.LOADING)
   const [isImportingToken, setIsImportingToken] = useState<boolean>(false)
   const [tokenToImport, setTokenToImport] = useState<ERC20BridgeToken>()
-  const { openDialog: openTransferDisabledDialog } =
-    useTransferDisabledDialogStore()
   const { isOpen } = useTokenImportDialogStore()
   const [isDialogVisible, setIsDialogVisible] = useState(false)
   const { data: l1Address, isLoading: isL1AddressLoading } = useERC20L1Address({
@@ -296,19 +286,6 @@ export function TokenImportDialog({
         setStatus(ImportStatus.ERROR)
       })
     }
-
-    if (isTransferDisabledToken(l1Address, childChain.id)) {
-      openTransferDisabledDialog()
-      return
-    }
-
-    if (
-      isTeleportMode &&
-      !isTeleportEnabledToken(l1Address, parentChain.id, childChain.id)
-    ) {
-      openTransferDisabledDialog()
-      return
-    }
   }
 
   if (status === ImportStatus.LOADING) {

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenSearch.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenSearch.tsx
@@ -33,10 +33,7 @@ import { SearchPanel } from '../common/SearchPanel/SearchPanel'
 import { TokenRow } from './TokenRow'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
-import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
-import { isTransferDisabledToken } from '../../util/TokenTransferDisabledUtils'
 import { Switch } from '../common/atoms/Switch'
-import { isTeleportEnabledToken } from '../../util/TokenTeleportEnabledUtils'
 import { useSelectedToken } from '../../hooks/useSelectedToken'
 import { useBalances } from '../../hooks/useBalances'
 import { useSetInputAmount } from '../../hooks/TransferPanel/useSetInputAmount'
@@ -525,10 +522,7 @@ export function TokenSearch({
   } = useAppState()
   const [, setSelectedToken] = useSelectedToken()
   const [networks] = useNetworks()
-  const { childChain, parentChain, parentChainProvider, isTeleportMode } =
-    useNetworksRelationship(networks)
-  const { openDialog: openTransferDisabledDialog } =
-    useTransferDisabledDialogStore()
+  const { childChain, parentChainProvider } = useNetworksRelationship(networks)
 
   const { isValidating: isFetchingTokenLists } = useTokenLists(childChain.id) // to show a small loader while token-lists are loading when search panel opens
 
@@ -573,19 +567,6 @@ export function TokenSearch({
         token.updateTokenData(_token.address)
         setSelectedToken(_token.address)
       }
-
-      if (isTransferDisabledToken(_token.address, childChain.id)) {
-        openTransferDisabledDialog()
-        return
-      }
-
-      if (
-        isTeleportMode &&
-        !isTeleportEnabledToken(_token.address, parentChain.id, childChain.id)
-      ) {
-        openTransferDisabledDialog()
-        return
-      }
     } catch (error: any) {
       console.warn(error)
 

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferDisabledDialog.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferDisabledDialog.tsx
@@ -1,4 +1,3 @@
-import { create } from 'zustand'
 import { useEffect, useMemo, useState } from 'react'
 
 import { Dialog } from '../common/Dialog'
@@ -12,31 +11,19 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { withdrawOnlyTokens } from '../../util/WithdrawOnlyUtils'
 import { useSelectedToken } from '../../hooks/useSelectedToken'
 import { useSelectedTokenIsWithdrawOnly } from './hooks/useSelectedTokenIsWithdrawOnly'
-
-type TransferDisabledDialogStore = {
-  isOpen: boolean
-  openDialog: () => void
-  closeDialog: () => void
-}
-
-export const useTransferDisabledDialogStore =
-  create<TransferDisabledDialogStore>(set => ({
-    isOpen: false,
-    openDialog: () => set({ isOpen: true }),
-    closeDialog: () => set({ isOpen: false })
-  }))
+import { isTransferDisabledToken } from '../../util/TokenTransferDisabledUtils'
+import { isTeleportEnabledToken } from '../../util/TokenTeleportEnabledUtils'
 
 export function TransferDisabledDialog() {
   const [networks] = useNetworks()
-  const { isDepositMode, isTeleportMode } = useNetworksRelationship(networks)
+  const { isDepositMode, isTeleportMode, parentChain, childChain } =
+    useNetworksRelationship(networks)
   const [selectedToken, setSelectedToken] = useSelectedToken()
+  // for tracking local state and prevent flickering with async URL params updating
+  const [selectedTokenAddressLocalValue, setSelectedTokenAddressLocalValue] =
+    useState<string | null>(null)
   const { isSelectedTokenWithdrawOnly, isSelectedTokenWithdrawOnlyLoading } =
     useSelectedTokenIsWithdrawOnly()
-  const {
-    isOpen: isOpenTransferDisabledDialog,
-    openDialog: openTransferDisabledDialog,
-    closeDialog: closeTransferDisabledDialog
-  } = useTransferDisabledDialogStore()
   const unsupportedToken = sanitizeTokenSymbol(selectedToken?.symbol ?? '', {
     erc20L1Address: selectedToken?.address,
     chainId: networks.sourceChain.id
@@ -66,27 +53,49 @@ export function TransferDisabledDialog() {
     updateL2ChainIdForTeleport()
   }, [isTeleportMode, networks.destinationChainProvider])
 
-  useEffect(() => {
-    // do not allow import of withdraw-only tokens at deposit mode
+  const shouldShowDialog = useMemo(() => {
+    if (
+      !selectedToken ||
+      selectedToken.address === selectedTokenAddressLocalValue
+    ) {
+      return false
+    }
+
+    if (isTransferDisabledToken(selectedToken.address, childChain.id)) {
+      return true
+    }
+
+    if (
+      isTeleportMode &&
+      !isTeleportEnabledToken(
+        selectedToken.address,
+        parentChain.id,
+        childChain.id
+      )
+    ) {
+      return true
+    }
+
     if (
       isDepositMode &&
       isSelectedTokenWithdrawOnly &&
       !isSelectedTokenWithdrawOnlyLoading
     ) {
-      openTransferDisabledDialog()
+      return true
     }
+
+    return false
   }, [
-    isSelectedTokenWithdrawOnly,
+    childChain.id,
     isDepositMode,
-    openTransferDisabledDialog,
-    isSelectedTokenWithdrawOnlyLoading
+    isSelectedTokenWithdrawOnly,
+    isSelectedTokenWithdrawOnlyLoading,
+    isTeleportMode,
+    parentChain.id,
+    selectedToken,
+    selectedTokenAddressLocalValue
   ])
 
-  const onClose = () => {
-    setSelectedToken(null)
-    closeTransferDisabledDialog()
-  }
-
   const sourceChainName = getNetworkName(networks.sourceChain.id)
   const destinationChainName = getNetworkName(networks.destinationChain.id)
   const l2ChainIdForTeleportName = l2ChainIdForTeleport
@@ -100,13 +109,30 @@ export function TransferDisabledDialog() {
         ?.find(_token => _token.symbol === 'GHO')
         ?.l1Address.toLowerCase()
 
+  useEffect(() => {
+    if (
+      selectedTokenAddressLocalValue &&
+      (!selectedToken ||
+        selectedToken.address !== selectedTokenAddressLocalValue)
+    ) {
+      setSelectedTokenAddressLocalValue(null)
+    }
+  }, [selectedToken, selectedTokenAddressLocalValue])
+
+  const onClose = () => {
+    if (selectedToken) {
+      setSelectedTokenAddressLocalValue(selectedToken.address)
+      setSelectedToken(null)
+    }
+  }
+
   return (
     <Dialog
       closeable
       title="Token cannot be bridged here"
       cancelButtonProps={{ className: 'hidden' }}
       actionButtonTitle="Close"
-      isOpen={isOpenTransferDisabledDialog}
+      isOpen={shouldShowDialog}
       onClose={onClose}
     >
       <div className="flex flex-col space-y-4 py-4">

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
@@ -14,7 +14,6 @@ import { useSelectedTokenBalances } from '../../hooks/TransferPanel/useSelectedT
 import { useSelectedToken } from '../../hooks/useSelectedToken'
 import { TransferReadinessRichErrorMessage } from './useTransferReadinessUtils'
 import { ExternalLink } from '../common/ExternalLink'
-import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
 import { formatAmount } from '../../util/NumberUtils'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { Loader } from '../common/atoms/Loader'
@@ -146,9 +145,6 @@ function ErrorMessage({
 }: {
   errorMessage: string | TransferReadinessRichErrorMessage | undefined
 }) {
-  const { openDialog: openTransferDisabledDialog } =
-    useTransferDisabledDialogStore()
-
   if (typeof errorMessage === 'undefined') {
     return null
   }
@@ -176,14 +172,7 @@ function ErrorMessage({
     case TransferReadinessRichErrorMessage.TOKEN_TRANSFER_DISABLED:
       return (
         <div className="text-sm text-brick">
-          <span>This token can&apos;t be bridged over.</span>{' '}
-          <button
-            className="arb-hover underline"
-            onClick={openTransferDisabledDialog}
-          >
-            Learn more
-          </button>
-          <span>.</span>
+          <span>This token can&apos;t be bridged over.</span>
         </div>
       )
   }