nicer formatting of message

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,15 +17,13 @@ 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';
 import TransactionStepsHandler from './TransactionStepsHandler';
 import ResultHandler from '../../ResultHandler';
 import MemoizedUtilizationStats from '../../UtilizationStats';
-import { useMarketData } from '@ui/hooks/market/useMarketData';
-import { useSearchParams } from 'next/navigation';
-import { mode } from 'viem/chains';
 
 interface SupplyTabProps {
   maxAmount: bigint;
@@ -67,7 +68,19 @@ const SupplyTab = ({
   const chain = querychain ? querychain : mode.id.toString();
 
   const { marketData } = useMarketData(selectedPool, chain);
-  console.log('marketData', marketData);
+
+  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 'Will be available when more markets are added to the pool';
+    }
+    return null;
+  };
 
   const disableCollateral = marketData.length === 1;
 
@@ -99,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">
@@ -170,12 +187,9 @@ const SupplyTab = ({
                     />
                   </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>