import { forwardRef, type HTMLAttributes } from 'react'
import * as Select from '@radix-ui/react-select'
import { formatCurrency } from '@coingecko/cryptoformat'
import './Token.css'
import { Icon as Check } from '@images/components/react/Check'
import type { GetToken } from '@features/Web3/hooks/useFetchTokens'
interface SelectItemProps extends HTMLAttributes {
token: GetToken | undefined
}
export const Token = forwardRef(
({ className, token, ...props }, forwardedRef) => {
const locale = window?.navigator?.language || 'en'
const balance =
token?.balance && token?.symbol
? formatCurrency(token.balance, token.symbol, locale, false, {
decimalPlaces: 3,
significantFigures: 3
})
: 0
const valueInUsd =
token?.balance && token?.price?.usd
? token?.balance * token?.price.usd
: 0
const valueInUsdFormatted = formatCurrency(valueInUsd, 'USD', locale)
// const hasBalanceAndValue =
// balance && parseInt(balance) !== 0 && valueInUsd >= 1
const hasBalance = balance && parseInt(balance) !== 0
return hasBalance ? (
{token?.logo ? (
) : (
token?.symbol?.substring(0, 3)
)}
{valueInUsd ? (
{valueInUsdFormatted}
) : null}
) : null
}
)