@luxexchange/lx 1.0.0

package/src/components/portfolio/TokenBalanceItem.tsx

@@ -0,0 +1,176 @@
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Flex, Shine, Text, useIsDarkMode } from '@luxfi/ui/src'
+import { TokenLogo } from '@luxexchange/lx/src/components/CurrencyLogo/TokenLogo'
+import { RelativeChange } from '@luxexchange/lx/src/components/RelativeChange/RelativeChange'
+import { useRestTokenBalanceMainParts, useRestTokenBalanceQuantityParts } from '@luxexchange/lx/src/data/rest/getPortfolio'
+import { useEnabledChains } from '@luxexchange/lx/src/features/chains/hooks/useEnabledChains'
+import { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { useTokenBalanceListContext } from '@luxexchange/lx/src/features/portfolio/TokenBalanceListContext'
+import { CurrencyId } from '@luxexchange/lx/src/types/currency'
+import { getSymbolDisplayText } from '@luxexchange/lx/src/utils/currency'
+import { NumberType } from '@luxfi/utilities/src/format/types'
+import { isWebPlatform } from '@luxfi/utilities/src/platform'
+
+/**
+ * IMPORTANT: if you modify the UI of this component, make sure to update the corresponding Skeleton component.
+ */
+
+interface TokenBalanceItemProps {
+  currencyInfo: CurrencyInfo
+  isLoading?: boolean
+  padded?: boolean
+  isHidden: boolean
+}
+
+/**
+ * If you add any props to this component, make sure you use the react-devtools profiler to confirm that this doesn't break the memoization.
+ * This component needs to be as fast as possible and shouldn't re-render often or else it causes performance issues.
+ */
+export const TokenBalanceItem = memo(function _TokenBalanceItem({
+  currencyInfo,
+  isLoading,
+  padded,
+  isHidden,
+}: TokenBalanceItemProps) {
+  const { currency } = currencyInfo
+  const { evmOwner, svmOwner } = useTokenBalanceListContext()
+
+  // Ensure items rerender when theme is switched
+  useIsDarkMode()
+
+  const shortenedSymbol = getSymbolDisplayText(currency.symbol)
+
+  return (
+    <Flex
+      alignItems="flex-start"
+      backgroundColor="$surface1"
+      borderRadius="$rounded16"
+      flexDirection="row"
+      justifyContent="space-between"
+      hoverStyle={{ backgroundColor: '$surface2' }}
+      px={padded ? '$spacing24' : '$spacing8'}
+      py="$spacing8"
+      testID={`TokenBalanceItem_${currency.symbol}`}
+    >
+      <Flex row shrink alignItems="center" gap="$spacing12" overflow="hidden">
+        <TokenLogo
+          chainId={currency.chainId}
+          name={currency.name}
+          symbol={currency.symbol}
+          url={currencyInfo.logoUrl ?? undefined}
+        />
+        <Flex shrink alignItems="flex-start">
+          <Text ellipsizeMode="tail" numberOfLines={1} variant={isWebPlatform ? 'body2' : 'body1'}>
+            {currency.name ?? shortenedSymbol}
+          </Text>
+          <Flex row alignItems="center" gap="$spacing8" minHeight={20}>
+            <TokenBalanceQuantity
+              shortenedSymbol={shortenedSymbol}
+              currencyId={currencyInfo.currencyId}
+              evmAddress={evmOwner}
+              svmAddress={svmOwner}
+            />
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {currencyInfo.isSpam === true && isHidden ? undefined : (
+        <TokenBalanceRightSideColumn
+          isLoading={isLoading}
+          currencyId={currencyInfo.currencyId}
+          evmAddress={evmOwner}
+          svmAddress={svmOwner}
+        />
+      )}
+    </Flex>
+  )
+})
+
+function TokenBalanceQuantity({
+  shortenedSymbol,
+  currencyId,
+  evmAddress,
+  svmAddress,
+}: {
+  shortenedSymbol: Maybe<string>
+  currencyId: CurrencyId
+  evmAddress?: string
+  svmAddress?: string
+}): JSX.Element {
+  const { formatNumberOrString } = useLocalizationContext()
+
+  // By relying on this cached data we can avoid re-renders unless these specific fields change.
+  const restTokenBalance = useRestTokenBalanceQuantityParts({
+    currencyId,
+    evmAddress,
+    svmAddress,
+  })
+
+  const tokenBalance = restTokenBalance.data
+
+  return (
+    <Text color="$neutral2" numberOfLines={1} variant={isWebPlatform ? 'body3' : 'body2'}>
+      {`${formatNumberOrString({ value: tokenBalance?.quantity })}`} {shortenedSymbol}
+    </Text>
+  )
+}
+
+function TokenBalanceRightSideColumn({
+  isLoading,
+  currencyId,
+  evmAddress,
+  svmAddress,
+}: {
+  isLoading?: boolean
+  currencyId: CurrencyId
+  evmAddress?: string
+  svmAddress?: string
+}): JSX.Element {
+  const { t } = useTranslation()
+  const { isTestnetModeEnabled } = useEnabledChains()
+  const { convertFiatAmountFormatted } = useLocalizationContext()
+
+  // By relying on this cached data we can avoid re-renders unless these specific fields change.
+  const restTokenBalance = useRestTokenBalanceMainParts({
+    currencyId,
+    evmAddress,
+    svmAddress,
+  })
+  const tokenBalance = restTokenBalance.data
+
+  const balanceUSD = tokenBalance?.denominatedValue?.value
+  const relativeChange24 = tokenBalance?.tokenProjectMarket?.relativeChange24?.value
+
+  const balance = convertFiatAmountFormatted(balanceUSD, NumberType.FiatTokenQuantity)
+
+  const isTestnetModeWithNoBalance = isTestnetModeEnabled && !balanceUSD
+
+  return isTestnetModeWithNoBalance ? (
+    <></>
+  ) : (
+    <Flex justifyContent="space-between" position="relative">
+      <Shine disabled={!isLoading}>
+        {!balanceUSD ? (
+          <Flex centered fill>
+            <Text color="$neutral2">{t('common.text.notAvailable')}</Text>
+          </Flex>
+        ) : (
+          <Flex alignItems="flex-end" pl="$spacing8">
+            <Text color="$neutral1" numberOfLines={1} variant={isWebPlatform ? 'body2' : 'body1'}>
+              {balance}
+            </Text>
+            <RelativeChange
+              alignRight
+              change={relativeChange24}
+              negativeChangeColor="$statusCritical"
+              positiveChangeColor="$statusSuccess"
+              variant={isWebPlatform ? 'body3' : 'body2'}
+            />
+          </Flex>
+        )}
+      </Shine>
+    </Flex>
+  )
+}

package/src/components/portfolio/TokenBalanceItemContextMenu.native.tsx

@@ -0,0 +1,147 @@
+import type { PropsWithChildren } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import type { ContextMenuAction, ContextMenuOnPressNativeEvent } from 'react-native-context-menu-view'
+import ContextMenu from 'react-native-context-menu-view'
+import type { LongPressGesture } from 'react-native-gesture-handler'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import { runOnJS } from 'react-native-reanimated'
+import { TouchableArea } from '@luxfi/ui/src'
+import { borderRadii } from '@luxfi/ui/src/theme'
+import type { TokenBalanceItemContextMenuProps } from '@luxexchange/lx/src/components/portfolio/TokenBalanceItemContextMenu'
+import { TokenList } from '@luxexchange/lx/src/features/dataApi/types'
+import { useTokenContextMenuOptions } from '@luxexchange/lx/src/features/portfolio/balances/hooks/useTokenContextMenuOptions'
+import { useEvent } from '@luxfi/utilities/src/react/hooks'
+
+const DEFAULT_LONG_PRESS_DURATION = 300
+const DEFAULT_LONG_PRESS_DELAY = 200
+
+const useLongPressGesture = ({
+  duration = DEFAULT_LONG_PRESS_DURATION,
+  delay = DEFAULT_LONG_PRESS_DELAY,
+  onPress,
+}: {
+  duration?: number
+  delay?: number
+  onPress?: () => void
+}): {
+  longPressGesture: LongPressGesture
+  handlePress: () => void
+} => {
+  const delayedTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const isLongPressActive = useRef(false)
+
+  // Callback to set the long press flag
+  const setLongPressActive = useEvent((active: boolean) => {
+    isLongPressActive.current = active
+  })
+
+  // Callback to reset long press flag with delay
+  const resetLongPressFlag = useEvent(() => {
+    if (delayedTimeoutRef.current) {
+      clearTimeout(delayedTimeoutRef.current)
+    }
+
+    delayedTimeoutRef.current = setTimeout(() => {
+      isLongPressActive.current = false
+    }, delay)
+  })
+
+  const longPressGesture = useMemo(
+    () =>
+      Gesture.LongPress()
+        .minDuration(duration)
+        .onStart(() => {
+          'worklet'
+          runOnJS(setLongPressActive)(true)
+        })
+        .onEnd(() => {
+          'worklet'
+          runOnJS(resetLongPressFlag)()
+        }),
+    [duration, resetLongPressFlag, setLongPressActive],
+  )
+
+  // cleanup on unmount
+  useEffect(() => {
+    return (): void => {
+      if (delayedTimeoutRef.current) {
+        clearTimeout(delayedTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  const handlePress = useEvent(() => {
+    if (!isLongPressActive.current) {
+      onPress?.()
+    }
+  })
+
+  // ... rest of the logic
+
+  return { longPressGesture, handlePress }
+}
+
+// TODO merge into a single implementation once context menu performance is improved
+export function TokenBalanceItemContextMenu({
+  children,
+  portfolioBalance,
+  excludedActions,
+  openContractAddressExplainerModal,
+  openReportTokenModal,
+  copyAddressToClipboard,
+  onPressToken: onPressToken,
+  disableNotifications,
+  recipient,
+}: PropsWithChildren<TokenBalanceItemContextMenuProps>): JSX.Element {
+  const menuActions = useTokenContextMenuOptions({
+    excludedActions,
+    currencyId: portfolioBalance.currencyInfo.currencyId,
+    isBlocked: portfolioBalance.currencyInfo.safetyInfo?.tokenList === TokenList.Blocked,
+    tokenSymbolForNotification: portfolioBalance.currencyInfo.currency.symbol,
+    portfolioBalance,
+    openContractAddressExplainerModal,
+    openReportTokenModal,
+    copyAddressToClipboard,
+    closeMenu: () => {},
+    disableNotifications,
+    recipient,
+  })
+
+  const { longPressGesture, handlePress } = useLongPressGesture({
+    onPress: onPressToken,
+  })
+
+  const actions = useMemo((): ContextMenuAction[] => {
+    return menuActions.map((action) => ({
+      title: action.label,
+      systemIcon: actionToIcon[action.id],
+    }))
+  }, [menuActions])
+
+  const onContextMenuPress = useCallback(
+    (e: { nativeEvent: ContextMenuOnPressNativeEvent }): void => {
+      menuActions[e.nativeEvent.index]?.onPress?.()
+    },
+    [menuActions],
+  )
+
+  const style = useMemo(() => ({ borderRadius: borderRadii.rounded16 }), [])
+
+  return (
+    <GestureDetector gesture={longPressGesture}>
+      <ContextMenu actions={actions} disabled={menuActions.length === 0} style={style} onPress={onContextMenuPress}>
+        <TouchableArea onPress={handlePress}>{children}</TouchableArea>
+      </ContextMenu>
+    </GestureDetector>
+  )
+}
+
+const actionToIcon: Record<string, string> = {
+  swap: 'rectangle.2.swap',
+  send: 'paperplane',
+  receive: 'qrcode',
+  share: 'square.and.arrow.up',
+  toggleVisibility: 'eye',
+  copyAddress: 'doc.on.doc',
+  reportToken: 'flag',
+}

package/src/components/portfolio/TokenBalanceItemContextMenu.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react'
+import { ContextMenuTriggerMode } from '@luxexchange/lx/src/components/menus/types'
+import { PortfolioBalance } from '@luxexchange/lx/src/features/dataApi/types'
+import { TokenMenuActionType } from '@luxexchange/lx/src/features/portfolio/balances/hooks/useTokenContextMenuOptions'
+import { PlatformSplitStubError } from '@luxfi/utilities/src/errors'
+
+export interface TokenBalanceItemContextMenuProps {
+  portfolioBalance: PortfolioBalance
+  excludedActions?: TokenMenuActionType[]
+  openContractAddressExplainerModal?: () => void
+  openReportTokenModal: () => void
+  copyAddressToClipboard?: (address: string) => Promise<void>
+  triggerMode?: ContextMenuTriggerMode
+  onPressToken?: () => void
+  disableNotifications?: boolean
+  recipient?: Address // Pre-filled recipient address for send action
+}
+
+export function TokenBalanceItemContextMenu(_props: PropsWithChildren<TokenBalanceItemContextMenuProps>): JSX.Element {
+  throw new PlatformSplitStubError('TokenBalanceItemContextMenu')
+}

package/src/components/portfolio/TokenBalanceItemContextMenu.web.tsx

@@ -0,0 +1,74 @@
+import { memo, PropsWithChildren, useCallback, useMemo } from 'react'
+import { TouchableArea } from '@luxfi/ui/src'
+import { ContextMenu } from '@luxexchange/lx/src/components/menus/ContextMenu'
+import { ContextMenuTriggerMode } from '@luxexchange/lx/src/components/menus/types'
+import { TokenBalanceItemContextMenuProps } from '@luxexchange/lx/src/components/portfolio/TokenBalanceItemContextMenu'
+import { TokenList } from '@luxexchange/lx/src/features/dataApi/types'
+import { useTokenContextMenuOptions } from '@luxexchange/lx/src/features/portfolio/balances/hooks/useTokenContextMenuOptions'
+import { ElementName, SectionName } from '@luxexchange/lx/src/features/telemetry/constants'
+import { isExtensionApp } from '@luxfi/utilities/src/platform'
+import { useBooleanState } from '@luxfi/utilities/src/react/useBooleanState'
+
+export const TokenBalanceItemContextMenu = memo(function TokenBalanceItemContextMenu({
+  children,
+  portfolioBalance,
+  excludedActions,
+  openContractAddressExplainerModal,
+  openReportTokenModal,
+  copyAddressToClipboard,
+  triggerMode,
+  onPressToken: onPressToken,
+  disableNotifications,
+  recipient,
+}: PropsWithChildren<TokenBalanceItemContextMenuProps>): JSX.Element {
+  const { value: isOpen, setTrue: openMenu, setFalse: closeMenu } = useBooleanState(false)
+  const isPrimaryTriggerMode = isExtensionApp || triggerMode === ContextMenuTriggerMode.Primary
+
+  const menuActions = useTokenContextMenuOptions({
+    excludedActions,
+    currencyId: portfolioBalance.currencyInfo.currencyId,
+    isBlocked: portfolioBalance.currencyInfo.safetyInfo?.tokenList === TokenList.Blocked,
+    tokenSymbolForNotification: portfolioBalance.currencyInfo.currency.symbol,
+    portfolioBalance,
+    openContractAddressExplainerModal,
+    openReportTokenModal,
+    copyAddressToClipboard,
+    closeMenu,
+    disableNotifications,
+    recipient,
+  })
+
+  const ignoreDefault = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const actionableItem = useMemo(() => {
+    return (
+      // biome-ignore lint/correctness/noRestrictedElements: needed here
+      <div style={{ cursor: 'pointer' }} onContextMenu={isExtensionApp ? ignoreDefault : openMenu}>
+        <TouchableArea
+          onPressIn={(e) => e.stopPropagation()}
+          onPressOut={(e) => e.stopPropagation()}
+          onPress={isPrimaryTriggerMode ? openMenu : onPressToken}
+        >
+          {children}
+        </TouchableArea>
+      </div>
+    )
+  }, [children, ignoreDefault, onPressToken, openMenu, isPrimaryTriggerMode])
+  return (
+    <ContextMenu
+      trackItemClicks
+      menuItems={menuActions}
+      triggerMode={isPrimaryTriggerMode ? ContextMenuTriggerMode.Primary : ContextMenuTriggerMode.Secondary}
+      isOpen={isOpen}
+      openMenu={openMenu}
+      closeMenu={closeMenu}
+      elementName={ElementName.PortfolioTokenContextMenu}
+      sectionName={SectionName.PortfolioTokensTab}
+    >
+      {actionableItem}
+    </ContextMenu>
+  )
+})

package/src/components/portfolio/TokenBalanceListWeb.tsx

@@ -0,0 +1,276 @@
+import { NetworkStatus } from '@apollo/client'
+import { Currency } from '@uniswap/sdk-core'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDispatch } from 'react-redux'
+import { AnimatePresence, Flex, Loader } from '@luxfi/ui/src'
+import { BaseCard } from '@luxexchange/lx/src/components/BaseCard/BaseCard'
+import { EmptyTokensList } from '@luxexchange/lx/src/components/portfolio/EmptyTokensList'
+import { HiddenTokensRow } from '@luxexchange/lx/src/components/portfolio/HiddenTokensRow'
+import { PortfolioEmptyState } from '@luxexchange/lx/src/components/portfolio/PortfolioEmptyState'
+import { TokenBalanceItem } from '@luxexchange/lx/src/components/portfolio/TokenBalanceItem'
+import { TokenBalanceItemContextMenu } from '@luxexchange/lx/src/components/portfolio/TokenBalanceItemContextMenu'
+import { pushNotification } from '@luxexchange/lx/src/features/notifications/slice/slice'
+import { AppNotificationType, CopyNotificationType } from '@luxexchange/lx/src/features/notifications/slice/types'
+import {
+  TokenBalanceListContextProvider,
+  useTokenBalanceListContext,
+} from '@luxexchange/lx/src/features/portfolio/TokenBalanceListContext'
+import { isHiddenTokenBalancesRow, TokenBalanceListRow } from '@luxexchange/lx/src/features/portfolio/types'
+import { HiddenTokenInfoModal } from '@luxexchange/lx/src/features/transactions/modals/HiddenTokenInfoModal'
+import { CurrencyId } from '@luxexchange/lx/src/types/currency'
+import { setClipboard } from '@luxfi/utilities/src/clipboard/clipboard'
+import { usePrevious } from '@luxfi/utilities/src/react/hooks'
+
+type TokenBalanceListProps = {
+  evmOwner?: Address
+  svmOwner?: Address
+  onPressReceive: () => void
+  onPressBuy: () => void
+  onPressToken?: (currencyId: CurrencyId) => void
+  openReportTokenModal: (currency: Currency, isMarkedSpam: Maybe<boolean>) => void
+  backgroundImageWrapperCallback?: React.FC<{ children: React.ReactNode }>
+}
+
+export const TokenBalanceListWeb = memo(function _TokenBalanceList({
+  evmOwner,
+  svmOwner,
+  onPressReceive,
+  onPressBuy,
+  onPressToken,
+  openReportTokenModal,
+  backgroundImageWrapperCallback,
+}: TokenBalanceListProps): JSX.Element {
+  return (
+    <Flex grow>
+      <TokenBalanceListContextProvider
+        isExternalProfile={false}
+        evmOwner={evmOwner}
+        svmOwner={svmOwner}
+        onPressToken={onPressToken}
+      >
+        <TokenBalanceListInner
+          backgroundImageWrapperCallback={backgroundImageWrapperCallback}
+          openReportTokenModal={openReportTokenModal}
+          onPressReceive={onPressReceive}
+          onPressBuy={onPressBuy}
+        />
+      </TokenBalanceListContextProvider>
+    </Flex>
+  )
+})
+
+function TokenBalanceListInner({
+  onPressReceive,
+  onPressBuy,
+  openReportTokenModal,
+  backgroundImageWrapperCallback,
+}: Omit<TokenBalanceListProps, 'owner' | 'onPressToken'>): JSX.Element {
+  const { t } = useTranslation()
+
+  const { rows, balancesById, networkStatus, refetch, hiddenTokensExpanded } = useTokenBalanceListContext()
+  const hiddenTokensRowRef = useRef<HTMLDivElement | null>(null)
+  const previousHiddenTokensExpanded = usePrevious(hiddenTokensExpanded)
+
+  // Handle auto scroll, after hiding section of hidden tokens.
+  // We additionally wait 100ms to allow the animation to start before scrolling.
+  useEffect(() => {
+    // Only scroll when transitioning from expanded to collapsed (not on initial render)
+    if (previousHiddenTokensExpanded && !hiddenTokensExpanded) {
+      // Use setTimeout to ensure the animation has started before scrolling
+      const timeoutId = setTimeout(() => {
+        hiddenTokensRowRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'end',
+        })
+      }, 100) // Allow animation to start before scrolling
+
+      return () => clearTimeout(timeoutId)
+    }
+
+    return () => {}
+  }, [hiddenTokensExpanded, previousHiddenTokensExpanded])
+
+  const visible: string[] = []
+  const hidden: string[] = []
+
+  let isHidden = false
+  for (const row of rows) {
+    const target = isHidden ? hidden : visible
+    target.push(row)
+    // do this after pushing so we keep our Hidden header row in the visible section
+    // so users can see it when closed and re-open it
+    if (isHiddenTokenBalancesRow(row)) {
+      isHidden = true
+    }
+  }
+
+  const hasData = !!balancesById
+  const hasTokens = balancesById && Object.keys(balancesById).length > 0
+  const hasErrorWithCachedValues = hasData && networkStatus === NetworkStatus.error
+
+  if (!hasData) {
+    return (
+      <EmptyTokensList
+        emptyCondition={!hasTokens}
+        errorCardContainerStyle={{
+          fill: true,
+          grow: true,
+          justifyContent: 'center',
+          pt: '$spacing48',
+          px: '$spacing36',
+        }}
+      />
+    )
+  }
+
+  if (!hasTokens) {
+    return (
+      <Flex>
+        <PortfolioEmptyState
+          disableCexTransfers
+          backgroundImageWrapperCallback={backgroundImageWrapperCallback}
+          onPressBuy={onPressBuy}
+          onPressReceive={onPressReceive}
+        />
+      </Flex>
+    )
+  }
+
+  return (
+    <>
+      {hasErrorWithCachedValues && (
+        <Flex>
+          <BaseCard.InlineErrorState title={t('home.tokens.error.fetch')} onRetry={refetch} />
+        </Flex>
+      )}
+      <TokenBalanceItems
+        rows={visible}
+        openReportTokenModal={openReportTokenModal}
+        hiddenTokensRowRef={hiddenTokensRowRef}
+      />
+      <AnimatePresence initial={false}>
+        {hiddenTokensExpanded && (
+          <TokenBalanceItems animated rows={hidden} openReportTokenModal={openReportTokenModal} />
+        )}
+      </AnimatePresence>
+    </>
+  )
+}
+
+const TokenBalanceItems = ({
+  animated,
+  rows,
+  openReportTokenModal,
+  hiddenTokensRowRef,
+}: {
+  animated?: boolean
+  rows: string[]
+  openReportTokenModal: (currency: Currency, isMarkedSpam: Maybe<boolean>) => void
+  hiddenTokensRowRef?: React.RefObject<HTMLDivElement | null>
+}): JSX.Element => {
+  return (
+    <Flex
+      {...(animated && {
+        animation: 'quicker',
+        enterStyle: { opacity: 0, y: -10 },
+        exitStyle: { opacity: 0, y: -10 },
+      })}
+    >
+      {rows.map((balance: TokenBalanceListRow) => {
+        return (
+          <TokenBalanceItemRow
+            key={balance}
+            item={balance}
+            openReportTokenModal={openReportTokenModal}
+            hiddenTokensRowRef={hiddenTokensRowRef}
+          />
+        )
+      })}
+    </Flex>
+  )
+}
+
+const TokenBalanceItemRow = memo(function TokenBalanceItemRow({
+  item,
+  openReportTokenModal,
+  hiddenTokensRowRef,
+}: {
+  item: TokenBalanceListRow
+  openReportTokenModal: (currency: Currency, isMarkedSpam: Maybe<boolean>) => void
+  hiddenTokensRowRef?: React.RefObject<HTMLDivElement | null>
+}) {
+  const { balancesById, isWarmLoading, onPressToken } = useTokenBalanceListContext()
+  const dispatch = useDispatch()
+
+  const [isModalVisible, setModalVisible] = useState(false)
+
+  const openModal = useCallback((): void => {
+    setModalVisible(true)
+  }, [])
+
+  const closeModal = useCallback((): void => {
+    setModalVisible(false)
+  }, [])
+
+  const portfolioBalance = useMemo(() => balancesById?.[item], [balancesById, item])
+
+  const handlePressToken = useCallback((): void => {
+    const currencyId = portfolioBalance?.currencyInfo.currencyId
+    if (currencyId && onPressToken) {
+      onPressToken(currencyId)
+    }
+  }, [onPressToken, portfolioBalance?.currencyInfo.currencyId])
+
+  const copyAddressToClipboard = useCallback(
+    async (address: string): Promise<void> => {
+      await setClipboard(address)
+      dispatch(
+        pushNotification({
+          type: AppNotificationType.Copied,
+          copyType: CopyNotificationType.ContractAddress,
+        }),
+      )
+    },
+    [dispatch],
+  )
+
+  if (isHiddenTokenBalancesRow(item)) {
+    return (
+      <>
+        <Flex ref={hiddenTokensRowRef}>
+          <HiddenTokensRow onPressLearnMore={openModal} />
+        </Flex>
+        <HiddenTokenInfoModal isOpen={isModalVisible} onClose={closeModal} />
+      </>
+    )
+  }
+
+  if (!portfolioBalance) {
+    // This can happen when the view is out of focus and the user sells/sends 100% of a token's balance.
+    // In that case, the token is removed from the `balancesById` object, but the FlatList is still using the cached array of IDs until the view comes back into focus.
+    // As soon as the view comes back into focus, the FlatList will re-render with the latest data, so users won't really see this Skeleton for more than a few milliseconds when this happens.
+    return (
+      <Flex px="$spacing8">
+        <Loader.Token />
+      </Flex>
+    )
+  }
+
+  return (
+    <TokenBalanceItemContextMenu
+      portfolioBalance={portfolioBalance}
+      copyAddressToClipboard={copyAddressToClipboard}
+      openReportTokenModal={() =>
+        openReportTokenModal(portfolioBalance.currencyInfo.currency, portfolioBalance.currencyInfo.isSpam)
+      }
+      onPressToken={handlePressToken}
+    >
+      <TokenBalanceItem
+        isHidden={portfolioBalance.isHidden ?? false}
+        isLoading={isWarmLoading}
+        currencyInfo={portfolioBalance.currencyInfo}
+      />
+    </TokenBalanceItemContextMenu>
+  )
+})