From b964e088ebdd04336445c8c083f34f8d36312c56 Mon Sep 17 00:00:00 2001 From: memoyil <2213635+memoyil@users.noreply.github.com> Date: Sun, 23 Apr 2023 16:32:08 +0300 Subject: [PATCH] refactor: Redirect to liquidity token page after adding liquidity --- .../AddLiquidityV3/IncreaseLiquidityV3.tsx | 22 +++++------- .../formViews/V3FormView/index.tsx | 30 ++++------------ .../hooks/useSupplyingPendingText.ts | 35 +++++++++++++++++++ 3 files changed, 49 insertions(+), 38 deletions(-) create mode 100644 apps/web/src/views/AddLiquidityV3/hooks/useSupplyingPendingText.ts diff --git a/apps/web/src/views/AddLiquidityV3/IncreaseLiquidityV3.tsx b/apps/web/src/views/AddLiquidityV3/IncreaseLiquidityV3.tsx index a2050e871e7652..b220a2e56df44a 100644 --- 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( 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 index 68451dff6c26fb..ef9c5915e5bba1 100644 --- 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(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() @@ -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 new file mode 100644 index 00000000000000..19bf2f14c122d8 --- /dev/null +++ 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 }, + 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], + ) +}