ciphermask/ui/app/components/ui/currency-display/currency-display.component.js

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,
}