feat: hook the UI with mint and borrow (#312)

Author: jrwbabylonlab

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

@@ -18,6 +18,7 @@ export function Activities() {
     handleActivityBorrow,
     handleBorrowFlowClose,
     isWalletConnected,
+    refetchActivities,
   } = useActivitiesState();
 
   console.log('[Activities] activities:', activities);
@@ -120,6 +121,7 @@ export function Activities() {
         activity={selectedActivity}
         isOpen={borrowFlowOpen}
         onClose={handleBorrowFlowClose}
+        onBorrowSuccess={refetchActivities}
       />
     </>
   );

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

@@ -28,7 +28,7 @@ export function useActivitiesState() {
   }, []);
 
   // Fetch pegin requests from blockchain
-  const { activities } = usePeginRequests(
+  const { activities, refetch } = usePeginRequests(
     connectedAddress,
     handleActivityBorrow
   );
@@ -55,5 +55,6 @@ export function useActivitiesState() {
     handleActivityBorrow,
     handleBorrowFlowClose,
     isWalletConnected: !!connectedAddress,
+    refetchActivities: refetch,
   };
 }

routes/vault/src/components/BorrowFlow/BorrowFlow.tsx

@@ -7,9 +7,10 @@ interface BorrowFlowProps {
   activity: VaultActivity | null;
   isOpen: boolean;
   onClose: () => void;
+  onBorrowSuccess?: () => void;
 }
 
-export function BorrowFlow({ activity, isOpen, onClose }: BorrowFlowProps) {
+export function BorrowFlow({ activity, isOpen, onClose, onBorrowSuccess }: BorrowFlowProps) {
   const {
     modalOpen,
     signModalOpen,
@@ -35,8 +36,14 @@ export function BorrowFlow({ activity, isOpen, onClose }: BorrowFlowProps) {
     onClose();
   };
 
-  const handleFinalSuccess = () => {
+  const handleFinalSuccess = async () => {
     handleSuccessClose();
+
+    // Refetch activities to show updated vault data before closing
+    if (onBorrowSuccess) {
+      await onBorrowSuccess();
+    }
+
     onClose();
   };
 
@@ -51,6 +58,7 @@ export function BorrowFlow({ activity, isOpen, onClose }: BorrowFlowProps) {
         onBorrow={handleBorrowClick}
         collateral={activity.collateral}
         marketData={activity.marketData}
+        pegInTxHash={activity.txHash}
       />
 
       {/* Borrow Sign Modal */}
@@ -60,6 +68,7 @@ export function BorrowFlow({ activity, isOpen, onClose }: BorrowFlowProps) {
         onSuccess={handleSignSuccess}
         borrowAmount={borrowAmount}
         collateralAmount={activity.collateral.amount}
+        pegInTxHash={activity.txHash}
       />
 
       {/* Borrow Success Modal */}

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

@@ -10,10 +10,13 @@ import {
   AmountItem,
   SubSection,
 } from "@babylonlabs-io/core-ui";
-import { useMemo, type ReactNode } from "react";
+import { useMemo, useEffect, useState, type ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 import { useBorrowForm } from "./useBorrowForm";
 import { usdcIcon } from "../../../assets";
+import type { Hex } from "viem";
+import { isPeginReadyToMint } from "../../../clients/eth-contract/vault-controller/query";
+import { CONTRACTS } from "../../../config/contracts";
 
 type DialogComponentProps = Parameters<typeof Dialog>[0];
 
@@ -43,9 +46,14 @@ interface BorrowModalProps {
     btcPriceUSD: number;
     lltvPercent: number;
   };
+  /** Pegin transaction hash to check if ready to mint */
+  pegInTxHash?: Hex;
 }
 
-export function BorrowModal({ open, onClose, onBorrow, collateral, marketData }: BorrowModalProps) {
+export function BorrowModal({ open, onClose, onBorrow, collateral, marketData, pegInTxHash }: BorrowModalProps) {
+  const [isReadyToMint, setIsReadyToMint] = useState<boolean | null>(null);
+  const [checkingReadiness, setCheckingReadiness] = useState(false);
+
   const collateralBTC = useMemo(
     () => parseFloat(collateral.amount || "0"),
     [collateral.amount]
@@ -58,6 +66,31 @@ export function BorrowModal({ open, onClose, onBorrow, collateral, marketData }:
     return "";
   }, [collateral.icon]);
 
+  // Check if pegin is ready to mint when modal opens
+  useEffect(() => {
+    const checkPeginReadiness = async () => {
+      if (!open || !pegInTxHash) {
+        setIsReadyToMint(null);
+        return;
+      }
+
+      console.log('[BorrowModal] Checking pegin readiness for:', pegInTxHash);
+      setCheckingReadiness(true);
+      try {
+        const ready = await isPeginReadyToMint(CONTRACTS.VAULT_CONTROLLER, pegInTxHash);
+        console.log('[BorrowModal] Pegin readiness result:', ready);
+        setIsReadyToMint(ready);
+      } catch (error) {
+        console.error('[BorrowModal] Failed to check pegin readiness:', error);
+        setIsReadyToMint(false);
+      } finally {
+        setCheckingReadiness(false);
+      }
+    };
+
+    checkPeginReadiness();
+  }, [open, pegInTxHash]);
+
   const {
     borrowAmount,
     borrowAmountNum,
@@ -230,14 +263,33 @@ export function BorrowModal({ open, onClose, onBorrow, collateral, marketData }:
         </div>
       </DialogBody>
       <DialogFooter className="flex flex-col gap-4 pb-8 pt-0">
+        {/* Warning message if pegin is not ready */}
+        {isReadyToMint === false && (
+          <Text variant="body2" className="text-warning-main text-sm text-center">
+            Vault is not ready to borrow. Please wait for the vault provider to verify your BTC deposit.
+          </Text>
+        )}
+
         <Button
           variant="contained"
           color="primary"
           onClick={handleBorrowClick}
           className="w-full"
-          disabled={!validation.isValid || borrowAmountNum === 0 || processing}
+          disabled={
+            !validation.isValid ||
+            borrowAmountNum === 0 ||
+            processing ||
+            checkingReadiness ||
+            isReadyToMint === false
+          }
         >
-          {processing ? "Processing..." : "Borrow"}
+          {checkingReadiness
+            ? "Checking..."
+            : processing
+            ? "Processing..."
+            : isReadyToMint === false
+            ? "Not Ready to Borrow"
+            : "Borrow"}
         </Button>
       </DialogFooter>
     </ResponsiveDialog>

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

@@ -9,68 +9,86 @@ import {
   Text,
 } from "@babylonlabs-io/core-ui";
 import { useEffect, useState } from "react";
+import type { Hex } from "viem";
+import { useMintAndBorrow } from "../../hooks/useMintAndBorrow";
 
 interface BorrowSignModalProps {
   open: boolean;
   onClose: () => void;
   onSuccess: () => void;
   borrowAmount?: number;
   collateralAmount?: string;
+  /** Pegin transaction hash (vault ID) */
+  pegInTxHash?: Hex;
 }
 
 /**
- * BorrowSignModal - Multi-step signing modal for borrow flow
- * 
- * Shows 3 steps that auto-progress with 2-second delays:
- * 1. Mint vaultBTC
- * 2. Borrow Transaction
- * 3. Confirming on Ethereum
- * 
- * After all steps complete, triggers onSuccess callback to show success modal.
- * 
- * Note: This is hardcoded for UI demonstration only.
- * Real implementation would integrate with wallet signing.
+ * BorrowSignModal - Transaction signing modal for borrow flow
+ *
+ * The mintAndBorrow transaction atomically:
+ * 1. Mints vaultBTC from the pegin
+ * 2. Deposits vaultBTC as collateral to Morpho
+ * 3. Borrows USDC against the collateral
+ *
+ * All three steps happen in a single Ethereum transaction.
  */
 export function BorrowSignModal({
   open,
   onClose,
   onSuccess,
+  borrowAmount,
+  pegInTxHash,
 }: BorrowSignModalProps) {
-  const [currentStep, setCurrentStep] = useState(1);
-  const [processing, setProcessing] = useState(false);
-
-  // Auto-progress through steps with 2-second delays (hardcoded for UI demo)
-  useEffect(() => {
-    if (!open || currentStep > 3) return;
-
-    setProcessing(true);
-
-    const timer = setTimeout(() => {
-      if (currentStep === 3) {
-        // Last step complete, trigger success modal
-        setProcessing(false);
-        onSuccess();
-      } else {
-        // Move to next step
-        setCurrentStep((prev) => prev + 1);
-      }
-    }, 2000); // 2 second delay per step
-
-    return () => clearTimeout(timer);
-  }, [open, currentStep, onSuccess]);
+  const [transactionStarted, setTransactionStarted] = useState(false);
+  const { executeMintAndBorrow, isLoading, error } = useMintAndBorrow();
 
   // Reset state when modal closes
   useEffect(() => {
     if (!open) {
-      setCurrentStep(1);
-      setProcessing(false);
+      setTransactionStarted(false);
     }
   }, [open]);
 
-  const handleSign = () => {
-    // In real implementation, this would trigger wallet signing
-    // For now, auto-progression handles everything
-    setProcessing(true);
+  // Show error in console if transaction fails
+  useEffect(() => {
+    if (error) {
+      console.error('[BorrowSignModal] Transaction error:', error);
+      // TODO: Show error in UI
+    }
+  }, [error]);
+
+  const handleSign = async () => {
+    if (!pegInTxHash || !borrowAmount) {
+      console.error('[BorrowSignModal] Missing required data:', { pegInTxHash, borrowAmount });
+      return;
+    }
+
+    // Convert USDC amount to bigint with 6 decimals
+    const borrowAmountBigInt = BigInt(Math.floor(borrowAmount * 1_000_000));
+
+    console.log('[BorrowSignModal] Starting transaction:', {
+      pegInTxHash,
+      borrowAmount,
+      borrowAmountBigInt: borrowAmountBigInt.toString(),
+    });
+
+    setTransactionStarted(true);
+
+    try {
+      const result = await executeMintAndBorrow({
+        pegInTxHash,
+        borrowAmount: borrowAmountBigInt,
+      });
+
+      if (result) {
+        // Success - trigger success modal
+        onSuccess();
+      }
+    } catch (err) {
+      console.error('[BorrowSignModal] Transaction failed:', err);
+      setTransactionStarted(false);
+      // Keep modal open to show error
+    }
   };
 
   return (
@@ -83,20 +101,20 @@ export function BorrowSignModal({
 
       <DialogBody className="flex flex-col gap-4 px-4 pb-8 pt-4 text-accent-primary sm:px-6">
         <Text variant="body1" className="text-sm text-accent-secondary sm:text-base">
-          Follow the steps below. Your wallet will prompt you when action is needed.
+          Sign the transaction in your wallet to mint vaultBTC and borrow USDC atomically.
         </Text>
 
         <div className="flex flex-col items-start gap-4 py-4">
-          <Step step={1} currentStep={currentStep}>
-            Mint vaultBTC
-          </Step>
-          <Step step={2} currentStep={currentStep}>
-            Borrow Transaction
-          </Step>
-          <Step step={3} currentStep={currentStep}>
-            Confirming on Ethereum
+          <Step step={1} currentStep={transactionStarted || isLoading ? 1 : 0}>
+            Mint vaultBTC & Borrow USDC
           </Step>
         </div>
+
+        {error && (
+          <Text variant="body2" className="text-error-main text-sm">
+            {error}
+          </Text>
+        )}
       </DialogBody>
 
       <DialogFooter className="flex gap-4">
@@ -105,17 +123,18 @@ export function BorrowSignModal({
           color="primary"
           onClick={onClose}
           className="flex-1 text-xs sm:text-base"
+          disabled={isLoading}
         >
           Cancel
         </Button>
 
         <Button
-          disabled={processing || currentStep > 3}
+          disabled={isLoading || !pegInTxHash || !borrowAmount}
           variant="contained"
           className="flex-1 text-xs sm:text-base"
           onClick={handleSign}
         >
-          {processing ? (
+          {isLoading ? (
             <Loader size={16} className="text-accent-contrast" />
           ) : (
             "Sign"