refactor review modals (#60)

src/components/NavigationTabs/index.tsx

@@ -11,6 +11,8 @@ import Settings from '../Settings'
 import { useDispatch } from 'react-redux'
 import { AppDispatch } from 'state'
 import { resetMintState } from 'state/mint/actions'
+import { TYPE } from 'theme'
+import useTheme from 'hooks/useTheme'
 
 const Tabs = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
@@ -85,6 +87,8 @@ export function FindPoolTabs({ origin }: { origin: string }) {
 }
 
 export function AddRemoveTabs({ adding, creating }: { adding: boolean; creating: boolean }) {
+  const theme = useTheme()
+
   // reset states on back
   const dispatch = useDispatch<AppDispatch>()
 
@@ -97,9 +101,11 @@ export function AddRemoveTabs({ adding, creating }: { adding: boolean; creating:
             adding && dispatch(resetMintState())
           }}
         >
-          <StyledArrowLeft />
+          <StyledArrowLeft stroke={theme.text2} opacity="0.6" />
         </HistoryLink>
-        <ActiveText>{creating ? 'Create a pair' : adding ? 'Add Liquidity' : 'Remove Liquidity'}</ActiveText>
+        <TYPE.black fontWeight={500} fontSize={16} style={{ opacity: '0.6' }}>
+          {creating ? 'Create a pair' : adding ? 'Add Liquidity' : 'Remove Liquidity'}
+        </TYPE.black>
         <Settings />
       </RowBetween>
     </Tabs>

src/components/TransactionConfirmationModal/index.tsx

@@ -24,7 +24,6 @@ const Section = styled(AutoColumn)<{ inline?: boolean }>`
 `
 
 const BottomSection = styled(Section)`
-  // background-color: ${({ theme }) => theme.bg2};
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
 `
@@ -157,7 +156,7 @@ export function ConfirmationModalContent({
   bottomContent?: () => React.ReactNode | undefined
 }) {
   return (
-    <Wrapper>
+    <Wrapper style={{ padding: 0 }}>
       <Section>
         <RowBetween>
           <Text fontWeight={500} fontSize={16}>

src/pages/AddLiquidity/ConfirmAddModalBottom.tsx

-import { Currency, CurrencyAmount, Fraction, Percent } from '@uniswap/sdk-core'
-import React from 'react'
-import { Text } from 'rebass'
-import { ButtonPrimary } from '../../components/Button'
-import { RowBetween, RowFixed } from '../../components/Row'
-import CurrencyLogo from '../../components/CurrencyLogo'
-import { Field } from '../../state/mint/actions'
-import { TYPE } from '../../theme'
-
-export function ConfirmAddModalBottom({
-  noLiquidity,
-  price,
-  currencies,
-  parsedAmounts,
-  poolTokenPercentage,
-  onAdd,
-}: {
-  noLiquidity?: boolean
-  price?: Fraction
-  currencies: { [field in Field]?: Currency }
-  parsedAmounts: { [field in Field]?: CurrencyAmount }
-  poolTokenPercentage?: Percent
-  onAdd: () => void
-}) {
-  return (
-    <>
-      <RowBetween>
-        <TYPE.body>{currencies[Field.CURRENCY_A]?.symbol} Deposited</TYPE.body>
-        <RowFixed>
-          <CurrencyLogo currency={currencies[Field.CURRENCY_A]} style={{ marginRight: '8px' }} />
-          <TYPE.body>{parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}</TYPE.body>
-        </RowFixed>
-      </RowBetween>
-      <RowBetween>
-        <TYPE.body>{currencies[Field.CURRENCY_B]?.symbol} Deposited</TYPE.body>
-        <RowFixed>
-          <CurrencyLogo currency={currencies[Field.CURRENCY_B]} style={{ marginRight: '8px' }} />
-          <TYPE.body>{parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}</TYPE.body>
-        </RowFixed>
-      </RowBetween>
-      <RowBetween>
-        <TYPE.body>Rates</TYPE.body>
-        <TYPE.body>
-          {`1 ${currencies[Field.CURRENCY_A]?.symbol} = ${price?.toSignificant(4)} ${
-            currencies[Field.CURRENCY_B]?.symbol
-          }`}
-        </TYPE.body>
-      </RowBetween>
-      <RowBetween style={{ justifyContent: 'flex-end' }}>
-        <TYPE.body>
-          {`1 ${currencies[Field.CURRENCY_B]?.symbol} = ${price?.invert().toSignificant(4)} ${
-            currencies[Field.CURRENCY_A]?.symbol
-          }`}
-        </TYPE.body>
-      </RowBetween>
-      <RowBetween>
-        <TYPE.body>Share of Pool:</TYPE.body>
-        <TYPE.body>{noLiquidity ? '100' : poolTokenPercentage?.toSignificant(4)}%</TYPE.body>
-      </RowBetween>
-      <ButtonPrimary style={{ margin: '20px 0 0 0' }} onClick={onAdd}>
-        <Text fontWeight={500} fontSize={20}>
-          {noLiquidity ? 'Create Pool & Supply' : 'Confirm Supply'}
-        </Text>
-      </ButtonPrimary>
-    </>
-  )
-}

src/pages/AddLiquidity/ConfirmContent.tsx

-import React, { useState } from 'react'
-import { ButtonPrimary } from '../../components/Button'
-import { RowBetween, RowFixed } from '../../components/Row'
-import CurrencyLogo from '../../components/CurrencyLogo'
-import { Field } from '../../state/mint/actions'
-import { TYPE, ExternalLink } from '../../theme'
-import { AutoColumn } from 'components/Column'
-import { OutlineCard, GreyCard, BlueCard } from 'components/Card'
-import styled from 'styled-components'
-import { Break } from 'components/earn/styled'
-import useTheme from 'hooks/useTheme'
-import { AlertOctagon } from 'react-feather'
-import { ToggleWrapper, ToggleElement } from 'components/Toggle/MultiToggle'
-import { useTranslation } from 'react-i18next'
-import { Price, Currency, CurrencyAmount } from '@uniswap/sdk-core'
-
-const Wrapper = styled(AutoColumn)`
-  padding: 1rem 0;
-`
-
-export function ConfirmContent({
-  currencies,
-  parsedAmounts,
-  onAdd,
-}: {
-  noLiquidity?: boolean
-  price?: Price
-  currencies: { [field in Field]?: Currency }
-  parsedAmounts: { [field in Field]?: CurrencyAmount }
-  onAdd: () => void
-}) {
-  const currencyA: Currency | undefined = currencies[Field.CURRENCY_A]
-  const currencyB: Currency | undefined = currencies[Field.CURRENCY_B]
-
-  const [rateCurrency, setRateCurrency] = useState<Currency | undefined>(currencyA)
-
-  const theme = useTheme()
-  const { t } = useTranslation()
-
-  return (
-    <Wrapper gap="lg">
-      <OutlineCard>
-        <AutoColumn gap="md">
-          <RowBetween>
-            <RowFixed>
-              <CurrencyLogo currency={currencyA} />
-              <TYPE.label ml="8px">{currencyA?.symbol}</TYPE.label>
-            </RowFixed>
-            <RowFixed>
-              <TYPE.label mr="8px">{parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}</TYPE.label>
-              <GreyCard padding="4px 8px" width="fit-content" borderRadius="12px">
-                <TYPE.darkGray>50%</TYPE.darkGray>
-              </GreyCard>
-            </RowFixed>
-          </RowBetween>
-          <RowBetween>
-            <RowFixed>
-              <CurrencyLogo currency={currencyB} />
-              <TYPE.label ml="8px">{currencyB?.symbol}</TYPE.label>
-            </RowFixed>
-            <RowFixed>
-              <TYPE.label mr="8px">{parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}</TYPE.label>
-              <GreyCard padding="4px 8px" borderRadius="12px" width="fit-content">
-                <TYPE.darkGray>50%</TYPE.darkGray>
-              </GreyCard>
-            </RowFixed>
-          </RowBetween>
-          <Break />
-          <RowBetween>
-            <TYPE.label>{t('feePool')}</TYPE.label>
-            <TYPE.label>0.6%</TYPE.label>
-          </RowBetween>
-        </AutoColumn>
-      </OutlineCard>
-      <BlueCard padding="12px">
-        <RowBetween>
-          <AlertOctagon stroke={theme.primary1} width={'90px'} />
-          <TYPE.blue ml="12px" fontSize="14px">
-            {t('rebalanceMessage')}
-          </TYPE.blue>
-        </RowBetween>
-      </BlueCard>
-      <OutlineCard padding="16px">
-        <AutoColumn gap="md">
-          <RowBetween>
-            <TYPE.label>Position Limits</TYPE.label>
-            {currencyA && currencyB && (
-              <ToggleWrapper width="80px">
-                <ToggleElement
-                  fontSize="10px"
-                  isActive={rateCurrency === currencyA}
-                  onClick={() => setRateCurrency(currencyA)}
-                >
-                  {currencyA?.symbol}
-                </ToggleElement>
-                <ToggleElement
-                  fontSize="10px"
-                  isActive={rateCurrency === currencyB}
-                  onClick={() => setRateCurrency(currencyB)}
-                >
-                  {currencyB?.symbol}
-                </ToggleElement>
-              </ToggleWrapper>
-            )}
-          </RowBetween>
-          <RowBetween>
-            <AutoColumn gap="2px">
-              <TYPE.darkGray>Lower Limit</TYPE.darkGray>
-              <TYPE.label fontSize="14px">1621.82</TYPE.label>
-              <GreyCard padding="4px" borderRadius="4px" mt="6px">
-                <RowFixed>
-                  <CurrencyLogo currency={currencyA} size="12px" />
-                  <TYPE.label fontSize="12px" ml="6px">
-                    100%
-                  </TYPE.label>
-                  <TYPE.label fontSize="12px" ml="6px">
-                    {currencyA?.symbol}
-                  </TYPE.label>
-                </RowFixed>
-              </GreyCard>
-            </AutoColumn>
-            <AutoColumn gap="2px">
-              <TYPE.darkGray>Entry Price</TYPE.darkGray>
-              <TYPE.label fontSize="14px">1621.82</TYPE.label>
-              <GreyCard padding="4px" borderRadius="4px" mt="6px">
-                <TYPE.label fontSize="12px" ml="6px">
-                  50%/50%
-                </TYPE.label>
-              </GreyCard>
-            </AutoColumn>
-            <AutoColumn gap="2px">
-              <TYPE.darkGray>Upper Limit</TYPE.darkGray>
-              <TYPE.label fontSize="14px">1621.82</TYPE.label>
-              <GreyCard padding="4px" borderRadius="4px" mt="6px">
-                <RowFixed>
-                  <CurrencyLogo currency={currencyB} size="12px" />
-                  <TYPE.label fontSize="12px" ml="6px">
-                    100%
-                  </TYPE.label>
-                  <TYPE.label fontSize="12px" ml="6px">
-                    {currencyB?.symbol}
-                  </TYPE.label>
-                </RowFixed>
-              </GreyCard>
-            </AutoColumn>
-          </RowBetween>
-        </AutoColumn>
-      </OutlineCard>
-      <TYPE.main>
-        {t('addEarnHelper')}
-        <ExternalLink href="">{t('learnMoreAboutFess')}</ExternalLink>
-      </TYPE.main>
-      <ButtonPrimary onClick={onAdd} fontSize="20px">
-        {t('addLiquidity')}
-      </ButtonPrimary>
-    </Wrapper>
-  )
-}
-
-export default ConfirmContent

src/pages/AddLiquidity/Review.tsx

@@ -12,8 +12,7 @@ import { PositionPreview } from 'components/PositionPreview'
 import { RangeBadge } from './styled'
 
 const Wrapper = styled.div`
-  padding: 20px;
-  min-width: 460px;
+  padding-top: 20px;
 `
 
 export const Badge = styled(Card)<{ inRange?: boolean }>`

src/pages/AddLiquidity/index.tsx

@@ -2,7 +2,7 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { Currency, TokenAmount, ETHER } from '@uniswap/sdk-core'
 import React, { useCallback, useContext, useMemo, useState } from 'react'
 import { WETH9 } from '@uniswap/sdk-core'
-import { Link2, AlertTriangle, ChevronRight } from 'react-feather'
+import { Link2, AlertTriangle } from 'react-feather'
 import ReactGA from 'react-ga'
 import { useV3NFTPositionManagerContract } from '../../hooks/useContract'
 import { RouteComponentProps } from 'react-router-dom'
@@ -11,9 +11,9 @@ import { ThemeContext } from 'styled-components'
 import { ButtonError, ButtonLight, ButtonPrimary, ButtonText } from '../../components/Button'
 import { YellowCard, OutlineCard, BlueCard } from '../../components/Card'
 import { AutoColumn, ColumnCenter } from '../../components/Column'
-import { TransactionSubmittedContent, ConfirmationPendingContent } from '../../components/TransactionConfirmationModal'
+import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
-import { AutoRow, RowBetween, RowFixed } from '../../components/Row'
+import { RowBetween, RowFixed } from '../../components/Row'
 import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
 import Review from './Review'
 import { useActiveWeb3React } from '../../hooks'
@@ -36,7 +36,6 @@ import {
   CurrencyDropdown,
   ScrollableContent,
   StyledInput,
-  FixedPreview,
   Wrapper,
   RangeBadge,
   ScrollablePage,
@@ -54,6 +53,7 @@ import RangeSelector from 'components/RangeSelector'
 import RateToggle from 'components/RateToggle'
 import { BigNumber } from '@ethersproject/bignumber'
 import { calculateGasMargin } from 'utils'
+import { AddRemoveTabs } from 'components/NavigationTabs'
 
 export default function AddLiquidity({
   match: {
@@ -305,8 +305,6 @@ export default function AddLiquidity({
     setTxHash('')
   }, [onFieldAInput, txHash])
 
-  // const isCreate = history.location.pathname.includes('/create')
-
   const addIsUnsupported = useIsSwapUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B)
 
   const clearAll = useCallback(() => {
@@ -332,25 +330,16 @@ export default function AddLiquidity({
   return (
     <ScrollablePage>
       <ScrollableContent>
-        <AutoRow gap="2px" marginBottom="20px">
-          <ButtonText opacity={'0.4'} onClick={() => history.push('/pool')}>
-            Pool
-          </ButtonText>
-          <ChevronRight size={16} opacity={'0.4'} />
-          <ButtonText opacity={showConfirm ? '0.4' : '1'} onClick={() => (showConfirm ? setShowConfirm(false) : null)}>
-            Configure
-          </ButtonText>
-          <ChevronRight size={16} opacity={'0.4'} />
-          <ButtonText
-            opacity={showConfirm ? '1' : '0.1'}
-            onClick={() => (!showConfirm ? setShowConfirm(true) : null)}
-            disabled={!isValid}
-          >
-            Review
-          </ButtonText>
-        </AutoRow>
-        {showConfirm ? (
-          <AppBody>
+        <TransactionConfirmationModal
+          isOpen={showConfirm}
+          onDismiss={handleDismissConfirmation}
+          attemptingTxn={attemptingTxn}
+          hash={txHash}
+          content={() => (
+            <ConfirmationModalContent
+              title={'Add Liquidity'}
+              onDismiss={handleDismissConfirmation}
+              topContent={() => (
                 <Review
                   currencies={currencies}
                   parsedAmounts={parsedAmounts}
@@ -360,9 +349,20 @@ export default function AddLiquidity({
                   priceUpper={priceUpper}
                   outOfRange={outOfRange}
                 />
-          </AppBody>
-        ) : (
+              )}
+              bottomContent={() => (
+                <ButtonPrimary onClick={onAdd}>
+                  <Text fontWeight={500} fontSize={20}>
+                    Add
+                  </Text>
+                </ButtonPrimary>
+              )}
+            />
+          )}
+          pendingText={pendingText}
+        />
         <AppBody>
+          <AddRemoveTabs creating={false} adding={true} />
           <Wrapper>
             <AutoColumn gap="lg">
               {!hasExistingPosition ? (
@@ -410,13 +410,13 @@ export default function AddLiquidity({
                 <RowBetween>
                   <RowFixed>
                     <DoubleCurrencyLogo
-                        currency0={baseCurrency ?? undefined}
-                        currency1={quoteCurrency ?? undefined}
+                      currency0={currencyA ?? undefined}
+                      currency1={currencyB ?? undefined}
                       size={24}
                       margin={true}
                     />
                     <TYPE.label ml="10px" fontSize="24px">
-                        {quoteCurrency?.symbol} / {baseCurrency?.symbol}
+                      {currencyA?.symbol} / {currencyB?.symbol}
                     </TYPE.label>
                   </RowFixed>
                   <RangeBadge inRange={!outOfRange}>{outOfRange ? 'Out of range' : 'In Range'}</RangeBadge>
@@ -462,7 +462,8 @@ export default function AddLiquidity({
                           />
                         </OutlineCard>
                         <RowBetween style={{ backgroundColor: theme.bg6, padding: '12px', borderRadius: '12px' }}>
-                            <TYPE.main>Starting {baseCurrency?.symbol} Price:</TYPE.main>
+                          <TYPE.main>Current {baseCurrency?.symbol} Price:</TYPE.main>
+                          <TYPE.main>
                             {price ? (
                               <TYPE.main>
                                 {invertPrice ? price?.invert()?.toSignificant(8) : price?.toSignificant(8)}{' '}
@@ -471,6 +472,7 @@ export default function AddLiquidity({
                             ) : (
                               '-'
                             )}
+                          </TYPE.main>
                         </RowBetween>
                       </AutoColumn>
                     </DynamicSection>
@@ -497,10 +499,10 @@ export default function AddLiquidity({
 
                     {price && baseCurrency && quoteCurrency && !noLiquidity && (
                       <RowBetween style={{ backgroundColor: theme.bg6, padding: '12px', borderRadius: '12px' }}>
-                          <TYPE.main>Current {baseCurrency?.symbol} Price:</TYPE.main>
+                        <TYPE.main>Current Price</TYPE.main>
                         <TYPE.main>
                           {invertPrice ? price.invert().toSignificant(3) : price.toSignificant(3)}{' '}
-                            {quoteCurrency?.symbol}
+                          {quoteCurrency?.symbol} = 1 {baseCurrency.symbol}
                         </TYPE.main>
                       </RowBetween>
                     )}
@@ -583,39 +585,6 @@ export default function AddLiquidity({
                   />
                 </AutoColumn>
               </DynamicSection>
-              </AutoColumn>
-            </Wrapper>
-          </AppBody>
-        )}
-      </ScrollableContent>
-      {addIsUnsupported && (
-        <UnsupportedCurrencyFooter
-          show={addIsUnsupported}
-          currencies={[currencies.CURRENCY_A, currencies.CURRENCY_B]}
-        />
-      )}
-      <FixedPreview>
-        {attemptingTxn ? (
-          <ConfirmationPendingContent onDismiss={handleDismissConfirmation} pendingText={pendingText} inline={true} />
-        ) : txHash && chainId ? (
-          <TransactionSubmittedContent
-            chainId={chainId}
-            hash={txHash}
-            onDismiss={handleDismissConfirmation}
-            inline={true}
-          />
-        ) : (
-          <AutoColumn gap="md">
-            <TYPE.label fontSize="16px">{showConfirm ? 'Review and submit' : 'Configure Position'}</TYPE.label>
-            {/* <TYPE.main fontWeight={400} fontSize="14px">
-              Learn more about Uniswap V3 liquidity pools.
-            </TYPE.main> */}
-            {noLiquidity && (
-              <BlueCard width="100%" padding="1rem">
-                You are the first to provide liquidity to this pool.
-              </BlueCard>
-            )}
-            {showConfirm ? (
               <div>
                 {addIsUnsupported ? (
                   <ButtonPrimary disabled={true} borderRadius="12px" padding={'12px'}>
@@ -667,10 +636,8 @@ export default function AddLiquidity({
                       )}
                     <ButtonError
                       onClick={() => {
-                        onAdd()
+                        expertMode ? onAdd() : setShowConfirm(true)
                       }}
-                      style={{ borderRadius: '12px' }}
-                      padding={'12px'}
                       disabled={
                         !isValid ||
                         (approvalA !== ApprovalState.APPROVED && !depositADisabled) ||
@@ -678,29 +645,22 @@ export default function AddLiquidity({
                       }
                       error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
                     >
-                      <Text fontWeight={500}>
-                        {errorMessage ? errorMessage : noLiquidity ? 'Create Pool and Add' : 'Add'}
-                      </Text>
+                      <Text fontWeight={500}>{errorMessage ? errorMessage : 'Add'}</Text>
                     </ButtonError>
                   </AutoColumn>
                 )}
               </div>
-            ) : (
-              <ButtonError
-                onClick={() => {
-                  expertMode ? onAdd() : setShowConfirm(true)
-                }}
-                style={{ borderRadius: '12px' }}
-                padding={'12px'}
-                disabled={!isValid}
-                error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
-              >
-                <Text fontWeight={500}>{errorMessage ?? 'Review'}</Text>
-              </ButtonError>
-            )}
             </AutoColumn>
+          </Wrapper>
+        </AppBody>
+        {/* )} */}
+      </ScrollableContent>
+      {addIsUnsupported && (
+        <UnsupportedCurrencyFooter
+          show={addIsUnsupported}
+          currencies={[currencies.CURRENCY_A, currencies.CURRENCY_B]}
+        />
       )}
-      </FixedPreview>
     </ScrollablePage>
   )
 }

src/pages/RemoveLiquidity/V3.tsx

 import React, { useCallback, useMemo, useState } from 'react'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
-import { Redirect, RouteComponentProps, Link } from 'react-router-dom'
+import { Redirect, RouteComponentProps } from 'react-router-dom'
 import AppBody from '../AppBody'
 import { BigNumber } from '@ethersproject/bignumber'
 import useDebouncedChangeHandler from 'hooks/useDebouncedChangeHandler'
 import { useBurnV3ActionHandlers, useBurnV3State, useDerivedV3BurnInfo } from 'state/burn/v3/hooks'
 import Slider from 'components/Slider'
 import { AutoRow, RowBetween, RowFixed } from 'components/Row'
-import TransactionConfirmationModal from '../../components/TransactionConfirmationModal'
+import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
 import { AutoColumn } from 'components/Column'
-import { ButtonConfirmed, ButtonText } from 'components/Button'
+import { ButtonConfirmed, ButtonPrimary } from 'components/Button'
 import { LightCard } from 'components/Card'
 import { Text } from 'rebass'
 import CurrencyLogo from 'components/CurrencyLogo'
@@ -23,7 +23,6 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { useTransactionAdder } from 'state/transactions/hooks'
 import { WETH9, CurrencyAmount } from '@uniswap/sdk-core'
 import { TYPE } from 'theme'
-import styled from 'styled-components'
 import { Wrapper, SmallMaxButton } from './styled'
 import Loader from 'components/Loader'
 import { useToken } from 'hooks/Tokens'
@@ -33,13 +32,11 @@ import { RangeBadge } from 'pages/AddLiquidity/styled'
 import { Break } from 'components/earn/styled'
 import { NonfungiblePositionManager } from '@uniswap/v3-sdk'
 import { calculateGasMargin } from 'utils'
+import useTheme from 'hooks/useTheme'
+import { AddRemoveTabs } from 'components/NavigationTabs'
 
 export const UINT128MAX = BigNumber.from(2).pow(128).sub(1)
 
-const UnstyledLink = styled(Link)`
-  text-decoration: none;
-`
-
 // redirect invalid tokenIds
 export default function RemoveLiquidityV3({
   location,
@@ -63,7 +60,7 @@ export default function RemoveLiquidityV3({
 }
 function Remove({ tokenId }: { tokenId: BigNumber }) {
   const { position } = useV3PositionFromTokenId(tokenId)
-
+  const theme = useTheme()
   const { account, chainId, library } = useActiveWeb3React()
 
   // currencies from position
@@ -98,7 +95,6 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
   const addTransaction = useTransactionAdder()
   const positionManager = useV3NFTPositionManagerContract()
   const burn = useCallback(async () => {
-    setShowConfirm(true)
     setAttemptingTxn(true)
     if (
       !positionManager ||
@@ -113,7 +109,6 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
       !liquidityPercentage ||
       !library
     ) {
-      setShowConfirm(false)
       return
     }
 
@@ -165,7 +160,6 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
           })
       })
       .catch((error) => {
-        setShowConfirm(false)
         setAttemptingTxn(false)
         console.error(error)
       })
@@ -200,6 +194,67 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
     currency0?.symbol
   } and ${liquidityValue1?.toSignificant(6)} ${currency1?.symbol}`
 
+  function modalHeader() {
+    return (
+      <AutoColumn gap={'sm'} style={{ marginTop: '20px' }}>
+        <RowBetween align="flex-end">
+          <Text fontSize={16} fontWeight={500}>
+            {currency0?.symbol}:
+          </Text>
+          <RowFixed>
+            <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+              {liquidityValue0 && <FormattedCurrencyAmount currencyAmount={liquidityValue0} />}
+            </Text>
+            <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
+          </RowFixed>
+        </RowBetween>
+        <RowBetween align="flex-end">
+          <Text fontSize={16} fontWeight={500}>
+            {currency1?.symbol}:
+          </Text>
+          <RowFixed>
+            <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+              {liquidityValue1 && <FormattedCurrencyAmount currencyAmount={liquidityValue1} />}
+            </Text>
+            <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />
+          </RowFixed>
+        </RowBetween>
+        {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) ? (
+          <>
+            <TYPE.italic fontSize={12} color={theme.text2} textAlign="left" padding={'8px 0 0 0'}>
+              {`You will also collect fees earned from this position.`}
+            </TYPE.italic>
+            <RowBetween>
+              <Text fontSize={16} fontWeight={500}>
+                {currency0?.symbol} from fees:
+              </Text>
+              <RowFixed>
+                <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                  {feeValue0 && <FormattedCurrencyAmount currencyAmount={feeValue0} />}
+                </Text>
+                <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
+              </RowFixed>
+            </RowBetween>
+            <RowBetween>
+              <Text fontSize={16} fontWeight={500}>
+                {currency1?.symbol} from fees:
+              </Text>
+              <RowFixed>
+                <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                  {feeValue1 && <FormattedCurrencyAmount currencyAmount={feeValue1} />}
+                </Text>
+                <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />
+              </RowFixed>
+            </RowBetween>
+          </>
+        ) : null}
+        <ButtonPrimary mt="16px" onClick={burn}>
+          Remove
+        </ButtonPrimary>
+      </AutoColumn>
+    )
+  }
+
   return (
     <AutoColumn>
       <TransactionConfirmationModal
@@ -207,19 +262,17 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
         onDismiss={handleDismissConfirmation}
         attemptingTxn={attemptingTxn}
         hash={txnHash ?? ''}
-        content={() => <div />}
+        content={() => (
+          <ConfirmationModalContent
+            title={'Remove Liquidity'}
+            onDismiss={handleDismissConfirmation}
+            topContent={modalHeader}
+          />
+        )}
         pendingText={pendingText}
       />
-      <AutoRow marginBottom="20px">
-        <UnstyledLink to="pool">
-          <ButtonText opacity={'0.4'}>Pool</ButtonText>
-        </UnstyledLink>
-        <TYPE.label margin="0 10px" opacity={'0.4'}>
-          {' > '}
-        </TYPE.label>
-        <TYPE.label>Remove Liquidity</TYPE.label>
-      </AutoRow>
       <AppBody>
+        <AddRemoveTabs creating={false} adding={false} />
         <Wrapper>
           {position ? (
             <AutoColumn gap="lg">
@@ -308,8 +361,12 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
               </LightCard>
               <div style={{ display: 'flex' }}>
                 <AutoColumn gap="12px" style={{ flex: '1' }}>
-                  <ButtonConfirmed confirmed={false} disabled={percent === 0 || !liquidityValue0} onClick={burn}>
-                    {error ?? 'Remove Liquidity'}
+                  <ButtonConfirmed
+                    confirmed={false}
+                    disabled={percent === 0 || !liquidityValue0}
+                    onClick={() => setShowConfirm(true)}
+                  >
+                    {error ?? 'Remove'}
                   </ButtonConfirmed>
                 </AutoColumn>
               </div>