feat(packages): resolve comments

Author: jeremy-babylonlabs

routes/vault/src/components/PeginFlow/index.ts

@@ -7,12 +7,14 @@ import {
   ActivityCard,
   StatusBadge,
   ProviderItem,
+  Warning,
   type ActivityCardData,
   type ActivityCardDetailItem,
 } from "@babylonlabs-io/core-ui";
 import type { VaultActivity } from "../../mockData/vaultActivities";
 import { getVaultState, getActionForState } from "../../utils/vaultState";
 import { formatUSDCAmount } from "../../utils/peginTransformers";
+import { bitcoinIcon } from "../../assets";
 
 interface VaultActivityCardProps {
   activity: VaultActivity;
@@ -114,10 +116,17 @@ export function VaultActivityCard({ activity, onBorrow, onRepay }: VaultActivity
   // Transform to ActivityCardData format
   const cardData: ActivityCardData = {
     formattedAmount: `${activity.collateral.amount} ${activity.collateral.symbol}`,
-    icon: activity.collateral.icon,
+    icon: activity.collateral.icon || bitcoinIcon,
     iconAlt: activity.collateral.symbol,
     details,
     optionalDetails: optionalDetails.length > 0 ? optionalDetails : undefined,
+    // Add warning for pending peg-ins
+    warning: activity.isPending ? (
+      <Warning>
+        {activity.pendingMessage || 
+          "Your peg-in is being processed. This can take up to ~5 hours while Bitcoin confirmations and provider acknowledgements complete."}
+      </Warning>
+    ) : undefined,
     primaryAction: getActionForState(vaultState, activity, onBorrow, onRepay),
   };
 

routes/vault/src/components/VaultDashboard/VaultActivityCard.tsx

@@ -1,15 +1,29 @@
 import { ActivityList } from "@babylonlabs-io/core-ui";
+import { useCallback } from "react";
 import { BorrowFlow } from "../BorrowFlow";
 import { RepayFlow } from "../RepayFlow";
+import {
+  PeginModal,
+  PeginSignModal,
+  PeginSuccessModal,
+} from "../modals";
 import { useVaultPositions } from "../../hooks/useVaultPositions";
 import { useBorrowFlow } from "../../hooks/useBorrowFlow";
 import { useRepayFlow } from "../../hooks/useRepayFlow";
+import { usePeginFlow } from "../../hooks/usePeginFlow";
 import { EmptyState } from "./EmptyState";
 import { VaultActivityCard } from "./VaultActivityCard";
 
 export function VaultDashboard() {
   // Data fetching
-  const { activities, isWalletConnected, refetchActivities } = useVaultPositions();
+  const {
+    activities,
+    isWalletConnected,
+    refetchActivities,
+    connectedAddress,
+    btcAddress,
+    addPendingPegin,
+  } = useVaultPositions();
 
   // Borrow flow modal state
   const {
@@ -27,12 +41,47 @@ export function VaultDashboard() {
     closeRepayFlow,
   } = useRepayFlow();
 
-  // Handle "New Item" button click - open borrow for first activity
-  const handleNewBorrow = () => {
-    if (activities.length > 0) {
-      openBorrowFlow(activities[0]);
+  // Peg-in flow modal state
+  const {
+    isOpen: peginFlowOpen,
+    signModalOpen: peginSignModalOpen,
+    successModalOpen: peginSuccessModalOpen,
+    peginAmount,
+    selectedProviders,
+    btcBalanceSat,
+    openPeginFlow,
+    closePeginFlow,
+    handlePeginClick,
+    handlePeginSignSuccess: handlePeginSignSuccessBase,
+    handlePeginSuccessClose,
+  } = usePeginFlow();
+
+  // Handle peg-in sign success with storage integration
+  const handlePeginSignSuccess = useCallback(() => {
+    // Add to local storage when peg-in is submitted
+    if (connectedAddress && btcAddress) {
+      const peginId = `pending-${Date.now()}`; // Temporary ID until we get BTC tx hash
+      
+      addPendingPegin({
+        id: peginId,
+        amount: peginAmount.toString(),
+        providers: selectedProviders,
+        ethAddress: connectedAddress,
+        btcAddress: btcAddress,
+      });
+
+      console.log('[VaultDashboard] Added pending peg-in to localStorage:', {
+        id: peginId,
+        amount: peginAmount,
+        providers: selectedProviders,
+      });
     }
-  };
+
+    // Complete the peg-in flow and refetch activities
+    handlePeginSignSuccessBase(() => {
+      refetchActivities();
+    });
+  }, [connectedAddress, btcAddress, peginAmount, selectedProviders, addPendingPegin, handlePeginSignSuccessBase, refetchActivities]);
 
   // Show message if wallet is not connected
   if (!isWalletConnected) {
@@ -42,7 +91,11 @@ export function VaultDashboard() {
   return (
     <>
       <div className="container mx-auto flex max-w-[760px] flex-1 flex-col px-4 py-8">
-        <ActivityList onNewItem={handleNewBorrow}>
+        <ActivityList
+          onNewItem={openPeginFlow}
+          isEmpty={activities.length === 0}
+          isConnected={isWalletConnected}
+        >
           {activities.map((activity) => (
             <VaultActivityCard
               key={activity.id}
@@ -54,6 +107,28 @@ export function VaultDashboard() {
         </ActivityList>
       </div>
 
+      {/* Peg-in Modals */}
+      <PeginModal
+        open={peginFlowOpen}
+        onClose={closePeginFlow}
+        onPegIn={handlePeginClick}
+        btcBalance={btcBalanceSat}
+      />
+
+      <PeginSignModal
+        open={peginSignModalOpen}
+        onClose={() => {}}
+        onSuccess={handlePeginSignSuccess}
+        amount={peginAmount}
+        selectedProviders={selectedProviders}
+      />
+
+      <PeginSuccessModal
+        open={peginSuccessModalOpen}
+        onClose={handlePeginSuccessClose}
+        amount={peginAmount}
+      />
+
       <BorrowFlow
         activity={selectedBorrowActivity}
         isOpen={borrowFlowOpen}

routes/vault/src/components/VaultDashboard/VaultDashboard.tsx

@@ -6,4 +6,8 @@ export { usePeginRequests } from './usePeginRequests';
 export type { UsePeginRequestsResult } from './usePeginRequests';
 export { useVaultProviders } from './useVaultProviders';
 export { usePeginForm } from './usePeginForm';
-export { usePeginStorage } from './usePeginStorage';
+export { usePeginStorage } from './usePeginStorage';
+export { useVaultPositions } from './useVaultPositions';
+export { useBorrowFlow } from './useBorrowFlow';
+export { useRepayFlow } from './useRepayFlow';
+export { usePeginFlow } from './usePeginFlow';

routes/vault/src/hooks/index.ts

@@ -1,36 +1,42 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback } from 'react';
 
-export function usePeginFlowState() {
+/**
+ * Hook to manage peg-in flow modal state
+ */
+export function usePeginFlow() {
   // Hardcoded BTC balance (in satoshis) - TODO: Replace with real wallet balance
   const btcBalanceSat = 500000000; // 5 BTC
 
   // Modal states
-  const [peginModalOpen, setPeginModalOpen] = useState(false);
-  const [peginSignModalOpen, setPeginSignModalOpen] = useState(false);
-  const [peginSuccessModalOpen, setPeginSuccessModalOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [signModalOpen, setSignModalOpen] = useState(false);
+  const [successModalOpen, setSuccessModalOpen] = useState(false);
 
   // Peg-in flow data
   const [peginAmount, setPeginAmount] = useState(0);
   const [selectedProviders, setSelectedProviders] = useState<string[]>([]);
 
-  // Start the peg-in flow
-  const handleNewBorrow = useCallback(() => {
-    setPeginModalOpen(true);
+  const openPeginFlow = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const closePeginFlow = useCallback(() => {
+    setIsOpen(false);
   }, []);
 
   // Handle peg-in click from PeginModal
   const handlePeginClick = useCallback((amount: number, providers: string[]) => {
     console.log("Peg-in clicked:", { amount, providers });
     setPeginAmount(amount);
     setSelectedProviders(providers);
-    setPeginModalOpen(false);
-    setPeginSignModalOpen(true);
+    setIsOpen(false);
+    setSignModalOpen(true);
   }, []);
 
   // Handle signing success - accepts callback for parent to handle storage
   const handlePeginSignSuccess = useCallback((onSuccess?: () => void) => {
-    setPeginSignModalOpen(false);
-    setPeginSuccessModalOpen(true);
+    setSignModalOpen(false);
+    setSuccessModalOpen(true);
 
     // Call parent callback if provided
     if (onSuccess) {
@@ -40,27 +46,25 @@ export function usePeginFlowState() {
 
   // Handle success modal close
   const handlePeginSuccessClose = useCallback(() => {
-    setPeginSuccessModalOpen(false);
+    setSuccessModalOpen(false);
     setPeginAmount(0);
     setSelectedProviders([]);
   }, []);
 
   return {
-    // Wallet data
-    btcBalanceSat,
     // Modal states
-    peginModalOpen,
-    peginSignModalOpen,
-    peginSuccessModalOpen,
+    isOpen,
+    signModalOpen,
+    successModalOpen,
     // Peg-in data
     peginAmount,
     selectedProviders,
+    btcBalanceSat,
     // Actions
-    handleNewBorrow,
+    openPeginFlow,
+    closePeginFlow,
     handlePeginClick,
     handlePeginSignSuccess,
     handlePeginSuccessClose,
-    setPeginModalOpen,
-    setPeginSignModalOpen,
   };
-}
+}

routes/vault/src/components/PeginFlow/usePeginFlowState.ts renamed to routes/vault/src/hooks/usePeginFlow.ts

@@ -1,14 +1,21 @@
 import { useMemo } from "react";
 import { useChainConnector } from "@babylonlabs-io/wallet-connector";
 import type { Hex } from "viem";
-import { usePeginRequests } from "./usePeginRequests";
+import { usePeginRequests, usePeginStorage } from "./usePeginRequests";
 
 /**
  * Hook to manage vault positions data fetching and wallet connection
  * Only responsible for data - UI modal states are managed by separate hooks
  */
 export function useVaultPositions() {
   const ethConnector = useChainConnector('ETH');
+  const btcConnector = useChainConnector('BTC');
+
+  // Get BTC address from connector
+  const btcAddress = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (btcConnector as any)?.connectedWallet?.account?.address as string | undefined;
+  }, [btcConnector]);
 
   const connectedAddress = useMemo(() => {
     const address = (
@@ -21,15 +28,26 @@ export function useVaultPositions() {
   }, [ethConnector]);
 
   // Fetch pegin requests from blockchain
-  // Note: We pass a no-op function since we don't need borrow callback here anymore
-  const { activities, refetch } = usePeginRequests(
+  const { activities: confirmedActivities, refetch } = usePeginRequests(
     connectedAddress,
     () => {} // no-op callback
   );
 
+  // Integrate local storage for pending peg-ins
+  const {
+    allActivities,
+    addPendingPegin,
+  } = usePeginStorage({
+    ethAddress: connectedAddress || '',
+    confirmedPegins: confirmedActivities,
+  });
+
   return {
-    activities,
+    activities: allActivities,
     isWalletConnected: !!connectedAddress,
     refetchActivities: refetch,
+    connectedAddress,
+    btcAddress,
+    addPendingPegin,
   };
 }