feature/default_network_editable
David Walsh
4 years ago
committed by
GitHub
parent
ba98edf604
commit
673371d013
@ -0,0 +1,149 @@ |
||||
import assert from 'assert' |
||||
import React from 'react' |
||||
import { shallow } from 'enzyme' |
||||
import { Provider } from 'react-redux' |
||||
import configureMockStore from 'redux-mock-store' |
||||
import ViewQuotePriceDifference from '../view-quote-price-difference' |
||||
|
||||
describe('View Price Quote Difference', function () { |
||||
const t = (key) => `translate ${key}` |
||||
|
||||
const state = { |
||||
metamask: { |
||||
tokens: [], |
||||
provider: { type: 'rpc', nickname: '', rpcUrl: '' }, |
||||
preferences: { showFiatInTestnets: true }, |
||||
currentCurrency: 'usd', |
||||
conversionRate: 600.0, |
||||
}, |
||||
} |
||||
|
||||
const store = configureMockStore()(state) |
||||
|
||||
// Sample transaction is 1 $ETH to ~42.880915 $LINK
|
||||
const DEFAULT_PROPS = { |
||||
usedQuote: { |
||||
trade: { |
||||
data: |
||||
'0x5f575529000000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000de0b6b3a764000000000000000000000000000000000000000000000000000000000000000000c00000000000000000000000000000000000000000000000000000000000000007756e69737761700000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001600000000000000000000000000000000000000000000000000000000000000000000000000000000000000000514910771af9ca656af840dff83e8264ecf986ca0000000000000000000000000000000000000000000000000dc1a09f859b20000000000000000000000000000000000000000000000000024855454cb32d335f0000000000000000000000000000000000000000000000000000000000000120000000000000000000000000000000000000000000000000000000005fc7b7100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001f161421c8e0000000000000000000000000000000000000000000000000000000000000000002000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2000000000000000000000000514910771af9ca656af840dff83e8264ecf986ca', |
||||
from: '0xd7440fdcb70a9fba55dfe06942ddbc17679c90ac', |
||||
value: '0xde0b6b3a7640000', |
||||
gas: '0xbbfd0', |
||||
to: '0x881D40237659C251811CEC9c364ef91dC08D300C', |
||||
}, |
||||
sourceAmount: '1000000000000000000', |
||||
destinationAmount: '42947749216634160067', |
||||
error: null, |
||||
sourceToken: '0x0000000000000000000000000000000000000000', |
||||
destinationToken: '0x514910771af9ca656af840dff83e8264ecf986ca', |
||||
approvalNeeded: null, |
||||
maxGas: 770000, |
||||
averageGas: 210546, |
||||
estimatedRefund: 80000, |
||||
fetchTime: 647, |
||||
aggregator: 'uniswap', |
||||
aggType: 'DEX', |
||||
fee: 0.875, |
||||
gasMultiplier: 1.5, |
||||
priceSlippage: { |
||||
ratio: 1.007876641534847, |
||||
calculationError: '', |
||||
bucket: 'low', |
||||
sourceAmountInETH: 1, |
||||
destinationAmountInEth: 0.9921849150875727, |
||||
}, |
||||
slippage: 2, |
||||
sourceTokenInfo: { |
||||
symbol: 'ETH', |
||||
name: 'Ether', |
||||
address: '0x0000000000000000000000000000000000000000', |
||||
decimals: 18, |
||||
iconUrl: 'images/black-eth-logo.svg', |
||||
}, |
||||
destinationTokenInfo: { |
||||
address: '0x514910771af9ca656af840dff83e8264ecf986ca', |
||||
symbol: 'LINK', |
||||
decimals: 18, |
||||
occurances: 12, |
||||
iconUrl: |
||||
'https://cloudflare-ipfs.com/ipfs/QmQhZAdcZvW9T2tPm516yHqbGkfhyZwTZmLixW9MXJudTA', |
||||
}, |
||||
ethFee: '0.011791', |
||||
ethValueOfTokens: '0.99220724791716534441', |
||||
overallValueOfQuote: '0.98041624791716534441', |
||||
metaMaskFeeInEth: '0.00875844985551091729', |
||||
isBestQuote: true, |
||||
savings: { |
||||
performance: '0.00207907025112527799', |
||||
fee: '0.005581', |
||||
metaMaskFee: '0.00875844985551091729', |
||||
total: '-0.0010983796043856393', |
||||
medianMetaMaskFee: '0.00874009740688812165', |
||||
}, |
||||
}, |
||||
sourceTokenValue: '1', |
||||
destinationTokenValue: '42.947749', |
||||
} |
||||
|
||||
let component |
||||
function renderComponent(props) { |
||||
component = shallow( |
||||
<Provider store={store}> |
||||
<ViewQuotePriceDifference {...props} /> |
||||
</Provider>, |
||||
{ |
||||
context: { t }, |
||||
}, |
||||
) |
||||
} |
||||
|
||||
afterEach(function () { |
||||
component.unmount() |
||||
}) |
||||
|
||||
it('does not render when there is no quote', function () { |
||||
const props = { ...DEFAULT_PROPS, usedQuote: null } |
||||
renderComponent(props) |
||||
|
||||
const wrappingDiv = component.find( |
||||
'.view-quote__price-difference-warning-wrapper', |
||||
) |
||||
assert.strictEqual(wrappingDiv.length, 0) |
||||
}) |
||||
|
||||
it('does not render when the item is in the low bucket', function () { |
||||
const props = { ...DEFAULT_PROPS } |
||||
props.usedQuote.priceSlippage.bucket = 'low' |
||||
|
||||
renderComponent(props) |
||||
const wrappingDiv = component.find( |
||||
'.view-quote__price-difference-warning-wrapper', |
||||
) |
||||
assert.strictEqual(wrappingDiv.length, 0) |
||||
}) |
||||
|
||||
it('displays an error when in medium bucket', function () { |
||||
const props = { ...DEFAULT_PROPS } |
||||
props.usedQuote.priceSlippage.bucket = 'medium' |
||||
|
||||
renderComponent(props) |
||||
assert.strictEqual(component.html().includes('medium'), true) |
||||
}) |
||||
|
||||
it('displays an error when in high bucket', function () { |
||||
const props = { ...DEFAULT_PROPS } |
||||
props.usedQuote.priceSlippage.bucket = 'high' |
||||
|
||||
renderComponent(props) |
||||
assert.strictEqual(component.html().includes('high'), true) |
||||
}) |
||||
|
||||
it('displays a fiat error when calculationError is present', function () { |
||||
const props = { ...DEFAULT_PROPS } |
||||
props.usedQuote.priceSlippage.calculationError = |
||||
'Could not determine price.' |
||||
|
||||
renderComponent(props) |
||||
assert.strictEqual(component.html().includes('fiat-error'), true) |
||||
}) |
||||
}) |
||||
@ -0,0 +1,114 @@ |
||||
import React, { useContext } from 'react' |
||||
|
||||
import PropTypes from 'prop-types' |
||||
import classnames from 'classnames' |
||||
import BigNumber from 'bignumber.js' |
||||
import { useEthFiatAmount } from '../../../hooks/useEthFiatAmount' |
||||
import { I18nContext } from '../../../contexts/i18n' |
||||
|
||||
import ActionableMessage from '../actionable-message' |
||||
import Tooltip from '../../../components/ui/tooltip' |
||||
|
||||
export default function ViewQuotePriceDifference(props) { |
||||
const { usedQuote, sourceTokenValue, destinationTokenValue } = props |
||||
|
||||
const t = useContext(I18nContext) |
||||
|
||||
const priceSlippageFromSource = useEthFiatAmount( |
||||
usedQuote?.priceSlippage?.sourceAmountInETH || 0, |
||||
) |
||||
const priceSlippageFromDestination = useEthFiatAmount( |
||||
usedQuote?.priceSlippage?.destinationAmountInEth || 0, |
||||
) |
||||
|
||||
if (!usedQuote || !usedQuote.priceSlippage) { |
||||
return null |
||||
} |
||||
|
||||
const { priceSlippage } = usedQuote |
||||
|
||||
// We cannot present fiat value if there is a calculation error or no slippage
|
||||
// from source or destination
|
||||
const priceSlippageUnknownFiatValue = |
||||
!priceSlippageFromSource || |
||||
!priceSlippageFromDestination || |
||||
priceSlippage.calculationError |
||||
|
||||
let priceDifferencePercentage = 0 |
||||
if (priceSlippage.ratio) { |
||||
priceDifferencePercentage = parseFloat( |
||||
new BigNumber(priceSlippage.ratio, 10) |
||||
.minus(1, 10) |
||||
.times(100, 10) |
||||
.toFixed(2), |
||||
10, |
||||
) |
||||
} |
||||
|
||||
const shouldShowPriceDifferenceWarning = |
||||
['high', 'medium'].includes(priceSlippage.bucket) || |
||||
priceSlippageUnknownFiatValue |
||||
|
||||
if (!shouldShowPriceDifferenceWarning) { |
||||
return null |
||||
} |
||||
|
||||
let priceDifferenceTitle = '' |
||||
let priceDifferenceMessage = '' |
||||
let priceDifferenceClass = '' |
||||
if (priceSlippageUnknownFiatValue) { |
||||
// A calculation error signals we cannot determine dollar value
|
||||
priceDifferenceMessage = t('swapPriceDifferenceUnavailable') |
||||
priceDifferenceClass = 'fiat-error' |
||||
} else { |
||||
priceDifferenceTitle = t('swapPriceDifferenceTitle', [ |
||||
priceDifferencePercentage, |
||||
]) |
||||
priceDifferenceMessage = t('swapPriceDifference', [ |
||||
sourceTokenValue, // Number of source token to swap
|
||||
usedQuote.sourceTokenInfo.symbol, // Source token symbol
|
||||
priceSlippageFromSource, // Source tokens total value
|
||||
destinationTokenValue, // Number of destination tokens in return
|
||||
usedQuote.destinationTokenInfo.symbol, // Destination token symbol,
|
||||
priceSlippageFromDestination, // Destination tokens total value
|
||||
]) |
||||
priceDifferenceClass = priceSlippage.bucket |
||||
} |
||||
|
||||
return ( |
||||
<div |
||||
className={classnames( |
||||
'view-quote__price-difference-warning-wrapper', |
||||
priceDifferenceClass, |
||||
)} |
||||
> |
||||
<ActionableMessage |
||||
message={ |
||||
<div className="view-quote__price-difference-warning-contents"> |
||||
<div className="view-quote__price-difference-warning-contents-text"> |
||||
{priceDifferenceTitle && ( |
||||
<div className="view-quote__price-difference-warning-contents-title"> |
||||
{priceDifferenceTitle} |
||||
</div> |
||||
)} |
||||
{priceDifferenceMessage} |
||||
</div> |
||||
<Tooltip |
||||
position="bottom" |
||||
theme="white" |
||||
title={t('swapPriceDifferenceTooltip')} |
||||
> |
||||
<i className="fa fa-info-circle" /> |
||||
</Tooltip> |
||||
</div> |
||||
} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
ViewQuotePriceDifference.propTypes = { |
||||
usedQuote: PropTypes.object, |
||||
sourceTokenValue: PropTypes.string, |
||||
destinationTokenValue: PropTypes.string, |
||||
} |
||||
Loading…
Reference in new issue