diff --git a/Desktop/vault/YieldVault-RWA/frontend/src/components/VaultDashboard.tsx b/Desktop/vault/YieldVault-RWA/frontend/src/components/VaultDashboard.tsx
new file mode 100644
index 00000000..28e12483
--- /dev/null
+++ b/Desktop/vault/YieldVault-RWA/frontend/src/components/VaultDashboard.tsx
@@ -0,0 +1,1197 @@
+import React, { useEffect, useState } from "react";
+import {
+  Activity,
+  AlertCircle,
+  AlertTriangle,
+  Check,
+  Loader2,
+  Share2,
+  ShieldCheck,
+  TrendingUp,
+  Wallet as WalletIcon,
+} from "./icons";
+import Skeleton, { DashboardCardSkeleton, SkeletonText, SkeletonCircle } from "./Skeleton";
+import { useDelayedLoading } from "../hooks/useDelayedLoading";
+import { useVault } from "../context/VaultContext";
+import ApiStatusBanner from "./ApiStatusBanner";
+import SharePriceDisplay from "./SharePriceDisplay";
+import VaultPerformanceChart from "./VaultPerformanceChart";
+import { useToast } from "../context/ToastContext";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
+import { FormField } from "../forms";
+import { isValidationError } from "../lib/api";
+import { useForm } from "../forms/useForm";
+import type { ValidationSchema } from "../forms/validate";
+import { useDepositMutation, useWithdrawMutation } from "../hooks/useVaultMutations";
+import { useTokenAllowance } from "../hooks/useTokenAllowance";
+import { createDepositFormSchema, MIN_DEPOSIT_AMOUNT } from "../forms/schemas/depositFormSchema";
+import { createWithdrawFormSchema } from "../forms/schemas/withdrawFormSchema";
+import { mapServerError } from "../lib/errorMappers";
+import CopyButton from "./CopyButton";
+import { copyTextToClipboard } from "../lib/clipboard";
+import { useFeeEstimate } from "../hooks/useFeeEstimate";
+import { useSlippage } from "../hooks/useSlippage";
+import HelpIcon from "./ui/HelpIcon";
+import EmptyState from "./ui/EmptyState";
+import { useTranslation } from "../i18n";
+import { networkConfig } from "../config/network";
+import { useDashboardUrlState, type TransactionTab, type TransactionStep } from "../hooks/useDashboardUrlState";
+import RefreshControl from "./RefreshControl";
+import { usePolling } from "../hooks/usePolling";
+import { useStaleIndicator } from "../hooks/useStaleIndicator";
+import { useNetworkStatus } from "../hooks/useNetworkStatus";
+import { useTransactionConfirmation } from "../hooks/useTransactionConfirmation";
+import { buildDepositSummary, buildWithdrawalSummary } from "../lib/transactionConfirmationBuilder";
+
+/**
+ * Visual indicator for the 3-step transaction wizard.
+ * Shows progress through Amount, Review, and Result stages.
+ */
+const StepIndicator: React.FC<{ currentStep: TransactionStep }> = ({ currentStep }) => {
+  const steps: Array<{ id: TransactionStep; label: string }> = [
+    { id: "amount", label: "Amount" },
+    { id: "review", label: "Review" },
+    { id: "result", label: "Result" },
+  ];
+  const stepOrder: TransactionStep[] = ["amount", "review", "result"];
+  const currentIndex = stepOrder.indexOf(currentStep);
+
+  return (
+    <div className="step-indicator-container">
+      {steps.map((step, index) => {
+        const status =
+          index < currentIndex
+            ? "completed"
+            : index === currentIndex
+              ? "active"
+              : "pending";
+
+        return (
+          <React.Fragment key={step.id}>
+            <div className={`step-item ${status}`}>
+              <div className="step-number">
+                {status === "completed" ? <Check size={12} /> : index + 1}
+              </div>
+              <span className="step-label">{step.label}</span>
+            </div>
+            {index < steps.length - 1 && (
+              <div className={`step-line ${status === "completed" ? "completed" : ""}`} />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};
+
+interface VaultDashboardProps {
+  walletAddress: string | null;
+  usdcBalance?: number;
+  xlmBalance?: number;
+}
+
+const MIN_DEPOSIT_AMOUNT = 1;
+
+const VaultCapWarning: React.FC<{ utilization: number; isReached: boolean }> = ({
+  utilization,
+  isReached,
+}) => {
+  const percent = (utilization * 100).toFixed(1);
+
+  return (
+    <div
+      className="glass-panel"
+      style={{
+        padding: "16px",
+        marginBottom: "24px",
+        border: `1px solid ${isReached ? "var(--text-error)" : "var(--text-warning)"}`,
+        background: isReached ? "rgba(255, 69, 58, 0.1)" : "rgba(255, 159, 10, 0.1)",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "12px",
+      }}
+    >
+      {isReached ? (
+        <AlertCircle color="var(--text-error)" size={20} />
+      ) : (
+        <AlertCircle color="var(--text-warning)" size={20} />
+      )}
+      <div>
+        <div
+          style={{
+            fontWeight: 600,
+            color: isReached ? "var(--text-error)" : "var(--text-warning)",
+            marginBottom: "4px",
+          }}
+        >
+          {isReached ? "Vault Capacity Reached" : "Vault Near Capacity"}
+        </div>
+        <div
+          style={{
+            fontSize: "0.85rem",
+            color: "var(--text-secondary)",
+            lineHeight: "1.4",
+          }}
+        >
+          {isReached
+            ? `This vault has reached its maximum deposit cap of ${percent}%. Deposits are temporarily disabled.`
+            : `This vault is at ${percent}% capacity. New deposits may be restricted soon.`}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const VaultDashboard: React.FC<VaultDashboardProps> = ({
+  walletAddress,
+  usdcBalance = 0,
+  xlmBalance = 0,
+}) => {
+  const dashboardUrl = useDashboardUrlState();
+  const {
+    formattedTvl,
+    formattedApy,
+    summary,
+    error,
+    isLoading,
+    utilization,
+    isCapWarning,
+    isCapReached,
+    lastUpdate,
+    refresh,
+  } = useVault();
+  const toast = useToast();
+  const delayedLoading = useDelayedLoading(isLoading);
+
+  const statsPolling = usePolling(refresh, {
+    interval: 30000,
+    pauseOnHidden: true,
+    pauseOnOffline: true,
+  });
+  const { isStale: statsIsStale, ageText: statsAgeText } = useStaleIndicator(lastUpdate);
+
+  const availableBalance = walletAddress ? usdcBalance : 0;
+
+  // Wizard state
+  const [transactionResult, setTransactionResult] = useState<{
+    success: boolean;
+    message: string;
+    txHash?: string
+  } | null>(null);
+
+  const { isOffline, countdown } = useOfflineRetryCountdown();
+
+  const depositMutation = useDepositMutation();
+  const withdrawMutation = useWithdrawMutation();
+  const { approvalStatus, needsApproval, approve, resetApproval } =
+    useTokenAllowance(walletAddress);
+  
+  // Transaction confirmation modal
+  const confirmation = useTransactionConfirmation();
+
+  const { isOnline } = useNetworkStatus();
+  const { feeXlm, isEstimating, isHighFee } = useFeeEstimate(
+    walletAddress,
+    "",
+    dashboardUrl.state.tab,
+    isOnline
+  );
+
+  const { slippage, setSlippage, presets, isHighSlippage, minReceived } = useSlippage();
+  const [customSlippage, setCustomSlippage] = useState("");
+
+  // Create validation schema based on transaction type and current state
+  const transactionSchema = React.useMemo<ValidationSchema<{ amount: string }>>(() => {
+    if (dashboardUrl.state.tab === "deposit") {
+      return createDepositFormSchema(availableBalance, isCapReached, xlmBalance, feeXlm);
+    } else {
+      return createWithdrawFormSchema(availableBalance);
+    }
+  }, [dashboardUrl.state.tab, availableBalance, isCapReached, xlmBalance, feeXlm]);
+
+  const {
+    values,
+    errors,
+    touched,
+    handleChange,
+    handleBlur,
+    setValues,
+    setFieldError
+  } = useForm({ amount: dashboardUrl.state.amount }, transactionSchema);
+
+  const amount = values.amount;
+
+  // Handle deep link parameters
+  useEffect(() => {
+    const action = dashboardUrl.state.tab;
+    const amountParam = dashboardUrl.state.amount;
+
+    if (action !== "deposit") {
+      return;
+    }
+
+    const parsedAmount = amountParam === "" ? Number.NaN : Number(amountParam);
+    if (Number.isFinite(parsedAmount) && parsedAmount > 0) {
+      setValues({ amount: parsedAmount.toString() });
+    }
+  }, [dashboardUrl.state.tab, dashboardUrl.state.amount, setValues]);
+
+  // Reset approval when deposit amount changes
+  useEffect(() => {
+    resetApproval();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [amount]);
+
+  const resetWizard = () => {
+    setValues({ amount: "" });
+    dashboardUrl.setStep("amount");
+    dashboardUrl.setAmount("");
+    setTransactionResult(null);
+  };
+
+  const goToReview = () => {
+    if (Object.keys(errors).length > 0) {
+      toast.warning({
+        title: "Please fix validation errors",
+        description: errors.amount || "Please enter a valid amount",
+      });
+      return;
+    }
+
+    dashboardUrl.setStep("review");
+  };
+
+  useEffect(() => {
+    const handleDeposit = () => {
+      dashboardUrl.setTab("deposit");
+      setTimeout(() => {
+        const input = document.querySelector(".input-field") as HTMLInputElement | null;
+        if (input) input.focus();
+      }, 0);
+    };
+    const handleWithdraw = () => {
+      dashboardUrl.setTab("withdraw");
+      setTimeout(() => {
+        const input = document.querySelector(".input-field") as HTMLInputElement | null;
+        if (input) input.focus();
+      }, 0);
+    };
+    window.addEventListener("TRIGGER_DEPOSIT", handleDeposit);
+    window.addEventListener("TRIGGER_WITHDRAW", handleWithdraw);
+    return () => {
+      window.removeEventListener("TRIGGER_DEPOSIT", handleDeposit);
+      window.removeEventListener("TRIGGER_WITHDRAW", handleWithdraw);
+    };
+  }, [dashboardUrl]);
+
+  const isProcessing = depositMutation.isPending
+    ? "deposit"
+    : withdrawMutation.isPending
+      ? "withdraw"
+      : null;
+  const isBusy = isProcessing !== null;
+
+  const strategy = summary.strategy;
+  const enteredAmount = Number(amount);
+  const activeAmountError = errors.amount;
+  const isValidAmount = !activeAmountError;
+  const showInlineError = touched.amount && Boolean(activeAmountError);
+  const managementFeeBps = 35;
+  const estimatedFee = isValidAmount
+    ? (enteredAmount * managementFeeBps) / 10_000
+    : 0;
+  const estimatedNetAmount = isValidAmount
+    ? Math.max(enteredAmount - estimatedFee, 0)
+    : 0;
+  const isSubmitDisabled =
+    !walletAddress ||
+    isBusy ||
+    Boolean(activeAmountError) ||
+    !amount ||
+    (dashboardUrl.state.tab === "deposit" && isCapReached);
+
+
+  const handleTransaction = async (actionType: TransactionTab) => {
+    const value = Number(amount);
+    
+    if (!walletAddress) {
+      toast.warning({
+        title: "Wallet required",
+        description: "Connect your wallet before submitting a transaction.",
+      });
+      return;
+    }
+
+    try {
+      // Build transaction summary and request user confirmation before signing
+      const contractAddress = networkConfig.contractId;
+      let summary;
+      
+      if (actionType === "deposit") {
+        summary = buildDepositSummary({
+          amount: value,
+          feeXlm,
+          contractAddress,
+        });
+      } else {
+        summary = buildWithdrawalSummary({
+          amount: value,
+          feeXlm,
+          contractAddress,
+        });
+      }
+
+      // Show confirmation modal and wait for user response
+      const confirmed = await confirmation.requestConfirmation(summary);
+      if (!confirmed) {
+        // User cancelled the confirmation
+        return;
+      }
+
+      // Proceed with the transaction after user confirmed
+      if (actionType === "deposit") {
+        await depositMutation.mutateAsync({ walletAddress, amount: value });
+        
+        try {
+          const depositKey = `has_deposited_${walletAddress}`;
+          const alreadyDeposited = localStorage.getItem(depositKey);
+          const isTest = typeof process !== "undefined" && process.env?.NODE_ENV === "test";
+          if (!alreadyDeposited && !isTest) {
+            confetti({
+              particleCount: 150,
+              spread: 80,
+              origin: { y: 0.6 },
+              colors: ["#00f0ff", "#a855f7", "#ffffff", "#3b82f6"]
+            });
+            localStorage.setItem(depositKey, "true");
+          }
+        } catch (storageErr) {
+          console.warn("Storage access failed, triggering confetti anyway", storageErr);
+          const isTest = typeof process !== "undefined" && process.env?.NODE_ENV === "test";
+          if (!isTest) {
+            confetti({
+              particleCount: 150,
+              spread: 80,
+              origin: { y: 0.6 },
+              colors: ["#00f0ff", "#a855f7", "#ffffff", "#3b82f6"]
+            });
+          }
+        }
+      } else {
+        await withdrawMutation.mutateAsync({ walletAddress, amount: value });
+      }
+
+      setTransactionResult({
+        success: true,
+        message: actionType === "deposit"
+          ? `${value.toFixed(2)} USDC has been deposited into the vault.`
+          : `${value.toFixed(2)} USDC has been withdrawn from the vault.`,
+      });
+      dashboardUrl.setStep("result");
+      
+      toast.success({
+        title: actionType === "deposit" ? "Deposit Successful" : "Withdrawal Successful",
+        description:
+          actionType === "deposit"
+            ? `${value.toFixed(2)} USDC has been deposited into the vault.`
+            : `${value.toFixed(2)} USDC has been withdrawn from the vault.`,
+      });
+    } catch (err: unknown) {
+      // Map server errors to form field errors
+      const mappedError = mapServerError(err);
+      
+      if (mappedError.fieldErrors.length > 0) {
+        // Set field-level errors
+        mappedError.fieldErrors.forEach(({ fieldName, message }) => {
+          setFieldError(fieldName as keyof { amount: string }, message);
+        });
+        dashboardUrl.setStep("amount");
+      }
+
+      // Get error message for display
+      let errorMessage = "An error occurred during the transaction.";
+      
+      if (isValidationError(err)) {
+        errorMessage = err.details?.[0]?.message || errorMessage;
+      } else if (err instanceof Error) {
+        errorMessage = err.message;
+      } else if (mappedError.generalError) {
+        errorMessage = mappedError.generalError;
+      }
+
+      setTransactionResult({
+        success: false,
+        message: errorMessage,
+      });
+      dashboardUrl.setStep("result");
+      
+      toast.error({
+        title: "Transaction Failed",
+        description: errorMessage,
+      });
+    }
+  };
+
+  return (
+    <div className="vault-dashboard gap-lg">
+      {/* Transaction Confirmation Modal - shown for all sensitive actions */}
+      {confirmation.modal}
+      
+      <div className="vault-dashboard-stats" aria-busy={delayedLoading}>
+        <div className="glass-panel vault-stats-panel">
+          {error && (
+            <ApiStatusBanner error={{ ...error, userMessage: "Failed to load vault data" }} />
+          )}
+          <div className="vault-stats-header flex justify-between items-center" style={{ marginBottom: "24px" }}>
+            <div>
+              <h2 style={{ fontSize: "1.5rem", marginBottom: "4px" }}>
+                {delayedLoading ? <SkeletonText width="240px" lineHeight="1.5rem" /> : "Global RWA Yield Fund"}
+              </h2>
+              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                {delayedLoading ? (
+                  <SkeletonText width="100px" lineHeight="1.5rem" />
+                ) : (
+                  <>
+                    <span
+                      className="tag"
+                      style={{
+                        background: "rgba(255, 255, 255, 0.05)",
+                        color: "var(--text-secondary)",
+                      }}
+                    >
+                      Tokens: USDC
+                    </span>
+                    <SharePriceDisplay />
+                  </>
+                )}
+              </div>
+            </div>
+            <div style={{ textAlign: "right" }}>
+              <div style={{ color: "var(--text-secondary)", fontSize: "0.85rem", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "6px" }}>
+                Current APY
+                <HelpIcon
+                  variant="tooltip"
+                  content="Annualized yield based on the historical performance of the vault's underlying assets."
+                />
+              </div>
+              <div className="text-gradient" style={{ fontSize: "2rem", fontFamily: "var(--font-display)", fontWeight: 700 }}>
+                {delayedLoading ? <Skeleton width="100px" height="2.5rem" /> : formattedApy}
+              </div>
+            </div>
+          </div>
+
+          <div
+            style={{
+              height: "1px",
+              background: "var(--border-glass)",
+              margin: "24px 0",
+            }}
+          />
+
+          {/* Per-widget refresh control + stale indicator for stats panel */}
+          <div style={{ marginBottom: "16px" }}>
+            <RefreshControl
+              isPolling={statsPolling.isPolling}
+              isPaused={statsPolling.isPaused}
+              pauseReason={statsPolling.pauseReason}
+              onPause={statsPolling.pause}
+              onResume={statsPolling.resume}
+              onRefresh={statsPolling.forceRefresh}
+              isRefetching={isLoading}
+              lastUpdated={lastUpdate}
+            />
+            {statsIsStale && statsAgeText && (
+              <div
+                role="status"
+                aria-live="polite"
+                style={{
+                  marginTop: "6px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                  fontSize: "0.75rem",
+                  color: "var(--text-warning, #f59e0b)",
+                }}
+              >
+                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--text-warning, #f59e0b)", flexShrink: 0 }} />
+                Data may be stale · {statsAgeText}
+              </div>
+            )}
+          </div>
+
+          <div className="vault-stats-meta flex gap-xl" style={{ marginBottom: "32px" }}>
+            <div>
+              <div
+                style={{
+                  color: "var(--text-secondary)",
+                  fontSize: "0.85rem",
+                  marginBottom: "4px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                }}
+              >
+                Total Value Locked
+                <span
+                  className="flex items-center gap-xs"
+                  style={{
+                    color: isOffline ? "rgba(255, 159, 10, 0.9)" : "var(--accent-cyan)",
+                    fontSize: "0.7rem",
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                  }}
+                >
+                  {!isOffline && <Activity size={10} className={isLoading ? "animate-pulse" : undefined} />}
+                  {isOffline ? `Retrying in ${countdown}s...` : isLoading ? "Syncing" : "Live"}
+                </span>
+              </div>
+              <div style={{ fontSize: "1.25rem", fontFamily: "var(--font-display)", fontWeight: 600 }}>
+                {delayedLoading ? <Skeleton width="140px" height="1.5rem" /> : formattedTvl}
+              </div>
+            </div>
+            <div>
+              <div style={{ color: "var(--text-secondary)", fontSize: "0.85rem", marginBottom: "4px" }}>
+                Underlying Asset
+              </div>
+              <div className="flex items-center gap-sm">
+                {delayedLoading ? (
+                  <>
+                    <SkeletonCircle width={16} height={16} />
+                    <SkeletonText width="100px" lineHeight="1.1rem" />
+                  </>
+                ) : (
+                  <>
+                    <ShieldCheck size={16} color="var(--accent-cyan)" />
+                    <span style={{ fontSize: "1.1rem", fontWeight: 500 }}>{summary.assetLabel}</span>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="glass-panel" style={{ padding: "20px", background: "var(--bg-muted)" }}>
+            {delayedLoading ? (
+              <DashboardCardSkeleton />
+            ) : (
+              <>
+                <h3
+                  style={{
+                fontSize: "1.1rem",
+                marginBottom: "12px",
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+              }}
+            >
+              <TrendingUp size={18} color="var(--accent-purple)" />
+              Strategy Overview
+            </h3>
+            <div
+              style={{
+                marginBottom: "12px",
+                color: "var(--text-secondary)",
+                fontSize: "0.8rem",
+                fontWeight: 600,
+              }}
+            >
+              BENJI Strategy
+            </div>
+            <p style={{ color: "var(--text-secondary)", fontSize: "0.9rem", lineHeight: "1.6" }}>
+              This vault pools USDC and deploys it into verified tokenized sovereign bonds available on
+              the Stellar network.
+            </p>
+            <div className="flex gap-md" style={{ marginTop: "14px", flexWrap: "wrap" }}>
+              <div
+                style={{
+                  flex: "1 1 150px",
+                  padding: "10px 12px",
+                  borderRadius: "10px",
+                  background: "rgba(255,255,255,0.03)",
+                  border: "1px solid var(--border-glass)",
+                }}
+              >
+                <div style={{ color: "var(--text-secondary)", fontSize: "0.75rem", marginBottom: "4px" }}>
+                  Target Allocation
+                </div>
+                <div style={{ fontWeight: 600 }}>70% Treasuries</div>
+                <div style={{ color: "var(--text-secondary)", fontSize: "0.8rem" }}>30% Cash Reserve</div>
+              </div>
+              <div
+                style={{
+                  flex: "1 1 150px",
+                  padding: "10px 12px",
+                  borderRadius: "10px",
+                  background: "rgba(255,255,255,0.03)",
+                  border: "1px solid var(--border-glass)",
+                }}
+              >
+                <div style={{ color: "var(--text-secondary)", fontSize: "0.75rem", marginBottom: "4px" }}>
+                  Yield Distribution
+                </div>
+                <div style={{ fontWeight: 600 }}>Daily Compounding</div>
+                <div style={{ color: "var(--text-secondary)", fontSize: "0.8rem" }}>
+                  Reflected in yvUSDC NAV
+                </div>
+              </div>
+              <div
+                style={{
+                  flex: "1 1 150px",
+                  padding: "10px 12px",
+                  borderRadius: "10px",
+                  background: "rgba(255,255,255,0.03)",
+                  border: "1px solid var(--border-glass)",
+                }}
+              >
+                <div style={{ color: "var(--text-secondary)", fontSize: "0.75rem", marginBottom: "4px" }}>
+                  Risk Controls
+                </div>
+                <div style={{ fontWeight: 600 }}>Issuer + Duration Caps</div>
+                <div style={{ color: "var(--text-secondary)", fontSize: "0.8rem" }}>
+                  Rebalanced every epoch
+                </div>
+              </div>
+            </div>
+            <div style={{ marginTop: "12px", color: "var(--text-secondary)", fontSize: "0.82rem" }}>
+              Strategy: <span style={{ color: "var(--text-primary)" }}>{strategy.name}</span> ({strategy.issuer})
+            </div>
+            <div
+              className="copy-field"
+              style={{
+                marginTop: "12px",
+                color: "var(--text-secondary)",
+                fontSize: "0.78rem",
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+              }}
+            >
+              <span>Strategy ID:</span>
+              <span className="copy-field-value copy-field-value-mono" style={{ marginRight: "4px" }}>{strategy.id}</span>
+              <CopyButton value={strategy.id} label="strategy ID" />
+            </div>
+            <div
+              className="copy-field"
+              style={{
+                marginTop: "8px",
+                color: "var(--text-secondary)",
+                fontSize: "0.78rem",
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+              }}
+            >
+              <span>Contract:</span>
+              <span className="copy-field-value copy-field-value-mono" style={{ marginRight: "4px" }}>
+                {networkConfig.contractId ? `${networkConfig.contractId.slice(0, 6)}...${networkConfig.contractId.slice(-4)}` : "Not Configured"}
+              </span>
+              {networkConfig.contractId && (
+                <CopyButton value={networkConfig.contractId} label="contract address" />
+              )}
+            </div>
+          </>
+            )}
+          </div>
+
+          {/* Empty state: wallet connected, loading done, no USDC balance */}
+          {!isLoading && walletAddress && usdcBalance === 0 && (
+            <EmptyState
+              kind="no-data"
+              title="No deposits yet."
+              description="Start earning yield by depositing USDC into our high-efficiency vaults."
+              icon={<TrendingUp />}
+              actionLabel="Deposit Now"
+              onAction={() => {
+                window.dispatchEvent(new Event("TRIGGER_DEPOSIT"));
+              }}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="vault-dashboard-chart">
+        <div className="glass-panel vault-chart-panel">
+          <VaultPerformanceChart />
+        </div>
+      </div>
+
+      <div className="vault-dashboard-actions">
+        <div
+          className="glass-panel vault-actions-panel"
+          style={{ position: "relative", overflow: "hidden" }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              top: "-50px",
+              right: "-50px",
+              width: "150px",
+              height: "150px",
+              background: "var(--accent-purple)",
+              filter: "blur(80px)",
+              opacity: 0.2,
+              borderRadius: "50%",
+              pointerEvents: "none",
+            }}
+          />
+
+          {!walletAddress && (
+            <div
+              className="wallet-overlay"
+              style={{
+                position: "absolute",
+                inset: 0,
+                background: "var(--bg-overlay)",
+                backdropFilter: "blur(8px)",
+                zIndex: 10,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "32px",
+                textAlign: "center",
+              }}
+            >
+              <WalletIcon size={48} color="var(--accent-cyan)" style={{ marginBottom: "16px", opacity: 0.8 }} />
+              <h3>Wallet Not Connected</h3>
+              <p style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>
+                Please connect your Freighter wallet to interact with the vault.
+              </p>
+            </div>
+          )}
+
+          <Tabs
+            value={dashboardUrl.state.tab}
+            defaultValue="deposit"
+            onValueChange={(value) => {
+              dashboardUrl.setTab(value as TransactionTab);
+              setValues({ amount: "" });
+              dashboardUrl.setAmount("");
+            }}
+          >
+            {dashboardUrl.state.step === "amount" && (
+              <TabsList style={{ marginBottom: "24px" }}>
+                <TabsTrigger value="deposit">Deposit</TabsTrigger>
+                <TabsTrigger value="withdraw">Withdraw</TabsTrigger>
+              </TabsList>
+            )}
+
+            <StepIndicator currentStep={dashboardUrl.state.step} />
+
+            {(["deposit", "withdraw"] as const).map((tab) => (
+              <TabsContent key={tab} value={tab}>
+                {(isCapReached || isCapWarning) && tab === "deposit" && (
+                  <VaultCapWarning utilization={utilization} isReached={isCapReached} />
+                )}
+
+                  <div style={{ minHeight: "380px", display: "flex", flexDirection: "column" }}>
+                    {dashboardUrl.state.step === "amount" && (
+                      <div className="animate-in fade-in duration-300">
+                        <div style={{ marginBottom: "24px" }}>
+                          <div className="flex justify-between items-center" style={{ marginBottom: "16px" }}>
+                            <div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>
+                              {tab === "deposit" ? "Amount to deposit" : "Amount to withdraw"}
+                            </div>
+                            <div style={{ color: "var(--text-secondary)", fontSize: "0.85rem" }}>
+                              Balance: <span style={{ color: "var(--text-primary)", fontWeight: 600 }}>{availableBalance.toFixed(2)}</span>
+                            </div>
+                          </div>
+
+                          <FormField
+                            label={tab === "deposit" ? "Deposit amount" : "Withdrawal amount"}
+                            name="amount"
+                            type="number"
+                            step="any"
+                            placeholder="0.00"
+                            value={amount}
+                            onChange={handleChange}
+                            onBlur={handleBlur}
+                            disabled={isBusy || (tab === "deposit" && isCapReached)}
+                            error={showInlineError ? activeAmountError ?? undefined : undefined}
+                            helperText={tab === "deposit" ? `Min: ${MIN_DEPOSIT_AMOUNT.toFixed(2)} USDC` : `Max: ${availableBalance.toFixed(2)} USDC`}
+                          />
+
+                          <div className="flex justify-between items-center" style={{ margin: "16px 0 24px" }}>
+                            <div className="flex items-center gap-sm">
+                              <span style={{ color: "var(--text-secondary)", fontSize: "0.85rem" }}>Asset: USDC</span>
+                              {tab === "deposit" && (
+                                <>
+                                  <div style={{ width: "1px", height: "14px", background: "var(--border-glass)", margin: "0 4px" }} />
+                                  <button
+                                    type="button"
+                                    className="btn-link flex items-center gap-xs"
+                                    style={{ fontSize: "0.75rem", color: "var(--accent-cyan)", padding: 0 }}
+                                    onClick={async () => {
+                                      const baseUrl = window.location.origin + window.location.pathname;
+                                      const shareUrl = amount && !isNaN(Number(amount)) && Number(amount) > 0
+                                        ? `${baseUrl}?action=deposit&amount=${amount}`
+                                        : baseUrl;
+                                      
+                                      try {
+                                        await copyTextToClipboard(shareUrl);
+                                        toast.success({
+                                          title: "Link copied",
+                                          description: "Shareable vault link is ready to paste."
+                                        });
+                                      } catch {
+                                        toast.error({
+                                          title: "Copy failed",
+                                          description: "Could not copy link to clipboard."
+                                        });
+                                      }
+                                    }}
+                                  >
+                                    <Share2 size={12} />
+                                    Share Link
+                                  </button>
+                                </>
+                              )}
+                            </div>
+                            <button
+                              type="button"
+                              className="btn-max"
+                              onClick={() => {
+                                setValues({ amount: availableBalance.toFixed(2) });
+                              }}
+                              disabled={
+                                !walletAddress ||
+                                availableBalance <= 0 ||
+                                isBusy ||
+                                (tab === "deposit" && isCapReached)
+                              }
+                            >
+                              MAX
+                            </button>
+                          </div>
+                        </div>
+
+                        <div
+                          className="glass-panel"
+                          style={{
+                            padding: "14px 16px",
+                            background: "rgba(0, 0, 0, 0.15)",
+                            marginBottom: "24px",
+                          }}
+                        >
+                          <div className="flex justify-between items-center" style={{ marginBottom: "6px" }}>
+                            <span style={{ color: "var(--text-secondary)", fontSize: "0.86rem", display: "flex", alignItems: "center", gap: "6px" }}>
+                              Estimated protocol fee
+                              <HelpIcon
+                                variant="popover"
+                                content="A protocol fee of 35 basis points (0.35%) of the transaction amount is applied. This fee is deducted before settlement."
+                              />
+                            </span>
+                            <span style={{ fontSize: "0.9rem", fontWeight: 600 }}>
+                              {isValidAmount ? `${estimatedFee.toFixed(4)} USDC` : "0.0000 USDC"}
+                            </span>
+                          </div>
+                          <div className="flex justify-between items-center">
+                            <span style={{ color: "var(--text-secondary)", fontSize: "0.82rem" }}>
+                              {tab === "deposit" ? "Estimated net deposit" : "Estimated net withdrawal"}
+                            </span>
+                            <span style={{ fontSize: "0.9rem", fontWeight: 600 }}>
+                              {isValidAmount ? `${estimatedNetAmount.toFixed(4)} USDC` : "0.0000 USDC"}
+                            </span>
+                          </div>
+                        </div>
+
+                        <button
+                          className="btn btn-primary"
+                          style={{ width: "100%", padding: "16px" }}
+                          type="button"
+                          onClick={goToReview}
+                          disabled={isSubmitDisabled}
+                        >
+                          Review Transaction
+                        </button>
+                      </div>
+                    )}
+
+                    {dashboardUrl.state.step === "review" && (
+                      <div className="animate-in fade-in slide-in-from-right-4 duration-300 flex-1 flex flex-col">
+                        <div className="flex-1">
+                          <h4 style={{ marginBottom: "20px", display: "flex", alignItems: "center", gap: "10px" }}>
+                            <AlertCircle size={20} color="var(--accent-cyan)" />
+                            Confirm Transaction
+                          </h4>
+                          
+                          <div 
+                            className="glass-panel" 
+                            style={{ 
+                              padding: "20px", 
+                              background: "rgba(255, 255, 255, 0.02)",
+                              border: "1px solid var(--border-glass)",
+                              marginBottom: "20px"
+                            }}
+                          >
+                            <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+                              <div className="flex justify-between">
+                                <span style={{ color: "var(--text-secondary)" }}>Action</span>
+                                <span style={{ fontWeight: 600, textTransform: "capitalize" }}>{tab}</span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span style={{ color: "var(--text-secondary)" }}>Amount</span>
+                                <span style={{ fontWeight: 600 }}>{enteredAmount.toFixed(2)} USDC</span>
+                              </div>
+                              <div style={{ height: "1px", background: "var(--border-glass)" }} />
+                              <div className="flex justify-between">
+                                <span style={{ color: "var(--text-secondary)" }}>Protocol Fee (0.35%)</span>
+                                <span style={{ fontWeight: 600 }}>{estimatedFee.toFixed(4)} USDC</span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span style={{ color: "var(--text-secondary)" }}>Network Fee</span>
+                                <span style={{ fontWeight: 600, textAlign: "right" }}>
+                                  {isEstimating ? <Skeleton width="60px" height="1.1rem" /> : `${feeXlm.toFixed(4)} XLM`}
+                                </span>
+                              </div>
+                              <div style={{ height: "1px", background: "var(--border-glass)" }} />
+                              <div className="flex justify-between items-center">
+                                <span style={{ color: "var(--text-primary)", fontWeight: 600 }}>Total To {tab === "deposit" ? "Vault" : "Wallet"}</span>
+                                <span style={{ fontSize: "1.25rem", fontWeight: 700, color: "var(--accent-cyan)" }}>
+                                  {estimatedNetAmount.toFixed(4)} USDC
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+
+                          {tab === "withdraw" && isValidAmount && (
+                            <div
+                              className="glass-panel"
+                              style={{
+                                padding: "14px 16px",
+                                background: "rgba(0,0,0,0.15)",
+                                marginBottom: "16px",
+                              }}
+                            >
+                              <div style={{ fontSize: "0.82rem", color: "var(--text-secondary)", marginBottom: "10px", fontWeight: 600 }}>
+                                Slippage Tolerance
+                              </div>
+                              <div className="flex items-center gap-sm" style={{ flexWrap: "wrap" }}>
+                                {presets.map((p) => (
+                                  <button
+                                    key={p}
+                                    type="button"
+                                    onClick={() => { setSlippage(p); setCustomSlippage(""); }}
+                                    style={{
+                                      padding: "5px 12px",
+                                      borderRadius: "6px",
+                                      border: slippage === p && customSlippage === "" ? "1px solid var(--accent-cyan)" : "1px solid var(--border-glass)",
+                                      background: slippage === p && customSlippage === "" ? "rgba(0,240,255,0.1)" : "transparent",
+                                      color: slippage === p && customSlippage === "" ? "var(--accent-cyan)" : "var(--text-secondary)",
+                                      fontSize: "0.82rem",
+                                      cursor: "pointer",
+                                      fontWeight: 600,
+                                    }}
+                                  >
+                                    {p}%
+                                  </button>
+                                ))}
+                                <input
+                                  type="number"
+                                  min="0"
+                                  max="50"
+                                  step="0.1"
+                                  placeholder="Custom"
+                                  value={customSlippage}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    setCustomSlippage(v);
+                                    const n = parseFloat(v);
+                                    if (isFinite(n) && n >= 0) setSlippage(n);
+                                  }}
+                                  style={{
+                                    width: "80px",
+                                    padding: "5px 8px",
+                                    borderRadius: "6px",
+                                    border: customSlippage !== "" ? "1px solid var(--accent-cyan)" : "1px solid var(--border-glass)",
+                                    background: "transparent",
+                                    color: "var(--text-primary)",
+                                    fontSize: "0.82rem",
+                                    outline: "none",
+                                  }}
+                                  aria-label="Custom slippage percentage"
+                                />
+                                <span style={{ fontSize: "0.82rem", color: "var(--text-secondary)" }}>%</span>
+                              </div>
+                              {isHighSlippage && (
+                                <div className="flex items-center gap-xs" style={{ marginTop: "8px" }}>
+                                  <AlertTriangle size={13} color="var(--text-warning, #f59e0b)" />
+                                  <span style={{ fontSize: "0.78rem", color: "var(--text-warning, #f59e0b)" }}>
+                                    High slippage — you may receive significantly less than expected.
+                                  </span>
+                                </div>
+                              )}
+                              <div className="flex justify-between" style={{ marginTop: "10px" }}>
+                                <span style={{ fontSize: "0.82rem", color: "var(--text-secondary)" }}>Minimum received</span>
+                                <span style={{ fontSize: "0.82rem", fontWeight: 600 }}>
+                                  {minReceived(estimatedNetAmount).toFixed(4)} USDC
+                                </span>
+                              </div>
+                            </div>
+                          )}
+
+                          {isHighFee && (                            <div
+                              className="flex items-start gap-sm"
+                              style={{
+                                marginBottom: "20px",
+                                padding: "12px",
+                                borderRadius: "8px",
+                                background: "rgba(255, 69, 58, 0.1)",
+                                border: "1px solid rgba(255, 69, 58, 0.2)",
+                              }}
+                            >
+                              <AlertTriangle size={16} color="var(--text-error)" style={{ marginTop: "2px" }} />
+                              <div style={{ fontSize: "0.82rem", color: "var(--text-error)", lineHeight: "1.4" }}>
+                                <strong style={{ display: "block", marginBottom: "2px" }}>High network fee</strong>
+                                The estimated network fee exceeds 1% of your transaction value.
+                              </div>
+                            </div>
+                          )}
+
+                          {tab === "deposit" && xlmBalance < feeXlm && (
+                            <div
+                              className="flex items-start gap-sm"
+                              style={{
+                                marginBottom: "20px",
+                                padding: "12px",
+                                borderRadius: "8px",
+                                background: "rgba(255, 69, 58, 0.1)",
+                                border: "1px solid rgba(255, 69, 58, 0.2)",
+                              }}
+                            >
+                              <AlertTriangle size={16} color="var(--text-error)" style={{ marginTop: "2px" }} />
+                              <div style={{ fontSize: "0.82rem", color: "var(--text-error)", lineHeight: "1.4" }}>
+                                <strong style={{ display: "block", marginBottom: "2px" }}>Insufficient XLM balance</strong>
+                                You do not have enough XLM to cover the estimated network fee.
+                              </div>
+                            </div>
+                          )}
+
+                          {tab === "deposit" && isValidAmount && needsApproval(enteredAmount) && (
+                            <div
+                              className="glass-panel"
+                              style={{
+                                padding: "14px 16px",
+                                marginBottom: "20px",
+                                border: approvalStatus === "confirmed"
+                                  ? "1px solid rgba(0, 240, 255, 0.4)"
+                                  : "1px solid rgba(255, 159, 10, 0.4)",
+                                background: approvalStatus === "confirmed"
+                                  ? "rgba(0, 240, 255, 0.05)"
+                                  : "rgba(255, 159, 10, 0.05)",
+                              }}
+                            >
+                              <div className="flex items-center gap-sm" style={{ marginBottom: "10px" }}>
+                                <div
+                                  className="flex items-center gap-xs"
+                                  style={{
+                                    fontSize: "0.78rem",
+                                    fontWeight: 600,
+                                    color: approvalStatus === "confirmed" ? "var(--accent-cyan)" : "rgba(255, 159, 10, 0.9)",
+                                  }}
+                                >
+                                  <div style={{
+                                    width: "20px", height: "20px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
+                                    background: approvalStatus === "confirmed" ? "var(--accent-cyan)" : "rgba(255, 159, 10, 0.2)",
+                                    border: approvalStatus === "confirmed" ? "none" : "1px solid rgba(255, 159, 10, 0.6)",
+                                    fontSize: "0.7rem", color: approvalStatus === "confirmed" ? "#000" : "inherit"
+                                  }}>
+                                    {approvalStatus === "confirmed" ? <Check size={12} /> : "1"}
+                                  </div>
+                                  Approve USDC
+                                </div>
+                                <div style={{ flex: 1, height: "1px", background: "var(--border-glass)" }} />
+                                <div className="flex items-center gap-xs" style={{ fontSize: "0.78rem", fontWeight: 600, color: "var(--text-secondary)" }}>
+                                  <div style={{ width: "20px", height: "20px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,0.05)", border: "1px solid var(--border-glass)", fontSize: "0.7rem" }}>2</div>
+                                  Deposit
+                                </div>
+                              </div>
+                              {approvalStatus !== "confirmed" && (
+                                <button
+                                  type="button"
+                                  className="btn btn-outline"
+                                  style={{ width: "100%", padding: "10px" }}
+                                  disabled={approvalStatus === "pending"}
+                                  onClick={async () => {
+                                    try {
+                                      await approve(enteredAmount);
+                                      toast.success({ title: "USDC Approved" });
+                                    } catch {
+                                      toast.error({ title: "Approval Failed" });
+                                    }
+                                  }}
+                                >
+                                  {approvalStatus === "pending" ? "Approving..." : "Approve USDC"}
+                                </button>
+                              )}
+                            </div>
+                          )}
+                        </div>
+
+                        <div className="flex gap-md" style={{ marginTop: "auto" }}>
+                          <button
+                            type="button"
+                            className="btn btn-outline"
+                            style={{ flex: 1 }}
+                            onClick={() => dashboardUrl.setStep("amount")}
+                            disabled={isBusy}
+                          >
+                            Back
+                          </button>
+                          <button
+                            type="button"
+                            className="btn btn-primary"
+                            style={{ flex: 2 }}
+                            onClick={() => void handleTransaction(tab)}
+                            disabled={
+                              isBusy || 
+                              (tab === "deposit" && needsApproval(enteredAmount) && approvalStatus !== "confirmed") ||
+                              (tab === "deposit" && xlmBalance < feeXlm)
+                            }
+                          >
+                            {isBusy ? (
+                              <>
+                                <Loader2 size={16} className="spin" style={{ animation: "spin 0.9s linear infinite" }} />
+                                Processing...
+                              </>
+                            ) : (
+                              `Confirm ${tab}`
+                            )}
+                          </button>
+                        </div>
+                      </div>
+                    )}
+
+                    {dashboardUrl.state.step === "result" && transactionResult && (
+                      <div className="result-view flex-1 flex flex-col justify-center">
+                        <div className={`result-icon-container ${transactionResult.success ? "success" : "error"} animate-scale-in`}>
+                          {transactionResult.success ? <Check size={32} /> : <AlertTriangle size={32} />}
+                        </div>
+                        <h3 style={{ marginBottom: "12px" }}>
+                          {transactionResult.success ? "Transaction Successful" : "Transaction Failed"}
+                        </h3>
+                        <p style={{ color: "var(--text-secondary)", marginBottom: "32px", maxWidth: "300px" }}>
+                          {transactionResult.message}
+                        </p>
+                        
+                        <button
+                          type="button"
+                          className="btn btn-primary"
+                          style={{ width: "100%", padding: "16px" }}
+                          onClick={resetWizard}
+                        >
+                          {transactionResult.success ? "Done" : "Try Again"}
+                        </button>
+                      </div>
+                    )}
+                  </div>
+              </TabsContent>
+            ))}
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VaultDashboard;
diff --git a/Desktop/vault/YieldVault-RWA/frontend/src/pages/TransactionHistory.tsx b/Desktop/vault/YieldVault-RWA/frontend/src/pages/TransactionHistory.tsx
new file mode 100644
index 00000000..493dd151
--- /dev/null
+++ b/Desktop/vault/YieldVault-RWA/frontend/src/pages/TransactionHistory.tsx
@@ -0,0 +1,735 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import ApiStatusBanner from "../components/ApiStatusBanner";
+import Badge from "../components/Badge";
+import { DataTable, type DataTableColumn } from "../components/DataTable";
+import PageHeader from "../components/PageHeader";
+import TransactionFilterPanel from "../components/TransactionFilterPanel";
+import TransactionTimeline from "../components/TransactionTimeline";
+import EmptyState from "../components/ui/EmptyState";
+import { Activity, Loader2 } from "../components/icons";
+import { useTransactionTimeline } from "../hooks/useTransactionTimeline";
+import {
+  normalizeApiError,
+  isValidationError,
+  type ApiError,
+  type ValidationError,
+} from "../lib/api";
+import {
+  formatAmount,
+  formatTimestamp,
+  truncateHash,
+  getTransactions,
+  type Transaction,
+} from "../lib/transactionApi";
+import { useClientDataTable } from "../hooks/useClientDataTable";
+import { useDataTableState } from "../hooks/useDataTableState";
+import { useInfiniteScroll } from "../hooks/useInfiniteScroll";
+import { useTransactionFilters } from "../hooks/useTransactionFilters";
+import { useTransactionHistory } from "../hooks/useTransactionData";
+import { getStellarExplorerUrl } from "../lib/security";
+import { networkConfig } from "../config/network";
+import RefreshControl from "../components/RefreshControl";
+import CopyButton from "../components/CopyButton";
+
+import { useDelayedLoading } from "../hooks/useDelayedLoading";
+
+interface TransactionHistoryProps {
+  walletAddress: string | null;
+}
+
+type TxTypeFilter = "all" | "deposit" | "withdrawal";
+type ViewMode = "paginated" | "infinite";
+const DEFAULT_PAGE_SIZE = 10;
+const INFINITE_SCROLL_BATCH_SIZE = 20;
+const PAGE_SIZE_OPTIONS = [10, 25, 50] as const;
+
+function getPageSizeStorageKey(walletAddress: string | null): string {
+  return `yieldvault:transactions:page-size:${walletAddress ?? "guest"}`;
+}
+
+function getViewModeStorageKey(walletAddress: string | null): string {
+  return `yieldvault:transactions:view-mode:${walletAddress ?? "guest"}`;
+}
+
+function loadPreferredPageSize(walletAddress: string | null): number {
+  try {
+    const raw = localStorage.getItem(getPageSizeStorageKey(walletAddress));
+    const parsed = raw ? Number(raw) : Number.NaN;
+    if (PAGE_SIZE_OPTIONS.includes(parsed as (typeof PAGE_SIZE_OPTIONS)[number])) {
+      return parsed;
+    }
+  } catch {
+    // localStorage unavailable; fall back to defaults
+  }
+  return DEFAULT_PAGE_SIZE;
+}
+
+function persistPreferredPageSize(walletAddress: string | null, pageSize: number): void {
+  try {
+    localStorage.setItem(getPageSizeStorageKey(walletAddress), String(pageSize));
+  } catch {
+    // localStorage unavailable; silently ignore
+  }
+}
+
+function loadViewMode(walletAddress: string | null): ViewMode {
+  try {
+    const raw = localStorage.getItem(getViewModeStorageKey(walletAddress));
+    if (raw === "paginated" || raw === "infinite") {
+      return raw;
+    }
+  } catch {
+    // localStorage unavailable
+  }
+  return "paginated";
+}
+
+function persistViewMode(walletAddress: string | null, mode: ViewMode): void {
+  try {
+    localStorage.setItem(getViewModeStorageKey(walletAddress), mode);
+  } catch {
+    // localStorage unavailable
+  }
+}
+const STATUS_COLOR_MAP: Record<Transaction["status"], "success" | "warning" | "error"> = {
+  completed: "success",
+  pending: "warning",
+  failed: "error",
+};
+
+/** Inline panel shown below a pending transaction row to track its live state. */
+const PendingTimelinePanel: React.FC<{ txHash: string; onDismiss: () => void }> = ({
+  txHash,
+  onDismiss,
+}) => {
+  const { status, elapsedSeconds, errorMessage } = useTransactionTimeline({ txHash });
+
+  return (
+    <div
+      className="glass-panel"
+      style={{
+        padding: "16px 20px",
+        margin: "8px 0",
+        border: "1px solid var(--border-glass-glow)",
+        borderRadius: "var(--radius-md)",
+      }}
+    >
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "12px" }}>
+        <span style={{ fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-secondary)" }}>
+          Live Status
+        </span>
+        <button
+          type="button"
+          onClick={onDismiss}
+          aria-label="Dismiss timeline"
+          style={{
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "var(--text-tertiary)",
+            fontSize: "var(--text-sm)",
+            padding: "2px 6px",
+          }}
+        >
+          ✕
+        </button>
+      </div>
+      <TransactionTimeline
+        status={status}
+        txHash={txHash}
+        elapsedSeconds={elapsedSeconds}
+        errorMessage={errorMessage}
+      />
+    </div>
+  );
+};
+
+const TransactionHistory: React.FC<TransactionHistoryProps> = ({
+  walletAddress,
+}) => {
+  const navigate = useNavigate();
+  const { data: queryTransactions, isLoading, error: queryError } = useTransactionHistory(walletAddress);
+  const delayedLoading = useDelayedLoading(isLoading);
+  const transactions = queryTransactions ?? [];
+
+  const [selectedPendingHash, setSelectedPendingHash] = useState<string | null>(null);
+
+  const columns: DataTableColumn<Transaction>[] = React.useMemo(() => [
+    {
+      id: "type",
+      header: "Type",
+      sortable: true,
+      cell: (row) => (
+        <Badge variant="status" color={row.type === "deposit" ? "cyan" : "error"}>
+          {row.type}
+        </Badge>
+      ),
+    },
+    {
+      id: "status",
+      header: "Status",
+      sortable: true,
+      cell: (row) => (
+        <button
+          type="button"
+          onClick={row.status === "pending" ? () => setSelectedPendingHash(
+            selectedPendingHash === row.transactionHash ? null : row.transactionHash
+          ) : undefined}
+          style={{
+            background: "none",
+            border: "none",
+            padding: 0,
+            cursor: row.status === "pending" ? "pointer" : "default",
+          }}
+          title={row.status === "pending" ? "Click to track live status" : undefined}
+          aria-expanded={row.status === "pending" ? selectedPendingHash === row.transactionHash : undefined}
+        >
+          <Badge
+            variant="status"
+            color={STATUS_COLOR_MAP[row.status]}
+            icon={row.status === "pending" ? <Loader2 size={12} className="animate-spin" /> : undefined}
+          >
+            {row.status}
+          </Badge>
+        </button>
+      ),
+    },
+    {
+      id: "amount",
+      header: "Amount",
+      sortable: true,
+      cell: (row) => <span>{formatAmount(row.amount, row.asset)}</span>,
+    },
+    {
+      id: "asset",
+      header: "Asset",
+      sortable: false,
+      cell: (row) => <span>{row.asset ?? "—"}</span>,
+    },
+    {
+      id: "date",
+      header: "Date",
+      sortable: true,
+      cell: (row) => <span>{formatTimestamp(row.timestamp)}</span>,
+    },
+    {
+      id: "hash",
+      header: "Transaction Hash",
+      sortable: false,
+      cell: (row) => (
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <a
+            href={getStellarExplorerUrl(
+              row.transactionHash,
+              networkConfig.isTestnet ? "testnet" : "mainnet",
+            )}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: "var(--accent-cyan)", textDecoration: "none" }}
+            title={row.transactionHash}
+          >
+            {truncateHash(row.transactionHash)}
+          </a>
+          <CopyButton value={row.transactionHash} label="transaction hash" />
+        </div>
+      ),
+    },
+  ], [selectedPendingHash]);
+
+  const error = queryError 
+    ? (isValidationError(queryError) ? queryError : normalizeApiError(queryError)) 
+    : null;
+
+  const preferredPageSize = React.useMemo(
+    () => loadPreferredPageSize(walletAddress),
+    [walletAddress],
+  );
+
+  // View mode state
+  const [viewMode, setViewMode] = useState<ViewMode>(() => loadViewMode(walletAddress));
+
+  // Infinite scroll state
+  const [visibleCount, setVisibleCount] = useState(INFINITE_SCROLL_BATCH_SIZE);
+  const [hasMoreItems, setHasMoreItems] = useState(true);
+  const loadMoreLockRef = useRef(false);
+
+  // ── Sort / pagination state (URL-synced via useDataTableState) ──────────
+  const { state, setSearch, setSort, setPage, setPageSize } = useDataTableState(
+    {
+      defaultSortBy: "date",
+      defaultSortDirection: "desc",
+      defaultPageSize: preferredPageSize,
+    },
+  );
+
+  // ── Multi-filter state (URL-synced via useTransactionFilters) ───────────
+  const {
+    filters,
+    hasActiveFilters,
+    setSearch: setFilterSearch,
+    setTypes,
+    setStatuses,
+    setDateFrom,
+    setDateTo,
+    setAmountMin,
+    setAmountMax,
+    clearAll,
+    setAsset,
+  } = useTransactionFilters();
+
+  // Keep useDataTableState's search in sync with the filter panel's search
+  // so that useClientDataTable's text-search logic still runs correctly.
+  const [searchParams] = useSearchParams();
+  useEffect(() => {
+    const urlSearch = searchParams.get("search") ?? "";
+    if (urlSearch !== state.search) {
+      setSearch(urlSearch);
+    }
+  }, [searchParams, state.search, setSearch]);
+
+  // Client-side filtering is handled by useClientDataTable.
+
+  // ── Client-side filtering ───────────────────────────────────────────────
+  const { rows, sortedRows, page, totalItems, totalPages } = useClientDataTable(
+    {
+      rows: transactions,
+      state,
+      getSearchValue: (row) =>
+        `${row.type} ${row.asset ?? ""} ${row.transactionHash}`,
+      getSortValue: (row, columnId) => {
+        switch (columnId) {
+          case "type":
+            return row.type;
+          case "status":
+            return row.status;
+          case "amount":
+            return row.amount !== null ? parseFloat(row.amount) : 0;
+          case "date":
+            return row.timestamp;
+          default:
+            return row.timestamp;
+        }
+      },
+      filterRow: (row) => {
+        // Multi-type filter (client-side)
+        if (filters.types.length > 0 && !filters.types.includes(row.type)) {
+          return false;
+        }
+
+        // Status filter (client-side)
+        if (
+          filters.statuses.length > 0 &&
+          !filters.statuses.includes(row.status)
+        ) {
+          return false;
+        }
+
+        // Date range
+        if (filters.dateFrom) {
+          const from = new Date(filters.dateFrom);
+          from.setHours(0, 0, 0, 0);
+          if (new Date(row.timestamp) < from) return false;
+        }
+        if (filters.dateTo) {
+          const to = new Date(filters.dateTo);
+          to.setHours(23, 59, 59, 999);
+          if (new Date(row.timestamp) > to) return false;
+        }
+
+        // Amount range (numeric)
+        if (filters.amountMin !== "" && row.amount !== null) {
+          const min = parseFloat(filters.amountMin);
+          const amt = parseFloat(row.amount);
+          if (!isNaN(min) && !isNaN(amt) && amt < min) return false;
+        }
+        if (filters.amountMax !== "" && row.amount !== null) {
+          const max = parseFloat(filters.amountMax);
+          const amt = parseFloat(row.amount);
+          if (!isNaN(max) && !isNaN(amt) && amt > max) return false;
+        }
+
+        return true;
+      },
+    },
+  );
+
+  // Available assets for the asset filter (unique, non-empty)
+  const assetOptions = React.useMemo(() => {
+    const set = new Set<string>();
+    for (const t of transactions) {
+      if (t.asset) set.add(t.asset);
+    }
+    return Array.from(set).sort();
+  }, [transactions]);
+
+  // Infinite scroll: compute visible rows from sorted/filtered set
+  const infiniteScrollRows = React.useMemo(() => {
+    return sortedRows.slice(0, visibleCount);
+  }, [sortedRows, visibleCount]);
+
+  // Update hasMoreItems when the data or visibleCount changes
+  useEffect(() => {
+    setHasMoreItems(visibleCount < sortedRows.length);
+  }, [visibleCount, sortedRows.length]);
+
+  // Reset visible count when filters/search/sort change
+  useEffect(() => {
+    setVisibleCount(INFINITE_SCROLL_BATCH_SIZE);
+  }, [
+    state.search,
+    state.sortBy,
+    state.sortDirection,
+    filters.types,
+    filters.dateFrom,
+    filters.dateTo,
+  ]);
+
+  // Handle loading more items for infinite scroll
+  const handleLoadMore = useCallback(() => {
+    if (loadMoreLockRef.current || !hasMoreItems) return;
+    loadMoreLockRef.current = true;
+
+    setVisibleCount((prev) => {
+      const next = Math.min(prev + INFINITE_SCROLL_BATCH_SIZE, sortedRows.length);
+      return next;
+    });
+
+    // Release lock after a small delay to prevent rapid-fire calls
+    setTimeout(() => {
+      loadMoreLockRef.current = false;
+    }, 100);
+  }, [hasMoreItems, sortedRows.length]);
+
+  const { sentinelRef, isLoadingMore } = useInfiniteScroll(handleLoadMore, {
+    enabled: viewMode === "infinite" && hasMoreItems && !isLoading,
+    threshold: 200,
+  });
+
+  // View mode toggle handler
+  const handleViewModeChange = (mode: ViewMode) => {
+    setViewMode(mode);
+    persistViewMode(walletAddress, mode);
+    if (mode === "infinite") {
+      setVisibleCount(INFINITE_SCROLL_BATCH_SIZE);
+    }
+  };
+
+  // ── CSV export ──────────────────────────────────────────────────────────
+  const buildCsvContent = (transactionsToExport: Transaction[]) => {
+    const headers = ["date", "type", "status", "amount", "share price", "fee", "tx hash"];
+
+    const escapeCsvValue = (value: string) => `"${value.replace(/"/g, '""')}"`;
+
+    const csvRows = transactionsToExport.map((transaction) => [
+      formatTimestamp(transaction.timestamp),
+      transaction.type,
+      transaction.status,
+      formatAmount(transaction.amount, transaction.asset),
+      "",
+      "",
+      transaction.transactionHash,
+    ]);
+
+    return [headers, ...csvRows]
+      .map((columns) => columns.map(escapeCsvValue).join(","))
+      .join("\r\n");
+  };
+
+  const handleExportCsv = () => {
+    const csvContent = buildCsvContent(sortedRows);
+    const fileName = `transactions_${new Date().toISOString().slice(0, 10)}.csv`;
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url =
+      typeof URL !== "undefined" && URL.createObjectURL
+        ? URL.createObjectURL(blob)
+        : `data:text/csv;charset=utf-8,${encodeURIComponent(csvContent)}`;
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", fileName);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    if (
+      typeof URL !== "undefined" &&
+      URL.revokeObjectURL &&
+      url.startsWith("blob:")
+    ) {
+      URL.revokeObjectURL(url);
+    }
+  };
+
+  // ── Empty state ─────────────────────────────────────────────────────────
+  const emptyMessage = (
+    <EmptyState
+      kind={hasActiveFilters ? "no-results" : "no-data"}
+      title={hasActiveFilters ? "No transactions found" : "No transactions yet"}
+      description={
+        hasActiveFilters
+          ? "No transactions match your current filters."
+          : "Once you make a deposit or withdrawal, it will appear here."
+      }
+      icon={<Activity size={24} />}
+      {...(hasActiveFilters
+        ? { actionLabel: "Reset filters", onAction: clearAll }
+        : {
+            actionLabel: "Deposit Now",
+            onAction: () => navigate("/"),
+          })}
+    />
+  );
+
+  // Determine which rows to show based on view mode
+  const displayRows = viewMode === "infinite" ? infiniteScrollRows : rows;
+
+  return (
+    <div className="glass-panel" style={{ padding: "32px" }}>
+      <PageHeader
+        title={
+          <>
+            Transaction <span className="text-gradient">History</span>
+          </>
+        }
+        description="View all your past deposits and withdrawals."
+        breadcrumbs={[{ label: "Home", href: "/" }, { label: "Transactions" }]}
+        statusChips={
+          walletAddress
+            ? [
+                {
+                  label: `${transactions.length} Total`,
+                  variant: "cyan",
+                },
+                {
+                  label: isLoading ? "Loading..." : "Up to date",
+                  variant: isLoading ? "warning" : "success",
+                },
+              ]
+            : undefined
+        }
+      />
+
+      {!walletAddress ? (
+        <div style={{ textAlign: "center", padding: "48px" }}>
+          <p style={{ color: "var(--text-secondary)" }}>
+            Please connect your wallet to view your transaction history.
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-lg">
+          {error && <ApiStatusBanner error={error} />}
+
+          {/* ── Filter panel ──────────────────────────────────────── */}
+          <TransactionFilterPanel
+            filters={filters}
+            onSearchChange={setFilterSearch}
+            onTypesChange={setTypes}
+            onStatusesChange={setStatuses}
+            assets={assetOptions}
+            onAssetChange={setAsset}
+            onDateFromChange={setDateFrom}
+            onDateToChange={setDateTo}
+            onAmountMinChange={setAmountMin}
+            onAmountMaxChange={setAmountMax}
+            onClearAll={clearAll}
+            hasActiveFilters={hasActiveFilters}
+          />
+
+          {/* ── Data table ────────────────────────────────────────── */}
+          <section
+            className="glass-panel"
+            style={{ padding: "24px", background: "var(--bg-muted)" }}
+            aria-labelledby="transactions-heading"
+          >
+            <div className="portfolio-toolbar">
+              <div>
+                <h2 id="transactions-heading" style={{ marginBottom: "6px" }}>
+                  Transactions
+                </h2>
+                <p
+                  className="text-body-sm"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Sort and filter your deposit and withdrawal history.
+                </p>
+              </div>
+
+              <div className="portfolio-toolbar-controls">
+                <label className="input-group" style={{ minWidth: "120px" }}>
+                  <span className="text-body-sm">Rows</span>
+                  <div className="input-wrapper">
+                    <select
+                      aria-label="Rows per page"
+                      value={state.pageSize}
+                      onChange={(e) => {
+                        const nextSize = Number(e.target.value);
+                        persistPreferredPageSize(walletAddress, nextSize);
+                        setPageSize(nextSize);
+                      }}
+                      className="portfolio-select"
+                    >
+                      <option value={10}>10</option>
+                      <option value={25}>25</option>
+                      <option value={50}>50</option>
+                    </select>
+                  </div>
+                </label>
+
+                {/* View Mode Toggle */}
+                <div className="input-group" style={{ minWidth: "140px" }}>
+                  <span className="text-body-sm">View</span>
+                  <div className="infinite-scroll-toggle" role="radiogroup" aria-label="View mode">
+                    <button
+                      type="button"
+                      role="radio"
+                      aria-checked={viewMode === "paginated"}
+                      className={`infinite-scroll-toggle-btn ${viewMode === "paginated" ? "active" : ""}`}
+                      onClick={() => handleViewModeChange("paginated")}
+                      title="Paginated view"
+                    >
+                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                        <rect x="1" y="1" width="14" height="3" rx="0.5" fill="currentColor" opacity="0.8" />
+                        <rect x="1" y="6" width="14" height="3" rx="0.5" fill="currentColor" opacity="0.5" />
+                        <rect x="1" y="11" width="14" height="3" rx="0.5" fill="currentColor" opacity="0.3" />
+                      </svg>
+                      <span className="sr-only">Pages</span>
+                    </button>
+                    <button
+                      type="button"
+                      role="radio"
+                      aria-checked={viewMode === "infinite"}
+                      className={`infinite-scroll-toggle-btn ${viewMode === "infinite" ? "active" : ""}`}
+                      onClick={() => handleViewModeChange("infinite")}
+                      title="Infinite scroll view"
+                    >
+                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                        <rect x="1" y="1" width="14" height="2" rx="0.5" fill="currentColor" opacity="0.9" />
+                        <rect x="1" y="4.5" width="14" height="2" rx="0.5" fill="currentColor" opacity="0.7" />
+                        <rect x="1" y="8" width="14" height="2" rx="0.5" fill="currentColor" opacity="0.5" />
+                        <rect x="1" y="11.5" width="14" height="2" rx="0.5" fill="currentColor" opacity="0.3" />
+                        <path d="M8 14.5L5 12.5H11L8 14.5Z" fill="currentColor" opacity="0.6" />
+                      </svg>
+                      <span className="sr-only">Scroll</span>
+                    </button>
+                  </div>
+                </div>
+
+                <button
+                  type="button"
+                  className="btn btn-secondary"
+                  onClick={handleExportCsv}
+                  style={{ alignSelf: "flex-end", height: "42px" }}
+                >
+                  Export CSV
+                </button>
+              </div>
+            </div>
+
+            <div
+              className="text-body-sm"
+              style={{ color: "var(--text-secondary)", marginBottom: "16px" }}
+            >
+              {delayedLoading
+                ? <SkeletonText width="180px" />
+                : viewMode === "infinite"
+                  ? `Showing ${infiniteScrollRows.length} of ${sortedRows.length} transactions`
+                  : `${totalItems} transactions found`}
+            </div>
+
+            {viewMode === "infinite" ? (
+              /* Infinite Scroll View */
+              <div className="infinite-scroll-container">
+                <DataTable
+                  caption="Transaction history"
+                  columns={columns}
+                  rows={displayRows}
+                  rowKey={(row) => row.id}
+                  emptyMessage={emptyMessage}
+                  isLoading={delayedLoading}
+                  skeletonRows={state.pageSize}
+                  sortBy={state.sortBy}
+                  sortDirection={state.sortDirection}
+                  onSortChange={setSort}
+                />
+
+                {/* Infinite scroll sentinel & status */}
+                {sortedRows.length > 0 && (
+                  <div className="infinite-scroll-footer">
+                    {hasMoreItems ? (
+                      <>
+                        <div
+                          ref={sentinelRef}
+                          className="infinite-scroll-sentinel"
+                          data-testid="infinite-scroll-sentinel"
+                          aria-hidden="true"
+                        />
+                        {isLoadingMore && (
+                          <div className="infinite-scroll-loader" aria-live="polite">
+                            <div className="infinite-scroll-spinner" />
+                            <span>Loading more transactions...</span>
+                          </div>
+                        )}
+                      </>
+                    ) : (
+                      <div
+                        className="infinite-scroll-end"
+                        role="status"
+                        aria-live="polite"
+                      >
+                        <div className="infinite-scroll-end-line" />
+                        <span>All {sortedRows.length} transactions loaded</span>
+                        <div className="infinite-scroll-end-line" />
+                      </div>
+                    )}
+
+                    {/* Progress indicator */}
+                    <div className="infinite-scroll-progress" aria-hidden="true">
+                      <div
+                        className="infinite-scroll-progress-bar"
+                        style={{
+                          width: `${Math.min(100, (infiniteScrollRows.length / sortedRows.length) * 100)}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            ) : (
+              /* Paginated View (original) */
+              <DataTable
+                caption="Transaction history"
+                columns={columns}
+                rows={displayRows}
+                rowKey={(row) => row.id}
+                emptyMessage={emptyMessage}
+                isLoading={delayedLoading}
+                skeletonRows={state.pageSize}
+                sortBy={state.sortBy}
+                sortDirection={state.sortDirection}
+                onSortChange={setSort}
+                pagination={{
+                  page,
+                  pageSize: state.pageSize,
+                  totalItems,
+                  totalPages,
+                }}
+                onPageChange={setPage}
+              />
+            )}
+
+            {/* Live timeline for selected pending transaction */}
+            {selectedPendingHash && (
+              <PendingTimelinePanel
+                txHash={selectedPendingHash}
+                onDismiss={() => setSelectedPendingHash(null)}
+              />
+            )}
+          </section>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TransactionHistory;
diff --git a/Desktop/vault/YieldVault-RWA/frontend/src/pages/TransactionReceipt.tsx b/Desktop/vault/YieldVault-RWA/frontend/src/pages/TransactionReceipt.tsx
new file mode 100644
index 00000000..b021e14a
--- /dev/null
+++ b/Desktop/vault/YieldVault-RWA/frontend/src/pages/TransactionReceipt.tsx
@@ -0,0 +1,198 @@
+import { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import CopyButton from "../components/CopyButton";
+
+const HORIZON_BASE = "https://horizon-testnet.stellar.org";
+const EXPLORER_BASE = "https://stellar.expert/explorer/testnet/tx";
+
+interface TxDetails {
+  hash: string;
+  created_at: string;
+  fee_charged: string;
+  source_account: string;
+  operation_count: number;
+  memo?: string;
+  // Derived from first payment operation
+  type?: "deposit" | "withdrawal";
+  amount?: string;
+  asset?: string;
+}
+
+interface HorizonTx {
+  hash: string;
+  created_at: string;
+  fee_charged: string;
+  source_account: string;
+  operation_count: number;
+  memo?: string;
+}
+
+interface HorizonOp {
+  type: string;
+  amount?: string;
+  asset_type?: string;
+  asset_code?: string;
+  from?: string;
+  to?: string;
+}
+
+export default function TransactionReceipt() {
+  const { txHash } = useParams<{ txHash: string }>();
+  const [tx, setTx] = useState<TxDetails | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!txHash) return;
+
+    async function fetchTx() {
+      try {
+        const [txRes, opsRes] = await Promise.all([
+          fetch(`${HORIZON_BASE}/transactions/${txHash}`),
+          fetch(`${HORIZON_BASE}/transactions/${txHash}/operations`),
+        ]);
+
+        if (!txRes.ok) throw new Error(`Transaction not found (${txRes.status})`);
+
+        const txData = (await txRes.json()) as HorizonTx;
+        const opsData = opsRes.ok
+          ? (await opsRes.json() as { _embedded: { records: HorizonOp[] } })
+          : null;
+
+        const paymentOp = opsData?._embedded?.records?.find(
+          (op) => op.type === "payment",
+        );
+
+        setTx({
+          hash: txData.hash,
+          created_at: txData.created_at,
+          fee_charged: txData.fee_charged,
+          source_account: txData.source_account,
+          operation_count: txData.operation_count,
+          memo: txData.memo,
+          type: paymentOp ? "deposit" : undefined,
+          amount: paymentOp?.amount,
+          asset:
+            paymentOp?.asset_type === "native"
+              ? "XLM"
+              : (paymentOp?.asset_code ?? undefined),
+        });
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load transaction");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    void fetchTx();
+  }, [txHash]);
+
+  if (loading) {
+    return (
+      <div className="receipt-page">
+        <p className="receipt-loading">Loading transaction…</p>
+      </div>
+    );
+  }
+
+  if (error || !tx) {
+    return (
+      <div className="receipt-page">
+        <p className="receipt-error">{error ?? "Transaction not found."}</p>
+        <Link to="/" className="receipt-back-link">← Back to app</Link>
+      </div>
+    );
+  }
+
+  const feeXlm = (parseInt(tx.fee_charged, 10) / 1e7).toFixed(7);
+  const date = new Date(tx.created_at).toLocaleString("en-US", {
+    dateStyle: "long",
+    timeStyle: "short",
+  });
+
+  return (
+    <div className="receipt-page">
+      <div className="receipt-card" role="main" aria-label="Transaction Receipt">
+        <header className="receipt-header">
+          <h1 className="receipt-title">Transaction Receipt</h1>
+          <p className="receipt-subtitle">YieldVault · Stellar Network</p>
+        </header>
+
+        <dl className="receipt-fields">
+          <div className="receipt-row">
+            <dt>Date</dt>
+            <dd>{date}</dd>
+          </div>
+          {tx.type && (
+            <div className="receipt-row">
+              <dt>Type</dt>
+              <dd className={`receipt-badge receipt-badge--${tx.type}`}>
+                {tx.type.charAt(0).toUpperCase() + tx.type.slice(1)}
+              </dd>
+            </div>
+          )}
+          {tx.amount && tx.asset && (
+            <div className="receipt-row">
+              <dt>Amount</dt>
+              <dd>
+                {parseFloat(tx.amount).toLocaleString("en-US", {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 7,
+                })}{" "}
+                {tx.asset}
+              </dd>
+            </div>
+          )}
+          <div className="receipt-row">
+            <dt>Network Fee</dt>
+            <dd>{feeXlm} XLM</dd>
+          </div>
+          <div className="receipt-row">
+            <dt>Wallet Address</dt>
+            <dd className="receipt-mono receipt-truncate" style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <span title={tx.source_account} style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+                {tx.source_account}
+              </span>
+              <CopyButton value={tx.source_account} label="wallet address" />
+            </dd>
+          </div>
+          <div className="receipt-row">
+            <dt>Transaction Hash</dt>
+            <dd className="receipt-mono receipt-truncate" style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <a
+                href={`${EXPLORER_BASE}/${tx.hash}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="receipt-explorer-link"
+                title={tx.hash}
+                style={{ overflow: "hidden", textOverflow: "ellipsis" }}
+              >
+                {tx.hash}
+              </a>
+              <CopyButton value={tx.hash} label="transaction hash" />
+            </dd>
+          </div>
+          {tx.memo && (
+            <div className="receipt-row">
+              <dt>Memo</dt>
+              <dd>{tx.memo}</dd>
+            </div>
+          )}
+        </dl>
+
+        <div className="receipt-actions no-print">
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={() => window.print()}
+          >
+            Print Receipt
+          </button>
+          <Link to="/transactions" className="btn btn-secondary">
+            View All Transactions
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}