From fee4fc237c86a96aef76aa50ed8263a4d1081bb5 Mon Sep 17 00:00:00 2001
From: vidvidvid <weetopol@gmail.com>
Date: Wed, 20 Nov 2024 10:29:33 +0100
Subject: [PATCH] fix loop/manage

---
 .../ui/app/_components/markets/ManageTabs.tsx |  15 +--
 packages/ui/app/_components/popup/page.tsx    | 124 ++++++------------
 packages/ui/app/market/page.tsx               |  87 ++++++++----
 3 files changed, 103 insertions(+), 123 deletions(-)

diff --git a/packages/ui/app/_components/markets/ManageTabs.tsx b/packages/ui/app/_components/markets/ManageTabs.tsx
index e787c745b..9e9277e70 100644
--- a/packages/ui/app/_components/markets/ManageTabs.tsx
+++ b/packages/ui/app/_components/markets/ManageTabs.tsx
@@ -38,7 +38,6 @@ interface BaseTabProps {
   };
   enableCollateral?: boolean;
   onCollateralToggle?: () => void;
-  loopPossible?: boolean;
   totalStats?: {
     capAmount: number;
     totalAmount: number;
@@ -111,8 +110,7 @@ export const SupplyTab = ({
   totalStats,
   setSwapWidgetOpen,
   enableCollateral,
-  onCollateralToggle,
-  loopPossible
+  onCollateralToggle
 }: SupplyTabProps) => {
   return (
     <div className="space-y-4">
@@ -123,17 +121,6 @@ export const SupplyTab = ({
         >
           Get {selectedMarketData.underlyingSymbol}
         </Button>
-        {loopPossible && (
-          <Button
-            className="text-xs uppercase"
-            variant="secondary"
-            onClick={() => {
-              /* Handle loop */
-            }}
-          >
-            Loop
-          </Button>
-        )}
       </div>
 
       <Amount
diff --git a/packages/ui/app/_components/popup/page.tsx b/packages/ui/app/_components/popup/page.tsx
index 4e92babdc..167895375 100644
--- a/packages/ui/app/_components/popup/page.tsx
+++ b/packages/ui/app/_components/popup/page.tsx
@@ -1,7 +1,5 @@
 'use client';
-/* eslint-disable @next/next/no-img-element */
-// import { useSearchParams } from 'next/navigation';
-import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { useEffect, useMemo, useReducer, useState } from 'react';
 
 import dynamic from 'next/dynamic';
 
@@ -35,7 +33,6 @@ import {
 } from '@ui/hooks/pools/useHealthFactor';
 import { useUsdPrice } from '@ui/hooks/useAllUsdPrices';
 import { useBorrowMinimum } from '@ui/hooks/useBorrowMinimum';
-import type { LoopMarketData } from '@ui/hooks/useLoopMarkets';
 import { useMaxBorrowAmount } from '@ui/hooks/useMaxBorrowAmount';
 import { useMaxRepayAmount } from '@ui/hooks/useMaxRepayAmount';
 import { useMaxSupplyAmount } from '@ui/hooks/useMaxSupplyAmount';
@@ -61,13 +58,17 @@ const SwapWidget = dynamic(() => import('../markets/SwapWidget'), {
 });
 
 export enum PopupMode {
-  SUPPLY = 1,
-  WITHDRAW,
-  BORROW,
-  REPAY,
-  LOOP
+  MANAGE = 1,
+  LOOP = 2
 }
 
+type ActiveTab = 'borrow' | 'repay' | 'supply' | 'withdraw';
+type FundOperation =
+  | FundOperationMode.BORROW
+  | FundOperationMode.REPAY
+  | FundOperationMode.SUPPLY
+  | FundOperationMode.WITHDRAW;
+
 export enum HFPStatus {
   CRITICAL = 'CRITICAL',
   NORMAL = 'NORMAL',
@@ -78,13 +79,10 @@ export enum HFPStatus {
 interface IPopup {
   closePopup: () => void;
   comptrollerAddress: Address;
-  loopMarkets?: LoopMarketData;
-  mode?: PopupMode;
   selectedMarketData: MarketData;
 }
+
 const Popup = ({
-  mode = PopupMode.SUPPLY,
-  loopMarkets,
   selectedMarketData,
   closePopup,
   comptrollerAddress
@@ -180,7 +178,22 @@ const Popup = ({
 
     return 0.0;
   }, [assetsSupplyAprData, selectedMarketData.cToken]);
-  const [active, setActive] = useState<PopupMode>(mode);
+  const [active, setActive] = useState<ActiveTab>('supply');
+  const operationMap: Record<ActiveTab, FundOperation> = {
+    supply: FundOperationMode.SUPPLY,
+    withdraw: FundOperationMode.WITHDRAW,
+    borrow: FundOperationMode.BORROW,
+    repay: FundOperationMode.REPAY
+  };
+
+  useEffect(() => {
+    setAmount('0');
+    setCurrentUtilizationPercentage(0);
+    upsertTransactionStep(undefined);
+    setCurrentFundOperation(operationMap[active]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active, upsertTransactionStep]);
+
   const [amount, setAmount] = useReducer(
     (_: string | undefined, value: string | undefined): string | undefined =>
       value,
@@ -209,13 +222,13 @@ const Popup = ({
     comptrollerAddress,
     address ?? ('' as Address),
     selectedMarketData.cToken,
-    active === PopupMode.WITHDRAW
+    active === 'withdraw'
       ? (amountAsBInt * BigInt(1e18)) / selectedMarketData.exchangeRate
       : parseUnits('0', selectedMarketData.underlyingDecimals),
-    active === PopupMode.BORROW
+    active === 'borrow'
       ? amountAsBInt
       : parseUnits('0', selectedMarketData.underlyingDecimals),
-    active === PopupMode.REPAY
+    active === 'repay'
       ? (amountAsBInt * BigInt(1e18)) / selectedMarketData.exchangeRate
       : parseUnits('0', selectedMarketData.underlyingDecimals)
   );
@@ -388,57 +401,43 @@ const Popup = ({
    */
   useEffect(() => {
     switch (active) {
-      case PopupMode.SUPPLY: {
+      case 'supply': {
         const div =
           Number(formatEther(amountAsBInt)) /
           (maxSupplyAmount?.bigNumber && maxSupplyAmount.number > 0
             ? Number(formatEther(maxSupplyAmount?.bigNumber))
             : 1);
         setCurrentUtilizationPercentage(Math.round(div * 100));
-
         break;
       }
 
-      case PopupMode.WITHDRAW: {
+      case 'withdraw': {
         const div =
           Number(formatEther(amountAsBInt)) /
           (maxWithdrawAmount && maxWithdrawAmount > 0n
             ? Number(formatEther(maxWithdrawAmount))
             : 1);
         setCurrentUtilizationPercentage(Math.round(div * 100));
-
         break;
       }
 
-      case PopupMode.BORROW: {
+      case 'borrow': {
         const div =
           Number(formatEther(amountAsBInt)) /
           (maxBorrowAmount?.bigNumber && maxBorrowAmount.number > 0
             ? Number(formatEther(maxBorrowAmount?.bigNumber))
             : 1);
         setCurrentUtilizationPercentage(Math.round(div * 100));
-        // setBorrow(
-        //   maxBorrowAmount?.bigNumber && maxBorrowAmount.number > 0
-        //     ? formatEther(maxBorrowAmount?.bigNumber)
-        //     : ''
-        // );
         break;
       }
 
-      case PopupMode.REPAY: {
+      case 'repay': {
         const div =
           Number(formatEther(amountAsBInt)) /
           (maxRepayAmount && maxRepayAmount > 0n
             ? Number(formatEther(maxRepayAmount))
             : 1);
         setCurrentUtilizationPercentage(Math.round(div * 100));
-
-        break;
-      }
-
-      case PopupMode.LOOP: {
-        setLoopOpen(true);
-
         break;
       }
     }
@@ -449,7 +448,6 @@ const Popup = ({
     maxRepayAmount,
     maxSupplyAmount,
     maxWithdrawAmount
-    // setBorrow
   ]);
 
   useEffect(() => {
@@ -458,23 +456,23 @@ const Popup = ({
     upsertTransactionStep(undefined);
 
     switch (active) {
-      case PopupMode.SUPPLY:
+      case 'supply':
         setCurrentFundOperation(FundOperationMode.SUPPLY);
         break;
 
-      case PopupMode.WITHDRAW:
+      case 'withdraw':
         setCurrentFundOperation(FundOperationMode.WITHDRAW);
         break;
 
-      case PopupMode.BORROW:
+      case 'borrow':
         setCurrentFundOperation(FundOperationMode.BORROW);
         break;
 
-      case PopupMode.REPAY:
+      case 'repay':
         setCurrentFundOperation(FundOperationMode.REPAY);
         break;
     }
-  }, [active, mode, upsertTransactionStep]);
+  }, [active, upsertTransactionStep]);
 
   const initiateCloseAnimation = () => setIsMounted(false);
 
@@ -1201,22 +1199,9 @@ const Popup = ({
           </div>
 
           <Tabs
-            defaultValue={active === PopupMode.SUPPLY ? 'supply' : 'borrow'}
+            defaultValue={active}
             onValueChange={(value) => {
-              switch (value) {
-                case 'supply':
-                  setActive(PopupMode.SUPPLY);
-                  break;
-                case 'withdraw':
-                  setActive(PopupMode.WITHDRAW);
-                  break;
-                case 'borrow':
-                  setActive(PopupMode.BORROW);
-                  break;
-                case 'repay':
-                  setActive(PopupMode.REPAY);
-                  break;
-              }
+              setActive(value as ActiveTab);
             }}
           >
             <TabsList className="grid w-full grid-cols-4">
@@ -1258,11 +1243,6 @@ const Popup = ({
                 setSwapWidgetOpen={setSwapWidgetOpen}
                 enableCollateral={enableCollateral}
                 onCollateralToggle={handleCollateralToggle}
-                loopPossible={
-                  loopMarkets
-                    ? loopMarkets[selectedMarketData.cToken].length > 0
-                    : false
-                }
               />
             </TabsContent>
 
@@ -1393,30 +1373,8 @@ const Popup = ({
         toToken={selectedMarketData.underlyingToken}
         onRouteExecutionCompleted={() => refetchMaxSupplyAmount()}
       />
-
-      <Loop
-        borrowableAssets={
-          loopMarkets ? loopMarkets[selectedMarketData.cToken] : []
-        }
-        closeLoop={() => {
-          setLoopOpen(false);
-          setActive(PopupMode.BORROW);
-        }}
-        comptrollerAddress={comptrollerAddress}
-        isOpen={loopOpen}
-        selectedCollateralAsset={selectedMarketData}
-      />
     </>
   );
 };
 
 export default Popup;
-
-/*mode should be of 
-supply consist of collateral , withdraw
- borrow ( borrow repay)
-manage collateral withdraw borrow repay - default
-*/
-
-/* <div className={``}></div>  <p className={``}></p>
-          <p className={``}></p>  colleteralT , borrowingT , lendingT , cAPR , lAPR , bAPR} */
diff --git a/packages/ui/app/market/page.tsx b/packages/ui/app/market/page.tsx
index a2dc88e7e..e645d1abf 100644
--- a/packages/ui/app/market/page.tsx
+++ b/packages/ui/app/market/page.tsx
@@ -1,7 +1,7 @@
 // Market.tsx
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
@@ -11,10 +11,10 @@ import { useSearchParams } from 'next/navigation';
 import { mode } from 'viem/chains';
 import { useChainId } from 'wagmi';
 
-import { pools } from '@ui/constants';
 import { useMultiIonic } from '@ui/context/MultiIonicContext';
 import type { MarketRowData } from '@ui/hooks/market/useMarketData';
 import { useMarketData } from '@ui/hooks/market/useMarketData';
+import type { LoopMarketData } from '@ui/hooks/useLoopMarkets';
 import { handleSwitchOriginChain } from '@ui/utils/NetworkChecker';
 
 import CommonTable from '../_components/CommonTable';
@@ -23,6 +23,7 @@ import FeaturedMarketTile from '../_components/markets/FeaturedMarketTile';
 import StakingTile from '../_components/markets/StakingTile';
 import TotalTvlTile from '../_components/markets/TotalTvlTile';
 import TvlTile from '../_components/markets/TvlTile';
+import Loop from '../_components/popup/Loop';
 import Popup, { PopupMode } from '../_components/popup/page';
 import Swap from '../_components/popup/Swap';
 
@@ -50,9 +51,10 @@ export default function Market() {
   const [swapOpen, setSwapOpen] = useState<boolean>(false);
   const [swapWidgetOpen, setSwapWidgetOpen] = useState<boolean>(false);
   const [wrapWidgetOpen, setWrapWidgetOpen] = useState<boolean>(false);
-  const [popupMode, setPopupMode] = useState<PopupMode>();
   const chainId = useChainId();
   const { address } = useMultiIonic();
+  const [popupMode, setPopupMode] = useState<PopupMode>();
+  const [loopMarkets, setLoopMarkets] = useState<LoopMarketData>();
 
   const selectedPool = querypool ?? '0';
   const chain = querychain ? querychain : mode.id.toString();
@@ -63,6 +65,21 @@ export default function Market() {
     chain
   );
 
+  const selectedMarketData = marketData.find(
+    (asset) => asset.asset === selectedSymbol
+  );
+
+  const loopProps = useMemo(() => {
+    if (!selectedMarketData || !poolData) return null;
+    return {
+      borrowableAssets: loopMarkets
+        ? loopMarkets[selectedMarketData.cToken]
+        : [],
+      comptrollerAddress: poolData.comptroller,
+      selectedCollateralAsset: selectedMarketData
+    };
+  }, [selectedMarketData, poolData, loopMarkets]);
+
   const columns: EnhancedColumnDef<MarketRowData>[] = [
     {
       id: 'asset',
@@ -162,31 +179,42 @@ export default function Market() {
       header: 'ACTIONS',
       enableSorting: false,
       cell: ({ row }: MarketCellProps) => (
-        <button
-          className="rounded-md bg-accent text-black py-1.5 px-4 uppercase truncate disabled:opacity-50"
-          onClick={async () => {
-            const result = await handleSwitchOriginChain(+chain, chainId);
-            if (result) {
-              setSelectedSymbol(row.original.asset);
-              setPopupMode(
-                row.original.isBorrowDisabled && row.original.loopPossible
-                  ? PopupMode.LOOP
-                  : PopupMode.SUPPLY
-              );
-            }
-          }}
-          disabled={!address}
-        >
-          Manage
-        </button>
+        <div className="flex gap-2">
+          {!row.original.isBorrowDisabled && (
+            <button
+              className="rounded-md bg-accent text-black py-1.5 px-4 uppercase truncate disabled:opacity-50"
+              onClick={async () => {
+                const result = await handleSwitchOriginChain(+chain, chainId);
+                if (result) {
+                  setSelectedSymbol(row.original.asset);
+                  setPopupMode(PopupMode.MANAGE);
+                }
+              }}
+              disabled={!address}
+            >
+              Manage
+            </button>
+          )}
+          {row.original.loopPossible && (
+            <button
+              className="rounded-md bg-white/10 text-white py-1.5 px-4 uppercase truncate disabled:opacity-50 hover:bg-white/20"
+              onClick={async () => {
+                const result = await handleSwitchOriginChain(+chain, chainId);
+                if (result) {
+                  setSelectedSymbol(row.original.asset);
+                  setPopupMode(PopupMode.LOOP);
+                }
+              }}
+              disabled={!address}
+            >
+              Loop
+            </button>
+          )}
+        </div>
       )
     }
   ];
 
-  const selectedMarketData = marketData.find(
-    (asset) => asset.asset === selectedSymbol
-  );
-
   return (
     <>
       <div className="w-full flex flex-col items-center justify-start transition-all duration-200 ease-linear">
@@ -248,15 +276,22 @@ export default function Market() {
         </div>
       </div>
 
-      {popupMode && selectedMarketData && poolData && (
+      {popupMode === PopupMode.MANAGE && selectedMarketData && poolData && (
         <Popup
           closePopup={() => setPopupMode(undefined)}
           comptrollerAddress={poolData.comptroller}
-          mode={popupMode}
           selectedMarketData={selectedMarketData}
         />
       )}
 
+      {popupMode === PopupMode.LOOP && loopProps && (
+        <Loop
+          {...loopProps}
+          closeLoop={() => setPopupMode(undefined)}
+          isOpen={true}
+        />
+      )}
+
       {swapOpen && (
         <Swap
           close={() => setSwapOpen(false)}