import { CSSProperties } from 'react' ; import { COLORS } from '@theme' ; import { TCurrencySymbol , TTicker , TUuid } from '@types' ; import Box from './Box' ; import Currency from './Currency' ; import { Text } from './NewTypography' ; interface Props { text ? : string ; asset ? : { amount : string ; ticker : TTicker ; uuid ? : TUuid ; } ; fiat ? : { amount : string ; symbol : TCurrencySymbol ; ticker : TTicker ; } ; baseAssetValue ? : string ; fiatColor ? : string ; bold ? : boolean ; style ? : CSSProperties ; alignLeft ? : boolean ; } export default function Amount ( { asset , text , baseAssetValue , fiat , fiatColor = COLORS . BLUE_SKY , bold = false , alignLeft = false , ... rest } ) { return ( < Box display = "flex" flexDirection = "column" alignItems = { alignLeft ? 'flex-start' : 'flex-end' } { ... rest } > { asset && ( < Currency amount = { asset . amount } ticker = { asset . ticker } icon = { true } uuid = { asset . uuid } / > ) } { text && ( < Text as = "span" isBold = { bold } > { text } < /Text>)} { baseAssetValue && ( < Text as = "span" isDiscrete = { true } fontSize = "0.9em" > { baseAssetValue } < /Text>)} { fiat && ( < Currency amount = { fiat . amount } symbol = { fiat . symbol } ticker = { fiat . ticker } decimals = { 2 } color = { fiatColor } fontSize = "0.9em" / > ) } < /Box>); }