show the worst amounts/prices instead of current price
This commit is contained in:
parent
3680b93fb3
commit
83b0ef94f9
@ -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>
|
||||||
)}
|
)}
|
||||||
|
16
yarn.lock
16
yarn.lock
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user