40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { FC, useMemo } from 'react';
|
|
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
|
|
import { LocalizeFormattedNumber, LocalizeShortNumber } from '../../../api';
|
|
import { Flex, LayoutCurrencyIcon, Text } from '../../../common';
|
|
|
|
interface CurrencyViewProps
|
|
{
|
|
type: number;
|
|
amount: number;
|
|
short: boolean;
|
|
}
|
|
|
|
export const CurrencyView: FC<CurrencyViewProps> = props =>
|
|
{
|
|
const { type = -1, amount = -1, short = false } = props;
|
|
|
|
const element = useMemo(() =>
|
|
{
|
|
return (
|
|
<Flex justifyContent="end" pointer gap={ 1 } className="nitro-purse-button rounded">
|
|
<Text truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
|
|
<LayoutCurrencyIcon type={ type } />
|
|
</Flex>);
|
|
}, [ amount, short, type ]);
|
|
|
|
if(!short) return element;
|
|
|
|
return (
|
|
<OverlayTrigger
|
|
placement="left"
|
|
overlay={
|
|
<Tooltip id={ `tooltip-${ type }` }>
|
|
{ LocalizeFormattedNumber(amount) }
|
|
</Tooltip>
|
|
}>
|
|
{ element }
|
|
</OverlayTrigger>
|
|
);
|
|
}
|