disable collateral when only 1 asset

nicer formatting of message fix label
ionicprotocol · Dec 20, 2024 · af8ac21 · af8ac21
1 parent 205e5b5
commit af8ac21
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/packages/ui/app/_components/dialogs/manage/SupplyTab.tsx b/packages/ui/app/_components/dialogs/manage/SupplyTab.tsx
@@ -1,6 +1,9 @@
 import { useEffect, useMemo } from 'react';
 
+import { useSearchParams } from 'next/navigation';
+
 import { formatUnits } from 'viem';
+import { mode } from 'viem/chains';
 
 import { Button } from '@ui/components/ui/button';
 import { Switch } from '@ui/components/ui/switch';
@@ -14,6 +17,7 @@ import {
   useManageDialogContext
 } from '@ui/context/ManageDialogContext';
 import { useCollateralToggle } from '@ui/hooks/market/useCollateralToggle';
+import { useMarketData } from '@ui/hooks/market/useMarketData';
 import { useSupply } from '@ui/hooks/market/useSupply';
 
 import Amount from './Amount';
@@ -57,6 +61,29 @@ const SupplyTab = ({
     onSuccess: refetchUsedQueries
   });
 
+  const searchParams = useSearchParams();
+  const querychain = searchParams.get('chain');
+  const querypool = searchParams.get('pool');
+  const selectedPool = querypool ?? '0';
+  const chain = querychain ? querychain : mode.id.toString();
+
+  const { marketData } = useMarketData(selectedPool, chain);
+
+  const getTooltipContent = () => {
+    if (hasActiveTransactions) {
+      return 'Cannot modify collateral during an active transaction';
+    }
+    if (!selectedMarketData.supplyBalance) {
+      return 'You need to supply assets first before enabling as collateral';
+    }
+    if (disableCollateral) {
+      return 'Unavailable until borrowing is enabled';
+    }
+    return null;
+  };
+
+  const disableCollateral = marketData.length === 1;
+
   const {
     isWaitingForIndexing,
     supplyAmount,
@@ -85,6 +112,10 @@ const SupplyTab = ({
 
   const isDisabled = !amount || amountAsBInt === 0n;
   const hasActiveTransactions = combinedTransactionSteps.length > 0;
+  const showTooltip =
+    hasActiveTransactions ||
+    !selectedMarketData.supplyBalance ||
+    disableCollateral;
 
   return (
     <div className="space-y-4 pt-2">
@@ -149,18 +180,16 @@ const SupplyTab = ({
                       checked={enableCollateral}
                       onCheckedChange={handleCollateralToggle}
                       disabled={
+                        disableCollateral ||
                         hasActiveTransactions ||
                         !selectedMarketData.supplyBalance
                       }
                     />
                   </div>
                 </TooltipTrigger>
-                {(hasActiveTransactions ||
-                  !selectedMarketData.supplyBalance) && (
+                {showTooltip && (
                   <TooltipContent side="top">
-                    {hasActiveTransactions
-                      ? 'Cannot modify collateral during an active transaction'
-                      : 'You need to supply assets first before enabling as collateral'}
+                    {getTooltipContent()}
                   </TooltipContent>
                 )}
               </Tooltip>

diff --git a/packages/ui/hooks/market/useMarketData.ts b/packages/ui/hooks/market/useMarketData.ts
@@ -59,7 +59,7 @@ export type MarketRowData = MarketData & {
 export const useMarketData = (
   selectedPool: string,
   chain: number | string,
-  selectedSymbol: string | undefined
+  selectedSymbol?: string | undefined
 ) => {
   const { data: poolData, isLoading: isLoadingPoolData } = useFusePoolData(
     selectedPool,