show the worst amounts/prices instead of current price

This commit is contained in:
Moody Salem 2021-04-27 13:07:07 -05:00
parent 3680b93fb3
commit 83b0ef94f9
No known key found for this signature in database
GPG Key ID: 8CB5CD10385138DB
4 changed files with 47 additions and 42 deletions

@ -46,10 +46,10 @@
"@uniswap/token-lists": "^1.0.0-beta.19", "@uniswap/token-lists": "^1.0.0-beta.19",
"@uniswap/v2-core": "1.0.0", "@uniswap/v2-core": "1.0.0",
"@uniswap/v2-periphery": "^1.1.0-beta.0", "@uniswap/v2-periphery": "^1.1.0-beta.0",
"@uniswap/v2-sdk": "^1.0.8", "@uniswap/v2-sdk": "^1.0.9",
"@uniswap/v3-core": "^1.0.0-rc.2", "@uniswap/v3-core": "^1.0.0-rc.2",
"@uniswap/v3-periphery": "^1.0.0-beta.20", "@uniswap/v3-periphery": "^1.0.0-beta.20",
"@uniswap/v3-sdk": "^1.0.0-alpha.21", "@uniswap/v3-sdk": "^1.0.0-alpha.22",
"@web3-react/core": "^6.0.9", "@web3-react/core": "^6.0.9",
"@web3-react/fortmatic-connector": "^6.0.9", "@web3-react/fortmatic-connector": "^6.0.9",
"@web3-react/injected-connector": "^6.0.7", "@web3-react/injected-connector": "^6.0.7",

@ -30,9 +30,6 @@ export default function TradePrice({
const label = showInverted ? `${price?.quoteCurrency?.symbol}` : `${price?.baseCurrency?.symbol} ` const label = showInverted ? `${price?.quoteCurrency?.symbol}` : `${price?.baseCurrency?.symbol} `
const labelInverted = showInverted ? `${price?.baseCurrency?.symbol} ` : `${price?.quoteCurrency?.symbol}` const labelInverted = showInverted ? `${price?.baseCurrency?.symbol} ` : `${price?.quoteCurrency?.symbol}`
// ? `${price?.quoteCurrency?.symbol} per ${price?.baseCurrency?.symbol}`
// : `${price?.baseCurrency?.symbol} per ${price?.quoteCurrency?.symbol}`
return ( return (
<div <div
style={{ style={{
@ -53,7 +50,7 @@ export default function TradePrice({
<Text fontWeight={500} fontSize={14} color={theme.text2}> <Text fontWeight={500} fontSize={14} color={theme.text2}>
{'1 ' + labelInverted + ' = ' + formattedPrice ?? '-'} {label} {'1 ' + labelInverted + ' = ' + formattedPrice ?? '-'} {label}
</Text> </Text>
<StyledBalanceMaxMini style={{ marginLeft: ' 0.5rem' }} onClick={() => setShowInverted(!showInverted)}> <StyledBalanceMaxMini style={{ marginLeft: '0.5rem' }} onClick={() => setShowInverted(!showInverted)}>
<img width={'16px'} src={Switch} alt="logo" /> <img width={'16px'} src={Switch} alt="logo" />
</StyledBalanceMaxMini> </StyledBalanceMaxMini>
</div> </div>

@ -1,5 +1,5 @@
import JSBI from 'jsbi' import JSBI from 'jsbi'
import { CurrencyAmount, Token } from '@uniswap/sdk-core' import { CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
import { Trade as V2Trade } from '@uniswap/v2-sdk' import { Trade as V2Trade } from '@uniswap/v2-sdk'
import { Trade as V3Trade } from '@uniswap/v3-sdk' import { Trade as V3Trade } from '@uniswap/v3-sdk'
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react' import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
@ -111,15 +111,25 @@ export default function Swap({ history }: RouteComponentProps) {
[Version.v3]: v3Trade.trade ?? undefined, [Version.v3]: v3Trade.trade ?? undefined,
}[toggledVersion] }[toggledVersion]
const parsedAmounts = showWrap const parsedAmounts = useMemo(
() =>
showWrap
? { ? {
[Field.INPUT]: parsedAmount, [Field.INPUT]: parsedAmount,
[Field.OUTPUT]: parsedAmount, [Field.OUTPUT]: parsedAmount,
} }
: { : {
[Field.INPUT]: independentField === Field.INPUT ? parsedAmount : trade?.inputAmount, [Field.INPUT]:
[Field.OUTPUT]: independentField === Field.OUTPUT ? parsedAmount : trade?.outputAmount, independentField === Field.INPUT
} ? parsedAmount
: trade?.maximumAmountIn(new Percent(allowedSlippage, 10_000)),
[Field.OUTPUT]:
independentField === Field.OUTPUT
? parsedAmount
: trade?.minimumAmountOut(new Percent(allowedSlippage, 10_000)),
},
[allowedSlippage, independentField, parsedAmount, showWrap, trade]
)
const { onSwitchTokens, onCurrencySelection, onUserInput, onChangeRecipient } = useSwapActionHandlers() const { onSwitchTokens, onCurrencySelection, onUserInput, onChangeRecipient } = useSwapActionHandlers()
const isValid = !swapInputError const isValid = !swapInputError
@ -185,8 +195,8 @@ export default function Swap({ history }: RouteComponentProps) {
} }
}, [approval, approvalSubmitted]) }, [approval, approvalSubmitted])
const maxAmountInput: CurrencyAmount | undefined = maxAmountSpend(currencyBalances[Field.INPUT]) const maxInputAmount: CurrencyAmount | undefined = maxAmountSpend(currencyBalances[Field.INPUT])
const atMaxAmountInput = Boolean(maxAmountInput && parsedAmounts[Field.INPUT]?.equalTo(maxAmountInput)) const atMaxInputAmount = Boolean(maxInputAmount && parsedAmounts[Field.INPUT]?.equalTo(maxInputAmount))
// the callback to execute the swap // the callback to execute the swap
const { callback: swapCallback, error: swapCallbackError } = useSwapCallback( const { callback: swapCallback, error: swapCallbackError } = useSwapCallback(
@ -255,7 +265,7 @@ export default function Swap({ history }: RouteComponentProps) {
// errors // errors
const [showInverted, setShowInverted] = useState<boolean>(false) const [showInverted, setShowInverted] = useState<boolean>(false)
// warnings on slippage // warnings on price impact
const priceImpactSeverity = warningSeverity(priceImpactWithoutFee) const priceImpactSeverity = warningSeverity(priceImpactWithoutFee)
// show approve flow when: no error on inputs, not approved or pending, or approved in current session // show approve flow when: no error on inputs, not approved or pending, or approved in current session
@ -288,8 +298,8 @@ export default function Swap({ history }: RouteComponentProps) {
) )
const handleMaxInput = useCallback(() => { const handleMaxInput = useCallback(() => {
maxAmountInput && onUserInput(Field.INPUT, maxAmountInput.toExact()) maxInputAmount && onUserInput(Field.INPUT, maxInputAmount.toExact())
}, [maxAmountInput, onUserInput]) }, [maxInputAmount, onUserInput])
const handleOutputSelect = useCallback((outputCurrency) => onCurrencySelection(Field.OUTPUT, outputCurrency), [ const handleOutputSelect = useCallback((outputCurrency) => onCurrencySelection(Field.OUTPUT, outputCurrency), [
onCurrencySelection, onCurrencySelection,
@ -327,9 +337,9 @@ export default function Swap({ history }: RouteComponentProps) {
<AutoColumn gap={'md'}> <AutoColumn gap={'md'}>
<div style={{ display: 'relative' }}> <div style={{ display: 'relative' }}>
<CurrencyInputPanel <CurrencyInputPanel
label={independentField === Field.OUTPUT && !showWrap && trade ? 'From (estimated)' : 'From'} label={independentField === Field.OUTPUT && !showWrap && trade ? 'From (maximum)' : 'From'}
value={formattedAmounts[Field.INPUT]} value={formattedAmounts[Field.INPUT]}
showMaxButton={!atMaxAmountInput} showMaxButton={!atMaxInputAmount}
currency={currencies[Field.INPUT]} currency={currencies[Field.INPUT]}
onUserInput={handleTypeInput} onUserInput={handleTypeInput}
onMax={handleMaxInput} onMax={handleMaxInput}
@ -388,17 +398,15 @@ export default function Swap({ history }: RouteComponentProps) {
) : ( ) : (
<AutoColumn justify="space-between"> <AutoColumn justify="space-between">
<AutoRow style={{ padding: '0 0.5rem', justifyContent: 'space-between' }}> <AutoRow style={{ padding: '0 0.5rem', justifyContent: 'space-between' }}>
{Boolean(trade) && (
<AutoRow> <AutoRow>
<TradePrice <TradePrice
price={trade?.executionPrice} price={trade?.worstExecutionPrice(new Percent(allowedSlippage, 10_000))}
showInverted={showInverted} showInverted={showInverted}
setShowInverted={setShowInverted} setShowInverted={setShowInverted}
showDetails={showDetails} showDetails={showDetails}
setShowDetails={setShowDetails} setShowDetails={setShowDetails}
/> />
</AutoRow> </AutoRow>
)}
</AutoRow> </AutoRow>
</AutoColumn> </AutoColumn>
)} )}

@ -4122,10 +4122,10 @@
"@uniswap/lib" "1.1.1" "@uniswap/lib" "1.1.1"
"@uniswap/v2-core" "1.0.0" "@uniswap/v2-core" "1.0.0"
"@uniswap/v2-sdk@^1.0.8": "@uniswap/v2-sdk@^1.0.9":
version "1.0.8" version "1.0.9"
resolved "https://registry.yarnpkg.com/@uniswap/v2-sdk/-/v2-sdk-1.0.8.tgz#6ea8a7a3861a3d2be536d2f5f1405d4a1e4dd024" resolved "https://registry.yarnpkg.com/@uniswap/v2-sdk/-/v2-sdk-1.0.9.tgz#cd9e69b5b25c9ca8f1daec19d1859f48241b4d5c"
integrity sha512-WmS2KXSfe251Q8cZ4Scb7NOapIC1llCzPLOmnz3Wiuce2wnGnx+IeQEdfeWj3N4o6Xd9QrUykXOx1B5mjn8nxA== integrity sha512-/dWJvTx1ssi+DFp05tEnoBtgLQdihlEOL9rlFMPEMTz0f0GsgYOTEh8Z4I7UhS6aGdZ/lCGSfJJRjDiDO7IDEw==
dependencies: dependencies:
"@ethersproject/address" "^5.0.0" "@ethersproject/address" "^5.0.0"
"@ethersproject/solidity" "^5.0.0" "@ethersproject/solidity" "^5.0.0"
@ -4158,10 +4158,10 @@
"@uniswap/v2-core" "1.0.1" "@uniswap/v2-core" "1.0.1"
"@uniswap/v3-core" "1.0.0-rc.2" "@uniswap/v3-core" "1.0.0-rc.2"
"@uniswap/v3-sdk@^1.0.0-alpha.21": "@uniswap/v3-sdk@^1.0.0-alpha.22":
version "1.0.0-alpha.21" version "1.0.0-alpha.22"
resolved "https://registry.yarnpkg.com/@uniswap/v3-sdk/-/v3-sdk-1.0.0-alpha.21.tgz#f035f96f922680f92b3af71bbe6bec3d9966c0a2" resolved "https://registry.yarnpkg.com/@uniswap/v3-sdk/-/v3-sdk-1.0.0-alpha.22.tgz#74acca3b952fc71a103fca14e79ee696f90096ba"
integrity sha512-hhsJZwn0pooyjajKPZ0O5AR4asXZUVDwqqwXlWWvxFZtvetwhZ/AXxIllYcLUXoc3cJOQvfGzjkhXq0be35RDA== integrity sha512-HoITh2zpxG6xDh3hEtLPrqYAF3alNkPnpZ5mWlIvoql1W/3c2LKMvbsBowj7RGDSeMVK4OJjyE2m+rX9b/EqNw==
dependencies: dependencies:
"@ethersproject/abi" "^5.0.12" "@ethersproject/abi" "^5.0.12"
"@ethersproject/solidity" "^5.0.9" "@ethersproject/solidity" "^5.0.9"