1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/pages/swaps/select-quote-popover/quote-details/quote-details.js

115 lines
3.8 KiB
JavaScript
Raw Normal View History

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { I18nContext } from '../../../../contexts/i18n';
import InfoTooltip from '../../../../components/ui/info-tooltip';
import ExchangeRateDisplay from '../../exchange-rate-display';
2020-10-06 20:28:38 +02:00
const QuoteDetails = ({
slippage,
sourceTokenValue,
sourceTokenSymbol,
destinationTokenValue,
destinationTokenSymbol,
liquiditySourceKey,
minimumAmountReceived,
feeInEth,
networkFees,
metaMaskFee,
hideEstimatedGasFee,
2020-10-06 20:28:38 +02:00
}) => {
const t = useContext(I18nContext);
2020-10-06 20:28:38 +02:00
return (
<div className="quote-details">
<div className="quote-details__row">
<div className="quote-details__detail-header">{t('swapRate')}</div>
<div className="quote-details__detail-content">
<ExchangeRateDisplay
2020-11-03 00:41:28 +01:00
primaryTokenValue={sourceTokenValue}
primaryTokenDecimals={1}
primaryTokenSymbol={sourceTokenSymbol}
secondaryTokenValue={destinationTokenValue}
secondaryTokenDecimals={1}
secondaryTokenSymbol={destinationTokenSymbol}
2020-10-06 20:28:38 +02:00
/>
</div>
</div>
<div className="quote-details__row">
<div className="quote-details__detail-header">
{t('swapMaxSlippage')}
<InfoTooltip
position="bottom"
contentText={t('swapQuoteDetailsSlippageInfo')}
/>
</div>
2020-11-03 00:41:28 +01:00
<div className="quote-details__detail-content">{`${slippage}%`}</div>
2020-10-06 20:28:38 +02:00
</div>
<div className="quote-details__row">
<div className="quote-details__detail-header">
{t('swapAmountReceived')}
<InfoTooltip
position="bottom"
contentText={t('swapAmountReceivedInfo')}
/>
</div>
<div className="quote-details__detail-content">
2020-11-03 00:41:28 +01:00
<span>{minimumAmountReceived}</span>
<span className="quote-details__bold">{` ${destinationTokenSymbol}`}</span>
2020-10-06 20:28:38 +02:00
</div>
</div>
{!hideEstimatedGasFee && (
<div className="quote-details__row">
<div className="quote-details__detail-header">
{t('swapEstimatedNetworkFees')}
<InfoTooltip
position="bottom"
contentText={t('swapEstimatedNetworkFeesInfo')}
/>
</div>
<div className="quote-details__detail-content">
<span>{feeInEth}</span>
<span className="quote-details__light-grey">{` (${networkFees})`}</span>
</div>
2020-10-06 20:28:38 +02:00
</div>
)}
2020-10-06 20:28:38 +02:00
<div className="quote-details__row">
<div className="quote-details__detail-header">
{t('swapSource')}
2020-11-03 00:41:28 +01:00
<InfoTooltip position="bottom" contentText={t('swapSourceInfo')} />
2020-10-06 20:28:38 +02:00
</div>
<div className="quote-details__detail-content">
{t(liquiditySourceKey)}
</div>
</div>
<div className="quote-details__row quote-details__row--high">
<div className="quote-details__detail-header">
2020-11-03 00:41:28 +01:00
<img
src="./images/logo/metamask-fox.svg"
2020-11-03 00:41:28 +01:00
className="quote-details__metafox-logo"
alt=""
2020-11-03 00:41:28 +01:00
/>
2020-10-06 20:28:38 +02:00
{t('swapMetaMaskFee')}
</div>
<div className="quote-details__detail-content">
{t('swapMetaMaskFeeDescription', [metaMaskFee])}
</div>
</div>
</div>
);
};
2020-10-06 20:28:38 +02:00
QuoteDetails.propTypes = {
slippage: PropTypes.number.isRequired,
2020-10-06 20:28:38 +02:00
sourceTokenValue: PropTypes.string.isRequired,
sourceTokenSymbol: PropTypes.string.isRequired,
destinationTokenValue: PropTypes.string.isRequired,
destinationTokenSymbol: PropTypes.string.isRequired,
liquiditySourceKey: PropTypes.string.isRequired,
minimumAmountReceived: PropTypes.string.isRequired,
feeInEth: PropTypes.string.isRequired,
networkFees: PropTypes.string.isRequired,
metaMaskFee: PropTypes.number.isRequired,
hideEstimatedGasFee: PropTypes.bool,
};
2020-10-06 20:28:38 +02:00
export default QuoteDetails;