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/stores/tokens'
interface SelectItemProps extends HTMLAttributes {
token: GetToken | undefined
}
export const Token = forwardRef(
({ className, token, ...props }, forwardedRef) => {
const balance =
token?.balance && token?.symbol
? formatCurrency(token.balance, token.symbol, 'en', false, {
decimalPlaces: 3,
significantFigures: 3
})
: 0
const valueInUsd =
token?.balance && token?.price?.usd
? token?.balance * token?.price.usd
: 0
const valueInUsdFormatted = formatCurrency(valueInUsd, 'USD', 'en')
return balance && parseInt(balance) !== 0 && valueInUsd >= 1 ? (
{token?.logo ? (
) : (
token?.symbol?.substring(0, 3)
)}
{valueInUsdFormatted}
) : null
}
)