From ad09d9db532c07f0a1958c1e8130ccb5d9d2a764 Mon Sep 17 00:00:00 2001 From: Bartek Date: Wed, 22 Jan 2025 20:21:56 +0100 Subject: [PATCH 1/4] token tooltip --- .../components/TransferPanel/TokenButton.tsx | 2 +- .../TransferPanel/TokenInfoTooltip.tsx | 93 ++++++++++++++++++ .../components/TransferPanel/TokenLogo.tsx | 66 +++++++++++++ .../TransferPanelMain/SourceNetworkBox.tsx | 3 +- .../TransferPanelMain/TokenBalance.tsx | 79 --------------- .../TransferPanel/TransferPanelSummary.tsx | 26 +---- .../common/TokenSymbolWithExplorerLink.tsx | 97 ------------------- .../src/components/common/Tooltip.tsx | 6 +- .../arb-token-bridge-ui/src/pages/_app.tsx | 1 + .../arb-token-bridge-ui/src/styles/tippy.css | 5 + 10 files changed, 175 insertions(+), 203 deletions(-) create mode 100644 packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfoTooltip.tsx create mode 100644 packages/arb-token-bridge-ui/src/components/TransferPanel/TokenLogo.tsx delete mode 100644 packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/TokenBalance.tsx delete mode 100644 packages/arb-token-bridge-ui/src/components/common/TokenSymbolWithExplorerLink.tsx create mode 100644 packages/arb-token-bridge-ui/src/styles/tippy.css diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx index 196a01c634..d679d1be6b 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx @@ -20,7 +20,7 @@ import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils' export type TokenButtonOptions = { symbol?: string - logoSrc?: string + logoSrc?: string | null disabled?: boolean } diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfoTooltip.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfoTooltip.tsx new file mode 100644 index 0000000000..5b527a2165 --- /dev/null +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfoTooltip.tsx @@ -0,0 +1,93 @@ +import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types' +import { useNetworks } from '../../hooks/useNetworks' +import { useNetworksRelationship } from '../../hooks/useNetworksRelationship' +import { shortenAddress } from '../../util/CommonUtils' +import { captureSentryErrorWithExtraData } from '../../util/SentryUtils' +import { ExternalLink } from '../common/ExternalLink' +import { Tooltip } from '../common/Tooltip' +import { TokenLogo } from './TokenLogo' +import { useNativeCurrency } from '../../hooks/useNativeCurrency' + +const createBlockExplorerUrlForToken = ({ + explorerLink, + tokenAddress +}: { + explorerLink: string | undefined + tokenAddress: string | undefined +}): string | undefined => { + if (!explorerLink) { + return undefined + } + if (!tokenAddress) { + return undefined + } + try { + const url = new URL(explorerLink) + url.pathname += `token/${tokenAddress}` + return url.toString() + } catch (error) { + captureSentryErrorWithExtraData({ + error, + originFunction: 'createBlockExplorerUrlForToken' + }) + return undefined + } +} + +export const TokenInfoTooltip = ({ + token +}: { + token: ERC20BridgeToken | null +}) => { + const [networks] = useNetworks() + const { isDepositMode, childChainProvider } = + useNetworksRelationship(networks) + const childChainNativeCurrency = useNativeCurrency({ + provider: childChainProvider + }) + + if (!token) { + return {childChainNativeCurrency.symbol} + } + + const tokenAddress = isDepositMode ? token.address : token.l2Address + + const href = createBlockExplorerUrlForToken({ + explorerLink: networks.sourceChain.blockExplorers?.default.url, + tokenAddress + }) + + return ( + + +
+
+ {token.symbol} + + {token.name} + +
+ {href && tokenAddress && ( + + {shortenAddress(tokenAddress)} + + )} +
+ + } + tippyProps={{ + arrow: false, + interactive: true + }} + > + {token.symbol} + + ) +} diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenLogo.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenLogo.tsx new file mode 100644 index 0000000000..a53d5efbfe --- /dev/null +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenLogo.tsx @@ -0,0 +1,66 @@ +import { useMemo } from 'react' + +import { useAppState } from '../../state' +import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils' +import { useNetworks } from '../../hooks/useNetworks' +import { useNetworksRelationship } from '../../hooks/useNetworksRelationship' +import { useNativeCurrency } from '../../hooks/useNativeCurrency' +import { SafeImage } from '../common/SafeImage' +import { twMerge } from 'tailwind-merge' + +/** + * Shows the selected token logo by default. + * @param {Object} props + * @param {string | null} [props.srcOverride] - Optional URL to override default token logo source + */ +export const TokenLogo = ({ + srcOverride, + className +}: { + srcOverride?: string | null + className?: string +}) => { + const { + app: { selectedToken } + } = useAppState() + const tokensFromLists = useTokensFromLists() + const tokensFromUser = useTokensFromUser() + + const [networks] = useNetworks() + const { childChainProvider } = useNetworksRelationship(networks) + const nativeCurrency = useNativeCurrency({ provider: childChainProvider }) + + const src = useMemo(() => { + // Override to show the native currency logo + if (srcOverride === null) { + return nativeCurrency.logoUrl + } + + if (typeof srcOverride !== 'undefined') { + return srcOverride + } + + if (selectedToken) { + return ( + tokensFromLists[selectedToken.address]?.logoURI ?? + tokensFromUser[selectedToken.address]?.logoURI + ) + } + + return nativeCurrency.logoUrl + }, [ + nativeCurrency.logoUrl, + selectedToken, + srcOverride, + tokensFromLists, + tokensFromUser + ]) + + return ( + + ) +} diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx index 6346ab2dca..3003194710 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx @@ -161,11 +161,10 @@ export function SourceNetworkBox() { ) ) : undefined, - logoSrc: nativeCurrency.logoUrl + logoSrc: null }), [ nativeCurrency.symbol, - nativeCurrency.logoUrl, nativeCurrencyBalances.sourceBalance, nativeCurrencyDecimalsOnSourceChain ] 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 deleted file mode 100644 index 24f66b7437..0000000000 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/TokenBalance.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { useMemo } from 'react' -import { BigNumber } from 'ethers' - -import { ERC20BridgeToken } from '../../../hooks/arbTokenBridge.types' -import { - NativeCurrencyErc20, - useNativeCurrency -} from '../../../hooks/useNativeCurrency' -import { Loader } from '../../common/atoms/Loader' -import { TokenSymbolWithExplorerLink } from '../../common/TokenSymbolWithExplorerLink' -import { formatAmount } from '../../../util/NumberUtils' - -import { NetworkType } from './utils' -import { useNetworks } from '../../../hooks/useNetworks' -import { useNetworksRelationship } from '../../../hooks/useNetworksRelationship' - -export function TokenBalance({ - forToken, - balance, - on, - prefix = '', - tokenSymbolOverride -}: { - forToken: ERC20BridgeToken | NativeCurrencyErc20 | null - balance: BigNumber | null - on: NetworkType - prefix?: string - tokenSymbolOverride?: string -}) { - const isParentChain = on === NetworkType.parentChain - const [networks] = useNetworks() - const { childChainProvider } = useNetworksRelationship(networks) - const nativeCurrency = useNativeCurrency({ - provider: childChainProvider - }) - - const isCustomNativeCurrency = - nativeCurrency.isCustom && - forToken?.address.toLowerCase() === nativeCurrency.address.toLowerCase() - - const decimals = useMemo(() => { - if (!isParentChain && isCustomNativeCurrency) { - // Native currency on Orbit chain, always 18 decimals - return 18 - } - return forToken?.decimals - }, [forToken?.decimals, isCustomNativeCurrency, isParentChain]) - - if (!forToken) { - return null - } - - if (!balance) { - return ( -

- {prefix} - -

- ) - } - - const tokenSymbol = tokenSymbolOverride ?? forToken.symbol - - return ( -

- {prefix} - - {formatAmount(balance, { - decimals - })} - {' '} - -

- ) -} diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx index 3761043fd8..4c37dfb6d3 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx @@ -4,11 +4,10 @@ import { twMerge } from 'tailwind-merge' import Image from 'next/image' import { formatAmount } from '../../util/NumberUtils' -import { getNetworkName, isNetwork } from '../../util/networks' +import { getNetworkName } from '../../util/networks' import { useNativeCurrency } from '../../hooks/useNativeCurrency' import { useGasSummary } from '../../hooks/TransferPanel/useGasSummary' import { useArbQueryParams } from '../../hooks/useArbQueryParams' -import { TokenSymbolWithExplorerLink } from '../common/TokenSymbolWithExplorerLink' import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types' import { useNetworks } from '../../hooks/useNetworks' import { useNetworksRelationship } from '../../hooks/useNetworksRelationship' @@ -16,12 +15,12 @@ import { NativeCurrencyPrice, useIsBridgingEth } from './NativeCurrencyPrice' import { useAppState } from '../../state' import { Loader } from '../common/atoms/Loader' import { Tooltip } from '../common/Tooltip' -import { isTokenNativeUSDC } from '../../util/TokenUtils' import { NoteBox } from '../common/NoteBox' import { DISABLED_CHAIN_IDS } from './useTransferReadiness' import { useIsBatchTransferSupported } from '../../hooks/TransferPanel/useIsBatchTransferSupported' import { getConfirmationTime } from '../../util/WithdrawalUtils' import LightningIcon from '@/images/LightningIcon.svg' +import { TokenInfoTooltip } from './TokenInfoTooltip' export type TransferPanelSummaryToken = { symbol: string @@ -190,16 +189,6 @@ export function TransferPanelSummary({ token }: TransferPanelSummaryProps) { const [{ amount, amount2 }] = useArbQueryParams() const isBatchTransferSupported = useIsBatchTransferSupported() - const { - isArbitrumOne: isDestinationChainArbitrumOne, - isArbitrumSepolia: isDestinationChainArbitrumSepolia - } = isNetwork(networks.destinationChain.id) - - const isDepositingUSDCtoArbOneOrArbSepolia = - isTokenNativeUSDC(token?.address) && - isDepositMode && - (isDestinationChainArbitrumOne || isDestinationChainArbitrumSepolia) - if (gasSummaryStatus === 'unavailable') { return ( @@ -242,16 +231,9 @@ export function TransferPanelSummary({ token }: TransferPanelSummaryProps) { You will receive on {getNetworkName(networks.destinationChain.id)}: - + {formatAmount(Number(amount))}{' '} - {isDepositingUSDCtoArbOneOrArbSepolia ? ( - <>USDC - ) : ( - - )} + {isBridgingEth && ( )} diff --git a/packages/arb-token-bridge-ui/src/components/common/TokenSymbolWithExplorerLink.tsx b/packages/arb-token-bridge-ui/src/components/common/TokenSymbolWithExplorerLink.tsx deleted file mode 100644 index ac91c1935c..0000000000 --- a/packages/arb-token-bridge-ui/src/components/common/TokenSymbolWithExplorerLink.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { useMemo } from 'react' -import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types' -import { - NativeCurrencyErc20, - useNativeCurrency -} from '../../hooks/useNativeCurrency' -import { isTokenNativeUSDC, sanitizeTokenSymbol } from '../../util/TokenUtils' -import { ExternalLink } from './ExternalLink' -import { useNetworks } from '../../hooks/useNetworks' -import { useNetworksRelationship } from '../../hooks/useNetworksRelationship' -import { captureSentryErrorWithExtraData } from '../../util/SentryUtils' - -const createBlockExplorerUrlForToken = ({ - explorerLink, - tokenAddress -}: { - explorerLink: string | undefined - tokenAddress: string | undefined -}): string | undefined => { - if (!explorerLink) { - return undefined - } - if (!tokenAddress) { - return undefined - } - try { - const url = new URL(explorerLink) - url.pathname += `token/${tokenAddress}` - return url.toString() - } catch (error) { - captureSentryErrorWithExtraData({ - error, - originFunction: 'createBlockExplorerUrlForToken' - }) - return undefined - } -} - -const isERC20BridgeToken = ( - token: ERC20BridgeToken | NativeCurrencyErc20 | null -): token is ERC20BridgeToken => - token !== null && !token.hasOwnProperty('isCustom') - -export function TokenSymbolWithExplorerLink({ - token, - tokenSymbolOverride, - isParentChain -}: { - token: ERC20BridgeToken | NativeCurrencyErc20 | null - tokenSymbolOverride?: string - isParentChain: boolean -}) { - const [networks] = useNetworks() - const { childChain, childChainProvider, parentChain } = - useNetworksRelationship(networks) - const chain = isParentChain ? parentChain : childChain - // always use native currency of child chain - const nativeCurrency = useNativeCurrency({ - provider: childChainProvider - }) - - const symbol = useMemo(() => { - if (!token) { - return nativeCurrency.symbol - } - - return ( - tokenSymbolOverride ?? - sanitizeTokenSymbol(token.symbol, { - erc20L1Address: token.address, - chainId: chain.id - }) - ) - }, [token, tokenSymbolOverride, chain, nativeCurrency.symbol]) - - /* we don't want to show explorer link for native currency (either ETH or custom token), or USDC because user can bridge USDC to USDC.e or native USDC, vice versa */ - if ( - token === null || - !isERC20BridgeToken(token) || - isTokenNativeUSDC(token.address) - ) { - return {symbol} - } - - const href = createBlockExplorerUrlForToken({ - explorerLink: chain.blockExplorers - ? chain.blockExplorers.default.url - : undefined, - tokenAddress: isParentChain ? token.address : token.l2Address - }) - - return ( - - {symbol} - - ) -} diff --git a/packages/arb-token-bridge-ui/src/components/common/Tooltip.tsx b/packages/arb-token-bridge-ui/src/components/common/Tooltip.tsx index 61ae77e4ca..8e1ddeb44d 100644 --- a/packages/arb-token-bridge-ui/src/components/common/Tooltip.tsx +++ b/packages/arb-token-bridge-ui/src/components/common/Tooltip.tsx @@ -1,10 +1,11 @@ -import Tippy from '@tippyjs/react' +import Tippy, { TippyProps } from '@tippyjs/react' export type TooltipProps = { show?: boolean children: React.ReactNode content?: React.ReactNode wrapperClassName?: string + tippyProps?: TippyProps theme?: 'light' | 'dark' } @@ -13,6 +14,7 @@ export function Tooltip({ content, wrapperClassName = 'w-max', theme = 'light', + tippyProps = {}, children }: TooltipProps): JSX.Element | null { if (!content) { @@ -24,7 +26,7 @@ export function Tooltip({ } return ( - +
{children}
 ) diff --git a/packages/arb-token-bridge-ui/src/pages/_app.tsx b/packages/arb-token-bridge-ui/src/pages/_app.tsx index 95048a4def..3bb887049a 100644 --- a/packages/arb-token-bridge-ui/src/pages/_app.tsx +++ b/packages/arb-token-bridge-ui/src/pages/_app.tsx @@ -17,6 +17,7 @@ import '@rainbow-me/rainbowkit/styles.css' import { Layout } from '../components/common/Layout' import '../styles/tailwind.css' +import '../styles/tippy.css' import '../styles/purple.css' import { ChainKeyQueryParam, diff --git a/packages/arb-token-bridge-ui/src/styles/tippy.css b/packages/arb-token-bridge-ui/src/styles/tippy.css new file mode 100644 index 0000000000..6116eb7166 --- /dev/null +++ b/packages/arb-token-bridge-ui/src/styles/tippy.css @@ -0,0 +1,5 @@ +.tippy-box[data-theme~='dark'] { + /* background-color: #000; */ + border-radius: 5px; + border: 1px solid #777; +} From a29ac4bf1029856075ba5a0775664f19b68451f6 Mon Sep 17 00:00:00 2001 From: Bartek Date: Wed, 22 Jan 2025 20:25:34 +0100 Subject: [PATCH 2/4] comment --- .../src/components/TransferPanel/TokenLogo.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenLogo.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenLogo.tsx index a53d5efbfe..f5e1d48ae9 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenLogo.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenLogo.tsx @@ -12,6 +12,7 @@ import { twMerge } from 'tailwind-merge' * Shows the selected token logo by default. * @param {Object} props * @param {string | null} [props.srcOverride] - Optional URL to override default token logo source + * @param {string | undefined} [props.className] - Class name override */ export const TokenLogo = ({ srcOverride, From a60d26660c5e12b2892db514c71f63b520c0dd4a Mon Sep 17 00:00:00 2001 From: Bartek Date: Wed, 22 Jan 2025 20:26:57 +0100 Subject: [PATCH 3/4] unused code --- packages/arb-token-bridge-ui/src/styles/tippy.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/arb-token-bridge-ui/src/styles/tippy.css b/packages/arb-token-bridge-ui/src/styles/tippy.css index 6116eb7166..9afbbc8bfd 100644 --- a/packages/arb-token-bridge-ui/src/styles/tippy.css +++ b/packages/arb-token-bridge-ui/src/styles/tippy.css @@ -1,5 +1,4 @@ .tippy-box[data-theme~='dark'] { - /* background-color: #000; */ border-radius: 5px; border: 1px solid #777; } From 40aae6fdd1450063d7677e797b822cab67456653 Mon Sep 17 00:00:00 2001 From: Bartek Date: Mon, 27 Jan 2025 14:31:48 +0100 Subject: [PATCH 4/4] address comments --- .../components/TransferPanel/TokenButton.tsx | 33 +-------- .../TransferPanel/TokenInfoTooltip.tsx | 73 ++++++++----------- .../src/components/TransferPanel/TokenRow.tsx | 42 +++-------- .../arb-token-bridge-ui/src/pages/_app.tsx | 1 - .../src/styles/tailwind.css | 5 ++ .../arb-token-bridge-ui/src/styles/tippy.css | 4 - 6 files changed, 50 insertions(+), 108 deletions(-) delete mode 100644 packages/arb-token-bridge-ui/src/styles/tippy.css diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx index d679d1be6b..db064ba97c 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx @@ -15,8 +15,7 @@ import { import { useNetworks } from '../../hooks/useNetworks' import { useNetworksRelationship } from '../../hooks/useNetworksRelationship' import { Transition } from '../common/Transition' -import { SafeImage } from '../common/SafeImage' -import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils' +import { TokenLogo } from './TokenLogo' export type TokenButtonOptions = { symbol?: string @@ -37,9 +36,6 @@ export function TokenButton({ const [networks] = useNetworks() const { childChainProvider } = useNetworksRelationship(networks) - const tokensFromLists = useTokensFromLists() - const tokensFromUser = useTokensFromUser() - const nativeCurrency = useNativeCurrency({ provider: childChainProvider }) const tokenSymbol = useMemo(() => { @@ -57,27 +53,6 @@ export function TokenButton({ }) }, [selectedToken, networks.sourceChain.id, nativeCurrency.symbol, options]) - const tokenLogoSrc = useMemo(() => { - if (typeof options?.logoSrc !== 'undefined') { - return options.logoSrc || nativeCurrency.logoUrl - } - - if (selectedToken) { - return ( - tokensFromLists[selectedToken.address]?.logoURI ?? - tokensFromUser[selectedToken.address]?.logoURI - ) - } - - return nativeCurrency.logoUrl - }, [ - nativeCurrency.logoUrl, - options, - selectedToken, - tokensFromLists, - tokensFromUser - ]) - return ( <> @@ -90,11 +65,7 @@ export function TokenButton({ disabled={disabled} >
- + {tokenSymbol} {!disabled && ( { - if (!explorerLink) { - return undefined - } - if (!tokenAddress) { - return undefined - } - try { - const url = new URL(explorerLink) - url.pathname += `token/${tokenAddress}` - return url.toString() - } catch (error) { - captureSentryErrorWithExtraData({ - error, - originFunction: 'createBlockExplorerUrlForToken' - }) - return undefined + chainId: ChainId + address: string | undefined +}) { + if (typeof address === 'undefined') { + return null } + + return ( + e.stopPropagation()} + > + {shortenAddress(address).toLowerCase()} + + ) } export const TokenInfoTooltip = ({ @@ -46,20 +44,15 @@ export const TokenInfoTooltip = ({ provider: childChainProvider }) - if (!token) { - return {childChainNativeCurrency.symbol} + if (!token || isTokenNativeUSDC(token.address)) { + return {token?.symbol ?? childChainNativeCurrency.symbol} } - const tokenAddress = isDepositMode ? token.address : token.l2Address - - const href = createBlockExplorerUrlForToken({ - explorerLink: networks.sourceChain.blockExplorers?.default.url, - tokenAddress - }) + const tokenAddress = isDepositMode ? token.l2Address : token.address return ( @@ -71,14 +64,10 @@ export const TokenInfoTooltip = ({ {token.name}
- {href && tokenAddress && ( - - {shortenAddress(tokenAddress)} - - )} + } diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx index 6d95a50d2a..5c17602baa 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx @@ -4,7 +4,6 @@ import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline' -import { Chain } from 'wagmi' import { Loader } from '../common/atoms/Loader' import { useAppState } from '../../state' @@ -13,7 +12,6 @@ import { SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID } from '../../util/TokenListUtils' import { formatAmount } from '../../util/NumberUtils' -import { shortenAddress } from '../../util/CommonUtils' import { isTokenArbitrumOneNativeUSDC, isTokenArbitrumSepoliaNativeUSDC, @@ -21,11 +19,10 @@ import { sanitizeTokenSymbol } from '../../util/TokenUtils' import { SafeImage } from '../common/SafeImage' -import { getExplorerUrl, getNetworkName } from '../../util/networks' +import { getNetworkName } from '../../util/networks' import { Tooltip } from '../common/Tooltip' import { StatusBadge } from '../common/StatusBadge' import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types' -import { ExternalLink } from '../common/ExternalLink' import { useAccountType } from '../../hooks/useAccountType' import { useNativeCurrency } from '../../hooks/useNativeCurrency' import { useNetworks } from '../../hooks/useNetworks' @@ -33,6 +30,7 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship' import { TokenLogoFallback } from './TokenInfo' import { useBalanceOnSourceChain } from '../../hooks/useBalanceOnSourceChain' import { useSourceChainNativeCurrencyDecimals } from '../../hooks/useSourceChainNativeCurrencyDecimals' +import { BlockExplorerTokenLink } from './TokenInfoTooltip' function tokenListIdsToNames(ids: string[]): string { return ids @@ -48,28 +46,6 @@ function StyledLoader() { ) } -function BlockExplorerTokenLink({ - chain, - address -}: { - chain: Chain - address: string | undefined -}) { - if (typeof address === 'undefined') { - return null - } - - return ( - e.stopPropagation()} - > - {shortenAddress(address).toLowerCase()} - - ) -} - function TokenListInfo({ token }: { token: ERC20BridgeToken | null }) { const [networks] = useNetworks() const { childChain, childChainProvider } = useNetworksRelationship(networks) @@ -311,7 +287,7 @@ function TokenContractLink({ token }: { token: ERC20BridgeToken | null }) { if (isCustomFeeTokenRow && isDepositMode) { return ( ) @@ -323,15 +299,21 @@ function TokenContractLink({ token }: { token: ERC20BridgeToken | null }) { if (isDepositMode) { return token?.isL2Native ? ( - + ) : ( - + ) } if (typeof token.l2Address !== 'undefined') { return ( - + ) } return ( diff --git a/packages/arb-token-bridge-ui/src/pages/_app.tsx b/packages/arb-token-bridge-ui/src/pages/_app.tsx index 3bb887049a..95048a4def 100644 --- a/packages/arb-token-bridge-ui/src/pages/_app.tsx +++ b/packages/arb-token-bridge-ui/src/pages/_app.tsx @@ -17,7 +17,6 @@ import '@rainbow-me/rainbowkit/styles.css' import { Layout } from '../components/common/Layout' import '../styles/tailwind.css' -import '../styles/tippy.css' import '../styles/purple.css' import { ChainKeyQueryParam, diff --git a/packages/arb-token-bridge-ui/src/styles/tailwind.css b/packages/arb-token-bridge-ui/src/styles/tailwind.css index 8a83f16569..10382d3130 100644 --- a/packages/arb-token-bridge-ui/src/styles/tailwind.css +++ b/packages/arb-token-bridge-ui/src/styles/tailwind.css @@ -114,6 +114,11 @@ body > iframe { color: #60461f; } +.tippy-box[data-theme~='dark'] { + border-radius: 5px; + border: 1px solid #777; +} + /* Custom */ diff --git a/packages/arb-token-bridge-ui/src/styles/tippy.css b/packages/arb-token-bridge-ui/src/styles/tippy.css deleted file mode 100644 index 9afbbc8bfd..0000000000 --- a/packages/arb-token-bridge-ui/src/styles/tippy.css +++ /dev/null @@ -1,4 +0,0 @@ -.tippy-box[data-theme~='dark'] { - border-radius: 5px; - border: 1px solid #777; -}