show manage button & disable borrow tabs if disabled

ionicprotocol · Nov 20, 2024 · d435e8e · d435e8e
1 parent b8d74bd
commit d435e8e
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 41 deletions.
diff --git a/packages/ui/app/_components/manage-dialog/index.tsx b/packages/ui/app/_components/manage-dialog/index.tsx
@@ -54,13 +54,15 @@ interface IPopup {
   setIsOpen: (open: boolean) => void;
   comptrollerAddress: Address;
   selectedMarketData: MarketData;
+  isBorrowDisabled?: boolean;
 }
 
 const ManageDialog = ({
   isOpen,
   setIsOpen,
   selectedMarketData,
-  comptrollerAddress
+  comptrollerAddress,
+  isBorrowDisabled = false
 }: IPopup) => {
   const { currentSdk } = useMultiIonic();
   const chainId = useChainId();
@@ -187,16 +189,25 @@ const ManageDialog = ({
           </div>
 
           <Tabs
-            defaultValue={active}
-            onValueChange={(value) => {
-              setActive(value as ActiveTab);
-            }}
+            defaultValue="supply"
+            value={active}
+            onValueChange={(value) => setActive(value as ActiveTab)}
           >
             <TabsList className="grid w-full grid-cols-4">
               <TabsTrigger value="supply">Supply</TabsTrigger>
               <TabsTrigger value="withdraw">Withdraw</TabsTrigger>
-              <TabsTrigger value="borrow">Borrow</TabsTrigger>
-              <TabsTrigger value="repay">Repay</TabsTrigger>
+              <TabsTrigger
+                value="borrow"
+                disabled={isBorrowDisabled}
+              >
+                Borrow
+              </TabsTrigger>
+              <TabsTrigger
+                value="repay"
+                disabled={isBorrowDisabled}
+              >
+                Repay
+              </TabsTrigger>
             </TabsList>
 
             <TabsContent value="supply">
@@ -220,6 +231,7 @@ const ManageDialog = ({
                 isLoadingMax={isLoadingMaxWithdrawAmount}
               />
             </TabsContent>
+
             <TabsContent value="borrow">
               <BorrowTab
                 maxAmount={maxBorrowAmount?.bigNumber ?? 0n}
@@ -232,6 +244,7 @@ const ManageDialog = ({
                 }}
               />
             </TabsContent>
+
             <TabsContent value="repay">
               <RepayTab
                 maxAmount={maxRepayAmount ?? 0n}

diff --git a/packages/ui/app/_components/markets/FeaturedMarketTile.tsx b/packages/ui/app/_components/markets/FeaturedMarketTile.tsx
@@ -36,26 +36,8 @@ export default function FeaturedMarketTile({
   setWrapWidgetOpen,
   wrapWidgetOpen
 }: Iprop) {
-  console.log('dropdownSelectedChain', dropdownSelectedChain);
-  console.log('selectedChain', selectedChain);
-  console.log('isLoadingPoolData', isLoadingPoolData);
-  console.log('setWrapWidgetOpen', setWrapWidgetOpen);
-  console.log('wrapWidgetOpen', wrapWidgetOpen);
-  // const {
-  //   asset,
-  //   borrowAPR,
-  //   rewardsAPR,
-  //   dropdownSelectedChain,
-  //   selectedPoolId,
-  //   cToken,
-  //   pool,
-  //   rewards,
-  //   loopPossible
-  // } = useStore((state) => state.featuredBorrow);
   const featuredSupply = useStore((state) => state.featuredSupply);
-  console.log('featuredSupply', featuredSupply);
   const featuredSupply2 = useStore((state) => state.featuredSupply2);
-  console.log('featuredSupply2', featuredSupply2);
 
   return (
     <div

diff --git a/packages/ui/app/market/page.tsx b/packages/ui/app/market/page.tsx
@@ -60,6 +60,7 @@ export default function Market() {
   const [isManageDialogOpen, setIsManageDialogOpen] = useState<boolean>(false);
   const [isLoopDialogOpen, setIsLoopDialogOpen] = useState<boolean>(false);
   const [selectedSymbol, setSelectedSymbol] = useState<string>();
+  const [isBorrowDisabled, setIsBorrowDisabled] = useState<boolean>(false);
 
   const { marketData, isLoading, poolData, selectedMarketData, loopProps } =
     useMarketData(selectedPool, chain, selectedSymbol);
@@ -164,21 +165,22 @@ export default function Market() {
       enableSorting: false,
       cell: ({ row }: MarketCellProps) => (
         <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);
-                  setIsManageDialogOpen(true);
+          <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);
+                setIsManageDialogOpen(true);
+                if (row.original.isBorrowDisabled) {
+                  setIsBorrowDisabled(true);
                 }
-              }}
-              disabled={!address}
-            >
-              Manage
-            </button>
-          )}
+              }
+            }}
+            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"
@@ -264,6 +266,7 @@ export default function Market() {
         <ManageDialog
           isOpen={isManageDialogOpen}
           setIsOpen={setIsManageDialogOpen}
+          isBorrowDisabled={isBorrowDisabled}
           comptrollerAddress={poolData.comptroller}
           selectedMarketData={selectedMarketData}
         />

diff --git a/packages/ui/hooks/market/useMarketData.ts b/packages/ui/hooks/market/useMarketData.ts
@@ -1,9 +1,13 @@
 // hooks/useMarketData.ts
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { type Address, formatEther, formatUnits } from 'viem';
 
-import { FLYWHEEL_TYPE_MAP, pools } from '@ui/constants/index';
+import {
+  FLYWHEEL_TYPE_MAP,
+  pools,
+  shouldGetFeatured
+} from '@ui/constants/index';
 import { useBorrowCapsForAssets } from '@ui/hooks/ionic/useBorrowCapsDataForAsset';
 import { useBorrowAPYs } from '@ui/hooks/useBorrowAPYs';
 import { useFusePoolData } from '@ui/hooks/useFusePoolData';
@@ -14,6 +18,7 @@ import { useSupplyAPYs } from '@ui/hooks/useSupplyAPYs';
 import type { MarketData } from '@ui/types/TokensDataMap';
 
 import type { FlywheelReward } from '@ionicprotocol/types';
+import { useStore } from '@ui/store/Store';
 
 export type MarketRowData = MarketData & {
   asset: string;
@@ -47,6 +52,9 @@ export const useMarketData = (
     +chain
   );
 
+  const setFeaturedSupply = useStore((state) => state.setFeaturedSupply);
+  const setFeaturedSupply2 = useStore((state) => state.setFeaturedSupply2);
+
   const assets = useMemo<MarketData[] | undefined>(
     () => poolData?.assets,
     [poolData]
@@ -207,6 +215,57 @@ export const useMarketData = (
     borrowCapsData
   ]);
 
+  useEffect(() => {
+    if (!marketData.length) return;
+
+    // Find and set featured supply assets based on shouldGetFeatured mapping
+    marketData.forEach((market) => {
+      // Check if this market is featured supply 1
+      if (
+        shouldGetFeatured.featuredSupply[+chain][
+          selectedPool
+        ]?.toLowerCase() === market.asset.toLowerCase()
+      ) {
+        console.log('yeee');
+        setFeaturedSupply({
+          asset: market.asset,
+          supplyAPR: market.supplyAPR,
+          supplyAPRTotal: market.supplyAPRTotal,
+          rewards: market.supplyRewards,
+          dropdownSelectedChain: +chain,
+          selectedPoolId: selectedPool,
+          cToken: market.cTokenAddress,
+          pool: market.comptrollerAddress
+        });
+      }
+
+      // Check if this market is featured supply 2
+      if (
+        shouldGetFeatured.featuredSupply2[+chain][
+          selectedPool
+        ]?.toLowerCase() === market.asset.toLowerCase()
+      ) {
+        setFeaturedSupply2({
+          asset: market.asset,
+          supplyAPR: market.supplyAPR,
+          supplyAPRTotal: market.supplyAPRTotal,
+          rewards: market.supplyRewards,
+          dropdownSelectedChain: +chain,
+          selectedPoolId: selectedPool,
+          cToken: market.cTokenAddress,
+          pool: market.comptrollerAddress
+        });
+      }
+    });
+  }, [
+    marketData,
+    chain,
+    selectedPool,
+    setFeaturedSupply,
+    setFeaturedSupply2,
+    poolData?.comptroller
+  ]);
+
   const selectedMarketData = marketData.find(
     (asset) => asset.asset === selectedSymbol
   );