refactor: Redirect to liquidity token page after adding liquidity

pancakeswap · May 19, 2023 · b964e08 · b964e08
1 parent 77ba221
commit b964e08
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 38 deletions.
diff --git a/apps/web/src/views/AddLiquidityV3/IncreaseLiquidityV3.tsx b/apps/web/src/views/AddLiquidityV3/IncreaseLiquidityV3.tsx
@@ -29,10 +29,11 @@ import { BodyWrapper } from 'components/App/AppBody'
 import CurrencyInputPanel from 'components/CurrencyInputPanel'
 import TransactionConfirmationModal from 'components/TransactionConfirmationModal'
 import { ApprovalState, useApproveCallback } from 'hooks/useApproveCallback'
-import { formatRawAmount, formatCurrencyAmount } from 'utils/formatCurrencyAmount'
+import { formatRawAmount } from 'utils/formatCurrencyAmount'
 import { basisPointsToPercent } from 'utils/exchange'
 import { isUserRejected } from 'utils/sentry'
 
+import { useSupplyingPendingText } from 'views/AddLiquidityV3/hooks/useSupplyingPendingText'
 import { useV3MintActionHandlers } from './formViews/V3FormView/form/hooks/useV3MintActionHandlers'
 import { PositionPreview } from './formViews/V3FormView/components/PositionPreview'
 import LockedDeposit from './formViews/V3FormView/components/LockedDeposit'
@@ -51,10 +52,7 @@ export default function IncreaseLiquidityV3({ currencyA: baseCurrency, currencyB
 
   const [, , feeAmountFromUrl, tokenId] = router.query.currency || []
 
-  const {
-    t,
-    currentLanguage: { locale },
-  } = useTranslation()
+  const { t } = useTranslation()
   const expertMode = useIsExpertMode()
 
   const { account, chainId, isWrongNetwork } = useActiveWeb3React()
@@ -241,15 +239,11 @@ export default function IncreaseLiquidityV3({ currencyA: baseCurrency, currencyB
     // if there was a tx hash, we want to clear the input
     if (txHash) {
       onFieldAInput('')
-      router.push('/liquidity')
+      router.push(hasExistingPosition ? `/liquidity/${existingPositionDetails.tokenId.toString()}` : '/liquidity')
     }
-  }, [onFieldAInput, router, txHash])
+  }, [hasExistingPosition, existingPositionDetails, onFieldAInput, router, txHash])
 
-  const pendingText = `Supplying ${
-    !depositADisabled ? formatCurrencyAmount(parsedAmounts[Field.CURRENCY_A], 4, locale) : ''
-  } ${!depositADisabled ? currencies[Field.CURRENCY_A]?.symbol : ''} ${!outOfRange ? 'and' : ''} ${
-    !depositBDisabled ? formatCurrencyAmount(parsedAmounts[Field.CURRENCY_B], 4, locale) : ''
-  } ${!depositBDisabled ? currencies[Field.CURRENCY_B]?.symbol : ''}`
+  const pendingText = useSupplyingPendingText(parsedAmounts, depositADisabled, depositBDisabled, currencies, outOfRange)
 
   const [onPresentIncreaseLiquidityModal] = useModal(
     <TransactionConfirmationModal
@@ -335,7 +329,7 @@ export default function IncreaseLiquidityV3({ currencyA: baseCurrency, currencyB
                   maxAmount={maxAmounts[Field.CURRENCY_A]}
                   onMax={() => onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')}
                   onPercentInput={(percent) =>
-                    onFieldAInput(maxAmounts[Field.CURRENCY_A]?.multiply(new Percent(percent, 100)).toExact() ?? '')
+                    onFieldAInput(maxAmounts?.[Field.CURRENCY_A]?.multiply(new Percent(percent, 100))?.toExact() ?? '')
                   }
                   value={formattedAmounts[Field.CURRENCY_A]}
                   onUserInput={onFieldAInput}
@@ -354,7 +348,7 @@ export default function IncreaseLiquidityV3({ currencyA: baseCurrency, currencyB
                   maxAmount={maxAmounts[Field.CURRENCY_B]}
                   onMax={() => onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')}
                   onPercentInput={(percent) =>
-                    onFieldBInput(maxAmounts[Field.CURRENCY_B]?.multiply(new Percent(percent, 100)).toExact() ?? '')
+                    onFieldBInput(maxAmounts?.[Field.CURRENCY_B]?.multiply(new Percent(percent, 100))?.toExact() ?? '')
                   }
                   value={formattedAmounts[Field.CURRENCY_B]}
                   onUserInput={onFieldBInput}

diff --git a/apps/web/src/views/AddLiquidityV3/formViews/V3FormView/index.tsx b/apps/web/src/views/AddLiquidityV3/formViews/V3FormView/index.tsx
@@ -45,11 +45,12 @@ import LiquidityChartRangeInput from 'components/LiquidityChartRangeInput'
 import TransactionConfirmationModal from 'components/TransactionConfirmationModal'
 import { Bound } from 'config/constants/types'
 import { V3SubmitButton } from 'views/AddLiquidityV3/components/V3SubmitButton'
-import { formatCurrencyAmount, formatRawAmount } from 'utils/formatCurrencyAmount'
+import { formatRawAmount } from 'utils/formatCurrencyAmount'
 import { QUICK_ACTION_CONFIGS } from 'views/AddLiquidityV3/types'
 import { isUserRejected } from 'utils/sentry'
 
 import { ZoomLevels, ZOOM_LEVELS } from 'components/LiquidityChartRangeInput/types'
+import { useSupplyingPendingText } from 'views/AddLiquidityV3/hooks/useSupplyingPendingText'
 import RangeSelector from './components/RangeSelector'
 import { PositionPreview } from './components/PositionPreview'
 import RateToggle from './components/RateToggle'
@@ -112,10 +113,7 @@ export default function V3FormView({
   const { data: signer } = useSigner()
   const [attemptingTxn, setAttemptingTxn] = useState<boolean>(false) // clicked confirm
 
-  const {
-    t,
-    currentLanguage: { locale },
-  } = useTranslation()
+  const { t } = useTranslation()
   const expertMode = useIsExpertMode()
 
   const positionManager = useV3NFTPositionManagerContract()
@@ -307,23 +305,7 @@ export default function V3FormView({
   const showApprovalA = approvalA !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_A]
   const showApprovalB = approvalB !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_B]
 
-  const translationData = useMemo(
-    () => ({
-      amountA: !depositADisabled ? formatCurrencyAmount(parsedAmounts[Field.CURRENCY_A], 4, locale) : '',
-      symbolA: !depositADisabled ? currencies[Field.CURRENCY_A]?.symbol : '',
-      amountB: !depositBDisabled ? formatCurrencyAmount(parsedAmounts[Field.CURRENCY_B], 4, locale) : '',
-      symbolB: !depositBDisabled ? currencies[Field.CURRENCY_B]?.symbol : '',
-    }),
-    [depositADisabled, depositBDisabled, parsedAmounts, locale, currencies],
-  )
-
-  const pendingText = useMemo(
-    () =>
-      !outOfRange
-        ? t('Supplying %amountA% %symbolA% and %amountB% %symbolB%', translationData)
-        : t('Supplying %amountA% %symbolA% %amountB% %symbolB%', translationData),
-    [t, outOfRange, translationData],
-  )
+  const pendingText = useSupplyingPendingText(parsedAmounts, depositADisabled, depositBDisabled, currencies, outOfRange)
 
   const [activeQuickAction, setActiveQuickAction] = useState<number>()
 
@@ -428,7 +410,7 @@ export default function V3FormView({
               maxAmount={maxAmounts[Field.CURRENCY_A]}
               onMax={() => onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')}
               onPercentInput={(percent) =>
-                onFieldAInput(maxAmounts[Field.CURRENCY_A]?.multiply(new Percent(percent, 100)).toExact() ?? '')
+                onFieldAInput(maxAmounts?.[Field.CURRENCY_A]?.multiply(new Percent(percent, 100))?.toExact() ?? '')
               }
               disableCurrencySelect
               value={formattedAmounts[Field.CURRENCY_A]}
@@ -449,7 +431,7 @@ export default function V3FormView({
             maxAmount={maxAmounts[Field.CURRENCY_B]}
             onMax={() => onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')}
             onPercentInput={(percent) =>
-              onFieldBInput(maxAmounts[Field.CURRENCY_B]?.multiply(new Percent(percent, 100)).toExact() ?? '')
+              onFieldBInput(maxAmounts?.[Field.CURRENCY_B]?.multiply(new Percent(percent, 100))?.toExact() ?? '')
             }
             disableCurrencySelect
             value={formattedAmounts[Field.CURRENCY_B]}

diff --git a/apps/web/src/views/AddLiquidityV3/hooks/useSupplyingPendingText.ts b/apps/web/src/views/AddLiquidityV3/hooks/useSupplyingPendingText.ts
@@ -0,0 +1,35 @@
+import { useMemo } from 'react'
+import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
+import { Field } from 'state/mint/actions'
+import { useTranslation } from '@pancakeswap/localization'
+import { Currency, CurrencyAmount } from '@pancakeswap/swap-sdk-core'
+
+export function useSupplyingPendingText(
+  parsedAmounts: { [field in Field]?: CurrencyAmount<Currency> },
+  depositADisabled: boolean,
+  depositBDisabled: boolean,
+  currencies: { [field in Field]?: Currency },
+  outOfRange: boolean,
+): string {
+  const {
+    t,
+    currentLanguage: { locale },
+  } = useTranslation()
+  const translationData = useMemo(
+    () => ({
+      amountA: !depositADisabled ? formatCurrencyAmount(parsedAmounts[Field.CURRENCY_A], 4, locale) : '',
+      symbolA: !depositADisabled ? currencies[Field.CURRENCY_A]?.symbol : '',
+      amountB: !depositBDisabled ? formatCurrencyAmount(parsedAmounts[Field.CURRENCY_B], 4, locale) : '',
+      symbolB: !depositBDisabled ? currencies[Field.CURRENCY_B]?.symbol : '',
+    }),
+    [depositADisabled, depositBDisabled, parsedAmounts, locale, currencies],
+  )
+
+  return useMemo(
+    () =>
+      !outOfRange
+        ? t('Supplying %amountA% %symbolA% and %amountB% %symbolB%', translationData)
+        : t('Supplying %amountA% %symbolA% %amountB% %symbolB%', translationData),
+    [t, outOfRange, translationData],
+  )
+}