From 88431ef177b9750c6cb1fafd42553b1682f4761f Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Mon, 26 Jan 2026 10:29:42 +0800
Subject: [PATCH 1/6] refactor: initializtion

---
 .../modals/vault-initialization-modal.tsx     |   7 +-
 src/features/autovault/vault-view.tsx         |  25 ++-
 src/hooks/useVaultIndexing.tsx                | 154 +++++++-----------
 src/stores/vault-indexing-store.ts            |  46 ++++++
 src/utils/vault-indexing.ts                   |  75 ---------
 5 files changed, 122 insertions(+), 185 deletions(-)
 create mode 100644 src/stores/vault-indexing-store.ts
 delete mode 100644 src/utils/vault-indexing.ts

diff --git a/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx b/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx
index 84d8c7a6..a233aa1d 100644
--- a/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx
+++ b/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx
@@ -18,7 +18,7 @@ import { useMorphoMarketV1Adapters } from '@/hooks/useMorphoMarketV1Adapters';
 import { v2AgentsBase } from '@/utils/monarch-agent';
 import { getMorphoAddress } from '@/utils/morpho';
 import { ALL_SUPPORTED_NETWORKS, SupportedNetworks, getNetworkConfig } from '@/utils/networks';
-import { startVaultIndexing } from '@/utils/vault-indexing';
+import { useVaultIndexingStore } from '@/stores/vault-indexing-store';
 import { useVaultInitializationModalStore } from '@/stores/vault-initialization-modal-store';
 
 const ZERO_ADDRESS = zeroAddress;
@@ -194,6 +194,7 @@ const MAX_SYMBOL_LENGTH = 16;
 export function VaultInitializationModal() {
   // Modal state from Zustand (UI state)
   const { isOpen, close } = useVaultInitializationModalStore();
+  const { startIndexing } = useVaultIndexingStore();
 
   // Get vault address and chain ID from URL params
   const { chainId: chainIdParam, vaultAddress } = useParams<{
@@ -331,7 +332,7 @@ export function VaultInitializationModal() {
       }
 
       // Start indexing mode - vault page will handle retry logic
-      startVaultIndexing(vaultAddress, chainId);
+      startIndexing(vaultAddressValue, chainId);
 
       // Trigger initial refetch
       void vaultDataQuery.refetch();
@@ -348,12 +349,14 @@ export function VaultInitializationModal() {
     vaultContract,
     refetchAdapter,
     close,
+    startIndexing,
     registryAddress,
     selectedAgent,
     adapterAddress,
     vaultName,
     vaultSymbol,
     vaultAddress,
+    vaultAddressValue,
     chainId,
   ]);
 
diff --git a/src/features/autovault/vault-view.tsx b/src/features/autovault/vault-view.tsx
index 10b7c5b8..ee3d19fd 100644
--- a/src/features/autovault/vault-view.tsx
+++ b/src/features/autovault/vault-view.tsx
@@ -78,12 +78,16 @@ export default function VaultContent() {
     connectedAddress,
   });
 
-  // Aggregated refetch function
+  // Stabilize refetch references to prevent effect churn in useVaultIndexing
+  const refetchVaultData = vaultDataQuery.refetch;
+  const refetchVaultContract = vaultContract.refetch;
+  const refetchAdapters = adapterQuery.refetch;
+
   const handleRefreshVault = useCallback(() => {
-    void vaultDataQuery.refetch();
-    void vaultContract.refetch();
-    void adapterQuery.refetch();
-  }, [vaultDataQuery, vaultContract, adapterQuery]);
+    void refetchVaultData();
+    void refetchVaultContract();
+    void refetchAdapters();
+  }, [refetchVaultData, refetchVaultContract, refetchAdapters]);
 
   const isRefetching = vaultDataQuery.isRefetching || vaultContract.isRefetching || adapterQuery.isRefetching;
 
@@ -94,16 +98,19 @@ export default function VaultContent() {
   const title = vaultData?.displayName ?? `Vault ${getSlicedAddress(vaultAddressValue)}`;
   const symbolToDisplay = vaultData?.displaySymbol;
 
-  // Determine if vault data has loaded successfully
-  const isDataLoaded = useMemo(() => {
-    return !vaultDataLoading && !hasError && vaultData !== null;
+  // Determine if vault data reflects post-initialization state.
+  // After initialization, adapters[] must be non-empty in the API response.
+  // This prevents the indexing system from exiting early with stale pre-init data.
+  const hasPostInitData = useMemo(() => {
+    if (vaultDataLoading || hasError || !vaultData) return false;
+    return vaultData.adapters.length > 0;
   }, [vaultDataLoading, hasError, vaultData]);
 
   // Use indexing hook to manage retry logic and toast
   const { isIndexing } = useVaultIndexing({
     vaultAddress: vaultAddressValue,
     chainId,
-    isDataLoaded,
+    hasPostInitData,
     refetch: handleRefreshVault,
   });
 
diff --git a/src/hooks/useVaultIndexing.tsx b/src/hooks/useVaultIndexing.tsx
index 6b68585d..d0d471df 100644
--- a/src/hooks/useVaultIndexing.tsx
+++ b/src/hooks/useVaultIndexing.tsx
@@ -1,63 +1,43 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { toast } from 'react-toastify';
 import type { Address } from 'viem';
 import { StyledToast } from '@/components/ui/styled-toast';
-import { getIndexingVault, stopVaultIndexing } from '@/utils/vault-indexing';
+import { INDEXING_TIMEOUT_MS, useVaultIndexingStore } from '@/stores/vault-indexing-store';
 import { useStyledToast } from './useStyledToast';
 
 type UseVaultIndexingArgs = {
   vaultAddress: Address;
   chainId: number;
-  isDataLoaded: boolean;
+  hasPostInitData: boolean;
   refetch: () => void;
 };
 
+const REFETCH_INTERVAL_MS = 5_000;
+
 /**
  * Hook to manage vault indexing state after initialization.
  * Shows a persistent toast and retries fetching data every 5 seconds
- * until the vault is indexed or timeout is reached (2 minutes).
+ * until post-initialization data arrives or timeout is reached (2 minutes).
+ *
+ * Uses Zustand store for instant reactivity (no localStorage polling).
  */
-export function useVaultIndexing({ vaultAddress, chainId, isDataLoaded, refetch }: UseVaultIndexingArgs) {
-  const [isIndexing, setIsIndexing] = useState(false);
-  const refetchIntervalRef = useRef<ReturnType<typeof setInterval>>();
+export function useVaultIndexing({ vaultAddress, chainId, hasPostInitData, refetch }: UseVaultIndexingArgs) {
+  // Use selectors for individual pieces to avoid subscribing to the entire store
+  const indexingVault = useVaultIndexingStore((s) => s.indexingVault);
+  const stopIndexing = useVaultIndexingStore((s) => s.stopIndexing);
   const toastIdRef = useRef<string | number>();
-  const hasDetectedIndexing = useRef(false);
   const { info: styledInfo, success: styledSuccess } = useStyledToast();
 
-  // Poll localStorage to detect when indexing state is set
-  // This ensures we pick up indexing state even if it's set after component mount
-  useEffect(() => {
-    // Reset detection flag when vault or chain changes
-    hasDetectedIndexing.current = false;
-
-    // Immediate check on mount
-    const indexingData = getIndexingVault(vaultAddress, chainId);
-    if (indexingData && !hasDetectedIndexing.current) {
-      hasDetectedIndexing.current = true;
-      setIsIndexing(true);
-    }
-
-    // Continue polling for state changes
-    const pollingInterval = setInterval(() => {
-      const data = getIndexingVault(vaultAddress, chainId);
-      if (data && !hasDetectedIndexing.current) {
-        hasDetectedIndexing.current = true;
-        setIsIndexing(true);
-      }
-    }, 1000);
-
-    // Always return cleanup function
-    return () => {
-      clearInterval(pollingInterval);
-    };
-  }, [vaultAddress, chainId]);
+  // Derive isIndexing from the store state
+  // Time-based expiry is handled by the interval in Effect 2 (not reactive to time passing)
+  const isIndexing = useMemo(() => {
+    if (!indexingVault) return false;
+    return indexingVault.address.toLowerCase() === vaultAddress.toLowerCase() && indexingVault.chainId === chainId;
+  }, [indexingVault, vaultAddress, chainId]);
 
-  // Handle indexing toast and retry logic
+  // Effect 1: Show/dismiss the persistent "indexing" toast
   useEffect(() => {
-    if (!isIndexing) return;
-
-    // Show persistent toast when indexing starts (only once)
-    if (!toastIdRef.current) {
+    if (isIndexing && !toastIdRef.current) {
       toastIdRef.current = toast.info(
         <StyledToast
           title="Indexing vault data..."
@@ -70,80 +50,56 @@ export function useVaultIndexing({ vaultAddress, chainId, isDataLoaded, refetch
       );
     }
 
-    // Success: data loaded
-    if (isDataLoaded) {
-      stopVaultIndexing(vaultAddress, chainId);
-      setIsIndexing(false);
-      hasDetectedIndexing.current = false;
-
-      if (toastIdRef.current) {
-        toast.dismiss(toastIdRef.current);
-        toastIdRef.current = undefined;
-      }
-
-      styledSuccess('Vault data loaded', 'Your vault is ready to use.');
-
-      if (refetchIntervalRef.current) {
-        clearInterval(refetchIntervalRef.current);
-        refetchIntervalRef.current = undefined;
-      }
-
-      return;
+    if (!isIndexing && toastIdRef.current) {
+      toast.dismiss(toastIdRef.current);
+      toastIdRef.current = undefined;
     }
+  }, [isIndexing, vaultAddress, chainId]);
 
-    // Start retry interval if not already running
-    if (!refetchIntervalRef.current) {
-      refetchIntervalRef.current = setInterval(() => {
-        // Check if timeout reached (auto-cleanup happens in getIndexingVault)
-        const stillIndexing = getIndexingVault(vaultAddress, chainId);
-
-        if (!stillIndexing) {
-          // Timeout reached
-          setIsIndexing(false);
-          hasDetectedIndexing.current = false;
+  // Effect 2: Refetch interval + timeout while indexing.
+  // Only re-runs when isIndexing changes (true→false or false→true).
+  // refetch is stable (vault-view depends on .refetch refs from React Query).
+  // stopIndexing is stable (Zustand action created once).
+  // styledInfo is stable (useCallback with empty deps).
+  useEffect(() => {
+    if (!isIndexing) return;
 
-          if (refetchIntervalRef.current) {
-            clearInterval(refetchIntervalRef.current);
-            refetchIntervalRef.current = undefined;
-          }
+    const startTime = indexingVault?.startTime ?? Date.now();
 
-          if (toastIdRef.current) {
-            toast.dismiss(toastIdRef.current);
-            toastIdRef.current = undefined;
-          }
+    // Fire an immediate refetch
+    refetch();
 
-          styledInfo('Indexing delayed', 'Data is taking longer than expected. Please try refreshing manually using the refresh button.');
-          return;
-        }
+    const intervalId = setInterval(() => {
+      if (Date.now() - startTime > INDEXING_TIMEOUT_MS) {
+        clearInterval(intervalId);
+        stopIndexing();
+        styledInfo('Indexing delayed', 'Data is taking longer than expected. Please try refreshing manually using the refresh button.');
+        return;
+      }
 
-        // Trigger refetch
-        refetch();
-      }, 5000);
-    }
+      refetch();
+    }, REFETCH_INTERVAL_MS);
 
     return () => {
-      if (refetchIntervalRef.current) {
-        clearInterval(refetchIntervalRef.current);
-        refetchIntervalRef.current = undefined;
-      }
-      // Dismiss toast when vault or chain changes
-      if (toastIdRef.current) {
-        toast.dismiss(toastIdRef.current);
-        toastIdRef.current = undefined;
-      }
+      clearInterval(intervalId);
     };
-  }, [isIndexing, isDataLoaded, vaultAddress, chainId, refetch, styledSuccess, styledInfo]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isIndexing]);
+
+  // Effect 3: Detect completion — fresh post-init data arrived while indexing
+  useEffect(() => {
+    if (isIndexing && hasPostInitData) {
+      stopIndexing();
+      styledSuccess('Vault data loaded', 'Your vault is ready to use.');
+    }
+  }, [isIndexing, hasPostInitData, stopIndexing, styledSuccess]);
 
-  // Cleanup on unmount
+  // Cleanup toast on unmount
   useEffect(() => {
     return () => {
-      if (refetchIntervalRef.current) {
-        clearInterval(refetchIntervalRef.current);
-      }
       if (toastIdRef.current) {
         toast.dismiss(toastIdRef.current);
       }
-      hasDetectedIndexing.current = false;
     };
   }, []);
 
diff --git a/src/stores/vault-indexing-store.ts b/src/stores/vault-indexing-store.ts
new file mode 100644
index 00000000..a90d3060
--- /dev/null
+++ b/src/stores/vault-indexing-store.ts
@@ -0,0 +1,46 @@
+import { create } from 'zustand';
+import type { Address } from 'viem';
+
+export const INDEXING_TIMEOUT_MS = 2 * 60 * 1000; // 2 minutes
+
+type IndexingVault = {
+  address: Address;
+  chainId: number;
+  startTime: number;
+};
+
+type VaultIndexingState = {
+  indexingVault: IndexingVault | null;
+};
+
+type VaultIndexingActions = {
+  startIndexing: (address: Address, chainId: number) => void;
+  stopIndexing: () => void;
+};
+
+type VaultIndexingStore = VaultIndexingState & VaultIndexingActions;
+
+/**
+ * Zustand store for vault indexing state after initialization.
+ * Replaces the old localStorage-based system with instant reactivity.
+ *
+ * After completeInitialization() succeeds, call startIndexing() to signal
+ * that the vault page should poll the API until post-initialization data arrives.
+ */
+export const useVaultIndexingStore = create<VaultIndexingStore>((set) => ({
+  indexingVault: null,
+
+  startIndexing: (address, chainId) => {
+    set({
+      indexingVault: {
+        address,
+        chainId,
+        startTime: Date.now(),
+      },
+    });
+  },
+
+  stopIndexing: () => {
+    set({ indexingVault: null });
+  },
+}));
diff --git a/src/utils/vault-indexing.ts b/src/utils/vault-indexing.ts
deleted file mode 100644
index c1817f30..00000000
--- a/src/utils/vault-indexing.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Utility for managing vault indexing state in localStorage.
- * Tracks when a vault is waiting for API indexing after initialization,
- * with automatic cleanup after 2 minutes.
- */
-
-type IndexingVault = {
-  address: string;
-  chainId: number;
-  startTime: number;
-};
-
-const INDEXING_TIMEOUT_MS = 2 * 60 * 1000; // 2 minutes (reduced since API responds quickly)
-
-function getStorageKey(address: string, chainId: number): string {
-  return `vault-indexing-${chainId}-${address.toLowerCase()}`;
-}
-
-/**
- * Mark a vault as actively indexing
- */
-export function startVaultIndexing(address: string, chainId: number): void {
-  try {
-    const key = getStorageKey(address, chainId);
-    const data: IndexingVault = {
-      address,
-      chainId,
-      startTime: Date.now(),
-    };
-    localStorage.setItem(key, JSON.stringify(data));
-  } catch (error) {
-    console.warn('Failed to start vault indexing:', error);
-  }
-}
-
-/**
- * Check if a vault is currently indexing.
- * Returns null if not indexing or if timeout has been reached.
- * Automatically cleans up expired entries.
- */
-export function getIndexingVault(address: string, chainId: number): IndexingVault | null {
-  try {
-    const key = getStorageKey(address, chainId);
-    const stored = localStorage.getItem(key);
-
-    if (!stored) return null;
-
-    const data = JSON.parse(stored) as IndexingVault;
-    const elapsed = Date.now() - data.startTime;
-
-    // Check if timeout reached
-    if (elapsed > INDEXING_TIMEOUT_MS) {
-      // Auto-cleanup expired entry
-      localStorage.removeItem(key);
-      return null;
-    }
-
-    return data;
-  } catch (error) {
-    console.warn('Failed to get vault indexing state:', error);
-    return null;
-  }
-}
-
-/**
- * Stop indexing for a vault (called when data successfully loads)
- */
-export function stopVaultIndexing(address: string, chainId: number): void {
-  try {
-    const key = getStorageKey(address, chainId);
-    localStorage.removeItem(key);
-  } catch (error) {
-    console.warn('Failed to stop vault indexing:', error);
-  }
-}

From fb021fcefb1b7c50519125620c0f8628292f7d97 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Mon, 26 Jan 2026 11:04:21 +0800
Subject: [PATCH 2/6] chore: wording

---
 src/components/shared/allocator-card.tsx      | 39 +++++++++++--------
 .../modals/vault-initialization-modal.tsx     | 19 ++++-----
 src/features/autovault/vault-view.tsx         |  2 +-
 src/hooks/useVaultIndexing.tsx                |  4 +-
 src/stores/vault-indexing-store.ts            |  2 +-
 5 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/components/shared/allocator-card.tsx b/src/components/shared/allocator-card.tsx
index 8cbc91f2..bce2ec71 100644
--- a/src/components/shared/allocator-card.tsx
+++ b/src/components/shared/allocator-card.tsx
@@ -1,12 +1,12 @@
+import Image from 'next/image';
 import type { Address } from 'viem';
-import { AccountIdentity } from './account-identity';
-import { useConnection } from 'wagmi';
-import { SupportedNetworks } from '@/utils/networks';
+import { getSlicedAddress } from '@/utils/address';
 
 type AllocatorCardProps = {
   name: string;
   address: Address;
   description: string;
+  image?: string;
   isSelected?: boolean;
   onSelect?: () => void;
   disabled?: boolean;
@@ -16,29 +16,41 @@ export function AllocatorCard({
   name,
   address,
   description,
+  image,
   isSelected = false,
   onSelect,
   disabled = false,
 }: AllocatorCardProps): JSX.Element {
-  const { chainId } = useConnection();
   return (
     <button
       type="button"
       onClick={onSelect}
       disabled={disabled}
-      className={`w-full rounded border p-4 text-left transition-all duration-200 ease-in-out ${
+      className={`w-full rounded border px-3 py-2.5 text-left transition-all duration-200 ease-in-out ${
         isSelected
           ? 'border-primary bg-primary/10 dark:bg-primary/20'
           : 'border-gray-100 bg-gray-50/50 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900/50 dark:hover:border-gray-600'
       } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
     >
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-1">
         <div className="flex items-center justify-between">
-          <h4 className="font-medium text-primary">{name}</h4>
+          <div className="flex items-center gap-2">
+            {image && (
+              <Image
+                src={image}
+                alt={name}
+                width={20}
+                height={20}
+                className="rounded-full"
+              />
+            )}
+            <span className="text-sm font-medium text-primary">{name}</span>
+            <span className="text-xs text-tertiary">{getSlicedAddress(address)}</span>
+          </div>
           {isSelected && (
-            <div className="flex h-5 w-5 items-center justify-center rounded-full bg-primary">
+            <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary">
               <svg
-                className="h-3 w-3 text-white"
+                className="h-2.5 w-2.5 text-white"
                 fill="none"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -51,14 +63,7 @@ export function AllocatorCard({
             </div>
           )}
         </div>
-        <div className="text-xs text-secondary">
-          <AccountIdentity
-            address={address}
-            chainId={chainId ?? SupportedNetworks.Mainnet}
-            variant="full"
-          />
-        </div>
-        <p className="text-sm text-secondary">{description}</p>
+        <p className="text-xs text-secondary">{description}</p>
       </div>
     </button>
   );
diff --git a/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx b/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx
index a233aa1d..902822d4 100644
--- a/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx
+++ b/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx
@@ -63,13 +63,7 @@ function DeployAdapterStep({
       <div className="space-y-2">
         <div className="flex items-center gap-2 text-xs text-secondary">
           {isDeploying && <Spinner size={12} />}
-          <span>
-            {adapterDetected
-              ? `Adapter detected: ${shortenAddress(adapterAddress)}`
-              : isDeploying
-                ? 'Deploying adapter...'
-                : 'Adapter not detected yet. Click deploy to create one.'}
-          </span>
+          <span>{adapterDetected ? `Adapter detected: ${shortenAddress(adapterAddress)}` : isDeploying ? 'Deploying adapter...' : ''}</span>
         </div>
       </div>
     </div>
@@ -165,7 +159,7 @@ function AgentSelectionStep({
 }) {
   return (
     <div className="space-y-4 font-zen">
-      <p className="text-sm text-secondary">Choose an agent to automate your vault's allocations. You can change this later in settings.</p>
+      <p className="text-sm text-secondary">Choose an allocator to automate your vault's allocations. You can change this later in settings.</p>
       <div className="space-y-3">
         {v2AgentsBase.map((agent) => (
           <AllocatorCard
@@ -173,6 +167,7 @@ function AgentSelectionStep({
             name={agent.name}
             address={agent.address as Address}
             description={agent.strategyDescription}
+            image={agent.image}
             isSelected={selectedAgent === (agent.address as Address)}
             onSelect={() => onSelectAgent(selectedAgent === (agent.address as Address) ? null : (agent.address as Address))}
           />
@@ -239,7 +234,7 @@ export function VaultInitializationModal() {
   });
 
   const [stepIndex, setStepIndex] = useState(0);
-  const [selectedAgent, setSelectedAgent] = useState<Address | null>((v2AgentsBase.at(0)?.address as Address) || null);
+  const [selectedAgent, setSelectedAgent] = useState<Address | null>((v2AgentsBase.at(0)?.address as Address) ?? null);
   const [vaultName, setVaultName] = useState<string>('');
   const [vaultSymbol, setVaultSymbol] = useState<string>('');
   const [deployedAdapter, setDeployedAdapter] = useState<Address>(ZERO_ADDRESS);
@@ -364,7 +359,7 @@ export function VaultInitializationModal() {
   useEffect(() => {
     if (!isOpen) {
       setStepIndex(0);
-      setSelectedAgent(null);
+      setSelectedAgent((v2AgentsBase.at(0)?.address as Address) ?? null);
       setVaultName('');
       setVaultSymbol('');
       setDeployedAdapter(ZERO_ADDRESS);
@@ -385,7 +380,7 @@ export function VaultInitializationModal() {
       case 'metadata':
         return 'Set vault name & symbol';
       case 'agents':
-        return 'Choose an agent';
+        return 'Choose an Allocator';
       case 'finalize':
         return 'Review & finalize';
       default:
@@ -483,7 +478,7 @@ export function VaultInitializationModal() {
         mainIcon={<FiZap className="h-5 w-5" />}
         onClose={close}
       />
-      <ModalBody className="space-y-6 px-8 py-6">
+      <ModalBody className="space-y-6 px-6 py-8">
         {currentStep === 'deploy' && (
           <DeployAdapterStep
             isDeploying={isDeploying}
diff --git a/src/features/autovault/vault-view.tsx b/src/features/autovault/vault-view.tsx
index ee3d19fd..86787130 100644
--- a/src/features/autovault/vault-view.tsx
+++ b/src/features/autovault/vault-view.tsx
@@ -240,7 +240,7 @@ export default function VaultContent() {
               <div className="space-y-1">
                 <p className="text-sm text-primary">Complete vault setup</p>
                 <p className="text-sm text-secondary">
-                  Initialize your vault by deploying an adapter, setting caps, and configuring the registry to start using your vault.
+                  Initialize your vault by deploying an adapter, and setting caps to start auto earning.
                 </p>
               </div>
               <Button
diff --git a/src/hooks/useVaultIndexing.tsx b/src/hooks/useVaultIndexing.tsx
index d0d471df..209920be 100644
--- a/src/hooks/useVaultIndexing.tsx
+++ b/src/hooks/useVaultIndexing.tsx
@@ -41,7 +41,7 @@ export function useVaultIndexing({ vaultAddress, chainId, hasPostInitData, refet
       toastIdRef.current = toast.info(
         <StyledToast
           title="Indexing vault data..."
-          message="This should only take a moment. We're refreshing automatically."
+          message="This can take up to 10 minutes. We're refreshing automatically."
         />,
         {
           autoClose: false,
@@ -73,7 +73,7 @@ export function useVaultIndexing({ vaultAddress, chainId, hasPostInitData, refet
       if (Date.now() - startTime > INDEXING_TIMEOUT_MS) {
         clearInterval(intervalId);
         stopIndexing();
-        styledInfo('Indexing delayed', 'Data is taking longer than expected. Please try refreshing manually using the refresh button.');
+        styledInfo('Indexing delayed', 'Data is taking longer than 10 minutes. Please try refreshing manually using the refresh button.');
         return;
       }
 
diff --git a/src/stores/vault-indexing-store.ts b/src/stores/vault-indexing-store.ts
index a90d3060..65162689 100644
--- a/src/stores/vault-indexing-store.ts
+++ b/src/stores/vault-indexing-store.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import type { Address } from 'viem';
 
-export const INDEXING_TIMEOUT_MS = 2 * 60 * 1000; // 2 minutes
+export const INDEXING_TIMEOUT_MS = 10 * 60 * 1000; // 10 minutes
 
 type IndexingVault = {
   address: Address;

From caf894263180078adf9ba4733703b60d21b302d2 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Mon, 26 Jan 2026 11:43:53 +0800
Subject: [PATCH 3/6] refactor: remove collatearl cap settings

---
 .../vault-detail/settings/EditCaps.tsx        | 433 ++++++++----------
 .../vault-detail/settings/MarketCapsTable.tsx | 220 +++++----
 src/modals/vault/vault-deposit-modal.tsx      |   2 +-
 3 files changed, 315 insertions(+), 340 deletions(-)

diff --git a/src/features/autovault/components/vault-detail/settings/EditCaps.tsx b/src/features/autovault/components/vault-detail/settings/EditCaps.tsx
index 0611ac51..5bfb918e 100644
--- a/src/features/autovault/components/vault-detail/settings/EditCaps.tsx
+++ b/src/features/autovault/components/vault-detail/settings/EditCaps.tsx
@@ -2,11 +2,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PlusIcon } from '@radix-ui/react-icons';
 import { toast } from 'react-toastify';
 import { type Address, parseUnits, maxUint128 } from 'viem';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
 import { useTokensQuery } from '@/hooks/queries/useTokensQuery';
-import { TokenIcon } from '@/components/shared/token-icon';
 import type { VaultV2Cap } from '@/data-sources/morpho-api/v2-vaults';
 import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import { useProcessedMarkets } from '@/hooks/useProcessedMarkets';
@@ -28,14 +26,6 @@ type EditCapsProps = {
   onSave: (caps: VaultV2Cap[]) => Promise<boolean>;
 };
 
-type CollateralCapInfo = {
-  collateralAddress: Address;
-  collateralSymbol: string;
-  relativeCap: string;
-  absoluteCap: string;
-  existingCapId?: string;
-};
-
 type MarketCapInfo = {
   market: Market;
   relativeCap: string;
@@ -45,7 +35,7 @@ type MarketCapInfo = {
 
 export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdating, adapterAddress, onCancel, onSave }: EditCapsProps) {
   const [marketCaps, setMarketCaps] = useState<Map<string, MarketCapInfo>>(new Map());
-  const [collateralCaps, setCollateralCaps] = useState<Map<string, CollateralCapInfo>>(new Map());
+  const [removedMarketIds, setRemovedMarketIds] = useState<Set<string>>(new Set());
   const [showAddMarketModal, setShowAddMarketModal] = useState(false);
 
   // Track if user has made edits to prevent state reset from background refetches
@@ -65,6 +55,22 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
 
   const vaultAssetDecimals = vaultAssetToken?.decimals ?? 18;
 
+  // Build read-only collateral cap lookup from existing on-chain data
+  // Used to compute effective caps and show constraint indicators
+  const collateralCapMap = useMemo(() => {
+    const capMap = new Map<string, { relativeCap: number; absoluteCap: string }>();
+    for (const cap of existingCaps?.collateralCaps ?? []) {
+      const parsed = parseCapIdParams(cap.idParams);
+      if (parsed.collateralToken) {
+        capMap.set(parsed.collateralToken.toLowerCase(), {
+          relativeCap: Number(cap.relativeCap) / 1e16,
+          absoluteCap: cap.absoluteCap,
+        });
+      }
+    }
+    return capMap;
+  }, [existingCaps]);
+
   // Filter available markets for adding
   const availableMarkets = useMemo(() => {
     if (!markets || !vaultAsset) return [];
@@ -77,36 +83,8 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
     if (hasUserEditsRef.current) return;
     if (availableMarkets.length === 0) return;
 
-    // Initialize collateral caps
-    const collateralCapsMap = new Map<string, CollateralCapInfo>();
-    existingCaps?.collateralCaps.forEach((cap) => {
-      const parsed = parseCapIdParams(cap.idParams);
-      if (parsed.collateralToken) {
-        const token = findToken(parsed.collateralToken, chainId);
-
-        const relativeCapBigInt = BigInt(cap.relativeCap);
-        const relativeCap = (Number(relativeCapBigInt) / 1e16).toString();
-
-        const absoluteCapBigInt = BigInt(cap.absoluteCap);
-        const absoluteCap =
-          absoluteCapBigInt === 0n || absoluteCapBigInt >= maxUint128
-            ? ''
-            : (Number(absoluteCapBigInt) / 10 ** vaultAssetDecimals).toString();
-
-        collateralCapsMap.set(parsed.collateralToken.toLowerCase(), {
-          collateralAddress: parsed.collateralToken,
-          collateralSymbol: token?.symbol ?? 'Unknown',
-          relativeCap,
-          absoluteCap,
-          existingCapId: cap.capId,
-        });
-      }
-    });
-    setCollateralCaps(collateralCapsMap);
-
-    // Initialize market caps
     const marketCapsMap = new Map<string, MarketCapInfo>();
-    existingCaps?.marketCaps.forEach((cap) => {
+    for (const cap of existingCaps?.marketCaps ?? []) {
       const parsed = parseCapIdParams(cap.idParams);
       const market = availableMarkets.find((m) => m.uniqueKey.toLowerCase() === parsed.marketId?.toLowerCase());
       if (market) {
@@ -126,37 +104,21 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
           existingCapId: cap.capId,
         });
       }
-    });
+    }
     setMarketCaps(marketCapsMap);
-  }, [availableMarkets, chainId, existingCaps, findToken, vaultAssetDecimals]);
+  }, [availableMarkets, existingCaps, vaultAssetDecimals]);
 
   const handleAddMarkets = useCallback((newMarkets: Market[]) => {
     hasUserEditsRef.current = true;
     setMarketCaps((prev) => {
       const next = new Map(prev);
-      newMarkets.forEach((market) => {
+      for (const market of newMarkets) {
         next.set(market.uniqueKey.toLowerCase(), {
           market,
           relativeCap: '100',
           absoluteCap: '',
         });
-
-        // Auto-create collateral cap if needed
-        const collateralAddr = market.collateralAsset.address.toLowerCase();
-        setCollateralCaps((prevCaps) => {
-          if (!prevCaps.has(collateralAddr)) {
-            const newCaps = new Map(prevCaps);
-            newCaps.set(collateralAddr, {
-              collateralAddress: market.collateralAsset.address as Address,
-              collateralSymbol: market.collateralAsset.symbol,
-              relativeCap: '100',
-              absoluteCap: '',
-            });
-            return newCaps;
-          }
-          return prevCaps;
-        });
-      });
+      }
       return next;
     });
   }, []);
@@ -173,17 +135,37 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
     });
   }, []);
 
-  const handleUpdateCollateralCap = useCallback((collateralAddr: string, field: 'relativeCap' | 'absoluteCap', value: string) => {
+  const handleRemoveMarketCap = useCallback((marketId: string) => {
     hasUserEditsRef.current = true;
-    setCollateralCaps((prev) => {
-      const next = new Map(prev);
-      const existing = next.get(collateralAddr.toLowerCase());
-      if (existing) {
-        next.set(collateralAddr.toLowerCase(), {
-          ...existing,
-          [field]: value,
-        });
+    const key = marketId.toLowerCase();
+    let wasNewCap = false;
+
+    setMarketCaps((prev) => {
+      const info = prev.get(key);
+      if (info && !info.existingCapId) {
+        // Newly added cap — remove from state entirely
+        wasNewCap = true;
+        const next = new Map(prev);
+        next.delete(key);
+        return next;
       }
+      return prev;
+    });
+
+    // Existing on-chain cap — mark as removed (will be zeroed on save)
+    if (!wasNewCap) {
+      setRemovedMarketIds((prev) => {
+        const next = new Set(prev);
+        next.add(key);
+        return next;
+      });
+    }
+  }, []);
+
+  const handleUndoRemoveMarketCap = useCallback((marketId: string) => {
+    setRemovedMarketIds((prev) => {
+      const next = new Set(prev);
+      next.delete(marketId.toLowerCase());
       return next;
     });
   }, []);
@@ -194,11 +176,9 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
   }, [onCancel]);
 
   const hasChanges = useMemo(() => {
-    // Check for new caps
     const hasNewMarkets = Array.from(marketCaps.values()).some((m) => !m.existingCapId);
-    const hasNewCollaterals = Array.from(collateralCaps.values()).some((c) => !c.existingCapId);
+    const hasRemovedMarkets = removedMarketIds.size > 0;
 
-    // Check for modified caps
     const hasModifiedMarkets = Array.from(marketCaps.values()).some((info) => {
       if (!info.existingCapId) return false;
       const existing = existingCaps?.marketCaps.find((cap) => {
@@ -215,24 +195,8 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
       return info.relativeCap !== existingRelative || info.absoluteCap !== existingAbsolute;
     });
 
-    const hasModifiedCollaterals = Array.from(collateralCaps.values()).some((info) => {
-      if (!info.existingCapId) return false;
-      const existing = existingCaps?.collateralCaps.find((cap) => {
-        const parsed = parseCapIdParams(cap.idParams);
-        return parsed.collateralToken?.toLowerCase() === info.collateralAddress.toLowerCase();
-      });
-      if (!existing) return false;
-      const existingRelative = (Number(BigInt(existing.relativeCap)) / 1e16).toString();
-      const existingAbsoluteBigInt = BigInt(existing.absoluteCap);
-      const existingAbsolute =
-        existingAbsoluteBigInt === 0n || existingAbsoluteBigInt >= maxUint128
-          ? ''
-          : (Number(existingAbsoluteBigInt) / 10 ** vaultAssetDecimals).toString();
-      return info.relativeCap !== existingRelative || info.absoluteCap !== existingAbsolute;
-    });
-
-    return hasNewMarkets || hasNewCollaterals || hasModifiedMarkets || hasModifiedCollaterals;
-  }, [marketCaps, collateralCaps, existingCaps, vaultAssetDecimals]);
+    return hasNewMarkets || hasModifiedMarkets || hasRemovedMarkets;
+  }, [marketCaps, removedMarketIds, existingCaps, vaultAssetDecimals]);
 
   const handleSave = useCallback(async () => {
     if (needSwitchChain) {
@@ -248,70 +212,102 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
     const capsToUpdate: VaultV2Cap[] = [];
 
     // Add or fix adapter cap to ensure it's always 100% relative + maxUint128 absolute
-    if (adapterAddress) {
-      const targetRelativeCap = parseUnits('100', 16);
-      const targetAbsoluteCap = maxUint128;
-
-      const currentRelativeCap = existingCaps?.adapterCap ? BigInt(existingCaps.adapterCap.relativeCap) : 0n;
-      const currentAbsoluteCap = existingCaps?.adapterCap ? BigInt(existingCaps.adapterCap.absoluteCap) : 0n;
+    const targetRelativeCap = parseUnits('100', 16);
+    const targetAbsoluteCap = maxUint128;
+
+    const currentRelativeCap = existingCaps?.adapterCap ? BigInt(existingCaps.adapterCap.relativeCap) : 0n;
+    const currentAbsoluteCap = existingCaps?.adapterCap ? BigInt(existingCaps.adapterCap.absoluteCap) : 0n;
+
+    // Only update if not already at target values
+    if (currentRelativeCap !== targetRelativeCap || currentAbsoluteCap !== targetAbsoluteCap) {
+      const { params, id } = getAdapterCapId(adapterAddress);
+      capsToUpdate.push({
+        capId: id,
+        idParams: params,
+        relativeCap: targetRelativeCap.toString(),
+        absoluteCap: targetAbsoluteCap.toString(),
+        oldRelativeCap: currentRelativeCap.toString(),
+        oldAbsoluteCap: currentAbsoluteCap.toString(),
+      });
+    }
 
-      // Only update if not already at target values
-      if (currentRelativeCap !== targetRelativeCap || currentAbsoluteCap !== targetAbsoluteCap) {
-        const { params, id } = getAdapterCapId(adapterAddress);
-        capsToUpdate.push({
-          capId: id,
-          idParams: params,
-          relativeCap: targetRelativeCap.toString(),
-          absoluteCap: targetAbsoluteCap.toString(),
-          oldRelativeCap: currentRelativeCap.toString(),
-          oldAbsoluteCap: currentAbsoluteCap.toString(),
-        });
+    // Auto-derive collateral caps from active market caps
+    // Collect active collateral addresses from non-removed market caps
+    const activeCollaterals = new Set<string>();
+    for (const [key, info] of marketCaps.entries()) {
+      if (!removedMarketIds.has(key)) {
+        activeCollaterals.add(info.market.collateralAsset.address.toLowerCase());
       }
     }
 
-    // Add collateral caps with delta calculation (only when changed)
-    for (const [, info] of collateralCaps.entries()) {
-      const newRelativeCapBigInt =
-        info.relativeCap && info.relativeCap !== '' && Number.parseFloat(info.relativeCap) > 0 ? parseUnits(info.relativeCap, 16) : 0n;
-
-      const newAbsoluteCapBigInt =
-        info.absoluteCap && info.absoluteCap !== '' && Number.parseFloat(info.absoluteCap) > 0
-          ? parseUnits(info.absoluteCap, vaultAssetDecimals)
-          : maxUint128;
-
-      // Find existing cap to calculate delta
-      const existingCap = existingCaps?.collateralCaps.find((cap) => {
+    // Ensure each active collateral has max caps
+    for (const collateralAddr of activeCollaterals) {
+      const existing = existingCaps?.collateralCaps.find((cap) => {
         const parsed = parseCapIdParams(cap.idParams);
-        return parsed.collateralToken?.toLowerCase() === info.collateralAddress.toLowerCase();
+        return parsed.collateralToken?.toLowerCase() === collateralAddr;
       });
 
-      const oldRelativeCap = existingCap ? BigInt(existingCap.relativeCap) : 0n;
-      const oldAbsoluteCap = existingCap ? BigInt(existingCap.absoluteCap) : 0n;
-
-      // Only include if changed
-      if (oldRelativeCap !== newRelativeCapBigInt || oldAbsoluteCap !== newAbsoluteCapBigInt) {
-        const { params, id } = getCollateralCapId(info.collateralAddress);
+      const oldRelativeCap = existing ? BigInt(existing.relativeCap) : 0n;
+      const oldAbsoluteCap = existing ? BigInt(existing.absoluteCap) : 0n;
 
+      if (oldRelativeCap !== targetRelativeCap || oldAbsoluteCap !== targetAbsoluteCap) {
+        const { params, id } = getCollateralCapId(collateralAddr as Address);
         capsToUpdate.push({
           capId: id,
           idParams: params,
-          relativeCap: newRelativeCapBigInt.toString(),
-          absoluteCap: newAbsoluteCapBigInt.toString(),
+          relativeCap: targetRelativeCap.toString(),
+          absoluteCap: targetAbsoluteCap.toString(),
           oldRelativeCap: oldRelativeCap.toString(),
           oldAbsoluteCap: oldAbsoluteCap.toString(),
         });
       }
     }
 
-    // Add market caps with delta calculation (only when changed)
-    for (const [, info] of marketCaps.entries()) {
-      const newRelativeCapBigInt =
-        info.relativeCap && info.relativeCap !== '' && Number.parseFloat(info.relativeCap) > 0 ? parseUnits(info.relativeCap, 16) : 0n;
+    // Zero out collateral caps for collaterals with no active markets
+    for (const cap of existingCaps?.collateralCaps ?? []) {
+      const parsed = parseCapIdParams(cap.idParams);
+      const addr = parsed.collateralToken?.toLowerCase();
+      if (addr && !activeCollaterals.has(addr)) {
+        const oldRelativeCap = BigInt(cap.relativeCap);
+        const oldAbsoluteCap = BigInt(cap.absoluteCap);
+
+        if (oldRelativeCap !== 0n || oldAbsoluteCap !== 0n) {
+          const { params, id } = getCollateralCapId(addr as Address);
+          capsToUpdate.push({
+            capId: id,
+            idParams: params,
+            relativeCap: '0',
+            absoluteCap: '0',
+            oldRelativeCap: oldRelativeCap.toString(),
+            oldAbsoluteCap: oldAbsoluteCap.toString(),
+          });
+        }
+      }
+    }
+
+    // Add market caps with delta calculation (handles both active and removed)
+    for (const [key, info] of marketCaps.entries()) {
+      const isRemoved = removedMarketIds.has(key);
+
+      // Skip newly-added-then-removed caps (nothing to zero out on-chain)
+      if (isRemoved && !info.existingCapId) continue;
+
+      let newRelativeCapBigInt = 0n;
+      let newAbsoluteCapBigInt = 0n;
+
+      if (!isRemoved) {
+        const relativeVal = Number.parseFloat(info.relativeCap);
+        if (info.relativeCap !== '' && relativeVal > 0) {
+          newRelativeCapBigInt = parseUnits(info.relativeCap, 16);
+        }
 
-      const newAbsoluteCapBigInt =
-        info.absoluteCap && info.absoluteCap !== '' && Number.parseFloat(info.absoluteCap) > 0
-          ? parseUnits(info.absoluteCap, vaultAssetDecimals)
-          : maxUint128;
+        const absoluteVal = Number.parseFloat(info.absoluteCap);
+        if (info.absoluteCap !== '' && absoluteVal > 0) {
+          newAbsoluteCapBigInt = parseUnits(info.absoluteCap, vaultAssetDecimals);
+        } else {
+          newAbsoluteCapBigInt = maxUint128;
+        }
+      }
 
       // Find existing cap to calculate delta
       const existingCap = existingCaps?.marketCaps.find((cap) => {
@@ -353,9 +349,8 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
     try {
       const success = await onSave(capsToUpdate);
       if (success) {
-        // Reset edit tracking on successful save
         hasUserEditsRef.current = false;
-        // Parent handles switching back to read mode
+        setRemovedMarketIds(new Set());
       } else {
         toast.error('Failed to save changes');
       }
@@ -363,7 +358,17 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
       console.error('Save error:', error);
       toast.error('Failed to save changes');
     }
-  }, [marketCaps, collateralCaps, needSwitchChain, switchToNetwork, onSave, adapterAddress, vaultAsset, vaultAssetDecimals, existingCaps]);
+  }, [
+    marketCaps,
+    removedMarketIds,
+    needSwitchChain,
+    switchToNetwork,
+    onSave,
+    adapterAddress,
+    vaultAsset,
+    vaultAssetDecimals,
+    existingCaps,
+  ]);
 
   if (marketsLoading) {
     return (
@@ -373,7 +378,7 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
     );
   }
 
-  const existingMarketIds = new Set(Array.from(marketCaps.keys()));
+  const existingMarketIds = new Set(Array.from(marketCaps.keys()).filter((key) => !removedMarketIds.has(key)));
 
   return (
     <>
@@ -387,8 +392,12 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
 
         {/* Adapter Cap Warning */}
         {(() => {
-          // Check if adapter cap needs attention
           const hasAdapterCap = !!existingCaps?.adapterCap;
+          const hasOtherCaps = (existingCaps?.collateralCaps?.length ?? 0) > 0 || (existingCaps?.marketCaps?.length ?? 0) > 0;
+
+          // No warning when user has no caps at all (fresh state)
+          if (!hasOtherCaps && !hasAdapterCap) return null;
+
           if (!hasAdapterCap) {
             return (
               <div className="rounded bg-warning/10 border border-warning/30 p-4">
@@ -432,105 +441,12 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
           return null;
         })()}
 
-        {/* Collateral Caps Section */}
-        {collateralCaps.size > 0 && (
-          <div className="space-y-2">
-            <div className="space-y-1">
-              <p className="text-xs uppercase text-secondary">Collateral Caps ({collateralCaps.size})</p>
-              <p className="text-xs text-secondary">Shared limit across all markets using the same collateral.</p>
-            </div>
-
-            {/* Column Headers */}
-            <div className="flex items-center gap-2 pb-1 text-xs font-medium text-secondary">
-              <div className="flex-1">Collateral</div>
-              <div className="w-32 text-right">Relative %</div>
-              <div className="w-36 text-right">Absolute ({vaultAssetToken?.symbol ?? 'units'})</div>
-            </div>
-
-            <div className="space-y-1">
-              {Array.from(collateralCaps.values()).map((info) => {
-                const isNew = !info.existingCapId;
-
-                return (
-                  <div
-                    key={info.collateralAddress}
-                    className="flex items-center gap-2 text-xs rounded bg-surface py-1 px-2"
-                  >
-                    <TokenIcon
-                      address={info.collateralAddress}
-                      chainId={chainId}
-                      width={20}
-                      height={20}
-                    />
-                    <div className="flex-1 flex items-center gap-2">
-                      <span className="font-medium">{info.collateralSymbol}</span>
-                      {isNew && <Badge variant="primary">New</Badge>}
-                    </div>
-                    <div className="flex items-center gap-1 w-32">
-                      <input
-                        type="text"
-                        value={info.relativeCap}
-                        onChange={(e) => {
-                          const val = e.target.value;
-                          if (val === '' || /^\d*\.?\d*$/.test(val)) {
-                            const num = Number.parseFloat(val);
-                            if (val === '' || (num >= 0 && num <= 100)) {
-                              handleUpdateCollateralCap(info.collateralAddress, 'relativeCap', val);
-                            }
-                          }
-                        }}
-                        placeholder="100"
-                        disabled={!isOwner}
-                        className="w-16 rounded bg-hovered px-2 py-1 text-right text-xs shadow-sm focus:outline-none focus:ring-1 focus:ring-primary"
-                      />
-                      <span className="text-secondary">%</span>
-                      <button
-                        type="button"
-                        onClick={() => handleUpdateCollateralCap(info.collateralAddress, 'relativeCap', '100')}
-                        disabled={!isOwner}
-                        className="px-1.5 py-0.5 text-xs rounded bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
-                      >
-                        Max
-                      </button>
-                    </div>
-                    <div className="flex items-center gap-1 w-36">
-                      <input
-                        type="text"
-                        value={info.absoluteCap === maxUint128.toString() ? '' : info.absoluteCap}
-                        onChange={(e) => {
-                          const val = e.target.value;
-                          if (val === '' || /^\d*\.?\d*$/.test(val)) {
-                            handleUpdateCollateralCap(info.collateralAddress, 'absoluteCap', val);
-                          }
-                        }}
-                        placeholder="No limit"
-                        disabled={!isOwner}
-                        className="w-24 rounded bg-hovered px-2 py-1 text-right text-xs shadow-sm focus:outline-none focus:ring-1 focus:ring-primary"
-                      />
-                      <button
-                        type="button"
-                        onClick={() => handleUpdateCollateralCap(info.collateralAddress, 'absoluteCap', '')}
-                        disabled={!isOwner}
-                        className="px-1.5 py-0.5 text-xs rounded bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
-                      >
-                        Max
-                      </button>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
-
         {/* Market Caps Section */}
         {marketCaps.size > 0 && (
           <div className="space-y-2">
             <div className="space-y-1">
-              <p className="text-xs uppercase text-secondary">Market Caps ({marketCaps.size})</p>
-              <p className="text-xs text-secondary">
-                Individual limits per market. Effective allocation is capped by the smaller of this and the collateral cap above.
-              </p>
+              <p className="text-xs uppercase text-secondary">Market Caps ({marketCaps.size - removedMarketIds.size})</p>
+              <p className="text-xs text-secondary">Individual limits per market for how agents can allocate vault funds.</p>
             </div>
 
             {/* Column Headers */}
@@ -538,17 +454,26 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
               <div className="flex-1">Market</div>
               <div className="w-32 text-right">Relative %</div>
               <div className="w-36 text-right">Absolute ({vaultAssetToken?.symbol ?? 'units'})</div>
+              {isOwner && <div className="w-6 shrink-0" />}
             </div>
 
             <MarketCapsTable
-              markets={Array.from(marketCaps.values()).map((info) => ({
-                market: info.market,
-                relativeCap: info.relativeCap,
-                absoluteCap: info.absoluteCap,
-                isEditable: true,
-                isNew: !info.existingCapId,
-                onUpdateCap: (field, value) => handleUpdateMarketCap(info.market.uniqueKey, field, value),
-              }))}
+              markets={Array.from(marketCaps.values()).map((info) => {
+                const collateralAddr = info.market.collateralAsset.address.toLowerCase();
+                const collateralInfo = collateralCapMap.get(collateralAddr);
+                return {
+                  market: info.market,
+                  relativeCap: info.relativeCap,
+                  absoluteCap: info.absoluteCap,
+                  isEditable: true,
+                  isNew: !info.existingCapId,
+                  isRemoved: removedMarketIds.has(info.market.uniqueKey.toLowerCase()),
+                  collateralCapPercent: collateralInfo?.relativeCap,
+                  onUpdateCap: (field, value) => handleUpdateMarketCap(info.market.uniqueKey, field, value),
+                  onRemove: () => handleRemoveMarketCap(info.market.uniqueKey),
+                  onUndoRemove: () => handleUndoRemoveMarketCap(info.market.uniqueKey),
+                };
+              })}
               showHeaders={false}
               vaultAssetSymbol={vaultAssetToken?.symbol}
               vaultAssetAddress={vaultAsset}
@@ -588,15 +513,17 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
               disabled={!hasChanges || isUpdating}
               onClick={() => void handleSave()}
             >
-              {isUpdating ? (
-                <span className="flex items-center gap-2">
-                  <Spinner size={12} /> Saving...
-                </span>
-              ) : needSwitchChain ? (
-                'Switch Network'
-              ) : (
-                'Save Changes'
-              )}
+              {(() => {
+                if (isUpdating) {
+                  return (
+                    <span className="flex items-center gap-2">
+                      <Spinner size={12} /> Saving...
+                    </span>
+                  );
+                }
+                if (needSwitchChain) return 'Switch Network';
+                return 'Save Changes';
+              })()}
             </Button>
           </div>
         </div>
diff --git a/src/features/autovault/components/vault-detail/settings/MarketCapsTable.tsx b/src/features/autovault/components/vault-detail/settings/MarketCapsTable.tsx
index c2cef715..f23a8257 100644
--- a/src/features/autovault/components/vault-detail/settings/MarketCapsTable.tsx
+++ b/src/features/autovault/components/vault-detail/settings/MarketCapsTable.tsx
@@ -1,5 +1,5 @@
-import { maxUint128 } from 'viem';
-import type { Address } from 'viem';
+import { Cross2Icon, InfoCircledIcon } from '@radix-ui/react-icons';
+import { type Address, maxUint128 } from 'viem';
 import { Badge } from '@/components/ui/badge';
 import { MarketIdentity, MarketIdentityFocus } from '@/features/markets/components/market-identity';
 import { findToken } from '@/utils/tokens';
@@ -11,7 +11,11 @@ type MarketCapRow = {
   absoluteCap: string;
   isEditable?: boolean;
   isNew?: boolean;
+  isRemoved?: boolean;
+  collateralCapPercent?: number;
   onUpdateCap?: (field: 'relativeCap' | 'absoluteCap', value: string) => void;
+  onRemove?: () => void;
+  onUndoRemove?: () => void;
 };
 
 type MarketCapsTableProps = {
@@ -31,23 +35,17 @@ export function MarketCapsTable({
   chainId,
   isOwner = true,
 }: MarketCapsTableProps) {
-  // Get decimals for proper formatting
   const vaultAssetDecimals = vaultAssetAddress && chainId ? (findToken(vaultAssetAddress, chainId)?.decimals ?? 18) : 18;
 
   const formatAbsoluteCap = (cap: string): string => {
-    if (!cap || cap === '') {
-      return 'No limit';
-    }
+    if (!cap) return 'No limit';
 
     try {
       const capBigInt = BigInt(cap);
-      if (capBigInt >= maxUint128) {
-        return 'No limit';
-      }
+      if (capBigInt >= maxUint128) return 'No limit';
       const value = Number(capBigInt) / 10 ** vaultAssetDecimals;
       return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
-    } catch (_e) {
-      // If we can't parse it as BigInt, return as is
+    } catch {
       return cap;
     }
   };
@@ -66,84 +64,134 @@ export function MarketCapsTable({
         </div>
       )}
       <div className="space-y-1">
-        {markets.map((row) => (
-          <div
-            key={row.market.uniqueKey}
-            className="flex items-center gap-2 rounded bg-surface py-1 px-2"
-          >
-            <div className="flex-1 flex items-center gap-2">
-              <MarketIdentity
-                market={row.market}
-                chainId={chainId ?? row.market.morphoBlue.chain.id}
-                focus={MarketIdentityFocus.Collateral}
-                showLltv
-                showOracle
-                iconSize={20}
-                showExplorerLink
-              />
-              {row.isNew && <Badge variant="primary">New</Badge>}
-            </div>
-            {row.isEditable && row.onUpdateCap ? (
-              <>
-                <div className="flex items-center gap-1 w-32">
-                  <input
-                    type="text"
-                    value={row.relativeCap}
-                    onChange={(e) => {
-                      const val = e.target.value;
-                      if (val === '' || /^\d*\.?\d*$/.test(val)) {
-                        const num = Number.parseFloat(val);
-                        if (val === '' || (num >= 0 && num <= 100)) {
-                          row.onUpdateCap!('relativeCap', val);
-                        }
-                      }
-                    }}
-                    placeholder="100"
-                    disabled={!isOwner}
-                    className="w-16 rounded bg-hovered px-2 py-1 text-right text-xs shadow-sm focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
+        {markets.map((row) => {
+          const marketCapNum = Number.parseFloat(row.relativeCap) || 0;
+          const isCollateralConstraining =
+            row.collateralCapPercent !== undefined && row.collateralCapPercent < marketCapNum && !row.isRemoved;
+
+          return (
+            <div
+              key={row.market.uniqueKey}
+              className={`rounded bg-surface py-1 px-2 ${row.isRemoved ? 'opacity-50' : ''}`}
+            >
+              <div className="flex items-center gap-2">
+                <div className="flex-1 flex items-center gap-2">
+                  <MarketIdentity
+                    market={row.market}
+                    chainId={chainId ?? row.market.morphoBlue.chain.id}
+                    focus={MarketIdentityFocus.Collateral}
+                    showLltv
+                    showOracle
+                    iconSize={20}
+                    showExplorerLink
                   />
-                  <span className="text-xs text-secondary">%</span>
-                  <button
-                    type="button"
-                    onClick={() => row.onUpdateCap!('relativeCap', '100')}
-                    disabled={!isOwner}
-                    className="px-1.5 py-0.5 text-xs rounded bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Max
-                  </button>
+                  {row.isNew && !row.isRemoved && <Badge variant="primary">New</Badge>}
                 </div>
-                <div className="flex items-center gap-1 w-36">
-                  <input
-                    type="text"
-                    value={row.absoluteCap === maxUint128.toString() ? '' : row.absoluteCap}
-                    onChange={(e) => {
-                      const val = e.target.value;
-                      if (val === '' || /^\d*\.?\d*$/.test(val)) {
-                        row.onUpdateCap!('absoluteCap', val);
-                      }
-                    }}
-                    placeholder="No limit"
-                    disabled={!isOwner}
-                    className="w-24 rounded bg-hovered px-2 py-1 text-right text-xs shadow-sm focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => row.onUpdateCap!('absoluteCap', '')}
-                    disabled={!isOwner}
-                    className="px-1.5 py-0.5 text-xs rounded bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Max
-                  </button>
+                {(() => {
+                  if (row.isRemoved) {
+                    return (
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs text-secondary">Removed</span>
+                        {row.onUndoRemove && (
+                          <button
+                            type="button"
+                            onClick={row.onUndoRemove}
+                            className="px-1.5 py-0.5 text-xs rounded-sm bg-primary/10 text-primary hover:bg-primary/20"
+                          >
+                            Undo
+                          </button>
+                        )}
+                      </div>
+                    );
+                  }
+
+                  if (row.isEditable && row.onUpdateCap) {
+                    return (
+                      <>
+                        <div className="flex items-center gap-1 w-32">
+                          <input
+                            type="text"
+                            value={row.relativeCap}
+                            onChange={(e) => {
+                              const val = e.target.value;
+                              if (val === '' || /^\d*\.?\d*$/.test(val)) {
+                                const num = Number.parseFloat(val);
+                                if (val === '' || (num >= 0 && num <= 100)) {
+                                  row.onUpdateCap!('relativeCap', val);
+                                }
+                              }
+                            }}
+                            placeholder="100"
+                            disabled={!isOwner}
+                            className="w-16 rounded bg-hovered px-2 py-1 text-right text-xs shadow-sm focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
+                          />
+                          <span className="text-xs text-secondary">%</span>
+                          <button
+                            type="button"
+                            onClick={() => row.onUpdateCap!('relativeCap', '100')}
+                            disabled={!isOwner}
+                            className="px-1.5 py-0.5 text-xs rounded-sm bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
+                          >
+                            Max
+                          </button>
+                        </div>
+                        <div className="flex items-center gap-1 w-36">
+                          <input
+                            type="text"
+                            value={row.absoluteCap === maxUint128.toString() ? '' : row.absoluteCap}
+                            onChange={(e) => {
+                              const val = e.target.value;
+                              if (val === '' || /^\d*\.?\d*$/.test(val)) {
+                                row.onUpdateCap!('absoluteCap', val);
+                              }
+                            }}
+                            placeholder="No limit"
+                            disabled={!isOwner}
+                            className="w-24 rounded bg-hovered px-2 py-1 text-right text-xs shadow-sm focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
+                          />
+                          <button
+                            type="button"
+                            onClick={() => row.onUpdateCap!('absoluteCap', '')}
+                            disabled={!isOwner}
+                            className="px-1.5 py-0.5 text-xs rounded-sm bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
+                          >
+                            Max
+                          </button>
+                        </div>
+                        {row.onRemove && isOwner && (
+                          <button
+                            type="button"
+                            onClick={row.onRemove}
+                            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm text-secondary transition-colors hover:bg-red-500/10 hover:text-red-500"
+                            aria-label="Remove market cap"
+                          >
+                            <Cross2Icon className="h-3.5 w-3.5" />
+                          </button>
+                        )}
+                      </>
+                    );
+                  }
+
+                  return (
+                    <>
+                      <div className="w-20 text-right text-sm">{row.relativeCap}%</div>
+                      <div className="w-24 text-right text-sm text-secondary">{formatAbsoluteCap(row.absoluteCap)}</div>
+                    </>
+                  );
+                })()}
+              </div>
+              {isCollateralConstraining && (
+                <div className="mt-1 ml-7 flex items-center gap-1.5 text-xs text-secondary">
+                  <InfoCircledIcon className="h-3 w-3 shrink-0" />
+                  <span>
+                    Effective cap limited to <span className="text-primary">{row.collateralCapPercent?.toFixed(2)}%</span> by existing
+                    collateral cap
+                  </span>
                 </div>
-              </>
-            ) : (
-              <>
-                <div className="w-20 text-right text-sm">{row.relativeCap}%</div>
-                <div className="w-24 text-right text-sm text-secondary">{formatAbsoluteCap(row.absoluteCap)}</div>
-              </>
-            )}
-          </div>
-        ))}
+              )}
+            </div>
+          );
+        })}
       </div>
     </div>
   );
diff --git a/src/modals/vault/vault-deposit-modal.tsx b/src/modals/vault/vault-deposit-modal.tsx
index cdae4b3d..c37d7a51 100644
--- a/src/modals/vault/vault-deposit-modal.tsx
+++ b/src/modals/vault/vault-deposit-modal.tsx
@@ -119,7 +119,7 @@ export function VaultDepositModal({
                 variant="primary"
                 className="ml-2 min-w-32"
               >
-                {!permit2Authorized || (!usePermit2Setting && !isApproved) ? 'Approve' : 'Deposit'}
+                Deposit
               </ExecuteTransactionButton>
             </div>
           </div>

From 54e4cdc810145b5406f77f9dc2105ddfed94ff6c Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Mon, 26 Jan 2026 11:57:12 +0800
Subject: [PATCH 4/6] refactor: simplify flow

---
 .../modals/vault-initialization-modal.tsx      |  4 +++-
 .../vault-detail/settings/EditCaps.tsx         | 18 ++++++------------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx b/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx
index 902822d4..b94b7356 100644
--- a/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx
+++ b/src/features/autovault/components/vault-detail/modals/vault-initialization-modal.tsx
@@ -159,7 +159,9 @@ function AgentSelectionStep({
 }) {
   return (
     <div className="space-y-4 font-zen">
-      <p className="text-sm text-secondary">Choose an allocator to automate your vault's allocations. You can change this later in settings.</p>
+      <p className="text-sm text-secondary">
+        Choose an allocator to automate your vault's allocations. You can change this later in settings.
+      </p>
       <div className="space-y-3">
         {v2AgentsBase.map((agent) => (
           <AllocatorCard
diff --git a/src/features/autovault/components/vault-detail/settings/EditCaps.tsx b/src/features/autovault/components/vault-detail/settings/EditCaps.tsx
index 5bfb918e..ab4676ce 100644
--- a/src/features/autovault/components/vault-detail/settings/EditCaps.tsx
+++ b/src/features/autovault/components/vault-detail/settings/EditCaps.tsx
@@ -138,28 +138,22 @@ export function EditCaps({ existingCaps, vaultAsset, chainId, isOwner, isUpdatin
   const handleRemoveMarketCap = useCallback((marketId: string) => {
     hasUserEditsRef.current = true;
     const key = marketId.toLowerCase();
-    let wasNewCap = false;
 
     setMarketCaps((prev) => {
       const info = prev.get(key);
-      if (info && !info.existingCapId) {
+      if (!info) return prev;
+
+      if (!info.existingCapId) {
         // Newly added cap — remove from state entirely
-        wasNewCap = true;
         const next = new Map(prev);
         next.delete(key);
         return next;
       }
+
+      // Existing on-chain cap — mark as removed (will be zeroed on save)
+      setRemovedMarketIds((prevRemoved) => new Set(prevRemoved).add(key));
       return prev;
     });
-
-    // Existing on-chain cap — mark as removed (will be zeroed on save)
-    if (!wasNewCap) {
-      setRemovedMarketIds((prev) => {
-        const next = new Set(prev);
-        next.add(key);
-        return next;
-      });
-    }
   }, []);
 
   const handleUndoRemoveMarketCap = useCallback((marketId: string) => {

From 8b71040b390865d21d6e37c11a8ef7317d518941 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Mon, 26 Jan 2026 12:01:16 +0800
Subject: [PATCH 5/6] chore: interval and docs

---
 src/hooks/useVaultIndexing.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useVaultIndexing.tsx b/src/hooks/useVaultIndexing.tsx
index 209920be..b9c4ee62 100644
--- a/src/hooks/useVaultIndexing.tsx
+++ b/src/hooks/useVaultIndexing.tsx
@@ -12,12 +12,12 @@ type UseVaultIndexingArgs = {
   refetch: () => void;
 };
 
-const REFETCH_INTERVAL_MS = 5_000;
+const REFETCH_INTERVAL_MS = 10_000;
 
 /**
  * Hook to manage vault indexing state after initialization.
- * Shows a persistent toast and retries fetching data every 5 seconds
- * until post-initialization data arrives or timeout is reached (2 minutes).
+ * Shows a persistent toast and retries fetching data every 10 seconds
+ * until post-initialization data arrives or timeout is reached (10 minutes).
  *
  * Uses Zustand store for instant reactivity (no localStorage polling).
  */

From 2a95ae110bb7b165ba55fd9c3ed5fc1886791efe Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Mon, 26 Jan 2026 12:10:10 +0800
Subject: [PATCH 6/6] feat: hide removed caps

---
 .../components/vault-detail/settings/CurrentCaps.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/autovault/components/vault-detail/settings/CurrentCaps.tsx b/src/features/autovault/components/vault-detail/settings/CurrentCaps.tsx
index 8f9a45f4..b6a9bd88 100644
--- a/src/features/autovault/components/vault-detail/settings/CurrentCaps.tsx
+++ b/src/features/autovault/components/vault-detail/settings/CurrentCaps.tsx
@@ -31,7 +31,7 @@ export function CurrentCaps({ existingCaps, isOwner, onStartEdit, chainId, vault
 
     try {
       const capBigInt = BigInt(cap);
-      if (capBigInt >= maxUint128) {
+      if (capBigInt === 0n || capBigInt >= maxUint128) {
         return 'No limit';
       }
       const value = Number(capBigInt) / 10 ** vaultAssetDecimals;
@@ -109,7 +109,7 @@ export function CurrentCaps({ existingCaps, isOwner, onStartEdit, chainId, vault
             sharedMarketCount,
           };
         })
-        .filter((item) => item.market !== undefined) ?? []
+        .filter((item) => item.market !== undefined && item.effectiveCap > 0) ?? []
     );
   }, [existingCaps, markets, collateralCapMap, marketCountByCollateral]);