From a079e1a4e6fc84a9c80d547838085e70bbfc009b Mon Sep 17 00:00:00 2001 From: Bartek Date: Thu, 30 Jan 2025 20:00:13 +0100 Subject: [PATCH] fix dialogs --- .../TransferPanel/TokenImportDialog.tsx | 27 +----- .../components/TransferPanel/TokenSearch.tsx | 21 +---- .../TransferPanel/TransferDisabledDialog.tsx | 90 ++++++++++++------- .../TransferPanel/TransferPanelMainInput.tsx | 13 +-- 4 files changed, 62 insertions(+), 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 index 5f095918b3..43f73e90a3 100644 --- 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.LOADING) const [isImportingToken, setIsImportingToken] = useState(false) const [tokenToImport, setTokenToImport] = useState() - 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 index cfc92fe8bb..5425e36828 100644 --- 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 index 96fe1ac3e6..ca84c683e6 100644 --- 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(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(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 (
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx index b8c5f978f4..eb2bd4da33 100644 --- 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 (
- This token can't be bridged over.{' '} - - . + This token can't be bridged over.
) }