mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-28 16:48:00 +02:00
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
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<HTMLDivElement> {
|
|
token: GetToken | undefined
|
|
}
|
|
|
|
export const Token = forwardRef<HTMLDivElement, SelectItemProps>(
|
|
({ 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 ? (
|
|
<Select.Item
|
|
className={`${className ? className : ''} Token`}
|
|
{...props}
|
|
value={token?.address || ''}
|
|
title={token?.address}
|
|
ref={forwardedRef}
|
|
>
|
|
<Select.ItemText>
|
|
<span className="TokenLogo">
|
|
{token?.logo ? (
|
|
<img src={token.logo} width="32" height="32" />
|
|
) : (
|
|
token?.symbol?.substring(0, 3)
|
|
)}
|
|
</span>
|
|
</Select.ItemText>
|
|
<div>
|
|
<h3 className="TokenName">{token?.name}</h3>
|
|
<p className="TokenBalance">{balance}</p>
|
|
</div>
|
|
<div className="TokenValue">{valueInUsdFormatted}</div>
|
|
|
|
<Select.ItemIndicator className="SelectItemIndicator">
|
|
<Check />
|
|
</Select.ItemIndicator>
|
|
</Select.Item>
|
|
) : null
|
|
}
|
|
)
|