You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.6 KiB
65 lines
1.6 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import classnames from 'classnames'
|
|
import { GWEI } from '../../../helpers/constants/common'
|
|
import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay'
|
|
|
|
export default function CurrencyDisplay ({
|
|
value,
|
|
displayValue,
|
|
'data-testid': dataTestId,
|
|
style,
|
|
className,
|
|
prefix,
|
|
prefixComponent,
|
|
hideLabel,
|
|
hideTitle,
|
|
numberOfDecimals,
|
|
denomination,
|
|
currency,
|
|
suffix,
|
|
}) {
|
|
const [title, parts] = useCurrencyDisplay(value, {
|
|
displayValue,
|
|
prefix,
|
|
numberOfDecimals,
|
|
hideLabel,
|
|
denomination,
|
|
currency,
|
|
suffix,
|
|
})
|
|
return (
|
|
<div
|
|
className={classnames('currency-display-component', className)}
|
|
data-testid={dataTestId}
|
|
style={style}
|
|
title={(!hideTitle && title) || null}
|
|
>
|
|
{ prefixComponent }
|
|
<span className="currency-display-component__text">{ parts.prefix }{ parts.value }</span>
|
|
{
|
|
parts.suffix && (
|
|
<span className="currency-display-component__suffix">
|
|
{ parts.suffix }
|
|
</span>
|
|
)
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
CurrencyDisplay.propTypes = {
|
|
className: PropTypes.string,
|
|
currency: PropTypes.string,
|
|
'data-testid': PropTypes.string,
|
|
denomination: PropTypes.oneOf([GWEI]),
|
|
displayValue: PropTypes.string,
|
|
hideLabel: PropTypes.bool,
|
|
hideTitle: PropTypes.bool,
|
|
numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
prefix: PropTypes.string,
|
|
prefixComponent: PropTypes.node,
|
|
style: PropTypes.object,
|
|
suffix: PropTypes.string,
|
|
value: PropTypes.string,
|
|
}
|
|
|