From d86c6e0a2960e1e13eadf43a08ab0f6c1759dd1f Mon Sep 17 00:00:00 2001
From: xx7412421-cloud <xx7412421@gmail.com>
Date: Sun, 21 Jun 2026 19:31:36 +0800
Subject: [PATCH 01/10] feat: wire early exit modal to live preview

---
 src/app/commitments/page.tsx | 721 +++++++++++++++++++----------------
 1 file changed, 384 insertions(+), 337 deletions(-)

diff --git a/src/app/commitments/page.tsx b/src/app/commitments/page.tsx
index ffdd172..d1b1d13 100644
--- a/src/app/commitments/page.tsx
+++ b/src/app/commitments/page.tsx
@@ -1,344 +1,391 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-import { useState, useCallback, useMemo, useEffect } from 'react'
-import MyCommitmentsHeader from '@/components/MyCommitmentsHeader'
-import MyCommitmentsStats from '@/components/MyCommitmentsStats/MyCommitmentsStats'
-import MyCommitmentsFilters from '@/components/MyCommitmentsFilters/MyCommitmentsFilters'
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useState, useCallback, useMemo, useEffect } from 'react'
+import MyCommitmentsHeader from '@/components/MyCommitmentsHeader'
+import MyCommitmentsStats from '@/components/MyCommitmentsStats/MyCommitmentsStats'
+import MyCommitmentsFilters from '@/components/MyCommitmentsFilters/MyCommitmentsFilters'
 import MyCommitmentsGrid from '@/components/MyCommitmentsGrid'
 import MyCommitmentsGridSkeleton from '@/components/MyCommitmentsGridSkeleton'
 import CommitmentEarlyExitModal from '@/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal'
 import ExportCommitmentsModal from '@/components/export/ExportCommitmentsModal'
+import {
+  EarlyExitPreviewSummary,
+  fetchEarlyExitPreviewSummary,
+} from '@/components/CommitmentEarlyExitModal/earlyExitPreview'
 import { useWallet } from '@/hooks/useWallet'
-import { Commitment, CommitmentStats } from '@/types/commitment'
-import { listCommitments } from '@/lib/backend/mocks/contracts'
-import { fetchProtocolConstants, ProtocolConstants } from '@/utils/protocol'
-
-const mockCommitments: Commitment[] = [
-  {
-    id: 'CMT-ABC123',
-    type: 'Safe',
-    status: 'Active',
-    asset: 'XLM',
-    amount: '50,000',
-    currentValue: '52,600',
-    changePercent: 5.2,
-    durationProgress: 75,
-    daysRemaining: 15,
-    complianceScore: 95,
-    maxLoss: '2%',
-    currentDrawdown: '0.8%',
-    createdDate: 'Jan 10, 2026',
-    expiryDate: 'Feb 9, 2026',
-  },
-  {
-    id: 'CMT-XYZ789',
-    type: 'Balanced',
-    status: 'Active',
-    asset: 'USDC',
-    amount: '100,000',
-    currentValue: '112,500',
-    changePercent: 12.5,
-    durationProgress: 30,
-    daysRemaining: 42,
-    complianceScore: 88,
-    maxLoss: '8%',
-    currentDrawdown: '3.2%',
-    createdDate: 'Dec 15, 2025',
-    expiryDate: 'Feb 13, 2026',
-  },
-  {
-    id: 'CMT-DEF456',
-    type: 'Aggressive',
-    status: 'Active',
-    asset: 'XLM',
-    amount: '250,000',
-    currentValue: '296,750',
-    changePercent: 18.7,
-    durationProgress: 17,
-    daysRemaining: 75,
-    complianceScore: 76,
-    maxLoss: 'No limit',
-    currentDrawdown: '12.5%',
-    createdDate: 'Nov 20, 2025',
-    expiryDate: 'Feb 10, 2026',
-  },
-  {
-    id: 'CMT-GHI012',
-    type: 'Safe',
-    status: 'Settled',
-    asset: 'XLM',
-    amount: '75,000',
-    currentValue: '78,750',
-    changePercent: 5.0,
-    durationProgress: 100,
-    daysRemaining: 0,
-    complianceScore: 97,
-    maxLoss: '2%',
-    currentDrawdown: '0%',
-    createdDate: 'Dec 1, 2025',
-    expiryDate: 'Dec 31, 2025',
-  },
-  {
-    id: 'CMT-JKL345',
-    type: 'Balanced',
-    status: 'Early Exit',
-    asset: 'USDC',
-    amount: '150,000',
-    currentValue: '145,500',
-    changePercent: -3.0,
-    durationProgress: 100,
-    daysRemaining: 0,
-    complianceScore: 72,
-    maxLoss: '8%',
-    currentDrawdown: '3%',
-    createdDate: 'Nov 1, 2025',
-    expiryDate: 'Dec 30, 2025',
-  },
-  {
-    id: 'CMT-MN0678',
-    type: 'Aggressive',
-    status: 'Violated',
-    asset: 'XLM',
-    amount: '200,000',
-    currentValue: '160,000',
-    changePercent: -20.0,
-    durationProgress: 100,
-    daysRemaining: 0,
-    complianceScore: 45,
-    maxLoss: 'No limit',
-    currentDrawdown: '20%',
-    createdDate: 'Oct 15, 2025',
-    expiryDate: 'Jan 13, 2026',
-  },
-]
-
-const mockStats: CommitmentStats = {
-  totalActive: 3,
-  totalCommittedValue: '$461,850',
-  avgComplianceScore: 86,
-  totalFeesGenerated: '$1,250',
-}
-
-function getEarlyExitValues(originalAmount: string, asset: string, penaltyPercent: number) {
-  const amount = Number(originalAmount.replace(/,/g, ''))
-  const penaltyAmount = (amount * (penaltyPercent / 100)).toFixed(0)
-  const netReceive = (amount - Number(penaltyAmount)).toFixed(0)
-  return {
-    penaltyPercent: `${penaltyPercent}%`,
-    penaltyAmount: `${Number(penaltyAmount).toLocaleString()} ${asset}`,
-    netReceiveAmount: `${Number(netReceive).toLocaleString()} ${asset}`,
-  }
-}
-
-export default function MyCommitments() {
-  const router = useRouter()
-  const { address } = useWallet()
-
-  // State
-  const [searchQuery, setSearchQuery] = useState('')
-  const [statusFilter, setStatusFilter] = useState('All')
-  const [typeFilter, setTypeFilter] = useState('All')
-  const [sortBy, setSortBy] = useState('Newest')
-
-  const [earlyExitCommitmentId, setEarlyExitCommitmentId] = useState<string | null>(null)
-  const [isExportOpen, setIsExportOpen] = useState(false)
-  const [hasAcknowledged, setHasAcknowledged] = useState(false)
-  const [commitmentsList, setCommitmentsList] = useState<Commitment[]>(mockCommitments)
-  const [successMessage, setSuccessMessage] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
+import { Commitment, CommitmentStats } from '@/types/commitment'
+import { listCommitments } from '@/lib/backend/mocks/contracts'
+import { fetchProtocolConstants, ProtocolConstants } from '@/utils/protocol'
+
+const mockCommitments: Commitment[] = [
+  {
+    id: 'CMT-ABC123',
+    type: 'Safe',
+    status: 'Active',
+    asset: 'XLM',
+    amount: '50,000',
+    currentValue: '52,600',
+    changePercent: 5.2,
+    durationProgress: 75,
+    daysRemaining: 15,
+    complianceScore: 95,
+    maxLoss: '2%',
+    currentDrawdown: '0.8%',
+    createdDate: 'Jan 10, 2026',
+    expiryDate: 'Feb 9, 2026',
+  },
+  {
+    id: 'CMT-XYZ789',
+    type: 'Balanced',
+    status: 'Active',
+    asset: 'USDC',
+    amount: '100,000',
+    currentValue: '112,500',
+    changePercent: 12.5,
+    durationProgress: 30,
+    daysRemaining: 42,
+    complianceScore: 88,
+    maxLoss: '8%',
+    currentDrawdown: '3.2%',
+    createdDate: 'Dec 15, 2025',
+    expiryDate: 'Feb 13, 2026',
+  },
+  {
+    id: 'CMT-DEF456',
+    type: 'Aggressive',
+    status: 'Active',
+    asset: 'XLM',
+    amount: '250,000',
+    currentValue: '296,750',
+    changePercent: 18.7,
+    durationProgress: 17,
+    daysRemaining: 75,
+    complianceScore: 76,
+    maxLoss: 'No limit',
+    currentDrawdown: '12.5%',
+    createdDate: 'Nov 20, 2025',
+    expiryDate: 'Feb 10, 2026',
+  },
+  {
+    id: 'CMT-GHI012',
+    type: 'Safe',
+    status: 'Settled',
+    asset: 'XLM',
+    amount: '75,000',
+    currentValue: '78,750',
+    changePercent: 5.0,
+    durationProgress: 100,
+    daysRemaining: 0,
+    complianceScore: 97,
+    maxLoss: '2%',
+    currentDrawdown: '0%',
+    createdDate: 'Dec 1, 2025',
+    expiryDate: 'Dec 31, 2025',
+  },
+  {
+    id: 'CMT-JKL345',
+    type: 'Balanced',
+    status: 'Early Exit',
+    asset: 'USDC',
+    amount: '150,000',
+    currentValue: '145,500',
+    changePercent: -3.0,
+    durationProgress: 100,
+    daysRemaining: 0,
+    complianceScore: 72,
+    maxLoss: '8%',
+    currentDrawdown: '3%',
+    createdDate: 'Nov 1, 2025',
+    expiryDate: 'Dec 30, 2025',
+  },
+  {
+    id: 'CMT-MN0678',
+    type: 'Aggressive',
+    status: 'Violated',
+    asset: 'XLM',
+    amount: '200,000',
+    currentValue: '160,000',
+    changePercent: -20.0,
+    durationProgress: 100,
+    daysRemaining: 0,
+    complianceScore: 45,
+    maxLoss: 'No limit',
+    currentDrawdown: '20%',
+    createdDate: 'Oct 15, 2025',
+    expiryDate: 'Jan 13, 2026',
+  },
+]
+
+const mockStats: CommitmentStats = {
+  totalActive: 3,
+  totalCommittedValue: '$461,850',
+  avgComplianceScore: 86,
+  totalFeesGenerated: '$1,250',
+}
+
+function getEarlyExitValues(originalAmount: string, asset: string, penaltyPercent: number) {
+  const amount = Number(originalAmount.replace(/,/g, ''))
+  const penaltyAmount = (amount * (penaltyPercent / 100)).toFixed(0)
+  const netReceive = (amount - Number(penaltyAmount)).toFixed(0)
+  return {
+    penaltyPercent: `${penaltyPercent}%`,
+    penaltyAmount: `${Number(penaltyAmount).toLocaleString()} ${asset}`,
+    netReceiveAmount: `${Number(netReceive).toLocaleString()} ${asset}`,
+  }
+}
+
+type EarlyExitPreviewState =
+  | { status: 'idle' }
+  | { status: 'loading' }
+  | { status: 'success'; summary: EarlyExitPreviewSummary }
+  | { status: 'error'; error: string }
+
+export default function MyCommitments() {
+  const router = useRouter()
+  const { address } = useWallet()
+
+  // State
+  const [searchQuery, setSearchQuery] = useState('')
+  const [statusFilter, setStatusFilter] = useState('All')
+  const [typeFilter, setTypeFilter] = useState('All')
+  const [sortBy, setSortBy] = useState('Newest')
+
+  const [earlyExitCommitmentId, setEarlyExitCommitmentId] = useState<string | null>(null)
+  const [isExportOpen, setIsExportOpen] = useState(false)
+  const [hasAcknowledged, setHasAcknowledged] = useState(false)
+  const [commitmentsList, setCommitmentsList] = useState<Commitment[]>(mockCommitments)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
   const [protocolConstants, setProtocolConstants] = useState<ProtocolConstants | null>(null)
   const [, setIsLoadingConstants] = useState(true)
-
-  useEffect(() => {
-    fetchProtocolConstants()
-      .then(setProtocolConstants)
-      .catch((err) => console.error('Failed to fetch protocol constants:', err))
-      .finally(() => setIsLoadingConstants(false))
-  }, [])
-
-  useEffect(() => {
-    if (process.env.NEXT_PUBLIC_USE_MOCKS === 'true') {
-      setIsLoading(true)
-      listCommitments()
-        .then(setCommitmentsList)
-        .finally(() => setIsLoading(false))
-    } else {
-      // Simulate loading for demo purposes
-      const timer = setTimeout(() => {
-        setIsLoading(false)
-      }, 1000)
-      return () => clearTimeout(timer)
-    }
-  }, [])
-
-  // Derived State
-  const filteredCommitments = useMemo(() => {
-    const filtered = commitmentsList.filter((c) => {
-      const matchesSearch = c.id.toLowerCase().includes(searchQuery.toLowerCase())
-      const matchesStatus = statusFilter === 'All' || c.status.toLowerCase() === statusFilter.toLowerCase()
-      const matchesType = typeFilter === 'All' || c.type.toLowerCase() === typeFilter.toLowerCase()
-      return matchesSearch && matchesStatus && matchesType
-    })
-
-    // Basic Sorting Logic
-    if (sortBy === 'ValueHighLow') {
-      filtered.sort((a, b) => Number(b.amount.replace(/,/g, '')) - Number(a.amount.replace(/,/g, '')))
-    } else if (sortBy === 'ValueLowHigh') {
-      filtered.sort((a, b) => Number(a.amount.replace(/,/g, '')) - Number(b.amount.replace(/,/g, '')))
-    } else if (sortBy === 'Newest') {
-      filtered.sort((a, b) => new Date(b.createdDate).getTime() - new Date(a.createdDate).getTime())
-    } else if (sortBy === 'Oldest') {
-      filtered.sort((a, b) => new Date(a.createdDate).getTime() - new Date(b.createdDate).getTime())
-    }
-
-    return filtered
-  }, [commitmentsList, searchQuery, statusFilter, typeFilter, sortBy])
-
-  const commitmentForEarlyExit = commitmentsList.find((c) => c.id === earlyExitCommitmentId)
-  const earlyExitSummary = useMemo(() => {
-    if (!commitmentForEarlyExit) return null
-
-    let penaltyPercent = 10
-    if (protocolConstants?.penalties) {
-      const tier = protocolConstants.penalties.find(
-        (p) => p.type.toLowerCase() === commitmentForEarlyExit.type.toLowerCase()
-      )
-      if (tier) {
-        penaltyPercent = tier.earlyExitPenaltyPercent
-      }
-    } else {
-      // Fallback local calculations in case loading or error
-      const lowerType = commitmentForEarlyExit.type.toLowerCase()
-      if (lowerType === 'safe') penaltyPercent = 2
-      else if (lowerType === 'balanced') penaltyPercent = 3
-      else if (lowerType === 'aggressive') penaltyPercent = 5
-    }
-
-    return getEarlyExitValues(
-      commitmentForEarlyExit.amount,
-      commitmentForEarlyExit.asset,
-      penaltyPercent
-    )
-  }, [commitmentForEarlyExit, protocolConstants])
-
-  // Callbacks
-  const openEarlyExitModal = useCallback((id: string) => {
-    setSuccessMessage(null)
-    setEarlyExitCommitmentId(id)
-    setHasAcknowledged(false)
-  }, [])
-
-  const closeEarlyExitModal = useCallback(() => {
-    setEarlyExitCommitmentId(null)
-    setHasAcknowledged(false)
-  }, [])
-
-  const handleConfirmEarlyExit = useCallback(() => {
-    if (!earlyExitCommitmentId || !earlyExitSummary) return
-
-    const committed = commitmentsList.find((c) => c.id === earlyExitCommitmentId)
-    if (!committed) return
-
-    setCommitmentsList((current) =>
-      current.map((commitment) =>
-        commitment.id === earlyExitCommitmentId
-          ? { ...commitment, status: 'Early Exit' }
-          : commitment
-      )
-    )
-
-    setSuccessMessage(
-      `Early exit confirmed for ${committed.id}. ${earlyExitSummary.penaltyPercent} penalty applied; you will receive ${earlyExitSummary.netReceiveAmount}.`
-    )
-
-    closeEarlyExitModal()
-  }, [earlyExitCommitmentId, earlyExitSummary, commitmentsList, closeEarlyExitModal])
-
-  return (
-    <main id="main-content" className="min-h-screen bg-[#0a0a0a] flex flex-col">
-      <MyCommitmentsHeader
-        onBack={() => router.push('/')}
-        onCreateNew={() => router.push('/create')}
-        onExport={() => setIsExportOpen(true)}
-      />
-
-      {successMessage && (
-        <div className="mx-22 mt-4 rounded-[28px] border border-[#0ff0fc1a] bg-[#0ff0fc0d] px-6 py-4 text-[#e6fffe] shadow-[0_20px_60px_rgba(15,240,252,0.12)] max-[1024px]:mx-8 max-[640px]:mx-4">
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-            <p className="text-sm leading-6 text-white/90">{successMessage}</p>
-            <button
-              type="button"
-              onClick={() => setSuccessMessage(null)}
-              className="text-[13px] font-semibold uppercase tracking-[0.18em] text-[#0ff0fc] hover:text-white transition-colors"
-            >
-              Dismiss
-            </button>
-          </div>
-          <p className="mt-2 text-[13px] text-white/70">
-            This commitment has been updated to Early Exit status in your portfolio. Check the list for the new status and confirm any remaining settlement details.
-          </p>
-        </div>
-      )}
-
-      <div className="w-full flex-1 px-22 py-8 max-[1024px]:px-8 max-[640px]:px-4">
-        {isLoading ? (
-          <MyCommitmentsGridSkeleton
-            showStats={true}
-            showFilters={true}
-            cardCount={6}
-          />
-        ) : (
-          <>
-            <MyCommitmentsStats
-              totalActive={mockStats.totalActive}
-              totalCommittedValue={mockStats.totalCommittedValue}
-              avgComplianceScore={mockStats.avgComplianceScore}
-              totalFeesGenerated={mockStats.totalFeesGenerated}
-            />
-
-            <MyCommitmentsFilters
-              searchQuery={searchQuery}
-              onSearchChange={setSearchQuery}
-              status={statusFilter}
-              onStatusChange={setStatusFilter}
-              type={typeFilter}
-              onTypeChange={setTypeFilter}
-              sortBy={sortBy}
-              onSortByChange={setSortBy}
-            />
-
-            <MyCommitmentsGrid
-              commitments={filteredCommitments}
-              onDetails={(id) => router.push(`/commitments/${id}`)}
-              onAttestations={(id) => console.log('Attestations for', id)}
-              onEarlyExit={openEarlyExitModal}
-            />
-          </>
-        )}
-      </div>
-
-      {commitmentForEarlyExit && earlyExitSummary && (
-        <CommitmentEarlyExitModal
-          isOpen={true}
-          commitmentId={commitmentForEarlyExit.id}
-          originalAmount={`${commitmentForEarlyExit.amount} ${commitmentForEarlyExit.asset}`}
-          penaltyPercent={earlyExitSummary.penaltyPercent}
-          penaltyAmount={earlyExitSummary.penaltyAmount}
-          netReceiveAmount={earlyExitSummary.netReceiveAmount}
-          hasAcknowledged={hasAcknowledged}
-          onChangeAcknowledged={setHasAcknowledged}
-          onCancel={closeEarlyExitModal}
-          onConfirm={handleConfirmEarlyExit}
-          onClose={closeEarlyExitModal}
-        />
-      )}
-
-      <ExportCommitmentsModal
-        isOpen={isExportOpen}
-        onClose={() => setIsExportOpen(false)}
-        ownerAddress={address}
-      />
-    </main>
-  )
-}
+  const [earlyExitPreview, setEarlyExitPreview] = useState<EarlyExitPreviewState>({ status: 'idle' })
+
+  useEffect(() => {
+    fetchProtocolConstants()
+      .then(setProtocolConstants)
+      .catch((err) => console.error('Failed to fetch protocol constants:', err))
+      .finally(() => setIsLoadingConstants(false))
+  }, [])
+
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_USE_MOCKS === 'true') {
+      setIsLoading(true)
+      listCommitments()
+        .then(setCommitmentsList)
+        .finally(() => setIsLoading(false))
+    } else {
+      // Simulate loading for demo purposes
+      const timer = setTimeout(() => {
+        setIsLoading(false)
+      }, 1000)
+      return () => clearTimeout(timer)
+    }
+  }, [])
+
+  // Derived State
+  const filteredCommitments = useMemo(() => {
+    const filtered = commitmentsList.filter((c) => {
+      const matchesSearch = c.id.toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesStatus = statusFilter === 'All' || c.status.toLowerCase() === statusFilter.toLowerCase()
+      const matchesType = typeFilter === 'All' || c.type.toLowerCase() === typeFilter.toLowerCase()
+      return matchesSearch && matchesStatus && matchesType
+    })
+
+    // Basic Sorting Logic
+    if (sortBy === 'ValueHighLow') {
+      filtered.sort((a, b) => Number(b.amount.replace(/,/g, '')) - Number(a.amount.replace(/,/g, '')))
+    } else if (sortBy === 'ValueLowHigh') {
+      filtered.sort((a, b) => Number(a.amount.replace(/,/g, '')) - Number(b.amount.replace(/,/g, '')))
+    } else if (sortBy === 'Newest') {
+      filtered.sort((a, b) => new Date(b.createdDate).getTime() - new Date(a.createdDate).getTime())
+    } else if (sortBy === 'Oldest') {
+      filtered.sort((a, b) => new Date(a.createdDate).getTime() - new Date(b.createdDate).getTime())
+    }
+
+    return filtered
+  }, [commitmentsList, searchQuery, statusFilter, typeFilter, sortBy])
+
+  const commitmentForEarlyExit = commitmentsList.find((c) => c.id === earlyExitCommitmentId)
+  const earlyExitPreviewCommitmentId = commitmentForEarlyExit?.id
+  const earlyExitPreviewAsset = commitmentForEarlyExit?.asset
+  const estimatedEarlyExitSummary = useMemo(() => {
+    if (!commitmentForEarlyExit) return null
+
+    let penaltyPercent = 10
+    if (protocolConstants?.penalties) {
+      const tier = protocolConstants.penalties.find(
+        (p) => p.type.toLowerCase() === commitmentForEarlyExit.type.toLowerCase()
+      )
+      if (tier) {
+        penaltyPercent = tier.earlyExitPenaltyPercent
+      }
+    } else {
+      // Fallback local calculations in case loading or error
+      const lowerType = commitmentForEarlyExit.type.toLowerCase()
+      if (lowerType === 'safe') penaltyPercent = 2
+      else if (lowerType === 'balanced') penaltyPercent = 3
+      else if (lowerType === 'aggressive') penaltyPercent = 5
+    }
+
+    return getEarlyExitValues(
+      commitmentForEarlyExit.amount,
+      commitmentForEarlyExit.asset,
+      penaltyPercent
+    )
+  }, [commitmentForEarlyExit, protocolConstants])
+
+  useEffect(() => {
+    if (!earlyExitPreviewCommitmentId || !earlyExitPreviewAsset) {
+      setEarlyExitPreview({ status: 'idle' })
+      return
+    }
+
+    let ignore = false
+    setEarlyExitPreview({ status: 'loading' })
+
+    fetchEarlyExitPreviewSummary(earlyExitPreviewCommitmentId, earlyExitPreviewAsset)
+      .then((summary) => {
+        if (!ignore) setEarlyExitPreview({ status: 'success', summary })
+      })
+      .catch((error) => {
+        if (!ignore) {
+          setEarlyExitPreview({
+            status: 'error',
+            error: error instanceof Error ? error.message : 'Unable to refresh live preview',
+          })
+        }
+      })
+
+    return () => {
+      ignore = true
+    }
+  }, [earlyExitPreviewAsset, earlyExitPreviewCommitmentId])
+
+  const earlyExitSummary =
+    earlyExitPreview.status === 'success'
+      ? earlyExitPreview.summary
+      : estimatedEarlyExitSummary
+
+  // Callbacks
+  const openEarlyExitModal = useCallback((id: string) => {
+    setSuccessMessage(null)
+    setEarlyExitCommitmentId(id)
+    setHasAcknowledged(false)
+  }, [])
+
+  const closeEarlyExitModal = useCallback(() => {
+    setEarlyExitCommitmentId(null)
+    setHasAcknowledged(false)
+  }, [])
+
+  const handleConfirmEarlyExit = useCallback(() => {
+    if (!earlyExitCommitmentId || !earlyExitSummary) return
+
+    const committed = commitmentsList.find((c) => c.id === earlyExitCommitmentId)
+    if (!committed) return
+
+    setCommitmentsList((current) =>
+      current.map((commitment) =>
+        commitment.id === earlyExitCommitmentId
+          ? { ...commitment, status: 'Early Exit' }
+          : commitment
+      )
+    )
+
+    setSuccessMessage(
+      `Early exit confirmed for ${committed.id}. ${earlyExitSummary.penaltyPercent} penalty applied; you will receive ${earlyExitSummary.netReceiveAmount}.`
+    )
+
+    closeEarlyExitModal()
+  }, [earlyExitCommitmentId, earlyExitSummary, commitmentsList, closeEarlyExitModal])
+
+  return (
+    <main id="main-content" className="min-h-screen bg-[#0a0a0a] flex flex-col">
+      <MyCommitmentsHeader
+        onBack={() => router.push('/')}
+        onCreateNew={() => router.push('/create')}
+        onExport={() => setIsExportOpen(true)}
+      />
+
+      {successMessage && (
+        <div className="mx-22 mt-4 rounded-[28px] border border-[#0ff0fc1a] bg-[#0ff0fc0d] px-6 py-4 text-[#e6fffe] shadow-[0_20px_60px_rgba(15,240,252,0.12)] max-[1024px]:mx-8 max-[640px]:mx-4">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-sm leading-6 text-white/90">{successMessage}</p>
+            <button
+              type="button"
+              onClick={() => setSuccessMessage(null)}
+              className="text-[13px] font-semibold uppercase tracking-[0.18em] text-[#0ff0fc] hover:text-white transition-colors"
+            >
+              Dismiss
+            </button>
+          </div>
+          <p className="mt-2 text-[13px] text-white/70">
+            This commitment has been updated to Early Exit status in your portfolio. Check the list for the new status and confirm any remaining settlement details.
+          </p>
+        </div>
+      )}
+
+      <div className="w-full flex-1 px-22 py-8 max-[1024px]:px-8 max-[640px]:px-4">
+        {isLoading ? (
+          <MyCommitmentsGridSkeleton
+            showStats={true}
+            showFilters={true}
+            cardCount={6}
+          />
+        ) : (
+          <>
+            <MyCommitmentsStats
+              totalActive={mockStats.totalActive}
+              totalCommittedValue={mockStats.totalCommittedValue}
+              avgComplianceScore={mockStats.avgComplianceScore}
+              totalFeesGenerated={mockStats.totalFeesGenerated}
+            />
+
+            <MyCommitmentsFilters
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              status={statusFilter}
+              onStatusChange={setStatusFilter}
+              type={typeFilter}
+              onTypeChange={setTypeFilter}
+              sortBy={sortBy}
+              onSortByChange={setSortBy}
+            />
+
+            <MyCommitmentsGrid
+              commitments={filteredCommitments}
+              onDetails={(id) => router.push(`/commitments/${id}`)}
+              onAttestations={(id) => console.log('Attestations for', id)}
+              onEarlyExit={openEarlyExitModal}
+            />
+          </>
+        )}
+      </div>
+
+      {commitmentForEarlyExit && earlyExitSummary && (
+        <CommitmentEarlyExitModal
+          isOpen={true}
+          commitmentId={commitmentForEarlyExit.id}
+          originalAmount={`${commitmentForEarlyExit.amount} ${commitmentForEarlyExit.asset}`}
+          penaltyPercent={earlyExitSummary.penaltyPercent}
+          penaltyAmount={earlyExitSummary.penaltyAmount}
+          netReceiveAmount={earlyExitSummary.netReceiveAmount}
+          isPreviewLoading={earlyExitPreview.status === 'loading'}
+          previewError={earlyExitPreview.status === 'error' ? earlyExitPreview.error : null}
+          hasAcknowledged={hasAcknowledged}
+          onChangeAcknowledged={setHasAcknowledged}
+          onCancel={closeEarlyExitModal}
+          onConfirm={handleConfirmEarlyExit}
+          onClose={closeEarlyExitModal}
+        />
+      )}
+
+      <ExportCommitmentsModal
+        isOpen={isExportOpen}
+        onClose={() => setIsExportOpen(false)}
+        ownerAddress={address}
+      />
+    </main>
+  )
+}

From 37a18ce868ca8c75a3cbfb63ed2fcc30b543bec1 Mon Sep 17 00:00:00 2001
From: xx7412421-cloud <xx7412421@gmail.com>
Date: Sun, 21 Jun 2026 19:31:37 +0800
Subject: [PATCH 02/10] feat: wire early exit modal to live preview

---
 .../CommitmentEarlyExitModal.tsx              | 533 +++++++++---------
 1 file changed, 278 insertions(+), 255 deletions(-)

diff --git a/src/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal.tsx b/src/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal.tsx
index f626412..8bca1d5 100644
--- a/src/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal.tsx
+++ b/src/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal.tsx
@@ -1,255 +1,278 @@
-'use client';
-
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { AlertTriangle, X, Info } from 'lucide-react';
-
-export interface CommitmentEarlyExitModalProps {
-  isOpen: boolean;
-  commitmentId: string;
-  originalAmount: string;
-  penaltyPercent: string;
-  penaltyAmount: string;
-  netReceiveAmount: string;
-  hasAcknowledged: boolean;
-  onChangeAcknowledged: (value: boolean) => void;
-  onCancel: () => void;
-  onConfirm: () => void;
-  onClose?: () => void;
-}
-
-function formatScreenReaderText(val: string): string {
-  return val
-    .replace(/\bXLM\b/gi, 'Stellar Lumens')
-    .replace(/\bUSDC\b/gi, 'USD Coin')
-    .replace(/%/g, ' percent')
-    .replace(/-/g, 'minus ')
-}
-
-export default function CommitmentEarlyExitModal({
-  isOpen,
-  commitmentId,
-  originalAmount,
-  penaltyPercent,
-  penaltyAmount,
-  netReceiveAmount,
-  hasAcknowledged,
-  onChangeAcknowledged,
-  onCancel,
-  onConfirm,
-  onClose,
-}: CommitmentEarlyExitModalProps) {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    return () => setMounted(false);
-  }, []);
-
-  const [confirmationInput, setConfirmationInput] = useState('')
-  const hasTypedConfirmation = confirmationInput.trim() === commitmentId
-  const canConfirm = hasAcknowledged && hasTypedConfirmation
-
-  const handleClose = useCallback(() => {
-    (onClose ?? onCancel)();
-  }, [onClose, onCancel]);
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') handleClose();
-
-      // Focus trap
-      if (e.key === 'Tab' && modalRef.current) {
-        const focusableElements = modalRef.current.querySelectorAll(
-          'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        const first = focusableElements[0] as HTMLElement;
-        const last = focusableElements[focusableElements.length - 1] as HTMLElement;
-
-        if (e.shiftKey && document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    document.body.style.overflow = 'hidden';
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.body.style.overflow = '';
-    };
-  }, [isOpen, handleClose]);
-
-  if (!isOpen || !mounted) return null;
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-9999 flex items-center justify-center bg-black/80 backdrop-blur-md animate-in fade-in duration-300"
-      onClick={(e) => e.target === e.currentTarget && handleClose()}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="early-exit-title"
-    >
-      <div
-        ref={modalRef}
-        className="w-full sm:max-w-[520px] mt-auto sm:mt-0 bg-[#0A0A0A] border-t sm:border border-[#FF8A04]/30 rounded-t-[32px] sm:rounded-[32px] flex flex-col relative shadow-[0_0_60px_rgba(255,138,4,0.15)] animate-in slide-in-from-bottom-8 duration-500 ease-out"
-      >
-        {/* Header - Consistency with Details modal */}
-        <div className="px-6 sm:px-10 py-8 flex items-start justify-between">
-          <div className="flex items-center gap-5">
-            <div className="w-[52px] h-[52px] sm:w-[60px] sm:h-[60px] rounded-[18px] bg-[#FF8A04]/10 border border-[#FF8A04]/20 flex items-center justify-center">
-              <AlertTriangle className="w-6 h-6 sm:w-7 sm:h-7 text-[#FF8A04]" strokeWidth={2.5} />
-            </div>
-            <div>
-              <h2 id="early-exit-title" className="text-[20px] sm:text-[24px] font-bold tracking-tight text-white leading-tight">
-                Early Exit Warning
-              </h2>
-              <p className="text-[13px] sm:text-[14px] text-white/50 font-medium mt-1 leading-snug">
-                This action is irreversible and carries penalties.
-              </p>
-            </div>
-          </div>
-          <button
-            onClick={handleClose}
-            className="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-all border border-white/10"
-            aria-label="Close modal"
-          >
-            <X className="w-5 h-5 text-white/50" />
-          </button>
-        </div>
-
-        {/* Content Body */}
-        <div className="px-6 sm:px-10 pb-8">
-          {/* Summary Table - Semantic financial breakdown for accessibility */}
-          <table className="w-full text-left border-collapse mb-8" aria-label="Early exit penalty breakdown">
-            <caption className="sr-only">Financial breakdown of early exit penalty and final refund amount</caption>
-            <thead>
-              <tr className="border-b border-white/10">
-                <th scope="col" className="text-[12px] font-bold uppercase tracking-wider text-white/40 pb-3">Item</th>
-                <th scope="col" className="text-[12px] font-bold uppercase tracking-wider text-white/40 pb-3 text-right">Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              {/* Commitment ID */}
-              <tr className="border-b border-white/5">
-                <th scope="row" className="py-3 text-[14px] text-white/40 font-medium">Commitment ID</th>
-                <td className="py-3 text-[14px] font-mono text-white/80 font-bold text-right" aria-label={`Commitment ID ${commitmentId}`}>
-                  {commitmentId.slice(0, 8)}...{commitmentId.slice(-6)}
-                </td>
-              </tr>
-              {/* Before Early Exit */}
-              <tr className="border-b border-white/5">
-                <th scope="row" className="py-3 text-[14px] text-white/40 font-medium">Before Early Exit (Committed Amount)</th>
-                <td className="py-3 text-[14px] text-white font-bold text-right" aria-label={`Committed amount: ${formatScreenReaderText(originalAmount)}`}>
-                  {originalAmount}
-                </td>
-              </tr>
-              {/* Penalty Rate */}
-              <tr className="border-b border-white/5">
-                <th scope="row" className="py-3 text-[14px] text-[#FF8A04]/80 font-medium">Penalty Rate</th>
-                <td className="py-3 text-[14px] text-[#FF8A04] font-bold text-right" aria-label={`Penalty rate: ${formatScreenReaderText(penaltyPercent)}`}>
-                  {penaltyPercent}
-                </td>
-              </tr>
-              {/* Penalty Deduction */}
-              <tr className="border-b border-white/5">
-                <th scope="row" className="py-3 text-[14px] text-[#FF8A04]/80 font-medium">Penalty Deduction</th>
-                <td className="py-3 text-[14px] text-[#FF8A04] font-bold text-right" aria-label={`Penalty deduction: minus ${formatScreenReaderText(penaltyAmount)}`}>
-                  -{penaltyAmount}
-                </td>
-              </tr>
-              {/* After Early Exit */}
-              <tr>
-                <th scope="row" className="py-4 text-[15px] text-white font-bold tracking-tight">After Early Exit (Net Refund)</th>
-                <td className="py-4 text-[18px] text-[#0FF0FC] font-extrabold tracking-tight text-right" aria-label={`Net refund amount: ${formatScreenReaderText(netReceiveAmount)}`}>
-                  {netReceiveAmount}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-
-          {/* Important Notice Block */}
-          <div className="bg-[#FF8A04]/10 border border-[#FF8A04]/20 rounded-2xl p-5 mb-8 group hover:bg-[#FF8A04]/15 transition-colors">
-            <div className="flex items-center gap-2.5 mb-4 text-[#FF8A04]">
-              <Info className="w-4 h-4" />
-              <span className="text-[13px] font-bold uppercase tracking-widest">Important consequences</span>
-            </div>
-            <ul className="space-y-2.5">
-              {[
-                'You will lose the penalty amount shown above immediately.',
-                'The commitment will be recorded as an Early Exit on-chain.',
-                'This action cannot be reversed or modified.',
-                'You forfeit future yield and continue to hold reduced value.'
-              ].map((text, i) => (
-                <li key={i} className="flex items-start gap-2.5 leading-snug">
-                  <div className="w-1.5 h-1.5 rounded-full bg-[#FF8A04]/40 mt-1.5 shrink-0" />
-                  <span className="text-[13px] text-white/70 font-medium">{text}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          {/* Acknowledgment Checkbox */}
-          <label className="flex items-start gap-4 p-4 bg-white/[0.02] border border-white/[0.05] rounded-2xl cursor-pointer hover:bg-white/[0.04] transition-all group active:scale-[0.99] mb-4">
-            <div className="relative flex items-center">
-              <input
-                type="checkbox"
-                className="peer h-5 w-5 cursor-pointer appearance-none rounded-md border border-white/20 bg-white/5 transition-all checked:border-[#FF8A04] checked:bg-[#FF8A04]"
-                checked={hasAcknowledged}
-                onChange={(e) => onChangeAcknowledged(e.target.checked)}
-              />
-              <X className="absolute h-3.5 w-3.5 text-black opacity-0 peer-checked:opacity-100 left-0.5 top-0.5 pointer-events-none" strokeWidth={4} />
-            </div>
-            <span className="text-[14px] text-white/70 font-medium leading-snug select-none group-hover:text-white transition-colors">
-              I understand this will record an early exit on-chain and deduct {penaltyPercent} from the committed amount.
-            </span>
-          </label>
-
-          <div className="mb-6 rounded-2xl border border-white/[0.04] bg-white/[0.02] p-4">
-            <label htmlFor="confirmation-input" className="block text-[13px] font-semibold text-white/60 mb-2">
-              Type the commitment ID to confirm
-            </label>
-            <input
-              id="confirmation-input"
-              type="text"
-              value={confirmationInput}
-              onChange={(e) => setConfirmationInput(e.target.value)}
-              className="w-full rounded-2xl border border-white/10 bg-[#050505] px-4 py-3 text-white placeholder:text-white/30 outline-none focus:border-[#FF8A04] focus:ring-2 focus:ring-[#FF8A04]/20"
-              placeholder="Enter commitment ID exactly"
-              autoComplete="off"
-            />
-            <p className="mt-2 text-[12px] text-white/40">
-              Confirming this action requires the exact commitment ID: <span className="font-mono text-[#0FF0FC]">{commitmentId}</span>
-            </p>
-          </div>
-
-          {/* Action Buttons - Standardized placement */}
-          <div className="flex flex-col sm:flex-row gap-3">
-            <button
-              onClick={onCancel}
-              className="flex-1 bg-white/5 hover:bg-white/10 border border-white/10 rounded-[18px] py-4 text-[15px] font-bold text-white transition-all order-2 sm:order-1 active:scale-[0.98]"
-            >
-              Cancel
-            </button>
-            <button
-              disabled={!canConfirm}
-              onClick={onConfirm}
-              className="flex-[1.5] bg-[#FF8A04] disabled:grayscale disabled:opacity-30 hover:bg-[#FF8A04]/90 text-black rounded-[18px] py-4 text-[15px] font-bold transition-all order-1 sm:order-2 shadow-[0_0_30px_rgba(255,138,4,0.25)] active:scale-[0.98]"
-            >
-              Confirm Early Exit
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body
-  )
-}
+'use client';
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AlertTriangle, X, Info } from 'lucide-react';
+
+export interface CommitmentEarlyExitModalProps {
+  isOpen: boolean;
+  commitmentId: string;
+  originalAmount: string;
+  penaltyPercent: string;
+  penaltyAmount: string;
+  netReceiveAmount: string;
+  hasAcknowledged: boolean;
+  isPreviewLoading?: boolean;
+  previewError?: string | null;
+  onChangeAcknowledged: (value: boolean) => void;
+  onCancel: () => void;
+  onConfirm: () => void;
+  onClose?: () => void;
+}
+
+function formatScreenReaderText(val: string): string {
+  return val
+    .replace(/\bXLM\b/gi, 'Stellar Lumens')
+    .replace(/\bUSDC\b/gi, 'USD Coin')
+    .replace(/%/g, ' percent')
+    .replace(/-/g, 'minus ')
+}
+
+export default function CommitmentEarlyExitModal({
+  isOpen,
+  commitmentId,
+  originalAmount,
+  penaltyPercent,
+  penaltyAmount,
+  netReceiveAmount,
+  hasAcknowledged,
+  isPreviewLoading = false,
+  previewError = null,
+  onChangeAcknowledged,
+  onCancel,
+  onConfirm,
+  onClose,
+}: CommitmentEarlyExitModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  const [confirmationInput, setConfirmationInput] = useState('')
+  const hasTypedConfirmation = confirmationInput.trim() === commitmentId
+  const canConfirm = hasAcknowledged && hasTypedConfirmation && !isPreviewLoading
+
+  const handleClose = useCallback(() => {
+    (onClose ?? onCancel)();
+  }, [onClose, onCancel]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') handleClose();
+
+      // Focus trap
+      if (e.key === 'Tab' && modalRef.current) {
+        const focusableElements = modalRef.current.querySelectorAll(
+          'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        const first = focusableElements[0] as HTMLElement;
+        const last = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [isOpen, handleClose]);
+
+  if (!isOpen || !mounted) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-9999 flex items-center justify-center bg-black/80 backdrop-blur-md animate-in fade-in duration-300"
+      onClick={(e) => e.target === e.currentTarget && handleClose()}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="early-exit-title"
+    >
+      <div
+        ref={modalRef}
+        className="w-full sm:max-w-[520px] mt-auto sm:mt-0 bg-[#0A0A0A] border-t sm:border border-[#FF8A04]/30 rounded-t-[32px] sm:rounded-[32px] flex flex-col relative shadow-[0_0_60px_rgba(255,138,4,0.15)] animate-in slide-in-from-bottom-8 duration-500 ease-out"
+      >
+        {/* Header - Consistency with Details modal */}
+        <div className="px-6 sm:px-10 py-8 flex items-start justify-between">
+          <div className="flex items-center gap-5">
+            <div className="w-[52px] h-[52px] sm:w-[60px] sm:h-[60px] rounded-[18px] bg-[#FF8A04]/10 border border-[#FF8A04]/20 flex items-center justify-center">
+              <AlertTriangle className="w-6 h-6 sm:w-7 sm:h-7 text-[#FF8A04]" strokeWidth={2.5} />
+            </div>
+            <div>
+              <h2 id="early-exit-title" className="text-[20px] sm:text-[24px] font-bold tracking-tight text-white leading-tight">
+                Early Exit Warning
+              </h2>
+              <p className="text-[13px] sm:text-[14px] text-white/50 font-medium mt-1 leading-snug">
+                This action is irreversible and carries penalties.
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={handleClose}
+            className="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-all border border-white/10"
+            aria-label="Close modal"
+          >
+            <X className="w-5 h-5 text-white/50" />
+          </button>
+        </div>
+
+        {/* Content Body */}
+        <div className="px-6 sm:px-10 pb-8">
+          {/* Summary Table - Semantic financial breakdown for accessibility */}
+          {isPreviewLoading && (
+            <div
+              role="status"
+              aria-live="polite"
+              className="mb-4 rounded-2xl border border-[#0FF0FC]/20 bg-[#0FF0FC]/10 px-4 py-3 text-[13px] font-semibold text-[#0FF0FC]"
+            >
+              Fetching live early-exit preview...
+            </div>
+          )}
+
+          {previewError && (
+            <div
+              role="alert"
+              className="mb-4 rounded-2xl border border-[#FF8A04]/25 bg-[#FF8A04]/10 px-4 py-3 text-[13px] font-semibold text-[#FFB15A]"
+            >
+              Could not refresh the live preview. Showing estimated local figures instead. {previewError}
+            </div>
+          )}
+
+          <table className="w-full text-left border-collapse mb-8" aria-label="Early exit penalty breakdown">
+            <caption className="sr-only">Financial breakdown of early exit penalty and final refund amount</caption>
+            <thead>
+              <tr className="border-b border-white/10">
+                <th scope="col" className="text-[12px] font-bold uppercase tracking-wider text-white/40 pb-3">Item</th>
+                <th scope="col" className="text-[12px] font-bold uppercase tracking-wider text-white/40 pb-3 text-right">Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {/* Commitment ID */}
+              <tr className="border-b border-white/5">
+                <th scope="row" className="py-3 text-[14px] text-white/40 font-medium">Commitment ID</th>
+                <td className="py-3 text-[14px] font-mono text-white/80 font-bold text-right" aria-label={`Commitment ID ${commitmentId}`}>
+                  {commitmentId.slice(0, 8)}...{commitmentId.slice(-6)}
+                </td>
+              </tr>
+              {/* Before Early Exit */}
+              <tr className="border-b border-white/5">
+                <th scope="row" className="py-3 text-[14px] text-white/40 font-medium">Before Early Exit (Committed Amount)</th>
+                <td className="py-3 text-[14px] text-white font-bold text-right" aria-label={`Committed amount: ${formatScreenReaderText(originalAmount)}`}>
+                  {originalAmount}
+                </td>
+              </tr>
+              {/* Penalty Rate */}
+              <tr className="border-b border-white/5">
+                <th scope="row" className="py-3 text-[14px] text-[#FF8A04]/80 font-medium">Penalty Rate</th>
+                <td className="py-3 text-[14px] text-[#FF8A04] font-bold text-right" aria-label={`Penalty rate: ${formatScreenReaderText(penaltyPercent)}`}>
+                  {penaltyPercent}
+                </td>
+              </tr>
+              {/* Penalty Deduction */}
+              <tr className="border-b border-white/5">
+                <th scope="row" className="py-3 text-[14px] text-[#FF8A04]/80 font-medium">Penalty Deduction</th>
+                <td className="py-3 text-[14px] text-[#FF8A04] font-bold text-right" aria-label={`Penalty deduction: minus ${formatScreenReaderText(penaltyAmount)}`}>
+                  -{penaltyAmount}
+                </td>
+              </tr>
+              {/* After Early Exit */}
+              <tr>
+                <th scope="row" className="py-4 text-[15px] text-white font-bold tracking-tight">After Early Exit (Net Refund)</th>
+                <td className="py-4 text-[18px] text-[#0FF0FC] font-extrabold tracking-tight text-right" aria-label={`Net refund amount: ${formatScreenReaderText(netReceiveAmount)}`}>
+                  {netReceiveAmount}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          {/* Important Notice Block */}
+          <div className="bg-[#FF8A04]/10 border border-[#FF8A04]/20 rounded-2xl p-5 mb-8 group hover:bg-[#FF8A04]/15 transition-colors">
+            <div className="flex items-center gap-2.5 mb-4 text-[#FF8A04]">
+              <Info className="w-4 h-4" />
+              <span className="text-[13px] font-bold uppercase tracking-widest">Important consequences</span>
+            </div>
+            <ul className="space-y-2.5">
+              {[
+                'You will lose the penalty amount shown above immediately.',
+                'The commitment will be recorded as an Early Exit on-chain.',
+                'This action cannot be reversed or modified.',
+                'You forfeit future yield and continue to hold reduced value.'
+              ].map((text, i) => (
+                <li key={i} className="flex items-start gap-2.5 leading-snug">
+                  <div className="w-1.5 h-1.5 rounded-full bg-[#FF8A04]/40 mt-1.5 shrink-0" />
+                  <span className="text-[13px] text-white/70 font-medium">{text}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Acknowledgment Checkbox */}
+          <label className="flex items-start gap-4 p-4 bg-white/[0.02] border border-white/[0.05] rounded-2xl cursor-pointer hover:bg-white/[0.04] transition-all group active:scale-[0.99] mb-4">
+            <div className="relative flex items-center">
+              <input
+                type="checkbox"
+                className="peer h-5 w-5 cursor-pointer appearance-none rounded-md border border-white/20 bg-white/5 transition-all checked:border-[#FF8A04] checked:bg-[#FF8A04]"
+                checked={hasAcknowledged}
+                onChange={(e) => onChangeAcknowledged(e.target.checked)}
+              />
+              <X className="absolute h-3.5 w-3.5 text-black opacity-0 peer-checked:opacity-100 left-0.5 top-0.5 pointer-events-none" strokeWidth={4} />
+            </div>
+            <span className="text-[14px] text-white/70 font-medium leading-snug select-none group-hover:text-white transition-colors">
+              I understand this will record an early exit on-chain and deduct {penaltyPercent} from the committed amount.
+            </span>
+          </label>
+
+          <div className="mb-6 rounded-2xl border border-white/[0.04] bg-white/[0.02] p-4">
+            <label htmlFor="confirmation-input" className="block text-[13px] font-semibold text-white/60 mb-2">
+              Type the commitment ID to confirm
+            </label>
+            <input
+              id="confirmation-input"
+              type="text"
+              value={confirmationInput}
+              onChange={(e) => setConfirmationInput(e.target.value)}
+              className="w-full rounded-2xl border border-white/10 bg-[#050505] px-4 py-3 text-white placeholder:text-white/30 outline-none focus:border-[#FF8A04] focus:ring-2 focus:ring-[#FF8A04]/20"
+              placeholder="Enter commitment ID exactly"
+              autoComplete="off"
+            />
+            <p className="mt-2 text-[12px] text-white/40">
+              Confirming this action requires the exact commitment ID: <span className="font-mono text-[#0FF0FC]">{commitmentId}</span>
+            </p>
+          </div>
+
+          {/* Action Buttons - Standardized placement */}
+          <div className="flex flex-col sm:flex-row gap-3">
+            <button
+              onClick={onCancel}
+              className="flex-1 bg-white/5 hover:bg-white/10 border border-white/10 rounded-[18px] py-4 text-[15px] font-bold text-white transition-all order-2 sm:order-1 active:scale-[0.98]"
+            >
+              Cancel
+            </button>
+            <button
+              disabled={!canConfirm}
+              onClick={onConfirm}
+              className="flex-[1.5] bg-[#FF8A04] disabled:grayscale disabled:opacity-30 hover:bg-[#FF8A04]/90 text-black rounded-[18px] py-4 text-[15px] font-bold transition-all order-1 sm:order-2 shadow-[0_0_30px_rgba(255,138,4,0.25)] active:scale-[0.98]"
+            >
+              Confirm Early Exit
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

From 3b92711d18555fe770e8682aef1c3003a5e8d935 Mon Sep 17 00:00:00 2001
From: xx7412421-cloud <xx7412421@gmail.com>
Date: Sun, 21 Jun 2026 19:31:38 +0800
Subject: [PATCH 03/10] feat: wire early exit modal to live preview

---
 .../earlyExitPreview.ts                       | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 src/components/CommitmentEarlyExitModal/earlyExitPreview.ts

diff --git a/src/components/CommitmentEarlyExitModal/earlyExitPreview.ts b/src/components/CommitmentEarlyExitModal/earlyExitPreview.ts
new file mode 100644
index 0000000..14efa49
--- /dev/null
+++ b/src/components/CommitmentEarlyExitModal/earlyExitPreview.ts
@@ -0,0 +1,84 @@
+export interface EarlyExitPreviewApiData {
+  principal: number | string;
+  penaltyPercent: number | string;
+  penaltyAmount: number | string;
+  netRefund: number | string;
+}
+
+export interface EarlyExitPreviewSummary {
+  penaltyPercent: string;
+  penaltyAmount: string;
+  netReceiveAmount: string;
+}
+
+interface ApiEnvelope<T> {
+  success?: boolean;
+  data?: T;
+  error?: {
+    message?: string;
+  };
+}
+
+function formatNumber(value: number): string {
+  return value.toLocaleString("en-US", {
+    maximumFractionDigits: 6,
+  });
+}
+
+function formatAssetAmount(value: number | string, asset: string): string {
+  const numericValue = Number(value);
+  if (Number.isFinite(numericValue)) {
+    return `${formatNumber(numericValue)} ${asset}`;
+  }
+
+  return `${value} ${asset}`;
+}
+
+export function formatEarlyExitPreview(
+  preview: EarlyExitPreviewApiData,
+  asset: string,
+): EarlyExitPreviewSummary {
+  const numericPenaltyPercent = Number(preview.penaltyPercent);
+
+  return {
+    penaltyPercent: Number.isFinite(numericPenaltyPercent)
+      ? `${formatNumber(numericPenaltyPercent)}%`
+      : `${preview.penaltyPercent}%`,
+    penaltyAmount: formatAssetAmount(preview.penaltyAmount, asset),
+    netReceiveAmount: formatAssetAmount(preview.netRefund, asset),
+  };
+}
+
+export async function fetchEarlyExitPreviewSummary(
+  commitmentId: string,
+  asset: string,
+  fetcher: typeof fetch = fetch,
+): Promise<EarlyExitPreviewSummary> {
+  const response = await fetcher(
+    `/api/commitments/${encodeURIComponent(commitmentId)}/early-exit/preview`,
+  );
+
+  if (!response.ok) {
+    throw new Error(`Live preview failed with status ${response.status}`);
+  }
+
+  const payload = (await response.json()) as
+    | ApiEnvelope<EarlyExitPreviewApiData>
+    | EarlyExitPreviewApiData;
+
+  if ("success" in payload) {
+    if (payload.success === false) {
+      throw new Error(
+        payload.error?.message ?? "Live preview returned an error",
+      );
+    }
+
+    if (!payload.data) {
+      throw new Error("Live preview response did not include data");
+    }
+
+    return formatEarlyExitPreview(payload.data, asset);
+  }
+
+  return formatEarlyExitPreview(payload, asset);
+}

From f49a320cc8d56202f62f916769cde4e094fbe333 Mon Sep 17 00:00:00 2001
From: xx7412421-cloud <xx7412421@gmail.com>
Date: Sun, 21 Jun 2026 19:31:40 +0800
Subject: [PATCH 04/10] feat: wire early exit modal to live preview

---
 .../CommitmentEarlyExitModal.test.tsx         | 557 ++++++++++--------
 1 file changed, 303 insertions(+), 254 deletions(-)

diff --git a/tests/components/CommitmentEarlyExitModal.test.tsx b/tests/components/CommitmentEarlyExitModal.test.tsx
index 51e1484..1b17ae5 100644
--- a/tests/components/CommitmentEarlyExitModal.test.tsx
+++ b/tests/components/CommitmentEarlyExitModal.test.tsx
@@ -1,254 +1,303 @@
-// @vitest-environment happy-dom
-import React from 'react';
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import CommitmentEarlyExitModal from '@/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal';
-
-describe('CommitmentEarlyExitModal', () => {
-  const defaultProps = {
-    isOpen: true,
-    commitmentId: 'CMT-TEST123',
-    originalAmount: '50,000 XLM',
-    penaltyPercent: '2%',
-    penaltyAmount: '1,000 XLM',
-    netReceiveAmount: '49,000 XLM',
-    hasAcknowledged: false,
-    onChangeAcknowledged: vi.fn(),
-    onCancel: vi.fn(),
-    onConfirm: vi.fn(),
-    onClose: vi.fn(),
-  };
-
-  it('renders nothing when isOpen is false', () => {
-    const { container } = render(
-      <CommitmentEarlyExitModal {...defaultProps} isOpen={false} />
-    );
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders the modal header and informational notice when open', () => {
-    render(<CommitmentEarlyExitModal {...defaultProps} />);
-    
-    // Header check
-    expect(screen.getByText('Early Exit Warning')).toBeInTheDocument();
-    expect(screen.getByText('This action is irreversible and carries penalties.')).toBeInTheDocument();
-    
-    // Notice check
-    expect(screen.getByText('Important consequences')).toBeInTheDocument();
-    expect(screen.getByText('You will lose the penalty amount shown above immediately.')).toBeInTheDocument();
-  });
-
-  describe('accessibility and semantic markup', () => {
-    it('contains a semantic table with a descriptive screen-reader caption', () => {
-      render(<CommitmentEarlyExitModal {...defaultProps} />);
-      
-      const table = screen.getByRole('table');
-      expect(table).toBeInTheDocument();
-      
-      // Caption check
-      const caption = table.querySelector('caption');
-      expect(caption).toBeInTheDocument();
-      expect(caption).toHaveTextContent('Financial breakdown of early exit penalty and final refund amount');
-    });
-
-    it('has proper scope attributes on table headers for row and col structure', () => {
-      render(<CommitmentEarlyExitModal {...defaultProps} />);
-      
-      const table = screen.getByRole('table');
-      
-      // Column headers
-      const colHeaders = table.querySelectorAll('th[scope="col"]');
-      expect(colHeaders.length).toBe(2);
-      expect(colHeaders[0]).toHaveTextContent('Item');
-      expect(colHeaders[1]).toHaveTextContent('Value');
-      
-      // Row headers
-      const rowHeaders = table.querySelectorAll('th[scope="row"]');
-      expect(rowHeaders.length).toBe(5);
-      expect(rowHeaders[0]).toHaveTextContent('Commitment ID');
-      expect(rowHeaders[1]).toHaveTextContent('Before Early Exit (Committed Amount)');
-      expect(rowHeaders[2]).toHaveTextContent('Penalty Rate');
-      expect(rowHeaders[3]).toHaveTextContent('Penalty Deduction');
-      expect(rowHeaders[4]).toHaveTextContent('After Early Exit (Net Refund)');
-    });
-
-    it('applies accessible screen reader labels spelling out units and currency codes', () => {
-      render(<CommitmentEarlyExitModal {...defaultProps} />);
-      
-      // Check original amount cell has aria-label spelling out XLM
-      const originalAmountCell = screen.getByLabelText('Committed amount: 50,000 Stellar Lumens');
-      expect(originalAmountCell).toBeInTheDocument();
-      expect(originalAmountCell).toHaveTextContent('50,000 XLM');
-
-      // Check penalty percentage cell has aria-label spelling out percent
-      const penaltyPercentCell = screen.getByLabelText('Penalty rate: 2 percent');
-      expect(penaltyPercentCell).toBeInTheDocument();
-      expect(penaltyPercentCell).toHaveTextContent('2%');
-
-      // Check penalty amount cell has aria-label spelling out negative prefix and XLM
-      const penaltyAmountCell = screen.getByLabelText('Penalty deduction: minus 1,000 Stellar Lumens');
-      expect(penaltyAmountCell).toBeInTheDocument();
-      expect(penaltyAmountCell).toHaveTextContent('-1,000 XLM');
-
-      // Check net refund cell has aria-label spelling out XLM
-      const netRefundCell = screen.getByLabelText('Net refund amount: 49,000 Stellar Lumens');
-      expect(netRefundCell).toBeInTheDocument();
-      expect(netRefundCell).toHaveTextContent('49,000 XLM');
-    });
-  });
-
-  describe('user interactions and confirmation validation', () => {
-    it('disables the confirm button by default', () => {
-      render(<CommitmentEarlyExitModal {...defaultProps} />);
-      
-      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
-      expect(confirmButton).toBeDisabled();
-    });
-
-    it('triggers onChangeAcknowledged callback when clicking acknowledgment checkbox', () => {
-      const onChangeAcknowledged = vi.fn();
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          onChangeAcknowledged={onChangeAcknowledged}
-        />
-      );
-      
-      const checkbox = screen.getByRole('checkbox');
-      fireEvent.click(checkbox);
-      
-      expect(onChangeAcknowledged).toHaveBeenCalledWith(true);
-    });
-
-    it('enables the confirm button when both acknowledgement and commitment ID typing are satisfied', () => {
-      const { rerender } = render(
-        <CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={false} />
-      );
-      
-      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
-      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
-      
-      // Action 1: Type the correct ID
-      fireEvent.change(input, { target: { value: 'CMT-TEST123' } });
-      expect(confirmButton).toBeDisabled(); // still disabled because hasAcknowledged is false
-      
-      // Action 2: Receive acknowledgment prop as true
-      rerender(<CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={true} />);
-      
-      // Type matching ID again since input value state is local to render lifecycle
-      fireEvent.change(screen.getByPlaceholderText(/Enter commitment ID exactly/i), {
-        target: { value: 'CMT-TEST123' },
-      });
-      
-      expect(screen.getByRole('button', { name: /Confirm Early Exit/i })).not.toBeDisabled();
-    });
-
-    it('remains disabled if user typed the wrong commitment ID', () => {
-      render(<CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={true} />);
-      
-      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
-      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
-      
-      fireEvent.change(input, { target: { value: 'WRONG-ID-999' } });
-      
-      expect(confirmButton).toBeDisabled();
-    });
-
-    it('calls onCancel or onClose when appropriate buttons are clicked', () => {
-      const onCancel = vi.fn();
-      const onClose = vi.fn();
-      
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          onCancel={onCancel}
-          onClose={onClose}
-        />
-      );
-      
-      // Cancel button click
-      fireEvent.click(screen.getByRole('button', { name: /Cancel/i }));
-      expect(onCancel).toHaveBeenCalled();
-      
-      // Close button (X) click
-      fireEvent.click(screen.getByRole('button', { name: /Close modal/i }));
-      expect(onClose).toHaveBeenCalled();
-    });
-
-    it('calls onConfirm when confirm button is clicked', () => {
-      const onConfirm = vi.fn();
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          hasAcknowledged={true}
-          onConfirm={onConfirm}
-        />
-      );
-      
-      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
-      fireEvent.change(input, { target: { value: 'CMT-TEST123' } });
-      
-      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
-      fireEvent.click(confirmButton);
-      
-      expect(onConfirm).toHaveBeenCalled();
-    });
-  });
-
-  describe('penalty preview calculations per risk tier', () => {
-    it('asserts correct rendering and labels for Safe (2%) tier calculations', () => {
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          originalAmount="50,000 XLM"
-          penaltyPercent="2%"
-          penaltyAmount="1,000 XLM"
-          netReceiveAmount="49,000 XLM"
-        />
-      );
-
-      // Value text matchers
-      expect(screen.getByLabelText('Committed amount: 50,000 Stellar Lumens')).toHaveTextContent('50,000 XLM');
-      expect(screen.getByLabelText('Penalty rate: 2 percent')).toHaveTextContent('2%');
-      expect(screen.getByLabelText('Penalty deduction: minus 1,000 Stellar Lumens')).toHaveTextContent('-1,000 XLM');
-      expect(screen.getByLabelText('Net refund amount: 49,000 Stellar Lumens')).toHaveTextContent('49,000 XLM');
-    });
-
-    it('asserts correct rendering and labels for Balanced (3%) tier calculations', () => {
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          originalAmount="100,000 USDC"
-          penaltyPercent="3%"
-          penaltyAmount="3,000 USDC"
-          netReceiveAmount="97,000 USDC"
-        />
-      );
-
-      // Value text matchers
-      expect(screen.getByLabelText('Committed amount: 100,000 USD Coin')).toHaveTextContent('100,000 USDC');
-      expect(screen.getByLabelText('Penalty rate: 3 percent')).toHaveTextContent('3%');
-      expect(screen.getByLabelText('Penalty deduction: minus 3,000 USD Coin')).toHaveTextContent('-3,000 USDC');
-      expect(screen.getByLabelText('Net refund amount: 97,000 USD Coin')).toHaveTextContent('97,000 USDC');
-    });
-
-    it('asserts correct rendering and labels for Aggressive (5%) tier calculations', () => {
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          originalAmount="250,000 XLM"
-          penaltyPercent="5%"
-          penaltyAmount="12,500 XLM"
-          netReceiveAmount="237,500 XLM"
-        />
-      );
-
-      // Value text matchers
-      expect(screen.getByLabelText('Committed amount: 250,000 Stellar Lumens')).toHaveTextContent('250,000 XLM');
-      expect(screen.getByLabelText('Penalty rate: 5 percent')).toHaveTextContent('5%');
-      expect(screen.getByLabelText('Penalty deduction: minus 12,500 Stellar Lumens')).toHaveTextContent('-12,500 XLM');
-      expect(screen.getByLabelText('Net refund amount: 237,500 Stellar Lumens')).toHaveTextContent('237,500 XLM');
-    });
-  });
-});
+// @vitest-environment happy-dom
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CommitmentEarlyExitModal from '@/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal';
+
+describe('CommitmentEarlyExitModal', () => {
+  const defaultProps = {
+    isOpen: true,
+    commitmentId: 'CMT-TEST123',
+    originalAmount: '50,000 XLM',
+    penaltyPercent: '2%',
+    penaltyAmount: '1,000 XLM',
+    netReceiveAmount: '49,000 XLM',
+    hasAcknowledged: false,
+    onChangeAcknowledged: vi.fn(),
+    onCancel: vi.fn(),
+    onConfirm: vi.fn(),
+    onClose: vi.fn(),
+  };
+
+  it('renders nothing when isOpen is false', () => {
+    const { container } = render(
+      <CommitmentEarlyExitModal {...defaultProps} isOpen={false} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders the modal header and informational notice when open', () => {
+    render(<CommitmentEarlyExitModal {...defaultProps} />);
+    
+    // Header check
+    expect(screen.getByText('Early Exit Warning')).toBeInTheDocument();
+    expect(screen.getByText('This action is irreversible and carries penalties.')).toBeInTheDocument();
+    
+    // Notice check
+    expect(screen.getByText('Important consequences')).toBeInTheDocument();
+    expect(screen.getByText('You will lose the penalty amount shown above immediately.')).toBeInTheDocument();
+  });
+
+  describe('accessibility and semantic markup', () => {
+    it('contains a semantic table with a descriptive screen-reader caption', () => {
+      render(<CommitmentEarlyExitModal {...defaultProps} />);
+      
+      const table = screen.getByRole('table');
+      expect(table).toBeInTheDocument();
+      
+      // Caption check
+      const caption = table.querySelector('caption');
+      expect(caption).toBeInTheDocument();
+      expect(caption).toHaveTextContent('Financial breakdown of early exit penalty and final refund amount');
+    });
+
+    it('has proper scope attributes on table headers for row and col structure', () => {
+      render(<CommitmentEarlyExitModal {...defaultProps} />);
+      
+      const table = screen.getByRole('table');
+      
+      // Column headers
+      const colHeaders = table.querySelectorAll('th[scope="col"]');
+      expect(colHeaders.length).toBe(2);
+      expect(colHeaders[0]).toHaveTextContent('Item');
+      expect(colHeaders[1]).toHaveTextContent('Value');
+      
+      // Row headers
+      const rowHeaders = table.querySelectorAll('th[scope="row"]');
+      expect(rowHeaders.length).toBe(5);
+      expect(rowHeaders[0]).toHaveTextContent('Commitment ID');
+      expect(rowHeaders[1]).toHaveTextContent('Before Early Exit (Committed Amount)');
+      expect(rowHeaders[2]).toHaveTextContent('Penalty Rate');
+      expect(rowHeaders[3]).toHaveTextContent('Penalty Deduction');
+      expect(rowHeaders[4]).toHaveTextContent('After Early Exit (Net Refund)');
+    });
+
+    it('applies accessible screen reader labels spelling out units and currency codes', () => {
+      render(<CommitmentEarlyExitModal {...defaultProps} />);
+      
+      // Check original amount cell has aria-label spelling out XLM
+      const originalAmountCell = screen.getByLabelText('Committed amount: 50,000 Stellar Lumens');
+      expect(originalAmountCell).toBeInTheDocument();
+      expect(originalAmountCell).toHaveTextContent('50,000 XLM');
+
+      // Check penalty percentage cell has aria-label spelling out percent
+      const penaltyPercentCell = screen.getByLabelText('Penalty rate: 2 percent');
+      expect(penaltyPercentCell).toBeInTheDocument();
+      expect(penaltyPercentCell).toHaveTextContent('2%');
+
+      // Check penalty amount cell has aria-label spelling out negative prefix and XLM
+      const penaltyAmountCell = screen.getByLabelText('Penalty deduction: minus 1,000 Stellar Lumens');
+      expect(penaltyAmountCell).toBeInTheDocument();
+      expect(penaltyAmountCell).toHaveTextContent('-1,000 XLM');
+
+      // Check net refund cell has aria-label spelling out XLM
+      const netRefundCell = screen.getByLabelText('Net refund amount: 49,000 Stellar Lumens');
+      expect(netRefundCell).toBeInTheDocument();
+      expect(netRefundCell).toHaveTextContent('49,000 XLM');
+    });
+  });
+
+  describe('user interactions and confirmation validation', () => {
+    it('disables the confirm button by default', () => {
+      render(<CommitmentEarlyExitModal {...defaultProps} />);
+      
+      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
+      expect(confirmButton).toBeDisabled();
+    });
+
+    it('triggers onChangeAcknowledged callback when clicking acknowledgment checkbox', () => {
+      const onChangeAcknowledged = vi.fn();
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          onChangeAcknowledged={onChangeAcknowledged}
+        />
+      );
+      
+      const checkbox = screen.getByRole('checkbox');
+      fireEvent.click(checkbox);
+      
+      expect(onChangeAcknowledged).toHaveBeenCalledWith(true);
+    });
+
+    it('enables the confirm button when both acknowledgement and commitment ID typing are satisfied', () => {
+      const { rerender } = render(
+        <CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={false} />
+      );
+      
+      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
+      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
+      
+      // Action 1: Type the correct ID
+      fireEvent.change(input, { target: { value: 'CMT-TEST123' } });
+      expect(confirmButton).toBeDisabled(); // still disabled because hasAcknowledged is false
+      
+      // Action 2: Receive acknowledgment prop as true
+      rerender(<CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={true} />);
+      
+      // Type matching ID again since input value state is local to render lifecycle
+      fireEvent.change(screen.getByPlaceholderText(/Enter commitment ID exactly/i), {
+        target: { value: 'CMT-TEST123' },
+      });
+      
+      expect(screen.getByRole('button', { name: /Confirm Early Exit/i })).not.toBeDisabled();
+    });
+
+    it('remains disabled if user typed the wrong commitment ID', () => {
+      render(<CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={true} />);
+      
+      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
+      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
+      
+      fireEvent.change(input, { target: { value: 'WRONG-ID-999' } });
+      
+      expect(confirmButton).toBeDisabled();
+    });
+
+    it('calls onCancel or onClose when appropriate buttons are clicked', () => {
+      const onCancel = vi.fn();
+      const onClose = vi.fn();
+      
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          onCancel={onCancel}
+          onClose={onClose}
+        />
+      );
+      
+      // Cancel button click
+      fireEvent.click(screen.getByRole('button', { name: /Cancel/i }));
+      expect(onCancel).toHaveBeenCalled();
+      
+      // Close button (X) click
+      fireEvent.click(screen.getByRole('button', { name: /Close modal/i }));
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    it('calls onConfirm when confirm button is clicked', () => {
+      const onConfirm = vi.fn();
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          hasAcknowledged={true}
+          onConfirm={onConfirm}
+        />
+      );
+      
+      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
+      fireEvent.change(input, { target: { value: 'CMT-TEST123' } });
+      
+      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
+      fireEvent.click(confirmButton);
+      
+      expect(onConfirm).toHaveBeenCalled();
+    });
+
+    it('keeps confirmation disabled while live preview is loading', () => {
+      const onConfirm = vi.fn();
+
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          hasAcknowledged={true}
+          isPreviewLoading={true}
+          onConfirm={onConfirm}
+        />
+      );
+
+      fireEvent.change(screen.getByPlaceholderText(/Enter commitment ID exactly/i), {
+        target: { value: 'CMT-TEST123' },
+      });
+
+      expect(screen.getByRole('status')).toHaveTextContent('Fetching live early-exit preview');
+      expect(screen.getByRole('button', { name: /Confirm Early Exit/i })).toBeDisabled();
+    });
+
+    it('shows a non-blocking live preview error message', () => {
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          previewError="Live preview failed with status 503"
+        />
+      );
+
+      expect(screen.getByRole('alert')).toHaveTextContent(
+        'Could not refresh the live preview. Showing estimated local figures instead. Live preview failed with status 503'
+      );
+    });
+  });
+
+  describe('penalty preview calculations per risk tier', () => {
+    it('asserts correct rendering and labels for Safe (2%) tier calculations', () => {
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          originalAmount="50,000 XLM"
+          penaltyPercent="2%"
+          penaltyAmount="1,000 XLM"
+          netReceiveAmount="49,000 XLM"
+        />
+      );
+
+      // Value text matchers
+      expect(screen.getByLabelText('Committed amount: 50,000 Stellar Lumens')).toHaveTextContent('50,000 XLM');
+      expect(screen.getByLabelText('Penalty rate: 2 percent')).toHaveTextContent('2%');
+      expect(screen.getByLabelText('Penalty deduction: minus 1,000 Stellar Lumens')).toHaveTextContent('-1,000 XLM');
+      expect(screen.getByLabelText('Net refund amount: 49,000 Stellar Lumens')).toHaveTextContent('49,000 XLM');
+    });
+
+    it('asserts correct rendering and labels for Balanced (3%) tier calculations', () => {
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          originalAmount="100,000 USDC"
+          penaltyPercent="3%"
+          penaltyAmount="3,000 USDC"
+          netReceiveAmount="97,000 USDC"
+        />
+      );
+
+      // Value text matchers
+      expect(screen.getByLabelText('Committed amount: 100,000 USD Coin')).toHaveTextContent('100,000 USDC');
+      expect(screen.getByLabelText('Penalty rate: 3 percent')).toHaveTextContent('3%');
+      expect(screen.getByLabelText('Penalty deduction: minus 3,000 USD Coin')).toHaveTextContent('-3,000 USDC');
+      expect(screen.getByLabelText('Net refund amount: 97,000 USD Coin')).toHaveTextContent('97,000 USDC');
+    });
+
+    it('asserts correct rendering and labels for Aggressive (5%) tier calculations', () => {
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          originalAmount="250,000 XLM"
+          penaltyPercent="5%"
+          penaltyAmount="12,500 XLM"
+          netReceiveAmount="237,500 XLM"
+        />
+      );
+
+      // Value text matchers
+      expect(screen.getByLabelText('Committed amount: 250,000 Stellar Lumens')).toHaveTextContent('250,000 XLM');
+      expect(screen.getByLabelText('Penalty rate: 5 percent')).toHaveTextContent('5%');
+      expect(screen.getByLabelText('Penalty deduction: minus 12,500 Stellar Lumens')).toHaveTextContent('-12,500 XLM');
+      expect(screen.getByLabelText('Net refund amount: 237,500 Stellar Lumens')).toHaveTextContent('237,500 XLM');
+    });
+
+    it('renders a penalty-free grace-period preview when the live preview returns 0%', () => {
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          originalAmount="50,000 XLM"
+          penaltyPercent="0%"
+          penaltyAmount="0 XLM"
+          netReceiveAmount="50,000 XLM"
+        />
+      );
+
+      expect(screen.getByLabelText('Penalty rate: 0 percent')).toHaveTextContent('0%');
+      expect(screen.getByLabelText('Penalty deduction: minus 0 Stellar Lumens')).toHaveTextContent('-0 XLM');
+      expect(screen.getByLabelText('Net refund amount: 50,000 Stellar Lumens')).toHaveTextContent('50,000 XLM');
+    });
+  });
+});

From d2afe78d4a14dd22ce3d4a4786d4f029e6700e3c Mon Sep 17 00:00:00 2001
From: xx7412421-cloud <xx7412421@gmail.com>
Date: Sun, 21 Jun 2026 19:31:41 +0800
Subject: [PATCH 05/10] feat: wire early exit modal to live preview

---
 tests/components/earlyExitPreview.test.ts | 99 +++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 tests/components/earlyExitPreview.test.ts

diff --git a/tests/components/earlyExitPreview.test.ts b/tests/components/earlyExitPreview.test.ts
new file mode 100644
index 0000000..af55b12
--- /dev/null
+++ b/tests/components/earlyExitPreview.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  fetchEarlyExitPreviewSummary,
+  formatEarlyExitPreview,
+} from "@/components/CommitmentEarlyExitModal/earlyExitPreview";
+
+function jsonResponse(body: unknown, ok = true, status = 200): Response {
+  return {
+    ok,
+    status,
+    json: vi.fn().mockResolvedValue(body),
+  } as unknown as Response;
+}
+
+describe("early exit preview helpers", () => {
+  it("formats live preview numbers with the commitment asset", () => {
+    expect(
+      formatEarlyExitPreview(
+        {
+          principal: 50000,
+          penaltyPercent: 2,
+          penaltyAmount: 1000,
+          netRefund: 49000,
+        },
+        "XLM",
+      ),
+    ).toEqual({
+      penaltyPercent: "2%",
+      penaltyAmount: "1,000 XLM",
+      netReceiveAmount: "49,000 XLM",
+    });
+  });
+
+  it("preserves a 0% grace-period preview", () => {
+    expect(
+      formatEarlyExitPreview(
+        {
+          principal: 50000,
+          penaltyPercent: 0,
+          penaltyAmount: 0,
+          netRefund: 50000,
+        },
+        "XLM",
+      ),
+    ).toEqual({
+      penaltyPercent: "0%",
+      penaltyAmount: "0 XLM",
+      netReceiveAmount: "50,000 XLM",
+    });
+  });
+
+  it("fetches and unwraps the preview API envelope", async () => {
+    const fetcher = vi.fn().mockResolvedValue(
+      jsonResponse({
+        success: true,
+        data: {
+          principal: 100000,
+          penaltyPercent: 3,
+          penaltyAmount: 3000,
+          netRefund: 97000,
+        },
+      }),
+    );
+
+    await expect(
+      fetchEarlyExitPreviewSummary("CMT-XYZ789", "USDC", fetcher),
+    ).resolves.toEqual({
+      penaltyPercent: "3%",
+      penaltyAmount: "3,000 USDC",
+      netReceiveAmount: "97,000 USDC",
+    });
+    expect(fetcher).toHaveBeenCalledWith(
+      "/api/commitments/CMT-XYZ789/early-exit/preview",
+    );
+  });
+
+  it("rejects failed preview envelopes with the server message", async () => {
+    const fetcher = vi.fn().mockResolvedValue(
+      jsonResponse({
+        success: false,
+        error: {
+          message: "Commitment has already been settled",
+        },
+      }),
+    );
+
+    await expect(
+      fetchEarlyExitPreviewSummary("CMT-XYZ789", "USDC", fetcher),
+    ).rejects.toThrow("Commitment has already been settled");
+  });
+
+  it("rejects non-ok preview responses", async () => {
+    const fetcher = vi.fn().mockResolvedValue(jsonResponse({}, false, 503));
+
+    await expect(
+      fetchEarlyExitPreviewSummary("CMT-XYZ789", "USDC", fetcher),
+    ).rejects.toThrow("Live preview failed with status 503");
+  });
+});

From ba6bd53c572a6c49286233c5a0910a2910bf7f79 Mon Sep 17 00:00:00 2001
From: xx7412421-cloud <xx7412421@gmail.com>
Date: Sun, 21 Jun 2026 19:32:15 +0800
Subject: [PATCH 06/10] chore: normalize early exit preview file endings

---
 src/app/commitments/page.tsx | 758 +++++++++++++++++------------------
 1 file changed, 379 insertions(+), 379 deletions(-)

diff --git a/src/app/commitments/page.tsx b/src/app/commitments/page.tsx
index d1b1d13..05863c3 100644
--- a/src/app/commitments/page.tsx
+++ b/src/app/commitments/page.tsx
@@ -1,10 +1,10 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-import { useState, useCallback, useMemo, useEffect } from 'react'
-import MyCommitmentsHeader from '@/components/MyCommitmentsHeader'
-import MyCommitmentsStats from '@/components/MyCommitmentsStats/MyCommitmentsStats'
-import MyCommitmentsFilters from '@/components/MyCommitmentsFilters/MyCommitmentsFilters'
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useState, useCallback, useMemo, useEffect } from 'react'
+import MyCommitmentsHeader from '@/components/MyCommitmentsHeader'
+import MyCommitmentsStats from '@/components/MyCommitmentsStats/MyCommitmentsStats'
+import MyCommitmentsFilters from '@/components/MyCommitmentsFilters/MyCommitmentsFilters'
 import MyCommitmentsGrid from '@/components/MyCommitmentsGrid'
 import MyCommitmentsGridSkeleton from '@/components/MyCommitmentsGridSkeleton'
 import CommitmentEarlyExitModal from '@/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal'
@@ -14,378 +14,378 @@ import {
   fetchEarlyExitPreviewSummary,
 } from '@/components/CommitmentEarlyExitModal/earlyExitPreview'
 import { useWallet } from '@/hooks/useWallet'
-import { Commitment, CommitmentStats } from '@/types/commitment'
-import { listCommitments } from '@/lib/backend/mocks/contracts'
-import { fetchProtocolConstants, ProtocolConstants } from '@/utils/protocol'
-
-const mockCommitments: Commitment[] = [
-  {
-    id: 'CMT-ABC123',
-    type: 'Safe',
-    status: 'Active',
-    asset: 'XLM',
-    amount: '50,000',
-    currentValue: '52,600',
-    changePercent: 5.2,
-    durationProgress: 75,
-    daysRemaining: 15,
-    complianceScore: 95,
-    maxLoss: '2%',
-    currentDrawdown: '0.8%',
-    createdDate: 'Jan 10, 2026',
-    expiryDate: 'Feb 9, 2026',
-  },
-  {
-    id: 'CMT-XYZ789',
-    type: 'Balanced',
-    status: 'Active',
-    asset: 'USDC',
-    amount: '100,000',
-    currentValue: '112,500',
-    changePercent: 12.5,
-    durationProgress: 30,
-    daysRemaining: 42,
-    complianceScore: 88,
-    maxLoss: '8%',
-    currentDrawdown: '3.2%',
-    createdDate: 'Dec 15, 2025',
-    expiryDate: 'Feb 13, 2026',
-  },
-  {
-    id: 'CMT-DEF456',
-    type: 'Aggressive',
-    status: 'Active',
-    asset: 'XLM',
-    amount: '250,000',
-    currentValue: '296,750',
-    changePercent: 18.7,
-    durationProgress: 17,
-    daysRemaining: 75,
-    complianceScore: 76,
-    maxLoss: 'No limit',
-    currentDrawdown: '12.5%',
-    createdDate: 'Nov 20, 2025',
-    expiryDate: 'Feb 10, 2026',
-  },
-  {
-    id: 'CMT-GHI012',
-    type: 'Safe',
-    status: 'Settled',
-    asset: 'XLM',
-    amount: '75,000',
-    currentValue: '78,750',
-    changePercent: 5.0,
-    durationProgress: 100,
-    daysRemaining: 0,
-    complianceScore: 97,
-    maxLoss: '2%',
-    currentDrawdown: '0%',
-    createdDate: 'Dec 1, 2025',
-    expiryDate: 'Dec 31, 2025',
-  },
-  {
-    id: 'CMT-JKL345',
-    type: 'Balanced',
-    status: 'Early Exit',
-    asset: 'USDC',
-    amount: '150,000',
-    currentValue: '145,500',
-    changePercent: -3.0,
-    durationProgress: 100,
-    daysRemaining: 0,
-    complianceScore: 72,
-    maxLoss: '8%',
-    currentDrawdown: '3%',
-    createdDate: 'Nov 1, 2025',
-    expiryDate: 'Dec 30, 2025',
-  },
-  {
-    id: 'CMT-MN0678',
-    type: 'Aggressive',
-    status: 'Violated',
-    asset: 'XLM',
-    amount: '200,000',
-    currentValue: '160,000',
-    changePercent: -20.0,
-    durationProgress: 100,
-    daysRemaining: 0,
-    complianceScore: 45,
-    maxLoss: 'No limit',
-    currentDrawdown: '20%',
-    createdDate: 'Oct 15, 2025',
-    expiryDate: 'Jan 13, 2026',
-  },
-]
-
-const mockStats: CommitmentStats = {
-  totalActive: 3,
-  totalCommittedValue: '$461,850',
-  avgComplianceScore: 86,
-  totalFeesGenerated: '$1,250',
-}
-
-function getEarlyExitValues(originalAmount: string, asset: string, penaltyPercent: number) {
-  const amount = Number(originalAmount.replace(/,/g, ''))
-  const penaltyAmount = (amount * (penaltyPercent / 100)).toFixed(0)
-  const netReceive = (amount - Number(penaltyAmount)).toFixed(0)
-  return {
-    penaltyPercent: `${penaltyPercent}%`,
-    penaltyAmount: `${Number(penaltyAmount).toLocaleString()} ${asset}`,
-    netReceiveAmount: `${Number(netReceive).toLocaleString()} ${asset}`,
-  }
-}
-
-type EarlyExitPreviewState =
-  | { status: 'idle' }
-  | { status: 'loading' }
-  | { status: 'success'; summary: EarlyExitPreviewSummary }
-  | { status: 'error'; error: string }
-
-export default function MyCommitments() {
-  const router = useRouter()
-  const { address } = useWallet()
-
-  // State
-  const [searchQuery, setSearchQuery] = useState('')
-  const [statusFilter, setStatusFilter] = useState('All')
-  const [typeFilter, setTypeFilter] = useState('All')
-  const [sortBy, setSortBy] = useState('Newest')
-
-  const [earlyExitCommitmentId, setEarlyExitCommitmentId] = useState<string | null>(null)
-  const [isExportOpen, setIsExportOpen] = useState(false)
-  const [hasAcknowledged, setHasAcknowledged] = useState(false)
-  const [commitmentsList, setCommitmentsList] = useState<Commitment[]>(mockCommitments)
-  const [successMessage, setSuccessMessage] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
+import { Commitment, CommitmentStats } from '@/types/commitment'
+import { listCommitments } from '@/lib/backend/mocks/contracts'
+import { fetchProtocolConstants, ProtocolConstants } from '@/utils/protocol'
+
+const mockCommitments: Commitment[] = [
+  {
+    id: 'CMT-ABC123',
+    type: 'Safe',
+    status: 'Active',
+    asset: 'XLM',
+    amount: '50,000',
+    currentValue: '52,600',
+    changePercent: 5.2,
+    durationProgress: 75,
+    daysRemaining: 15,
+    complianceScore: 95,
+    maxLoss: '2%',
+    currentDrawdown: '0.8%',
+    createdDate: 'Jan 10, 2026',
+    expiryDate: 'Feb 9, 2026',
+  },
+  {
+    id: 'CMT-XYZ789',
+    type: 'Balanced',
+    status: 'Active',
+    asset: 'USDC',
+    amount: '100,000',
+    currentValue: '112,500',
+    changePercent: 12.5,
+    durationProgress: 30,
+    daysRemaining: 42,
+    complianceScore: 88,
+    maxLoss: '8%',
+    currentDrawdown: '3.2%',
+    createdDate: 'Dec 15, 2025',
+    expiryDate: 'Feb 13, 2026',
+  },
+  {
+    id: 'CMT-DEF456',
+    type: 'Aggressive',
+    status: 'Active',
+    asset: 'XLM',
+    amount: '250,000',
+    currentValue: '296,750',
+    changePercent: 18.7,
+    durationProgress: 17,
+    daysRemaining: 75,
+    complianceScore: 76,
+    maxLoss: 'No limit',
+    currentDrawdown: '12.5%',
+    createdDate: 'Nov 20, 2025',
+    expiryDate: 'Feb 10, 2026',
+  },
+  {
+    id: 'CMT-GHI012',
+    type: 'Safe',
+    status: 'Settled',
+    asset: 'XLM',
+    amount: '75,000',
+    currentValue: '78,750',
+    changePercent: 5.0,
+    durationProgress: 100,
+    daysRemaining: 0,
+    complianceScore: 97,
+    maxLoss: '2%',
+    currentDrawdown: '0%',
+    createdDate: 'Dec 1, 2025',
+    expiryDate: 'Dec 31, 2025',
+  },
+  {
+    id: 'CMT-JKL345',
+    type: 'Balanced',
+    status: 'Early Exit',
+    asset: 'USDC',
+    amount: '150,000',
+    currentValue: '145,500',
+    changePercent: -3.0,
+    durationProgress: 100,
+    daysRemaining: 0,
+    complianceScore: 72,
+    maxLoss: '8%',
+    currentDrawdown: '3%',
+    createdDate: 'Nov 1, 2025',
+    expiryDate: 'Dec 30, 2025',
+  },
+  {
+    id: 'CMT-MN0678',
+    type: 'Aggressive',
+    status: 'Violated',
+    asset: 'XLM',
+    amount: '200,000',
+    currentValue: '160,000',
+    changePercent: -20.0,
+    durationProgress: 100,
+    daysRemaining: 0,
+    complianceScore: 45,
+    maxLoss: 'No limit',
+    currentDrawdown: '20%',
+    createdDate: 'Oct 15, 2025',
+    expiryDate: 'Jan 13, 2026',
+  },
+]
+
+const mockStats: CommitmentStats = {
+  totalActive: 3,
+  totalCommittedValue: '$461,850',
+  avgComplianceScore: 86,
+  totalFeesGenerated: '$1,250',
+}
+
+function getEarlyExitValues(originalAmount: string, asset: string, penaltyPercent: number) {
+  const amount = Number(originalAmount.replace(/,/g, ''))
+  const penaltyAmount = (amount * (penaltyPercent / 100)).toFixed(0)
+  const netReceive = (amount - Number(penaltyAmount)).toFixed(0)
+  return {
+    penaltyPercent: `${penaltyPercent}%`,
+    penaltyAmount: `${Number(penaltyAmount).toLocaleString()} ${asset}`,
+    netReceiveAmount: `${Number(netReceive).toLocaleString()} ${asset}`,
+  }
+}
+
+type EarlyExitPreviewState =
+  | { status: 'idle' }
+  | { status: 'loading' }
+  | { status: 'success'; summary: EarlyExitPreviewSummary }
+  | { status: 'error'; error: string }
+
+export default function MyCommitments() {
+  const router = useRouter()
+  const { address } = useWallet()
+
+  // State
+  const [searchQuery, setSearchQuery] = useState('')
+  const [statusFilter, setStatusFilter] = useState('All')
+  const [typeFilter, setTypeFilter] = useState('All')
+  const [sortBy, setSortBy] = useState('Newest')
+
+  const [earlyExitCommitmentId, setEarlyExitCommitmentId] = useState<string | null>(null)
+  const [isExportOpen, setIsExportOpen] = useState(false)
+  const [hasAcknowledged, setHasAcknowledged] = useState(false)
+  const [commitmentsList, setCommitmentsList] = useState<Commitment[]>(mockCommitments)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
   const [protocolConstants, setProtocolConstants] = useState<ProtocolConstants | null>(null)
   const [, setIsLoadingConstants] = useState(true)
   const [earlyExitPreview, setEarlyExitPreview] = useState<EarlyExitPreviewState>({ status: 'idle' })
-
-  useEffect(() => {
-    fetchProtocolConstants()
-      .then(setProtocolConstants)
-      .catch((err) => console.error('Failed to fetch protocol constants:', err))
-      .finally(() => setIsLoadingConstants(false))
-  }, [])
-
-  useEffect(() => {
-    if (process.env.NEXT_PUBLIC_USE_MOCKS === 'true') {
-      setIsLoading(true)
-      listCommitments()
-        .then(setCommitmentsList)
-        .finally(() => setIsLoading(false))
-    } else {
-      // Simulate loading for demo purposes
-      const timer = setTimeout(() => {
-        setIsLoading(false)
-      }, 1000)
-      return () => clearTimeout(timer)
-    }
-  }, [])
-
-  // Derived State
-  const filteredCommitments = useMemo(() => {
-    const filtered = commitmentsList.filter((c) => {
-      const matchesSearch = c.id.toLowerCase().includes(searchQuery.toLowerCase())
-      const matchesStatus = statusFilter === 'All' || c.status.toLowerCase() === statusFilter.toLowerCase()
-      const matchesType = typeFilter === 'All' || c.type.toLowerCase() === typeFilter.toLowerCase()
-      return matchesSearch && matchesStatus && matchesType
-    })
-
-    // Basic Sorting Logic
-    if (sortBy === 'ValueHighLow') {
-      filtered.sort((a, b) => Number(b.amount.replace(/,/g, '')) - Number(a.amount.replace(/,/g, '')))
-    } else if (sortBy === 'ValueLowHigh') {
-      filtered.sort((a, b) => Number(a.amount.replace(/,/g, '')) - Number(b.amount.replace(/,/g, '')))
-    } else if (sortBy === 'Newest') {
-      filtered.sort((a, b) => new Date(b.createdDate).getTime() - new Date(a.createdDate).getTime())
-    } else if (sortBy === 'Oldest') {
-      filtered.sort((a, b) => new Date(a.createdDate).getTime() - new Date(b.createdDate).getTime())
-    }
-
-    return filtered
-  }, [commitmentsList, searchQuery, statusFilter, typeFilter, sortBy])
-
-  const commitmentForEarlyExit = commitmentsList.find((c) => c.id === earlyExitCommitmentId)
-  const earlyExitPreviewCommitmentId = commitmentForEarlyExit?.id
-  const earlyExitPreviewAsset = commitmentForEarlyExit?.asset
-  const estimatedEarlyExitSummary = useMemo(() => {
-    if (!commitmentForEarlyExit) return null
-
-    let penaltyPercent = 10
-    if (protocolConstants?.penalties) {
-      const tier = protocolConstants.penalties.find(
-        (p) => p.type.toLowerCase() === commitmentForEarlyExit.type.toLowerCase()
-      )
-      if (tier) {
-        penaltyPercent = tier.earlyExitPenaltyPercent
-      }
-    } else {
-      // Fallback local calculations in case loading or error
-      const lowerType = commitmentForEarlyExit.type.toLowerCase()
-      if (lowerType === 'safe') penaltyPercent = 2
-      else if (lowerType === 'balanced') penaltyPercent = 3
-      else if (lowerType === 'aggressive') penaltyPercent = 5
-    }
-
-    return getEarlyExitValues(
-      commitmentForEarlyExit.amount,
-      commitmentForEarlyExit.asset,
-      penaltyPercent
-    )
-  }, [commitmentForEarlyExit, protocolConstants])
-
-  useEffect(() => {
-    if (!earlyExitPreviewCommitmentId || !earlyExitPreviewAsset) {
-      setEarlyExitPreview({ status: 'idle' })
-      return
-    }
-
-    let ignore = false
-    setEarlyExitPreview({ status: 'loading' })
-
-    fetchEarlyExitPreviewSummary(earlyExitPreviewCommitmentId, earlyExitPreviewAsset)
-      .then((summary) => {
-        if (!ignore) setEarlyExitPreview({ status: 'success', summary })
-      })
-      .catch((error) => {
-        if (!ignore) {
-          setEarlyExitPreview({
-            status: 'error',
-            error: error instanceof Error ? error.message : 'Unable to refresh live preview',
-          })
-        }
-      })
-
-    return () => {
-      ignore = true
-    }
-  }, [earlyExitPreviewAsset, earlyExitPreviewCommitmentId])
-
-  const earlyExitSummary =
-    earlyExitPreview.status === 'success'
-      ? earlyExitPreview.summary
-      : estimatedEarlyExitSummary
-
-  // Callbacks
-  const openEarlyExitModal = useCallback((id: string) => {
-    setSuccessMessage(null)
-    setEarlyExitCommitmentId(id)
-    setHasAcknowledged(false)
-  }, [])
-
-  const closeEarlyExitModal = useCallback(() => {
-    setEarlyExitCommitmentId(null)
-    setHasAcknowledged(false)
-  }, [])
-
-  const handleConfirmEarlyExit = useCallback(() => {
-    if (!earlyExitCommitmentId || !earlyExitSummary) return
-
-    const committed = commitmentsList.find((c) => c.id === earlyExitCommitmentId)
-    if (!committed) return
-
-    setCommitmentsList((current) =>
-      current.map((commitment) =>
-        commitment.id === earlyExitCommitmentId
-          ? { ...commitment, status: 'Early Exit' }
-          : commitment
-      )
-    )
-
-    setSuccessMessage(
-      `Early exit confirmed for ${committed.id}. ${earlyExitSummary.penaltyPercent} penalty applied; you will receive ${earlyExitSummary.netReceiveAmount}.`
-    )
-
-    closeEarlyExitModal()
-  }, [earlyExitCommitmentId, earlyExitSummary, commitmentsList, closeEarlyExitModal])
-
-  return (
-    <main id="main-content" className="min-h-screen bg-[#0a0a0a] flex flex-col">
-      <MyCommitmentsHeader
-        onBack={() => router.push('/')}
-        onCreateNew={() => router.push('/create')}
-        onExport={() => setIsExportOpen(true)}
-      />
-
-      {successMessage && (
-        <div className="mx-22 mt-4 rounded-[28px] border border-[#0ff0fc1a] bg-[#0ff0fc0d] px-6 py-4 text-[#e6fffe] shadow-[0_20px_60px_rgba(15,240,252,0.12)] max-[1024px]:mx-8 max-[640px]:mx-4">
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-            <p className="text-sm leading-6 text-white/90">{successMessage}</p>
-            <button
-              type="button"
-              onClick={() => setSuccessMessage(null)}
-              className="text-[13px] font-semibold uppercase tracking-[0.18em] text-[#0ff0fc] hover:text-white transition-colors"
-            >
-              Dismiss
-            </button>
-          </div>
-          <p className="mt-2 text-[13px] text-white/70">
-            This commitment has been updated to Early Exit status in your portfolio. Check the list for the new status and confirm any remaining settlement details.
-          </p>
-        </div>
-      )}
-
-      <div className="w-full flex-1 px-22 py-8 max-[1024px]:px-8 max-[640px]:px-4">
-        {isLoading ? (
-          <MyCommitmentsGridSkeleton
-            showStats={true}
-            showFilters={true}
-            cardCount={6}
-          />
-        ) : (
-          <>
-            <MyCommitmentsStats
-              totalActive={mockStats.totalActive}
-              totalCommittedValue={mockStats.totalCommittedValue}
-              avgComplianceScore={mockStats.avgComplianceScore}
-              totalFeesGenerated={mockStats.totalFeesGenerated}
-            />
-
-            <MyCommitmentsFilters
-              searchQuery={searchQuery}
-              onSearchChange={setSearchQuery}
-              status={statusFilter}
-              onStatusChange={setStatusFilter}
-              type={typeFilter}
-              onTypeChange={setTypeFilter}
-              sortBy={sortBy}
-              onSortByChange={setSortBy}
-            />
-
-            <MyCommitmentsGrid
-              commitments={filteredCommitments}
-              onDetails={(id) => router.push(`/commitments/${id}`)}
-              onAttestations={(id) => console.log('Attestations for', id)}
-              onEarlyExit={openEarlyExitModal}
-            />
-          </>
-        )}
-      </div>
-
-      {commitmentForEarlyExit && earlyExitSummary && (
-        <CommitmentEarlyExitModal
-          isOpen={true}
-          commitmentId={commitmentForEarlyExit.id}
-          originalAmount={`${commitmentForEarlyExit.amount} ${commitmentForEarlyExit.asset}`}
-          penaltyPercent={earlyExitSummary.penaltyPercent}
-          penaltyAmount={earlyExitSummary.penaltyAmount}
-          netReceiveAmount={earlyExitSummary.netReceiveAmount}
-          isPreviewLoading={earlyExitPreview.status === 'loading'}
-          previewError={earlyExitPreview.status === 'error' ? earlyExitPreview.error : null}
-          hasAcknowledged={hasAcknowledged}
-          onChangeAcknowledged={setHasAcknowledged}
-          onCancel={closeEarlyExitModal}
-          onConfirm={handleConfirmEarlyExit}
-          onClose={closeEarlyExitModal}
-        />
-      )}
-
-      <ExportCommitmentsModal
-        isOpen={isExportOpen}
-        onClose={() => setIsExportOpen(false)}
-        ownerAddress={address}
-      />
-    </main>
-  )
-}
+
+  useEffect(() => {
+    fetchProtocolConstants()
+      .then(setProtocolConstants)
+      .catch((err) => console.error('Failed to fetch protocol constants:', err))
+      .finally(() => setIsLoadingConstants(false))
+  }, [])
+
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_USE_MOCKS === 'true') {
+      setIsLoading(true)
+      listCommitments()
+        .then(setCommitmentsList)
+        .finally(() => setIsLoading(false))
+    } else {
+      // Simulate loading for demo purposes
+      const timer = setTimeout(() => {
+        setIsLoading(false)
+      }, 1000)
+      return () => clearTimeout(timer)
+    }
+  }, [])
+
+  // Derived State
+  const filteredCommitments = useMemo(() => {
+    const filtered = commitmentsList.filter((c) => {
+      const matchesSearch = c.id.toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesStatus = statusFilter === 'All' || c.status.toLowerCase() === statusFilter.toLowerCase()
+      const matchesType = typeFilter === 'All' || c.type.toLowerCase() === typeFilter.toLowerCase()
+      return matchesSearch && matchesStatus && matchesType
+    })
+
+    // Basic Sorting Logic
+    if (sortBy === 'ValueHighLow') {
+      filtered.sort((a, b) => Number(b.amount.replace(/,/g, '')) - Number(a.amount.replace(/,/g, '')))
+    } else if (sortBy === 'ValueLowHigh') {
+      filtered.sort((a, b) => Number(a.amount.replace(/,/g, '')) - Number(b.amount.replace(/,/g, '')))
+    } else if (sortBy === 'Newest') {
+      filtered.sort((a, b) => new Date(b.createdDate).getTime() - new Date(a.createdDate).getTime())
+    } else if (sortBy === 'Oldest') {
+      filtered.sort((a, b) => new Date(a.createdDate).getTime() - new Date(b.createdDate).getTime())
+    }
+
+    return filtered
+  }, [commitmentsList, searchQuery, statusFilter, typeFilter, sortBy])
+
+  const commitmentForEarlyExit = commitmentsList.find((c) => c.id === earlyExitCommitmentId)
+  const earlyExitPreviewCommitmentId = commitmentForEarlyExit?.id
+  const earlyExitPreviewAsset = commitmentForEarlyExit?.asset
+  const estimatedEarlyExitSummary = useMemo(() => {
+    if (!commitmentForEarlyExit) return null
+
+    let penaltyPercent = 10
+    if (protocolConstants?.penalties) {
+      const tier = protocolConstants.penalties.find(
+        (p) => p.type.toLowerCase() === commitmentForEarlyExit.type.toLowerCase()
+      )
+      if (tier) {
+        penaltyPercent = tier.earlyExitPenaltyPercent
+      }
+    } else {
+      // Fallback local calculations in case loading or error
+      const lowerType = commitmentForEarlyExit.type.toLowerCase()
+      if (lowerType === 'safe') penaltyPercent = 2
+      else if (lowerType === 'balanced') penaltyPercent = 3
+      else if (lowerType === 'aggressive') penaltyPercent = 5
+    }
+
+    return getEarlyExitValues(
+      commitmentForEarlyExit.amount,
+      commitmentForEarlyExit.asset,
+      penaltyPercent
+    )
+  }, [commitmentForEarlyExit, protocolConstants])
+
+  useEffect(() => {
+    if (!earlyExitPreviewCommitmentId || !earlyExitPreviewAsset) {
+      setEarlyExitPreview({ status: 'idle' })
+      return
+    }
+
+    let ignore = false
+    setEarlyExitPreview({ status: 'loading' })
+
+    fetchEarlyExitPreviewSummary(earlyExitPreviewCommitmentId, earlyExitPreviewAsset)
+      .then((summary) => {
+        if (!ignore) setEarlyExitPreview({ status: 'success', summary })
+      })
+      .catch((error) => {
+        if (!ignore) {
+          setEarlyExitPreview({
+            status: 'error',
+            error: error instanceof Error ? error.message : 'Unable to refresh live preview',
+          })
+        }
+      })
+
+    return () => {
+      ignore = true
+    }
+  }, [earlyExitPreviewAsset, earlyExitPreviewCommitmentId])
+
+  const earlyExitSummary =
+    earlyExitPreview.status === 'success'
+      ? earlyExitPreview.summary
+      : estimatedEarlyExitSummary
+
+  // Callbacks
+  const openEarlyExitModal = useCallback((id: string) => {
+    setSuccessMessage(null)
+    setEarlyExitCommitmentId(id)
+    setHasAcknowledged(false)
+  }, [])
+
+  const closeEarlyExitModal = useCallback(() => {
+    setEarlyExitCommitmentId(null)
+    setHasAcknowledged(false)
+  }, [])
+
+  const handleConfirmEarlyExit = useCallback(() => {
+    if (!earlyExitCommitmentId || !earlyExitSummary) return
+
+    const committed = commitmentsList.find((c) => c.id === earlyExitCommitmentId)
+    if (!committed) return
+
+    setCommitmentsList((current) =>
+      current.map((commitment) =>
+        commitment.id === earlyExitCommitmentId
+          ? { ...commitment, status: 'Early Exit' }
+          : commitment
+      )
+    )
+
+    setSuccessMessage(
+      `Early exit confirmed for ${committed.id}. ${earlyExitSummary.penaltyPercent} penalty applied; you will receive ${earlyExitSummary.netReceiveAmount}.`
+    )
+
+    closeEarlyExitModal()
+  }, [earlyExitCommitmentId, earlyExitSummary, commitmentsList, closeEarlyExitModal])
+
+  return (
+    <main id="main-content" className="min-h-screen bg-[#0a0a0a] flex flex-col">
+      <MyCommitmentsHeader
+        onBack={() => router.push('/')}
+        onCreateNew={() => router.push('/create')}
+        onExport={() => setIsExportOpen(true)}
+      />
+
+      {successMessage && (
+        <div className="mx-22 mt-4 rounded-[28px] border border-[#0ff0fc1a] bg-[#0ff0fc0d] px-6 py-4 text-[#e6fffe] shadow-[0_20px_60px_rgba(15,240,252,0.12)] max-[1024px]:mx-8 max-[640px]:mx-4">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-sm leading-6 text-white/90">{successMessage}</p>
+            <button
+              type="button"
+              onClick={() => setSuccessMessage(null)}
+              className="text-[13px] font-semibold uppercase tracking-[0.18em] text-[#0ff0fc] hover:text-white transition-colors"
+            >
+              Dismiss
+            </button>
+          </div>
+          <p className="mt-2 text-[13px] text-white/70">
+            This commitment has been updated to Early Exit status in your portfolio. Check the list for the new status and confirm any remaining settlement details.
+          </p>
+        </div>
+      )}
+
+      <div className="w-full flex-1 px-22 py-8 max-[1024px]:px-8 max-[640px]:px-4">
+        {isLoading ? (
+          <MyCommitmentsGridSkeleton
+            showStats={true}
+            showFilters={true}
+            cardCount={6}
+          />
+        ) : (
+          <>
+            <MyCommitmentsStats
+              totalActive={mockStats.totalActive}
+              totalCommittedValue={mockStats.totalCommittedValue}
+              avgComplianceScore={mockStats.avgComplianceScore}
+              totalFeesGenerated={mockStats.totalFeesGenerated}
+            />
+
+            <MyCommitmentsFilters
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              status={statusFilter}
+              onStatusChange={setStatusFilter}
+              type={typeFilter}
+              onTypeChange={setTypeFilter}
+              sortBy={sortBy}
+              onSortByChange={setSortBy}
+            />
+
+            <MyCommitmentsGrid
+              commitments={filteredCommitments}
+              onDetails={(id) => router.push(`/commitments/${id}`)}
+              onAttestations={(id) => console.log('Attestations for', id)}
+              onEarlyExit={openEarlyExitModal}
+            />
+          </>
+        )}
+      </div>
+
+      {commitmentForEarlyExit && earlyExitSummary && (
+        <CommitmentEarlyExitModal
+          isOpen={true}
+          commitmentId={commitmentForEarlyExit.id}
+          originalAmount={`${commitmentForEarlyExit.amount} ${commitmentForEarlyExit.asset}`}
+          penaltyPercent={earlyExitSummary.penaltyPercent}
+          penaltyAmount={earlyExitSummary.penaltyAmount}
+          netReceiveAmount={earlyExitSummary.netReceiveAmount}
+          isPreviewLoading={earlyExitPreview.status === 'loading'}
+          previewError={earlyExitPreview.status === 'error' ? earlyExitPreview.error : null}
+          hasAcknowledged={hasAcknowledged}
+          onChangeAcknowledged={setHasAcknowledged}
+          onCancel={closeEarlyExitModal}
+          onConfirm={handleConfirmEarlyExit}
+          onClose={closeEarlyExitModal}
+        />
+      )}
+
+      <ExportCommitmentsModal
+        isOpen={isExportOpen}
+        onClose={() => setIsExportOpen(false)}
+        ownerAddress={address}
+      />
+    </main>
+  )
+}

From 42dbda29764d6d9ce5d6b8eaf8d0eb89c152ce93 Mon Sep 17 00:00:00 2001
From: xx7412421-cloud <xx7412421@gmail.com>
Date: Sun, 21 Jun 2026 19:32:17 +0800
Subject: [PATCH 07/10] chore: normalize early exit preview file endings

---
 .../CommitmentEarlyExitModal.tsx              | 556 +++++++++---------
 1 file changed, 278 insertions(+), 278 deletions(-)

diff --git a/src/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal.tsx b/src/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal.tsx
index 8bca1d5..f062b04 100644
--- a/src/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal.tsx
+++ b/src/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal.tsx
@@ -1,278 +1,278 @@
-'use client';
-
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { AlertTriangle, X, Info } from 'lucide-react';
-
-export interface CommitmentEarlyExitModalProps {
-  isOpen: boolean;
-  commitmentId: string;
-  originalAmount: string;
-  penaltyPercent: string;
-  penaltyAmount: string;
-  netReceiveAmount: string;
-  hasAcknowledged: boolean;
-  isPreviewLoading?: boolean;
-  previewError?: string | null;
-  onChangeAcknowledged: (value: boolean) => void;
-  onCancel: () => void;
-  onConfirm: () => void;
-  onClose?: () => void;
-}
-
-function formatScreenReaderText(val: string): string {
-  return val
-    .replace(/\bXLM\b/gi, 'Stellar Lumens')
-    .replace(/\bUSDC\b/gi, 'USD Coin')
-    .replace(/%/g, ' percent')
-    .replace(/-/g, 'minus ')
-}
-
-export default function CommitmentEarlyExitModal({
-  isOpen,
-  commitmentId,
-  originalAmount,
-  penaltyPercent,
-  penaltyAmount,
-  netReceiveAmount,
-  hasAcknowledged,
-  isPreviewLoading = false,
-  previewError = null,
-  onChangeAcknowledged,
-  onCancel,
-  onConfirm,
-  onClose,
-}: CommitmentEarlyExitModalProps) {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    return () => setMounted(false);
-  }, []);
-
-  const [confirmationInput, setConfirmationInput] = useState('')
-  const hasTypedConfirmation = confirmationInput.trim() === commitmentId
-  const canConfirm = hasAcknowledged && hasTypedConfirmation && !isPreviewLoading
-
-  const handleClose = useCallback(() => {
-    (onClose ?? onCancel)();
-  }, [onClose, onCancel]);
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') handleClose();
-
-      // Focus trap
-      if (e.key === 'Tab' && modalRef.current) {
-        const focusableElements = modalRef.current.querySelectorAll(
-          'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        const first = focusableElements[0] as HTMLElement;
-        const last = focusableElements[focusableElements.length - 1] as HTMLElement;
-
-        if (e.shiftKey && document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    document.body.style.overflow = 'hidden';
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.body.style.overflow = '';
-    };
-  }, [isOpen, handleClose]);
-
-  if (!isOpen || !mounted) return null;
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-9999 flex items-center justify-center bg-black/80 backdrop-blur-md animate-in fade-in duration-300"
-      onClick={(e) => e.target === e.currentTarget && handleClose()}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="early-exit-title"
-    >
-      <div
-        ref={modalRef}
-        className="w-full sm:max-w-[520px] mt-auto sm:mt-0 bg-[#0A0A0A] border-t sm:border border-[#FF8A04]/30 rounded-t-[32px] sm:rounded-[32px] flex flex-col relative shadow-[0_0_60px_rgba(255,138,4,0.15)] animate-in slide-in-from-bottom-8 duration-500 ease-out"
-      >
-        {/* Header - Consistency with Details modal */}
-        <div className="px-6 sm:px-10 py-8 flex items-start justify-between">
-          <div className="flex items-center gap-5">
-            <div className="w-[52px] h-[52px] sm:w-[60px] sm:h-[60px] rounded-[18px] bg-[#FF8A04]/10 border border-[#FF8A04]/20 flex items-center justify-center">
-              <AlertTriangle className="w-6 h-6 sm:w-7 sm:h-7 text-[#FF8A04]" strokeWidth={2.5} />
-            </div>
-            <div>
-              <h2 id="early-exit-title" className="text-[20px] sm:text-[24px] font-bold tracking-tight text-white leading-tight">
-                Early Exit Warning
-              </h2>
-              <p className="text-[13px] sm:text-[14px] text-white/50 font-medium mt-1 leading-snug">
-                This action is irreversible and carries penalties.
-              </p>
-            </div>
-          </div>
-          <button
-            onClick={handleClose}
-            className="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-all border border-white/10"
-            aria-label="Close modal"
-          >
-            <X className="w-5 h-5 text-white/50" />
-          </button>
-        </div>
-
-        {/* Content Body */}
-        <div className="px-6 sm:px-10 pb-8">
-          {/* Summary Table - Semantic financial breakdown for accessibility */}
-          {isPreviewLoading && (
-            <div
-              role="status"
-              aria-live="polite"
-              className="mb-4 rounded-2xl border border-[#0FF0FC]/20 bg-[#0FF0FC]/10 px-4 py-3 text-[13px] font-semibold text-[#0FF0FC]"
-            >
-              Fetching live early-exit preview...
-            </div>
-          )}
-
-          {previewError && (
-            <div
-              role="alert"
-              className="mb-4 rounded-2xl border border-[#FF8A04]/25 bg-[#FF8A04]/10 px-4 py-3 text-[13px] font-semibold text-[#FFB15A]"
-            >
-              Could not refresh the live preview. Showing estimated local figures instead. {previewError}
-            </div>
-          )}
-
-          <table className="w-full text-left border-collapse mb-8" aria-label="Early exit penalty breakdown">
-            <caption className="sr-only">Financial breakdown of early exit penalty and final refund amount</caption>
-            <thead>
-              <tr className="border-b border-white/10">
-                <th scope="col" className="text-[12px] font-bold uppercase tracking-wider text-white/40 pb-3">Item</th>
-                <th scope="col" className="text-[12px] font-bold uppercase tracking-wider text-white/40 pb-3 text-right">Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              {/* Commitment ID */}
-              <tr className="border-b border-white/5">
-                <th scope="row" className="py-3 text-[14px] text-white/40 font-medium">Commitment ID</th>
-                <td className="py-3 text-[14px] font-mono text-white/80 font-bold text-right" aria-label={`Commitment ID ${commitmentId}`}>
-                  {commitmentId.slice(0, 8)}...{commitmentId.slice(-6)}
-                </td>
-              </tr>
-              {/* Before Early Exit */}
-              <tr className="border-b border-white/5">
-                <th scope="row" className="py-3 text-[14px] text-white/40 font-medium">Before Early Exit (Committed Amount)</th>
-                <td className="py-3 text-[14px] text-white font-bold text-right" aria-label={`Committed amount: ${formatScreenReaderText(originalAmount)}`}>
-                  {originalAmount}
-                </td>
-              </tr>
-              {/* Penalty Rate */}
-              <tr className="border-b border-white/5">
-                <th scope="row" className="py-3 text-[14px] text-[#FF8A04]/80 font-medium">Penalty Rate</th>
-                <td className="py-3 text-[14px] text-[#FF8A04] font-bold text-right" aria-label={`Penalty rate: ${formatScreenReaderText(penaltyPercent)}`}>
-                  {penaltyPercent}
-                </td>
-              </tr>
-              {/* Penalty Deduction */}
-              <tr className="border-b border-white/5">
-                <th scope="row" className="py-3 text-[14px] text-[#FF8A04]/80 font-medium">Penalty Deduction</th>
-                <td className="py-3 text-[14px] text-[#FF8A04] font-bold text-right" aria-label={`Penalty deduction: minus ${formatScreenReaderText(penaltyAmount)}`}>
-                  -{penaltyAmount}
-                </td>
-              </tr>
-              {/* After Early Exit */}
-              <tr>
-                <th scope="row" className="py-4 text-[15px] text-white font-bold tracking-tight">After Early Exit (Net Refund)</th>
-                <td className="py-4 text-[18px] text-[#0FF0FC] font-extrabold tracking-tight text-right" aria-label={`Net refund amount: ${formatScreenReaderText(netReceiveAmount)}`}>
-                  {netReceiveAmount}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-
-          {/* Important Notice Block */}
-          <div className="bg-[#FF8A04]/10 border border-[#FF8A04]/20 rounded-2xl p-5 mb-8 group hover:bg-[#FF8A04]/15 transition-colors">
-            <div className="flex items-center gap-2.5 mb-4 text-[#FF8A04]">
-              <Info className="w-4 h-4" />
-              <span className="text-[13px] font-bold uppercase tracking-widest">Important consequences</span>
-            </div>
-            <ul className="space-y-2.5">
-              {[
-                'You will lose the penalty amount shown above immediately.',
-                'The commitment will be recorded as an Early Exit on-chain.',
-                'This action cannot be reversed or modified.',
-                'You forfeit future yield and continue to hold reduced value.'
-              ].map((text, i) => (
-                <li key={i} className="flex items-start gap-2.5 leading-snug">
-                  <div className="w-1.5 h-1.5 rounded-full bg-[#FF8A04]/40 mt-1.5 shrink-0" />
-                  <span className="text-[13px] text-white/70 font-medium">{text}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          {/* Acknowledgment Checkbox */}
-          <label className="flex items-start gap-4 p-4 bg-white/[0.02] border border-white/[0.05] rounded-2xl cursor-pointer hover:bg-white/[0.04] transition-all group active:scale-[0.99] mb-4">
-            <div className="relative flex items-center">
-              <input
-                type="checkbox"
-                className="peer h-5 w-5 cursor-pointer appearance-none rounded-md border border-white/20 bg-white/5 transition-all checked:border-[#FF8A04] checked:bg-[#FF8A04]"
-                checked={hasAcknowledged}
-                onChange={(e) => onChangeAcknowledged(e.target.checked)}
-              />
-              <X className="absolute h-3.5 w-3.5 text-black opacity-0 peer-checked:opacity-100 left-0.5 top-0.5 pointer-events-none" strokeWidth={4} />
-            </div>
-            <span className="text-[14px] text-white/70 font-medium leading-snug select-none group-hover:text-white transition-colors">
-              I understand this will record an early exit on-chain and deduct {penaltyPercent} from the committed amount.
-            </span>
-          </label>
-
-          <div className="mb-6 rounded-2xl border border-white/[0.04] bg-white/[0.02] p-4">
-            <label htmlFor="confirmation-input" className="block text-[13px] font-semibold text-white/60 mb-2">
-              Type the commitment ID to confirm
-            </label>
-            <input
-              id="confirmation-input"
-              type="text"
-              value={confirmationInput}
-              onChange={(e) => setConfirmationInput(e.target.value)}
-              className="w-full rounded-2xl border border-white/10 bg-[#050505] px-4 py-3 text-white placeholder:text-white/30 outline-none focus:border-[#FF8A04] focus:ring-2 focus:ring-[#FF8A04]/20"
-              placeholder="Enter commitment ID exactly"
-              autoComplete="off"
-            />
-            <p className="mt-2 text-[12px] text-white/40">
-              Confirming this action requires the exact commitment ID: <span className="font-mono text-[#0FF0FC]">{commitmentId}</span>
-            </p>
-          </div>
-
-          {/* Action Buttons - Standardized placement */}
-          <div className="flex flex-col sm:flex-row gap-3">
-            <button
-              onClick={onCancel}
-              className="flex-1 bg-white/5 hover:bg-white/10 border border-white/10 rounded-[18px] py-4 text-[15px] font-bold text-white transition-all order-2 sm:order-1 active:scale-[0.98]"
-            >
-              Cancel
-            </button>
-            <button
-              disabled={!canConfirm}
-              onClick={onConfirm}
-              className="flex-[1.5] bg-[#FF8A04] disabled:grayscale disabled:opacity-30 hover:bg-[#FF8A04]/90 text-black rounded-[18px] py-4 text-[15px] font-bold transition-all order-1 sm:order-2 shadow-[0_0_30px_rgba(255,138,4,0.25)] active:scale-[0.98]"
-            >
-              Confirm Early Exit
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body
-  )
-}
+'use client';
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AlertTriangle, X, Info } from 'lucide-react';
+
+export interface CommitmentEarlyExitModalProps {
+  isOpen: boolean;
+  commitmentId: string;
+  originalAmount: string;
+  penaltyPercent: string;
+  penaltyAmount: string;
+  netReceiveAmount: string;
+  hasAcknowledged: boolean;
+  isPreviewLoading?: boolean;
+  previewError?: string | null;
+  onChangeAcknowledged: (value: boolean) => void;
+  onCancel: () => void;
+  onConfirm: () => void;
+  onClose?: () => void;
+}
+
+function formatScreenReaderText(val: string): string {
+  return val
+    .replace(/\bXLM\b/gi, 'Stellar Lumens')
+    .replace(/\bUSDC\b/gi, 'USD Coin')
+    .replace(/%/g, ' percent')
+    .replace(/-/g, 'minus ')
+}
+
+export default function CommitmentEarlyExitModal({
+  isOpen,
+  commitmentId,
+  originalAmount,
+  penaltyPercent,
+  penaltyAmount,
+  netReceiveAmount,
+  hasAcknowledged,
+  isPreviewLoading = false,
+  previewError = null,
+  onChangeAcknowledged,
+  onCancel,
+  onConfirm,
+  onClose,
+}: CommitmentEarlyExitModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  const [confirmationInput, setConfirmationInput] = useState('')
+  const hasTypedConfirmation = confirmationInput.trim() === commitmentId
+  const canConfirm = hasAcknowledged && hasTypedConfirmation && !isPreviewLoading
+
+  const handleClose = useCallback(() => {
+    (onClose ?? onCancel)();
+  }, [onClose, onCancel]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') handleClose();
+
+      // Focus trap
+      if (e.key === 'Tab' && modalRef.current) {
+        const focusableElements = modalRef.current.querySelectorAll(
+          'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        const first = focusableElements[0] as HTMLElement;
+        const last = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [isOpen, handleClose]);
+
+  if (!isOpen || !mounted) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-9999 flex items-center justify-center bg-black/80 backdrop-blur-md animate-in fade-in duration-300"
+      onClick={(e) => e.target === e.currentTarget && handleClose()}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="early-exit-title"
+    >
+      <div
+        ref={modalRef}
+        className="w-full sm:max-w-[520px] mt-auto sm:mt-0 bg-[#0A0A0A] border-t sm:border border-[#FF8A04]/30 rounded-t-[32px] sm:rounded-[32px] flex flex-col relative shadow-[0_0_60px_rgba(255,138,4,0.15)] animate-in slide-in-from-bottom-8 duration-500 ease-out"
+      >
+        {/* Header - Consistency with Details modal */}
+        <div className="px-6 sm:px-10 py-8 flex items-start justify-between">
+          <div className="flex items-center gap-5">
+            <div className="w-[52px] h-[52px] sm:w-[60px] sm:h-[60px] rounded-[18px] bg-[#FF8A04]/10 border border-[#FF8A04]/20 flex items-center justify-center">
+              <AlertTriangle className="w-6 h-6 sm:w-7 sm:h-7 text-[#FF8A04]" strokeWidth={2.5} />
+            </div>
+            <div>
+              <h2 id="early-exit-title" className="text-[20px] sm:text-[24px] font-bold tracking-tight text-white leading-tight">
+                Early Exit Warning
+              </h2>
+              <p className="text-[13px] sm:text-[14px] text-white/50 font-medium mt-1 leading-snug">
+                This action is irreversible and carries penalties.
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={handleClose}
+            className="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-all border border-white/10"
+            aria-label="Close modal"
+          >
+            <X className="w-5 h-5 text-white/50" />
+          </button>
+        </div>
+
+        {/* Content Body */}
+        <div className="px-6 sm:px-10 pb-8">
+          {/* Summary Table - Semantic financial breakdown for accessibility */}
+          {isPreviewLoading && (
+            <div
+              role="status"
+              aria-live="polite"
+              className="mb-4 rounded-2xl border border-[#0FF0FC]/20 bg-[#0FF0FC]/10 px-4 py-3 text-[13px] font-semibold text-[#0FF0FC]"
+            >
+              Fetching live early-exit preview...
+            </div>
+          )}
+
+          {previewError && (
+            <div
+              role="alert"
+              className="mb-4 rounded-2xl border border-[#FF8A04]/25 bg-[#FF8A04]/10 px-4 py-3 text-[13px] font-semibold text-[#FFB15A]"
+            >
+              Could not refresh the live preview. Showing estimated local figures instead. {previewError}
+            </div>
+          )}
+
+          <table className="w-full text-left border-collapse mb-8" aria-label="Early exit penalty breakdown">
+            <caption className="sr-only">Financial breakdown of early exit penalty and final refund amount</caption>
+            <thead>
+              <tr className="border-b border-white/10">
+                <th scope="col" className="text-[12px] font-bold uppercase tracking-wider text-white/40 pb-3">Item</th>
+                <th scope="col" className="text-[12px] font-bold uppercase tracking-wider text-white/40 pb-3 text-right">Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {/* Commitment ID */}
+              <tr className="border-b border-white/5">
+                <th scope="row" className="py-3 text-[14px] text-white/40 font-medium">Commitment ID</th>
+                <td className="py-3 text-[14px] font-mono text-white/80 font-bold text-right" aria-label={`Commitment ID ${commitmentId}`}>
+                  {commitmentId.slice(0, 8)}...{commitmentId.slice(-6)}
+                </td>
+              </tr>
+              {/* Before Early Exit */}
+              <tr className="border-b border-white/5">
+                <th scope="row" className="py-3 text-[14px] text-white/40 font-medium">Before Early Exit (Committed Amount)</th>
+                <td className="py-3 text-[14px] text-white font-bold text-right" aria-label={`Committed amount: ${formatScreenReaderText(originalAmount)}`}>
+                  {originalAmount}
+                </td>
+              </tr>
+              {/* Penalty Rate */}
+              <tr className="border-b border-white/5">
+                <th scope="row" className="py-3 text-[14px] text-[#FF8A04]/80 font-medium">Penalty Rate</th>
+                <td className="py-3 text-[14px] text-[#FF8A04] font-bold text-right" aria-label={`Penalty rate: ${formatScreenReaderText(penaltyPercent)}`}>
+                  {penaltyPercent}
+                </td>
+              </tr>
+              {/* Penalty Deduction */}
+              <tr className="border-b border-white/5">
+                <th scope="row" className="py-3 text-[14px] text-[#FF8A04]/80 font-medium">Penalty Deduction</th>
+                <td className="py-3 text-[14px] text-[#FF8A04] font-bold text-right" aria-label={`Penalty deduction: minus ${formatScreenReaderText(penaltyAmount)}`}>
+                  -{penaltyAmount}
+                </td>
+              </tr>
+              {/* After Early Exit */}
+              <tr>
+                <th scope="row" className="py-4 text-[15px] text-white font-bold tracking-tight">After Early Exit (Net Refund)</th>
+                <td className="py-4 text-[18px] text-[#0FF0FC] font-extrabold tracking-tight text-right" aria-label={`Net refund amount: ${formatScreenReaderText(netReceiveAmount)}`}>
+                  {netReceiveAmount}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          {/* Important Notice Block */}
+          <div className="bg-[#FF8A04]/10 border border-[#FF8A04]/20 rounded-2xl p-5 mb-8 group hover:bg-[#FF8A04]/15 transition-colors">
+            <div className="flex items-center gap-2.5 mb-4 text-[#FF8A04]">
+              <Info className="w-4 h-4" />
+              <span className="text-[13px] font-bold uppercase tracking-widest">Important consequences</span>
+            </div>
+            <ul className="space-y-2.5">
+              {[
+                'You will lose the penalty amount shown above immediately.',
+                'The commitment will be recorded as an Early Exit on-chain.',
+                'This action cannot be reversed or modified.',
+                'You forfeit future yield and continue to hold reduced value.'
+              ].map((text, i) => (
+                <li key={i} className="flex items-start gap-2.5 leading-snug">
+                  <div className="w-1.5 h-1.5 rounded-full bg-[#FF8A04]/40 mt-1.5 shrink-0" />
+                  <span className="text-[13px] text-white/70 font-medium">{text}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Acknowledgment Checkbox */}
+          <label className="flex items-start gap-4 p-4 bg-white/[0.02] border border-white/[0.05] rounded-2xl cursor-pointer hover:bg-white/[0.04] transition-all group active:scale-[0.99] mb-4">
+            <div className="relative flex items-center">
+              <input
+                type="checkbox"
+                className="peer h-5 w-5 cursor-pointer appearance-none rounded-md border border-white/20 bg-white/5 transition-all checked:border-[#FF8A04] checked:bg-[#FF8A04]"
+                checked={hasAcknowledged}
+                onChange={(e) => onChangeAcknowledged(e.target.checked)}
+              />
+              <X className="absolute h-3.5 w-3.5 text-black opacity-0 peer-checked:opacity-100 left-0.5 top-0.5 pointer-events-none" strokeWidth={4} />
+            </div>
+            <span className="text-[14px] text-white/70 font-medium leading-snug select-none group-hover:text-white transition-colors">
+              I understand this will record an early exit on-chain and deduct {penaltyPercent} from the committed amount.
+            </span>
+          </label>
+
+          <div className="mb-6 rounded-2xl border border-white/[0.04] bg-white/[0.02] p-4">
+            <label htmlFor="confirmation-input" className="block text-[13px] font-semibold text-white/60 mb-2">
+              Type the commitment ID to confirm
+            </label>
+            <input
+              id="confirmation-input"
+              type="text"
+              value={confirmationInput}
+              onChange={(e) => setConfirmationInput(e.target.value)}
+              className="w-full rounded-2xl border border-white/10 bg-[#050505] px-4 py-3 text-white placeholder:text-white/30 outline-none focus:border-[#FF8A04] focus:ring-2 focus:ring-[#FF8A04]/20"
+              placeholder="Enter commitment ID exactly"
+              autoComplete="off"
+            />
+            <p className="mt-2 text-[12px] text-white/40">
+              Confirming this action requires the exact commitment ID: <span className="font-mono text-[#0FF0FC]">{commitmentId}</span>
+            </p>
+          </div>
+
+          {/* Action Buttons - Standardized placement */}
+          <div className="flex flex-col sm:flex-row gap-3">
+            <button
+              onClick={onCancel}
+              className="flex-1 bg-white/5 hover:bg-white/10 border border-white/10 rounded-[18px] py-4 text-[15px] font-bold text-white transition-all order-2 sm:order-1 active:scale-[0.98]"
+            >
+              Cancel
+            </button>
+            <button
+              disabled={!canConfirm}
+              onClick={onConfirm}
+              className="flex-[1.5] bg-[#FF8A04] disabled:grayscale disabled:opacity-30 hover:bg-[#FF8A04]/90 text-black rounded-[18px] py-4 text-[15px] font-bold transition-all order-1 sm:order-2 shadow-[0_0_30px_rgba(255,138,4,0.25)] active:scale-[0.98]"
+            >
+              Confirm Early Exit
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

From ee1b13349fb6f089ec0622d98dfc3909da77d761 Mon Sep 17 00:00:00 2001
From: xx7412421-cloud <xx7412421@gmail.com>
Date: Sun, 21 Jun 2026 19:32:18 +0800
Subject: [PATCH 08/10] chore: normalize early exit preview file endings


From b7ae67591f2fb98266d82585d28c12762133b241 Mon Sep 17 00:00:00 2001
From: xx7412421-cloud <xx7412421@gmail.com>
Date: Sun, 21 Jun 2026 19:32:19 +0800
Subject: [PATCH 09/10] chore: normalize early exit preview file endings

---
 .../CommitmentEarlyExitModal.test.tsx         | 606 +++++++++---------
 1 file changed, 303 insertions(+), 303 deletions(-)

diff --git a/tests/components/CommitmentEarlyExitModal.test.tsx b/tests/components/CommitmentEarlyExitModal.test.tsx
index 1b17ae5..df65371 100644
--- a/tests/components/CommitmentEarlyExitModal.test.tsx
+++ b/tests/components/CommitmentEarlyExitModal.test.tsx
@@ -1,303 +1,303 @@
-// @vitest-environment happy-dom
-import React from 'react';
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import CommitmentEarlyExitModal from '@/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal';
-
-describe('CommitmentEarlyExitModal', () => {
-  const defaultProps = {
-    isOpen: true,
-    commitmentId: 'CMT-TEST123',
-    originalAmount: '50,000 XLM',
-    penaltyPercent: '2%',
-    penaltyAmount: '1,000 XLM',
-    netReceiveAmount: '49,000 XLM',
-    hasAcknowledged: false,
-    onChangeAcknowledged: vi.fn(),
-    onCancel: vi.fn(),
-    onConfirm: vi.fn(),
-    onClose: vi.fn(),
-  };
-
-  it('renders nothing when isOpen is false', () => {
-    const { container } = render(
-      <CommitmentEarlyExitModal {...defaultProps} isOpen={false} />
-    );
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders the modal header and informational notice when open', () => {
-    render(<CommitmentEarlyExitModal {...defaultProps} />);
-    
-    // Header check
-    expect(screen.getByText('Early Exit Warning')).toBeInTheDocument();
-    expect(screen.getByText('This action is irreversible and carries penalties.')).toBeInTheDocument();
-    
-    // Notice check
-    expect(screen.getByText('Important consequences')).toBeInTheDocument();
-    expect(screen.getByText('You will lose the penalty amount shown above immediately.')).toBeInTheDocument();
-  });
-
-  describe('accessibility and semantic markup', () => {
-    it('contains a semantic table with a descriptive screen-reader caption', () => {
-      render(<CommitmentEarlyExitModal {...defaultProps} />);
-      
-      const table = screen.getByRole('table');
-      expect(table).toBeInTheDocument();
-      
-      // Caption check
-      const caption = table.querySelector('caption');
-      expect(caption).toBeInTheDocument();
-      expect(caption).toHaveTextContent('Financial breakdown of early exit penalty and final refund amount');
-    });
-
-    it('has proper scope attributes on table headers for row and col structure', () => {
-      render(<CommitmentEarlyExitModal {...defaultProps} />);
-      
-      const table = screen.getByRole('table');
-      
-      // Column headers
-      const colHeaders = table.querySelectorAll('th[scope="col"]');
-      expect(colHeaders.length).toBe(2);
-      expect(colHeaders[0]).toHaveTextContent('Item');
-      expect(colHeaders[1]).toHaveTextContent('Value');
-      
-      // Row headers
-      const rowHeaders = table.querySelectorAll('th[scope="row"]');
-      expect(rowHeaders.length).toBe(5);
-      expect(rowHeaders[0]).toHaveTextContent('Commitment ID');
-      expect(rowHeaders[1]).toHaveTextContent('Before Early Exit (Committed Amount)');
-      expect(rowHeaders[2]).toHaveTextContent('Penalty Rate');
-      expect(rowHeaders[3]).toHaveTextContent('Penalty Deduction');
-      expect(rowHeaders[4]).toHaveTextContent('After Early Exit (Net Refund)');
-    });
-
-    it('applies accessible screen reader labels spelling out units and currency codes', () => {
-      render(<CommitmentEarlyExitModal {...defaultProps} />);
-      
-      // Check original amount cell has aria-label spelling out XLM
-      const originalAmountCell = screen.getByLabelText('Committed amount: 50,000 Stellar Lumens');
-      expect(originalAmountCell).toBeInTheDocument();
-      expect(originalAmountCell).toHaveTextContent('50,000 XLM');
-
-      // Check penalty percentage cell has aria-label spelling out percent
-      const penaltyPercentCell = screen.getByLabelText('Penalty rate: 2 percent');
-      expect(penaltyPercentCell).toBeInTheDocument();
-      expect(penaltyPercentCell).toHaveTextContent('2%');
-
-      // Check penalty amount cell has aria-label spelling out negative prefix and XLM
-      const penaltyAmountCell = screen.getByLabelText('Penalty deduction: minus 1,000 Stellar Lumens');
-      expect(penaltyAmountCell).toBeInTheDocument();
-      expect(penaltyAmountCell).toHaveTextContent('-1,000 XLM');
-
-      // Check net refund cell has aria-label spelling out XLM
-      const netRefundCell = screen.getByLabelText('Net refund amount: 49,000 Stellar Lumens');
-      expect(netRefundCell).toBeInTheDocument();
-      expect(netRefundCell).toHaveTextContent('49,000 XLM');
-    });
-  });
-
-  describe('user interactions and confirmation validation', () => {
-    it('disables the confirm button by default', () => {
-      render(<CommitmentEarlyExitModal {...defaultProps} />);
-      
-      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
-      expect(confirmButton).toBeDisabled();
-    });
-
-    it('triggers onChangeAcknowledged callback when clicking acknowledgment checkbox', () => {
-      const onChangeAcknowledged = vi.fn();
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          onChangeAcknowledged={onChangeAcknowledged}
-        />
-      );
-      
-      const checkbox = screen.getByRole('checkbox');
-      fireEvent.click(checkbox);
-      
-      expect(onChangeAcknowledged).toHaveBeenCalledWith(true);
-    });
-
-    it('enables the confirm button when both acknowledgement and commitment ID typing are satisfied', () => {
-      const { rerender } = render(
-        <CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={false} />
-      );
-      
-      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
-      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
-      
-      // Action 1: Type the correct ID
-      fireEvent.change(input, { target: { value: 'CMT-TEST123' } });
-      expect(confirmButton).toBeDisabled(); // still disabled because hasAcknowledged is false
-      
-      // Action 2: Receive acknowledgment prop as true
-      rerender(<CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={true} />);
-      
-      // Type matching ID again since input value state is local to render lifecycle
-      fireEvent.change(screen.getByPlaceholderText(/Enter commitment ID exactly/i), {
-        target: { value: 'CMT-TEST123' },
-      });
-      
-      expect(screen.getByRole('button', { name: /Confirm Early Exit/i })).not.toBeDisabled();
-    });
-
-    it('remains disabled if user typed the wrong commitment ID', () => {
-      render(<CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={true} />);
-      
-      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
-      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
-      
-      fireEvent.change(input, { target: { value: 'WRONG-ID-999' } });
-      
-      expect(confirmButton).toBeDisabled();
-    });
-
-    it('calls onCancel or onClose when appropriate buttons are clicked', () => {
-      const onCancel = vi.fn();
-      const onClose = vi.fn();
-      
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          onCancel={onCancel}
-          onClose={onClose}
-        />
-      );
-      
-      // Cancel button click
-      fireEvent.click(screen.getByRole('button', { name: /Cancel/i }));
-      expect(onCancel).toHaveBeenCalled();
-      
-      // Close button (X) click
-      fireEvent.click(screen.getByRole('button', { name: /Close modal/i }));
-      expect(onClose).toHaveBeenCalled();
-    });
-
-    it('calls onConfirm when confirm button is clicked', () => {
-      const onConfirm = vi.fn();
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          hasAcknowledged={true}
-          onConfirm={onConfirm}
-        />
-      );
-      
-      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
-      fireEvent.change(input, { target: { value: 'CMT-TEST123' } });
-      
-      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
-      fireEvent.click(confirmButton);
-      
-      expect(onConfirm).toHaveBeenCalled();
-    });
-
-    it('keeps confirmation disabled while live preview is loading', () => {
-      const onConfirm = vi.fn();
-
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          hasAcknowledged={true}
-          isPreviewLoading={true}
-          onConfirm={onConfirm}
-        />
-      );
-
-      fireEvent.change(screen.getByPlaceholderText(/Enter commitment ID exactly/i), {
-        target: { value: 'CMT-TEST123' },
-      });
-
-      expect(screen.getByRole('status')).toHaveTextContent('Fetching live early-exit preview');
-      expect(screen.getByRole('button', { name: /Confirm Early Exit/i })).toBeDisabled();
-    });
-
-    it('shows a non-blocking live preview error message', () => {
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          previewError="Live preview failed with status 503"
-        />
-      );
-
-      expect(screen.getByRole('alert')).toHaveTextContent(
-        'Could not refresh the live preview. Showing estimated local figures instead. Live preview failed with status 503'
-      );
-    });
-  });
-
-  describe('penalty preview calculations per risk tier', () => {
-    it('asserts correct rendering and labels for Safe (2%) tier calculations', () => {
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          originalAmount="50,000 XLM"
-          penaltyPercent="2%"
-          penaltyAmount="1,000 XLM"
-          netReceiveAmount="49,000 XLM"
-        />
-      );
-
-      // Value text matchers
-      expect(screen.getByLabelText('Committed amount: 50,000 Stellar Lumens')).toHaveTextContent('50,000 XLM');
-      expect(screen.getByLabelText('Penalty rate: 2 percent')).toHaveTextContent('2%');
-      expect(screen.getByLabelText('Penalty deduction: minus 1,000 Stellar Lumens')).toHaveTextContent('-1,000 XLM');
-      expect(screen.getByLabelText('Net refund amount: 49,000 Stellar Lumens')).toHaveTextContent('49,000 XLM');
-    });
-
-    it('asserts correct rendering and labels for Balanced (3%) tier calculations', () => {
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          originalAmount="100,000 USDC"
-          penaltyPercent="3%"
-          penaltyAmount="3,000 USDC"
-          netReceiveAmount="97,000 USDC"
-        />
-      );
-
-      // Value text matchers
-      expect(screen.getByLabelText('Committed amount: 100,000 USD Coin')).toHaveTextContent('100,000 USDC');
-      expect(screen.getByLabelText('Penalty rate: 3 percent')).toHaveTextContent('3%');
-      expect(screen.getByLabelText('Penalty deduction: minus 3,000 USD Coin')).toHaveTextContent('-3,000 USDC');
-      expect(screen.getByLabelText('Net refund amount: 97,000 USD Coin')).toHaveTextContent('97,000 USDC');
-    });
-
-    it('asserts correct rendering and labels for Aggressive (5%) tier calculations', () => {
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          originalAmount="250,000 XLM"
-          penaltyPercent="5%"
-          penaltyAmount="12,500 XLM"
-          netReceiveAmount="237,500 XLM"
-        />
-      );
-
-      // Value text matchers
-      expect(screen.getByLabelText('Committed amount: 250,000 Stellar Lumens')).toHaveTextContent('250,000 XLM');
-      expect(screen.getByLabelText('Penalty rate: 5 percent')).toHaveTextContent('5%');
-      expect(screen.getByLabelText('Penalty deduction: minus 12,500 Stellar Lumens')).toHaveTextContent('-12,500 XLM');
-      expect(screen.getByLabelText('Net refund amount: 237,500 Stellar Lumens')).toHaveTextContent('237,500 XLM');
-    });
-
-    it('renders a penalty-free grace-period preview when the live preview returns 0%', () => {
-      render(
-        <CommitmentEarlyExitModal
-          {...defaultProps}
-          originalAmount="50,000 XLM"
-          penaltyPercent="0%"
-          penaltyAmount="0 XLM"
-          netReceiveAmount="50,000 XLM"
-        />
-      );
-
-      expect(screen.getByLabelText('Penalty rate: 0 percent')).toHaveTextContent('0%');
-      expect(screen.getByLabelText('Penalty deduction: minus 0 Stellar Lumens')).toHaveTextContent('-0 XLM');
-      expect(screen.getByLabelText('Net refund amount: 50,000 Stellar Lumens')).toHaveTextContent('50,000 XLM');
-    });
-  });
-});
+// @vitest-environment happy-dom
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CommitmentEarlyExitModal from '@/components/CommitmentEarlyExitModal/CommitmentEarlyExitModal';
+
+describe('CommitmentEarlyExitModal', () => {
+  const defaultProps = {
+    isOpen: true,
+    commitmentId: 'CMT-TEST123',
+    originalAmount: '50,000 XLM',
+    penaltyPercent: '2%',
+    penaltyAmount: '1,000 XLM',
+    netReceiveAmount: '49,000 XLM',
+    hasAcknowledged: false,
+    onChangeAcknowledged: vi.fn(),
+    onCancel: vi.fn(),
+    onConfirm: vi.fn(),
+    onClose: vi.fn(),
+  };
+
+  it('renders nothing when isOpen is false', () => {
+    const { container } = render(
+      <CommitmentEarlyExitModal {...defaultProps} isOpen={false} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders the modal header and informational notice when open', () => {
+    render(<CommitmentEarlyExitModal {...defaultProps} />);
+    
+    // Header check
+    expect(screen.getByText('Early Exit Warning')).toBeInTheDocument();
+    expect(screen.getByText('This action is irreversible and carries penalties.')).toBeInTheDocument();
+    
+    // Notice check
+    expect(screen.getByText('Important consequences')).toBeInTheDocument();
+    expect(screen.getByText('You will lose the penalty amount shown above immediately.')).toBeInTheDocument();
+  });
+
+  describe('accessibility and semantic markup', () => {
+    it('contains a semantic table with a descriptive screen-reader caption', () => {
+      render(<CommitmentEarlyExitModal {...defaultProps} />);
+      
+      const table = screen.getByRole('table');
+      expect(table).toBeInTheDocument();
+      
+      // Caption check
+      const caption = table.querySelector('caption');
+      expect(caption).toBeInTheDocument();
+      expect(caption).toHaveTextContent('Financial breakdown of early exit penalty and final refund amount');
+    });
+
+    it('has proper scope attributes on table headers for row and col structure', () => {
+      render(<CommitmentEarlyExitModal {...defaultProps} />);
+      
+      const table = screen.getByRole('table');
+      
+      // Column headers
+      const colHeaders = table.querySelectorAll('th[scope="col"]');
+      expect(colHeaders.length).toBe(2);
+      expect(colHeaders[0]).toHaveTextContent('Item');
+      expect(colHeaders[1]).toHaveTextContent('Value');
+      
+      // Row headers
+      const rowHeaders = table.querySelectorAll('th[scope="row"]');
+      expect(rowHeaders.length).toBe(5);
+      expect(rowHeaders[0]).toHaveTextContent('Commitment ID');
+      expect(rowHeaders[1]).toHaveTextContent('Before Early Exit (Committed Amount)');
+      expect(rowHeaders[2]).toHaveTextContent('Penalty Rate');
+      expect(rowHeaders[3]).toHaveTextContent('Penalty Deduction');
+      expect(rowHeaders[4]).toHaveTextContent('After Early Exit (Net Refund)');
+    });
+
+    it('applies accessible screen reader labels spelling out units and currency codes', () => {
+      render(<CommitmentEarlyExitModal {...defaultProps} />);
+      
+      // Check original amount cell has aria-label spelling out XLM
+      const originalAmountCell = screen.getByLabelText('Committed amount: 50,000 Stellar Lumens');
+      expect(originalAmountCell).toBeInTheDocument();
+      expect(originalAmountCell).toHaveTextContent('50,000 XLM');
+
+      // Check penalty percentage cell has aria-label spelling out percent
+      const penaltyPercentCell = screen.getByLabelText('Penalty rate: 2 percent');
+      expect(penaltyPercentCell).toBeInTheDocument();
+      expect(penaltyPercentCell).toHaveTextContent('2%');
+
+      // Check penalty amount cell has aria-label spelling out negative prefix and XLM
+      const penaltyAmountCell = screen.getByLabelText('Penalty deduction: minus 1,000 Stellar Lumens');
+      expect(penaltyAmountCell).toBeInTheDocument();
+      expect(penaltyAmountCell).toHaveTextContent('-1,000 XLM');
+
+      // Check net refund cell has aria-label spelling out XLM
+      const netRefundCell = screen.getByLabelText('Net refund amount: 49,000 Stellar Lumens');
+      expect(netRefundCell).toBeInTheDocument();
+      expect(netRefundCell).toHaveTextContent('49,000 XLM');
+    });
+  });
+
+  describe('user interactions and confirmation validation', () => {
+    it('disables the confirm button by default', () => {
+      render(<CommitmentEarlyExitModal {...defaultProps} />);
+      
+      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
+      expect(confirmButton).toBeDisabled();
+    });
+
+    it('triggers onChangeAcknowledged callback when clicking acknowledgment checkbox', () => {
+      const onChangeAcknowledged = vi.fn();
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          onChangeAcknowledged={onChangeAcknowledged}
+        />
+      );
+      
+      const checkbox = screen.getByRole('checkbox');
+      fireEvent.click(checkbox);
+      
+      expect(onChangeAcknowledged).toHaveBeenCalledWith(true);
+    });
+
+    it('enables the confirm button when both acknowledgement and commitment ID typing are satisfied', () => {
+      const { rerender } = render(
+        <CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={false} />
+      );
+      
+      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
+      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
+      
+      // Action 1: Type the correct ID
+      fireEvent.change(input, { target: { value: 'CMT-TEST123' } });
+      expect(confirmButton).toBeDisabled(); // still disabled because hasAcknowledged is false
+      
+      // Action 2: Receive acknowledgment prop as true
+      rerender(<CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={true} />);
+      
+      // Type matching ID again since input value state is local to render lifecycle
+      fireEvent.change(screen.getByPlaceholderText(/Enter commitment ID exactly/i), {
+        target: { value: 'CMT-TEST123' },
+      });
+      
+      expect(screen.getByRole('button', { name: /Confirm Early Exit/i })).not.toBeDisabled();
+    });
+
+    it('remains disabled if user typed the wrong commitment ID', () => {
+      render(<CommitmentEarlyExitModal {...defaultProps} hasAcknowledged={true} />);
+      
+      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
+      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
+      
+      fireEvent.change(input, { target: { value: 'WRONG-ID-999' } });
+      
+      expect(confirmButton).toBeDisabled();
+    });
+
+    it('calls onCancel or onClose when appropriate buttons are clicked', () => {
+      const onCancel = vi.fn();
+      const onClose = vi.fn();
+      
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          onCancel={onCancel}
+          onClose={onClose}
+        />
+      );
+      
+      // Cancel button click
+      fireEvent.click(screen.getByRole('button', { name: /Cancel/i }));
+      expect(onCancel).toHaveBeenCalled();
+      
+      // Close button (X) click
+      fireEvent.click(screen.getByRole('button', { name: /Close modal/i }));
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    it('calls onConfirm when confirm button is clicked', () => {
+      const onConfirm = vi.fn();
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          hasAcknowledged={true}
+          onConfirm={onConfirm}
+        />
+      );
+      
+      const input = screen.getByPlaceholderText(/Enter commitment ID exactly/i);
+      fireEvent.change(input, { target: { value: 'CMT-TEST123' } });
+      
+      const confirmButton = screen.getByRole('button', { name: /Confirm Early Exit/i });
+      fireEvent.click(confirmButton);
+      
+      expect(onConfirm).toHaveBeenCalled();
+    });
+
+    it('keeps confirmation disabled while live preview is loading', () => {
+      const onConfirm = vi.fn();
+
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          hasAcknowledged={true}
+          isPreviewLoading={true}
+          onConfirm={onConfirm}
+        />
+      );
+
+      fireEvent.change(screen.getByPlaceholderText(/Enter commitment ID exactly/i), {
+        target: { value: 'CMT-TEST123' },
+      });
+
+      expect(screen.getByRole('status')).toHaveTextContent('Fetching live early-exit preview');
+      expect(screen.getByRole('button', { name: /Confirm Early Exit/i })).toBeDisabled();
+    });
+
+    it('shows a non-blocking live preview error message', () => {
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          previewError="Live preview failed with status 503"
+        />
+      );
+
+      expect(screen.getByRole('alert')).toHaveTextContent(
+        'Could not refresh the live preview. Showing estimated local figures instead. Live preview failed with status 503'
+      );
+    });
+  });
+
+  describe('penalty preview calculations per risk tier', () => {
+    it('asserts correct rendering and labels for Safe (2%) tier calculations', () => {
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          originalAmount="50,000 XLM"
+          penaltyPercent="2%"
+          penaltyAmount="1,000 XLM"
+          netReceiveAmount="49,000 XLM"
+        />
+      );
+
+      // Value text matchers
+      expect(screen.getByLabelText('Committed amount: 50,000 Stellar Lumens')).toHaveTextContent('50,000 XLM');
+      expect(screen.getByLabelText('Penalty rate: 2 percent')).toHaveTextContent('2%');
+      expect(screen.getByLabelText('Penalty deduction: minus 1,000 Stellar Lumens')).toHaveTextContent('-1,000 XLM');
+      expect(screen.getByLabelText('Net refund amount: 49,000 Stellar Lumens')).toHaveTextContent('49,000 XLM');
+    });
+
+    it('asserts correct rendering and labels for Balanced (3%) tier calculations', () => {
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          originalAmount="100,000 USDC"
+          penaltyPercent="3%"
+          penaltyAmount="3,000 USDC"
+          netReceiveAmount="97,000 USDC"
+        />
+      );
+
+      // Value text matchers
+      expect(screen.getByLabelText('Committed amount: 100,000 USD Coin')).toHaveTextContent('100,000 USDC');
+      expect(screen.getByLabelText('Penalty rate: 3 percent')).toHaveTextContent('3%');
+      expect(screen.getByLabelText('Penalty deduction: minus 3,000 USD Coin')).toHaveTextContent('-3,000 USDC');
+      expect(screen.getByLabelText('Net refund amount: 97,000 USD Coin')).toHaveTextContent('97,000 USDC');
+    });
+
+    it('asserts correct rendering and labels for Aggressive (5%) tier calculations', () => {
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          originalAmount="250,000 XLM"
+          penaltyPercent="5%"
+          penaltyAmount="12,500 XLM"
+          netReceiveAmount="237,500 XLM"
+        />
+      );
+
+      // Value text matchers
+      expect(screen.getByLabelText('Committed amount: 250,000 Stellar Lumens')).toHaveTextContent('250,000 XLM');
+      expect(screen.getByLabelText('Penalty rate: 5 percent')).toHaveTextContent('5%');
+      expect(screen.getByLabelText('Penalty deduction: minus 12,500 Stellar Lumens')).toHaveTextContent('-12,500 XLM');
+      expect(screen.getByLabelText('Net refund amount: 237,500 Stellar Lumens')).toHaveTextContent('237,500 XLM');
+    });
+
+    it('renders a penalty-free grace-period preview when the live preview returns 0%', () => {
+      render(
+        <CommitmentEarlyExitModal
+          {...defaultProps}
+          originalAmount="50,000 XLM"
+          penaltyPercent="0%"
+          penaltyAmount="0 XLM"
+          netReceiveAmount="50,000 XLM"
+        />
+      );
+
+      expect(screen.getByLabelText('Penalty rate: 0 percent')).toHaveTextContent('0%');
+      expect(screen.getByLabelText('Penalty deduction: minus 0 Stellar Lumens')).toHaveTextContent('-0 XLM');
+      expect(screen.getByLabelText('Net refund amount: 50,000 Stellar Lumens')).toHaveTextContent('50,000 XLM');
+    });
+  });
+});

From 73c0a81d8b0e370826eeb3010f0dee98abcb876f Mon Sep 17 00:00:00 2001
From: xx7412421-cloud <xx7412421@gmail.com>
Date: Sun, 21 Jun 2026 19:32:20 +0800
Subject: [PATCH 10/10] chore: normalize early exit preview file endings