@tbookdev/vault-react 0.1.0

package/dist/index.js

@@ -0,0 +1,810 @@
+import React2, { createContext, useMemo, useContext, useState, useCallback } from 'react';
+import { useConnection, useWallet } from '@solana/wallet-adapter-react';
+import { RpcTimeoutError, VaultPausedError, SharePriceUnavailableError, VaultSdkError, TBookVault, confirmTransactionWithRetry, explorerUrl } from '@tbookdev/vault-sdk';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useQuery, useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { PublicKey } from '@solana/web3.js';
+import { getAssociatedTokenAddress } from '@solana/spl-token';
+
+// src/provider.tsx
+var TBookVaultContext = createContext(null);
+function TBookVaultProvider({
+  network,
+  apiKey,
+  rpcUrl,
+  children
+}) {
+  const { connection } = useConnection();
+  const vault = useMemo(() => {
+    return new TBookVault({
+      network,
+      apiKey,
+      // Use the wallet adapter's RPC URL if no explicit rpcUrl provided
+      rpcUrl: rpcUrl ?? connection.rpcEndpoint
+    });
+  }, [network, apiKey, rpcUrl, connection.rpcEndpoint]);
+  const value = useMemo(
+    () => ({ vault, network }),
+    [vault, network]
+  );
+  return /* @__PURE__ */ jsx(TBookVaultContext.Provider, { value, children });
+}
+function useTBookVault() {
+  const ctx = useContext(TBookVaultContext);
+  if (!ctx) {
+    throw new Error(
+      'useTBookVault must be used within a <TBookVaultProvider>. Wrap your app with <TBookVaultProvider network="devnet"> to fix this.'
+    );
+  }
+  return ctx;
+}
+function useVaultInfo(vaultId) {
+  const { vault } = useTBookVault();
+  return useQuery({
+    queryKey: ["tbook", "vault", vaultId],
+    queryFn: () => vault.getVaultInfo(vaultId),
+    staleTime: 3e4,
+    refetchInterval: 6e4
+  });
+}
+function useVault(vaultId) {
+  const { data, ...rest } = useVaultInfo(vaultId);
+  return { vault: data?.vault ?? null, ...rest };
+}
+function useCurrentDepositEpoch(vaultId) {
+  const { data, ...rest } = useVaultInfo(vaultId);
+  return { epoch: data?.depositEpoch ?? null, ...rest };
+}
+function useCurrentRedeemEpoch(vaultId) {
+  const { data, ...rest } = useVaultInfo(vaultId);
+  return { epoch: data?.redeemEpoch ?? null, ...rest };
+}
+function useVaultUser(vaultId) {
+  const { vault } = useTBookVault();
+  const { publicKey } = useWallet();
+  return useQuery({
+    queryKey: ["tbook", "user", publicKey?.toString(), vaultId],
+    queryFn: () => vault.getUserAccount(publicKey, vaultId),
+    enabled: !!publicKey,
+    staleTime: 3e4,
+    refetchInterval: 6e4
+  });
+}
+function useSharePrice() {
+  const { vault } = useTBookVault();
+  return useQuery({
+    queryKey: ["tbook", "share-price"],
+    queryFn: () => vault.getSharePrice(),
+    staleTime: 6e4,
+    refetchInterval: 3e5,
+    // 5 minutes
+    retry: 2
+  });
+}
+async function fetchUsdcBalance(connection, publicKey, usdcMint) {
+  try {
+    const ata = await getAssociatedTokenAddress(usdcMint, publicKey);
+    const balance = await connection.getTokenAccountBalance(ata);
+    return balance.value.uiAmount ?? 0;
+  } catch {
+    return 0;
+  }
+}
+function useUsdcBalance() {
+  const { connection } = useConnection();
+  const { publicKey } = useWallet();
+  const { vault } = useVault();
+  const usdcMint = vault?.usdcMint ?? null;
+  return useQuery({
+    queryKey: ["tbook", "usdc-balance", publicKey?.toString()],
+    queryFn: () => fetchUsdcBalance(
+      connection,
+      publicKey,
+      usdcMint instanceof PublicKey ? usdcMint : new PublicKey(usdcMint)
+    ),
+    enabled: !!publicKey && !!usdcMint,
+    staleTime: 3e4,
+    refetchInterval: 6e4
+  });
+}
+function useTransactionHistory(options) {
+  const { vault } = useTBookVault();
+  const { publicKey } = useWallet();
+  const limit = options?.limit ?? 20;
+  const vaultId = options?.vaultId;
+  return useInfiniteQuery({
+    queryKey: ["tbook", "history", publicKey?.toString(), vaultId],
+    queryFn: ({ pageParam }) => vault.getTransactionHistory(
+      publicKey,
+      { limit, before: pageParam },
+      vaultId
+    ),
+    initialPageParam: void 0,
+    getNextPageParam: (lastPage) => lastPage.length > 0 ? lastPage[lastPage.length - 1].signature : void 0,
+    enabled: !!publicKey,
+    staleTime: 6e4
+  });
+}
+function useRefreshVaultData() {
+  const queryClient = useQueryClient();
+  const { publicKey } = useWallet();
+  return () => {
+    queryClient.invalidateQueries({ queryKey: ["tbook", "vault"] });
+    queryClient.invalidateQueries({ queryKey: ["tbook", "share-price"] });
+    if (publicKey) {
+      queryClient.invalidateQueries({
+        queryKey: ["tbook", "user", publicKey.toString()]
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["tbook", "usdc-balance", publicKey.toString()]
+      });
+    }
+  };
+}
+function useDeposit(vaultId) {
+  const { vault } = useTBookVault();
+  const { publicKey, sendTransaction } = useWallet();
+  const { connection } = useConnection();
+  const refreshData = useRefreshVaultData();
+  return useMutation({
+    mutationFn: async (amountUsdc) => {
+      if (!publicKey) throw new Error("Wallet not connected");
+      const { transaction, blockhash, lastValidBlockHeight } = await vault.buildDeposit({ user: publicKey, amountUsdc }, vaultId);
+      const signature = await sendTransaction(transaction, connection);
+      await confirmTransactionWithRetry({
+        connection,
+        signature,
+        blockhash,
+        lastValidBlockHeight
+      });
+      return signature;
+    },
+    onSuccess: () => {
+      refreshData();
+    }
+  });
+}
+function useRedeem(vaultId) {
+  const { vault } = useTBookVault();
+  const { publicKey, sendTransaction } = useWallet();
+  const { connection } = useConnection();
+  const refreshData = useRefreshVaultData();
+  return useMutation({
+    mutationFn: async (shares) => {
+      if (!publicKey) throw new Error("Wallet not connected");
+      const { transaction, blockhash, lastValidBlockHeight } = await vault.buildRedeem({ user: publicKey, shares }, vaultId);
+      const signature = await sendTransaction(transaction, connection);
+      await confirmTransactionWithRetry({
+        connection,
+        signature,
+        blockhash,
+        lastValidBlockHeight
+      });
+      return signature;
+    },
+    onSuccess: () => {
+      refreshData();
+    }
+  });
+}
+function useClaim(vaultId) {
+  const { vault } = useTBookVault();
+  const { publicKey, sendTransaction } = useWallet();
+  const { connection } = useConnection();
+  const refreshData = useRefreshVaultData();
+  return useMutation({
+    mutationFn: async () => {
+      if (!publicKey) throw new Error("Wallet not connected");
+      const { transaction, blockhash, lastValidBlockHeight } = await vault.buildClaim({ user: publicKey }, vaultId);
+      const signature = await sendTransaction(transaction, connection);
+      await confirmTransactionWithRetry({
+        connection,
+        signature,
+        blockhash,
+        lastValidBlockHeight
+      });
+      return signature;
+    },
+    onSuccess: () => {
+      refreshData();
+    }
+  });
+}
+function useCancelDeposit(vaultId) {
+  const { vault } = useTBookVault();
+  const { publicKey, sendTransaction } = useWallet();
+  const { connection } = useConnection();
+  const refreshData = useRefreshVaultData();
+  return useMutation({
+    mutationFn: async () => {
+      if (!publicKey) throw new Error("Wallet not connected");
+      const { transaction, blockhash, lastValidBlockHeight } = await vault.buildCancelDeposit({ user: publicKey }, vaultId);
+      const signature = await sendTransaction(transaction, connection);
+      await confirmTransactionWithRetry({
+        connection,
+        signature,
+        blockhash,
+        lastValidBlockHeight
+      });
+      return signature;
+    },
+    onSuccess: () => {
+      refreshData();
+    }
+  });
+}
+
+// src/components/styles.ts
+var baseStyles = {
+  container: {
+    fontFamily: "var(--tbook-font, inherit)",
+    color: "var(--tbook-text, #111827)",
+    background: "var(--tbook-bg, #ffffff)",
+    border: "1px solid var(--tbook-border, #e5e7eb)",
+    borderRadius: "var(--tbook-radius, 8px)",
+    padding: "16px"
+  },
+  label: {
+    fontSize: "12px",
+    fontWeight: 500,
+    color: "var(--tbook-text-secondary, #6b7280)",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    marginBottom: "4px"
+  },
+  value: {
+    fontSize: "24px",
+    fontWeight: 700,
+    color: "var(--tbook-text, #111827)",
+    lineHeight: 1.2
+  },
+  smallValue: {
+    fontSize: "14px",
+    fontWeight: 500,
+    color: "var(--tbook-text, #111827)"
+  },
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "10px 20px",
+    fontSize: "14px",
+    fontWeight: 600,
+    color: "#ffffff",
+    background: "var(--tbook-primary, #6366f1)",
+    border: "none",
+    borderRadius: "var(--tbook-radius, 8px)",
+    cursor: "pointer",
+    transition: "background 0.15s",
+    width: "100%"
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  input: {
+    width: "100%",
+    padding: "10px 12px",
+    fontSize: "16px",
+    border: "1px solid var(--tbook-border, #e5e7eb)",
+    borderRadius: "var(--tbook-radius, 8px)",
+    background: "var(--tbook-bg, #ffffff)",
+    color: "var(--tbook-text, #111827)",
+    outline: "none",
+    boxSizing: "border-box"
+  },
+  badge: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "4px 10px",
+    fontSize: "13px",
+    fontWeight: 600,
+    borderRadius: "9999px"
+  },
+  row: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "8px 0"
+  },
+  divider: {
+    height: "1px",
+    background: "var(--tbook-border, #e5e7eb)",
+    margin: "12px 0"
+  }
+};
+function DepositWidget({
+  onSuccess,
+  onError,
+  minAmount,
+  maxAmount,
+  vaultId,
+  className,
+  style
+}) {
+  const { connected } = useWallet();
+  const { vault } = useVault(vaultId);
+  const { data: price } = useSharePrice();
+  const { data: usdcBalance } = useUsdcBalance();
+  const deposit = useDeposit(vaultId);
+  const [amount, setAmount] = useState("");
+  const [error, setError] = useState(null);
+  const effectiveMin = minAmount ?? vault?.minDeposit ?? 1;
+  const effectiveMax = maxAmount ?? vault?.maxEpochDeposit ?? Infinity;
+  const amountNum = Number(amount) || 0;
+  const estimatedShares = price?.priceNum ? amountNum / price.priceNum : 0;
+  const isPaused = vault?.paused ?? false;
+  const validate = useCallback(() => {
+    if (!amount || amountNum <= 0) return "Enter an amount";
+    if (amountNum < effectiveMin) return `Minimum deposit is ${effectiveMin} USDC`;
+    if (amountNum > effectiveMax) return `Maximum deposit is ${effectiveMax} USDC`;
+    if (usdcBalance !== void 0 && amountNum > usdcBalance) return "Insufficient USDC balance";
+    if (isPaused) return "Vault is paused";
+    return null;
+  }, [amount, amountNum, effectiveMin, effectiveMax, usdcBalance, isPaused]);
+  const handleDeposit = async () => {
+    const err = validate();
+    if (err) {
+      setError(err);
+      return;
+    }
+    setError(null);
+    try {
+      const sig = await deposit.mutateAsync(amountNum);
+      setAmount("");
+      onSuccess?.(sig);
+    } catch (e) {
+      const err2 = e instanceof Error ? e : new Error(String(e));
+      setError(err2.message);
+      onError?.(err2);
+    }
+  };
+  const handleMax = () => {
+    if (usdcBalance !== void 0) {
+      const max = Math.min(usdcBalance, effectiveMax);
+      setAmount(String(Math.floor(max * 100) / 100));
+    }
+  };
+  if (!connected) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...baseStyles.container, textAlign: "center", ...style }, children: /* @__PURE__ */ jsx("p", { style: { ...baseStyles.label, marginBottom: 8 }, children: "Connect wallet to deposit" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...baseStyles.container, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 600 }, children: "Deposit USDC" }),
+      price && /* @__PURE__ */ jsxs("span", { style: { ...baseStyles.badge, background: "var(--tbook-success, #10b981)", color: "#fff", fontSize: 12 }, children: [
+        price.apy,
+        "% APY"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          placeholder: "0.00",
+          value: amount,
+          onChange: (e) => {
+            setAmount(e.target.value);
+            setError(null);
+          },
+          style: baseStyles.input,
+          min: 0,
+          step: "0.01"
+        }
+      ),
+      usdcBalance !== void 0 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleMax,
+          style: {
+            position: "absolute",
+            right: 8,
+            top: "50%",
+            transform: "translateY(-50%)",
+            padding: "2px 8px",
+            fontSize: 11,
+            fontWeight: 600,
+            background: "var(--tbook-bg-secondary, #f9fafb)",
+            border: "1px solid var(--tbook-border, #e5e7eb)",
+            borderRadius: 4,
+            cursor: "pointer",
+            color: "var(--tbook-primary, #6366f1)"
+          },
+          children: "MAX"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { ...baseStyles.row, padding: "4px 0", marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--tbook-text-secondary, #6b7280)" }, children: [
+        "Balance: ",
+        usdcBalance !== void 0 ? `${usdcBalance.toFixed(2)} USDC` : "\u2014"
+      ] }),
+      amountNum > 0 && price?.priceNum && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--tbook-text-secondary, #6b7280)" }, children: [
+        "\u2248 ",
+        estimatedShares.toFixed(4),
+        " shares"
+      ] })
+    ] }),
+    (error || deposit.error) && /* @__PURE__ */ jsx("div", { style: { color: "var(--tbook-error, #ef4444)", fontSize: 13, marginBottom: 8 }, children: error || deposit.error?.message }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleDeposit,
+        disabled: deposit.isPending || isPaused || !amount,
+        style: {
+          ...baseStyles.button,
+          ...deposit.isPending || isPaused || !amount ? baseStyles.buttonDisabled : {}
+        },
+        children: deposit.isPending ? "Confirming..." : isPaused ? "Vault Paused" : amountNum > 0 ? `Deposit ${amountNum} USDC` : "Deposit"
+      }
+    ),
+    deposit.isSuccess && /* @__PURE__ */ jsx("div", { style: { color: "var(--tbook-success, #10b981)", fontSize: 13, marginTop: 8, textAlign: "center" }, children: "Deposit submitted! Settlement typically takes 1-2 days." })
+  ] });
+}
+function PortfolioCard({ showClaim, onClaim, vaultId, className, style }) {
+  const { connected } = useWallet();
+  const { data: user, isLoading } = useVaultUser(vaultId);
+  const { data: price } = useSharePrice();
+  const claim = useClaim(vaultId);
+  if (!connected) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...baseStyles.container, textAlign: "center", ...style }, children: /* @__PURE__ */ jsx("p", { style: baseStyles.label, children: "Connect wallet to view portfolio" }) });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...baseStyles.container, ...style }, children: /* @__PURE__ */ jsx("p", { style: baseStyles.label, children: "Loading..." }) });
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...baseStyles.container, ...style }, children: /* @__PURE__ */ jsx("p", { style: baseStyles.label, children: "No vault account found" }) });
+  }
+  const portfolioValue = (user.effectiveShares ?? user.shares) * (price?.priceNum ?? 1);
+  const hasClaimable = (user.effectiveClaimableUsdc ?? user.claimableUsdc) > 0;
+  const handleClaim = async () => {
+    const sig = await claim.mutateAsync(void 0);
+    onClaim?.(sig);
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...baseStyles.container, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: baseStyles.label, children: "Portfolio Value" }),
+      /* @__PURE__ */ jsxs("div", { style: baseStyles.value, children: [
+        "$",
+        portfolioValue.toFixed(2)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: baseStyles.divider }),
+    /* @__PURE__ */ jsxs("div", { style: baseStyles.row, children: [
+      /* @__PURE__ */ jsx("span", { style: baseStyles.label, children: "Shares" }),
+      /* @__PURE__ */ jsx("span", { style: baseStyles.smallValue, children: (user.effectiveShares ?? user.shares).toFixed(6) })
+    ] }),
+    price && /* @__PURE__ */ jsxs("div", { style: baseStyles.row, children: [
+      /* @__PURE__ */ jsx("span", { style: baseStyles.label, children: "Share Price" }),
+      /* @__PURE__ */ jsxs("span", { style: baseStyles.smallValue, children: [
+        "$",
+        Number(price.price).toFixed(6)
+      ] })
+    ] }),
+    user.pendingDepositUsdc > 0 && /* @__PURE__ */ jsxs("div", { style: baseStyles.row, children: [
+      /* @__PURE__ */ jsx("span", { style: baseStyles.label, children: "Pending Deposit" }),
+      /* @__PURE__ */ jsxs("span", { style: { ...baseStyles.smallValue, color: "var(--tbook-primary, #6366f1)" }, children: [
+        user.pendingDepositUsdc.toFixed(2),
+        " USDC"
+      ] })
+    ] }),
+    user.pendingRedeemShares > 0 && /* @__PURE__ */ jsxs("div", { style: baseStyles.row, children: [
+      /* @__PURE__ */ jsx("span", { style: baseStyles.label, children: "Pending Redeem" }),
+      /* @__PURE__ */ jsxs("span", { style: { ...baseStyles.smallValue, color: "var(--tbook-primary, #6366f1)" }, children: [
+        user.pendingRedeemShares.toFixed(6),
+        " shares"
+      ] })
+    ] }),
+    hasClaimable && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: baseStyles.row, children: [
+        /* @__PURE__ */ jsx("span", { style: baseStyles.label, children: "Claimable" }),
+        /* @__PURE__ */ jsxs("span", { style: { ...baseStyles.smallValue, color: "var(--tbook-success, #10b981)" }, children: [
+          (user.effectiveClaimableUsdc ?? user.claimableUsdc).toFixed(6),
+          " USDC"
+        ] })
+      ] }),
+      showClaim && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleClaim,
+          disabled: claim.isPending,
+          style: {
+            ...baseStyles.button,
+            marginTop: 8,
+            ...claim.isPending ? baseStyles.buttonDisabled : {}
+          },
+          children: claim.isPending ? "Claiming..." : "Claim USDC"
+        }
+      )
+    ] })
+  ] });
+}
+function YieldBadge({ showPrice, className, style }) {
+  const { data: price, isLoading } = useSharePrice();
+  if (isLoading || !price) {
+    return /* @__PURE__ */ jsx("span", { className, style: { ...baseStyles.badge, background: "#f3f4f6", color: "#9ca3af", ...style }, children: "Loading..." });
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className,
+      style: {
+        ...baseStyles.badge,
+        background: "var(--tbook-success, #10b981)",
+        color: "#ffffff",
+        ...style
+      },
+      children: [
+        price.apy,
+        "% APY",
+        showPrice && /* @__PURE__ */ jsxs("span", { style: { opacity: 0.85 }, children: [
+          " \xB7 $",
+          Number(price.price).toFixed(3)
+        ] })
+      ]
+    }
+  );
+}
+var STATUS_COLORS = {
+  Open: { bg: "#dcfce7", text: "#166534" },
+  Frozen: { bg: "#fef3c7", text: "#92400e" },
+  Bridging: { bg: "#dbeafe", text: "#1e40af" },
+  Settled: { bg: "#f3e8ff", text: "#6b21a8" },
+  RolledBack: { bg: "#fecaca", text: "#991b1b" }
+};
+function EpochStatusBadge({ type, vaultId, className, style }) {
+  const { data: vaultResult, isLoading } = useVaultInfo(vaultId);
+  if (isLoading || !vaultResult) {
+    return /* @__PURE__ */ jsx("span", { className, style: { ...baseStyles.badge, background: "#f3f4f6", color: "#9ca3af", ...style }, children: "Loading..." });
+  }
+  const epoch = type === "deposit" ? vaultResult.depositEpoch : vaultResult.redeemEpoch;
+  if (!epoch) return null;
+  const status = epoch.status;
+  const colors = STATUS_COLORS[status] ?? { bg: "#f3f4f6", text: "#374151" };
+  const label = type === "deposit" ? "Deposit" : "Redeem";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className,
+      style: {
+        ...baseStyles.badge,
+        background: colors.bg,
+        color: colors.text,
+        ...style
+      },
+      children: [
+        label,
+        " #",
+        epoch.epoch,
+        " \u2014 ",
+        status
+      ]
+    }
+  );
+}
+function getFriendlyMessage(error) {
+  if (error instanceof RpcTimeoutError) {
+    return "Network is slow. Please try again.";
+  }
+  if (error instanceof VaultPausedError) {
+    return "The vault is temporarily paused.";
+  }
+  if (error instanceof SharePriceUnavailableError) {
+    return "Price data is currently unavailable.";
+  }
+  if (error instanceof VaultSdkError) {
+    return error.message;
+  }
+  return "Something went wrong. Please try again.";
+}
+var VaultErrorBoundary = class extends React2.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+  /** Reset the error state so children are re-rendered. */
+  resetErrorBoundary = () => {
+    this.setState({ error: null });
+  };
+  render() {
+    const { error } = this.state;
+    const { children, fallback } = this.props;
+    if (error === null) {
+      return children;
+    }
+    if (typeof fallback === "function") {
+      return fallback(error, this.resetErrorBoundary);
+    }
+    if (fallback !== void 0) {
+      return fallback;
+    }
+    const message = getFriendlyMessage(error);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "alert",
+        style: {
+          padding: 16,
+          borderRadius: 8,
+          border: "1px solid var(--tbook-error, #ef4444)",
+          background: "var(--tbook-bg-error, #fef2f2)",
+          color: "var(--tbook-error, #ef4444)",
+          fontSize: 14,
+          textAlign: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsx("p", { style: { margin: "0 0 12px" }, children: message }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: this.resetErrorBoundary,
+              style: {
+                padding: "6px 16px",
+                fontSize: 13,
+                fontWeight: 600,
+                borderRadius: 6,
+                border: "1px solid var(--tbook-error, #ef4444)",
+                background: "transparent",
+                color: "var(--tbook-error, #ef4444)",
+                cursor: "pointer"
+              },
+              children: "Retry"
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+var TYPE_ICONS = {
+  deposit: "\u2B06",
+  // up arrow
+  redeem: "\u2B07",
+  // down arrow
+  claim: "\u2705",
+  // checkmark
+  cancel_deposit: "\u274C",
+  // cross
+  unknown: "\u2753"
+  // question mark
+};
+var TYPE_LABELS = {
+  deposit: "Deposit",
+  redeem: "Redeem",
+  claim: "Claim",
+  cancel_deposit: "Cancel Deposit",
+  unknown: "Unknown"
+};
+function formatTimestamp(ts) {
+  if (ts === 0) return "Unknown time";
+  return new Date(ts * 1e3).toLocaleString();
+}
+function shortenSig(sig) {
+  if (sig.length <= 16) return sig;
+  return `${sig.slice(0, 8)}...${sig.slice(-8)}`;
+}
+function TransactionHistory({
+  limit,
+  vaultId,
+  className,
+  style
+}) {
+  const { connected } = useWallet();
+  const { network } = useTBookVault();
+  const {
+    data,
+    isLoading,
+    isError,
+    error,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage
+  } = useTransactionHistory({ limit, vaultId });
+  if (!connected) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...baseStyles.container, textAlign: "center", ...style }, children: /* @__PURE__ */ jsx("p", { style: baseStyles.label, children: "Connect wallet to view transaction history" }) });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...baseStyles.container, ...style }, children: /* @__PURE__ */ jsx("p", { style: baseStyles.label, children: "Loading transaction history..." }) });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...baseStyles.container, ...style }, children: /* @__PURE__ */ jsxs("p", { style: { ...baseStyles.label, color: "var(--tbook-error, #ef4444)" }, children: [
+      "Failed to load history: ",
+      error instanceof Error ? error.message : "Unknown error"
+    ] }) });
+  }
+  const transactions = data?.pages.flat() ?? [];
+  if (transactions.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...baseStyles.container, textAlign: "center", ...style }, children: /* @__PURE__ */ jsx("p", { style: baseStyles.label, children: "No transactions found" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...baseStyles.container, ...style }, children: [
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsx("div", { style: baseStyles.label, children: "Transaction History" }) }),
+    transactions.map((tx) => /* @__PURE__ */ jsxs("div", { style: txRowStyle, children: [
+      /* @__PURE__ */ jsx("span", { style: txIconStyle, title: TYPE_LABELS[tx.type], children: TYPE_ICONS[tx.type] }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx("span", { style: baseStyles.smallValue, children: TYPE_LABELS[tx.type] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                ...baseStyles.label,
+                fontSize: "11px",
+                marginBottom: 0,
+                textTransform: "none"
+              },
+              children: formatTimestamp(tx.timestamp)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 2 }, children: [
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: explorerUrl("tx", tx.signature, network),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              style: txLinkStyle,
+              title: tx.signature,
+              children: shortenSig(tx.signature)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "11px",
+                fontWeight: 600,
+                color: tx.success ? "var(--tbook-success, #10b981)" : "var(--tbook-error, #ef4444)"
+              },
+              children: tx.success ? "Success" : "Failed"
+            }
+          )
+        ] })
+      ] })
+    ] }, tx.signature)),
+    hasNextPage && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => fetchNextPage(),
+        disabled: isFetchingNextPage,
+        style: {
+          ...baseStyles.button,
+          marginTop: 12,
+          ...isFetchingNextPage ? baseStyles.buttonDisabled : {}
+        },
+        children: isFetchingNextPage ? "Loading..." : "Load More"
+      }
+    )
+  ] });
+}
+var txRowStyle = {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "12px",
+  padding: "10px 0",
+  borderBottom: "1px solid var(--tbook-border, #e5e7eb)"
+};
+var txIconStyle = {
+  fontSize: "18px",
+  lineHeight: "24px",
+  flexShrink: 0,
+  width: "24px",
+  textAlign: "center"
+};
+var txLinkStyle = {
+  fontSize: "12px",
+  color: "var(--tbook-primary, #6366f1)",
+  textDecoration: "none",
+  fontFamily: "monospace"
+};
+
+export { DepositWidget, EpochStatusBadge, PortfolioCard, TBookVaultProvider, TransactionHistory, VaultErrorBoundary, YieldBadge, useCancelDeposit, useClaim, useCurrentDepositEpoch, useCurrentRedeemEpoch, useDeposit, useRedeem, useSharePrice, useTBookVault, useTransactionHistory, useUsdcBalance, useVault, useVaultInfo, useVaultUser };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map