recreate bug fixes (#109)

src/components/PositionPreview/index.tsx

@@ -8,16 +8,33 @@ import CurrencyLogo from 'components/CurrencyLogo'
 import { unwrappedToken } from 'utils/wrappedCurrency'
 import { Break } from 'components/earn/styled'
 import { useTranslation } from 'react-i18next'
+import { Currency } from '@uniswap/sdk-core'
 import RateToggle from 'components/RateToggle'
 
-export const PositionPreview = ({ position, title }: { position: Position; title?: string }) => {
+export const PositionPreview = ({
+  position,
+  title,
+  baseCurrencyDefault,
+}: {
+  position: Position
+  title?: string
+  baseCurrencyDefault?: Currency | undefined
+}) => {
   const { t } = useTranslation()
 
   const currency0 = unwrappedToken(position.pool.token0)
   const currency1 = unwrappedToken(position.pool.token1)
 
   // track which currency should be base
-  const [baseCurrency, setBaseCurrency] = useState(currency0)
+  const [baseCurrency, setBaseCurrency] = useState(
+    baseCurrencyDefault
+      ? baseCurrencyDefault === currency0
+        ? currency0
+        : baseCurrencyDefault === currency1
+        ? currency1
+        : currency0
+      : currency0
+  )
   const sorted = baseCurrency === currency0
   const quoteCurrency = sorted ? currency1 : currency0
 

src/pages/AddLiquidity/Review.tsx

@@ -28,6 +28,7 @@ export function Review({
   position,
   currencies,
   outOfRange,
+  baseCurrency,
 }: {
   position?: Position
   existingPosition?: Position
@@ -36,6 +37,7 @@ export function Review({
   priceLower?: Price
   priceUpper?: Price
   outOfRange: boolean
+  baseCurrency?: Currency
 }) {
   const currencyA: Currency | undefined = currencies[Field.CURRENCY_A]
   const currencyB: Currency | undefined = currencies[Field.CURRENCY_B]
@@ -52,18 +54,9 @@ export function Review({
           </RowFixed>
           <RangeBadge inRange={!outOfRange}>{outOfRange ? 'Out of range' : 'In Range'}</RangeBadge>
         </RowBetween>
-        {position ? <PositionPreview position={position} title={'Tokens To Add'} /> : null}
-        {/* <YellowCard>
-          <AutoColumn gap="md">
-            <RowBetween>
-              <TYPE.label color={theme.text2}>Efficiency Comparison</TYPE.label>
-              <AlertCircle stroke={theme.text2} />
-            </RowBetween>
-            <TYPE.label fontWeight={400} color={theme.text2}>
-              This liquidity position has an increased capital efficiency relative to an unbounded price limit.
-            </TYPE.label>
-          </AutoColumn>
-        </YellowCard> */}
+        {position ? (
+          <PositionPreview position={position} title={'Tokens To Add'} baseCurrencyDefault={baseCurrency} />
+        ) : null}
       </AutoColumn>
     </Wrapper>
   )

src/pages/AddLiquidity/index.tsx

@@ -293,9 +293,10 @@ export default function AddLiquidity({
     // if there was a tx hash, we want to clear the input
     if (txHash) {
       onFieldAInput('')
+      history.push('/pool')
     }
     setTxHash('')
-  }, [onFieldAInput, txHash])
+  }, [history, onFieldAInput, txHash])
 
   const addIsUnsupported = useIsSwapUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B)
 
@@ -304,7 +305,7 @@ export default function AddLiquidity({
     onFieldBInput('')
     onLeftRangeInput('')
     onRightRangeInput('')
-    history.push(`/add/`)
+    history.push(`/add`)
   }, [history, onFieldAInput, onFieldBInput, onLeftRangeInput, onRightRangeInput])
 
   // get value and prices at ticks
@@ -339,6 +340,7 @@ export default function AddLiquidity({
                 priceLower={priceLower}
                 priceUpper={priceUpper}
                 outOfRange={outOfRange}
+                baseCurrency={baseCurrency ?? undefined}
               />
             )}
             bottomContent={() => (

src/pages/Pool/PositionPage.tsx

@@ -28,6 +28,7 @@ import { useActiveWeb3React } from 'hooks'
 import { useV3NFTPositionManagerContract } from 'hooks/useContract'
 import { useIsTransactionPending, useTransactionAdder } from 'state/transactions/hooks'
 import ReactGA from 'react-ga'
+import TransactionConfirmationModal, { ConfirmationModalContent } from 'components/TransactionConfirmationModal'
 import { TransactionResponse } from '@ethersproject/providers'
 import { Dots } from 'components/swap/styleds'
 import { getPriceOrderingFromPositionForUI } from '../../components/PositionListItem'
@@ -230,14 +231,15 @@ export function PositionPage({
   // const below = pool && typeof tickLower === 'number' ? pool.tickCurrent < tickLower : false
   // const above = pool && typeof tickUpper === 'number' ? pool.tickCurrent >= tickUpper : false
 
-  const ratio =
-    priceLower && pool && priceUpper
+  const ratio = useMemo(() => {
+    return priceLower && pool && priceUpper
       ? getRatio(
           inverted ? priceUpper.invert() : priceLower,
           pool.token0Price,
           inverted ? priceLower.invert() : priceUpper
         )
       : undefined
+  }, [inverted, pool, priceLower, priceUpper])
 
   // fees
   const [feeValue0, feeValue1] = useV3PositionFees(pool ?? undefined, positionDetails)
@@ -245,6 +247,7 @@ export function PositionPage({
   const [collecting, setCollecting] = useState<boolean>(false)
   const [collectMigrationHash, setCollectMigrationHash] = useState<string | null>(null)
   const isCollectPending = useIsTransactionPending(collectMigrationHash ?? undefined)
+  const [showConfirm, setShowConfirm] = useState(false)
 
   const addTransaction = useTransactionAdder()
   const positionManager = useV3NFTPositionManagerContract()
@@ -319,6 +322,49 @@ export function PositionPage({
     return amount0.add(amount1)
   }, [price0, price1, position])
 
+  function modalHeader() {
+    return (
+      <AutoColumn gap={'md'} style={{ marginTop: '20px' }}>
+        <LightCard padding="12px 16px">
+          <AutoColumn gap="md">
+            <RowBetween>
+              <RowFixed>
+                <CurrencyLogo currency={currencyQuote} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                <TYPE.main>
+                  {inverted
+                    ? feeValue0
+                      ? formatTokenAmount(feeValue0, 4)
+                      : '-'
+                    : feeValue1
+                    ? formatTokenAmount(feeValue1, 4)
+                    : '-'}
+                </TYPE.main>
+              </RowFixed>
+              <TYPE.main>{currencyQuote?.symbol}</TYPE.main>
+            </RowBetween>
+            <RowBetween>
+              <RowFixed>
+                <CurrencyLogo currency={currencyBase} size={'20px'} style={{ marginRight: '0.5rem' }} />
+                <TYPE.main>
+                  {inverted
+                    ? feeValue0
+                      ? formatTokenAmount(feeValue1, 4)
+                      : '-'
+                    : feeValue1
+                    ? formatTokenAmount(feeValue0, 4)
+                    : '-'}
+                </TYPE.main>
+              </RowFixed>
+              <TYPE.main>{currencyBase?.symbol}</TYPE.main>
+            </RowBetween>
+          </AutoColumn>
+        </LightCard>
+        <TYPE.italic>Collecting fees will withdraw currently available fees for you.</TYPE.italic>
+        <ButtonPrimary onClick={collect}>Collect</ButtonPrimary>
+      </AutoColumn>
+    )
+  }
+
   return loading || poolState === PoolState.LOADING || !feeAmount ? (
     <LoadingRows>
       <div />
@@ -336,6 +382,20 @@ export function PositionPage({
     </LoadingRows>
   ) : (
     <PageWrapper>
+      <TransactionConfirmationModal
+        isOpen={showConfirm}
+        onDismiss={() => setShowConfirm(false)}
+        attemptingTxn={collecting}
+        hash={collectMigrationHash ?? ''}
+        content={() => (
+          <ConfirmationModalContent
+            title={'Collect fees'}
+            onDismiss={() => setShowConfirm(false)}
+            topContent={modalHeader}
+          />
+        )}
+        pendingText={'Collecting fees'}
+      />
       <AutoColumn gap="md">
         <AutoColumn gap="sm">
           <Link style={{ textDecoration: 'none', width: 'fit-content', marginBottom: '0.5rem' }} to="/pool">
@@ -466,7 +526,7 @@ export function PositionPage({
                         width="fit-content"
                         style={{ borderRadius: '12px' }}
                         padding="4px 8px"
-                        onClick={collect}
+                        onClick={() => setShowConfirm(true)}
                       >
                         {!!collectMigrationHash && !isCollectPending ? (
                           <TYPE.main color={theme.text1}> Collected</TYPE.main>