1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/pages/swaps/main-quote-summary/main-quote-summary.js
Guillaume Roux a7ac83f9d3
Dark Mode: Swap hex colors in ui/pages (#14214)
* swap hex colors in ui/pages

* update snapshots
2022-03-25 15:15:31 -07:00

150 lines
4.8 KiB
JavaScript

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 (
<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>
<i className="fa fa-arrow-down main-quote-summary__down-arrow" />
<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>
<div className="main-quote-summary__quote-large">
<Tooltip
interactive
position="bottom"
html={amountToDisplay}
disabled={ellipsedAmountToDisplay === amountToDisplay}
theme="white"
>
<span
className="main-quote-summary__quote-large-number"
style={{
fontSize: numberFontSize,
lineHeight: `${lineHeight}px`,
}}
>
{`${ellipsedAmountToDisplay}`}
</span>
</Tooltip>
</div>
</div>
<div
className="main-quote-summary__exchange-rate-container"
data-testid="main-quote-summary__exchange-rate-container"
>
<ExchangeRateDisplay
primaryTokenValue={sourceValue}
primaryTokenDecimals={sourceDecimals}
primaryTokenSymbol={sourceSymbol}
secondaryTokenValue={destinationValue}
secondaryTokenDecimals={destinationDecimals}
secondaryTokenSymbol={destinationSymbol}
arrowColor="var(--color-primary-default)"
boldSymbols={false}
className="main-quote-summary__exchange-rate-display"
/>
</div>
</div>
</div>
);
}
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,
};