mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 23:44:56 +01:00
4c341d83ab
* add metametrics wrapper * add history dep * provide test data and mock react router * add first confirmaion screen * figure out a way to mock match.params * render token approval with data * fix lockfile * fix lint * remove use effect * lintfix * add . for src paths * litfix * Add knobs to change redux store for confirm-approve component (Storybook) (#11135) * add knob for domain * knobify * remove logs * remove comment * lintfix * fix comments * add background calls + metriccs event to storybook acctions * lintfixxxx
111 lines
3.7 KiB
JavaScript
111 lines
3.7 KiB
JavaScript
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';
|
|
|
|
const QuoteDetails = ({
|
|
slippage,
|
|
sourceTokenValue,
|
|
sourceTokenSymbol,
|
|
destinationTokenValue,
|
|
destinationTokenSymbol,
|
|
liquiditySourceKey,
|
|
minimumAmountReceived,
|
|
feeInEth,
|
|
networkFees,
|
|
metaMaskFee,
|
|
}) => {
|
|
const t = useContext(I18nContext);
|
|
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
|
|
primaryTokenValue={sourceTokenValue}
|
|
primaryTokenDecimals={1}
|
|
primaryTokenSymbol={sourceTokenSymbol}
|
|
secondaryTokenValue={destinationTokenValue}
|
|
secondaryTokenDecimals={1}
|
|
secondaryTokenSymbol={destinationTokenSymbol}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="quote-details__row">
|
|
<div className="quote-details__detail-header">
|
|
{t('swapMaxSlippage')}
|
|
<InfoTooltip
|
|
position="bottom"
|
|
contentText={t('swapQuoteDetailsSlippageInfo')}
|
|
/>
|
|
</div>
|
|
<div className="quote-details__detail-content">{`${slippage}%`}</div>
|
|
</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">
|
|
<span>{minimumAmountReceived}</span>
|
|
<span className="quote-details__bold">{` ${destinationTokenSymbol}`}</span>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
<div className="quote-details__row">
|
|
<div className="quote-details__detail-header">
|
|
{t('swapSource')}
|
|
<InfoTooltip position="bottom" contentText={t('swapSourceInfo')} />
|
|
</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">
|
|
<img
|
|
src="./images/logo/metamask-fox.svg"
|
|
className="quote-details__metafox-logo"
|
|
alt=""
|
|
/>
|
|
{t('swapMetaMaskFee')}
|
|
</div>
|
|
<div className="quote-details__detail-content">
|
|
{t('swapMetaMaskFeeDescription', [metaMaskFee])}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
QuoteDetails.propTypes = {
|
|
slippage: PropTypes.number.isRequired,
|
|
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,
|
|
};
|
|
|
|
export default QuoteDetails;
|