FIX: is input zero or nan

src/components/actions/ActionHandler.tsx

@@ -96,7 +96,7 @@ export default function ActionHandler({ actionType, tokenType }: ActionHandlerPr
   const displayTokenSymbol = config.usesShares ? sharesSymbol : formatTokenSymbol(tokenSymbol);
   const displayDecimals = config.usesShares ? sharesDecimals : tokenDecimals;
 
-  const { isLoadingPreview, previewData, receive, provide } = useActionPreview({
+  const { previewData, receive, provide } = useActionPreview({
     amount,
     actionType,
     tokenType,
@@ -314,7 +314,6 @@ export default function ActionHandler({ actionType, tokenType }: ActionHandlerPr
           <PreviewBox
             receive={receive}
             provide={provide}
-            isLoading={isLoadingPreview}
             title="Transaction Preview"
           />
         ) : undefined

src/components/actions/SafeActionHandler.tsx

@@ -105,7 +105,7 @@ export default function SafeActionHandler({ actionType, tokenType }: SafeActionH
   const displayTokenSymbol = config.usesShares ? sharesSymbol : formatTokenSymbol(tokenSymbol);
   const displayDecimals = config.usesShares ? sharesDecimals : tokenDecimals;
 
-  const { isLoadingPreview, previewData, receive, provide } = useActionPreview({
+  const { previewData, receive, provide } = useActionPreview({
     amount,
     actionType,
     tokenType,
@@ -458,7 +458,6 @@ export default function SafeActionHandler({ actionType, tokenType }: SafeActionH
           <PreviewBox
             receive={receive}
             provide={provide}
-            isLoading={isLoadingPreview}
             title="Transaction Preview"
           />
         ) : undefined

src/components/ui/PreviewBox.tsx

@@ -12,14 +12,12 @@ export interface PreviewItem {
 interface PreviewBoxProps {
   receive: PreviewItem[];
   provide: PreviewItem[];
-  isLoading: boolean;
   title?: string;
 }
 
 export const PreviewBox: React.FC<PreviewBoxProps> = ({
   receive,
   provide,
-  isLoading,
   title = 'Preview'
 }) => {
   const {
@@ -61,7 +59,6 @@ export const PreviewBox: React.FC<PreviewBoxProps> = ({
       <div className="flex items-center space-x-2">
         <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
         <h4 className="text-sm font-semibold text-gray-900">{title}</h4>
-        <span className="text-sm text-gray-500">{isLoading && " (Loading...)"}</span>
       </div>
       <div className="space-y-4">
         {provide.length > 0 && (

src/components/ui/Tabs.tsx

@@ -1,77 +1,49 @@
-import { ActionType } from '@/types/actions';
-
 interface TabItem<T> {
   value: T;
   label: string;
 }
 
-interface TabsPropsGeneric<T extends string> {
+interface TabsProps<T extends string> {
   activeTab: T;
-  setActiveTab: React.Dispatch<React.SetStateAction<T>>;
+  setActiveTab: React.Dispatch<React.SetStateAction<T>> | ((tab: T) => void);
   tabs: TabItem<T>[];
+  isProcessing?: boolean;
   className?: string;
 }
 
-interface TabsPropsAction {
-  activeTab: ActionType;
-  setActiveTab: React.Dispatch<React.SetStateAction<ActionType>>;
-  tabs?: never;
-  className?: string;
-}
-
-type TabsProps<T extends string = ActionType> = T extends ActionType 
-  ? TabsPropsAction 
-  : TabsPropsGeneric<T>;
-
-export default function Tabs<T extends string = ActionType>({ 
-  activeTab, 
-  setActiveTab, 
+export default function Tabs<T extends string>({
+  activeTab,
+  setActiveTab,
   tabs,
-  className 
-}: TabsProps<T> | TabsPropsGeneric<T>) {
+  isProcessing,
+  className,
+}: TabsProps<T>) {
+  const safeSetActiveTab = (tab: T) => {
+    if (isProcessing && tab !== activeTab) return;
+    setActiveTab(tab);
+  };
+
   const tabClass = (tab: T) =>
-    `flex-1 py-2 px-4 rounded-lg font-medium transition-colors focus:outline-none focus:ring-0 ${activeTab === tab
-      ? 'bg-indigo-600 text-white'
-      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+    `flex-1 py-2 px-4 rounded-lg font-medium transition-colors focus:outline-none focus:ring-0 ${isProcessing && tab !== activeTab
+      ? 'bg-gray-200 text-gray-400 cursor-not-allowed opacity-60 border-0'
+      : activeTab === tab
+        ? 'bg-indigo-600 text-white'
+        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
     }`;
 
-  // If custom tabs are provided, use them
-  if (tabs) {
-    return (
-      <div className={`${className ?? ''}`}>
-        <div className="flex space-x-2">
-          {tabs.map((tab) => (
-            <button
-              key={tab.value}
-              onClick={() => setActiveTab(tab.value as any)}
-              className={tabClass(tab.value as T)}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  // Default action tabs layout
   return (
     <div className={`${className ?? ''}`}>
-      <div className="flex space-x-4 mb-3">
-        <button onClick={() => setActiveTab('deposit' as any)} className={tabClass('deposit' as T)}>
-          Deposit
-        </button>
-        <button onClick={() => setActiveTab('redeem' as any)} className={tabClass('redeem' as T)}>
-          Redeem
-        </button>
-      </div>
-      <div className="flex space-x-4">
-        <button onClick={() => setActiveTab('mint' as any)} className={tabClass('mint' as T)}>
-          Mint
-        </button>
-        <button onClick={() => setActiveTab('withdraw' as any)} className={tabClass('withdraw' as T)}>
-          Withdraw
-        </button>
+      <div className={tabs.length === 4 ? "grid grid-cols-2 gap-2" : "flex space-x-2"}>
+        {tabs.map((tab) => (
+          <button
+            key={tab.value}
+            onClick={() => safeSetActiveTab(tab.value)}
+            className={tabClass(tab.value)}
+            disabled={isProcessing && tab.value !== activeTab}
+          >
+            {tab.label}
+          </button>
+        ))}
       </div>
     </div>
   );

src/components/vault/Actions.tsx

@@ -3,6 +3,7 @@ import Tabs from '@/components/ui/Tabs';
 import ActionWrapper from '@/components/actions/ActionWrapper';
 import { ActionType } from '@/types/actions';
 import DexLink from './DexLink';
+import { ACTIONS_TABS } from '@/constants';
 
 interface ActionsProps {
   isSafe?: boolean;
@@ -13,7 +14,11 @@ export default function Actions({ isSafe = false }: ActionsProps) {
 
   return (
     <div className="bg-gray-50 rounded-lg p-4">
-      <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
+      <Tabs
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        tabs={ACTIONS_TABS}
+      />
       <ActionWrapper actionType={activeTab} isSafe={isSafe} />
       <DexLink />
     </div>

src/components/vault/ActionsDropdown.tsx

@@ -3,12 +3,13 @@ import Tabs from '@/components/ui/Tabs';
 import ActionWrapper from '@/components/actions/ActionWrapper';
 import { ActionType } from '@/types/actions';
 import DexLink from './DexLink';
+import { ACTIONS_TABS } from '@/constants';
 
 interface ActionsProps {
   isSafe?: boolean;
 }
 
-export default function ActionsDropdown({ isSafe = false } : ActionsProps ) {
+export default function ActionsDropdown({ isSafe = false }: ActionsProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [activeTab, setActiveTab] = useState<ActionType>('deposit');
 
@@ -33,22 +34,10 @@ export default function ActionsDropdown({ isSafe = false } : ActionsProps ) {
         className={`transition-all duration-200 overflow-hidden ${isOpen ? 'max-h-[2000px] opacity-100 p-3' : 'max-h-0 opacity-0 pb-0'
           }`}
       >
-        <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
+        <Tabs activeTab={activeTab} setActiveTab={setActiveTab} tabs={ACTIONS_TABS} />
         <ActionWrapper actionType={activeTab} isSafe={isSafe} />
         <DexLink />
       </div>
     </div>
   );
 }
-
-export function Actions({ isSafe = false }: ActionsProps) {
-  const [activeTab, setActiveTab] = useState<ActionType>('deposit');
-
-  return (
-    <div className="bg-gray-50 rounded-lg p-4">
-      <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
-      <ActionWrapper actionType={activeTab} isSafe={isSafe} />
-      <DexLink />
-    </div>
-  );
-}

src/components/vault/AuctionHandler.tsx

@@ -15,7 +15,6 @@ export default function AuctionHandler({ futureBorrowAssets, futureCollateralAss
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
-  const [isLoadingPreview, setIsLoadingPreview] = useState(false);
   const [isLoadingMax, setIsLoadingMax] = useState(false);
 
   const [previewData, setPreviewData] = useState<{
@@ -148,8 +147,6 @@ export default function AuctionHandler({ futureBorrowAssets, futureCollateralAss
       return;
     }
 
-    setIsLoadingPreview(true);
-
     try {
       let result: bigint;
 
@@ -169,8 +166,6 @@ export default function AuctionHandler({ futureBorrowAssets, futureCollateralAss
     } catch (err) {
       console.error('Error loading preview:', err);
       setPreviewData(null);
-    } finally {
-      setIsLoadingPreview(false);
     }
   };
 
@@ -345,7 +340,6 @@ export default function AuctionHandler({ futureBorrowAssets, futureCollateralAss
             <PreviewBox
               receive={receive}
               provide={provide}
-              isLoading={isLoadingPreview}
               title="Auction Preview"
             />
           );

src/components/vault/FlashLoanDepositWithdraw.tsx

@@ -24,6 +24,7 @@ export default function FlashLoanDepositWithdraw() {
 
   const [isOpen, setIsOpen] = useState(false);
   const [activeTab, setActiveTab] = useState<ActionType>(availableTabs[0]?.value || 'deposit');
+  const [isProcessing, setIsProcessing] = useState(false);
 
   if (availableTabs.length === 0) {
     return null;
@@ -52,10 +53,18 @@ export default function FlashLoanDepositWithdraw() {
       >
         {availableTabs.length > 1 && (
           <div className="mb-3">
-            <Tabs activeTab={activeTab} setActiveTab={setActiveTab} tabs={availableTabs} />
+            <Tabs
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+              tabs={availableTabs}
+              isProcessing={isProcessing}
+            />
           </div>
         )}
-        <FlashLoanDepositWithdrawHandler actionType={activeTab} />
+        <FlashLoanDepositWithdrawHandler
+          actionType={activeTab}
+          setIsProcessing={setIsProcessing}
+        />
       </div>
     </div>
   );

src/components/vault/FlashLoanDepositWithdrawForm.tsx

@@ -11,6 +11,7 @@ export default function FlashLoanDepositWithdrawForm() {
   ]
 
   const [activeTab, setActiveTab] = useState<ActionType>(tabs[0]?.value || 'deposit');
+  const [isProcessing, setIsProcessing] = useState(false);
 
   return (
     <div className="relative rounded-lg bg-gray-50 mb-4">
@@ -19,10 +20,18 @@ export default function FlashLoanDepositWithdrawForm() {
       >
         {tabs.length > 1 && (
           <div className="mb-3">
-            <Tabs activeTab={activeTab} setActiveTab={setActiveTab} tabs={tabs} />
+            <Tabs
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+              tabs={tabs}
+              isProcessing={isProcessing}
+            />
           </div>
         )}
-        <FlashLoanDepositWithdrawHandler actionType={activeTab} />
+        <FlashLoanDepositWithdrawHandler
+          actionType={activeTab}
+          setIsProcessing={setIsProcessing}
+        />
       </div>
     </div>
   );