Fix/simplify market detail data fetching (#547)

Author: jrwbabylonlab

services/vault/src/components/Market/Detail/hooks/useBorrowRepayModals.ts

@@ -0,0 +1,100 @@
+/**
+ * Hook for managing borrow and repay modal states
+ * Handles borrow and repay transaction modal flows
+ */
+
+import { useState } from "react";
+
+interface BorrowData {
+  collateral: number;
+  borrow: number;
+}
+
+interface RepayData {
+  repay: number;
+  withdraw: number;
+}
+
+export interface UseBorrowRepayModalsResult {
+  // Borrow modal state
+  showBorrowReviewModal: boolean;
+  showBorrowSuccessModal: boolean;
+  lastBorrowData: BorrowData;
+  openBorrowReview: (collateralAmount: number, borrowAmount: number) => void;
+  closeBorrowReview: () => void;
+  showBorrowSuccess: () => void;
+  closeBorrowSuccess: () => void;
+
+  // Repay modal state
+  showRepayReviewModal: boolean;
+  showRepaySuccessModal: boolean;
+  lastRepayData: RepayData;
+  openRepayReview: (repayAmount: number, withdrawAmount: number) => void;
+  closeRepayReview: () => void;
+  showRepaySuccess: () => void;
+  closeRepaySuccess: () => void;
+
+  // Processing state
+  processing: boolean;
+  setProcessing: (processing: boolean) => void;
+}
+
+/**
+ * Manages modal states for borrow and repay flows
+ */
+export function useBorrowRepayModals(): UseBorrowRepayModalsResult {
+  // Borrow modal state
+  const [showBorrowReviewModal, setShowBorrowReviewModal] = useState(false);
+  const [showBorrowSuccessModal, setShowBorrowSuccessModal] = useState(false);
+  const [lastBorrowData, setLastBorrowData] = useState<BorrowData>({
+    collateral: 0,
+    borrow: 0,
+  });
+
+  // Repay modal state
+  const [showRepayReviewModal, setShowRepayReviewModal] = useState(false);
+  const [showRepaySuccessModal, setShowRepaySuccessModal] = useState(false);
+  const [lastRepayData, setLastRepayData] = useState<RepayData>({
+    repay: 0,
+    withdraw: 0,
+  });
+
+  // Processing state
+  const [processing, setProcessing] = useState(false);
+
+  return {
+    // Borrow modal
+    showBorrowReviewModal,
+    showBorrowSuccessModal,
+    lastBorrowData,
+    openBorrowReview: (collateralAmount: number, borrowAmount: number) => {
+      setLastBorrowData({ collateral: collateralAmount, borrow: borrowAmount });
+      setShowBorrowReviewModal(true);
+    },
+    closeBorrowReview: () => setShowBorrowReviewModal(false),
+    showBorrowSuccess: () => {
+      setShowBorrowReviewModal(false);
+      setShowBorrowSuccessModal(true);
+    },
+    closeBorrowSuccess: () => setShowBorrowSuccessModal(false),
+
+    // Repay modal
+    showRepayReviewModal,
+    showRepaySuccessModal,
+    lastRepayData,
+    openRepayReview: (repayAmount: number, withdrawAmount: number) => {
+      setLastRepayData({ repay: repayAmount, withdraw: withdrawAmount });
+      setShowRepayReviewModal(true);
+    },
+    closeRepayReview: () => setShowRepayReviewModal(false),
+    showRepaySuccess: () => {
+      setShowRepayReviewModal(false);
+      setShowRepaySuccessModal(true);
+    },
+    closeRepaySuccess: () => setShowRepaySuccessModal(false),
+
+    // Processing
+    processing,
+    setProcessing,
+  };
+}

services/vault/src/components/Market/Detail/hooks/useBorrowRepayTransactions.ts

@@ -0,0 +1,149 @@
+/**
+ * Hook for borrow and repay transaction handlers
+ */
+
+import { parseUnits } from "viem";
+import { useWalletClient } from "wagmi";
+
+import { CONTRACTS } from "../../../../config/contracts";
+import {
+  repayDebtFull,
+  repayDebtPartial,
+  withdrawCollateralFromPosition,
+} from "../../../../services/position/positionTransactionService";
+
+interface UseBorrowRepayTransactionsProps {
+  hasPosition: boolean;
+  userPosition: {
+    positionId: string;
+    marketId: string;
+    collateral: bigint;
+    borrowAssets: bigint;
+    borrowShares: bigint;
+  } | null;
+  currentLoanAmount: number;
+  refetch: () => Promise<void>;
+  onBorrowSuccess: () => void;
+  onRepaySuccess: () => void;
+  setProcessing: (processing: boolean) => void;
+}
+
+export interface UseBorrowRepayTransactionsResult {
+  handleConfirmBorrow: () => Promise<void>;
+  handleConfirmRepay: (
+    repayAmount: number,
+    withdrawAmount: number,
+  ) => Promise<void>;
+}
+
+/**
+ * Handles borrow and repay transaction logic
+ */
+export function useBorrowRepayTransactions({
+  hasPosition,
+  userPosition,
+  currentLoanAmount,
+  refetch,
+  onBorrowSuccess,
+  onRepaySuccess,
+  setProcessing,
+}: UseBorrowRepayTransactionsProps): UseBorrowRepayTransactionsResult {
+  const { data: walletClient } = useWalletClient();
+  const chain = walletClient?.chain;
+
+  const handleConfirmBorrow = async () => {
+    setProcessing(true);
+    try {
+      // TODO: Implement real borrow logic
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      onBorrowSuccess();
+    } catch {
+      // Handle error silently
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleConfirmRepay = async (
+    repayAmount: number,
+    withdrawAmount: number,
+  ) => {
+    // If user has a position, use real repay logic
+    if (hasPosition && userPosition) {
+      setProcessing(true);
+      try {
+        // Validate wallet connection
+        if (!walletClient || !chain) {
+          throw new Error("Wallet not connected. Please connect your wallet.");
+        }
+
+        const { positionId, marketId } = userPosition;
+
+        // Determine if this is a full or partial repayment
+        const tolerance = 0.01; // 0.01 USDC tolerance
+        const isFullRepayment =
+          Math.abs(repayAmount - currentLoanAmount) < tolerance;
+
+        // Step 1: Repay debt
+        if (isFullRepayment) {
+          await repayDebtFull(
+            walletClient,
+            chain,
+            CONTRACTS.VAULT_CONTROLLER,
+            positionId as `0x${string}`,
+            marketId,
+          );
+        } else {
+          const repayAmountBigint = parseUnits(repayAmount.toString(), 6);
+
+          await repayDebtPartial(
+            walletClient,
+            chain,
+            CONTRACTS.VAULT_CONTROLLER,
+            positionId as `0x${string}`,
+            marketId,
+            repayAmountBigint,
+          );
+        }
+
+        // Step 2: Withdraw collateral if user requested it
+        if (withdrawAmount > 0) {
+          await withdrawCollateralFromPosition(
+            walletClient,
+            chain,
+            CONTRACTS.VAULT_CONTROLLER,
+            marketId,
+          );
+        }
+
+        // Refetch position data to update UI
+        await refetch();
+
+        // Success - show success modal
+        onRepaySuccess();
+      } catch (error) {
+        // Show error to user
+        console.error("Repayment failed:", error);
+        alert(
+          `Repayment failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+        );
+      } finally {
+        setProcessing(false);
+      }
+    } else {
+      // Market view - mock repay (user shouldn't actually reach here without position)
+      setProcessing(true);
+      try {
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        onRepaySuccess();
+      } finally {
+        setProcessing(false);
+      }
+    }
+  };
+
+  return {
+    handleConfirmBorrow,
+    handleConfirmRepay,
+  };
+}

services/vault/src/components/Market/Detail/hooks/useMarketDetail.ts

@@ -18,6 +18,7 @@ export function useMarketDetail() {
     btcPriceUSD,
     loading: isMarketLoading,
     error: marketError,
+    refetch,
   } = useMarketDetailData(marketId);
 
   const [creationDate, setCreationDate] = useState<string>("Loading...");
@@ -108,20 +109,11 @@ export function useMarketDetail() {
     marketData,
   ]);
 
-  const positionData = useMemo<Array<{ label: string; value: string }>>(() => {
+  const positionData = useMemo<
+    Array<{ label: string; value: string }> | undefined
+  >(() => {
     if (!userPosition) {
-      return [
-        { label: "Current Loan", value: "0 USDC" },
-        { label: "Current Collateral", value: "0 BTC" },
-        { label: "Market", value: "BTC/USDC" },
-        { label: "Current LTV", value: "0%" },
-        {
-          label: "Liquidation LTV",
-          value: marketConfig
-            ? `${formatLLTV(marketConfig.lltv)}%`
-            : `${liquidationLtv.toFixed(1)}%`,
-        },
-      ];
+      return undefined;
     }
     const currentLtv =
       currentCollateralAmount > 0
@@ -154,6 +146,34 @@ export function useMarketDetail() {
     liquidationLtv,
   ]);
 
+  // Format market display values
+  const marketDisplayValues = useMemo(() => {
+    if (!marketData) {
+      return {
+        totalMarketSize: "?",
+        totalMarketSizeSubtitle: "?",
+        totalLiquidity: "?",
+        totalLiquiditySubtitle: "?",
+        borrowRate: "?",
+      };
+    }
+
+    const totalSupplyM = (Number(marketData.totalSupplyAssets) / 1e12).toFixed(
+      2,
+    );
+    const totalBorrowM = (Number(marketData.totalBorrowAssets) / 1e12).toFixed(
+      2,
+    );
+
+    return {
+      totalMarketSize: `$${totalSupplyM}M`,
+      totalMarketSizeSubtitle: `${totalSupplyM}M USDC`,
+      totalLiquidity: `$${totalBorrowM}M`,
+      totalLiquiditySubtitle: `${totalBorrowM}M USDC`,
+      borrowRate: "?",
+    };
+  }, [marketData]);
+
   return {
     // loading / error
     isMarketLoading,
@@ -173,5 +193,9 @@ export function useMarketDetail() {
     // derived view
     marketAttributes,
     positionData,
+    marketDisplayValues,
+
+    // actions
+    refetch,
   } as const;
 }