used a new hook and removed the modal from every place it was called

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}
       </Button>
-      {ModalApprove}
     </>
   );
 };

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}
     </Widget>
   );
 };

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}
         <Popover className="relative">
           {({ open }) => (
             <>

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 }) => {
           )}
         </div>
       </div>
-      {ApproveModal}
     </>
   );
 };

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 (
     <div className="w-full max-w-[460px]">
-      {ModalApprove}
       <h1 className="text-[36px] font-normal mb-30 leading-10">
         How much {token.symbol} do you want to withdraw?
       </h1>

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 = ({
           </Button>
         </div>
       </div>
-      {ModalApprove}
     </>
   );
 };

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,
   };
 };

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,

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 = ({
           )}
         </div>
 
-        {ModalApprove}
-        {ModalApproveWETH}
         <Button
           size={ButtonSize.Full}
           onClick={() => {
@@ -553,7 +551,7 @@ export const SwapLimit = ({
                 modalName: ModalNames.DepositETH,
                 data: { onConfirm: deposiEthWeth(), amount: fromAmount },
               });
-            else onStart();
+            else startApprove();
           }}
           disabled={isSwapDisabled()}
           className="disabled:bg-silver dark:disabled:bg-charcoal"

src/elements/trade/TradeWidget.tsx

@@ -47,7 +47,6 @@ export const TradeWidget = (props: Props) => {
 
         <TradeWidgetCTA {...trade} {...tradeWidget} />
       </div>
-      {trade.ApproveModal}
     </div>
   );
 };