fix handling the tx array

lint fix

packages/ui/app/_components/dialogs/manage/BorrowTab.tsx

@@ -1,21 +1,23 @@
+import { useEffect, useMemo } from 'react';
+
 import { Info } from 'lucide-react';
 import { formatUnits } from 'viem';
 
 import { Alert, AlertDescription } from '@ui/components/ui/alert';
 import { Button } from '@ui/components/ui/button';
 import {
   HFPStatus,
+  TransactionType,
   useManageDialogContext
 } from '@ui/context/ManageDialogContext';
 import { useBorrow } from '@ui/hooks/market/useBorrow';
+import { useHealth } from '@ui/hooks/market/useHealth';
 
 import Amount from './Amount';
 import StatusAlerts from './StatusAlerts';
 import TransactionStepsHandler from './TransactionStepsHandler';
 import ResultHandler from '../../ResultHandler';
 import MemoizedUtilizationStats from '../../UtilizationStats';
-import { useHealth } from '@ui/hooks/market/useHealth';
-import { useEffect } from 'react';
 
 interface BorrowTabProps {
   maxAmount: bigint;
@@ -31,13 +33,13 @@ interface BorrowTabProps {
 const BorrowTab = ({ maxAmount, isLoadingMax, totalStats }: BorrowTabProps) => {
   const {
     selectedMarketData,
-    transactionSteps,
     resetTransactionSteps,
     chainId,
     isLoadingUpdatedAssets,
     updatedValues,
     comptrollerAddress,
-    setPredictionAmount
+    setPredictionAmount,
+    getStepsForTypes
   } = useManageDialogContext();
 
   const {
@@ -77,8 +79,13 @@ const BorrowTab = ({ maxAmount, isLoadingMax, totalStats }: BorrowTabProps) => {
 
   useEffect(() => {
     setPredictionAmount(amountAsBInt);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [amountAsBInt]);
 
+  const transactionSteps = useMemo(() => {
+    return getStepsForTypes(TransactionType.BORROW);
+  }, [getStepsForTypes]);
+
   return (
     <div className="space-y-4 pt-4">
       <Amount

packages/ui/app/_components/dialogs/manage/RepayTab.tsx

@@ -1,19 +1,21 @@
+import { useEffect, useMemo } from 'react';
+
 import { formatUnits } from 'viem';
 
 import { Button } from '@ui/components/ui/button';
 import {
   HFPStatus,
+  TransactionType,
   useManageDialogContext
 } from '@ui/context/ManageDialogContext';
+import { useHealth } from '@ui/hooks/market/useHealth';
 import { useRepay } from '@ui/hooks/market/useRepay';
 
 import Amount from './Amount';
 import StatusAlerts from './StatusAlerts';
 import TransactionStepsHandler from './TransactionStepsHandler';
 import ResultHandler from '../../ResultHandler';
 import MemoizedUtilizationStats from '../../UtilizationStats';
-import { useHealth } from '@ui/hooks/market/useHealth';
-import { useEffect } from 'react';
 
 interface RepayTabProps {
   maxAmount: bigint;
@@ -29,13 +31,13 @@ interface RepayTabProps {
 const RepayTab = ({ maxAmount, isLoadingMax, totalStats }: RepayTabProps) => {
   const {
     selectedMarketData,
-    transactionSteps,
     resetTransactionSteps,
     chainId,
     isLoadingUpdatedAssets,
     updatedValues,
     comptrollerAddress,
-    setPredictionAmount
+    setPredictionAmount,
+    getStepsForTypes
   } = useManageDialogContext();
 
   const {
@@ -65,8 +67,13 @@ const RepayTab = ({ maxAmount, isLoadingMax, totalStats }: RepayTabProps) => {
 
   useEffect(() => {
     setPredictionAmount(amountAsBInt);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [amountAsBInt]);
 
+  const transactionSteps = useMemo(() => {
+    return getStepsForTypes(TransactionType.REPAY);
+  }, [getStepsForTypes]);
+
   return (
     <div className="space-y-4 pt-4">
       <Amount

packages/ui/app/_components/dialogs/manage/SupplyTab.tsx

@@ -9,7 +9,10 @@ import {
   TooltipContent,
   TooltipTrigger
 } from '@ui/components/ui/tooltip';
-import { useManageDialogContext } from '@ui/context/ManageDialogContext';
+import {
+  TransactionType,
+  useManageDialogContext
+} from '@ui/context/ManageDialogContext';
 import { useCollateralToggle } from '@ui/hooks/market/useCollateralToggle';
 import { useSupply } from '@ui/hooks/market/useSupply';
 
@@ -45,7 +48,8 @@ const SupplyTab = ({
     updatedValues,
     isLoadingUpdatedAssets,
     refetchUsedQueries,
-    setPredictionAmount
+    setPredictionAmount,
+    getStepsForTypes
   } = useManageDialogContext();
 
   const {
@@ -77,13 +81,12 @@ const SupplyTab = ({
 
   useEffect(() => {
     setPredictionAmount(amountAsBInt);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [amountAsBInt]);
 
-  console.log('collateralTxSteps', collateralTxSteps);
-  console.log('supplyTxSteps', supplyTxSteps);
   const combinedTransactionSteps = useMemo(() => {
-    return [...supplyTxSteps, ...collateralTxSteps];
-  }, [supplyTxSteps, collateralTxSteps]);
+    return getStepsForTypes(TransactionType.SUPPLY, TransactionType.COLLATERAL);
+  }, [getStepsForTypes]);
 
   const isDisabled = !amount || amountAsBInt === 0n;
   const hasActiveTransactions = combinedTransactionSteps.length > 0;

packages/ui/app/_components/dialogs/manage/WithdrawTab.tsx

@@ -1,19 +1,21 @@
+import { useEffect, useMemo } from 'react';
+
 import { formatUnits } from 'viem';
 
 import { Button } from '@ui/components/ui/button';
 import {
   HFPStatus,
+  TransactionType,
   useManageDialogContext
 } from '@ui/context/ManageDialogContext';
+import { useHealth } from '@ui/hooks/market/useHealth';
 import { useWithdraw } from '@ui/hooks/market/useWithdraw';
 
 import Amount from './Amount';
 import StatusAlerts from './StatusAlerts';
 import TransactionStepsHandler from './TransactionStepsHandler';
 import ResultHandler from '../../ResultHandler';
 import MemoizedUtilizationStats from '../../UtilizationStats';
-import { useHealth } from '@ui/hooks/market/useHealth';
-import { useEffect } from 'react';
 
 interface WithdrawTabProps {
   maxAmount: bigint;
@@ -33,13 +35,13 @@ const WithdrawTab = ({
 }: WithdrawTabProps) => {
   const {
     selectedMarketData,
-    transactionSteps,
     resetTransactionSteps,
     chainId,
     updatedValues,
     isLoadingUpdatedAssets,
     comptrollerAddress,
-    setPredictionAmount
+    setPredictionAmount,
+    getStepsForTypes // Add this from context
   } = useManageDialogContext();
 
   const {
@@ -77,8 +79,13 @@ const WithdrawTab = ({
 
   useEffect(() => {
     setPredictionAmount(amountAsBInt);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [amountAsBInt]);
 
+  const transactionSteps = useMemo(() => {
+    return getStepsForTypes(TransactionType.WITHDRAW);
+  }, [getStepsForTypes]);
+
   return (
     <div className="space-y-4 pt-4">
       <Amount

packages/ui/context/ManageDialogContext.tsx

@@ -37,6 +37,22 @@ export enum HFPStatus {
   WARNING = 'WARNING'
 }
 
+export enum TransactionType {
+  SUPPLY = 'SUPPLY',
+  COLLATERAL = 'COLLATERAL',
+  BORROW = 'BORROW',
+  REPAY = 'REPAY',
+  WITHDRAW = 'WITHDRAW'
+}
+
+interface TransactionStepsState {
+  [TransactionType.SUPPLY]: TransactionStep[];
+  [TransactionType.COLLATERAL]: TransactionStep[];
+  [TransactionType.BORROW]: TransactionStep[];
+  [TransactionType.REPAY]: TransactionStep[];
+  [TransactionType.WITHDRAW]: TransactionStep[];
+}
+
 interface ManageDialogContextType {
   active: ActiveTab;
   setActive: (tab: ActiveTab) => void;
@@ -59,16 +75,18 @@ interface ManageDialogContextType {
   };
   isLoadingUpdatedAssets: boolean;
   setPredictionAmount: (amount: bigint) => void;
-  transactionSteps: TransactionStep[];
-  addStepsForAction: (steps: TransactionStep[]) => void;
-  upsertTransactionStep: (
+  transactionSteps: TransactionStepsState;
+  addStepsForType: (type: TransactionType, steps: TransactionStep[]) => void;
+  upsertStepForType: (
+    type: TransactionType,
     update:
       | {
           index: number;
           transactionStep: TransactionStep;
         }
       | undefined
   ) => void;
+  getStepsForTypes: (...types: TransactionType[]) => TransactionStep[];
 }
 
 const formatBalance = (value: bigint | undefined, decimals: number): string => {
@@ -99,9 +117,14 @@ export const ManageDialogProvider: React.FC<{
     []
   );
   const [predictionAmount, setPredictionAmount] = useState<bigint>(0n);
-  const [transactionSteps, setTransactionSteps] = useState<TransactionStep[]>(
-    []
-  );
+  const [transactionSteps, setTransactionSteps] =
+    useState<TransactionStepsState>({
+      [TransactionType.SUPPLY]: [],
+      [TransactionType.COLLATERAL]: [],
+      [TransactionType.BORROW]: [],
+      [TransactionType.REPAY]: [],
+      [TransactionType.WITHDRAW]: []
+    });
 
   useEffect(() => {
     setCurrentFundOperation(operationMap[active]);
@@ -226,19 +249,23 @@ export const ManageDialogProvider: React.FC<{
     };
   }, [chainId, updatedAsset, selectedMarketData, updatedAssets, currentSdk]);
 
-  const upsertTransactionStep = useCallback(
+  const upsertStepForType = useCallback(
     (
+      type: TransactionType,
       updatedStep:
         | { index: number; transactionStep: TransactionStep }
         | undefined
     ) => {
       if (!updatedStep) {
-        setTransactionSteps([]);
+        setTransactionSteps((prev) => ({
+          ...prev,
+          [type]: []
+        }));
         return;
       }
 
-      setTransactionSteps((prevState) => {
-        const currentSteps = prevState.slice();
+      setTransactionSteps((prev) => {
+        const currentSteps = prev[type].slice();
         currentSteps[updatedStep.index] = {
           ...currentSteps[updatedStep.index],
           ...updatedStep.transactionStep
@@ -256,24 +283,42 @@ export const ManageDialogProvider: React.FC<{
           }
         }
 
-        return currentSteps;
+        return {
+          ...prev,
+          [type]: currentSteps
+        };
       });
     },
     []
   );
 
-  const addStepsForAction = useCallback(
-    (steps: TransactionStep[]) => {
+  const addStepsForType = useCallback(
+    (type: TransactionType, steps: TransactionStep[]) => {
       steps.forEach((step, i) =>
-        upsertTransactionStep({ index: i, transactionStep: step })
+        upsertStepForType(type, { index: i, transactionStep: step })
       );
     },
-    [upsertTransactionStep]
+    [upsertStepForType]
+  );
+
+  const getStepsForTypes = useCallback(
+    (...types: TransactionType[]) => {
+      return types.reduce<TransactionStep[]>((acc, type) => {
+        return [...acc, ...transactionSteps[type]];
+      }, []);
+    },
+    [transactionSteps]
   );
 
   const resetTransactionSteps = useCallback(() => {
     refetchUsedQueries();
-    setTransactionSteps([]); // Clear steps directly
+    setTransactionSteps({
+      [TransactionType.SUPPLY]: [],
+      [TransactionType.COLLATERAL]: [],
+      [TransactionType.BORROW]: [],
+      [TransactionType.REPAY]: [],
+      [TransactionType.WITHDRAW]: []
+    });
   }, [refetchUsedQueries]);
 
   return (
@@ -290,8 +335,9 @@ export const ManageDialogProvider: React.FC<{
         updatedValues,
         setPredictionAmount,
         transactionSteps,
-        addStepsForAction,
-        upsertTransactionStep
+        addStepsForType,
+        upsertStepForType,
+        getStepsForTypes
       }}
     >
       {children}