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