feat(packages): show existing vaults in the overview list (#541)

Author: jeremy-babylonlabs

services/vault/src/components/DepositOverview.tsx renamed to services/vault/src/components/Collateral/Deposit/components/DepositOverview.tsx

@@ -9,24 +9,30 @@ import {
   VaultDetailCard,
   type ColumnProps,
 } from "@babylonlabs-io/core-ui";
-import { useState } from "react";
+import { useWalletConnect } from "@babylonlabs-io/wallet-connector";
+import { useMemo, useState } from "react";
 
-import { useBTCWallet, useETHWallet } from "../context/wallet";
+import { useBTCWallet, useETHWallet } from "../../../../context/wallet";
+import { getPeginState } from "../../../../models/peginStateMachine";
+import type { VaultActivity } from "../../../../types/activity";
+import type { Deposit } from "../../../../types/vault";
+import {
+  useVaultRedeemState,
+  VaultRedeemStep,
+} from "../../Redeem/state/VaultRedeemState";
+import { useVaultDeposits } from "../hooks/useVaultDeposits";
 import {
   useVaultDepositState,
   VaultDepositStep,
 } from "../state/VaultDepositState";
-import {
-  useVaultRedeemState,
-  VaultRedeemStep,
-} from "../state/VaultRedeemState";
-import type { Deposit } from "../types/vault";
 
-// Hardcoded deposit data
-// TODO: Replace with useVaultPositions when wallet providers are integrated
-const HARDCODED_DEPOSITS: Deposit[] = [];
-
-function EmptyState({ onDeposit }: { onDeposit: () => void }) {
+function EmptyState({
+  onDeposit,
+  isConnected,
+}: {
+  onDeposit: () => void;
+  isConnected: boolean;
+}) {
   return (
     <div className="max-h-[500px] overflow-x-auto overflow-y-auto bg-primary-contrast">
       <div className="flex min-h-[200px] items-center justify-center p-6">
@@ -37,7 +43,9 @@ function EmptyState({ onDeposit }: { onDeposit: () => void }) {
               Deposit BTC Trustlessly
             </h4>
             <p className="text-sm text-accent-secondary">
-              Your deposit will appear here once confirmed.
+              {isConnected
+                ? "Your deposit will appear here once confirmed."
+                : "Connect your wallet to start depositing BTC."}
             </p>
           </div>
           <div className="mt-6">
@@ -46,9 +54,9 @@ function EmptyState({ onDeposit }: { onDeposit: () => void }) {
               size="medium"
               rounded
               onClick={onDeposit}
-              aria-label="Add deposit"
+              aria-label={isConnected ? "Add deposit" : "Connect wallet"}
             >
-              Deposit
+              {isConnected ? "Deposit" : "Connect Wallet"}
             </Button>
           </div>
         </div>
@@ -60,18 +68,47 @@ function EmptyState({ onDeposit }: { onDeposit: () => void }) {
 export function DepositOverview() {
   const isMobile = useIsMobile();
   const { connected: btcConnected } = useBTCWallet();
-  const { connected: ethConnected } = useETHWallet();
+  const { connected: ethConnected, address: ethAddress } = useETHWallet();
   const isConnected = btcConnected && ethConnected;
+  const { open: openWalletModal } = useWalletConnect();
+
+  // Fetch real deposit data
+  const { activities } = useVaultDeposits(
+    ethAddress as `0x${string}` | undefined,
+  );
+
+  // Transform VaultActivity to Deposit format
+  const deposits: Deposit[] = useMemo(() => {
+    return activities.map((activity: VaultActivity) => {
+      // Get state from state machine
+      const state = getPeginState(activity.contractStatus ?? 0);
+
+      return {
+        id: activity.id,
+        amount: parseFloat(activity.collateral.amount),
+        vaultProvider: {
+          name: activity.providers[0]?.name || "Unknown Provider",
+          icon: activity.providers[0]?.icon || "",
+        },
+        status: state.displayLabel as "Available" | "Pending" | "In Use",
+      };
+    });
+  }, [activities]);
 
-  const deposits = HARDCODED_DEPOSITS;
   const [selectedDepositIds, setSelectedDepositIds] = useState<
     Array<string | number>
   >([]);
   const { goToStep: goToDepositStep } = useVaultDepositState();
   const { goToStep: goToRedeemStep, setRedeemData } = useVaultRedeemState();
 
   const handleDeposit = () => {
-    goToDepositStep(VaultDepositStep.FORM);
+    if (!isConnected) {
+      // Open wallet connection modal
+      openWalletModal();
+    } else {
+      // Already connected, open deposit modal directly
+      goToDepositStep(VaultDepositStep.FORM);
+    }
   };
 
   const handleRedeem = () => {
@@ -83,7 +120,7 @@ export function DepositOverview() {
 
   // Show empty state when not connected OR when connected but no data
   if (!isConnected || deposits.length === 0) {
-    return <EmptyState onDeposit={handleDeposit} />;
+    return <EmptyState onDeposit={handleDeposit} isConnected={isConnected} />;
   }
 
   const columns: ColumnProps<Deposit>[] = [
@@ -143,9 +180,9 @@ export function DepositOverview() {
           size="medium"
           rounded
           onClick={handleDeposit}
-          aria-label="Deposit BTC"
+          aria-label={isConnected ? "Deposit BTC" : "Connect wallet to deposit"}
         >
-          Deposit
+          {isConnected ? "Deposit" : "Connect Wallet"}
         </Button>
         <Button
           variant="outlined"

services/vault/src/components/Collateral/Deposit/hooks/usePeginRequests.ts

@@ -0,0 +1,94 @@
+/**
+ * Fetching and managing pegin request data from smart contracts
+ * Used in VaultDeposit tab to show deposit/collateral status only (no Morpho data)
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useMemo } from "react";
+import type { Address } from "viem";
+
+import { CONTRACTS } from "../../../../config/contracts";
+import { getPeginRequestsWithDetails } from "../../../../services/vault/vaultQueryService";
+import type { VaultActivity } from "../../../../types";
+import { transformPeginToActivity } from "../../../../utils/peginTransformers";
+
+/**
+ * Result interface for usePeginRequests hook
+ */
+export interface UsePeginRequestsResult {
+  /** Array of vault activities transformed from pegin requests */
+  activities: VaultActivity[];
+  /** Loading state - true while fetching data */
+  loading: boolean;
+  /** Error state - contains error if fetch failed */
+  error: Error | null;
+  /** Function to manually refetch data */
+  refetch: () => Promise<void>;
+}
+
+/**
+ * Parameters for usePeginRequests hook
+ */
+export interface UsePeginRequestsParams {
+  /** Ethereum address of connected wallet (undefined if not connected) */
+  connectedAddress: Address | undefined;
+}
+
+/**
+ * Custom hook to fetch pegin requests for a connected wallet address
+ *
+ * Fetches pegin/deposit data. The "in use" status is determined from the pegin status itself (status 3 = InPosition).
+ * Does NOT fetch full Morpho position details (for performance).
+ * For full position data with Morpho details, use useUserPositions instead.
+ *
+ * @param params - Hook parameters
+ * @returns Object containing activities array, loading state, error state, and refetch function
+ */
+export function usePeginRequests({
+  connectedAddress,
+}: UsePeginRequestsParams): UsePeginRequestsResult {
+  // Use React Query to fetch data from service layer
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ["peginRequests", connectedAddress, CONTRACTS.BTC_VAULTS_MANAGER],
+    queryFn: () => {
+      return getPeginRequestsWithDetails(
+        connectedAddress!,
+        CONTRACTS.BTC_VAULTS_MANAGER,
+      );
+    },
+    enabled: !!connectedAddress,
+    // Refetch when wallet connects to ensure fresh data
+    refetchOnMount: true,
+    // Poll every 30 seconds to track peg-in status updates
+    refetchInterval: 30000,
+  });
+
+  // Trigger refetch when wallet connects (address changes from undefined to a value)
+  useEffect(() => {
+    if (connectedAddress) {
+      refetch();
+    }
+  }, [connectedAddress, refetch]);
+
+  // Transform pegin requests to vault activities
+  const activities = useMemo(() => {
+    if (!data) return [];
+
+    const transformed = data.map(({ peginRequest, txHash }) =>
+      transformPeginToActivity(peginRequest, txHash),
+    );
+    return transformed;
+  }, [data]);
+
+  // Wrap refetch to return Promise<void> for backward compatibility
+  const wrappedRefetch = async () => {
+    await refetch();
+  };
+
+  return {
+    activities,
+    loading: isLoading,
+    error: error as Error | null,
+    refetch: wrappedRefetch,
+  };
+}

services/vault/src/hooks/useVaultPositions.ts renamed to services/vault/src/components/Collateral/Deposit/hooks/useVaultDeposits.ts

@@ -5,11 +5,11 @@ import { usePeginStorage } from "../storage/usePeginStorage";
 import { usePeginRequests } from "./usePeginRequests";
 
 /**
- * Hook to manage vault positions data fetching
+ * Hook to manage vault deposits data fetching
  * Only responsible for data - UI modal states and action handlers are managed by parent components
  * Wallet connections are managed by parent components
  */
-export function useVaultPositions(connectedAddress: Hex | undefined) {
+export function useVaultDeposits(connectedAddress: Hex | undefined) {
   const { activities: confirmedActivities, refetch } = usePeginRequests({
     connectedAddress,
   });

services/vault/src/state/VaultDepositState.tsx renamed to services/vault/src/components/Collateral/Deposit/state/VaultDepositState.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState, type PropsWithChildren } from "react";
 
-import { createStateUtils } from "../utils/createStateUtils";
+import { createStateUtils } from "../../../../utils/createStateUtils";
 
 export enum VaultDepositStep {
   IDLE = "idle",