fix price impact handling/coloring

This commit is contained in:
Moody Salem 2021-05-03 20:05:20 -05:00
parent 9fec8dbe93
commit 0dcd5743c8
No known key found for this signature in database
GPG Key ID: 8CB5CD10385138DB
3 changed files with 7 additions and 6 deletions

@ -201,7 +201,7 @@ export default function CurrencyInputPanel({
if (priceImpact.lessThan('0')) return theme.green1 if (priceImpact.lessThan('0')) return theme.green1
const severity = warningSeverity(priceImpact) const severity = warningSeverity(priceImpact)
if (severity < 1) return undefined if (severity < 1) return undefined
if (severity < 2) return theme.yellow1 if (severity < 3) return theme.yellow1
return theme.red1 return theme.red1
}, [priceImpact, theme.green1, theme.red1, theme.yellow1]) }, [priceImpact, theme.green1, theme.red1, theme.yellow1])
@ -300,7 +300,7 @@ export default function CurrencyInputPanel({
<TYPE.body fontSize={14} color={fiatValue ? theme.text2 : theme.text4}> <TYPE.body fontSize={14} color={fiatValue ? theme.text2 : theme.text4}>
{fiatValue ? '~' : ''}${fiatValue ? Number(fiatValue?.toSignificant(6)).toLocaleString('en') : '-'} {fiatValue ? '~' : ''}${fiatValue ? Number(fiatValue?.toSignificant(6)).toLocaleString('en') : '-'}
{priceImpact ? ( {priceImpact ? (
<span style={{ color: priceImpactColor }}> ({priceImpact.multiply(-1).toSignificant(3)}%)</span> <span style={{ color: priceImpactColor }}> ({priceImpact.multiply(-100).toSignificant(3)}%)</span>
) : null} ) : null}
</TYPE.body> </TYPE.body>
</RowBetween> </RowBetween>

@ -25,6 +25,7 @@ import ConfirmSwapModal from '../../components/swap/ConfirmSwapModal'
import { ArrowWrapper, BottomGrouping, Dots, SwapCallbackError, Wrapper } from '../../components/swap/styleds' import { ArrowWrapper, BottomGrouping, Dots, SwapCallbackError, Wrapper } from '../../components/swap/styleds'
import TradePrice from '../../components/swap/TradePrice' import TradePrice from '../../components/swap/TradePrice'
import TokenWarningModal from '../../components/TokenWarningModal' import TokenWarningModal from '../../components/TokenWarningModal'
import { ONE_HUNDRED_PERCENT } from '../../constants'
import { useActiveWeb3React } from '../../hooks' import { useActiveWeb3React } from '../../hooks'
import { useAllTokens, useCurrency } from '../../hooks/Tokens' import { useAllTokens, useCurrency } from '../../hooks/Tokens'
import { ApprovalState, useApproveCallbackFromTrade } from '../../hooks/useApproveCallback' import { ApprovalState, useApproveCallbackFromTrade } from '../../hooks/useApproveCallback'
@ -56,7 +57,6 @@ import { isTradeBetter } from '../../utils/isTradeBetter'
import BetterTradeLink from '../../components/swap/BetterTradeLink' import BetterTradeLink from '../../components/swap/BetterTradeLink'
import SwapHeader from '../../components/swap/SwapHeader' import SwapHeader from '../../components/swap/SwapHeader'
const ONE_HUNDRED_PERCENT = new Percent(100, 100)
function computeFiatValuePriceImpact( function computeFiatValuePriceImpact(
fiatValueInput: CurrencyAmount | undefined | null, fiatValueInput: CurrencyAmount | undefined | null,
fiatValueOutput: CurrencyAmount | undefined | null fiatValueOutput: CurrencyAmount | undefined | null
@ -64,7 +64,8 @@ function computeFiatValuePriceImpact(
if (!fiatValueOutput || !fiatValueInput) return undefined if (!fiatValueOutput || !fiatValueInput) return undefined
if (!currencyEquals(fiatValueInput.currency, fiatValueOutput.currency)) return undefined if (!currencyEquals(fiatValueInput.currency, fiatValueOutput.currency)) return undefined
if (JSBI.equal(fiatValueInput.raw, JSBI.BigInt(0))) return undefined if (JSBI.equal(fiatValueInput.raw, JSBI.BigInt(0))) return undefined
return ONE_HUNDRED_PERCENT.subtract(fiatValueOutput.divide(fiatValueInput)).multiply(100) const pct = ONE_HUNDRED_PERCENT.subtract(fiatValueOutput.divide(fiatValueInput))
return new Percent(pct.numerator, pct.denominator)
} }
export default function Swap({ history }: RouteComponentProps) { export default function Swap({ history }: RouteComponentProps) {

@ -24,7 +24,7 @@ describe('application reducer', () => {
expect(typeof list[0].key).toEqual('string') expect(typeof list[0].key).toEqual('string')
expect(list[0].show).toEqual(true) expect(list[0].show).toEqual(true)
expect(list[0].content).toEqual({ txn: { hash: 'abc', summary: 'test', success: true } }) expect(list[0].content).toEqual({ txn: { hash: 'abc', summary: 'test', success: true } })
expect(list[0].removeAfterMs).toEqual(15000) expect(list[0].removeAfterMs).toEqual(25000)
}) })
it('replaces any existing popups with the same key', () => { it('replaces any existing popups with the same key', () => {
@ -35,7 +35,7 @@ describe('application reducer', () => {
expect(list[0].key).toEqual('abc') expect(list[0].key).toEqual('abc')
expect(list[0].show).toEqual(true) expect(list[0].show).toEqual(true)
expect(list[0].content).toEqual({ txn: { hash: 'def', summary: 'test2', success: false } }) expect(list[0].content).toEqual({ txn: { hash: 'def', summary: 'test2', success: false } })
expect(list[0].removeAfterMs).toEqual(15000) expect(list[0].removeAfterMs).toEqual(25000)
}) })
}) })