feat(packages): resolve comments

Author: jeremy-babylonlabs

routes/vault/src/api/index.ts

@@ -1,5 +1,5 @@
 /**
- * Vault Provider API
+ * Vault Provider API Client
  * 
  * This module handles fetching vault provider data.
  * Currently returns mock data, but structured to support GraphQL integration.

routes/vault/src/api/getVaultProviders.ts renamed to routes/vault/src/clients/vault-providers-api/index.ts

@@ -7,38 +7,73 @@ import {
   ProviderItem,
   Warning,
 } from "@babylonlabs-io/core-ui";
+import { useCallback } from "react";
 import { BorrowFlow } from "../BorrowFlow";
 import {
   PeginModal,
   PeginSignModal,
   PeginSuccessModal,
 } from "../modals";
 import { useActivitiesState } from "./useActivitiesState";
+import { usePeginFlowState } from "../PeginFlow";
 import { bitcoinIcon } from "../../assets";
 
 export function Activities() {
   const {
     activities,
     borrowFlowOpen,
     selectedActivity,
-    handleNewBorrow,
     handleActivityBorrow,
     handleBorrowFlowClose,
     isWalletConnected,
     refetchActivities,
-    // Deposit flow
-    peginModalOpen,
-    peginSignModalOpen,
-    peginSuccessModalOpen,
+    connectedAddress,
+    addPendingPegin,
+  } = useActivitiesState();
+
+  const {
+    btcAddress,
+    btcBalanceSat,
+    modalOpen: peginModalOpen,
+    signModalOpen: peginSignModalOpen,
+    successModalOpen: peginSuccessModalOpen,
     peginAmount,
     selectedProviders,
-    btcBalanceSat,
+    startPeginFlow,
     handlePeginClick,
-    handlePeginSignSuccess,
-    handlePeginSuccessClose,
-    setPeginModalOpen,
-    setPeginSignModalOpen,
-  } = useActivitiesState();
+    handleSignSuccess: handlePeginSignSuccessBase,
+    handleSuccessClose: handlePeginSuccessClose,
+    setModalOpen: setPeginModalOpen,
+    setSignModalOpen: setPeginSignModalOpen,
+  } = usePeginFlowState();
+
+  // Handler to add pending peg-in to storage and trigger refetch
+  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('[Activities] Added pending peg-in to localStorage:', {
+        id: peginId,
+        amount: peginAmount,
+        providers: selectedProviders,
+      });
+    }
+
+    // Complete the peg-in flow
+    handlePeginSignSuccessBase(() => {
+      // Refetch activities to show the new pending peg-in
+      refetchActivities();
+    });
+  }, [connectedAddress, btcAddress, peginAmount, selectedProviders, addPendingPegin, handlePeginSignSuccessBase, refetchActivities]);
 
   console.log('[Activities] activities:', activities);
   console.log('[Activities] activities.length:', activities.length);
@@ -137,7 +172,7 @@ export function Activities() {
     <>
       <div className="container mx-auto flex max-w-[760px] flex-1 flex-col px-4 py-8">
         <ActivityList 
-          onNewItem={handleNewBorrow}
+          onNewItem={startPeginFlow}
           isEmpty={activities.length === 0}
           isConnected={isWalletConnected}
         >

routes/vault/src/components/Activities/Activities.tsx

@@ -6,13 +6,6 @@ import { usePeginRequests, usePeginStorage } from "../../hooks";
 
 export function useActivitiesState() {
   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 = (
@@ -25,20 +18,10 @@ export function useActivitiesState() {
     return address;
   }, [ethConnector]);
 
-  // Hardcoded BTC balance (in satoshis) - TODO: Replace with real wallet balance
-  const btcBalanceSat = 500000000; // 5 BTC
-
   // Borrow flow state
   const [borrowFlowOpen, setBorrowFlowOpen] = useState(false);
   const [selectedActivity, setSelectedActivity] = useState<VaultActivity | null>(null);
 
-  // Peg-in flow state
-  const [peginModalOpen, setPeginModalOpen] = useState(false);
-  const [peginSignModalOpen, setPeginSignModalOpen] = useState(false);
-  const [peginSuccessModalOpen, setPeginSuccessModalOpen] = useState(false);
-  const [peginAmount, setPeginAmount] = useState(0);
-  const [selectedProviders, setSelectedProviders] = useState<string[]>([]);
-
   const handleActivityBorrow = useCallback((activity: VaultActivity) => {
     setSelectedActivity(activity);
     setBorrowFlowOpen(true);
@@ -61,78 +44,20 @@ export function useActivitiesState() {
 
   console.log('[useActivitiesState] allActivities (merged):', allActivities);
 
-  const handleNewBorrow = useCallback(() => {
-    // Open peg-in modal instead of borrow modal
-    setPeginModalOpen(true);
-  }, []);
-
   const handleBorrowFlowClose = useCallback(() => {
     setBorrowFlowOpen(false);
     setSelectedActivity(null);
   }, []);
 
-  // Peg-in handlers
-  const handlePeginClick = useCallback((amount: number, providers: string[]) => {
-    console.log("Peg-in clicked:", { amount, providers });
-    setPeginAmount(amount);
-    setSelectedProviders(providers);
-    setPeginModalOpen(false);
-    setPeginSignModalOpen(true);
-  }, []);
-
-  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('[useActivitiesState] Added pending peg-in to localStorage:', {
-        id: peginId,
-        amount: peginAmount,
-        providers: selectedProviders,
-      });
-    }
-
-    setPeginSignModalOpen(false);
-    setPeginSuccessModalOpen(true);
-    
-    // Refetch activities to show the new pending peg-in
-    refetch();
-  }, [connectedAddress, btcAddress, peginAmount, selectedProviders, addPendingPegin, refetch]);
-
-  const handlePeginSuccessClose = useCallback(() => {
-    setPeginSuccessModalOpen(false);
-    setPeginAmount(0);
-    setSelectedProviders([]);
-  }, []);
-
   return {
     activities: allActivities,
     borrowFlowOpen,
     selectedActivity,
-    handleNewBorrow,
     handleActivityBorrow,
     handleBorrowFlowClose,
     isWalletConnected: !!connectedAddress,
     refetchActivities: refetch,
-    // Peg-in flow
-    peginModalOpen,
-    peginSignModalOpen,
-    peginSuccessModalOpen,
-    peginAmount,
-    selectedProviders,
-    btcBalanceSat,
-    handlePeginClick,
-    handlePeginSignSuccess,
-    handlePeginSuccessClose,
-    setPeginModalOpen,
-    setPeginSignModalOpen,
+    connectedAddress,
+    addPendingPegin,
   };
 }

routes/vault/src/components/Activities/useActivitiesState.ts

@@ -0,0 +1 @@
+export { usePeginFlowState } from './usePeginFlowState';

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

@@ -0,0 +1,102 @@
+import { useState, useCallback, useMemo } from "react";
+import { useChainConnector } from "@babylonlabs-io/wallet-connector";
+import type { Hex } from "viem";
+
+export function usePeginFlowState() {
+  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]);
+
+  // Get ETH address from connector
+  const connectedAddress = useMemo(() => {
+    const address = (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (ethConnector as any)?.connectedWallet?.account?.address ||
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (ethConnector as any)?.connectedWallet?.accounts?.[0]?.address
+    ) as Hex | undefined;
+    return address;
+  }, [ethConnector]);
+
+  // Hardcoded BTC balance (in satoshis) - TODO: Replace with real wallet balance
+  const btcBalanceSat = 500000000; // 5 BTC
+
+  // Modal states
+  const [modalOpen, setModalOpen] = 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 startPeginFlow = useCallback(() => {
+    setModalOpen(true);
+  }, []);
+
+  // Handle modal close
+  const handleModalClose = useCallback(() => {
+    setModalOpen(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);
+    setModalOpen(false);
+    setSignModalOpen(true);
+  }, []);
+
+  // Handle signing success - callback provided by parent to add to storage
+  const handleSignSuccess = useCallback((onPeginSubmitted?: () => void) => {
+    setSignModalOpen(false);
+    setSuccessModalOpen(true);
+    
+    // Notify parent that peg-in was submitted
+    if (onPeginSubmitted) {
+      onPeginSubmitted();
+    }
+  }, []);
+
+  // Handle sign modal close
+  const handleSignModalClose = useCallback(() => {
+    setSignModalOpen(false);
+  }, []);
+
+  // Handle success modal close
+  const handleSuccessClose = useCallback(() => {
+    setSuccessModalOpen(false);
+    setPeginAmount(0);
+    setSelectedProviders([]);
+  }, []);
+
+  return {
+    // Wallet data
+    connectedAddress,
+    btcAddress,
+    btcBalanceSat,
+    // Modal states
+    modalOpen,
+    signModalOpen,
+    successModalOpen,
+    // Peg-in data
+    peginAmount,
+    selectedProviders,
+    // Actions
+    startPeginFlow,
+    handleModalClose,
+    handlePeginClick,
+    handleSignSuccess,
+    handleSignModalClose,
+    handleSuccessClose,
+    setModalOpen,
+    setSignModalOpen,
+  };
+}

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

@@ -13,7 +13,7 @@ import { useState, useMemo } from "react";
 import { bitcoinIcon } from "../../assets";
 import { useVaultProviders } from "../../hooks/useVaultProviders";
 import { usePeginForm } from "../../hooks/usePeginForm";
-import type { VaultProvider } from "../../api";
+import type { VaultProvider } from "../../clients/vault-providers-api";
 
 interface PeginModalProps {
   open: boolean;

routes/vault/src/components/modals/PeginModal.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { getVaultProviders } from '../api';
+import { getVaultProviders } from '../clients/vault-providers-api';
 
 const FIVE_MINUTES = 5 * 60 * 1000;