fix: show error if submit form is unsuccessful

apps/main/src/components/PagePool/Deposit/components/FormDeposit.tsx

@@ -9,7 +9,7 @@ import { DEFAULT_ESTIMATED_GAS, DEFAULT_SLIPPAGE } from '@/components/PagePool'
 import { DEFAULT_FORM_LP_TOKEN_EXPECTED } from '@/components/PagePool/Deposit/utils'
 import { amountsDescription, tokensDescription } from '@/components/PagePool/utils'
 import { getActiveStep, getStepStatus } from '@/ui/Stepper/helpers'
-import networks from '@/networks'
+import { handleSubmitResp } from '@/utils/utilsForm'
 import useStore from '@/store/useStore'
 
 import AlertBox from '@/ui/AlertBox'
@@ -100,12 +100,11 @@ const FormDeposit = ({
       const notifyMessage = t`Please confirm deposit of ${tokenText} at max ${maxSlippage}% slippage.`
       const { dismiss } = notifyNotification(notifyMessage, 'pending')
       const resp = await fetchStepDeposit(activeKey, curve, poolData, formValues, maxSlippage)
+      const txHash = handleSubmitResp(activeKey, isSubscribed, curve, dismiss, resp, setTxInfoBar)
 
-      if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey) {
-        const txDescription = t`Deposited ${tokenText}.`
-        setTxInfoBar(<TxInfoBar description={txDescription} txHash={networks[curve.chainId].scanTxPath(resp.hash)} />)
-      }
-      if (typeof dismiss === 'function') dismiss()
+      if (!txHash) return
+
+      setTxInfoBar(<TxInfoBar description={t`Transaction completed.`} txHash={txHash} />)
     },
     [fetchStepDeposit, notifyNotification]
   )

apps/main/src/components/PagePool/Deposit/components/FormDepositStake.tsx

@@ -10,7 +10,7 @@ import { DEFAULT_ESTIMATED_GAS, DEFAULT_SLIPPAGE } from '@/components/PagePool'
 import { DEFAULT_FORM_LP_TOKEN_EXPECTED } from '@/components/PagePool/Deposit/utils'
 import { amountsDescription, tokensDescription } from '@/components/PagePool/utils'
 import { getActiveStep, getStepStatus } from '@/ui/Stepper/helpers'
-import networks from '@/networks'
+import { handleSubmitResp } from '@/utils/utilsForm'
 import useStore from '@/store/useStore'
 
 import AlertBox from '@/ui/AlertBox'
@@ -103,12 +103,11 @@ const FormDepositStake = ({
       const notifyMessage = t`Please confirm deposit and staking of ${tokenText} LP Tokens at max ${maxSlippage}% slippage.`
       const { dismiss } = notifyNotification(notifyMessage, 'pending')
       const resp = await fetchStepDepositStake(activeKey, curve, poolData, formValues, maxSlippage)
+      const txHash = handleSubmitResp(activeKey, isSubscribed, curve, dismiss, resp, setTxInfoBar)
 
-      if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey) {
-        const TxDescription = t`Deposit and staked ${tokenText}`
-        setTxInfoBar(<TxInfoBar description={TxDescription} txHash={networks[curve.chainId].scanTxPath(resp.hash)} />)
-      }
-      if (typeof dismiss === 'function') dismiss()
+      if (!txHash) return
+
+      setTxInfoBar(<TxInfoBar description={t`Transaction completed.`} txHash={txHash} />)
     },
     [fetchStepDepositStake, notifyNotification]
   )

apps/main/src/components/PagePool/Deposit/components/FormStake.tsx

@@ -10,7 +10,7 @@ import BigNumber from 'bignumber.js'
 import { DEFAULT_ESTIMATED_GAS } from '@/components/PagePool'
 import { getActiveStep, getStepStatus } from '@/ui/Stepper/helpers'
 import { formatNumber } from '@/ui/utils'
-import networks from '@/networks'
+import { handleSubmitResp } from '@/utils/utilsForm'
 import useStore from '@/store/useStore'
 
 import { FieldsWrapper } from '@/components/PagePool/styles'
@@ -69,12 +69,11 @@ const FormStake = ({ curve, poolData, poolDataCacheOrApi, routerParams, seed, us
       const notifyMessage = t`Please confirm staking of ${formValues.lpToken} LP Tokens`
       const { dismiss } = notifyNotification(notifyMessage, 'pending')
       const resp = await fetchStepStake(activeKey, curve, poolData, formValues)
+      const txHash = handleSubmitResp(activeKey, isSubscribed, curve, dismiss, resp, setTxInfoBar)
 
-      if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey) {
-        const TxDescription = `Staked ${formValues.lpToken} LP Tokens`
-        setTxInfoBar(<TxInfoBar description={TxDescription} txHash={networks[curve.chainId].scanTxPath(resp.hash)} />)
-      }
-      if (typeof dismiss === 'function') dismiss()
+      if (!txHash) return
+
+      setTxInfoBar(<TxInfoBar description={t`Transaction completed.`} txHash={txHash} />)
     },
     [fetchStepStake, notifyNotification]
   )

apps/main/src/components/PagePool/Swap/index.tsx

@@ -12,6 +12,7 @@ import { DEFAULT_EXCHANGE_OUTPUT, DEFAULT_EST_GAS, getSwapTokens } from '@/compo
 import { NETWORK_TOKEN, REFRESH_INTERVAL } from '@/constants'
 import { formatNumber } from '@/ui/utils'
 import { getActiveStep, getStepStatus } from '@/ui/Stepper/helpers'
+import { handleSubmitResp } from '@/utils/utilsForm'
 import cloneDeep from 'lodash/cloneDeep'
 import networks from '@/networks'
 import usePageVisibleInterval from '@/hooks/usePageVisibleInterval'
@@ -128,21 +129,13 @@ const Swap = ({
       const notifyMessage = t`Please confirm swap ${fromAmount} ${fromToken} for ${toToken} at max slippage ${maxSlippage}%.`
       const { dismiss } = notifyNotification(notifyMessage, 'pending')
       const resp = await fetchStepSwap(actionActiveKey, curve, poolData, formValues, maxSlippage)
+      const txHash = handleSubmitResp(activeKey, isSubscribed, curve, dismiss, resp, setTxInfoBar)
 
-      if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey) {
-        setTxInfoBar(
-          <TxInfoBar
-            description={`Swapped ${fromAmount} ${fromToken}.`}
-            txHash={networks[curve.chainId].scanTxPath(resp.hash)}
-            onClose={() => {
-              updateFormValues({}, null, null)
-            }}
-          />
-        )
-      }
-      if (typeof dismiss === 'function') dismiss()
+      if (!txHash) return
+
+      setTxInfoBar(<TxInfoBar description={t`Transaction completed.`} txHash={txHash} />)
     },
-    [activeKey, fetchStepSwap, notifyNotification, updateFormValues]
+    [activeKey, fetchStepSwap, notifyNotification]
   )
 
   const getSteps = useCallback(

apps/main/src/components/PagePool/Withdraw/components/FormClaim.tsx

@@ -10,7 +10,7 @@ import styled from 'styled-components'
 import { DEFAULT_FORM_STATUS, getClaimText } from '@/components/PagePool/Withdraw/utils'
 import { getStepStatus } from '@/ui/Stepper/helpers'
 import { formatNumber } from '@/ui/utils'
-import networks from '@/networks'
+import { handleSubmitResp } from '@/utils/utilsForm'
 import useStore from '@/store/useStore'
 
 import AlertBox from '@/ui/AlertBox'
@@ -64,15 +64,11 @@ const FormClaim = ({ curve, poolData, poolDataCacheOrApi, routerParams, seed, us
       const notifyMessage = getClaimText(formValues, formStatus, 'notify', rewardsNeedNudging)
       const { dismiss } = notifyNotification(notifyMessage, 'pending')
       const resp = await fetchStepClaim(activeKey, curve, poolData)
+      const txHash = handleSubmitResp(activeKey, isSubscribed, curve, dismiss, resp, setTxInfoBar)
 
-      if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey) {
-        const claimedLabel = formStatus.isClaimCrv
-          ? 'CRV'
-          : `${formValues.claimableRewards.map((r) => r.symbol).join(', ')} rewards`
-        const TxDescription = `Claimed ${claimedLabel}`
-        setTxInfoBar(<TxInfoBar description={TxDescription} txHash={networks[curve.chainId].scanTxPath(resp.hash)} />)
-      }
-      if (typeof dismiss === 'function') dismiss()
+      if (!txHash) return
+
+      setTxInfoBar(<TxInfoBar description={t`Transaction completed.`} txHash={txHash} />)
     },
     [fetchStepClaim, notifyNotification]
   )

apps/main/src/components/PagePool/Withdraw/components/FormUnstake.tsx

@@ -8,7 +8,7 @@ import { t } from '@lingui/macro'
 import { DEFAULT_ESTIMATED_GAS } from '@/components/PagePool'
 import { getStepStatus } from '@/ui/Stepper/helpers'
 import { formatNumber } from '@/ui/utils'
-import networks from '@/networks'
+import { handleSubmitResp } from '@/utils/utilsForm'
 import useStore from '@/store/useStore'
 
 import AlertFormError from '@/components/AlertFormError'
@@ -51,12 +51,11 @@ const FormUnstake = ({ curve, poolData, poolDataCacheOrApi, routerParams, seed,
       const notifyMessage = t`Please confirm unstaking of ${formValues.stakedLpToken} LP Tokens`
       const { dismiss } = notifyNotification(notifyMessage, 'pending')
       const resp = await fetchStepUnstake(activeKey, curve, poolData, formValues)
+      const txHash = handleSubmitResp(activeKey, isSubscribed, curve, dismiss, resp, setTxInfoBar)
 
-      if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey) {
-        const TxDescription = t`Unstaked ${formValues.stakedLpToken} LP Tokens`
-        setTxInfoBar(<TxInfoBar description={TxDescription} txHash={networks[curve.chainId].scanTxPath(resp.hash)} />)
-      }
-      if (typeof dismiss === 'function') dismiss()
+      if (!txHash) return
+
+      setTxInfoBar(<TxInfoBar description={t`Transaction completed.`} txHash={txHash} />)
     },
     [fetchStepUnstake, notifyNotification]
   )

apps/main/src/components/PagePool/Withdraw/components/FormWithdraw.tsx

@@ -11,6 +11,7 @@ import styled, { css } from 'styled-components'
 
 import { getActiveStep, getStepStatus } from '@/ui/Stepper/helpers'
 import { amountsDescription } from '@/components/PagePool/utils'
+import { handleSubmitResp } from '@/utils/utilsForm'
 import { mediaQueries } from '@/ui/utils/responsive'
 import { resetFormAmounts } from '@/components/PagePool/Withdraw/utils'
 import { formatNumber } from '@/ui/utils'
@@ -101,16 +102,14 @@ const FormWithdraw = ({
 
   const handleWithdrawClick = useCallback(
     async (activeKey: string, curve: CurveApi, poolData: PoolData, formValues: FormValues, maxSlippage: string) => {
-      const tokenText = amountsDescription(formValues.amounts)
       const notifyMessage = t`Please confirm withdrawal of ${formValues.lpToken} LP Tokens at max ${maxSlippage}% slippage.`
       const { dismiss } = notifyNotification(notifyMessage, 'pending')
       const resp = await fetchStepWithdraw(activeKey, curve, poolData, formValues, maxSlippage)
+      const txHash = handleSubmitResp(activeKey, isSubscribed, curve, dismiss, resp, setTxInfoBar)
 
-      if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey) {
-        const TxDescription = t`Withdrew ${formValues.lpToken} LP Tokens for ${tokenText}`
-        setTxInfoBar(<TxInfoBar description={TxDescription} txHash={networks[curve.chainId].scanTxPath(resp.hash)} />)
-      }
-      if (typeof dismiss === 'function') dismiss()
+      if (!txHash) return
+
+      setTxInfoBar(<TxInfoBar description={t`Transaction completed.`} txHash={txHash} />)
     },
     [fetchStepWithdraw, notifyNotification]
   )

apps/main/src/components/PageRouterSwap/index.tsx

@@ -13,6 +13,7 @@ import { getActiveStep, getStepStatus } from '@/ui/Stepper/helpers'
 import { getTokensMapperStr } from '@/store/createTokensSlice'
 import { getTokensObjList } from '@/store/createQuickSwapSlice'
 import { getChainSignerActiveKey } from '@/utils'
+import { handleSubmitResp } from '@/utils/utilsForm'
 import networks from '@/networks'
 import usePageVisibleInterval from '@/hooks/usePageVisibleInterval'
 import useSelectToList from '@/components/PageRouterSwap/components/useSelectToList'
@@ -161,23 +162,15 @@ const QuickSwap = ({
       } ${toToken} at max slippage ${maxSlippage}%.`
       const { dismiss } = notifyNotification(`Please confirm ${notifyMessage}`, 'pending')
       setTxInfoBar(<AlertBox alertType="info">Pending {notifyMessage}</AlertBox>)
-
       const resp = await fetchStepSwap(actionActiveKey, curve, formValues, searchedParams, maxSlippage)
+      const txHash = handleSubmitResp(activeKey, isSubscribed, curve, dismiss, resp, setTxInfoBar)
 
-      if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey && !resp.error) {
-        const txMessage = t`Transaction complete. Received ${resp.swappedAmount} ${toToken}.`
-        setTxInfoBar(
-          <TxInfoBar
-            description={txMessage}
-            txHash={networks[chainId].scanTxPath(resp.hash)}
-            onClose={() => updateFormValues({}, false, '', true)}
-          />
-        )
-      }
-      if (resp?.error) setTxInfoBar(null)
-      if (typeof dismiss === 'function') dismiss()
+      if (!txHash) return
+
+      const txMessage = t`Transaction completed. Received ${resp?.swappedAmount ?? ''} ${toToken}.`
+      setTxInfoBar(<TxInfoBar description={txMessage} txHash={txHash} />)
     },
-    [activeKey, chainId, fetchStepSwap, notifyNotification, updateFormValues]
+    [activeKey, fetchStepSwap, notifyNotification]
   )
 
   const getSteps = useCallback(

apps/main/src/utils/utilsForm.ts

@@ -0,0 +1,24 @@
+import React from 'react'
+import networks from '@/networks'
+
+export function handleSubmitResp(
+  activeKey: string,
+  isSubscribed: React.MutableRefObject<boolean>,
+  curve: CurveApi,
+  dismiss: () => void,
+  resp: FnStepResponse | undefined,
+  setTxInfoBar: React.Dispatch<React.SetStateAction<React.ReactNode>>
+) {
+  if (!isSubscribed.current) return
+
+  if (typeof dismiss === 'function') dismiss()
+
+  if (resp?.error) {
+    setTxInfoBar(null)
+    return
+  }
+
+  if (!resp || !resp.hash || resp?.activeKey !== activeKey) return
+
+  return networks[curve.chainId].scanTxPath(resp.hash)
+}