diff --git a/apps/main/src/components/PagePool/Deposit/components/FormDeposit.tsx b/apps/main/src/components/PagePool/Deposit/components/FormDeposit.tsx index abc9246de..c50c6ecdd 100644 --- a/apps/main/src/components/PagePool/Deposit/components/FormDeposit.tsx +++ b/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() - } - if (typeof dismiss === 'function') dismiss() + if (!txHash) return + + setTxInfoBar() }, [fetchStepDeposit, notifyNotification] ) diff --git a/apps/main/src/components/PagePool/Deposit/components/FormDepositStake.tsx b/apps/main/src/components/PagePool/Deposit/components/FormDepositStake.tsx index 6a40f4f53..3c5e3a129 100644 --- a/apps/main/src/components/PagePool/Deposit/components/FormDepositStake.tsx +++ b/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() - } - if (typeof dismiss === 'function') dismiss() + if (!txHash) return + + setTxInfoBar() }, [fetchStepDepositStake, notifyNotification] ) diff --git a/apps/main/src/components/PagePool/Deposit/components/FormStake.tsx b/apps/main/src/components/PagePool/Deposit/components/FormStake.tsx index 5d7a1e1a5..997167bd0 100644 --- a/apps/main/src/components/PagePool/Deposit/components/FormStake.tsx +++ b/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() - } - if (typeof dismiss === 'function') dismiss() + if (!txHash) return + + setTxInfoBar() }, [fetchStepStake, notifyNotification] ) diff --git a/apps/main/src/components/PagePool/Swap/index.tsx b/apps/main/src/components/PagePool/Swap/index.tsx index 024cb4730..aeea6eb91 100644 --- a/apps/main/src/components/PagePool/Swap/index.tsx +++ b/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( - { - updateFormValues({}, null, null) - }} - /> - ) - } - if (typeof dismiss === 'function') dismiss() + if (!txHash) return + + setTxInfoBar() }, - [activeKey, fetchStepSwap, notifyNotification, updateFormValues] + [activeKey, fetchStepSwap, notifyNotification] ) const getSteps = useCallback( diff --git a/apps/main/src/components/PagePool/Withdraw/components/FormClaim.tsx b/apps/main/src/components/PagePool/Withdraw/components/FormClaim.tsx index 43e0d7a93..249b47bfe 100644 --- a/apps/main/src/components/PagePool/Withdraw/components/FormClaim.tsx +++ b/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() - } - if (typeof dismiss === 'function') dismiss() + if (!txHash) return + + setTxInfoBar() }, [fetchStepClaim, notifyNotification] ) diff --git a/apps/main/src/components/PagePool/Withdraw/components/FormUnstake.tsx b/apps/main/src/components/PagePool/Withdraw/components/FormUnstake.tsx index eb8d2389e..b1779a0d9 100644 --- a/apps/main/src/components/PagePool/Withdraw/components/FormUnstake.tsx +++ b/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() - } - if (typeof dismiss === 'function') dismiss() + if (!txHash) return + + setTxInfoBar() }, [fetchStepUnstake, notifyNotification] ) diff --git a/apps/main/src/components/PagePool/Withdraw/components/FormWithdraw.tsx b/apps/main/src/components/PagePool/Withdraw/components/FormWithdraw.tsx index f76015a61..71241c4c2 100644 --- a/apps/main/src/components/PagePool/Withdraw/components/FormWithdraw.tsx +++ b/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() - } - if (typeof dismiss === 'function') dismiss() + if (!txHash) return + + setTxInfoBar() }, [fetchStepWithdraw, notifyNotification] ) diff --git a/apps/main/src/components/PageRouterSwap/index.tsx b/apps/main/src/components/PageRouterSwap/index.tsx index d10497b19..7abd15f64 100644 --- a/apps/main/src/components/PageRouterSwap/index.tsx +++ b/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(Pending {notifyMessage}) - 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( - 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() }, - [activeKey, chainId, fetchStepSwap, notifyNotification, updateFormValues] + [activeKey, fetchStepSwap, notifyNotification] ) const getSteps = useCallback( diff --git a/apps/main/src/utils/utilsForm.ts b/apps/main/src/utils/utilsForm.ts new file mode 100644 index 000000000..4da44c677 --- /dev/null +++ b/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, + curve: CurveApi, + dismiss: () => void, + resp: FnStepResponse | undefined, + setTxInfoBar: React.Dispatch> +) { + 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) +}