From 7505e2cd12af377a17e20ac43c2d75beac6debc6 Mon Sep 17 00:00:00 2001
From: anton <anton@linqizhendeMac-mini.local>
Date: Wed, 28 Jan 2026 18:13:41 +0800
Subject: [PATCH 1/8] feat: improve borrow/repay UX (#334)

- Add 'borrow' modal type to Zustand modal store
- Create BorrowModalGlobal wrapper with oracle price fetching
- Register BorrowModal in global modal registry
- Add 'Borrow' action to MarketActionsDropdown
- Add 'Manage Borrow' button to positions page for borrow positions
- Show prominent 'Outstanding Debt' display in repay panel
- Add bidirectional Target LTV % input to borrow form
- Support defaultMode prop for opening modal in borrow/repay mode
---
 .../components/market-actions-dropdown.tsx    | 11 ++-
 .../components/supplied-markets-detail.tsx    | 17 ++++
 src/modals/borrow/borrow-modal-global.tsx     | 46 ++++++++++
 src/modals/borrow/borrow-modal.tsx            | 21 ++++-
 .../components/add-collateral-and-borrow.tsx  | 88 ++++++++++++++++++-
 .../withdraw-collateral-and-repay.tsx         | 21 +++++
 src/modals/registry.tsx                       |  4 +
 src/stores/useModalStore.ts                   | 10 +++
 8 files changed, 213 insertions(+), 5 deletions(-)
 create mode 100644 src/modals/borrow/borrow-modal-global.tsx

diff --git a/src/features/markets/components/market-actions-dropdown.tsx b/src/features/markets/components/market-actions-dropdown.tsx
index e2cab73d..b15eec57 100644
--- a/src/features/markets/components/market-actions-dropdown.tsx
+++ b/src/features/markets/components/market-actions-dropdown.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { AiOutlineStop } from 'react-icons/ai';
 import { GoStarFill, GoStar, GoGraph } from 'react-icons/go';
 import { IoEllipsisVertical } from 'react-icons/io5';
-import { TbArrowUp } from 'react-icons/tb';
+import { TbArrowUp, TbArrowDown } from 'react-icons/tb';
 import { Button } from '@/components/ui/button';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
 import type { Market } from '@/utils/types';
@@ -81,6 +81,15 @@ export function MarketActionsDropdown({ market }: MarketActionsDropdownProps) {
             Supply
           </DropdownMenuItem>
 
+          <DropdownMenuItem
+            onClick={() => {
+              openModal('borrow', { market });
+            }}
+            startContent={<TbArrowDown className="h-4 w-4" />}
+          >
+            Borrow
+          </DropdownMenuItem>
+
           <DropdownMenuItem
             onClick={onMarketClick}
             startContent={<GoGraph className="h-4 w-4" />}
diff --git a/src/features/positions/components/supplied-markets-detail.tsx b/src/features/positions/components/supplied-markets-detail.tsx
index 56276edd..66f81439 100644
--- a/src/features/positions/components/supplied-markets-detail.tsx
+++ b/src/features/positions/components/supplied-markets-detail.tsx
@@ -22,6 +22,7 @@ function MarketRow({ position, totalSupply, rateLabel }: { position: MarketPosit
   const { open } = useModal();
   const suppliedAmount = Number(formatBalance(position.state.supplyAssets, position.market.loanAsset.decimals));
   const percentageOfPortfolio = totalSupply > 0 ? (suppliedAmount / totalSupply) * 100 : 0;
+  const hasBorrowPosition = BigInt(position.state.borrowAssets) > 0n || BigInt(position.state.collateral) > 0n;
 
   return (
     <TableRow
@@ -74,6 +75,22 @@ function MarketRow({ position, totalSupply, rateLabel }: { position: MarketPosit
         style={{ minWidth: '180px' }}
       >
         <div className="flex items-center justify-end gap-2">
+          {hasBorrowPosition && (
+            <Button
+              size="sm"
+              variant="surface"
+              onClick={() => {
+                open('borrow', {
+                  market: position.market,
+                  position,
+                  defaultMode: 'repay',
+                  isMarketPage: false,
+                });
+              }}
+            >
+              Manage Borrow
+            </Button>
+          )}
           <Button
             size="sm"
             variant="surface"
diff --git a/src/modals/borrow/borrow-modal-global.tsx b/src/modals/borrow/borrow-modal-global.tsx
new file mode 100644
index 00000000..5da670d7
--- /dev/null
+++ b/src/modals/borrow/borrow-modal-global.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import type { Market, MarketPosition } from '@/utils/types';
+import type { LiquiditySourcingResult } from '@/hooks/useMarketLiquiditySourcing';
+import { useOraclePrice } from '@/hooks/useOraclePrice';
+import { BorrowModal } from './borrow-modal';
+
+type BorrowModalGlobalProps = {
+  market: Market;
+  position?: MarketPosition | null;
+  defaultMode?: 'borrow' | 'repay';
+  isMarketPage?: boolean;
+  refetch?: () => void;
+  liquiditySourcing?: LiquiditySourcingResult;
+  onOpenChange: (open: boolean) => void;
+};
+
+/**
+ * Global BorrowModal wrapper that fetches oracle price automatically.
+ * Used by the ModalRenderer via the modal registry.
+ */
+export function BorrowModalGlobal({
+  market,
+  position,
+  defaultMode,
+  refetch,
+  liquiditySourcing,
+  onOpenChange,
+}: BorrowModalGlobalProps): JSX.Element {
+  const { price: oraclePrice } = useOraclePrice({
+    oracle: market.oracleAddress as `0x${string}`,
+    chainId: market.morphoBlue.chain.id,
+  });
+
+  return (
+    <BorrowModal
+      market={market}
+      onOpenChange={onOpenChange}
+      oraclePrice={oraclePrice}
+      refetch={refetch}
+      position={position ?? null}
+      defaultMode={defaultMode}
+      liquiditySourcing={liquiditySourcing}
+    />
+  );
+}
diff --git a/src/modals/borrow/borrow-modal.tsx b/src/modals/borrow/borrow-modal.tsx
index b00dc4de..35d6c008 100644
--- a/src/modals/borrow/borrow-modal.tsx
+++ b/src/modals/borrow/borrow-modal.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { LuArrowRightLeft } from 'react-icons/lu';
 import { useConnection, useReadContract, useBalance } from 'wagmi';
 import { erc20Abi } from 'viem';
@@ -17,11 +17,26 @@ type BorrowModalProps = {
   refetch?: () => void;
   isRefreshing?: boolean;
   position: MarketPosition | null;
+  defaultMode?: 'borrow' | 'repay';
   liquiditySourcing?: LiquiditySourcingResult;
 };
 
-export function BorrowModal({ market, onOpenChange, oraclePrice, refetch, isRefreshing = false, position, liquiditySourcing }: BorrowModalProps): JSX.Element {
-  const [mode, setMode] = useState<'borrow' | 'repay'>('borrow');
+export function BorrowModal({
+  market,
+  onOpenChange,
+  oraclePrice,
+  refetch,
+  isRefreshing = false,
+  position,
+  defaultMode = 'borrow',
+  liquiditySourcing,
+}: BorrowModalProps): JSX.Element {
+  const [mode, setMode] = useState<'borrow' | 'repay'>(defaultMode);
+
+  // Reset mode when defaultMode changes (e.g., modal re-opened with different mode)
+  useEffect(() => {
+    setMode(defaultMode);
+  }, [defaultMode]);
   const { address: account } = useConnection();
 
   // Get token balances
diff --git a/src/modals/borrow/components/add-collateral-and-borrow.tsx b/src/modals/borrow/components/add-collateral-and-borrow.tsx
index 73770e98..8b7280a4 100644
--- a/src/modals/borrow/components/add-collateral-and-borrow.tsx
+++ b/src/modals/borrow/components/add-collateral-and-borrow.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { LuDroplets } from 'react-icons/lu';
 import { IconSwitch } from '@/components/ui/icon-switch';
 import { RefetchIcon } from '@/components/ui/refetch-icon';
@@ -43,6 +43,8 @@ export function AddCollateralAndBorrow({
   const [borrowAmount, setBorrowAmount] = useState<bigint>(BigInt(0));
   const [collateralInputError, setCollateralInputError] = useState<string | null>(null);
   const [borrowInputError, setBorrowInputError] = useState<string | null>(null);
+  const [targetLtvInput, setTargetLtvInput] = useState<string>('');
+  const ltvInputActive = useRef(false);
   const { usePermit2: usePermit2Setting } = useAppSettings();
 
   // lltv with 18 decimals
@@ -117,6 +119,70 @@ export function AddCollateralAndBorrow({
     }
   }, [currentPosition, collateralAmount, borrowAmount, oraclePrice]);
 
+  // Sync LTV input from borrow amount (when borrow amount changes and user isn't actively editing LTV)
+  useEffect(() => {
+    if (ltvInputActive.current) return;
+    if (borrowAmount === 0n && collateralAmount === 0n) {
+      setTargetLtvInput('');
+      return;
+    }
+    if (newLTV > 0n) {
+      // newLTV is 18 decimals, convert to percentage
+      const ltvPercent = Number(newLTV) / 1e16;
+      setTargetLtvInput(ltvPercent.toFixed(2));
+    }
+  }, [newLTV, borrowAmount, collateralAmount]);
+
+  // Handle LTV input change: compute borrow amount from target LTV
+  const handleLtvInputChange = useCallback(
+    (value: string) => {
+      ltvInputActive.current = true;
+      setTargetLtvInput(value);
+
+      const targetLtvPercent = Number.parseFloat(value);
+      if (Number.isNaN(targetLtvPercent) || targetLtvPercent <= 0) {
+        setBorrowAmount(0n);
+        // Use setTimeout to reset the ref after the state update cycle
+        setTimeout(() => {
+          ltvInputActive.current = false;
+        }, 0);
+        return;
+      }
+
+      // targetLtv as 18 decimal bigint
+      const targetLtvBig = BigInt(Math.floor(targetLtvPercent * 1e16));
+
+      // Total collateral after adding new
+      const totalCollateral = BigInt(currentPosition?.state.collateral ?? 0) + collateralAmount;
+      // Collateral value in loan token terms (oracle price has 36 decimals scaling)
+      const totalCollateralValueInLoan = (totalCollateral * oraclePrice) / BigInt(10 ** 36);
+
+      if (totalCollateralValueInLoan <= 0n) {
+        setBorrowAmount(0n);
+        setTimeout(() => {
+          ltvInputActive.current = false;
+        }, 0);
+        return;
+      }
+
+      // targetBorrow = (targetLtv * totalCollateralValueInLoan) / 1e18
+      const totalTargetBorrow = (targetLtvBig * totalCollateralValueInLoan) / BigInt(10 ** 18);
+      // Subtract existing borrow to get the new borrow amount
+      const existingBorrow = BigInt(currentPosition?.state.borrowAssets ?? 0);
+      const newBorrow = totalTargetBorrow > existingBorrow ? totalTargetBorrow - existingBorrow : 0n;
+
+      setBorrowAmount(newBorrow);
+
+      setTimeout(() => {
+        ltvInputActive.current = false;
+      }, 0);
+    },
+    [currentPosition, collateralAmount, oraclePrice],
+  );
+
+  // LLTV as percentage for display
+  const lltvPercent = Number(lltv) / 1e16;
+
   // Function to handle manual refresh
   const handleRefresh = useCallback(() => {
     if (!onSuccess) return;
@@ -318,6 +384,26 @@ export function AddCollateralAndBorrow({
                 </div>
               </div>
             </div>
+
+            {/* Target LTV Input */}
+            <div className="mb-1">
+              <div className="flex items-center justify-between">
+                <p className="font text-sm">Target LTV %</p>
+                <p className="font text-xs opacity-50">Max: {lltvPercent.toFixed(2)}%</p>
+              </div>
+              <div className="mb-4">
+                <input
+                  type="number"
+                  min="0"
+                  max={lltvPercent}
+                  step="0.1"
+                  value={targetLtvInput}
+                  onChange={(e) => handleLtvInputChange(e.target.value)}
+                  placeholder="0.00"
+                  className="bg-hovered w-full rounded-sm border border-transparent px-3 py-2 font-zen text-sm outline-none transition-colors focus:border-primary"
+                />
+              </div>
+            </div>
           </div>
 
           {/* Action Button */}
diff --git a/src/modals/borrow/components/withdraw-collateral-and-repay.tsx b/src/modals/borrow/components/withdraw-collateral-and-repay.tsx
index 857de08c..df866448 100644
--- a/src/modals/borrow/components/withdraw-collateral-and-repay.tsx
+++ b/src/modals/borrow/components/withdraw-collateral-and-repay.tsx
@@ -247,6 +247,27 @@ export function WithdrawCollateralAndRepay({
           />
         </div>
 
+        {/* Outstanding Debt Display */}
+        {currentPosition && BigInt(currentPosition.state.borrowAssets) > 0n && (
+          <div className="mb-4 rounded-sm border border-orange-500/20 bg-orange-500/5 p-3">
+            <div className="flex items-center justify-between">
+              <span className="font-zen text-xs opacity-60">Outstanding Debt</span>
+              <div className="flex items-center gap-2">
+                <TokenIcon
+                  address={market.loanAsset.address}
+                  chainId={market.morphoBlue.chain.id}
+                  symbol={market.loanAsset.symbol}
+                  width={16}
+                  height={16}
+                />
+                <span className="font-zen text-sm font-medium">
+                  {formatBalance(BigInt(currentPosition.state.borrowAssets), market.loanAsset.decimals)} {market.loanAsset.symbol}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+
         <div className="mt-12 space-y-4">
           {/* Withdraw Input Section */}
           <div className="mb-1">
diff --git a/src/modals/registry.tsx b/src/modals/registry.tsx
index 342ab714..90787268 100644
--- a/src/modals/registry.tsx
+++ b/src/modals/registry.tsx
@@ -13,6 +13,9 @@ import { lazy } from 'react';
 // Swap
 const SwapModal = lazy(() => import('@/features/swap/components/SwapModal').then((m) => ({ default: m.SwapModal })));
 
+// Borrow & Repay
+const BorrowModalGlobal = lazy(() => import('@/modals/borrow/borrow-modal-global').then((m) => ({ default: m.BorrowModalGlobal })));
+
 // Supply & Withdraw
 const SupplyModalV2 = lazy(() => import('@/modals/supply/supply-modal').then((m) => ({ default: m.SupplyModalV2 })));
 
@@ -45,6 +48,7 @@ const VaultWithdrawModal = lazy(() => import('@/modals/vault/vault-withdraw-moda
 export const MODAL_REGISTRY: {
   [K in ModalType]: ComponentType<any>;
 } = {
+  borrow: BorrowModalGlobal,
   bridgeSwap: SwapModal,
   supply: SupplyModalV2,
   rebalance: RebalanceModal,
diff --git a/src/stores/useModalStore.ts b/src/stores/useModalStore.ts
index 92b3e4e1..5bee05d7 100644
--- a/src/stores/useModalStore.ts
+++ b/src/stores/useModalStore.ts
@@ -16,6 +16,16 @@ export type ModalProps = {
     defaultTargetToken?: SwapToken;
   };
 
+  // Borrow & Repay
+  borrow: {
+    market: Market;
+    position?: MarketPosition | null;
+    defaultMode?: 'borrow' | 'repay';
+    isMarketPage?: boolean;
+    refetch?: () => void;
+    liquiditySourcing?: LiquiditySourcingResult;
+  };
+
   // Supply & Withdraw
   supply: {
     market: Market;

From 85e8d1b3543aec54fbc5fcc5edff998b6772ed76 Mon Sep 17 00:00:00 2001
From: anton <anton@linqizhendeMac-mini.local>
Date: Wed, 28 Jan 2026 19:55:51 +0800
Subject: [PATCH 2/8] fix: always show Borrow button on positions page for
 discoverability

- Previously only showed 'Manage Borrow' when user had existing borrow position
- Now always shows button: 'Borrow' for new users, 'Manage Borrow' for existing
- Addresses core discoverability issue from #334

The original implementation only showed the borrow button when
hasBorrowPosition was true, which defeated the purpose of making
borrow/repay more discoverable for users who haven't borrowed yet.
---
 .../components/supplied-markets-detail.tsx    | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/features/positions/components/supplied-markets-detail.tsx b/src/features/positions/components/supplied-markets-detail.tsx
index 66f81439..7765c959 100644
--- a/src/features/positions/components/supplied-markets-detail.tsx
+++ b/src/features/positions/components/supplied-markets-detail.tsx
@@ -75,22 +75,20 @@ function MarketRow({ position, totalSupply, rateLabel }: { position: MarketPosit
         style={{ minWidth: '180px' }}
       >
         <div className="flex items-center justify-end gap-2">
-          {hasBorrowPosition && (
-            <Button
-              size="sm"
-              variant="surface"
-              onClick={() => {
-                open('borrow', {
-                  market: position.market,
-                  position,
-                  defaultMode: 'repay',
-                  isMarketPage: false,
-                });
-              }}
-            >
-              Manage Borrow
-            </Button>
-          )}
+          <Button
+            size="sm"
+            variant="surface"
+            onClick={() => {
+              open('borrow', {
+                market: position.market,
+                position,
+                defaultMode: hasBorrowPosition ? 'repay' : 'borrow',
+                isMarketPage: false,
+              });
+            }}
+          >
+            {hasBorrowPosition ? 'Manage Borrow' : 'Borrow'}
+          </Button>
           <Button
             size="sm"
             variant="surface"

From ec12d3b3b60294c5c9f8edfce513dce04bb987e3 Mon Sep 17 00:00:00 2001
From: anton <anton@linqizhendeMac-mini.local>
Date: Wed, 28 Jan 2026 20:07:50 +0800
Subject: [PATCH 3/8] refactor: address Anton's feedback on borrow UX

1. Remove duplicate 'Outstanding Debt' component - enhance existing 'My Borrow'
   block instead with bigger font (text-base) and bold (font-semibold)
2. Remove Target LTV input - UX wasn't good, needs better approach
3. Fix icons: Supply uses BsArrowUpCircle, Borrow uses BsArrowDownLeftCircle
   per the domain icons standard

-109 lines of code removed
---
 .../components/market-actions-dropdown.tsx    |  6 +-
 .../components/add-collateral-and-borrow.tsx  | 88 +------------------
 .../withdraw-collateral-and-repay.tsx         | 29 +-----
 3 files changed, 8 insertions(+), 115 deletions(-)

diff --git a/src/features/markets/components/market-actions-dropdown.tsx b/src/features/markets/components/market-actions-dropdown.tsx
index b15eec57..55d0069d 100644
--- a/src/features/markets/components/market-actions-dropdown.tsx
+++ b/src/features/markets/components/market-actions-dropdown.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { AiOutlineStop } from 'react-icons/ai';
 import { GoStarFill, GoStar, GoGraph } from 'react-icons/go';
 import { IoEllipsisVertical } from 'react-icons/io5';
-import { TbArrowUp, TbArrowDown } from 'react-icons/tb';
+import { BsArrowUpCircle, BsArrowDownLeftCircle } from 'react-icons/bs';
 import { Button } from '@/components/ui/button';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
 import type { Market } from '@/utils/types';
@@ -76,7 +76,7 @@ export function MarketActionsDropdown({ market }: MarketActionsDropdownProps) {
             onClick={() => {
               openModal('supply', { market });
             }}
-            startContent={<TbArrowUp className="h-4 w-4" />}
+            startContent={<BsArrowUpCircle className="h-4 w-4" />}
           >
             Supply
           </DropdownMenuItem>
@@ -85,7 +85,7 @@ export function MarketActionsDropdown({ market }: MarketActionsDropdownProps) {
             onClick={() => {
               openModal('borrow', { market });
             }}
-            startContent={<TbArrowDown className="h-4 w-4" />}
+            startContent={<BsArrowDownLeftCircle className="h-4 w-4" />}
           >
             Borrow
           </DropdownMenuItem>
diff --git a/src/modals/borrow/components/add-collateral-and-borrow.tsx b/src/modals/borrow/components/add-collateral-and-borrow.tsx
index 8b7280a4..73770e98 100644
--- a/src/modals/borrow/components/add-collateral-and-borrow.tsx
+++ b/src/modals/borrow/components/add-collateral-and-borrow.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { LuDroplets } from 'react-icons/lu';
 import { IconSwitch } from '@/components/ui/icon-switch';
 import { RefetchIcon } from '@/components/ui/refetch-icon';
@@ -43,8 +43,6 @@ export function AddCollateralAndBorrow({
   const [borrowAmount, setBorrowAmount] = useState<bigint>(BigInt(0));
   const [collateralInputError, setCollateralInputError] = useState<string | null>(null);
   const [borrowInputError, setBorrowInputError] = useState<string | null>(null);
-  const [targetLtvInput, setTargetLtvInput] = useState<string>('');
-  const ltvInputActive = useRef(false);
   const { usePermit2: usePermit2Setting } = useAppSettings();
 
   // lltv with 18 decimals
@@ -119,70 +117,6 @@ export function AddCollateralAndBorrow({
     }
   }, [currentPosition, collateralAmount, borrowAmount, oraclePrice]);
 
-  // Sync LTV input from borrow amount (when borrow amount changes and user isn't actively editing LTV)
-  useEffect(() => {
-    if (ltvInputActive.current) return;
-    if (borrowAmount === 0n && collateralAmount === 0n) {
-      setTargetLtvInput('');
-      return;
-    }
-    if (newLTV > 0n) {
-      // newLTV is 18 decimals, convert to percentage
-      const ltvPercent = Number(newLTV) / 1e16;
-      setTargetLtvInput(ltvPercent.toFixed(2));
-    }
-  }, [newLTV, borrowAmount, collateralAmount]);
-
-  // Handle LTV input change: compute borrow amount from target LTV
-  const handleLtvInputChange = useCallback(
-    (value: string) => {
-      ltvInputActive.current = true;
-      setTargetLtvInput(value);
-
-      const targetLtvPercent = Number.parseFloat(value);
-      if (Number.isNaN(targetLtvPercent) || targetLtvPercent <= 0) {
-        setBorrowAmount(0n);
-        // Use setTimeout to reset the ref after the state update cycle
-        setTimeout(() => {
-          ltvInputActive.current = false;
-        }, 0);
-        return;
-      }
-
-      // targetLtv as 18 decimal bigint
-      const targetLtvBig = BigInt(Math.floor(targetLtvPercent * 1e16));
-
-      // Total collateral after adding new
-      const totalCollateral = BigInt(currentPosition?.state.collateral ?? 0) + collateralAmount;
-      // Collateral value in loan token terms (oracle price has 36 decimals scaling)
-      const totalCollateralValueInLoan = (totalCollateral * oraclePrice) / BigInt(10 ** 36);
-
-      if (totalCollateralValueInLoan <= 0n) {
-        setBorrowAmount(0n);
-        setTimeout(() => {
-          ltvInputActive.current = false;
-        }, 0);
-        return;
-      }
-
-      // targetBorrow = (targetLtv * totalCollateralValueInLoan) / 1e18
-      const totalTargetBorrow = (targetLtvBig * totalCollateralValueInLoan) / BigInt(10 ** 18);
-      // Subtract existing borrow to get the new borrow amount
-      const existingBorrow = BigInt(currentPosition?.state.borrowAssets ?? 0);
-      const newBorrow = totalTargetBorrow > existingBorrow ? totalTargetBorrow - existingBorrow : 0n;
-
-      setBorrowAmount(newBorrow);
-
-      setTimeout(() => {
-        ltvInputActive.current = false;
-      }, 0);
-    },
-    [currentPosition, collateralAmount, oraclePrice],
-  );
-
-  // LLTV as percentage for display
-  const lltvPercent = Number(lltv) / 1e16;
-
   // Function to handle manual refresh
   const handleRefresh = useCallback(() => {
     if (!onSuccess) return;
@@ -384,26 +318,6 @@ export function AddCollateralAndBorrow({
                 </div>
               </div>
             </div>
-
-            {/* Target LTV Input */}
-            <div className="mb-1">
-              <div className="flex items-center justify-between">
-                <p className="font text-sm">Target LTV %</p>
-                <p className="font text-xs opacity-50">Max: {lltvPercent.toFixed(2)}%</p>
-              </div>
-              <div className="mb-4">
-                <input
-                  type="number"
-                  min="0"
-                  max={lltvPercent}
-                  step="0.1"
-                  value={targetLtvInput}
-                  onChange={(e) => handleLtvInputChange(e.target.value)}
-                  placeholder="0.00"
-                  className="bg-hovered w-full rounded-sm border border-transparent px-3 py-2 font-zen text-sm outline-none transition-colors focus:border-primary"
-                />
-              </div>
-            </div>
           </div>
 
           {/* Action Button */}
diff --git a/src/modals/borrow/components/withdraw-collateral-and-repay.tsx b/src/modals/borrow/components/withdraw-collateral-and-repay.tsx
index df866448..3c9348e7 100644
--- a/src/modals/borrow/components/withdraw-collateral-and-repay.tsx
+++ b/src/modals/borrow/components/withdraw-collateral-and-repay.tsx
@@ -189,16 +189,16 @@ export function WithdrawCollateralAndRepay({
               </div>
             </div>
             <div>
-              <p className="mb-1 font-zen text-xs opacity-50">Total Borrowed</p>
+              <p className="mb-1 font-zen text-xs opacity-50">Outstanding Debt</p>
               <div className="flex items-center gap-2">
                 <TokenIcon
                   address={market.loanAsset.address}
                   chainId={market.morphoBlue.chain.id}
                   symbol={market.loanAsset.symbol}
-                  width={16}
-                  height={16}
+                  width={20}
+                  height={20}
                 />
-                <p className="font-zen text-sm">
+                <p className="font-zen text-base font-semibold">
                   {formatBalance(BigInt(currentPosition?.state.borrowAssets ?? 0), market.loanAsset.decimals)} {market.loanAsset.symbol}
                 </p>
               </div>
@@ -247,27 +247,6 @@ export function WithdrawCollateralAndRepay({
           />
         </div>
 
-        {/* Outstanding Debt Display */}
-        {currentPosition && BigInt(currentPosition.state.borrowAssets) > 0n && (
-          <div className="mb-4 rounded-sm border border-orange-500/20 bg-orange-500/5 p-3">
-            <div className="flex items-center justify-between">
-              <span className="font-zen text-xs opacity-60">Outstanding Debt</span>
-              <div className="flex items-center gap-2">
-                <TokenIcon
-                  address={market.loanAsset.address}
-                  chainId={market.morphoBlue.chain.id}
-                  symbol={market.loanAsset.symbol}
-                  width={16}
-                  height={16}
-                />
-                <span className="font-zen text-sm font-medium">
-                  {formatBalance(BigInt(currentPosition.state.borrowAssets), market.loanAsset.decimals)} {market.loanAsset.symbol}
-                </span>
-              </div>
-            </div>
-          </div>
-        )}
-
         <div className="mt-12 space-y-4">
           {/* Withdraw Input Section */}
           <div className="mb-1">

From 121e2f5734ce35b62da2f8a63f45467aee7f938a Mon Sep 17 00:00:00 2001
From: anton <anton@linqizhendeMac-mini.local>
Date: Wed, 28 Jan 2026 20:10:10 +0800
Subject: [PATCH 4/8] feat: remove Source Liquidity from market header dropdown

Per Anton's request - this will be a paid feature later.
The underlying PA functionality still works automatically during
withdraw/borrow when needed, just not exposed as a manual action.
---
 .../market-detail/components/market-header.tsx     | 14 ++------------
 src/features/market-detail/market-view.tsx         | 12 ------------
 2 files changed, 2 insertions(+), 24 deletions(-)

diff --git a/src/features/market-detail/components/market-header.tsx b/src/features/market-detail/components/market-header.tsx
index b093262b..c205b0c4 100644
--- a/src/features/market-detail/components/market-header.tsx
+++ b/src/features/market-detail/components/market-header.tsx
@@ -8,7 +8,7 @@ import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { GrStatusGood } from 'react-icons/gr';
 import { IoWarningOutline, IoEllipsisVertical } from 'react-icons/io5';
 import { MdError } from 'react-icons/md';
-import { BsArrowUpCircle, BsArrowDownLeftCircle, BsFillLightningFill, BsArrowRepeat } from 'react-icons/bs';
+import { BsArrowUpCircle, BsArrowDownLeftCircle, BsFillLightningFill } from 'react-icons/bs';
 import { FiExternalLink } from 'react-icons/fi';
 import { LuCopy } from 'react-icons/lu';
 import { Button } from '@/components/ui/button';
@@ -122,7 +122,6 @@ type MarketHeaderProps = {
   onSupplyClick: () => void;
   onBorrowClick: () => void;
   accrueInterest: () => void;
-  onPullLiquidity: () => void;
 };
 
 export function MarketHeader({
@@ -135,11 +134,10 @@ export function MarketHeader({
   onSupplyClick,
   onBorrowClick,
   accrueInterest,
-  onPullLiquidity,
 }: MarketHeaderProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const { short: rateLabel } = useRateLabel();
-  const { isAprDisplay, showDeveloperOptions, usePublicAllocator } = useAppSettings();
+  const { isAprDisplay, showDeveloperOptions } = useAppSettings();
   const toast = useStyledToast();
   const networkImg = getNetworkImg(network);
 
@@ -355,14 +353,6 @@ export function MarketHeader({
                   >
                     Borrow
                   </DropdownMenuItem>
-                  {usePublicAllocator && (
-                    <DropdownMenuItem
-                      onClick={onPullLiquidity}
-                      startContent={<BsArrowRepeat className="h-4 w-4" />}
-                    >
-                      Source Liquidity
-                    </DropdownMenuItem>
-                  )}
                   {showDeveloperOptions && (
                     <DropdownMenuItem
                       onClick={accrueInterest}
diff --git a/src/features/market-detail/market-view.tsx b/src/features/market-detail/market-view.tsx
index da0e548c..2c1bbe3c 100644
--- a/src/features/market-detail/market-view.tsx
+++ b/src/features/market-detail/market-view.tsx
@@ -31,7 +31,6 @@ import { useMarketWarnings } from '@/hooks/useMarketWarnings';
 import { useMarketLiquiditySourcing } from '@/hooks/useMarketLiquiditySourcing';
 import { useAllMarketBorrowers, useAllMarketSuppliers } from '@/hooks/useAllMarketPositions';
 import { MarketHeader } from './components/market-header';
-import { PullLiquidityModal } from './components/pull-liquidity-modal';
 import RateChart from './components/charts/rate-chart';
 import VolumeChart from './components/charts/volume-chart';
 import { SuppliersPieChart } from './components/charts/suppliers-pie-chart';
@@ -52,7 +51,6 @@ function MarketContent() {
   const selectedTab = useMarketDetailPreferences((s) => s.selectedTab);
   const setSelectedTab = useMarketDetailPreferences((s) => s.setSelectedTab);
   const [showBorrowModal, setShowBorrowModal] = useState(false);
-  const [showPullLiquidityModal, setShowPullLiquidityModal] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [showTransactionFiltersModal, setShowTransactionFiltersModal] = useState(false);
   const [showSupplierFiltersModal, setShowSupplierFiltersModal] = useState(false);
@@ -310,7 +308,6 @@ function MarketContent() {
           onSupplyClick={handleSupplyClick}
           onBorrowClick={handleBorrowClick}
           accrueInterest={handleAccrueInterest}
-          onPullLiquidity={() => setShowPullLiquidityModal(true)}
         />
 
         {showBorrowModal && (
@@ -325,15 +322,6 @@ function MarketContent() {
           />
         )}
 
-        {showPullLiquidityModal && (
-          <PullLiquidityModal
-            market={market}
-            network={network}
-            onOpenChange={setShowPullLiquidityModal}
-            onSuccess={handleRefreshAllSync}
-          />
-        )}
-
         {showTransactionFiltersModal && (
           <TransactionFiltersModal
             isOpen={showTransactionFiltersModal}

From e9f016586edcb5ea41d38430996e3697ce23fa3f Mon Sep 17 00:00:00 2001
From: anton <anton@linqizhendeMac-mini.local>
Date: Wed, 28 Jan 2026 20:13:16 +0800
Subject: [PATCH 5/8] feat: prominent Supply/Borrow buttons on market header

- Supply and Borrow buttons now always visible (not hidden in dropdown)
- Dropdown now contains: Star, Blacklist, Accrue Interest (dev), View on Morpho
- Added star/blacklist functionality to market detail page
- Reverted positions page change (supply users don't care about borrow)

This addresses the actual user feedback: borrow was hidden on the MARKET
page, not the positions page.
---
 .../components/market-header.tsx              | 75 ++++++++++++++++---
 .../components/supplied-markets-detail.tsx    | 30 ++++----
 2 files changed, 82 insertions(+), 23 deletions(-)

diff --git a/src/features/market-detail/components/market-header.tsx b/src/features/market-detail/components/market-header.tsx
index c205b0c4..0a5fc9d9 100644
--- a/src/features/market-detail/components/market-header.tsx
+++ b/src/features/market-detail/components/market-header.tsx
@@ -9,9 +9,14 @@ import { GrStatusGood } from 'react-icons/gr';
 import { IoWarningOutline, IoEllipsisVertical } from 'react-icons/io5';
 import { MdError } from 'react-icons/md';
 import { BsArrowUpCircle, BsArrowDownLeftCircle, BsFillLightningFill } from 'react-icons/bs';
+import { GoStarFill, GoStar } from 'react-icons/go';
+import { AiOutlineStop } from 'react-icons/ai';
 import { FiExternalLink } from 'react-icons/fi';
 import { LuCopy } from 'react-icons/lu';
 import { Button } from '@/components/ui/button';
+import { useMarketPreferences } from '@/stores/useMarketPreferences';
+import { useBlacklistedMarkets } from '@/stores/useBlacklistedMarkets';
+import { BlacklistConfirmationModal } from '@/features/markets/components/blacklist-confirmation-modal';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
 import { TokenIcon } from '@/components/shared/token-icon';
 import { Tooltip } from '@/components/ui/tooltip';
@@ -136,10 +141,34 @@ export function MarketHeader({
   accrueInterest,
 }: MarketHeaderProps) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const [isBlacklistModalOpen, setIsBlacklistModalOpen] = useState(false);
   const { short: rateLabel } = useRateLabel();
   const { isAprDisplay, showDeveloperOptions } = useAppSettings();
+  const { starredMarkets, starMarket, unstarMarket } = useMarketPreferences();
+  const { isBlacklisted, addBlacklistedMarket } = useBlacklistedMarkets();
   const toast = useStyledToast();
   const networkImg = getNetworkImg(network);
+  const isStarred = starredMarkets.includes(market.uniqueKey);
+
+  const handleToggleStar = () => {
+    if (isStarred) {
+      unstarMarket(market.uniqueKey);
+      toast.success('Market unstarred', 'Removed from favorites');
+    } else {
+      starMarket(market.uniqueKey);
+      toast.success('Market starred', 'Added to favorites');
+    }
+  };
+
+  const handleBlacklistClick = () => {
+    if (!isBlacklisted(market.uniqueKey)) {
+      setIsBlacklistModalOpen(true);
+    }
+  };
+
+  const handleConfirmBlacklist = () => {
+    addBlacklistedMarket(market.uniqueKey, market.morphoBlue.chain.id);
+  };
 
   const handleCopyMarketId = async () => {
     try {
@@ -321,7 +350,7 @@ export function MarketHeader({
               </div>
             </div>
 
-            {/* Position Pill + Actions Dropdown */}
+            {/* Position Pill + Action Buttons + Dropdown */}
             <div className="flex flex-wrap items-center gap-2">
               {userPosition && (
                 <PositionPill
@@ -330,28 +359,50 @@ export function MarketHeader({
                   onBorrowClick={onBorrowClick}
                 />
               )}
+              {/* Prominent Supply & Borrow Buttons */}
+              <Button
+                size="sm"
+                variant="surface"
+                onClick={onSupplyClick}
+                className="gap-1.5"
+              >
+                <BsArrowUpCircle className="h-4 w-4" />
+                Supply
+              </Button>
+              <Button
+                size="sm"
+                variant="surface"
+                onClick={onBorrowClick}
+                className="gap-1.5"
+              >
+                <BsArrowDownLeftCircle className="h-4 w-4" />
+                Borrow
+              </Button>
+              {/* Advanced Options Dropdown */}
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    size="xs"
+                    size="sm"
                     variant="surface"
-                    className="px-0"
+                    className="px-2"
                   >
                     <IoEllipsisVertical className="h-4 w-4" />
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
                   <DropdownMenuItem
-                    onClick={onSupplyClick}
-                    startContent={<BsArrowUpCircle className="h-4 w-4" />}
+                    onClick={handleToggleStar}
+                    startContent={isStarred ? <GoStarFill className="h-4 w-4 text-yellow-500" /> : <GoStar className="h-4 w-4" />}
                   >
-                    Supply
+                    {isStarred ? 'Unstar' : 'Star'}
                   </DropdownMenuItem>
                   <DropdownMenuItem
-                    onClick={onBorrowClick}
-                    startContent={<BsArrowDownLeftCircle className="h-4 w-4" />}
+                    onClick={handleBlacklistClick}
+                    startContent={<AiOutlineStop className="h-4 w-4" />}
+                    className={isBlacklisted(market.uniqueKey) ? 'opacity-50 cursor-not-allowed' : ''}
+                    disabled={isBlacklisted(market.uniqueKey)}
                   >
-                    Borrow
+                    {isBlacklisted(market.uniqueKey) ? 'Blacklisted' : 'Blacklist'}
                   </DropdownMenuItem>
                   {showDeveloperOptions && (
                     <DropdownMenuItem
@@ -506,6 +557,12 @@ export function MarketHeader({
           </AnimatePresence>
         </div>
       </div>
+      <BlacklistConfirmationModal
+        isOpen={isBlacklistModalOpen}
+        onOpenChange={setIsBlacklistModalOpen}
+        onConfirm={handleConfirmBlacklist}
+        market={market}
+      />
     </div>
   );
 }
diff --git a/src/features/positions/components/supplied-markets-detail.tsx b/src/features/positions/components/supplied-markets-detail.tsx
index 7765c959..66f81439 100644
--- a/src/features/positions/components/supplied-markets-detail.tsx
+++ b/src/features/positions/components/supplied-markets-detail.tsx
@@ -75,20 +75,22 @@ function MarketRow({ position, totalSupply, rateLabel }: { position: MarketPosit
         style={{ minWidth: '180px' }}
       >
         <div className="flex items-center justify-end gap-2">
-          <Button
-            size="sm"
-            variant="surface"
-            onClick={() => {
-              open('borrow', {
-                market: position.market,
-                position,
-                defaultMode: hasBorrowPosition ? 'repay' : 'borrow',
-                isMarketPage: false,
-              });
-            }}
-          >
-            {hasBorrowPosition ? 'Manage Borrow' : 'Borrow'}
-          </Button>
+          {hasBorrowPosition && (
+            <Button
+              size="sm"
+              variant="surface"
+              onClick={() => {
+                open('borrow', {
+                  market: position.market,
+                  position,
+                  defaultMode: 'repay',
+                  isMarketPage: false,
+                });
+              }}
+            >
+              Manage Borrow
+            </Button>
+          )}
           <Button
             size="sm"
             variant="surface"

From 3a6932215294548f4b41e9c07043b4c7c88d6686 Mon Sep 17 00:00:00 2001
From: anton <anton@linqizhendeMac-mini.local>
Date: Wed, 28 Jan 2026 20:33:30 +0800
Subject: [PATCH 6/8] chore: remove unused isMarketPage prop from borrow modal

---
 src/features/positions/components/supplied-markets-detail.tsx | 3 ---
 src/modals/borrow/borrow-modal-global.tsx                     | 1 -
 src/stores/useModalStore.ts                                   | 1 -
 3 files changed, 5 deletions(-)

diff --git a/src/features/positions/components/supplied-markets-detail.tsx b/src/features/positions/components/supplied-markets-detail.tsx
index 66f81439..6143248b 100644
--- a/src/features/positions/components/supplied-markets-detail.tsx
+++ b/src/features/positions/components/supplied-markets-detail.tsx
@@ -84,7 +84,6 @@ function MarketRow({ position, totalSupply, rateLabel }: { position: MarketPosit
                   market: position.market,
                   position,
                   defaultMode: 'repay',
-                  isMarketPage: false,
                 });
               }}
             >
@@ -99,7 +98,6 @@ function MarketRow({ position, totalSupply, rateLabel }: { position: MarketPosit
                 market: position.market,
                 position,
                 defaultMode: 'withdraw',
-                isMarketPage: false,
               });
             }}
           >
@@ -112,7 +110,6 @@ function MarketRow({ position, totalSupply, rateLabel }: { position: MarketPosit
               open('supply', {
                 market: position.market,
                 position,
-                isMarketPage: false,
               });
             }}
           >
diff --git a/src/modals/borrow/borrow-modal-global.tsx b/src/modals/borrow/borrow-modal-global.tsx
index 5da670d7..03ae9a4a 100644
--- a/src/modals/borrow/borrow-modal-global.tsx
+++ b/src/modals/borrow/borrow-modal-global.tsx
@@ -9,7 +9,6 @@ type BorrowModalGlobalProps = {
   market: Market;
   position?: MarketPosition | null;
   defaultMode?: 'borrow' | 'repay';
-  isMarketPage?: boolean;
   refetch?: () => void;
   liquiditySourcing?: LiquiditySourcingResult;
   onOpenChange: (open: boolean) => void;
diff --git a/src/stores/useModalStore.ts b/src/stores/useModalStore.ts
index 5bee05d7..e87f0b00 100644
--- a/src/stores/useModalStore.ts
+++ b/src/stores/useModalStore.ts
@@ -21,7 +21,6 @@ export type ModalProps = {
     market: Market;
     position?: MarketPosition | null;
     defaultMode?: 'borrow' | 'repay';
-    isMarketPage?: boolean;
     refetch?: () => void;
     liquiditySourcing?: LiquiditySourcingResult;
   };

From 178c09f56dde30dfd6f87c1357aba47d76b1fa84 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Thu, 29 Jan 2026 01:08:04 +0800
Subject: [PATCH 7/8] feat: styleing

---
 src/components/ui/split-action-button.tsx     | 100 ++++++++++
 .../components/market-header.tsx              | 173 ++++++++++++++----
 .../components/position-pill.tsx              | 127 -------------
 src/features/market-detail/market-view.tsx    |  65 +++----
 4 files changed, 270 insertions(+), 195 deletions(-)
 create mode 100644 src/components/ui/split-action-button.tsx
 delete mode 100644 src/features/market-detail/components/position-pill.tsx

diff --git a/src/components/ui/split-action-button.tsx b/src/components/ui/split-action-button.tsx
new file mode 100644
index 00000000..07772a9f
--- /dev/null
+++ b/src/components/ui/split-action-button.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Tooltip } from '@/components/ui/tooltip';
+import { cn } from '@/utils/index';
+
+type DropdownItem = {
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+};
+
+type IndicatorConfig = {
+  show: boolean;
+  tooltip?: ReactNode;
+};
+
+type SplitActionButtonProps = {
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+  indicator?: IndicatorConfig;
+  dropdownItems: DropdownItem[];
+  className?: string;
+};
+
+export function SplitActionButton({
+  label,
+  icon,
+  onClick,
+  indicator,
+  dropdownItems,
+  className,
+}: SplitActionButtonProps): ReactNode {
+  const showIndicator = indicator?.show ?? false;
+
+  const mainButton = (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'inline-flex items-center gap-1.5 pl-3 pr-2 py-2 text-sm font-medium transition-all duration-200',
+        'rounded-l-sm rounded-r-none',
+        'bg-surface text-foreground hover:brightness-95',
+        'active:scale-[0.98] active:brightness-90',
+      )}
+    >
+      {showIndicator && <span className="h-2 w-2 rounded-full bg-primary block" />}
+      {icon}
+      {label}
+    </button>
+  );
+
+  const wrappedButton = showIndicator && indicator?.tooltip
+    ? <Tooltip content={indicator.tooltip}>{mainButton}</Tooltip>
+    : mainButton;
+
+  return (
+    <div className={cn(
+      'inline-flex items-stretch shadow-sm',
+      'hover:shadow-md transition-shadow',
+      className,
+    )}>
+      {wrappedButton}
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            className={cn(
+              'inline-flex items-center justify-center px-1 transition-all duration-200',
+              'rounded-l-none rounded-r-sm',
+              'bg-surface text-foreground hover:brightness-95',
+              'border-l border-border/20',
+              'active:brightness-90',
+            )}
+          >
+            <ChevronDownIcon className="h-3 w-3 opacity-60" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="min-w-0 p-1">
+          {dropdownItems.map((item) => (
+            <DropdownMenuItem
+              key={item.label}
+              onClick={item.onClick}
+              disabled={item.disabled}
+              startContent={item.icon}
+              className="px-2 py-2 text-sm gap-1.5"
+            >
+              {item.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/src/features/market-detail/components/market-header.tsx b/src/features/market-detail/components/market-header.tsx
index 0a5fc9d9..0b3f84b0 100644
--- a/src/features/market-detail/components/market-header.tsx
+++ b/src/features/market-detail/components/market-header.tsx
@@ -12,8 +12,9 @@ import { BsArrowUpCircle, BsArrowDownLeftCircle, BsFillLightningFill } from 'rea
 import { GoStarFill, GoStar } from 'react-icons/go';
 import { AiOutlineStop } from 'react-icons/ai';
 import { FiExternalLink } from 'react-icons/fi';
-import { LuCopy } from 'react-icons/lu';
+import { LuCopy, LuArrowDownToLine, LuRefreshCw } from 'react-icons/lu';
 import { Button } from '@/components/ui/button';
+import { SplitActionButton } from '@/components/ui/split-action-button';
 import { useMarketPreferences } from '@/stores/useMarketPreferences';
 import { useBlacklistedMarkets } from '@/stores/useBlacklistedMarkets';
 import { BlacklistConfirmationModal } from '@/features/markets/components/blacklist-confirmation-modal';
@@ -23,12 +24,12 @@ import { Tooltip } from '@/components/ui/tooltip';
 import { TooltipContent } from '@/components/shared/tooltip-content';
 import { AddressIdentity } from '@/components/shared/address-identity';
 import { CampaignBadge } from '@/features/market-detail/components/campaign-badge';
-import { PositionPill } from '@/features/market-detail/components/position-pill';
 import { OracleTypeInfo } from '@/features/markets/components/oracle/MarketOracle/OracleTypeInfo';
 import { useRateLabel } from '@/hooks/useRateLabel';
 import { useStyledToast } from '@/hooks/useStyledToast';
 import { useAppSettings } from '@/stores/useAppSettings';
 import { convertApyToApr } from '@/utils/rateMath';
+import { formatReadable } from '@/utils/balance';
 import { getIRMTitle } from '@/utils/morpho';
 import { getNetworkImg, getNetworkName, type SupportedNetworks } from '@/utils/networks';
 import { getMarketURL } from '@/utils/external';
@@ -117,6 +118,127 @@ function RiskIcon({ level }: { level: RiskLevel }): React.ReactNode {
   }
 }
 
+// Extracted action buttons component for cleaner code
+type ActionButtonsProps = {
+  market: Market;
+  userPosition: MarketPosition | null;
+  onSupplyClick: () => void;
+  onWithdrawClick: () => void;
+  onBorrowClick: () => void;
+  onRepayClick: () => void;
+};
+
+function ActionButtons({
+  market,
+  userPosition,
+  onSupplyClick,
+  onWithdrawClick,
+  onBorrowClick,
+  onRepayClick,
+}: ActionButtonsProps): React.ReactNode {
+  // Compute position states once
+  const hasSupply = userPosition !== null && BigInt(userPosition.state.supplyShares) > 0n;
+  const hasBorrow = userPosition !== null && BigInt(userPosition.state.borrowShares) > 0n;
+  const hasCollateral = userPosition !== null && BigInt(userPosition.state.collateral) > 0n;
+  const hasBorrowPosition = hasBorrow || hasCollateral;
+
+  const supplyTooltip =
+    hasSupply && userPosition ? (
+      <div className="flex items-center gap-3">
+        <TokenIcon
+          address={market.loanAsset.address}
+          chainId={market.morphoBlue.chain.id}
+          symbol={market.loanAsset.symbol}
+          width={20}
+          height={20}
+        />
+        <div>
+          <p className="text-xs text-secondary">Supplied</p>
+          <p className="text-sm font-medium tabular-nums">
+            {formatReadable(Number(formatUnits(BigInt(userPosition.state.supplyAssets), market.loanAsset.decimals)))}{' '}
+            {market.loanAsset.symbol}
+          </p>
+        </div>
+      </div>
+    ) : undefined;
+
+  const borrowTooltip =
+    hasBorrowPosition && userPosition ? (
+      <div className="space-y-2">
+        {hasCollateral && (
+          <div className="flex items-center gap-3">
+            <TokenIcon
+              address={market.collateralAsset.address}
+              chainId={market.morphoBlue.chain.id}
+              symbol={market.collateralAsset.symbol}
+              width={20}
+              height={20}
+            />
+            <div>
+              <p className="text-xs text-secondary">Collateral</p>
+              <p className="text-sm font-medium tabular-nums">
+                {formatReadable(Number(formatUnits(BigInt(userPosition.state.collateral), market.collateralAsset.decimals)))}{' '}
+                {market.collateralAsset.symbol}
+              </p>
+            </div>
+          </div>
+        )}
+        {hasBorrow && (
+          <div className="flex items-center gap-3">
+            <TokenIcon
+              address={market.loanAsset.address}
+              chainId={market.morphoBlue.chain.id}
+              symbol={market.loanAsset.symbol}
+              width={20}
+              height={20}
+            />
+            <div>
+              <p className="text-xs text-secondary">Borrowed</p>
+              <p className="text-sm font-medium tabular-nums">
+                {formatReadable(Number(formatUnits(BigInt(userPosition.state.borrowAssets), market.loanAsset.decimals)))}{' '}
+                {market.loanAsset.symbol}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    ) : undefined;
+
+  return (
+    <>
+      <SplitActionButton
+        label="Supply"
+        icon={<BsArrowUpCircle className="h-4 w-4" />}
+        onClick={onSupplyClick}
+        indicator={{ show: hasSupply, tooltip: supplyTooltip }}
+        dropdownItems={[
+          {
+            label: 'Withdraw',
+            icon: <LuArrowDownToLine className="h-4 w-4" />,
+            onClick: onWithdrawClick,
+            disabled: !hasSupply,
+          },
+        ]}
+      />
+
+      <SplitActionButton
+        label="Borrow"
+        icon={<BsArrowDownLeftCircle className="h-4 w-4" />}
+        onClick={onBorrowClick}
+        indicator={{ show: hasBorrowPosition, tooltip: borrowTooltip }}
+        dropdownItems={[
+          {
+            label: 'Repay',
+            icon: <LuRefreshCw className="h-4 w-4" />,
+            onClick: onRepayClick,
+            disabled: !hasBorrow,
+          },
+        ]}
+      />
+    </>
+  );
+}
+
 type MarketHeaderProps = {
   market: Market;
   marketId: string;
@@ -125,7 +247,9 @@ type MarketHeaderProps = {
   oraclePrice: string;
   allWarnings: WarningWithDetail[];
   onSupplyClick: () => void;
+  onWithdrawClick: () => void;
   onBorrowClick: () => void;
+  onRepayClick: () => void;
   accrueInterest: () => void;
 };
 
@@ -137,7 +261,9 @@ export function MarketHeader({
   oraclePrice,
   allWarnings,
   onSupplyClick,
+  onWithdrawClick,
   onBorrowClick,
+  onRepayClick,
   accrueInterest,
 }: MarketHeaderProps) {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -350,41 +476,24 @@ export function MarketHeader({
               </div>
             </div>
 
-            {/* Position Pill + Action Buttons + Dropdown */}
+            {/* Action Buttons + Dropdown */}
             <div className="flex flex-wrap items-center gap-2">
-              {userPosition && (
-                <PositionPill
-                  position={userPosition}
-                  onSupplyClick={onSupplyClick}
-                  onBorrowClick={onBorrowClick}
-                />
-              )}
-              {/* Prominent Supply & Borrow Buttons */}
-              <Button
-                size="sm"
-                variant="surface"
-                onClick={onSupplyClick}
-                className="gap-1.5"
-              >
-                <BsArrowUpCircle className="h-4 w-4" />
-                Supply
-              </Button>
-              <Button
-                size="sm"
-                variant="surface"
-                onClick={onBorrowClick}
-                className="gap-1.5"
-              >
-                <BsArrowDownLeftCircle className="h-4 w-4" />
-                Borrow
-              </Button>
+              <ActionButtons
+                market={market}
+                userPosition={userPosition}
+                onSupplyClick={onSupplyClick}
+                onWithdrawClick={onWithdrawClick}
+                onBorrowClick={onBorrowClick}
+                onRepayClick={onRepayClick}
+              />
+
               {/* Advanced Options Dropdown */}
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    size="sm"
-                    variant="surface"
-                    className="px-2"
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-6 min-w-0"
                   >
                     <IoEllipsisVertical className="h-4 w-4" />
                   </Button>
diff --git a/src/features/market-detail/components/position-pill.tsx b/src/features/market-detail/components/position-pill.tsx
deleted file mode 100644
index 452dedaa..00000000
--- a/src/features/market-detail/components/position-pill.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-'use client';
-
-import { formatUnits } from 'viem';
-import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
-import { TokenIcon } from '@/components/shared/token-icon';
-import { formatReadable } from '@/utils/balance';
-import type { MarketPosition } from '@/utils/types';
-
-type PositionRowProps = {
-  tokenAddress: string;
-  chainId: number;
-  symbol: string;
-  label: string;
-  amount: number;
-  textColor?: string;
-};
-
-function PositionRow({ tokenAddress, chainId, symbol, label, amount, textColor }: PositionRowProps) {
-  if (amount <= 0) return null;
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center gap-2">
-        <TokenIcon
-          address={tokenAddress}
-          chainId={chainId}
-          symbol={symbol}
-          width={16}
-          height={16}
-        />
-        <span className="text-sm text-secondary">{label}</span>
-      </div>
-      <span className={`tabular-nums text-sm font-medium ${textColor ?? ''}`}>
-        {formatReadable(amount)} {symbol}
-      </span>
-    </div>
-  );
-}
-
-type PositionPillProps = {
-  position: MarketPosition;
-  onSupplyClick?: () => void;
-  onBorrowClick?: () => void;
-};
-
-export function PositionPill({ position, onSupplyClick, onBorrowClick }: PositionPillProps) {
-  const { market, state } = position;
-
-  const supplyAmount = Number(formatUnits(BigInt(state.supplyAssets), market.loanAsset.decimals));
-  const borrowAmount = Number(formatUnits(BigInt(state.borrowAssets), market.loanAsset.decimals));
-  const collateralAmount = Number(formatUnits(BigInt(state.collateral), market.collateralAsset.decimals));
-
-  // Check if user has any position
-  const hasPosition = supplyAmount > 0 || borrowAmount > 0 || collateralAmount > 0;
-
-  if (!hasPosition) {
-    return null;
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          className="flex items-center gap-2 rounded-full border border-border/50 bg-surface px-3 py-1.5 text-sm transition-colors hover:bg-hovered"
-        >
-          <span className="h-2 w-2 rounded-full bg-primary" />
-          <span>My Position</span>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent
-        align="end"
-        className="w-64"
-      >
-        <div className="space-y-3">
-          <h4 className="text-xs font-medium uppercase tracking-wider text-secondary">Your Position</h4>
-
-          <PositionRow
-            tokenAddress={market.loanAsset.address}
-            chainId={market.morphoBlue.chain.id}
-            symbol={market.loanAsset.symbol}
-            label="Supplied"
-            amount={supplyAmount}
-          />
-          <PositionRow
-            tokenAddress={market.loanAsset.address}
-            chainId={market.morphoBlue.chain.id}
-            symbol={market.loanAsset.symbol}
-            label="Borrowed"
-            amount={borrowAmount}
-            textColor="text-rose-500"
-          />
-          <PositionRow
-            tokenAddress={market.collateralAsset.address}
-            chainId={market.morphoBlue.chain.id}
-            symbol={market.collateralAsset.symbol}
-            label="Collateral"
-            amount={collateralAmount}
-          />
-
-          {/* Action buttons */}
-          {(onSupplyClick ?? onBorrowClick) && (
-            <div className="flex gap-2 border-t border-border pt-3">
-              {onSupplyClick && (
-                <button
-                  type="button"
-                  onClick={onSupplyClick}
-                  className="flex-1 rounded bg-primary px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-primary/90"
-                >
-                  Manage Supply
-                </button>
-              )}
-              {onBorrowClick && (
-                <button
-                  type="button"
-                  onClick={onBorrowClick}
-                  className="flex-1 rounded border border-border bg-surface px-3 py-1.5 text-xs font-medium transition-colors hover:bg-hovered"
-                >
-                  Manage Borrow
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/src/features/market-detail/market-view.tsx b/src/features/market-detail/market-view.tsx
index 2c1bbe3c..3b67b7d6 100644
--- a/src/features/market-detail/market-view.tsx
+++ b/src/features/market-detail/market-view.tsx
@@ -1,5 +1,3 @@
-// eslint-disable @typescript-eslint/prefer-nullish-coalescing
-
 'use client';
 
 import { useState, useCallback, useMemo } from 'react';
@@ -7,7 +5,6 @@ import { useParams } from 'next/navigation';
 import { parseUnits, formatUnits, type Address, encodeFunctionData } from 'viem';
 import { useConnection, useSwitchChain } from 'wagmi';
 import morphoAbi from '@/abis/morpho';
-import { BorrowModal } from '@/modals/borrow/borrow-modal';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Spinner } from '@/components/ui/spinner';
 import Header from '@/components/layout/header/Header';
@@ -50,8 +47,6 @@ function MarketContent() {
   const { open: openModal } = useModal();
   const selectedTab = useMarketDetailPreferences((s) => s.selectedTab);
   const setSelectedTab = useMarketDetailPreferences((s) => s.setSelectedTab);
-  const [showBorrowModal, setShowBorrowModal] = useState(false);
-  const [isRefreshing, setIsRefreshing] = useState(false);
   const [showTransactionFiltersModal, setShowTransactionFiltersModal] = useState(false);
   const [showSupplierFiltersModal, setShowSupplierFiltersModal] = useState(false);
   const [minSupplierShares, setMinSupplierShares] = useState('');
@@ -215,25 +210,11 @@ function MarketContent() {
     });
   }, [suppliersData]);
 
-  // Unified refetch function for both market and user position
-  const handleRefreshAll = useCallback(async () => {
-    setIsRefreshing(true);
-    try {
-      await Promise.all([refetchMarket(), refetchUserPosition()]);
-    } catch (error) {
-      console.error('Failed to refresh data:', error);
-    } finally {
-      setIsRefreshing(false);
-    }
+  // Refetch function for both market and user position
+  const handleRefresh = useCallback(() => {
+    void Promise.all([refetchMarket(), refetchUserPosition()]);
   }, [refetchMarket, refetchUserPosition]);
 
-  // Non-async wrapper for components that expect void returns
-  const handleRefreshAllSync = useCallback(() => {
-    void handleRefreshAll().catch((error) => {
-      console.error('Failed to refresh data:', error);
-    });
-  }, [handleRefreshAll]);
-
   // 7. Early returns for loading/error states
   if (isMarketLoading) {
     return (
@@ -262,11 +243,33 @@ function MarketContent() {
 
   // Handlers for supply/borrow actions
   const handleSupplyClick = () => {
-    openModal('supply', { market, position: userPosition, isMarketPage: true, refetch: handleRefreshAllSync, liquiditySourcing });
+    openModal('supply', {
+      market,
+      position: userPosition,
+      isMarketPage: true,
+      refetch: handleRefresh,
+      liquiditySourcing,
+      defaultMode: 'supply',
+    });
+  };
+
+  const handleWithdrawClick = () => {
+    openModal('supply', {
+      market,
+      position: userPosition,
+      isMarketPage: true,
+      refetch: handleRefresh,
+      liquiditySourcing,
+      defaultMode: 'withdraw',
+    });
   };
 
   const handleBorrowClick = () => {
-    setShowBorrowModal(true);
+    openModal('borrow', { market, position: userPosition, refetch: handleRefresh, liquiditySourcing, defaultMode: 'borrow' });
+  };
+
+  const handleRepayClick = () => {
+    openModal('borrow', { market, position: userPosition, refetch: handleRefresh, liquiditySourcing, defaultMode: 'repay' });
   };
 
   const handleAccrueInterest = async () => {
@@ -306,22 +309,12 @@ function MarketContent() {
           oraclePrice={formattedOraclePrice}
           allWarnings={allWarnings}
           onSupplyClick={handleSupplyClick}
+          onWithdrawClick={handleWithdrawClick}
           onBorrowClick={handleBorrowClick}
+          onRepayClick={handleRepayClick}
           accrueInterest={handleAccrueInterest}
         />
 
-        {showBorrowModal && (
-          <BorrowModal
-            market={market}
-            onOpenChange={setShowBorrowModal}
-            oraclePrice={oraclePrice}
-            refetch={handleRefreshAllSync}
-            isRefreshing={isRefreshing}
-            position={userPosition}
-            liquiditySourcing={liquiditySourcing}
-          />
-        )}
-
         {showTransactionFiltersModal && (
           <TransactionFiltersModal
             isOpen={showTransactionFiltersModal}

From d889475605313aa7d87d3accba57a3a23e792a0b Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Thu, 29 Jan 2026 01:15:31 +0800
Subject: [PATCH 8/8] chore: remove redundant

---
 src/features/market-detail/market-view.tsx    |  4 +--
 .../components/supplied-markets-detail.tsx    | 16 -----------
 src/modals/borrow/borrow-modal-global.tsx     | 27 +++++++++++++------
 src/stores/useModalStore.ts                   |  1 -
 4 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/features/market-detail/market-view.tsx b/src/features/market-detail/market-view.tsx
index 3b67b7d6..aae5a4e8 100644
--- a/src/features/market-detail/market-view.tsx
+++ b/src/features/market-detail/market-view.tsx
@@ -265,11 +265,11 @@ function MarketContent() {
   };
 
   const handleBorrowClick = () => {
-    openModal('borrow', { market, position: userPosition, refetch: handleRefresh, liquiditySourcing, defaultMode: 'borrow' });
+    openModal('borrow', { market, refetch: handleRefresh, liquiditySourcing, defaultMode: 'borrow' });
   };
 
   const handleRepayClick = () => {
-    openModal('borrow', { market, position: userPosition, refetch: handleRefresh, liquiditySourcing, defaultMode: 'repay' });
+    openModal('borrow', { market, refetch: handleRefresh, liquiditySourcing, defaultMode: 'repay' });
   };
 
   const handleAccrueInterest = async () => {
diff --git a/src/features/positions/components/supplied-markets-detail.tsx b/src/features/positions/components/supplied-markets-detail.tsx
index 6143248b..d59b35d9 100644
--- a/src/features/positions/components/supplied-markets-detail.tsx
+++ b/src/features/positions/components/supplied-markets-detail.tsx
@@ -22,7 +22,6 @@ function MarketRow({ position, totalSupply, rateLabel }: { position: MarketPosit
   const { open } = useModal();
   const suppliedAmount = Number(formatBalance(position.state.supplyAssets, position.market.loanAsset.decimals));
   const percentageOfPortfolio = totalSupply > 0 ? (suppliedAmount / totalSupply) * 100 : 0;
-  const hasBorrowPosition = BigInt(position.state.borrowAssets) > 0n || BigInt(position.state.collateral) > 0n;
 
   return (
     <TableRow
@@ -75,21 +74,6 @@ function MarketRow({ position, totalSupply, rateLabel }: { position: MarketPosit
         style={{ minWidth: '180px' }}
       >
         <div className="flex items-center justify-end gap-2">
-          {hasBorrowPosition && (
-            <Button
-              size="sm"
-              variant="surface"
-              onClick={() => {
-                open('borrow', {
-                  market: position.market,
-                  position,
-                  defaultMode: 'repay',
-                });
-              }}
-            >
-              Manage Borrow
-            </Button>
-          )}
           <Button
             size="sm"
             variant="surface"
diff --git a/src/modals/borrow/borrow-modal-global.tsx b/src/modals/borrow/borrow-modal-global.tsx
index 03ae9a4a..e504b88c 100644
--- a/src/modals/borrow/borrow-modal-global.tsx
+++ b/src/modals/borrow/borrow-modal-global.tsx
@@ -1,13 +1,15 @@
 'use client';
 
-import type { Market, MarketPosition } from '@/utils/types';
+import { useConnection } from 'wagmi';
+import type { Market } from '@/utils/types';
 import type { LiquiditySourcingResult } from '@/hooks/useMarketLiquiditySourcing';
 import { useOraclePrice } from '@/hooks/useOraclePrice';
+import useUserPosition from '@/hooks/useUserPosition';
+import type { SupportedNetworks } from '@/utils/networks';
 import { BorrowModal } from './borrow-modal';
 
 type BorrowModalGlobalProps = {
   market: Market;
-  position?: MarketPosition | null;
   defaultMode?: 'borrow' | 'repay';
   refetch?: () => void;
   liquiditySourcing?: LiquiditySourcingResult;
@@ -15,29 +17,38 @@ type BorrowModalGlobalProps = {
 };
 
 /**
- * Global BorrowModal wrapper that fetches oracle price automatically.
+ * Global BorrowModal wrapper that fetches oracle price and user position automatically.
  * Used by the ModalRenderer via the modal registry.
  */
 export function BorrowModalGlobal({
   market,
-  position,
   defaultMode,
-  refetch,
+  refetch: externalRefetch,
   liquiditySourcing,
   onOpenChange,
 }: BorrowModalGlobalProps): JSX.Element {
+  const { address } = useConnection();
+  const chainId = market.morphoBlue.chain.id as SupportedNetworks;
+
   const { price: oraclePrice } = useOraclePrice({
     oracle: market.oracleAddress as `0x${string}`,
-    chainId: market.morphoBlue.chain.id,
+    chainId,
   });
 
+  const { position, refetch: refetchPosition } = useUserPosition(address, chainId, market.uniqueKey);
+
+  const handleRefetch = () => {
+    refetchPosition();
+    externalRefetch?.();
+  };
+
   return (
     <BorrowModal
       market={market}
       onOpenChange={onOpenChange}
       oraclePrice={oraclePrice}
-      refetch={refetch}
-      position={position ?? null}
+      refetch={handleRefetch}
+      position={position}
       defaultMode={defaultMode}
       liquiditySourcing={liquiditySourcing}
     />
diff --git a/src/stores/useModalStore.ts b/src/stores/useModalStore.ts
index e87f0b00..55ae3d27 100644
--- a/src/stores/useModalStore.ts
+++ b/src/stores/useModalStore.ts
@@ -19,7 +19,6 @@ export type ModalProps = {
   // Borrow & Repay
   borrow: {
     market: Market;
-    position?: MarketPosition | null;
     defaultMode?: 'borrow' | 'repay';
     refetch?: () => void;
     liquiditySourcing?: LiquiditySourcingResult;