Ui changes (#747)

* copy changes

* remove unused input on toggle

* comparison fix
This commit is contained in:
Ian Lapham 2020-05-12 11:48:42 -04:00 committed by GitHub
parent 6da8e2c84d
commit 0d4108937f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 22 deletions

@ -190,16 +190,15 @@ export default function AddressInputPanel({
<TYPE.black color={theme.text2} fontWeight={500} fontSize={14}>
Recipient
</TYPE.black>
{data.name ? (
<Link href={getEtherscanLink(chainId, data.name, 'address')} style={{ fontSize: '14px' }}>
{data.name ||
(data.address && (
<Link
href={getEtherscanLink(chainId, data.name || data.address, 'address')}
style={{ fontSize: '14px' }}
>
(View on Etherscan)
</Link>
) : (
<Link href={getEtherscanLink(chainId, data.address, 'address')} style={{ fontSize: '14px' }}>
(View on Etherscan)
</Link>
)}
))}
</RowBetween>
<Input
type="text"

@ -130,7 +130,7 @@ function CreatePool({ history }) {
setShowSearch(false)
}}
hiddenToken={activeField === Fields.TOKEN0 ? token1Address : token0Address}
showCommonBases={true}
showCommonBases={activeField === Fields.TOKEN0}
/>
</AutoColumn>
)

@ -175,7 +175,6 @@ export default function CurrencyInputPanel({
<TYPE.body color={theme.text2} fontWeight={500} fontSize={14}>
{label}
</TYPE.body>
{account && (
<Hover>
<TYPE.body

@ -22,6 +22,7 @@ import { useAllTokens, useToken } from '../../contexts/Tokens'
import { usePendingApproval, useTransactionAdder } from '../../contexts/Transactions'
import { useTokenContract, useWeb3React } from '../../hooks'
import { useTradeExactIn, useTradeExactOut } from '../../hooks/Trades'
import { useWalletModalToggle } from '../../state/application/hooks'
import { Hover, TYPE } from '../../theme'
import { Link } from '../../theme/components'
import {
@ -88,6 +89,9 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
// adding notifications on txns
const addTransaction = useTransactionAdder()
// toggle wallet when disconnected
const toggleWalletModal = useWalletModalToggle()
// sending state
const [sending] = useState<boolean>(sendingInput)
const [sendingWithSwap, setSendingWithSwap] = useState<boolean>(false)
@ -835,7 +839,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
<RowBetween>
<RowFixed>
<TYPE.black color={theme.text2} fontSize={14} fontWeight={400}>
Price impact
Price Impact
</TYPE.black>
<QuestionHelper text="The difference between the market price and your price due to trade size." />
</RowFixed>
@ -1021,7 +1025,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
<>
<CurrencyInputPanel
field={Field.INPUT}
label={'From'}
label={independentField === Field.OUTPUT && parsedAmounts[Field.INPUT] ? 'From (estimated)' : 'From'}
value={formattedAmounts[Field.INPUT]}
atMax={atMaxAmountInput}
token={tokens[Field.INPUT]}
@ -1071,7 +1075,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
onMax={() => {
maxAmountOutput && onMaxOutput(maxAmountOutput.toExact())
}}
label={'To'}
label={independentField === Field.INPUT && parsedAmounts[Field.OUTPUT] ? 'To (estimated)' : 'To'}
atMax={atMaxAmountOutput}
token={tokens[Field.OUTPUT]}
onTokenSelection={address => onTokenSelection(Field.OUTPUT, address)}
@ -1160,16 +1164,24 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
)}
</AutoColumn>
<BottomGrouping>
{noRoute && userHasSpecifiedInputOutput ? (
{!account ? (
<ButtonLight
onClick={() => {
toggleWalletModal()
}}
>
Connect Wallet
</ButtonLight>
) : noRoute && userHasSpecifiedInputOutput ? (
<GreyCard style={{ textAlign: 'center' }}>
<TYPE.main>No path found.</TYPE.main>
<TYPE.main mb="4px">Insufficient liquidity for this trade.</TYPE.main>
<Link
onClick={() => {
history.push('/add/' + tokens[Field.INPUT]?.address + '-' + tokens[Field.OUTPUT]?.address)
}}
>
Create one now
{' '}
Add liquidity now.
</Link>
</GreyCard>
) : !userHasApprovedRouter && !inputError ? (
@ -1298,7 +1310,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
<SectionBreak />
<RowFixed padding={'0 20px'}>
<TYPE.black fontWeight={400} fontSize={14} color={theme.text2}>
Set front running resistance
Set slippage tolerance
</TYPE.black>
<QuestionHelper text="Your transaction will revert if the price changes more than this amount after you submit your trade." />
</RowFixed>
@ -1326,8 +1338,8 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
</RowFixed>
</RowBetween>
<Text lineHeight="145.23%;" fontSize={16} fontWeight={400} color={theme.text1}>
This trade will move the price by {slippageFromTrade?.toFixed(2)}%. This pool probably doesnt
have enough liquidity to support this trade.
This trade will move the price by ~{priceSlippage.toFixed(2)}%. This pool probably doesnt have
enough liquidity to support this trade.
</Text>
</AutoColumn>
</YellowCard>