update pending texts in modal

src/pages/MyEarnings/ElasticPools/SinglePosition/CollectFeesPanel.tsx

@@ -18,6 +18,7 @@ import useTheme from 'hooks/useTheme'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import HoverDropdown from 'pages/MyEarnings/HoverDropdown'
+import { MODAL_PENDING_TEXTS } from 'pages/MyEarnings/constants'
 import { setAttemptingTxn, setShowPendingModal, setTxError, setTxnHash } from 'state/myEarnings/actions'
 import { useTransactionAdder } from 'state/transactions/hooks'
 import { TRANSACTION_TYPE } from 'state/transactions/type'
@@ -115,7 +116,7 @@ const CollectFeesPanel: React.FC<Props> = ({
           })
       })
       .catch((error: any) => {
-        dispatch(setShowPendingModal(true))
+        dispatch(setShowPendingModal(MODAL_PENDING_TEXTS.COLLECT_FEES))
         dispatch(setAttemptingTxn(false))
         dispatch(setTxError(error?.message || JSON.stringify(error)))
         console.error(error)
@@ -158,14 +159,14 @@ const CollectFeesPanel: React.FC<Props> = ({
       dispatch(setAttemptingTxn(false))
       dispatch(setTxnHash(txResponse.hash))
     } catch (e) {
-      dispatch(setShowPendingModal(true))
+      dispatch(setShowPendingModal(MODAL_PENDING_TEXTS.COLLECT_FEES))
       dispatch(setAttemptingTxn(false))
       dispatch(setTxError(e?.message || JSON.stringify(e)))
     }
   }
 
   const collectFeesForElasticPosition = () => {
-    dispatch(setShowPendingModal(true))
+    dispatch(setShowPendingModal(MODAL_PENDING_TEXTS.COLLECT_FEES))
     dispatch(setAttemptingTxn(true))
 
     if (!feeValue0 || !feeValue1 || !positionManager || !account || !library || !deadline) {
@@ -198,7 +199,7 @@ const CollectFeesPanel: React.FC<Props> = ({
   }
 
   const collectFeesForElasticLegacyPosition = () => {
-    dispatch(setShowPendingModal(true))
+    dispatch(setShowPendingModal(MODAL_PENDING_TEXTS.COLLECT_FEES))
     dispatch(setAttemptingTxn(true))
 
     if (!feeValue0 || !feeValue1 || !positionManager || !account || !library || !deadline) {

src/pages/MyEarnings/TransactionConfirmationModal.tsx

@@ -13,6 +13,7 @@ const TransactionConfirmationModal = () => {
   const txnHash = useAppSelector(state => state.myEarnings.txnHash)
   const attemptingTxn = useAppSelector(state => state.myEarnings.attemptingTxn)
   const collectFeeError = useAppSelector(state => state.myEarnings.txError)
+  const pendingText = useAppSelector(state => state.myEarnings.pendingText)
 
   const handleDismiss = useCallback(() => {
     dispatch(setShowPendingModal(false))
@@ -31,7 +32,7 @@ const TransactionConfirmationModal = () => {
       onDismiss={handleDismiss}
       hash={txnHash}
       attemptingTxn={attemptingTxn}
-      pendingText={`Collecting fee rewards`}
+      pendingText={pendingText}
       content={() => (
         <Flex flexDirection={'column'} width="100%">
           {collectFeeError ? <TransactionErrorContent onDismiss={handleDismiss} message={collectFeeError} /> : null}

src/pages/MyEarnings/constants.ts

@@ -3,3 +3,8 @@ export const WIDTHS: Record<number /* X: number of positions */, number /* min w
   3: 1226,
   2: 842,
 }
+
+export const MODAL_PENDING_TEXTS = {
+  COLLECT_FEES: 'Collecting fee rewards',
+  REMOVE_LIQUIDITY: 'Removing liquidity',
+}

src/pages/MyEarnings/hooks.ts

@@ -13,6 +13,7 @@ import { NETWORKS_INFO, ONLY_DYNAMIC_FEE_CHAINS, isEVM as isEVMChain } from 'con
 import { useActiveWeb3React, useWeb3React } from 'hooks'
 import { Position as SubgraphLegacyPosition, config, parsePosition } from 'hooks/useElasticLegacy'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
+import { MODAL_PENDING_TEXTS } from 'pages/MyEarnings/constants'
 import { useKyberSwapConfig } from 'state/application/hooks'
 import { setAttemptingTxn, setShowPendingModal, setTxError, setTxnHash } from 'state/myEarnings/actions'
 import { useTokenPricesWithLoading } from 'state/tokenPrices/hooks'
@@ -286,7 +287,7 @@ export function useRemoveLiquidityFromLegacyPosition(
   const addTransactionWithType = useTransactionAdder()
 
   const removeLiquidity = () => {
-    dispatch(setShowPendingModal(true))
+    dispatch(setShowPendingModal(MODAL_PENDING_TEXTS.REMOVE_LIQUIDITY))
     dispatch(setAttemptingTxn(true))
 
     if (!deadline || !account || !library) {
@@ -354,7 +355,7 @@ export function useRemoveLiquidityFromLegacyPosition(
           })
       })
       .catch((error: any) => {
-        dispatch(setShowPendingModal(true))
+        dispatch(setShowPendingModal(MODAL_PENDING_TEXTS.REMOVE_LIQUIDITY))
         dispatch(setAttemptingTxn(false))
 
         if (error?.code !== 'ACTION_REJECTED') {

src/state/myEarnings/actions.ts

@@ -13,4 +13,4 @@ export const setActiveTab = createAction<VERSION>('myEarnings/setActiveTab')
 export const setTxError = createAction<string>('myEarnings/setTxError')
 export const setAttemptingTxn = createAction<boolean>('myEarnings/setAttemptingTxn')
 export const setTxnHash = createAction<string>('myEarnings/setTxnHash')
-export const setShowPendingModal = createAction<boolean>('myEarnings/setShowPendingModal')
+export const setShowPendingModal = createAction<string | false>('myEarnings/setShowPendingModal')

src/state/myEarnings/reducer.ts

@@ -28,6 +28,7 @@ export interface MyEarningsState {
   readonly attemptingTxn: boolean
   readonly showPendingModal: boolean
   readonly txError: string
+  readonly pendingText: string
 }
 
 const initialState: MyEarningsState = {
@@ -41,6 +42,7 @@ const initialState: MyEarningsState = {
   attemptingTxn: false,
   showPendingModal: false,
   txError: '',
+  pendingText: '',
 }
 
 export default createReducer(initialState, builder =>
@@ -74,6 +76,12 @@ export default createReducer(initialState, builder =>
       state.txnHash = action.payload
     })
     .addCase(setShowPendingModal, (state, action) => {
-      state.showPendingModal = action.payload
+      if (action.payload) {
+        state.showPendingModal = true
+        state.pendingText = action.payload
+      } else {
+        state.showPendingModal = false
+        state.pendingText = ''
+      }
     }),
 )