Skip to content

I
interface
Commit 37cf492d authored by Yuta Sugimura's avatar Yuta Sugimura Committed by GitHub
Browse files
Options

fix: Add SwitchLocaleLink to a page where it does not exist (#1867)

parent 9e93f809
Hide whitespace changes
Inline Side-by-side
Showing with 900 additions and 874 deletions
src/pages/AddLiquidity/index.tsx
View file @ 37cf492d
...@@ -55,6 +55,7 @@ import RateToggle from 'components/RateToggle' ...@@ -55,6 +55,7 @@ import RateToggle from 'components/RateToggle'
import { BigNumber } from '@ethersproject/bignumber' import { BigNumber } from '@ethersproject/bignumber'
import { AddRemoveTabs } from 'components/NavigationTabs' import { AddRemoveTabs } from 'components/NavigationTabs'
import HoverInlineText from 'components/HoverInlineText' import HoverInlineText from 'components/HoverInlineText'
import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000) const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
...@@ -385,393 +386,401 @@ export default function AddLiquidity({ ...@@ -385,393 +386,401 @@ export default function AddLiquidity({
!argentWalletContract && approvalB !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_B] !argentWalletContract && approvalB !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_B]
return ( return (
<ScrollablePage> <>
<TransactionConfirmationModal <ScrollablePage>
isOpen={showConfirm} <TransactionConfirmationModal
onDismiss={handleDismissConfirmation} isOpen={showConfirm}
attemptingTxn={attemptingTxn} onDismiss={handleDismissConfirmation}
hash={txHash} attemptingTxn={attemptingTxn}
content={() => ( hash={txHash}
<ConfirmationModalContent content={() => (
title={'Add Liquidity'} <ConfirmationModalContent
onDismiss={handleDismissConfirmation} title={'Add Liquidity'}
topContent={() => ( onDismiss={handleDismissConfirmation}
<Review topContent={() => (
parsedAmounts={parsedAmounts} <Review
position={position} parsedAmounts={parsedAmounts}
existingPosition={existingPosition} position={position}
priceLower={priceLower} existingPosition={existingPosition}
priceUpper={priceUpper} priceLower={priceLower}
outOfRange={outOfRange} priceUpper={priceUpper}
/> outOfRange={outOfRange}
)}
bottomContent={() => (
<ButtonPrimary style={{ marginTop: '1rem' }} onClick={onAdd}>
<Text fontWeight={500} fontSize={20}>
<Trans>Add</Trans>
</Text>
</ButtonPrimary>
)}
/>
)}
pendingText={pendingText}
/>
<AppBody>
<AddRemoveTabs
creating={false}
adding={true}
positionID={tokenId}
defaultSlippage={DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE}
/>
<Wrapper>
<AutoColumn gap="32px">
{!hasExistingPosition && (
<>
<AutoColumn gap="md">
<RowBetween paddingBottom="20px">
<TYPE.label>
<Trans>Select pair</Trans>
</TYPE.label>
<ButtonText onClick={clearAll}>
<TYPE.blue fontSize="12px">
<Trans>Clear All</Trans>
</TYPE.blue>
</ButtonText>
</RowBetween>
<RowBetween>
<CurrencyDropdown
value={formattedAmounts[Field.CURRENCY_A]}
onUserInput={onFieldAInput}
hideInput={true}
onMax={() => {
onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
}}
onCurrencySelect={handleCurrencyASelect}
showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
currency={currencies[Field.CURRENCY_A]}
id="add-liquidity-input-tokena"
showCommonBases
/>
<div style={{ width: '12px' }} />
<CurrencyDropdown
value={formattedAmounts[Field.CURRENCY_B]}
hideInput={true}
onUserInput={onFieldBInput}
onCurrencySelect={handleCurrencyBSelect}
onMax={() => {
onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
}}
showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
currency={currencies[Field.CURRENCY_B]}
id="add-liquidity-input-tokenb"
showCommonBases
/>
</RowBetween>
</AutoColumn>{' '}
</>
)}
{hasExistingPosition && existingPosition ? (
<PositionPreview
position={existingPosition}
title={<Trans>Selected Range</Trans>}
inRange={!outOfRange}
/>
) : (
<>
<FeeSelector
disabled={!currencyB || !currencyA}
feeAmount={feeAmount}
handleFeePoolSelect={handleFeePoolSelect}
/> />
)}
{noLiquidity && ( bottomContent={() => (
<DynamicSection disabled={!currencyA || !currencyB}> <ButtonPrimary style={{ marginTop: '1rem' }} onClick={onAdd}>
<AutoColumn gap="md"> <Text fontWeight={500} fontSize={20}>
<RowBetween> <Trans>Add</Trans>
<TYPE.label> </Text>
<Trans>Set Starting Price</Trans> </ButtonPrimary>
</TYPE.label> )}
{baseCurrency && quoteCurrency ? ( />
<RateToggle )}
currencyA={baseCurrency} pendingText={pendingText}
currencyB={quoteCurrency} />
handleRateToggle={() => { <AppBody>
onLeftRangeInput('') <AddRemoveTabs
onRightRangeInput('') creating={false}
history.push( adding={true}
`/add/${currencyIdB as string}/${currencyIdA as string}${ positionID={tokenId}
feeAmount ? '/' + feeAmount : '' defaultSlippage={DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE}
}` />
) <Wrapper>
}} <AutoColumn gap="32px">
/> {!hasExistingPosition && (
) : null} <>
</RowBetween> <AutoColumn gap="md">
<RowBetween paddingBottom="20px">
<OutlineCard padding="12px"> <TYPE.label>
<StyledInput <Trans>Select pair</Trans>
className="start-price-input" </TYPE.label>
value={startPriceTypedValue} <ButtonText onClick={clearAll}>
onUserInput={onStartPriceInput} <TYPE.blue fontSize="12px">
/> <Trans>Clear All</Trans>
</OutlineCard> </TYPE.blue>
<RowBetween style={{ backgroundColor: theme.bg1, padding: '12px', borderRadius: '12px' }}> </ButtonText>
<TYPE.main> </RowBetween>
<Trans>Current {baseCurrency?.symbol} Price:</Trans> <RowBetween>
</TYPE.main> <CurrencyDropdown
<TYPE.main> value={formattedAmounts[Field.CURRENCY_A]}
{price ? ( onUserInput={onFieldAInput}
<TYPE.main> hideInput={true}
<RowFixed> onMax={() => {
<HoverInlineText onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
maxCharacters={20}
text={invertPrice ? price?.invert()?.toSignificant(5) : price?.toSignificant(5)}
/>{' '}
<span style={{ marginLeft: '4px' }}>{quoteCurrency?.symbol}</span>
</RowFixed>
</TYPE.main>
) : (
'-'
)}
</TYPE.main>
</RowBetween>
<BlueCard
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: ' 1.5rem 1.25rem',
}} }}
> onCurrencySelect={handleCurrencyASelect}
<AlertCircle color={theme.text1} size={32} style={{ marginBottom: '12px', opacity: 0.8 }} /> showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
<TYPE.body currency={currencies[Field.CURRENCY_A]}
fontSize={14} id="add-liquidity-input-tokena"
style={{ marginBottom: 8, fontWeight: 500, opacity: 0.8 }} showCommonBases
textAlign="center" />
> <div style={{ width: '12px' }} />
You are the first liquidity provider for this Uniswap V3 pool.
</TYPE.body> <CurrencyDropdown
value={formattedAmounts[Field.CURRENCY_B]}
<TYPE.body fontWeight={500} textAlign="center" fontSize={14} style={{ opacity: 0.8 }}> hideInput={true}
The transaction cost will be much higher as it includes the gas to create the pool. onUserInput={onFieldBInput}
</TYPE.body> onCurrencySelect={handleCurrencyBSelect}
</BlueCard> onMax={() => {
</AutoColumn> onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
</DynamicSection>
)}
<DynamicSection gap="md" disabled={!feeAmount || invalidPool || (noLiquidity && !startPriceTypedValue)}>
<RowBetween>
<TYPE.label>
<Trans>Set Price Range</Trans>
</TYPE.label>
{baseCurrency && quoteCurrency ? (
<RateToggle
currencyA={baseCurrency}
currencyB={quoteCurrency}
handleRateToggle={() => {
onLeftRangeInput('')
onRightRangeInput('')
history.push(
`/add/${currencyIdB as string}/${currencyIdA as string}${feeAmount ? '/' + feeAmount : ''}`
)
}} }}
showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
currency={currencies[Field.CURRENCY_B]}
id="add-liquidity-input-tokenb"
showCommonBases
/> />
) : null} </RowBetween>
</RowBetween> </AutoColumn>{' '}
<TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}> </>
<Trans> )}
Your liquidity will only earn fees when the market price of the pair is within your range.{' '}
<ExternalLink {hasExistingPosition && existingPosition ? (
href={'https://docs.uniswap.org/concepts/introduction/liquidity-user-guide#4-set-price-range'} <PositionPreview
style={{ fontSize: '14px' }} position={existingPosition}
> title={<Trans>Selected Range</Trans>}
Need help picking a range? inRange={!outOfRange}
</ExternalLink> />
</Trans> ) : (
</TYPE.main> <>
<FeeSelector
<RangeSelector disabled={!currencyB || !currencyA}
priceLower={priceLower}
priceUpper={priceUpper}
getDecrementLower={getDecrementLower}
getIncrementLower={getIncrementLower}
getDecrementUpper={getDecrementUpper}
getIncrementUpper={getIncrementUpper}
onLeftRangeInput={onLeftRangeInput}
onRightRangeInput={onRightRangeInput}
currencyA={baseCurrency}
currencyB={quoteCurrency}
feeAmount={feeAmount} feeAmount={feeAmount}
handleFeePoolSelect={handleFeePoolSelect}
/> />
{price && baseCurrency && quoteCurrency && !noLiquidity && ( {noLiquidity && (
<LightCard style={{ padding: '12px' }}> <DynamicSection disabled={!currencyA || !currencyB}>
<AutoColumn gap="4px"> <AutoColumn gap="md">
<TYPE.main fontWeight={500} textAlign="center" fontSize={12}> <RowBetween>
<Trans>Current Price</Trans> <TYPE.label>
</TYPE.main> <Trans>Set Starting Price</Trans>
<TYPE.body fontWeight={500} textAlign="center" fontSize={20}> </TYPE.label>
<HoverInlineText {baseCurrency && quoteCurrency ? (
maxCharacters={20} <RateToggle
text={invertPrice ? price.invert().toSignificant(6) : price.toSignificant(6)} currencyA={baseCurrency}
/>{' '} currencyB={quoteCurrency}
</TYPE.body> handleRateToggle={() => {
<TYPE.main fontWeight={500} textAlign="center" fontSize={12}> onLeftRangeInput('')
<Trans> onRightRangeInput('')
{quoteCurrency?.symbol} per {baseCurrency.symbol} history.push(
</Trans> `/add/${currencyIdB as string}/${currencyIdA as string}${
</TYPE.main> feeAmount ? '/' + feeAmount : ''
}`
)
}}
/>
) : null}
</RowBetween>
<OutlineCard padding="12px">
<StyledInput
className="start-price-input"
value={startPriceTypedValue}
onUserInput={onStartPriceInput}
/>
</OutlineCard>
<RowBetween style={{ backgroundColor: theme.bg1, padding: '12px', borderRadius: '12px' }}>
<TYPE.main>
<Trans>Current {baseCurrency?.symbol} Price:</Trans>
</TYPE.main>
<TYPE.main>
{price ? (
<TYPE.main>
<RowFixed>
<HoverInlineText
maxCharacters={20}
text={invertPrice ? price?.invert()?.toSignificant(5) : price?.toSignificant(5)}
/>{' '}
<span style={{ marginLeft: '4px' }}>{quoteCurrency?.symbol}</span>
</RowFixed>
</TYPE.main>
) : (
'-'
)}
</TYPE.main>
</RowBetween>
<BlueCard
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: ' 1.5rem 1.25rem',
}}
>
<AlertCircle color={theme.text1} size={32} style={{ marginBottom: '12px', opacity: 0.8 }} />
<TYPE.body
fontSize={14}
style={{ marginBottom: 8, fontWeight: 500, opacity: 0.8 }}
textAlign="center"
>
You are the first liquidity provider for this Uniswap V3 pool.
</TYPE.body>
<TYPE.body fontWeight={500} textAlign="center" fontSize={14} style={{ opacity: 0.8 }}>
The transaction cost will be much higher as it includes the gas to create the pool.
</TYPE.body>
</BlueCard>
</AutoColumn> </AutoColumn>
</LightCard> </DynamicSection>
)} )}
{outOfRange ? ( <DynamicSection
<YellowCard padding="8px 12px" borderRadius="12px"> gap="md"
<RowBetween> disabled={!feeAmount || invalidPool || (noLiquidity && !startPriceTypedValue)}
<AlertTriangle stroke={theme.yellow3} size="16px" /> >
<TYPE.yellow ml="12px" fontSize="12px"> <RowBetween>
<Trans> <TYPE.label>
Your position will not earn fees or be used in trades until the market price moves into your <Trans>Set Price Range</Trans>
range. </TYPE.label>
</Trans>
</TYPE.yellow> {baseCurrency && quoteCurrency ? (
</RowBetween> <RateToggle
</YellowCard> currencyA={baseCurrency}
) : null} currencyB={quoteCurrency}
handleRateToggle={() => {
{invalidRange ? ( onLeftRangeInput('')
<YellowCard padding="8px 12px" borderRadius="12px"> onRightRangeInput('')
<RowBetween> history.push(
<AlertTriangle stroke={theme.yellow3} size="16px" /> `/add/${currencyIdB as string}/${currencyIdA as string}${
<TYPE.yellow ml="12px" fontSize="12px"> feeAmount ? '/' + feeAmount : ''
<Trans>Invalid range selected. The min price must be lower than the max price.</Trans> }`
</TYPE.yellow> )
</RowBetween> }}
</YellowCard> />
) : null} ) : null}
</DynamicSection> </RowBetween>
</> <TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}>
)} <Trans>
Your liquidity will only earn fees when the market price of the pair is within your range.{' '}
<DynamicSection <ExternalLink
disabled={tickLower === undefined || tickUpper === undefined || invalidPool || invalidRange} href={'https://docs.uniswap.org/concepts/introduction/liquidity-user-guide#4-set-price-range'}
> style={{ fontSize: '14px' }}
<AutoColumn gap="md"> >
<TYPE.label>{hasExistingPosition ? 'Add more liquidity' : t`Deposit Amounts`}</TYPE.label> Need help picking a range?
</ExternalLink>
<CurrencyInputPanel </Trans>
value={formattedAmounts[Field.CURRENCY_A]} </TYPE.main>
onUserInput={onFieldAInput}
onMax={() => { <RangeSelector
onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '') priceLower={priceLower}
}} priceUpper={priceUpper}
showMaxButton={!atMaxAmounts[Field.CURRENCY_A]} getDecrementLower={getDecrementLower}
currency={currencies[Field.CURRENCY_A]} getIncrementLower={getIncrementLower}
id="add-liquidity-input-tokena" getDecrementUpper={getDecrementUpper}
fiatValue={usdcValues[Field.CURRENCY_A]} getIncrementUpper={getIncrementUpper}
showCommonBases onLeftRangeInput={onLeftRangeInput}
locked={depositADisabled} onRightRangeInput={onRightRangeInput}
/> currencyA={baseCurrency}
currencyB={quoteCurrency}
feeAmount={feeAmount}
/>
<CurrencyInputPanel {price && baseCurrency && quoteCurrency && !noLiquidity && (
value={formattedAmounts[Field.CURRENCY_B]} <LightCard style={{ padding: '12px' }}>
onUserInput={onFieldBInput} <AutoColumn gap="4px">
onMax={() => { <TYPE.main fontWeight={500} textAlign="center" fontSize={12}>
onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '') <Trans>Current Price</Trans>
}} </TYPE.main>
showMaxButton={!atMaxAmounts[Field.CURRENCY_B]} <TYPE.body fontWeight={500} textAlign="center" fontSize={20}>
fiatValue={usdcValues[Field.CURRENCY_B]} <HoverInlineText
currency={currencies[Field.CURRENCY_B]} maxCharacters={20}
id="add-liquidity-input-tokenb" text={invertPrice ? price.invert().toSignificant(6) : price.toSignificant(6)}
showCommonBases />{' '}
locked={depositBDisabled} </TYPE.body>
/> <TYPE.main fontWeight={500} textAlign="center" fontSize={12}>
</AutoColumn> <Trans>
</DynamicSection> {quoteCurrency?.symbol} per {baseCurrency.symbol}
<div> </Trans>
{addIsUnsupported ? ( </TYPE.main>
<ButtonPrimary disabled={true} borderRadius="12px" padding={'12px'}> </AutoColumn>
<TYPE.main mb="4px"> </LightCard>
<Trans>Unsupported Asset</Trans>
</TYPE.main>
</ButtonPrimary>
) : !account ? (
<ButtonLight onClick={toggleWalletModal} borderRadius="12px" padding={'12px'}>
<Trans>Connect wallet</Trans>
</ButtonLight>
) : (
<AutoColumn gap={'md'}>
{(approvalA === ApprovalState.NOT_APPROVED ||
approvalA === ApprovalState.PENDING ||
approvalB === ApprovalState.NOT_APPROVED ||
approvalB === ApprovalState.PENDING) &&
isValid && (
<RowBetween>
{showApprovalA && (
<ButtonPrimary
borderRadius="12px"
padding={'12px'}
onClick={approveACallback}
disabled={approvalA === ApprovalState.PENDING}
width={showApprovalB ? '48%' : '100%'}
>
{approvalA === ApprovalState.PENDING ? (
<Dots>
<Trans>Approving {currencies[Field.CURRENCY_A]?.symbol}</Trans>
</Dots>
) : (
<Trans>Approve {currencies[Field.CURRENCY_A]?.symbol}</Trans>
)}
</ButtonPrimary>
)}
{showApprovalB && (
<ButtonPrimary
borderRadius="12px"
padding={'12px'}
onClick={approveBCallback}
disabled={approvalB === ApprovalState.PENDING}
width={showApprovalA ? '48%' : '100%'}
>
{approvalB === ApprovalState.PENDING ? (
<Dots>
<Trans>Approving {currencies[Field.CURRENCY_B]?.symbol}</Trans>
</Dots>
) : (
<Trans>Approve {currencies[Field.CURRENCY_B]?.symbol}</Trans>
)}
</ButtonPrimary>
)}
</RowBetween>
)} )}
<ButtonError
onClick={() => { {outOfRange ? (
expertMode ? onAdd() : setShowConfirm(true) <YellowCard padding="8px 12px" borderRadius="12px">
<RowBetween>
<AlertTriangle stroke={theme.yellow3} size="16px" />
<TYPE.yellow ml="12px" fontSize="12px">
<Trans>
Your position will not earn fees or be used in trades until the market price moves into
your range.
</Trans>
</TYPE.yellow>
</RowBetween>
</YellowCard>
) : null}
{invalidRange ? (
<YellowCard padding="8px 12px" borderRadius="12px">
<RowBetween>
<AlertTriangle stroke={theme.yellow3} size="16px" />
<TYPE.yellow ml="12px" fontSize="12px">
<Trans>Invalid range selected. The min price must be lower than the max price.</Trans>
</TYPE.yellow>
</RowBetween>
</YellowCard>
) : null}
</DynamicSection>
</>
)}
<DynamicSection
disabled={tickLower === undefined || tickUpper === undefined || invalidPool || invalidRange}
>
<AutoColumn gap="md">
<TYPE.label>{hasExistingPosition ? 'Add more liquidity' : t`Deposit Amounts`}</TYPE.label>
<CurrencyInputPanel
value={formattedAmounts[Field.CURRENCY_A]}
onUserInput={onFieldAInput}
onMax={() => {
onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
}} }}
disabled={ showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
!isValid || currency={currencies[Field.CURRENCY_A]}
(!argentWalletContract && approvalA !== ApprovalState.APPROVED && !depositADisabled) || id="add-liquidity-input-tokena"
(!argentWalletContract && approvalB !== ApprovalState.APPROVED && !depositBDisabled) fiatValue={usdcValues[Field.CURRENCY_A]}
} showCommonBases
error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]} locked={depositADisabled}
> />
<Text fontWeight={500}>{errorMessage ? errorMessage : <Trans>Add</Trans>}</Text>
</ButtonError> <CurrencyInputPanel
value={formattedAmounts[Field.CURRENCY_B]}
onUserInput={onFieldBInput}
onMax={() => {
onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
}}
showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
fiatValue={usdcValues[Field.CURRENCY_B]}
currency={currencies[Field.CURRENCY_B]}
id="add-liquidity-input-tokenb"
showCommonBases
locked={depositBDisabled}
/>
</AutoColumn> </AutoColumn>
)} </DynamicSection>
</div> <div>
</AutoColumn> {addIsUnsupported ? (
</Wrapper> <ButtonPrimary disabled={true} borderRadius="12px" padding={'12px'}>
</AppBody> <TYPE.main mb="4px">
{addIsUnsupported && ( <Trans>Unsupported Asset</Trans>
<UnsupportedCurrencyFooter </TYPE.main>
show={addIsUnsupported} </ButtonPrimary>
currencies={[currencies.CURRENCY_A, currencies.CURRENCY_B]} ) : !account ? (
/> <ButtonLight onClick={toggleWalletModal} borderRadius="12px" padding={'12px'}>
)} <Trans>Connect wallet</Trans>
</ScrollablePage> </ButtonLight>
) : (
<AutoColumn gap={'md'}>
{(approvalA === ApprovalState.NOT_APPROVED ||
approvalA === ApprovalState.PENDING ||
approvalB === ApprovalState.NOT_APPROVED ||
approvalB === ApprovalState.PENDING) &&
isValid && (
<RowBetween>
{showApprovalA && (
<ButtonPrimary
borderRadius="12px"
padding={'12px'}
onClick={approveACallback}
disabled={approvalA === ApprovalState.PENDING}
width={showApprovalB ? '48%' : '100%'}
>
{approvalA === ApprovalState.PENDING ? (
<Dots>
<Trans>Approving {currencies[Field.CURRENCY_A]?.symbol}</Trans>
</Dots>
) : (
<Trans>Approve {currencies[Field.CURRENCY_A]?.symbol}</Trans>
)}
</ButtonPrimary>
)}
{showApprovalB && (
<ButtonPrimary
borderRadius="12px"
padding={'12px'}
onClick={approveBCallback}
disabled={approvalB === ApprovalState.PENDING}
width={showApprovalA ? '48%' : '100%'}
>
{approvalB === ApprovalState.PENDING ? (
<Dots>
<Trans>Approving {currencies[Field.CURRENCY_B]?.symbol}</Trans>
</Dots>
) : (
<Trans>Approve {currencies[Field.CURRENCY_B]?.symbol}</Trans>
)}
</ButtonPrimary>
)}
</RowBetween>
)}
<ButtonError
onClick={() => {
expertMode ? onAdd() : setShowConfirm(true)
}}
disabled={
!isValid ||
(!argentWalletContract && approvalA !== ApprovalState.APPROVED && !depositADisabled) ||
(!argentWalletContract && approvalB !== ApprovalState.APPROVED && !depositBDisabled)
}
error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
>
<Text fontWeight={500}>{errorMessage ? errorMessage : <Trans>Add</Trans>}</Text>
</ButtonError>
</AutoColumn>
)}
</div>
</AutoColumn>
</Wrapper>
</AppBody>
{addIsUnsupported && (
<UnsupportedCurrencyFooter
show={addIsUnsupported}
currencies={[currencies.CURRENCY_A, currencies.CURRENCY_B]}
/>
)}
</ScrollablePage>
<SwitchLocaleLink />
</>
) )
} }
src/pages/AddLiquidityV2/index.tsx
View file @ 37cf492d
...@@ -42,6 +42,7 @@ import { ConfirmAddModalBottom } from './ConfirmAddModalBottom' ...@@ -42,6 +42,7 @@ import { ConfirmAddModalBottom } from './ConfirmAddModalBottom'
import { currencyId } from '../../utils/currencyId' import { currencyId } from '../../utils/currencyId'
import { PoolPriceBar } from './PoolPriceBar' import { PoolPriceBar } from './PoolPriceBar'
import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter' import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
import { t, Trans } from '@lingui/macro' import { t, Trans } from '@lingui/macro'
const DEFAULT_ADD_V2_SLIPPAGE_TOLERANCE = new Percent(50, 10_000) const DEFAULT_ADD_V2_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
...@@ -485,6 +486,8 @@ export default function AddLiquidity({ ...@@ -485,6 +486,8 @@ export default function AddLiquidity({
</AutoColumn> </AutoColumn>
</Wrapper> </Wrapper>
</AppBody> </AppBody>
<SwitchLocaleLink />
{!addIsUnsupported ? ( {!addIsUnsupported ? (
pair && !noLiquidity && pairState !== PairState.INVALID ? ( pair && !noLiquidity && pairState !== PairState.INVALID ? (
<AutoColumn style={{ minWidth: '20rem', width: '100%', maxWidth: '400px', marginTop: '1rem' }}> <AutoColumn style={{ minWidth: '20rem', width: '100%', maxWidth: '400px', marginTop: '1rem' }}>
......
src/pages/MigrateV2/index.tsx
View file @ 37cf492d
...@@ -16,6 +16,7 @@ import { Dots } from '../../components/swap/styleds' ...@@ -16,6 +16,7 @@ import { Dots } from '../../components/swap/styleds'
import { toV2LiquidityToken, useTrackedTokenPairs } from '../../state/user/hooks' import { toV2LiquidityToken, useTrackedTokenPairs } from '../../state/user/hooks'
import MigrateV2PositionCard from 'components/PositionCard/V2' import MigrateV2PositionCard from 'components/PositionCard/V2'
import MigrateSushiPositionCard from 'components/PositionCard/Sushi' import MigrateSushiPositionCard from 'components/PositionCard/Sushi'
import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
import { PairState, useV2Pairs } from 'hooks/useV2Pairs' import { PairState, useV2Pairs } from 'hooks/useV2Pairs'
import { getCreate2Address } from '@ethersproject/address' import { getCreate2Address } from '@ethersproject/address'
import { pack, keccak256 } from '@ethersproject/solidity' import { pack, keccak256 } from '@ethersproject/solidity'
...@@ -110,73 +111,76 @@ export default function MigrateV2() { ...@@ -110,73 +111,76 @@ export default function MigrateV2() {
const v2IsLoading = fetchingPairBalances || v2Pairs.some(([pairState]) => pairState === PairState.LOADING) const v2IsLoading = fetchingPairBalances || v2Pairs.some(([pairState]) => pairState === PairState.LOADING)
return ( return (
<BodyWrapper style={{ padding: 24 }}> <>
<AutoColumn gap="16px"> <BodyWrapper style={{ padding: 24 }}>
<AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px"> <AutoColumn gap="16px">
<BackArrow to="/pool/v2" /> <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
<TYPE.mediumHeader> <BackArrow to="/pool/v2" />
<Trans>Migrate V2 Liquidity</Trans> <TYPE.mediumHeader>
</TYPE.mediumHeader> <Trans>Migrate V2 Liquidity</Trans>
<div> </TYPE.mediumHeader>
<QuestionHelper text={<Trans>Migrate your liquidity tokens from Uniswap V2 to Uniswap V3.</Trans>} /> <div>
</div> <QuestionHelper text={<Trans>Migrate your liquidity tokens from Uniswap V2 to Uniswap V3.</Trans>} />
</AutoRow> </div>
</AutoRow>
<TYPE.body style={{ marginBottom: 8, fontWeight: 400 }}>
<Trans> <TYPE.body style={{ marginBottom: 8, fontWeight: 400 }}>
For each pool shown below, click migrate to remove your liquidity from Uniswap V2 and deposit it into
Uniswap V3.
</Trans>
</TYPE.body>
{!account ? (
<LightCard padding="40px">
<TYPE.body color={theme.text3} textAlign="center">
<Trans>Connect to a wallet to view your V2 liquidity.</Trans>
</TYPE.body>
</LightCard>
) : v2IsLoading ? (
<LightCard padding="40px">
<TYPE.body color={theme.text3} textAlign="center">
<Dots>
<Trans>Loading</Trans>
</Dots>
</TYPE.body>
</LightCard>
) : v2Pairs.filter(([, pair]) => !!pair).length > 0 ? (
<>
{v2Pairs
.filter(([, pair]) => !!pair)
.map(([, pair]) => (
<MigrateV2PositionCard key={(pair as Pair).liquidityToken.address} pair={pair as Pair} />
))}
{tokenPairsWithSushiBalance.map(({ sushiLiquidityToken, tokens }) => {
return (
<MigrateSushiPositionCard
key={(sushiLiquidityToken as Token).address}
tokenA={tokens[0]}
tokenB={tokens[1]}
liquidityToken={sushiLiquidityToken as Token}
/>
)
})}
</>
) : (
<EmptyState message={<Trans>No V2 Liquidity found.</Trans>} />
)}
<AutoColumn justify={'center'} gap="md">
<Text textAlign="center" fontSize={14} style={{ padding: '.5rem 0 .5rem 0' }}>
<Trans> <Trans>
Don’t see one of your v2 positions?{' '} For each pool shown below, click migrate to remove your liquidity from Uniswap V2 and deposit it into
<StyledInternalLink id="import-pool-link" to={'/find?origin=/migrate/v2'}> Uniswap V3.
Import it.
</StyledInternalLink>
</Trans> </Trans>
</Text> </TYPE.body>
{!account ? (
<LightCard padding="40px">
<TYPE.body color={theme.text3} textAlign="center">
<Trans>Connect to a wallet to view your V2 liquidity.</Trans>
</TYPE.body>
</LightCard>
) : v2IsLoading ? (
<LightCard padding="40px">
<TYPE.body color={theme.text3} textAlign="center">
<Dots>
<Trans>Loading</Trans>
</Dots>
</TYPE.body>
</LightCard>
) : v2Pairs.filter(([, pair]) => !!pair).length > 0 ? (
<>
{v2Pairs
.filter(([, pair]) => !!pair)
.map(([, pair]) => (
<MigrateV2PositionCard key={(pair as Pair).liquidityToken.address} pair={pair as Pair} />
))}
{tokenPairsWithSushiBalance.map(({ sushiLiquidityToken, tokens }) => {
return (
<MigrateSushiPositionCard
key={(sushiLiquidityToken as Token).address}
tokenA={tokens[0]}
tokenB={tokens[1]}
liquidityToken={sushiLiquidityToken as Token}
/>
)
})}
</>
) : (
<EmptyState message={<Trans>No V2 Liquidity found.</Trans>} />
)}
<AutoColumn justify={'center'} gap="md">
<Text textAlign="center" fontSize={14} style={{ padding: '.5rem 0 .5rem 0' }}>
<Trans>
Don’t see one of your v2 positions?{' '}
<StyledInternalLink id="import-pool-link" to={'/find?origin=/migrate/v2'}>
Import it.
</StyledInternalLink>
</Trans>
</Text>
</AutoColumn>
</AutoColumn> </AutoColumn>
</AutoColumn> </BodyWrapper>
</BodyWrapper> <SwitchLocaleLink />
</>
) )
} }
src/pages/Pool/PositionPage.tsx
View file @ 37cf492d
...@@ -37,6 +37,7 @@ import useTheme from '../../hooks/useTheme' ...@@ -37,6 +37,7 @@ import useTheme from '../../hooks/useTheme'
import RateToggle from '../../components/RateToggle' import RateToggle from '../../components/RateToggle'
import { useSingleCallResult } from 'state/multicall/hooks' import { useSingleCallResult } from 'state/multicall/hooks'
import RangeBadge from '../../components/Badge/RangeBadge' import RangeBadge from '../../components/Badge/RangeBadge'
import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
import useUSDCPrice from 'hooks/useUSDCPrice' import useUSDCPrice from 'hooks/useUSDCPrice'
import Loader from 'components/Loader' import Loader from 'components/Loader'
import Toggle from 'components/Toggle' import Toggle from 'components/Toggle'
...@@ -495,338 +496,341 @@ export function PositionPage({ ...@@ -495,338 +496,341 @@ export function PositionPage({
<div /> <div />
</LoadingRows> </LoadingRows>
) : ( ) : (
<PageWrapper> <>
<TransactionConfirmationModal <PageWrapper>
isOpen={showConfirm} <TransactionConfirmationModal
onDismiss={() => setShowConfirm(false)} isOpen={showConfirm}
attemptingTxn={collecting} onDismiss={() => setShowConfirm(false)}
hash={collectMigrationHash ?? ''} attemptingTxn={collecting}
content={() => ( hash={collectMigrationHash ?? ''}
<ConfirmationModalContent content={() => (
title={<Trans>Claim fees</Trans>} <ConfirmationModalContent
onDismiss={() => setShowConfirm(false)} title={<Trans>Claim fees</Trans>}
topContent={modalHeader} onDismiss={() => setShowConfirm(false)}
/> topContent={modalHeader}
)} />
pendingText={<Trans>Collecting fees</Trans>} )}
/> pendingText={<Trans>Collecting fees</Trans>}
<AutoColumn gap="md"> />
<AutoColumn gap="sm"> <AutoColumn gap="md">
<Link style={{ textDecoration: 'none', width: 'fit-content', marginBottom: '0.5rem' }} to="/pool"> <AutoColumn gap="sm">
<HoverText> <Link style={{ textDecoration: 'none', width: 'fit-content', marginBottom: '0.5rem' }} to="/pool">
<Trans>← Back to Pools Overview</Trans> <HoverText>
</HoverText> <Trans>← Back to Pools Overview</Trans>
</Link> </HoverText>
<ResponsiveRow> </Link>
<RowFixed> <ResponsiveRow>
<DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={24} margin={true} />
<TYPE.label fontSize={'24px'} mr="10px">
&nbsp;{currencyQuote?.symbol}&nbsp;/&nbsp;{currencyBase?.symbol}
</TYPE.label>
<Badge style={{ marginRight: '8px' }}>
<BadgeText>
<Trans>{new Percent(feeAmount, 1_000_000).toSignificant()}%</Trans>
</BadgeText>
</Badge>
<RangeBadge removed={removed} inRange={inRange} />
</RowFixed>
{ownsNFT && (
<RowFixed> <RowFixed>
{currency0 && currency1 && feeAmount && tokenId ? ( <DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={24} margin={true} />
<ButtonGray <TYPE.label fontSize={'24px'} mr="10px">
as={Link} &nbsp;{currencyQuote?.symbol}&nbsp;/&nbsp;{currencyBase?.symbol}
to={`/increase/${currencyId(currency0)}/${currencyId(currency1)}/${feeAmount}/${tokenId}`} </TYPE.label>
width="fit-content" <Badge style={{ marginRight: '8px' }}>
padding="6px 8px" <BadgeText>
borderRadius="12px" <Trans>{new Percent(feeAmount, 1_000_000).toSignificant()}%</Trans>
style={{ marginRight: '8px' }} </BadgeText>
> </Badge>
<Trans>Increase Liquidity</Trans> <RangeBadge removed={removed} inRange={inRange} />
</ButtonGray>
) : null}
{tokenId && !removed ? (
<ResponsiveButtonPrimary
as={Link}
to={`/remove/${tokenId}`}
width="fit-content"
padding="6px 8px"
borderRadius="12px"
>
<Trans>Remove Liquidity</Trans>
</ResponsiveButtonPrimary>
) : null}
</RowFixed> </RowFixed>
{ownsNFT && (
<RowFixed>
{currency0 && currency1 && feeAmount && tokenId ? (
<ButtonGray
as={Link}
to={`/increase/${currencyId(currency0)}/${currencyId(currency1)}/${feeAmount}/${tokenId}`}
width="fit-content"
padding="6px 8px"
borderRadius="12px"
style={{ marginRight: '8px' }}
>
<Trans>Increase Liquidity</Trans>
</ButtonGray>
) : null}
{tokenId && !removed ? (
<ResponsiveButtonPrimary
as={Link}
to={`/remove/${tokenId}`}
width="fit-content"
padding="6px 8px"
borderRadius="12px"
>
<Trans>Remove Liquidity</Trans>
</ResponsiveButtonPrimary>
) : null}
</RowFixed>
)}
</ResponsiveRow>
<RowBetween></RowBetween>
</AutoColumn>
<ResponsiveRow align="flex-start">
{'result' in metadata ? (
<DarkCard
width="100%"
height="100%"
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-around',
marginRight: '12px',
}}
>
<div style={{ marginRight: 12 }}>
<NFT image={metadata.result.image} height={400} />
</div>
{typeof chainId === 'number' && owner && !ownsNFT ? (
<ExternalLink href={getExplorerLink(chainId, owner, ExplorerDataType.ADDRESS)}>
<Trans>Owner</Trans>
</ExternalLink>
) : null}
</DarkCard>
) : (
<DarkCard
width="100%"
height="100%"
style={{
marginRight: '12px',
minWidth: '340px',
}}
>
<Loader />
</DarkCard>
)} )}
</ResponsiveRow> <AutoColumn gap="sm" style={{ width: '100%', height: '100%' }}>
<RowBetween></RowBetween> <DarkCard>
</AutoColumn> <AutoColumn gap="md" style={{ width: '100%' }}>
<ResponsiveRow align="flex-start">
{'result' in metadata ? (
<DarkCard
width="100%"
height="100%"
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-around',
marginRight: '12px',
}}
>
<div style={{ marginRight: 12 }}>
<NFT image={metadata.result.image} height={400} />
</div>
{typeof chainId === 'number' && owner && !ownsNFT ? (
<ExternalLink href={getExplorerLink(chainId, owner, ExplorerDataType.ADDRESS)}>
<Trans>Owner</Trans>
</ExternalLink>
) : null}
</DarkCard>
) : (
<DarkCard
width="100%"
height="100%"
style={{
marginRight: '12px',
minWidth: '340px',
}}
>
<Loader />
</DarkCard>
)}
<AutoColumn gap="sm" style={{ width: '100%', height: '100%' }}>
<DarkCard>
<AutoColumn gap="md" style={{ width: '100%' }}>
<AutoColumn gap="md">
<Label>
<Trans>Liquidity</Trans>
</Label>
{fiatValueOfLiquidity?.greaterThan(new Fraction(1, 100)) ? (
<TYPE.largeHeader fontSize="36px" fontWeight={500}>
<Trans>${fiatValueOfLiquidity.toFixed(2, { groupSeparator: ',' })}</Trans>
</TYPE.largeHeader>
) : (
<TYPE.largeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
<Trans>$-</Trans>
</TYPE.largeHeader>
)}
</AutoColumn>
<LightCard padding="12px 16px">
<AutoColumn gap="md"> <AutoColumn gap="md">
<RowBetween> <Label>
<LinkedCurrency chainId={chainId} currency={currencyQuote} /> <Trans>Liquidity</Trans>
<RowFixed> </Label>
<TYPE.main> {fiatValueOfLiquidity?.greaterThan(new Fraction(1, 100)) ? (
{inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)} <TYPE.largeHeader fontSize="36px" fontWeight={500}>
</TYPE.main> <Trans>${fiatValueOfLiquidity.toFixed(2, { groupSeparator: ',' })}</Trans>
{typeof ratio === 'number' && !removed ? ( </TYPE.largeHeader>
<Badge style={{ marginLeft: '10px' }}> ) : (
<TYPE.main fontSize={11}> <TYPE.largeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
<Trans>{inverted ? ratio : 100 - ratio}%</Trans> <Trans>$-</Trans>
</TYPE.main> </TYPE.largeHeader>
</Badge> )}
) : null}
</RowFixed>
</RowBetween>
<RowBetween>
<LinkedCurrency chainId={chainId} currency={currencyBase} />
<RowFixed>
<TYPE.main>
{inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
</TYPE.main>
{typeof ratio === 'number' && !removed ? (
<Badge style={{ marginLeft: '10px' }}>
<TYPE.main color={theme.text2} fontSize={11}>
<Trans>{inverted ? 100 - ratio : ratio}%</Trans>
</TYPE.main>
</Badge>
) : null}
</RowFixed>
</RowBetween>
</AutoColumn> </AutoColumn>
</LightCard> <LightCard padding="12px 16px">
</AutoColumn>
</DarkCard>
<DarkCard>
<AutoColumn gap="md" style={{ width: '100%' }}>
<AutoColumn gap="md">
<RowBetween style={{ alignItems: 'flex-start' }}>
<AutoColumn gap="md"> <AutoColumn gap="md">
<Label> <RowBetween>
<Trans>Unclaimed fees</Trans> <LinkedCurrency chainId={chainId} currency={currencyQuote} />
</Label> <RowFixed>
{fiatValueOfFees?.greaterThan(new Fraction(1, 100)) ? ( <TYPE.main>
<TYPE.largeHeader color={theme.green1} fontSize="36px" fontWeight={500}> {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
<Trans>${fiatValueOfFees.toFixed(2, { groupSeparator: ',' })}</Trans>
</TYPE.largeHeader>
) : (
<TYPE.largeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
<Trans>$-</Trans>
</TYPE.largeHeader>
)}
</AutoColumn>
{ownsNFT && (feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) || !!collectMigrationHash) ? (
<ButtonConfirmed
disabled={collecting || !!collectMigrationHash}
confirmed={!!collectMigrationHash && !isCollectPending}
width="fit-content"
style={{ borderRadius: '12px' }}
padding="4px 8px"
onClick={() => setShowConfirm(true)}
>
{!!collectMigrationHash && !isCollectPending ? (
<TYPE.main color={theme.text1}>
<Trans> Collected</Trans>
</TYPE.main> </TYPE.main>
) : isCollectPending || collecting ? ( {typeof ratio === 'number' && !removed ? (
<TYPE.main color={theme.text1}> <Badge style={{ marginLeft: '10px' }}>
{' '} <TYPE.main fontSize={11}>
<Dots> <Trans>{inverted ? ratio : 100 - ratio}%</Trans>
<Trans>Collecting</Trans> </TYPE.main>
</Dots> </Badge>
) : null}
</RowFixed>
</RowBetween>
<RowBetween>
<LinkedCurrency chainId={chainId} currency={currencyBase} />
<RowFixed>
<TYPE.main>
{inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
</TYPE.main> </TYPE.main>
) : ( {typeof ratio === 'number' && !removed ? (
<> <Badge style={{ marginLeft: '10px' }}>
<TYPE.main color={theme.white}> <TYPE.main color={theme.text2} fontSize={11}>
<Trans>Collect fees</Trans> <Trans>{inverted ? 100 - ratio : ratio}%</Trans>
</TYPE.main> </TYPE.main>
</> </Badge>
)} ) : null}
</ButtonConfirmed> </RowFixed>
) : null} </RowBetween>
</RowBetween> </AutoColumn>
</LightCard>
</AutoColumn> </AutoColumn>
<LightCard padding="12px 16px"> </DarkCard>
<DarkCard>
<AutoColumn gap="md" style={{ width: '100%' }}>
<AutoColumn gap="md"> <AutoColumn gap="md">
<RowBetween> <RowBetween style={{ alignItems: 'flex-start' }}>
<RowFixed> <AutoColumn gap="md">
<CurrencyLogo <Label>
currency={feeValueUpper?.currency} <Trans>Unclaimed fees</Trans>
size={'20px'} </Label>
style={{ marginRight: '0.5rem' }} {fiatValueOfFees?.greaterThan(new Fraction(1, 100)) ? (
/> <TYPE.largeHeader color={theme.green1} fontSize="36px" fontWeight={500}>
<TYPE.main>{feeValueUpper?.currency?.symbol}</TYPE.main> <Trans>${fiatValueOfFees.toFixed(2, { groupSeparator: ',' })}</Trans>
</RowFixed> </TYPE.largeHeader>
<RowFixed> ) : (
<TYPE.main>{feeValueUpper ? formatCurrencyAmount(feeValueUpper, 4) : '-'}</TYPE.main> <TYPE.largeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
</RowFixed> <Trans>$-</Trans>
</TYPE.largeHeader>
)}
</AutoColumn>
{ownsNFT && (feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) || !!collectMigrationHash) ? (
<ButtonConfirmed
disabled={collecting || !!collectMigrationHash}
confirmed={!!collectMigrationHash && !isCollectPending}
width="fit-content"
style={{ borderRadius: '12px' }}
padding="4px 8px"
onClick={() => setShowConfirm(true)}
>
{!!collectMigrationHash && !isCollectPending ? (
<TYPE.main color={theme.text1}>
<Trans> Collected</Trans>
</TYPE.main>
) : isCollectPending || collecting ? (
<TYPE.main color={theme.text1}>
{' '}
<Dots>
<Trans>Collecting</Trans>
</Dots>
</TYPE.main>
) : (
<>
<TYPE.main color={theme.white}>
<Trans>Collect fees</Trans>
</TYPE.main>
</>
)}
</ButtonConfirmed>
) : null}
</RowBetween> </RowBetween>
<RowBetween> </AutoColumn>
<RowFixed> <LightCard padding="12px 16px">
<CurrencyLogo <AutoColumn gap="md">
currency={feeValueLower?.currency} <RowBetween>
size={'20px'} <RowFixed>
style={{ marginRight: '0.5rem' }} <CurrencyLogo
currency={feeValueUpper?.currency}
size={'20px'}
style={{ marginRight: '0.5rem' }}
/>
<TYPE.main>{feeValueUpper?.currency?.symbol}</TYPE.main>
</RowFixed>
<RowFixed>
<TYPE.main>{feeValueUpper ? formatCurrencyAmount(feeValueUpper, 4) : '-'}</TYPE.main>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<CurrencyLogo
currency={feeValueLower?.currency}
size={'20px'}
style={{ marginRight: '0.5rem' }}
/>
<TYPE.main>{feeValueLower?.currency?.symbol}</TYPE.main>
</RowFixed>
<RowFixed>
<TYPE.main>{feeValueLower ? formatCurrencyAmount(feeValueLower, 4) : '-'}</TYPE.main>
</RowFixed>
</RowBetween>
</AutoColumn>
</LightCard>
{ownsNFT &&
(feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0)) &&
currency0 &&
currency1 &&
(currency0.isNative || currency1.isNative) &&
!collectMigrationHash ? (
<AutoColumn gap="md">
<RowBetween>
<TYPE.main>
<Trans>Collect as WETH</Trans>
</TYPE.main>
<Toggle
id="receive-as-weth"
isActive={receiveWETH}
toggle={() => setReceiveWETH((receiveWETH) => !receiveWETH)}
/> />
<TYPE.main>{feeValueLower?.currency?.symbol}</TYPE.main> </RowBetween>
</RowFixed> </AutoColumn>
<RowFixed> ) : null}
<TYPE.main>{feeValueLower ? formatCurrencyAmount(feeValueLower, 4) : '-'}</TYPE.main> </AutoColumn>
</RowFixed> </DarkCard>
</RowBetween> </AutoColumn>
</ResponsiveRow>
<DarkCard>
<AutoColumn gap="md">
<RowBetween>
<RowFixed>
<Label display="flex" style={{ marginRight: '12px' }}>
<Trans>Price range</Trans>
</Label>
<HideExtraSmall>
<>
<RangeBadge removed={removed} inRange={inRange} />
<span style={{ width: '8px' }} />
</>
</HideExtraSmall>
</RowFixed>
<RowFixed>
{currencyBase && currencyQuote && (
<RateToggle
currencyA={currencyBase}
currencyB={currencyQuote}
handleRateToggle={() => setManuallyInverted(!manuallyInverted)}
/>
)}
</RowFixed>
</RowBetween>
<RowBetween>
<LightCard padding="12px" width="100%">
<AutoColumn gap="8px" justify="center">
<ExtentsText>
<Trans>Min price</Trans>
</ExtentsText>
<TYPE.mediumHeader textAlign="center">{priceLower?.toSignificant(5)}</TYPE.mediumHeader>
<ExtentsText>
{' '}
<Trans>
{currencyQuote?.symbol} per {currencyBase?.symbol}
</Trans>
</ExtentsText>
{inRange && (
<TYPE.small color={theme.text3}>
<Trans>Your position will be 100% {currencyBase?.symbol} at this price.</Trans>
</TYPE.small>
)}
</AutoColumn> </AutoColumn>
</LightCard> </LightCard>
{ownsNFT &&
(feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0)) &&
currency0 &&
currency1 &&
(currency0.isNative || currency1.isNative) &&
!collectMigrationHash ? (
<AutoColumn gap="md">
<RowBetween>
<TYPE.main>
<Trans>Collect as WETH</Trans>
</TYPE.main>
<Toggle
id="receive-as-weth"
isActive={receiveWETH}
toggle={() => setReceiveWETH((receiveWETH) => !receiveWETH)}
/>
</RowBetween>
</AutoColumn>
) : null}
</AutoColumn>
</DarkCard>
</AutoColumn>
</ResponsiveRow>
<DarkCard>
<AutoColumn gap="md">
<RowBetween>
<RowFixed>
<Label display="flex" style={{ marginRight: '12px' }}>
<Trans>Price range</Trans>
</Label>
<HideExtraSmall>
<>
<RangeBadge removed={removed} inRange={inRange} />
<span style={{ width: '8px' }} />
</>
</HideExtraSmall>
</RowFixed>
<RowFixed>
{currencyBase && currencyQuote && (
<RateToggle
currencyA={currencyBase}
currencyB={currencyQuote}
handleRateToggle={() => setManuallyInverted(!manuallyInverted)}
/>
)}
</RowFixed>
</RowBetween>
<RowBetween> <DoubleArrow>⟷</DoubleArrow>
<LightCard padding="12px" width="100%"> <LightCard padding="12px" width="100%">
<AutoColumn gap="8px" justify="center"> <AutoColumn gap="8px" justify="center">
<ExtentsText> <ExtentsText>
<Trans>Min price</Trans> <Trans>Max price</Trans>
</ExtentsText> </ExtentsText>
<TYPE.mediumHeader textAlign="center">{priceLower?.toSignificant(5)}</TYPE.mediumHeader> <TYPE.mediumHeader textAlign="center">{priceUpper?.toSignificant(5)}</TYPE.mediumHeader>
<ExtentsText> <ExtentsText>
{' '} {' '}
<Trans> <Trans>
{currencyQuote?.symbol} per {currencyBase?.symbol} {currencyQuote?.symbol} per {currencyBase?.symbol}
</Trans> </Trans>
</ExtentsText> </ExtentsText>
{inRange && ( {inRange && (
<TYPE.small color={theme.text3}> <TYPE.small color={theme.text3}>
<Trans>Your position will be 100% {currencyBase?.symbol} at this price.</Trans> <Trans>Your position will be 100% {currencyQuote?.symbol} at this price.</Trans>
</TYPE.small> </TYPE.small>
)} )}
</AutoColumn> </AutoColumn>
</LightCard> </LightCard>
</RowBetween>
<DoubleArrow>⟷</DoubleArrow> <CurrentPriceCard
<LightCard padding="12px" width="100%"> inverted={inverted}
<AutoColumn gap="8px" justify="center"> pool={pool}
<ExtentsText> currencyQuote={currencyQuote}
<Trans>Max price</Trans> currencyBase={currencyBase}
</ExtentsText> />
<TYPE.mediumHeader textAlign="center">{priceUpper?.toSignificant(5)}</TYPE.mediumHeader> </AutoColumn>
<ExtentsText> </DarkCard>
{' '} </AutoColumn>
<Trans> </PageWrapper>
{currencyQuote?.symbol} per {currencyBase?.symbol} <SwitchLocaleLink />
</Trans> </>
</ExtentsText>
{inRange && (
<TYPE.small color={theme.text3}>
<Trans>Your position will be 100% {currencyQuote?.symbol} at this price.</Trans>
</TYPE.small>
)}
</AutoColumn>
</LightCard>
</RowBetween>
<CurrentPriceCard
inverted={inverted}
pool={pool}
currencyQuote={currencyQuote}
currencyBase={currencyBase}
/>
</AutoColumn>
</DarkCard>
</AutoColumn>
</PageWrapper>
) )
} }
src/pages/Pool/v2.tsx
View file @ 37cf492d
...@@ -19,6 +19,7 @@ import { useV2Pairs } from '../../hooks/useV2Pairs' ...@@ -19,6 +19,7 @@ import { useV2Pairs } from '../../hooks/useV2Pairs'
import { toV2LiquidityToken, useTrackedTokenPairs } from '../../state/user/hooks' import { toV2LiquidityToken, useTrackedTokenPairs } from '../../state/user/hooks'
import { Dots } from '../../components/swap/styleds' import { Dots } from '../../components/swap/styleds'
import { CardSection, DataCard, CardNoise, CardBGImage } from '../../components/earn/styled' import { CardSection, DataCard, CardNoise, CardBGImage } from '../../components/earn/styled'
import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
import { useStakingInfo } from '../../state/stake/hooks' import { useStakingInfo } from '../../state/stake/hooks'
import { BIG_INT_ZERO } from '../../constants/misc' import { BIG_INT_ZERO } from '../../constants/misc'
import { Pair } from '@uniswap/v2-sdk' import { Pair } from '@uniswap/v2-sdk'
...@@ -256,6 +257,7 @@ export default function Pool() { ...@@ -256,6 +257,7 @@ export default function Pool() {
</AutoColumn> </AutoColumn>
</AutoColumn> </AutoColumn>
</PageWrapper> </PageWrapper>
<SwitchLocaleLink />
</> </>
) )
} }
src/pages/PoolFinder/index.tsx
View file @ 37cf492d
...@@ -11,6 +11,7 @@ import { FindPoolTabs } from '../../components/NavigationTabs' ...@@ -11,6 +11,7 @@ import { FindPoolTabs } from '../../components/NavigationTabs'
import { MinimalPositionCard } from '../../components/PositionCard' import { MinimalPositionCard } from '../../components/PositionCard'
import Row from '../../components/Row' import Row from '../../components/Row'
import CurrencySearchModal from '../../components/SearchModal/CurrencySearchModal' import CurrencySearchModal from '../../components/SearchModal/CurrencySearchModal'
import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
import { ExtendedEther } from '../../constants/tokens' import { ExtendedEther } from '../../constants/tokens'
import { PairState, useV2Pair } from '../../hooks/useV2Pairs' import { PairState, useV2Pair } from '../../hooks/useV2Pairs'
import { useActiveWeb3React } from '../../hooks/web3' import { useActiveWeb3React } from '../../hooks/web3'
...@@ -93,136 +94,139 @@ export default function PoolFinder() { ...@@ -93,136 +94,139 @@ export default function PoolFinder() {
) )
return ( return (
<AppBody> <>
<FindPoolTabs origin={query.get('origin') ?? '/pool/v2'} /> <AppBody>
<AutoColumn style={{ padding: '1rem' }} gap="md"> <FindPoolTabs origin={query.get('origin') ?? '/pool/v2'} />
<BlueCard> <AutoColumn style={{ padding: '1rem' }} gap="md">
<AutoColumn gap="10px"> <BlueCard>
<TYPE.link fontWeight={400} color={'primaryText1'}> <AutoColumn gap="10px">
<Trans> <TYPE.link fontWeight={400} color={'primaryText1'}>
<b>Tip:</b> Use this tool to find v2 pools that don&apos;t automatically appear in the interface. <Trans>
</Trans> <b>Tip:</b> Use this tool to find v2 pools that don&apos;t automatically appear in the interface.
</TYPE.link> </Trans>
</AutoColumn> </TYPE.link>
</BlueCard> </AutoColumn>
<ButtonDropdownLight </BlueCard>
onClick={() => { <ButtonDropdownLight
setShowSearch(true) onClick={() => {
setActiveField(Fields.TOKEN0) setShowSearch(true)
}} setActiveField(Fields.TOKEN0)
> }}
{currency0 ? ( >
<Row> {currency0 ? (
<CurrencyLogo currency={currency0} /> <Row>
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}> <CurrencyLogo currency={currency0} />
{currency0.symbol} <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
</Text> {currency0.symbol}
</Row> </Text>
) : ( </Row>
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}> ) : (
<Trans>Select a token</Trans>
</Text>
)}
</ButtonDropdownLight>
<ColumnCenter>
<Plus size="16" color="#888D9B" />
</ColumnCenter>
<ButtonDropdownLight
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN1)
}}
>
{currency1 ? (
<Row>
<CurrencyLogo currency={currency1} />
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}> <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
{currency1.symbol} <Trans>Select a token</Trans>
</Text> </Text>
</Row> )}
) : ( </ButtonDropdownLight>
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
<Trans>Select a token</Trans>
</Text>
)}
</ButtonDropdownLight>
{hasPosition && ( <ColumnCenter>
<ColumnCenter <Plus size="16" color="#888D9B" />
style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
>
<Text textAlign="center" fontWeight={500}>
<Trans>Pool Found!</Trans>
</Text>
<StyledInternalLink to={`/pool/v2`}>
<Text textAlign="center">
<Trans>Manage this pool.</Trans>
</Text>
</StyledInternalLink>
</ColumnCenter> </ColumnCenter>
)}
{currency0 && currency1 ? ( <ButtonDropdownLight
pairState === PairState.EXISTS ? ( onClick={() => {
hasPosition && pair ? ( setShowSearch(true)
<MinimalPositionCard pair={pair} border="1px solid #CED0D9" /> setActiveField(Fields.TOKEN1)
}}
>
{currency1 ? (
<Row>
<CurrencyLogo currency={currency1} />
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
{currency1.symbol}
</Text>
</Row>
) : ( ) : (
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
<Trans>Select a token</Trans>
</Text>
)}
</ButtonDropdownLight>
{hasPosition && (
<ColumnCenter
style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
>
<Text textAlign="center" fontWeight={500}>
<Trans>Pool Found!</Trans>
</Text>
<StyledInternalLink to={`/pool/v2`}>
<Text textAlign="center">
<Trans>Manage this pool.</Trans>
</Text>
</StyledInternalLink>
</ColumnCenter>
)}
{currency0 && currency1 ? (
pairState === PairState.EXISTS ? (
hasPosition && pair ? (
<MinimalPositionCard pair={pair} border="1px solid #CED0D9" />
) : (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text textAlign="center">
<Trans>You don’t have liquidity in this pool yet.</Trans>
</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
<Text textAlign="center">
<Trans>Add liquidity.</Trans>
</Text>
</StyledInternalLink>
</AutoColumn>
</LightCard>
)
) : validPairNoLiquidity ? (
<LightCard padding="45px 10px"> <LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center"> <AutoColumn gap="sm" justify="center">
<Text textAlign="center"> <Text textAlign="center">
<Trans>You don’t have liquidity in this pool yet.</Trans> <Trans>No pool found.</Trans>
</Text> </Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}> <StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
<Text textAlign="center"> <Trans>Create pool.</Trans>
<Trans>Add liquidity.</Trans>
</Text>
</StyledInternalLink> </StyledInternalLink>
</AutoColumn> </AutoColumn>
</LightCard> </LightCard>
) ) : pairState === PairState.INVALID ? (
) : validPairNoLiquidity ? ( <LightCard padding="45px 10px">
<LightCard padding="45px 10px"> <AutoColumn gap="sm" justify="center">
<AutoColumn gap="sm" justify="center"> <Text textAlign="center" fontWeight={500}>
<Text textAlign="center"> <Trans>Invalid pair.</Trans>
<Trans>No pool found.</Trans> </Text>
</Text> </AutoColumn>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}> </LightCard>
<Trans>Create pool.</Trans> ) : pairState === PairState.LOADING ? (
</StyledInternalLink> <LightCard padding="45px 10px">
</AutoColumn> <AutoColumn gap="sm" justify="center">
</LightCard> <Text textAlign="center">
) : pairState === PairState.INVALID ? ( <Trans>Loading</Trans>
<LightCard padding="45px 10px"> <Dots />
<AutoColumn gap="sm" justify="center"> </Text>
<Text textAlign="center" fontWeight={500}> </AutoColumn>
<Trans>Invalid pair.</Trans> </LightCard>
</Text> ) : null
</AutoColumn> ) : (
</LightCard> prerequisiteMessage
) : pairState === PairState.LOADING ? ( )}
<LightCard padding="45px 10px"> </AutoColumn>
<AutoColumn gap="sm" justify="center">
<Text textAlign="center"> <CurrencySearchModal
<Trans>Loading</Trans> isOpen={showSearch}
<Dots /> onCurrencySelect={handleCurrencySelect}
</Text> onDismiss={handleSearchDismiss}
</AutoColumn> showCommonBases
</LightCard> selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
) : null />
) : ( </AppBody>
prerequisiteMessage <SwitchLocaleLink />
)} </>
</AutoColumn>
<CurrencySearchModal
isOpen={showSearch}
onCurrencySelect={handleCurrencySelect}
onDismiss={handleSearchDismiss}
showCommonBases
selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
/>
</AppBody>
) )
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment