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

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

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