diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx index 689fca821b..0a07b7aaaf 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx @@ -1,13 +1,11 @@ import React, { useEffect, useMemo } from 'react' import { ArrowsUpDownIcon, ArrowDownIcon } from '@heroicons/react/24/outline' import { twMerge } from 'tailwind-merge' -import { BigNumber, utils } from 'ethers' +import { utils } from 'ethers' import { Chain, useAccount } from 'wagmi' import { useMedia } from 'react-use' -import { Loader } from '../common/atoms/Loader' import { useAppState } from '../../state' -import { formatAmount } from '../../util/NumberUtils' import { getExplorerUrl, isNetwork } from '../../util/networks' import { useDestinationAddressStore } from './AdvancedSettings' import { ExternalLink } from '../common/ExternalLink' @@ -19,7 +17,6 @@ import { isTokenSepoliaUSDC, isTokenMainnetUSDC } from '../../util/TokenUtils' -import { ether } from '../../constants' import { useUpdateUSDCBalances } from '../../hooks/CCTP/useUpdateUSDCBalances' import { useNativeCurrency } from '../../hooks/useNativeCurrency' import { useNetworks } from '../../hooks/useNetworks' @@ -30,7 +27,6 @@ import { useUpdateUSDCTokenData } from './TransferPanelMain/hooks' import { useBalances } from '../../hooks/useBalances' import { DestinationNetworkBox } from './TransferPanelMain/DestinationNetworkBox' import { SourceNetworkBox } from './TransferPanelMain/SourceNetworkBox' -import { NetworkType } from './TransferPanelMain/utils' export function SwitchNetworksButton( props: React.ButtonHTMLAttributes @@ -201,33 +197,6 @@ export function NetworkContainer({ ) } -function StyledLoader() { - return -} - -export function ETHBalance({ - balance, - prefix = '', - on -}: { - balance: BigNumber | null - prefix?: string - on: NetworkType -}) { - if (!balance) { - return - } - - return ( -

- {prefix} - - {formatAmount(balance, { symbol: ether.symbol })} - -

- ) -} - export function BalancesContainer({ children }: { children: React.ReactNode }) { return (
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx index c5a2ee8078..eab8ef604e 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx @@ -1,11 +1,9 @@ -import { constants, utils } from 'ethers' -import { useAccount } from 'wagmi' +import { constants } from 'ethers' import { useNetworks } from '../../../hooks/useNetworks' import { useDestinationAddressStore } from '../AdvancedSettings' import { BalancesContainer, - ETHBalance, NetworkContainer, NetworkListboxPlusBalancesContainer } from '../TransferPanelMain' @@ -28,6 +26,9 @@ import { import { useNativeCurrencyBalances } from './useNativeCurrencyBalances' import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsBatchTransferSupported' import { useArbQueryParams } from '../../../hooks/useArbQueryParams' +import { ether } from '../../../constants' +import { formatAmount } from '../../../util/NumberUtils' +import { Loader } from '../../common/atoms/Loader' function NativeCurrencyDestinationBalance({ prefix }: { prefix?: string }) { const nativeCurrencyBalances = useNativeCurrencyBalances() @@ -47,13 +48,28 @@ function NativeCurrencyDestinationBalance({ prefix }: { prefix?: string }) { /> ) } + if (!nativeCurrencyBalances.destinationBalance) { + return ( +

+ {prefix} + +

+ ) + } return ( - +

+ {prefix} + + {formatAmount(nativeCurrencyBalances.destinationBalance, { + symbol: ether.symbol + })} + +

) } @@ -138,12 +154,10 @@ export function DestinationNetworkBox({ }: { showUsdcSpecificInfo: boolean }) { - const { address: walletAddress } = useAccount() const [networks] = useNetworks() const { destinationAddress } = useDestinationAddressStore() const [{ amount2 }] = useArbQueryParams() const isBatchTransferSupported = useIsBatchTransferSupported() - const destinationAddressOrWalletAddress = destinationAddress || walletAddress const [ destinationNetworkSelectionDialogProps, openDestinationNetworkSelectionDialog @@ -161,17 +175,12 @@ export function DestinationNetworkBox({ onClick={openDestinationNetworkSelectionDialog} /> - {destinationAddressOrWalletAddress && - utils.isAddress(destinationAddressOrWalletAddress) && ( - <> - - {isBatchTransferSupported && Number(amount2) > 0 && ( - - )} - - )} + + {isBatchTransferSupported && Number(amount2) > 0 && ( + + )} diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/TokenBalance.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/TokenBalance.tsx index 52c74d070a..1e56d31e81 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/TokenBalance.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/TokenBalance.tsx @@ -28,7 +28,12 @@ export function TokenBalance({ } if (!balance) { - return + return ( +

+ {prefix} + +

+ ) } const tokenSymbol = tokenSymbolOverride ?? forToken.symbol