1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/swaps/main-quote-summary/main-quote-summary.js

153 lines
4.8 KiB
JavaScript
Raw Normal View History

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';
2020-10-06 20:28:38 +02:00
function getFontSizesAndLineHeights(fontSizeScore) {
if (fontSizeScore <= 9) {
return [60, 48];
}
if (fontSizeScore <= 13) {
return [40, 32];
}
return [26, 15];
2020-10-06 20:28:38 +02:00
}
2020-11-03 00:41:28 +01:00
export default function MainQuoteSummary({
2020-10-06 20:28:38 +02:00
sourceValue,
sourceSymbol,
sourceDecimals,
sourceIconUrl,
2020-10-06 20:28:38 +02:00
destinationValue,
destinationSymbol,
destinationDecimals,
destinationIconUrl,
2020-10-06 20:28:38 +02:00
}) {
2020-11-03 00:41:28 +01:00
const sourceAmount = toPrecisionWithoutTrailingZeros(
calcTokenAmount(sourceValue, sourceDecimals).toString(10),
12,
);
2020-11-03 00:41:28 +01:00
const destinationAmount = calcTokenAmount(
destinationValue,
destinationDecimals,
);
2020-10-06 20:28:38 +02:00
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)}...`;
2020-10-06 20:28:38 +02:00
}
return (
<div className="main-quote-summary">
<div className="main-quote-summary__details">
<div className="main-quote-summary__quote-details-top">
<div
className="main-quote-summary__source-row"
data-testid="main-quote-summary__source-row"
>
<span
className="main-quote-summary__source-row-value"
title={formatSwapsValueForDisplay(sourceAmount)}
>
{formatSwapsValueForDisplay(sourceAmount)}
</span>
<UrlIcon
url={sourceIconUrl}
className="main-quote-summary__icon"
name={sourceSymbol}
fallbackClassName="main-quote-summary__icon-fallback"
/>
<span
className="main-quote-summary__source-row-symbol"
title={sourceSymbol}
>
{sourceSymbol}
</span>
</div>
<img
className="main-quote-summary__down-arrow"
src="images/down-arrow-grey.svg"
/>
<div className="main-quote-summary__destination-row">
<UrlIcon
url={destinationIconUrl}
className="main-quote-summary__icon"
name={destinationSymbol}
fallbackClassName="main-quote-summary__icon-fallback"
/>
<span className="main-quote-summary__destination-row-symbol">
{destinationSymbol}
</span>
</div>
2020-10-06 20:28:38 +02:00
<div className="main-quote-summary__quote-large">
<Tooltip
interactive
position="bottom"
html={amountToDisplay}
disabled={ellipsedAmountToDisplay === amountToDisplay}
theme="white"
>
2020-11-03 00:41:28 +01:00
<span
className="main-quote-summary__quote-large-number"
style={{
fontSize: numberFontSize,
lineHeight: `${lineHeight}px`,
}}
>
{`${ellipsedAmountToDisplay}`}
</span>
2020-10-06 20:28:38 +02:00
</Tooltip>
</div>
</div>
<div
className="main-quote-summary__exchange-rate-container"
data-testid="main-quote-summary__exchange-rate-container"
>
2020-10-06 20:28:38 +02:00
<ExchangeRateDisplay
primaryTokenValue={sourceValue}
primaryTokenDecimals={sourceDecimals}
primaryTokenSymbol={sourceSymbol}
secondaryTokenValue={destinationValue}
secondaryTokenDecimals={destinationDecimals}
secondaryTokenSymbol={destinationSymbol}
arrowColor="#037DD6"
boldSymbols={false}
className="main-quote-summary__exchange-rate-display"
2020-10-06 20:28:38 +02:00
/>
</div>
</div>
</div>
);
2020-10-06 20:28:38 +02:00
}
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,
2020-11-03 00:41:28 +01:00
destinationDecimals: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
2020-10-06 20:28:38 +02:00
destinationSymbol: PropTypes.string.isRequired,
sourceIconUrl: PropTypes.string,
destinationIconUrl: PropTypes.string,
};