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/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>