From aea2cfa56667a0e5e2c1c4c110a9482a5c4b54f7 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Mon, 3 Oct 2022 15:58:47 +0300 Subject: [PATCH] used a new hook and removed the modal from every place it was called --- .../empty/AddLiquidityEmptyCTA.tsx | 7 +- .../single/AddLiquiditySingle.tsx | 16 +- .../earningsTable/menu/V3EarningTableMenu.tsx | 9 +- .../v3/holdings/V3HoldingsItemUnstaked.tsx | 9 +- .../v3/initWithdraw/step1/V3WithdrawStep1.tsx | 3 +- .../v3/initWithdraw/step3/V3WithdrawStep3.tsx | 15 +- .../initWithdraw/step3/useV3WithdrawStep3.ts | 9 +- .../confirm/useV3WithdrawConfirm.ts | 9 +- src/elements/swapLimit/SwapLimit.tsx | 12 +- src/elements/trade/TradeWidget.tsx | 1 - src/elements/trade/useTrade.ts | 17 +- src/hooks/useApproval.tsx | 164 ++++++++++++++++++ src/modals/ApproveModal.tsx | 151 +--------------- src/modals/DepositV3Modal.tsx | 9 +- src/modals/V3ExternalHoldingsModal.tsx | 8 +- src/modals/V3ManageProgramsModal.tsx | 9 +- src/modals/V3WithdrawConfirmModal.tsx | 3 - src/modals/VbntModal.tsx | 7 +- src/modals/index.tsx | 2 + 19 files changed, 232 insertions(+), 228 deletions(-) create mode 100644 src/hooks/useApproval.tsx diff --git a/src/elements/earn/pools/addLiquidity/empty/AddLiquidityEmptyCTA.tsx b/src/elements/earn/pools/addLiquidity/empty/AddLiquidityEmptyCTA.tsx index 0d210e786..4597ee4ba 100644 --- a/src/elements/earn/pools/addLiquidity/empty/AddLiquidityEmptyCTA.tsx +++ b/src/elements/earn/pools/addLiquidity/empty/AddLiquidityEmptyCTA.tsx @@ -1,5 +1,4 @@ import { useDispatch } from 'react-redux'; -import { useApproveModal } from 'hooks/useApproveModal'; import { Token } from 'services/observables/tokens'; import { addLiquidity } from 'services/web3/liquidity/liquidity'; import { @@ -14,6 +13,7 @@ import { useAppSelector } from 'store'; import { Pool } from 'services/observables/pools'; import { useNavigation } from 'hooks/useNavigation'; import { useWalletConnect } from 'elements/walletConnect/useWalletConnect'; +import { useApproval } from 'hooks/useApproval'; interface Props { pool: Pool; @@ -83,7 +83,7 @@ export const AddLiquidityEmptyCTA = ({ goToPage, ]); - const [onStart, ModalApprove] = useApproveModal( + const startApprove = useApproval( [ { amount: amountBnt, token: bnt }, { amount: amountTkn, token: tkn }, @@ -121,7 +121,7 @@ export const AddLiquidityEmptyCTA = ({ if (!account) { handleWalletButtonClick(); } else { - onStart(); + startApprove(); } }; @@ -136,7 +136,6 @@ export const AddLiquidityEmptyCTA = ({ > {btn.label} - {ModalApprove} ); }; diff --git a/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx b/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx index a79ff405c..987b31927 100644 --- a/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx +++ b/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx @@ -6,7 +6,6 @@ import { AddLiquiditySingleSpaceAvailable } from 'elements/earn/pools/addLiquidi import { useAppSelector } from 'store'; import { AddLiquiditySingleAmount } from 'elements/earn/pools/addLiquidity/single/AddLiquiditySingleAmount'; import { useCallback, useState } from 'react'; -import { useApproveModal } from 'hooks/useApproveModal'; import { AddLiquiditySingleCTA } from 'elements/earn/pools/addLiquidity/single/AddLiquiditySingleCTA'; import { useDispatch } from 'react-redux'; import { prettifyNumber } from 'utils/helperFunctions'; @@ -31,6 +30,7 @@ import { useNavigation } from 'hooks/useNavigation'; import { fetchProtectedPositions } from 'services/web3/protection/positions'; import { setProtectedPositions } from 'store/liquidity/liquidity'; import { Events } from 'services/api/googleTagManager'; +import { useApproval } from 'hooks/useApproval'; interface Props { pool: Pool; @@ -113,7 +113,7 @@ export const AddLiquiditySingle = ({ pool }: Props) => { ); }; - const [onStart, ModalApprove] = useApproveModal( + const startApprove = useApproval( [{ amount, token: selectedToken }], addV2Protection, ApprovalContract.LiquidityProtection, @@ -165,8 +165,15 @@ export const AddLiquiditySingle = ({ pool }: Props) => { fiatToggle ); sendLiquidityEvent(Events.click); - onStart(); - }, [amount, amountUsd, fiatToggle, onStart, pool.name, selectedToken.symbol]); + startApprove(); + }, [ + amount, + amountUsd, + fiatToggle, + startApprove, + pool.name, + selectedToken.symbol, + ]); if (!tkn) { goToPage.notFound(); @@ -212,7 +219,6 @@ export const AddLiquiditySingle = ({ pool }: Props) => { errorMsg={handleError()} isBNTSelected={isBNTSelected} /> - {ModalApprove} ); }; diff --git a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx index 345d7e911..898c448e5 100644 --- a/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx +++ b/src/elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenu.tsx @@ -5,7 +5,6 @@ import { usePopper } from 'react-popper'; import { V3EarningsTableMenuContent } from 'elements/earn/portfolio/v3/earningsTable/menu/V3EarningTableMenuContent'; import { Placement } from '@popperjs/core'; import { Holding } from 'store/portfolio/v3Portfolio.types'; -import { useApproveModal } from 'hooks/useApproveModal'; import { ContractsApi } from 'services/web3/v3/contractsApi'; import { expandToken } from 'utils/formulas'; import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; @@ -16,6 +15,7 @@ import { rejectNotification, } from 'services/notifications/notifications'; import { ErrorCode } from 'services/web3/types'; +import { useApproval } from 'hooks/useApproval'; export type EarningTableMenuState = 'main' | 'bonus' | 'rate'; @@ -74,7 +74,7 @@ export const V3EarningTableMenu = memo( } }; - const [onStart, ApproveModal] = useApproveModal( + const startApprove = useApproval( [ { amount: holding.poolTokenBalance, @@ -92,12 +92,11 @@ export const V3EarningTableMenu = memo( const onStartJoin = useCallback(() => { setTxJoinBusy(true); - onStart(); - }, [onStart]); + startApprove(); + }, [startApprove]); return ( <> - {ApproveModal} {({ open }) => ( <> diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx index 44a9ea0d7..56f50e220 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingsItemUnstaked.tsx @@ -12,11 +12,11 @@ import { } from 'services/notifications/notifications'; import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; import { ErrorCode } from 'services/web3/types'; -import { useApproveModal } from 'hooks/useApproveModal'; import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { PopoverV3 } from 'components/popover/PopoverV3'; import { useModal } from 'hooks/useModal'; import { ModalNames } from 'modals'; +import { useApproval } from 'hooks/useApproval'; export const V3HoldingsItemUnstaked = ({ holding }: { holding: Holding }) => { const { pool } = holding; @@ -58,7 +58,7 @@ export const V3HoldingsItemUnstaked = ({ holding }: { holding: Holding }) => { } }; - const [onStart, ApproveModal] = useApproveModal( + const startApprove = useApproval( [ { amount: holding.poolTokenBalance, @@ -75,8 +75,8 @@ export const V3HoldingsItemUnstaked = ({ holding }: { holding: Holding }) => { const onStartJoin = useCallback(() => { setTxJoinBusy(true); - onStart(); - }, [onStart]); + startApprove(); + }, [startApprove]); return ( <> @@ -131,7 +131,6 @@ export const V3HoldingsItemUnstaked = ({ holding }: { holding: Holding }) => { )} - {ApproveModal} ); }; diff --git a/src/elements/earn/portfolio/v3/initWithdraw/step1/V3WithdrawStep1.tsx b/src/elements/earn/portfolio/v3/initWithdraw/step1/V3WithdrawStep1.tsx index 3e2b477b5..1096ddc72 100644 --- a/src/elements/earn/portfolio/v3/initWithdraw/step1/V3WithdrawStep1.tsx +++ b/src/elements/earn/portfolio/v3/initWithdraw/step1/V3WithdrawStep1.tsx @@ -111,7 +111,7 @@ const V3WithdrawStep1 = ({ const [isConfirmed, setIsConfirmed] = useState(false); - const { handleButtonClick, ModalApprove, txBusy } = useV3WithdrawStep3({ + const { handleButtonClick, txBusy } = useV3WithdrawStep3({ holding, amount, setStep, @@ -158,7 +158,6 @@ const V3WithdrawStep1 = ({ return (
- {ModalApprove}

How much {token.symbol} do you want to withdraw?

diff --git a/src/elements/earn/portfolio/v3/initWithdraw/step3/V3WithdrawStep3.tsx b/src/elements/earn/portfolio/v3/initWithdraw/step3/V3WithdrawStep3.tsx index 8e375a1c9..2e0a3dee3 100644 --- a/src/elements/earn/portfolio/v3/initWithdraw/step3/V3WithdrawStep3.tsx +++ b/src/elements/earn/portfolio/v3/initWithdraw/step3/V3WithdrawStep3.tsx @@ -22,14 +22,12 @@ const V3WithdrawStep3 = ({ isFiat, setRequestId, }: Props) => { - const { token, handleButtonClick, ModalApprove, txBusy } = useV3WithdrawStep3( - { - holding, - amount, - setStep, - setRequestId, - } - ); + const { token, handleButtonClick, txBusy } = useV3WithdrawStep3({ + holding, + amount, + setStep, + setRequestId, + }); return ( <> @@ -58,7 +56,6 @@ const V3WithdrawStep3 = ({
- {ModalApprove} ); }; diff --git a/src/elements/earn/portfolio/v3/initWithdraw/step3/useV3WithdrawStep3.ts b/src/elements/earn/portfolio/v3/initWithdraw/step3/useV3WithdrawStep3.ts index d8cb93e70..ff61f5a93 100644 --- a/src/elements/earn/portfolio/v3/initWithdraw/step3/useV3WithdrawStep3.ts +++ b/src/elements/earn/portfolio/v3/initWithdraw/step3/useV3WithdrawStep3.ts @@ -1,5 +1,5 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { useApproveModal } from 'hooks/useApproveModal'; +import { useApproval } from 'hooks/useApproval'; import { ContractsApi } from 'services/web3/v3/contractsApi'; import { Holding } from 'store/portfolio/v3Portfolio.types'; import BigNumber from 'bignumber.js'; @@ -157,7 +157,7 @@ export const useV3WithdrawStep3 = ({ if (initiatedWithdraw.current) setStep(4); }, [withdrawalRequests, setStep]); - const [onStart, ModalApprove] = useApproveModal( + const startApprove = useApproval( approveTokens, (approvalHash?: string) => initWithdraw(approvalHash), ContractsApi.BancorNetwork.contractAddress, @@ -181,13 +181,12 @@ export const useV3WithdrawStep3 = ({ return; } hasStarted.current = true; - onStart(); - }, [onStart, poolTokenAmountWei]); + startApprove(); + }, [startApprove, poolTokenAmountWei]); return { token: reserveToken, handleButtonClick, - ModalApprove, txBusy, }; }; diff --git a/src/elements/earn/portfolio/v3/pendingWithdraw/confirm/useV3WithdrawConfirm.ts b/src/elements/earn/portfolio/v3/pendingWithdraw/confirm/useV3WithdrawConfirm.ts index ed765bf0d..a9c3488b8 100644 --- a/src/elements/earn/portfolio/v3/pendingWithdraw/confirm/useV3WithdrawConfirm.ts +++ b/src/elements/earn/portfolio/v3/pendingWithdraw/confirm/useV3WithdrawConfirm.ts @@ -7,7 +7,7 @@ import BigNumber from 'bignumber.js'; import useAsyncEffect from 'use-async-effect'; import { fetchWithdrawalRequestOutputBreakdown } from 'services/web3/v3/portfolio/withdraw'; import { wait } from 'utils/pureFunctions'; -import { useApproveModal } from 'hooks/useApproveModal'; +import { useApproval } from 'hooks/useApproval'; import { ContractsApi } from 'services/web3/v3/contractsApi'; import { WithdrawalRequest } from 'store/portfolio/v3Portfolio.types'; import { @@ -176,7 +176,7 @@ export const useV3WithdrawConfirm = ({ return tokensToApprove; }, [govToken?.address, govToken?.symbol, poolTokenAmount, token]); - const [onStart, ModalApprove] = useApproveModal( + const startApprove = useApproval( approveTokens, (approvalHash?: string) => withdraw(approvalHash), ContractsApi.BancorNetwork.contractAddress, @@ -204,9 +204,9 @@ export const useV3WithdrawConfirm = ({ }); sendWithdrawACEvent(WithdrawACEvent.ApproveClick); setTxBusy(true); - onStart(); + startApprove(); }, [ - onStart, + startApprove, pool.name, withdrawRequest.pool.reserveToken.usdPrice, withdrawRequest.reserveTokenAmount, @@ -220,7 +220,6 @@ export const useV3WithdrawConfirm = ({ return { onModalClose, - ModalApprove, token, withdrawAmounts, missingGovTokenBalance, diff --git a/src/elements/swapLimit/SwapLimit.tsx b/src/elements/swapLimit/SwapLimit.tsx index 310c3a01c..8b2360a6e 100644 --- a/src/elements/swapLimit/SwapLimit.tsx +++ b/src/elements/swapLimit/SwapLimit.tsx @@ -21,7 +21,7 @@ import { } from 'components/button/Button'; import useAsyncEffect from 'use-async-effect'; import { useWalletConnect } from 'elements/walletConnect/useWalletConnect'; -import { useApproveModal } from 'hooks/useApproveModal'; +import { useApproval } from 'hooks/useApproval'; import { depositETHNotification, rejectNotification, @@ -288,7 +288,7 @@ export const SwapLimit = ({ try { const txHash = await depositWeth(fromAmount); depositETHNotification(dispatch, fromAmount, txHash); - approveWETH(); + startWETHApprove(); } catch (e: any) { if (e.code === ErrorCode.DeniedTx) sendConversionEvent( @@ -359,13 +359,13 @@ export const SwapLimit = ({ return 'Trade'; }; - const [onStart, ModalApprove] = useApproveModal( + const startApprove = useApproval( [{ amount: fromAmount, token: fromToken }], handleSwap, ApprovalContract.ExchangeProxy ); - const [approveWETH, ModalApproveWETH] = useApproveModal( + const startWETHApprove = useApproval( [ { amount: fromAmount, @@ -543,8 +543,6 @@ export const SwapLimit = ({ )} - {ModalApprove} - {ModalApproveWETH} - {ApproveModal} {!isBNT && } diff --git a/src/modals/V3ExternalHoldingsModal.tsx b/src/modals/V3ExternalHoldingsModal.tsx index 006194c0b..f949c3391 100644 --- a/src/modals/V3ExternalHoldingsModal.tsx +++ b/src/modals/V3ExternalHoldingsModal.tsx @@ -7,7 +7,7 @@ import { useAppSelector } from 'store'; import { useDispatch } from 'react-redux'; import { Button, ButtonSize } from 'components/button/Button'; import { TokenBalance } from 'components/tokenBalance/TokenBalance'; -import { useApproveModal } from 'hooks/useApproveModal'; +import { useApproval } from 'hooks/useApproval'; import { mockToken } from 'utils/mocked'; import { getMigrateFnByAmmProvider } from 'elements/earn/portfolio/v3/externalHoldings/externalHoldings'; import { shrinkToken } from 'utils/formulas'; @@ -90,7 +90,7 @@ export const V3ExternalHoldingsModal = () => { } }; - const [onStart, ApproveModal] = useApproveModal( + const startApprove = useApproval( tokensToApprove, migrate, ContractsApi.BancorPortal.contractAddress @@ -101,7 +101,7 @@ export const V3ExternalHoldingsModal = () => { const handleButtonClick = async () => { setTxBusy(true); - onStart(); + startApprove(); }; return ( @@ -146,8 +146,6 @@ export const V3ExternalHoldingsModal = () => { {lockDurationInDays} day cooldown • {withdrawalFeeInPercent}% withdrawal fee

- - {ApproveModal} ); diff --git a/src/modals/V3ManageProgramsModal.tsx b/src/modals/V3ManageProgramsModal.tsx index 855ec6693..ecc97134e 100644 --- a/src/modals/V3ManageProgramsModal.tsx +++ b/src/modals/V3ManageProgramsModal.tsx @@ -19,7 +19,7 @@ import { useTknFiatInput } from 'elements/trade/useTknFiatInput'; import BigNumber from 'bignumber.js'; import dayjs from 'dayjs'; import { TradeWidgetInput } from 'elements/trade/TradeWidgetInput'; -import { useApproveModal } from 'hooks/useApproveModal'; +import { useApproval } from 'hooks/useApproval'; import { Modal, ModalNames } from 'modals'; import { useModal } from 'hooks/useModal'; import { getIsModalOpen, getModalData } from 'store/modals/modals'; @@ -128,7 +128,7 @@ export const V3ManageProgramsModal = () => { } }; - const [onStart, ApproveModal] = useApproveModal( + const startApprove = useApproval( holding ? [ { @@ -147,8 +147,8 @@ export const V3ManageProgramsModal = () => { const onStartJoin = useCallback(() => { setTxJoinBusy(true); - onStart(); - }, [onStart]); + startApprove(); + }, [startApprove]); if (!holding) return null; @@ -227,7 +227,6 @@ export const V3ManageProgramsModal = () => { > Add bn{holding.pool.reserveToken.symbol} to rewards program - {ApproveModal} ) : (
diff --git a/src/modals/V3WithdrawConfirmModal.tsx b/src/modals/V3WithdrawConfirmModal.tsx index 35a0f9a49..9ef4112ed 100644 --- a/src/modals/V3WithdrawConfirmModal.tsx +++ b/src/modals/V3WithdrawConfirmModal.tsx @@ -59,7 +59,6 @@ export const V3WithdrawConfirmContent = ({ openCancelModal: (req: WithdrawalRequest) => void; }) => { const { - ModalApprove, token, loadingAmounts, withdrawAmounts, @@ -92,8 +91,6 @@ export const V3WithdrawConfirmContent = ({ return (
- {ModalApprove} - { ); }; - const [checkApprove, ModalApprove] = useApproveModal( + const startApprove = useApproval( props ? [{ amount: amount, token: props.token }] : [], handleStakeUnstake, ApprovalContract.Governance, @@ -176,7 +176,7 @@ export const VbntModal = () => { onClick={() => { setAmount(''); popModal(); - if (stake) checkApprove(); + if (stake) startApprove(); else handleStakeUnstake(); }} disabled={stakeDisabled} @@ -188,7 +188,6 @@ export const VbntModal = () => {
- {ModalApprove} ); }; diff --git a/src/modals/index.tsx b/src/modals/index.tsx index 84208abd6..2a129d299 100644 --- a/src/modals/index.tsx +++ b/src/modals/index.tsx @@ -21,6 +21,7 @@ import { V3ManageProgramsModal } from './V3ManageProgramsModal'; import { DepositV3Modal } from './DepositV3Modal'; import { SearchableTokenListModal } from './SearchableTokenListModal'; import { WithdrawLiquidityModal } from './WithdrawLiquidityModal'; +import { ApproveModal } from './ApproveModal'; export enum ModalNames { ApproveModal, @@ -47,6 +48,7 @@ export enum ModalNames { export const Modals = () => { return ( <> +