ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: v2 pool ui (#7316)

Browse Source 
* fix: v2 pool ui

* fix: use one wrapper
This commit is contained in:
eddie 2023-09-14 14:51:39 -07:00 committed by GitHub
parent 172160deb5
commit ac9a6f0398
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/pages/AddLiquidityV2/index.tsx
View File

@ -14,7 +14,7 @@ import { useCallback, useState } from 'react'
import { Plus } from 'react-feather' import { Plus } from 'react-feather'
import { useLocation, useNavigate, useParams } from 'react-router-dom' import { useLocation, useNavigate, useParams } from 'react-router-dom'
import { Text } from 'rebass' import { Text } from 'rebass'
import { useTheme } from 'styled-components' import styled, { useTheme } from 'styled-components'
import { ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button' import { ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
import { BlueCard, LightCard } from '../../components/Card' import { BlueCard, LightCard } from '../../components/Card'
@ -23,7 +23,7 @@ import CurrencyInputPanel from '../../components/CurrencyInputPanel'
import DoubleCurrencyLogo from '../../components/DoubleLogo' import DoubleCurrencyLogo from '../../components/DoubleLogo'
import { AddRemoveTabs } from '../../components/NavigationTabs' import { AddRemoveTabs } from '../../components/NavigationTabs'
import { MinimalPositionCard } from '../../components/PositionCard' import { MinimalPositionCard } from '../../components/PositionCard'
import Row, { RowBetween, RowFlat } from '../../components/Row' import Row, { AutoRow, RowBetween, RowFlat } from '../../components/Row'
import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal' import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
import { ZERO_PERCENT } from '../../constants/misc' import { ZERO_PERCENT } from '../../constants/misc'
import { WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens' import { WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens'
@ -50,6 +50,11 @@ import { PoolPriceBar } from './PoolPriceBar'
const DEFAULT_ADD_V2_SLIPPAGE_TOLERANCE = new Percent(50, 10_000) const DEFAULT_ADD_V2_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
const AddLiquidityHeaderContainer = styled(AutoColumn)`
gap: 20px;
margin-bottom: 16px;
`
export default function AddLiquidity() { export default function AddLiquidity() {
const { currencyIdA, currencyIdB } = useParams<{ currencyIdA?: string; currencyIdB?: string }>() const { currencyIdA, currencyIdB } = useParams<{ currencyIdA?: string; currencyIdB?: string }>()
const navigate = useNavigate() const navigate = useNavigate()
@ -220,45 +225,47 @@ export default function AddLiquidity() {
} }
const modalHeader = () => { const modalHeader = () => {
return noLiquidity ? ( return (
<AutoColumn gap="20px"> <AddLiquidityHeaderContainer>
<LightCard mt="20px" $borderRadius="20px"> {noLiquidity ? (
<RowFlat> <LightCard mt="20px" $borderRadius="20px">
<Text fontSize="48px" fontWeight={535} lineHeight="42px" marginRight={10}> <AutoRow justify="space-between">
{currencies[Field.CURRENCY_A]?.symbol + '/' + currencies[Field.CURRENCY_B]?.symbol} <Text fontSize="24px" fontWeight={535} lineHeight="42px" marginRight={10}>
</Text> {currencies[Field.CURRENCY_A]?.symbol + '/' + currencies[Field.CURRENCY_B]?.symbol}
<DoubleCurrencyLogo </Text>
currency0={currencies[Field.CURRENCY_A]} <DoubleCurrencyLogo
currency1={currencies[Field.CURRENCY_B]} currency0={currencies[Field.CURRENCY_A]}
size={30} currency1={currencies[Field.CURRENCY_B]}
/> size={30}
</RowFlat> />
</LightCard> </AutoRow>
</AutoColumn> </LightCard>
) : ( ) : (
<AutoColumn gap="20px"> <>
<RowFlat style={{ marginTop: '20px' }}> <RowFlat style={{ marginTop: '20px' }}>
<Text fontSize="48px" fontWeight={535} lineHeight="42px" marginRight={10}> <Text fontSize="48px" fontWeight={535} lineHeight="42px" marginRight={10}>
{liquidityMinted?.toSignificant(6)} {liquidityMinted?.toSignificant(6)}
</Text> </Text>
<DoubleCurrencyLogo <DoubleCurrencyLogo
currency0={currencies[Field.CURRENCY_A]} currency0={currencies[Field.CURRENCY_A]}
currency1={currencies[Field.CURRENCY_B]} currency1={currencies[Field.CURRENCY_B]}
size={30} size={30}
/> />
</RowFlat> </RowFlat>
<Row> <Row>
<Text fontSize="24px"> <Text fontSize="24px">
{currencies[Field.CURRENCY_A]?.symbol + '/' + currencies[Field.CURRENCY_B]?.symbol + ' Pool Tokens'} {currencies[Field.CURRENCY_A]?.symbol + '/' + currencies[Field.CURRENCY_B]?.symbol + ' Pool Tokens'}
</Text> </Text>
</Row> </Row>
<ThemedText.DeprecatedItalic fontSize={12} textAlign="left" padding="8px 0 0 0 "> <ThemedText.DeprecatedItalic fontSize={12} textAlign="left" padding="8px 0 0 0 ">
<Trans> <Trans>
Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your
will revert. transaction will revert.
</Trans> </Trans>
</ThemedText.DeprecatedItalic> </ThemedText.DeprecatedItalic>
</AutoColumn> </>
)}
</AddLiquidityHeaderContainer>
) )
} }