import React from 'react'; import PropTypes from 'prop-types'; import BigNumber from 'bignumber.js'; import { calcTokenAmount } from '../../../helpers/utils/token-util'; import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util'; import Tooltip from '../../../components/ui/tooltip'; import UrlIcon from '../../../components/ui/url-icon'; import ExchangeRateDisplay from '../exchange-rate-display'; import { formatSwapsValueForDisplay } from '../swaps.util'; function getFontSizesAndLineHeights(fontSizeScore) { if (fontSizeScore <= 9) { return [50, 48]; } if (fontSizeScore <= 13) { return [40, 32]; } return [26, 15]; } export default function MainQuoteSummary({ sourceValue, sourceSymbol, sourceDecimals, sourceIconUrl, destinationValue, destinationSymbol, destinationDecimals, destinationIconUrl, }) { const sourceAmount = toPrecisionWithoutTrailingZeros( calcTokenAmount(sourceValue, sourceDecimals).toString(10), 12, ); const destinationAmount = calcTokenAmount( destinationValue, destinationDecimals, ); const amountToDisplay = formatSwapsValueForDisplay(destinationAmount); const amountDigitLength = amountToDisplay.match(/\d+/gu).join('').length; const [numberFontSize, lineHeight] = getFontSizesAndLineHeights( amountDigitLength, ); let ellipsedAmountToDisplay = amountToDisplay; if (amountDigitLength > 20) { ellipsedAmountToDisplay = `${amountToDisplay.slice(0, 20)}...`; } return (
{formatSwapsValueForDisplay(sourceAmount)} {sourceSymbol}
{destinationSymbol}
{`${ellipsedAmountToDisplay}`}
); } MainQuoteSummary.propTypes = { sourceValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.instanceOf(BigNumber), ]).isRequired, sourceDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), sourceSymbol: PropTypes.string.isRequired, destinationValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.instanceOf(BigNumber), ]).isRequired, destinationDecimals: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, ]), destinationSymbol: PropTypes.string.isRequired, sourceIconUrl: PropTypes.string, destinationIconUrl: PropTypes.string, };