@compass-labs/widgets 0.1.0

package/dist/index.mjs

@@ -0,0 +1,3299 @@
+import { createContext, useMemo, useContext, useState, useEffect, useCallback } from 'react';
+import { QueryClient, QueryClientProvider, useQueryClient, useQuery } from '@tanstack/react-query';
+import { CompassApiSDK } from '@compass-labs/api-sdk';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { arbitrum, base, mainnet } from 'viem/chains';
+import { Wallet, LogOut, X, ChevronDown, AlertCircle, Loader2, ArrowDownLeft, ArrowUpRight, ExternalLink, Search, TrendingUp, Calendar, ArrowDownUp } from 'lucide-react';
+
+// src/provider/CompassProvider.tsx
+var ApiContext = createContext(null);
+function ApiProvider({ children, apiKey, serverURL }) {
+  const client = useMemo(() => {
+    return new CompassApiSDK({
+      apiKeyAuth: apiKey,
+      serverURL: serverURL || "https://api.compasslabs.ai"
+    });
+  }, [apiKey, serverURL]);
+  const value = useMemo(
+    () => ({
+      apiKey,
+      client
+    }),
+    [apiKey, client]
+  );
+  return /* @__PURE__ */ jsx(ApiContext.Provider, { value, children });
+}
+function useCompassApi() {
+  const context = useContext(ApiContext);
+  if (!context) {
+    throw new Error("useCompassApi must be used within a CompassProvider");
+  }
+  return context;
+}
+var useEmbeddableApi = useCompassApi;
+var ChainContext = createContext(null);
+var CHAIN_CONFIG = {
+  ethereum: {
+    viemChain: mainnet,
+    name: "Ethereum",
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/info/logo.png"
+  },
+  base: {
+    viemChain: base,
+    name: "Base",
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/base/info/logo.png"
+  },
+  arbitrum: {
+    viemChain: arbitrum,
+    name: "Arbitrum",
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/arbitrum/info/logo.png"
+  }
+};
+function ChainProvider({ children, defaultChain }) {
+  const [chainId, setChainIdState] = useState(defaultChain);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const stored = localStorage.getItem("compass-chain");
+    if (stored && stored in CHAIN_CONFIG) {
+      setChainIdState(stored);
+    }
+  }, []);
+  const setChainId = (newChainId) => {
+    setChainIdState(newChainId);
+    if (typeof window !== "undefined") {
+      localStorage.setItem("compass-chain", newChainId);
+    }
+  };
+  const chain = useMemo(() => CHAIN_CONFIG[chainId], [chainId]);
+  return /* @__PURE__ */ jsx(ChainContext.Provider, { value: { chainId, setChainId, setChain: setChainId, chain }, children });
+}
+function useCompassChain() {
+  const context = useContext(ChainContext);
+  if (!context) {
+    throw new Error("useCompassChain must be used within a CompassProvider");
+  }
+  return context;
+}
+var useChain = useCompassChain;
+var WalletContext = createContext(null);
+var disconnectedWallet = {
+  address: null,
+  isConnected: false,
+  signTypedData: async () => {
+    throw new Error("No wallet connected. Please connect a wallet first.");
+  },
+  switchChain: null,
+  login: null,
+  logout: null
+};
+function WalletProvider({ children, wallet }) {
+  const value = wallet ? {
+    address: wallet.address,
+    isConnected: wallet.address !== null,
+    signTypedData: wallet.signTypedData,
+    switchChain: wallet.switchChain ?? null,
+    login: wallet.login ?? null,
+    logout: wallet.logout ?? null
+  } : disconnectedWallet;
+  return /* @__PURE__ */ jsx(WalletContext.Provider, { value, children });
+}
+function useCompassWallet() {
+  const context = useContext(WalletContext);
+  if (!context) {
+    return disconnectedWallet;
+  }
+  return context;
+}
+var useEmbeddableWallet = useCompassWallet;
+var EarnAccountContext = createContext(null);
+function EarnAccountProvider({ children }) {
+  const { address } = useEmbeddableWallet();
+  const { chainId } = useChain();
+  const queryClient = useQueryClient();
+  const [isCreating, setIsCreating] = useState(false);
+  const [createError, setCreateError] = useState(null);
+  const {
+    data: accountData,
+    isLoading: isChecking,
+    error: checkError,
+    refetch
+  } = useQuery({
+    queryKey: ["earnAccount", address, chainId],
+    queryFn: async () => {
+      if (!address) return null;
+      const response = await fetch(
+        `/api/compass/earn-account/check?owner=${address}&chain=${chainId}`
+      );
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Failed to check earn account");
+      }
+      return response.json();
+    },
+    enabled: !!address,
+    staleTime: 60 * 1e3,
+    // 1 minute
+    refetchOnMount: true
+  });
+  const createAccount = useCallback(async () => {
+    if (!address) {
+      throw new Error("No wallet connected");
+    }
+    if (accountData?.isDeployed) {
+      return accountData.earnAccountAddress;
+    }
+    setIsCreating(true);
+    setCreateError(null);
+    try {
+      const response = await fetch("/api/compass/create-account", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: chainId
+        })
+      });
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Failed to create earn account");
+      }
+      const result = await response.json();
+      await queryClient.invalidateQueries({
+        queryKey: ["earnAccount", address, chainId]
+      });
+      return result.earnAccountAddress;
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error("Unknown error");
+      setCreateError(err);
+      throw err;
+    } finally {
+      setIsCreating(false);
+    }
+  }, [address, chainId, accountData, queryClient]);
+  const value = {
+    earnAccountAddress: accountData?.earnAccountAddress || null,
+    isDeployed: accountData?.isDeployed ?? false,
+    isChecking,
+    isCreating,
+    error: checkError instanceof Error ? checkError : createError,
+    createAccount,
+    refetch
+  };
+  return /* @__PURE__ */ jsx(EarnAccountContext.Provider, { value, children });
+}
+function useEarnAccount() {
+  const context = useContext(EarnAccountContext);
+  if (!context) {
+    throw new Error("useEarnAccount must be used within a CompassProvider");
+  }
+  return context;
+}
+
+// src/theme/presets.ts
+var baseTypography = {
+  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  fontFamilyMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  heading: {
+    fontSize: "1.5rem",
+    lineHeight: 1.2,
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
+  },
+  subheading: {
+    fontSize: "1.125rem",
+    lineHeight: 1.3,
+    fontWeight: 500,
+    letterSpacing: "-0.01em"
+  },
+  body: {
+    fontSize: "0.875rem",
+    lineHeight: 1.5,
+    fontWeight: 400
+  },
+  caption: {
+    fontSize: "0.75rem",
+    lineHeight: 1.4,
+    fontWeight: 400
+  },
+  label: {
+    fontSize: "0.75rem",
+    lineHeight: 1.2,
+    fontWeight: 500,
+    letterSpacing: "0.02em"
+  }
+};
+var highContrastTypography = {
+  ...baseTypography,
+  heading: {
+    fontSize: "1.75rem",
+    lineHeight: 1.2,
+    fontWeight: 700,
+    letterSpacing: "-0.02em"
+  },
+  subheading: {
+    fontSize: "1.25rem",
+    lineHeight: 1.3,
+    fontWeight: 600,
+    letterSpacing: "-0.01em"
+  },
+  body: {
+    fontSize: "1rem",
+    lineHeight: 1.6,
+    fontWeight: 400
+  },
+  caption: {
+    fontSize: "0.875rem",
+    lineHeight: 1.5,
+    fontWeight: 400
+  },
+  label: {
+    fontSize: "0.875rem",
+    lineHeight: 1.2,
+    fontWeight: 600,
+    letterSpacing: "0.02em"
+  }
+};
+var baseSpacing = {
+  unit: "4px",
+  containerPadding: "1.5rem",
+  cardPadding: "1.25rem",
+  inputPadding: "0.75rem 1rem"
+};
+var baseTransitions = {
+  fast: "150ms ease-out",
+  normal: "200ms ease-out",
+  slow: "300ms ease-out"
+};
+var compassDark = {
+  name: "compass-dark",
+  mode: "dark",
+  colors: {
+    backgrounds: {
+      // wallet-earn: --background: #050507
+      background: "#050507",
+      // wallet-earn: --surface-1: #0c0c10, --surface-2: #12121a
+      surface: "#0c0c10",
+      surfaceHover: "#12121a",
+      overlay: "rgba(0, 0, 0, 0.7)"
+    },
+    brand: {
+      // wallet-earn: --accent-primary: #6366f1, --accent-secondary: #8b5cf6
+      primary: "#6366f1",
+      primaryHover: "#818cf8",
+      primaryText: "#ffffff",
+      secondary: "#8b5cf6",
+      secondaryHover: "#a78bfa"
+    },
+    text: {
+      // wallet-earn: --foreground: #f4f4f5, text-zinc-400: #a1a1aa, text-zinc-500: #71717a
+      text: "#f4f4f5",
+      textSecondary: "#a1a1aa",
+      textTertiary: "#71717a"
+    },
+    borders: {
+      // wallet-earn: --border-subtle: rgba(255,255,255,0.06), --border-default: rgba(255,255,255,0.1)
+      border: "rgba(255, 255, 255, 0.08)",
+      borderHover: "rgba(255, 255, 255, 0.12)",
+      borderFocus: "#6366f1"
+    },
+    semantic: {
+      success: {
+        // wallet-earn: --success: #10b981
+        DEFAULT: "#10b981",
+        muted: "rgba(16, 185, 129, 0.15)"
+      },
+      warning: {
+        DEFAULT: "#f59e0b",
+        muted: "rgba(245, 158, 11, 0.15)"
+      },
+      error: {
+        // wallet-earn: --error: #ef4444
+        DEFAULT: "#ef4444",
+        muted: "rgba(239, 68, 68, 0.15)"
+      },
+      info: {
+        DEFAULT: "#6366f1",
+        muted: "rgba(99, 102, 241, 0.15)"
+      }
+    }
+  },
+  typography: baseTypography,
+  spacing: baseSpacing,
+  shape: {
+    borderRadius: {
+      none: "0",
+      sm: "0.375rem",
+      md: "0.5rem",
+      lg: "0.75rem",
+      xl: "1rem",
+      full: "9999px"
+    },
+    borderWidth: "1px"
+  },
+  effects: {
+    shadow: {
+      sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
+      md: "0 4px 12px rgba(0, 0, 0, 0.4)",
+      lg: "0 8px 24px rgba(0, 0, 0, 0.5)"
+    },
+    blur: {
+      sm: "4px",
+      md: "8px",
+      lg: "16px"
+    },
+    transition: baseTransitions
+  }
+};
+var compassLight = {
+  name: "compass-light",
+  mode: "light",
+  colors: {
+    backgrounds: {
+      background: "#ffffff",
+      surface: "#f8fafc",
+      surfaceHover: "#f1f5f9",
+      overlay: "rgba(0, 0, 0, 0.5)"
+    },
+    brand: {
+      primary: "#6366f1",
+      primaryHover: "#4f46e5",
+      primaryText: "#ffffff",
+      secondary: "#4f46e5",
+      secondaryHover: "#4338ca"
+    },
+    text: {
+      text: "#0f172a",
+      textSecondary: "#475569",
+      textTertiary: "#94a3b8"
+    },
+    borders: {
+      border: "#e2e8f0",
+      borderHover: "#cbd5e1",
+      borderFocus: "#6366f1"
+    },
+    semantic: {
+      success: {
+        DEFAULT: "#16a34a",
+        muted: "#dcfce7"
+      },
+      warning: {
+        DEFAULT: "#d97706",
+        muted: "#fef3c7"
+      },
+      error: {
+        DEFAULT: "#dc2626",
+        muted: "#fee2e2"
+      },
+      info: {
+        DEFAULT: "#2563eb",
+        muted: "#dbeafe"
+      }
+    }
+  },
+  typography: baseTypography,
+  spacing: baseSpacing,
+  shape: {
+    borderRadius: {
+      none: "0",
+      sm: "0.375rem",
+      md: "0.5rem",
+      lg: "0.75rem",
+      xl: "1rem",
+      full: "9999px"
+    },
+    borderWidth: "1px"
+  },
+  effects: {
+    shadow: {
+      sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
+      md: "0 4px 12px rgba(0, 0, 0, 0.08)",
+      lg: "0 8px 24px rgba(0, 0, 0, 0.12)"
+    },
+    blur: {
+      sm: "4px",
+      md: "8px",
+      lg: "16px"
+    },
+    transition: baseTransitions
+  }
+};
+var minimalDark = {
+  name: "minimal-dark",
+  mode: "dark",
+  colors: {
+    backgrounds: {
+      background: "#0a0a0a",
+      surface: "#171717",
+      surfaceHover: "#262626",
+      overlay: "rgba(0, 0, 0, 0.8)"
+    },
+    brand: {
+      primary: "#ffffff",
+      primaryHover: "#e5e5e5",
+      primaryText: "#0a0a0a",
+      secondary: "#a3a3a3",
+      secondaryHover: "#d4d4d4"
+    },
+    text: {
+      text: "#fafafa",
+      textSecondary: "#a3a3a3",
+      textTertiary: "#525252"
+    },
+    borders: {
+      border: "#262626",
+      borderHover: "#404040",
+      borderFocus: "#ffffff"
+    },
+    semantic: {
+      success: {
+        DEFAULT: "#4ade80",
+        muted: "rgba(74, 222, 128, 0.1)"
+      },
+      warning: {
+        DEFAULT: "#fbbf24",
+        muted: "rgba(251, 191, 36, 0.1)"
+      },
+      error: {
+        DEFAULT: "#f87171",
+        muted: "rgba(248, 113, 113, 0.1)"
+      },
+      info: {
+        DEFAULT: "#60a5fa",
+        muted: "rgba(96, 165, 250, 0.1)"
+      }
+    }
+  },
+  typography: baseTypography,
+  spacing: baseSpacing,
+  shape: {
+    borderRadius: {
+      none: "0",
+      sm: "0.125rem",
+      md: "0.25rem",
+      lg: "0.375rem",
+      xl: "0.5rem",
+      full: "9999px"
+    },
+    borderWidth: "1px"
+  },
+  effects: {
+    shadow: {
+      sm: "none",
+      md: "none",
+      lg: "none"
+    },
+    blur: {
+      sm: "0",
+      md: "0",
+      lg: "0"
+    },
+    transition: baseTransitions
+  }
+};
+var minimalLight = {
+  name: "minimal-light",
+  mode: "light",
+  colors: {
+    backgrounds: {
+      background: "#ffffff",
+      surface: "#fafafa",
+      surfaceHover: "#f5f5f5",
+      overlay: "rgba(0, 0, 0, 0.6)"
+    },
+    brand: {
+      primary: "#0a0a0a",
+      primaryHover: "#262626",
+      primaryText: "#ffffff",
+      secondary: "#525252",
+      secondaryHover: "#404040"
+    },
+    text: {
+      text: "#0a0a0a",
+      textSecondary: "#525252",
+      textTertiary: "#a3a3a3"
+    },
+    borders: {
+      border: "#e5e5e5",
+      borderHover: "#d4d4d4",
+      borderFocus: "#0a0a0a"
+    },
+    semantic: {
+      success: {
+        DEFAULT: "#16a34a",
+        muted: "#f0fdf4"
+      },
+      warning: {
+        DEFAULT: "#ca8a04",
+        muted: "#fefce8"
+      },
+      error: {
+        DEFAULT: "#dc2626",
+        muted: "#fef2f2"
+      },
+      info: {
+        DEFAULT: "#2563eb",
+        muted: "#eff6ff"
+      }
+    }
+  },
+  typography: baseTypography,
+  spacing: baseSpacing,
+  shape: {
+    borderRadius: {
+      none: "0",
+      sm: "0.125rem",
+      md: "0.25rem",
+      lg: "0.375rem",
+      xl: "0.5rem",
+      full: "9999px"
+    },
+    borderWidth: "1px"
+  },
+  effects: {
+    shadow: {
+      sm: "none",
+      md: "none",
+      lg: "none"
+    },
+    blur: {
+      sm: "0",
+      md: "0",
+      lg: "0"
+    },
+    transition: baseTransitions
+  }
+};
+var highContrastDark = {
+  name: "high-contrast-dark",
+  mode: "dark",
+  colors: {
+    backgrounds: {
+      background: "#000000",
+      surface: "#0a0a0a",
+      surfaceHover: "#1a1a1a",
+      overlay: "rgba(0, 0, 0, 0.9)"
+    },
+    brand: {
+      primary: "#3b82f6",
+      primaryHover: "#60a5fa",
+      primaryText: "#ffffff",
+      secondary: "#60a5fa",
+      secondaryHover: "#93c5fd"
+    },
+    text: {
+      text: "#ffffff",
+      textSecondary: "#e5e5e5",
+      textTertiary: "#a3a3a3"
+    },
+    borders: {
+      border: "#404040",
+      borderHover: "#525252",
+      borderFocus: "#3b82f6"
+    },
+    semantic: {
+      success: {
+        DEFAULT: "#22c55e",
+        muted: "rgba(34, 197, 94, 0.2)"
+      },
+      warning: {
+        DEFAULT: "#fbbf24",
+        muted: "rgba(251, 191, 36, 0.2)"
+      },
+      error: {
+        DEFAULT: "#ef4444",
+        muted: "rgba(239, 68, 68, 0.2)"
+      },
+      info: {
+        DEFAULT: "#3b82f6",
+        muted: "rgba(59, 130, 246, 0.2)"
+      }
+    }
+  },
+  typography: highContrastTypography,
+  spacing: baseSpacing,
+  shape: {
+    borderRadius: {
+      none: "0",
+      sm: "0.25rem",
+      md: "0.375rem",
+      lg: "0.5rem",
+      xl: "0.75rem",
+      full: "9999px"
+    },
+    borderWidth: "2px"
+  },
+  effects: {
+    shadow: {
+      sm: "0 1px 3px rgba(0, 0, 0, 0.5)",
+      md: "0 4px 12px rgba(0, 0, 0, 0.6)",
+      lg: "0 8px 24px rgba(0, 0, 0, 0.7)"
+    },
+    blur: {
+      sm: "4px",
+      md: "8px",
+      lg: "16px"
+    },
+    transition: baseTransitions
+  }
+};
+var highContrastLight = {
+  name: "high-contrast-light",
+  mode: "light",
+  colors: {
+    backgrounds: {
+      background: "#ffffff",
+      surface: "#f5f5f5",
+      surfaceHover: "#e5e5e5",
+      overlay: "rgba(0, 0, 0, 0.7)"
+    },
+    brand: {
+      primary: "#1d4ed8",
+      primaryHover: "#1e40af",
+      primaryText: "#ffffff",
+      secondary: "#1e40af",
+      secondaryHover: "#1e3a8a"
+    },
+    text: {
+      text: "#000000",
+      textSecondary: "#1a1a1a",
+      textTertiary: "#525252"
+    },
+    borders: {
+      border: "#525252",
+      borderHover: "#404040",
+      borderFocus: "#1d4ed8"
+    },
+    semantic: {
+      success: {
+        DEFAULT: "#15803d",
+        muted: "#dcfce7"
+      },
+      warning: {
+        DEFAULT: "#a16207",
+        muted: "#fef9c3"
+      },
+      error: {
+        DEFAULT: "#b91c1c",
+        muted: "#fee2e2"
+      },
+      info: {
+        DEFAULT: "#1d4ed8",
+        muted: "#dbeafe"
+      }
+    }
+  },
+  typography: highContrastTypography,
+  spacing: baseSpacing,
+  shape: {
+    borderRadius: {
+      none: "0",
+      sm: "0.25rem",
+      md: "0.375rem",
+      lg: "0.5rem",
+      xl: "0.75rem",
+      full: "9999px"
+    },
+    borderWidth: "2px"
+  },
+  effects: {
+    shadow: {
+      sm: "0 1px 2px rgba(0, 0, 0, 0.1)",
+      md: "0 4px 8px rgba(0, 0, 0, 0.15)",
+      lg: "0 8px 16px rgba(0, 0, 0, 0.2)"
+    },
+    blur: {
+      sm: "4px",
+      md: "8px",
+      lg: "16px"
+    },
+    transition: baseTransitions
+  }
+};
+var themePresets = {
+  "compass-dark": compassDark,
+  "compass-light": compassLight,
+  "minimal-dark": minimalDark,
+  "minimal-light": minimalLight,
+  "high-contrast-dark": highContrastDark,
+  "high-contrast-light": highContrastLight
+};
+var defaultTheme = compassDark;
+
+// src/theme/css-variables.ts
+function camelToKebab(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function cssVarPath(category, ...parts) {
+  const kebabParts = parts.map(camelToKebab).join("-");
+  return `--compass-${category}-${kebabParts}`;
+}
+function colorsToCssVariables(colors) {
+  const vars = {};
+  for (const [key, value] of Object.entries(colors.backgrounds)) {
+    vars[cssVarPath("color", key)] = value;
+  }
+  for (const [key, value] of Object.entries(colors.brand)) {
+    vars[cssVarPath("color", key)] = value;
+  }
+  for (const [key, value] of Object.entries(colors.text)) {
+    vars[cssVarPath("color", key)] = value;
+  }
+  for (const [key, value] of Object.entries(colors.borders)) {
+    vars[cssVarPath("color", key)] = value;
+  }
+  for (const [semantic, colorObj] of Object.entries(colors.semantic)) {
+    const semanticColor = colorObj;
+    vars[cssVarPath("color", semantic)] = semanticColor.DEFAULT;
+    vars[cssVarPath("color", semantic, "muted")] = semanticColor.muted;
+  }
+  return vars;
+}
+function typographyScaleToCssVariables(name, scale) {
+  const vars = {};
+  vars[cssVarPath("font", name, "size")] = scale.fontSize;
+  vars[cssVarPath("font", name, "line-height")] = String(scale.lineHeight);
+  vars[cssVarPath("font", name, "weight")] = String(scale.fontWeight);
+  if (scale.letterSpacing) {
+    vars[cssVarPath("font", name, "letter-spacing")] = scale.letterSpacing;
+  }
+  return vars;
+}
+function typographyToCssVariables(typography) {
+  const vars = {};
+  vars["--compass-font-family"] = typography.fontFamily;
+  vars["--compass-font-family-mono"] = typography.fontFamilyMono;
+  const scales = [
+    "heading",
+    "subheading",
+    "body",
+    "caption",
+    "label"
+  ];
+  for (const scaleName of scales) {
+    const scale = typography[scaleName];
+    if (typeof scale === "object" && "fontSize" in scale) {
+      Object.assign(
+        vars,
+        typographyScaleToCssVariables(scaleName, scale)
+      );
+    }
+  }
+  return vars;
+}
+function spacingToCssVariables(spacing) {
+  const vars = {};
+  vars["--compass-spacing-unit"] = spacing.unit;
+  vars["--compass-spacing-container"] = spacing.containerPadding;
+  vars["--compass-spacing-card"] = spacing.cardPadding;
+  vars["--compass-spacing-input"] = spacing.inputPadding;
+  return vars;
+}
+function shapeToCssVariables(shape) {
+  const vars = {};
+  for (const [key, value] of Object.entries(shape.borderRadius)) {
+    vars[cssVarPath("radius", key)] = value;
+  }
+  vars["--compass-border-width"] = shape.borderWidth;
+  return vars;
+}
+function effectsToCssVariables(effects) {
+  const vars = {};
+  for (const [key, value] of Object.entries(effects.shadow)) {
+    vars[cssVarPath("shadow", key)] = value;
+  }
+  for (const [key, value] of Object.entries(effects.blur)) {
+    vars[cssVarPath("blur", key)] = value;
+  }
+  for (const [key, value] of Object.entries(effects.transition)) {
+    vars[cssVarPath("transition", key)] = value;
+  }
+  return vars;
+}
+function themeToCssVariables(theme) {
+  return {
+    // Theme metadata
+    "--compass-theme-name": theme.name,
+    "--compass-theme-mode": theme.mode,
+    // Color variables
+    ...colorsToCssVariables(theme.colors),
+    // Typography variables
+    ...typographyToCssVariables(theme.typography),
+    // Spacing variables
+    ...spacingToCssVariables(theme.spacing),
+    // Shape variables (border radius)
+    ...shapeToCssVariables(theme.shape),
+    // Effects variables (shadows, blur, transitions)
+    ...effectsToCssVariables(theme.effects)
+  };
+}
+function injectCssVariables(theme, selector = ".compass-widget") {
+  const variables = themeToCssVariables(theme);
+  const variableLines = Object.entries(variables).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  return `${selector} {
+${variableLines}
+}`;
+}
+var ThemeContext = createContext(void 0);
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key in source) {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (sourceValue !== void 0 && typeof sourceValue === "object" && sourceValue !== null && !Array.isArray(sourceValue) && typeof targetValue === "object" && targetValue !== null) {
+      result[key] = deepMerge(
+        targetValue,
+        sourceValue
+      );
+    } else if (sourceValue !== void 0) {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+}
+function resolveTheme(input) {
+  if (!input) return defaultTheme;
+  if (typeof input === "string") {
+    return themePresets[input] ?? defaultTheme;
+  }
+  if ("preset" in input) {
+    const base3 = themePresets[input.preset] ?? defaultTheme;
+    return input.overrides ? deepMerge(base3, input.overrides) : base3;
+  }
+  return input;
+}
+function ThemeProvider({ children, theme: initialTheme }) {
+  const [themeInput, setThemeInput] = useState(initialTheme);
+  const theme = useMemo(() => resolveTheme(themeInput), [themeInput]);
+  const cssVariables = useMemo(() => injectCssVariables(theme, ".compass-widget"), [theme]);
+  useEffect(() => {
+    const styleId = "compass-theme-variables";
+    let styleEl = document.getElementById(styleId);
+    if (!styleEl) {
+      styleEl = document.createElement("style");
+      styleEl.id = styleId;
+      document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = cssVariables;
+    return () => {
+    };
+  }, [cssVariables]);
+  const value = useMemo(
+    () => ({
+      theme,
+      setTheme: setThemeInput,
+      cssVariables
+    }),
+    [theme, cssVariables]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+function CompassProvider({
+  children,
+  apiKey,
+  defaultChain = "base",
+  theme,
+  wallet
+}) {
+  const queryClient = useMemo(
+    () => new QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime: 30 * 1e3,
+          // 30 seconds
+          gcTime: 2 * 60 * 1e3,
+          // 2 minutes
+          refetchOnWindowFocus: false
+        }
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx(ApiProvider, { apiKey, children: /* @__PURE__ */ jsx(ChainProvider, { defaultChain, children: /* @__PURE__ */ jsx(WalletProvider, { wallet, children: /* @__PURE__ */ jsx(EarnAccountProvider, { children: /* @__PURE__ */ jsx("div", { className: "compass-widget", children }) }) }) }) }) }) });
+}
+var SUPPORTED_CHAINS = ["ethereum", "base", "arbitrum"];
+function ChainSwitcher() {
+  const { chainId, setChain, chain } = useChain();
+  const chainConfigs = {
+    ethereum: {
+      viemChain: chain.viemChain,
+      name: "Ethereum",
+      icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/info/logo.png"
+    },
+    base: {
+      viemChain: chain.viemChain,
+      name: "Base",
+      icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/base/info/logo.png"
+    },
+    arbitrum: {
+      viemChain: chain.viemChain,
+      name: "Arbitrum",
+      icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/arbitrum/info/logo.png"
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "flex gap-1 p-1 rounded-lg", style: { backgroundColor: "var(--compass-color-surface)" }, children: SUPPORTED_CHAINS.map((id) => {
+    const config = chainConfigs[id];
+    const isActive = chainId === id;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setChain(id),
+        className: "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all",
+        style: {
+          backgroundColor: isActive ? "var(--compass-color-primary)" : "transparent",
+          color: isActive ? "var(--compass-color-primary-text)" : "var(--compass-color-text-secondary)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("img", { src: config.icon, alt: config.name, className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx("span", { children: config.name })
+        ]
+      },
+      id
+    );
+  }) });
+}
+function truncateAddress(address) {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+function WalletStatus({
+  showFullAddress = false,
+  showLogout = true,
+  compact = false,
+  onConnect,
+  onDisconnect
+}) {
+  const { address, isConnected, login, logout } = useCompassWallet();
+  const connectFn = onConnect ?? login;
+  const disconnectFn = onDisconnect ?? logout;
+  if (!isConnected || !address) {
+    if (connectFn !== null) {
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => connectFn(),
+          className: `flex items-center gap-2 rounded-lg font-medium transition-colors hover:opacity-90 ${compact ? "px-2 py-1.5" : "px-4 py-2"}`,
+          style: {
+            backgroundColor: "var(--compass-color-primary)",
+            color: "var(--compass-color-primary-text)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Wallet, { size: compact ? 14 : 16 }),
+            !compact && /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Connect Wallet" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex items-center gap-2 rounded-lg ${compact ? "px-2 py-1.5" : "px-3 py-2"}`,
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          color: "var(--compass-color-text-secondary)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Wallet, { size: compact ? 14 : 16 }),
+          !compact && /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Not connected" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex items-center gap-2 rounded-lg ${compact ? "px-2 py-1.5" : "px-3 py-2"}`,
+      style: {
+        backgroundColor: "var(--compass-color-surface)",
+        border: "1px solid var(--compass-color-border)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-2 h-2 rounded-full flex-shrink-0",
+            style: { backgroundColor: "var(--compass-color-success)" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `font-mono whitespace-nowrap ${compact ? "text-xs" : "text-sm"}`,
+            style: { color: "var(--compass-color-text)" },
+            children: showFullAddress ? address : truncateAddress(address)
+          }
+        ),
+        showLogout && disconnectFn !== null && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => disconnectFn(),
+            className: `rounded hover:bg-white/10 transition-all flex-shrink-0 ${compact ? "p-1" : "p-1.5"}`,
+            title: "Disconnect wallet",
+            children: /* @__PURE__ */ jsx(LogOut, { size: 14, style: { color: "var(--compass-color-text-secondary)" } })
+          }
+        )
+      ]
+    }
+  );
+}
+function ActionModal({ isOpen, onClose, title, children }) {
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0",
+        style: { backgroundColor: "var(--compass-color-overlay)" },
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative w-full max-w-md mx-4 rounded-xl overflow-hidden",
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          boxShadow: "var(--compass-shadow-lg)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between px-4 py-3 border-b",
+              style: { borderColor: "var(--compass-color-border)" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: "font-semibold",
+                    style: {
+                      fontSize: "var(--compass-font-size-subheading)",
+                      color: "var(--compass-color-text)"
+                    },
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "p-1 rounded-md transition-colors hover:opacity-70",
+                    style: { color: "var(--compass-color-text-secondary)" },
+                    children: /* @__PURE__ */ jsx(X, { size: 20 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "p-4", children })
+        ]
+      }
+    )
+  ] });
+}
+function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  if (!pnl) return null;
+  const unrealizedPnl = parseFloat(pnl.unrealizedPnl || "0");
+  const realizedPnl = parseFloat(pnl.realizedPnl || "0");
+  const totalPnl = parseFloat(pnl.totalPnl || "0");
+  const totalDeposited = parseFloat(pnl.totalDeposited || "0");
+  if (totalDeposited === 0) return null;
+  const formatPnL = (value) => {
+    const prefix = value >= 0 ? "+" : "";
+    return `${prefix}${value.toFixed(4)}`;
+  };
+  const formatUSD = (value) => {
+    const usdValue = value * tokenPrice;
+    const prefix = usdValue >= 0 ? "+$" : "-$";
+    return `${prefix}${Math.abs(usdValue).toFixed(2)}`;
+  };
+  const pnlColor = (value) => value >= 0 ? "var(--compass-color-success)" : "var(--compass-color-error)";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full mt-2", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setIsExpanded(!isExpanded),
+        className: "flex items-center justify-between w-full px-3 py-2 rounded-lg border transition-colors",
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          borderColor: "var(--compass-color-border)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-sm font-medium",
+              style: { color: "var(--compass-color-text-secondary)" },
+              children: "Performance"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "text-xs font-mono font-medium",
+                style: { color: pnlColor(totalPnl) },
+                children: [
+                  formatPnL(totalPnl),
+                  " ",
+                  tokenSymbol
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                size: 16,
+                className: `transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`,
+                style: { color: "var(--compass-color-text-tertiary)" }
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "mt-2 p-3 rounded-lg border",
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          borderColor: "var(--compass-color-border)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-[10px] font-medium uppercase tracking-wide",
+                  style: { color: "var(--compass-color-text-tertiary)" },
+                  children: "Unrealized P&L"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-sm font-bold font-mono",
+                  style: { color: pnlColor(unrealizedPnl) },
+                  children: formatPnL(unrealizedPnl)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono", style: { color: pnlColor(unrealizedPnl) }, children: formatUSD(unrealizedPnl) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-[10px] font-medium uppercase tracking-wide",
+                  style: { color: "var(--compass-color-text-tertiary)" },
+                  children: "Realized P&L"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-sm font-bold font-mono",
+                  style: { color: pnlColor(realizedPnl) },
+                  children: formatPnL(realizedPnl)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono", style: { color: pnlColor(realizedPnl) }, children: formatUSD(realizedPnl) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between mt-3 pt-3 border-t",
+              style: { borderColor: "var(--compass-color-border)" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-xs font-medium",
+                    style: { color: "var(--compass-color-text-tertiary)" },
+                    children: "Total P&L"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold font-mono", style: { color: pnlColor(totalPnl) }, children: [
+                    formatPnL(totalPnl),
+                    " ",
+                    tokenSymbol
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono", style: { color: pnlColor(totalPnl) }, children: [
+                    "(",
+                    formatUSD(totalPnl),
+                    ")"
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var CHAINS = {
+  ethereum: {
+    id: "ethereum",
+    name: "Ethereum",
+    viemChain: mainnet,
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/info/logo.png"
+  },
+  base: {
+    id: "base",
+    name: "Base",
+    viemChain: base,
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/base/info/logo.png"
+  },
+  arbitrum: {
+    id: "arbitrum",
+    name: "Arbitrum",
+    viemChain: arbitrum,
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/arbitrum/info/logo.png"
+  }
+};
+var TOKEN_DECIMALS = {
+  USDC: 6,
+  USDT: 6,
+  DAI: 18,
+  ETH: 18,
+  WETH: 18,
+  WBTC: 8,
+  cbBTC: 8
+};
+function DepositWithdrawForm({
+  venueType,
+  venueAddress,
+  tokenSymbol,
+  tokenDecimals,
+  positionBalance = "0",
+  onSuccess,
+  onError
+}) {
+  const [activeTab, setActiveTab] = useState("deposit");
+  const [amount, setAmount] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [statusMessage, setStatusMessage] = useState("");
+  const [error, setError] = useState(null);
+  const { address, isConnected, signTypedData, switchChain } = useCompassWallet();
+  const { client } = useEmbeddableApi();
+  const { chainId } = useChain();
+  const { earnAccountAddress } = useEarnAccount();
+  const queryClient = useQueryClient();
+  const chainConfig = CHAINS[chainId];
+  const targetChainId = chainConfig?.viemChain?.id;
+  const { data: tokenBalance } = useQuery({
+    queryKey: ["earnAccountTokenBalance", chainId, earnAccountAddress, tokenSymbol],
+    queryFn: async () => {
+      if (!earnAccountAddress) return "0";
+      try {
+        const response = await client.token.tokenBalance({
+          chain: chainId,
+          user: earnAccountAddress,
+          token: tokenSymbol
+        });
+        return response.amount || "0";
+      } catch (error2) {
+        console.error("Error fetching earn account token balance:", error2);
+        return "0";
+      }
+    },
+    enabled: !!earnAccountAddress,
+    staleTime: 10 * 1e3
+  });
+  const availableBalance = tokenBalance || "0";
+  const maxBalance = activeTab === "deposit" ? availableBalance : positionBalance;
+  const handleQuickAmount = useCallback((percentage) => {
+    const max = parseFloat(maxBalance);
+    if (isNaN(max)) return;
+    setAmount((max * percentage).toFixed(tokenDecimals > 6 ? 6 : tokenDecimals));
+  }, [maxBalance, tokenDecimals]);
+  const handleSubmit = useCallback(async () => {
+    if (!address || !amount) return;
+    setIsSubmitting(true);
+    setStatusMessage("Preparing transaction...");
+    setError(null);
+    try {
+      if (switchChain && targetChainId) {
+        setStatusMessage("Checking network...");
+        try {
+          await switchChain(targetChainId);
+        } catch {
+        }
+      }
+      const isDeposit = activeTab === "deposit";
+      const prepareEndpoint = isDeposit ? "/api/compass/deposit/prepare" : "/api/compass/withdraw/prepare";
+      const executeEndpoint = isDeposit ? "/api/compass/deposit/execute" : "/api/compass/withdraw/execute";
+      const prepareBody = {
+        amount,
+        token: tokenSymbol,
+        owner: address,
+        chain: chainId,
+        venueType
+      };
+      if (venueType === "VAULT") {
+        prepareBody.vaultAddress = venueAddress;
+      } else if (venueType === "PENDLE_PT") {
+        prepareBody.marketAddress = venueAddress;
+        prepareBody.maxSlippagePercent = 1;
+      }
+      setStatusMessage("Getting transaction data...");
+      const prepareResponse = await fetch(prepareEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(prepareBody)
+      });
+      if (!prepareResponse.ok) {
+        const errorData = await prepareResponse.json();
+        throw new Error(errorData.error || "Failed to prepare transaction");
+      }
+      const { eip712, normalizedTypes, domain, message } = await prepareResponse.json();
+      setStatusMessage("Please sign the transaction...");
+      const signature = await signTypedData({
+        domain,
+        types: normalizedTypes,
+        primaryType: "SafeTx",
+        message
+      });
+      setStatusMessage("Executing transaction...");
+      const executeResponse = await fetch(executeEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          eip712,
+          signature,
+          chain: chainId
+        })
+      });
+      if (!executeResponse.ok) {
+        const errorData = await executeResponse.json();
+        throw new Error(errorData.error || "Failed to execute transaction");
+      }
+      const { txHash } = await executeResponse.json();
+      setStatusMessage("Transaction successful!");
+      onSuccess?.(activeTab, amount, txHash);
+      setAmount("");
+      queryClient.invalidateQueries({ queryKey: ["earnAccountTokenBalance"] });
+      queryClient.invalidateQueries({ queryKey: ["vaults"] });
+      queryClient.invalidateQueries({ queryKey: ["vaultPositions"] });
+      queryClient.invalidateQueries({ queryKey: ["aaveMarkets"] });
+      queryClient.invalidateQueries({ queryKey: ["aavePositions"] });
+      queryClient.invalidateQueries({ queryKey: ["pendleMarkets"] });
+      queryClient.invalidateQueries({ queryKey: ["pendlePositions"] });
+      setTimeout(() => setStatusMessage(""), 3e3);
+      setTimeout(() => {
+        queryClient.invalidateQueries({ queryKey: ["earnAccountTokenBalance"] });
+        queryClient.invalidateQueries({ queryKey: ["vaults"] });
+        queryClient.invalidateQueries({ queryKey: ["vaultPositions"] });
+      }, 5e3);
+    } catch (err) {
+      console.error("Transaction failed:", err);
+      const errorMessage = err instanceof Error ? err.message : "Transaction failed";
+      setError(errorMessage);
+      onError?.(err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [
+    address,
+    amount,
+    chainId,
+    targetChainId,
+    activeTab,
+    venueType,
+    venueAddress,
+    tokenSymbol,
+    signTypedData,
+    switchChain,
+    queryClient,
+    onSuccess,
+    onError
+  ]);
+  if (!isConnected) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-col items-center gap-3 py-6 px-4 rounded-lg",
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          border: "1px solid var(--compass-color-border)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(AlertCircle, { size: 24, style: { color: "var(--compass-color-text-tertiary)" } }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-sm text-center",
+              style: { color: "var(--compass-color-text-secondary)" },
+              children: "Connect your wallet to deposit or withdraw"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex gap-1 p-1 rounded-lg",
+        style: { backgroundColor: "var(--compass-color-background)" },
+        children: ["deposit", "withdraw"].map((tab) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setActiveTab(tab);
+              setError(null);
+              setStatusMessage("");
+            },
+            className: "flex-1 py-2 rounded-md text-sm font-medium capitalize transition-all",
+            style: {
+              backgroundColor: activeTab === tab ? "var(--compass-color-surface)" : "transparent",
+              color: activeTab === tab ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)"
+            },
+            children: tab
+          },
+          tab
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: "text-sm font-medium",
+            style: { color: "var(--compass-color-text-secondary)" },
+            children: "Amount"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: [
+          "Available: ",
+          parseFloat(maxBalance).toFixed(4),
+          " ",
+          tokenSymbol
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-2 p-3 rounded-lg border",
+          style: {
+            backgroundColor: "var(--compass-color-background)",
+            borderColor: "var(--compass-color-border)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: amount,
+                onChange: (e) => {
+                  setAmount(e.target.value);
+                  setError(null);
+                },
+                placeholder: "0.00",
+                className: "flex-1 bg-transparent outline-none text-lg font-mono",
+                style: { color: "var(--compass-color-text)" }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-sm font-medium",
+                style: { color: "var(--compass-color-text-secondary)" },
+                children: tokenSymbol
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [0.25, 0.5, 1].map((pct) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => handleQuickAmount(pct),
+        className: "flex-1 py-1.5 rounded-md text-xs font-medium transition-colors",
+        style: {
+          backgroundColor: "var(--compass-color-secondary)",
+          color: "var(--compass-color-text-secondary)"
+        },
+        children: pct === 1 ? "Max" : `${pct * 100}%`
+      },
+      pct
+    )) }),
+    error && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-3 rounded-lg text-sm",
+        style: {
+          backgroundColor: "var(--compass-color-error-muted, rgba(239, 68, 68, 0.1))",
+          color: "var(--compass-color-error, #ef4444)"
+        },
+        children: error
+      }
+    ),
+    statusMessage && !error && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-3 rounded-lg text-sm text-center",
+        style: {
+          backgroundColor: "var(--compass-color-success-muted, rgba(34, 197, 94, 0.1))",
+          color: "var(--compass-color-success, #22c55e)"
+        },
+        children: statusMessage
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleSubmit,
+        disabled: isSubmitting || !amount || parseFloat(amount) <= 0,
+        className: "w-full py-3 rounded-lg font-medium transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+        style: {
+          backgroundColor: "var(--compass-color-primary)",
+          color: "var(--compass-color-primary-text)"
+        },
+        children: [
+          isSubmitting && /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
+          isSubmitting ? "Processing..." : activeTab === "deposit" ? "Deposit" : "Withdraw"
+        ]
+      }
+    )
+  ] });
+}
+function getExplorerUrl(txHash, chainId) {
+  const explorers = {
+    ethereum: "https://etherscan.io/tx/",
+    arbitrum: "https://arbiscan.io/tx/",
+    base: "https://basescan.org/tx/"
+  };
+  return `${explorers[chainId] || explorers.ethereum}${txHash}`;
+}
+function TransactionHistory({
+  deposits = [],
+  withdrawals = [],
+  tokenSymbol
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { chainId } = useChain();
+  const allEvents = [
+    ...deposits.map((d) => ({ type: "deposit", event: d })),
+    ...withdrawals.map((w) => ({ type: "withdrawal", event: w }))
+  ].sort((a, b) => b.event.blockNumber - a.event.blockNumber);
+  if (allEvents.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setIsExpanded(!isExpanded),
+        className: "flex items-center justify-between w-full px-3 py-2 rounded-lg border transition-colors",
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          borderColor: "var(--compass-color-border)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "text-sm font-medium",
+              style: { color: "var(--compass-color-text-secondary)" },
+              children: [
+                "Transaction History (",
+                allEvents.length,
+                ")"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              size: 16,
+              className: `transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`,
+              style: { color: "var(--compass-color-text-tertiary)" }
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mt-2 max-h-48 overflow-y-auto rounded-lg border",
+        style: { borderColor: "var(--compass-color-border)" },
+        children: /* @__PURE__ */ jsx("div", { children: allEvents.map((item, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between px-3 py-2",
+            style: {
+              backgroundColor: "var(--compass-color-surface)",
+              borderTop: index > 0 ? "1px solid var(--compass-color-border)" : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                item.type === "deposit" ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "p-1 rounded-full",
+                    style: { backgroundColor: "var(--compass-color-success-muted)" },
+                    children: /* @__PURE__ */ jsx(ArrowDownLeft, { size: 12, style: { color: "var(--compass-color-success)" } })
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "p-1 rounded-full",
+                    style: { backgroundColor: "var(--compass-color-warning-muted)" },
+                    children: /* @__PURE__ */ jsx(ArrowUpRight, { size: 12, style: { color: "var(--compass-color-warning)" } })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-xs font-medium",
+                      style: { color: "var(--compass-color-text)" },
+                      children: item.type === "deposit" ? "Deposit" : "Withdrawal"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "text-[10px]",
+                      style: { color: "var(--compass-color-text-tertiary)" },
+                      children: [
+                        "Block #",
+                        item.event.blockNumber.toLocaleString()
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "text-xs font-mono font-medium",
+                    style: {
+                      color: item.type === "deposit" ? "var(--compass-color-success)" : "var(--compass-color-warning)"
+                    },
+                    children: [
+                      item.type === "deposit" ? "+" : "-",
+                      parseFloat(item.event.amount).toFixed(4),
+                      " ",
+                      tokenSymbol
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: getExplorerUrl(item.event.txHash, chainId),
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "p-1 rounded hover:opacity-70 transition-opacity",
+                    title: "View on explorer",
+                    children: /* @__PURE__ */ jsx(
+                      ExternalLink,
+                      {
+                        size: 12,
+                        style: { color: "var(--compass-color-text-tertiary)" }
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          },
+          `${item.type}-${item.event.txHash}-${index}`
+        )) })
+      }
+    )
+  ] });
+}
+function EarnAccountGuard({
+  children,
+  loadingComponent,
+  createAccountComponent
+}) {
+  const { isConnected, login } = useEmbeddableWallet();
+  const { isDeployed, isChecking, isCreating, createAccount, error } = useEarnAccount();
+  const [createError, setCreateError] = useState(null);
+  if (!isConnected) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "compass-earn-guard p-6 text-center rounded-xl",
+        style: {
+          backgroundColor: "var(--compass-color-surface)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm mb-4", style: { color: "var(--compass-color-text-secondary)" }, children: "Connect your wallet to continue" }),
+          login && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: login,
+              className: "px-4 py-2 rounded-lg font-medium transition-colors",
+              style: {
+                backgroundColor: "var(--compass-color-primary)",
+                color: "var(--compass-color-primary-text)"
+              },
+              children: "Connect Wallet"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (isChecking) {
+    if (loadingComponent) {
+      return /* @__PURE__ */ jsx(Fragment, { children: loadingComponent });
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "compass-earn-guard p-6 text-center rounded-xl",
+        style: { backgroundColor: "var(--compass-color-surface)" },
+        children: [
+          /* @__PURE__ */ jsx(
+            Loader2,
+            {
+              size: 24,
+              className: "animate-spin mx-auto mb-3",
+              style: { color: "var(--compass-color-primary)" }
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: "Checking account status..." })
+        ]
+      }
+    );
+  }
+  if (isDeployed) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (createAccountComponent) {
+    return /* @__PURE__ */ jsx(Fragment, { children: createAccountComponent });
+  }
+  const handleCreate = async () => {
+    setCreateError(null);
+    try {
+      await createAccount();
+    } catch (err) {
+      setCreateError(err instanceof Error ? err.message : "Failed to create account");
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "compass-earn-guard p-6 text-center rounded-xl border",
+      style: {
+        backgroundColor: "var(--compass-color-surface)",
+        borderColor: "var(--compass-color-border)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4",
+            style: { backgroundColor: "var(--compass-color-primary)", opacity: 0.15 },
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "var(--compass-color-primary)",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            className: "text-lg font-semibold mb-2",
+            style: { color: "var(--compass-color-text)" },
+            children: "Create Your Earn Account"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-sm mb-6 max-w-xs mx-auto",
+            style: { color: "var(--compass-color-text-secondary)" },
+            children: "To start earning, we need to create a secure smart wallet for you. This is a one-time setup with no gas fees."
+          }
+        ),
+        (error || createError) && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-sm mb-4",
+            style: { color: "var(--compass-color-error)" },
+            children: createError || (error instanceof Error ? error.message : "An error occurred")
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleCreate,
+            disabled: isCreating,
+            className: "px-6 py-3 rounded-lg font-medium transition-all inline-flex items-center gap-2",
+            style: {
+              backgroundColor: isCreating ? "var(--compass-color-surface-hover)" : "var(--compass-color-primary)",
+              color: isCreating ? "var(--compass-color-text-secondary)" : "var(--compass-color-primary-text)",
+              cursor: isCreating ? "not-allowed" : "pointer"
+            },
+            children: [
+              isCreating && /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }),
+              isCreating ? "Creating..." : "Create Account"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-xs mt-4",
+            style: { color: "var(--compass-color-text-tertiary)" },
+            children: "Gas fees are sponsored by Compass"
+          }
+        )
+      ]
+    }
+  );
+}
+function formatTVL(tvl) {
+  if (!tvl) return "$0";
+  const num = parseFloat(tvl);
+  if (isNaN(num)) return "$0";
+  if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
+  if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M`;
+  if (num >= 1e3) return `$${(num / 1e3).toFixed(2)}K`;
+  return `$${num.toFixed(2)}`;
+}
+function formatAPY(apy) {
+  if (!apy) return "0.00%";
+  const num = parseFloat(apy);
+  if (isNaN(num)) return "0.00%";
+  return `${num.toFixed(2)}%`;
+}
+function VaultCard({
+  vault,
+  showApy,
+  apyPeriods,
+  showTvl,
+  showUserPosition,
+  onClick
+}) {
+  const getApyValue = (period) => {
+    switch (period) {
+      case "7d":
+        return vault.apy7d;
+      case "30d":
+        return vault.apy30d;
+      case "90d":
+        return vault.apy90d;
+    }
+  };
+  const primaryApy = getApyValue(apyPeriods[0] || "7d");
+  const hasPosition = vault.userPosition && parseFloat(vault.userPosition.balance) > 0;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className: "w-full p-4 rounded-xl border transition-all text-left hover:scale-[1.01]",
+      style: {
+        backgroundColor: "var(--compass-color-surface)",
+        borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: "font-semibold",
+                style: {
+                  fontSize: "var(--compass-font-size-body)",
+                  color: "var(--compass-color-text)"
+                },
+                children: vault.name
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-sm",
+                style: { color: "var(--compass-color-text-secondary)" },
+                children: vault.assetSymbol
+              }
+            )
+          ] }),
+          showApy && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "font-mono font-semibold",
+                style: { color: "var(--compass-color-success)" },
+                children: formatAPY(primaryApy)
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t", style: { borderColor: "var(--compass-color-border)" }, children: [
+          showTvl && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-xs",
+                style: { color: "var(--compass-color-text-tertiary)" },
+                children: "TVL"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "font-mono text-sm",
+                style: { color: "var(--compass-color-text-secondary)" },
+                children: formatTVL(vault.tvlUsd)
+              }
+            )
+          ] }),
+          showUserPosition && hasPosition && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-xs",
+                style: { color: "var(--compass-color-text-tertiary)" },
+                children: "Your Position"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "font-mono text-sm font-medium",
+                style: { color: "var(--compass-color-primary)" },
+                children: [
+                  parseFloat(vault.userPosition.balance).toFixed(4),
+                  " ",
+                  vault.assetSymbol
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function useVaultsData(options = {}) {
+  const { client } = useEmbeddableApi();
+  const { address } = useEmbeddableWallet();
+  const { chainId } = useChain();
+  const { sortBy = "apy_7d", assetFilter, minApy } = options;
+  const vaultsQuery = useQuery({
+    queryKey: ["vaults", chainId, sortBy, assetFilter, minApy],
+    queryFn: async () => {
+      const assetSymbol = assetFilter && assetFilter.length === 1 ? assetFilter[0] : void 0;
+      const response = await client.earn.earnVaults({
+        chain: chainId,
+        orderBy: sortBy === "tvl" ? "tvl_usd" : sortBy,
+        direction: "desc",
+        limit: 100,
+        ...assetSymbol && { assetSymbol }
+      });
+      let vaults = (response.vaults || []).map((v) => ({
+        vaultAddress: v.vaultAddress,
+        name: v.name || "Unknown Vault",
+        assetSymbol: v.assetSymbol || "UNKNOWN",
+        apy7d: v.apy7d ?? null,
+        apy30d: v.apy30d ?? null,
+        apy90d: v.apy90d ?? null,
+        tvlUsd: v.tvlUsd ?? null
+      }));
+      if (assetFilter && assetFilter.length > 1) {
+        vaults = vaults.filter(
+          (v) => assetFilter.includes(v.assetSymbol.toUpperCase())
+        );
+      }
+      if (minApy !== void 0 && minApy > 0) {
+        vaults = vaults.filter((v) => {
+          const apy = parseFloat(v.apy7d || "0");
+          return apy >= minApy;
+        });
+      }
+      return vaults;
+    },
+    staleTime: 30 * 1e3
+  });
+  const positionsQuery = useQuery({
+    queryKey: ["vaultPositions", chainId, address],
+    queryFn: async () => {
+      if (!address) return [];
+      const response = await client.earn.earnPositions({
+        chain: chainId,
+        owner: address
+      });
+      return (response.vaults || []).map((p) => ({
+        vaultAddress: p.vaultAddress,
+        balance: p.balance || "0",
+        pnl: p.pnl ? {
+          unrealizedPnl: p.pnl.unrealizedPnl || "0",
+          realizedPnl: p.pnl.realizedPnl || "0",
+          totalPnl: p.pnl.totalPnl || "0",
+          totalDeposited: p.pnl.totalDeposited || "0"
+        } : void 0,
+        deposits: (p.deposits || []).map((d) => ({
+          amount: d.inputAmount || d.amount || "0",
+          blockNumber: d.blockNumber || 0,
+          txHash: d.transactionHash || d.txHash || ""
+        })),
+        withdrawals: (p.withdrawals || []).map((w) => ({
+          amount: w.outputAmount || w.amount || "0",
+          blockNumber: w.blockNumber || 0,
+          txHash: w.transactionHash || w.txHash || ""
+        }))
+      }));
+    },
+    enabled: !!address,
+    staleTime: 30 * 1e3
+  });
+  const vaultsWithPositions = (vaultsQuery.data || []).map((vault) => {
+    const position = positionsQuery.data?.find(
+      (p) => p.vaultAddress.toLowerCase() === vault.vaultAddress.toLowerCase()
+    );
+    return { ...vault, userPosition: position };
+  });
+  return {
+    vaults: vaultsWithPositions,
+    isLoading: vaultsQuery.isLoading,
+    isError: vaultsQuery.isError,
+    error: vaultsQuery.error,
+    refetch: () => {
+      vaultsQuery.refetch();
+      positionsQuery.refetch();
+    }
+  };
+}
+var TOKEN_DECIMALS2 = {
+  USDC: 6,
+  USDT: 6,
+  DAI: 18,
+  ETH: 18,
+  WETH: 18,
+  WBTC: 8,
+  cbBTC: 8
+};
+function VaultsList({
+  showApy = true,
+  apyPeriods = ["7d", "30d", "90d"],
+  showTvl = true,
+  showUserPosition = true,
+  showPnL = true,
+  showHistory = true,
+  showSearch = true,
+  showSort = true,
+  actionMode = "modal",
+  defaultSort = "apy_7d",
+  assetFilter,
+  minApy,
+  onVaultSelect,
+  onDeposit,
+  onWithdraw
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortBy, setSortBy] = useState(defaultSort);
+  const [selectedVault, setSelectedVault] = useState(null);
+  const { vaults, isLoading, isError, refetch } = useVaultsData({
+    sortBy,
+    assetFilter,
+    minApy
+  });
+  const filteredVaults = useMemo(() => {
+    if (!searchQuery) return vaults;
+    const query = searchQuery.toLowerCase();
+    return vaults.filter(
+      (v) => v.name.toLowerCase().includes(query) || v.assetSymbol.toLowerCase().includes(query)
+    );
+  }, [vaults, searchQuery]);
+  const handleVaultClick = (vault) => {
+    setSelectedVault(vault);
+    onVaultSelect?.(vault);
+  };
+  const handleActionSuccess = (action, amount, txHash) => {
+    if (action === "deposit") {
+      onDeposit?.(selectedVault, amount, txHash);
+    } else {
+      onWithdraw?.(selectedVault, amount, txHash);
+    }
+    refetch();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsx(ChainSwitcher, {}),
+      /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+    ] }),
+    (showSearch || showSort) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      showSearch && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border",
+          style: {
+            backgroundColor: "var(--compass-color-background)",
+            borderColor: "var(--compass-color-border)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: "Search vaults...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                className: "flex-1 bg-transparent outline-none text-sm",
+                style: { color: "var(--compass-color-text)" }
+              }
+            )
+          ]
+        }
+      ),
+      showSort && /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: sortBy,
+          onChange: (e) => setSortBy(e.target.value),
+          className: "px-3 py-2 rounded-lg border text-sm cursor-pointer",
+          style: {
+            backgroundColor: "var(--compass-color-background)",
+            borderColor: "var(--compass-color-border)",
+            color: "var(--compass-color-text)"
+          },
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "apy_7d", children: "APY (7D)" }),
+            /* @__PURE__ */ jsx("option", { value: "apy_30d", children: "APY (30D)" }),
+            /* @__PURE__ */ jsx("option", { value: "apy_90d", children: "APY (90D)" }),
+            /* @__PURE__ */ jsx("option", { value: "tvl", children: "TVL" })
+          ]
+        }
+      )
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-4 rounded-lg text-center",
+        style: {
+          backgroundColor: "var(--compass-color-error-muted)",
+          color: "var(--compass-color-error)"
+        },
+        children: "Failed to load vaults. Please try again."
+      }
+    ) : filteredVaults.length === 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-8 text-center",
+        style: { color: "var(--compass-color-text-secondary)" },
+        children: "No vaults found"
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: filteredVaults.map((vault) => /* @__PURE__ */ jsx(
+      VaultCard,
+      {
+        vault,
+        showApy,
+        apyPeriods,
+        showTvl,
+        showUserPosition,
+        onClick: () => handleVaultClick(vault)
+      },
+      vault.vaultAddress
+    )) }),
+    actionMode === "modal" && selectedVault && /* @__PURE__ */ jsx(
+      ActionModal,
+      {
+        isOpen: !!selectedVault,
+        onClose: () => setSelectedVault(null),
+        title: selectedVault.name,
+        children: /* @__PURE__ */ jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          showPnL && selectedVault.userPosition?.pnl && /* @__PURE__ */ jsx(
+            PnLSummary,
+            {
+              pnl: selectedVault.userPosition.pnl,
+              tokenSymbol: selectedVault.assetSymbol,
+              tokenPrice: 1
+            }
+          ),
+          showHistory && (selectedVault.userPosition?.deposits?.length || selectedVault.userPosition?.withdrawals?.length) && /* @__PURE__ */ jsx(
+            TransactionHistory,
+            {
+              deposits: selectedVault.userPosition?.deposits,
+              withdrawals: selectedVault.userPosition?.withdrawals,
+              tokenSymbol: selectedVault.assetSymbol
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DepositWithdrawForm,
+            {
+              venueType: "VAULT",
+              venueAddress: selectedVault.vaultAddress,
+              tokenSymbol: selectedVault.assetSymbol,
+              tokenDecimals: TOKEN_DECIMALS2[selectedVault.assetSymbol] || 18,
+              positionBalance: selectedVault.userPosition?.balance,
+              onSuccess: handleActionSuccess
+            }
+          )
+        ] }) })
+      }
+    )
+  ] });
+}
+function useAaveData(options = {}) {
+  const { client } = useEmbeddableApi();
+  const { address } = useEmbeddableWallet();
+  const { chainId } = useChain();
+  const { sortBy = "supply_apy", assetFilter } = options;
+  const marketsQuery = useQuery({
+    queryKey: ["aaveMarkets", chainId, sortBy, assetFilter],
+    queryFn: async () => {
+      const response = await client.earn.earnAaveMarkets({
+        chain: chainId
+      });
+      const marketsDict = response.markets || {};
+      let markets = [];
+      for (const [symbol, tokenData] of Object.entries(marketsDict)) {
+        if (assetFilter && assetFilter.length > 0) {
+          if (!assetFilter.includes(symbol.toUpperCase())) {
+            continue;
+          }
+        }
+        const token = tokenData;
+        const chainData = token.chains?.[chainId];
+        if (chainData) {
+          markets.push({
+            marketAddress: chainData.address || "",
+            reserveSymbol: symbol,
+            underlyingSymbol: symbol,
+            supplyApy: chainData.supplyApy?.toString() ?? null,
+            borrowApy: chainData.borrowApy?.toString() ?? null,
+            // Aave API doesn't provide TVL
+            tvlUsd: null
+          });
+        }
+      }
+      markets.sort((a, b) => {
+        return parseFloat(b.supplyApy || "0") - parseFloat(a.supplyApy || "0");
+      });
+      return markets;
+    },
+    staleTime: 30 * 1e3
+  });
+  const positionsQuery = useQuery({
+    queryKey: ["aavePositions", chainId, address],
+    queryFn: async () => {
+      if (!address) return [];
+      const response = await client.earn.earnPositions({
+        chain: chainId,
+        owner: address
+      });
+      return (response.aave || []).map((p) => ({
+        marketAddress: p.marketAddress || "",
+        reserveSymbol: p.reserveSymbol || "",
+        balance: p.balance || "0",
+        pnl: p.pnl ? {
+          unrealizedPnl: p.pnl.unrealizedPnl || "0",
+          realizedPnl: p.pnl.realizedPnl || "0",
+          totalPnl: p.pnl.totalPnl || "0",
+          totalDeposited: p.pnl.totalDeposited || "0"
+        } : void 0,
+        deposits: (p.deposits || []).map((d) => ({
+          amount: d.inputAmount || d.amount || "0",
+          blockNumber: d.blockNumber || 0,
+          txHash: d.transactionHash || d.txHash || ""
+        })),
+        withdrawals: (p.withdrawals || []).map((w) => ({
+          amount: w.outputAmount || w.amount || "0",
+          blockNumber: w.blockNumber || 0,
+          txHash: w.transactionHash || w.txHash || ""
+        }))
+      }));
+    },
+    enabled: !!address,
+    staleTime: 30 * 1e3
+  });
+  const marketsWithPositions = (marketsQuery.data || []).map((market) => {
+    const position = positionsQuery.data?.find(
+      (p) => p.reserveSymbol.toLowerCase() === market.reserveSymbol.toLowerCase()
+    );
+    return { ...market, userPosition: position };
+  });
+  return {
+    markets: marketsWithPositions,
+    isLoading: marketsQuery.isLoading,
+    isError: marketsQuery.isError,
+    error: marketsQuery.error,
+    refetch: () => {
+      marketsQuery.refetch();
+      positionsQuery.refetch();
+    }
+  };
+}
+var TOKEN_DECIMALS3 = {
+  USDC: 6,
+  USDT: 6,
+  DAI: 18,
+  ETH: 18,
+  WETH: 18,
+  WBTC: 8,
+  cbBTC: 8
+};
+function formatAPY2(apy) {
+  if (!apy) return "0.00%";
+  const num = parseFloat(apy);
+  return `${num.toFixed(2)}%`;
+}
+function formatTVL2(tvl) {
+  if (!tvl) return "$0";
+  const num = parseFloat(tvl);
+  if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
+  if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M`;
+  if (num >= 1e3) return `$${(num / 1e3).toFixed(2)}K`;
+  return `$${num.toFixed(2)}`;
+}
+function AaveMarketsList({
+  showApy = true,
+  showTvl = false,
+  // Aave API doesn't provide TVL data
+  showUserPosition = true,
+  showPnL = true,
+  showHistory = true,
+  showSearch = true,
+  showSort = false,
+  // Only one sort option (APY), so hide by default
+  actionMode = "modal",
+  defaultSort = "supply_apy",
+  assetFilter,
+  onMarketSelect,
+  onSupply,
+  onWithdraw
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortBy, setSortBy] = useState(defaultSort);
+  const [selectedMarket, setSelectedMarket] = useState(null);
+  const { markets, isLoading, isError, refetch } = useAaveData({ sortBy, assetFilter });
+  const filteredMarkets = useMemo(() => {
+    if (!searchQuery) return markets;
+    const query = searchQuery.toLowerCase();
+    return markets.filter(
+      (m) => m.reserveSymbol.toLowerCase().includes(query) || m.underlyingSymbol.toLowerCase().includes(query)
+    );
+  }, [markets, searchQuery]);
+  const handleMarketClick = (market) => {
+    setSelectedMarket(market);
+    onMarketSelect?.(market);
+  };
+  const handleActionSuccess = (action, amount, txHash) => {
+    if (action === "deposit") {
+      onSupply?.(selectedMarket, amount, txHash);
+    } else {
+      onWithdraw?.(selectedMarket, amount, txHash);
+    }
+    refetch();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsx(ChainSwitcher, {}),
+      /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+    ] }),
+    (showSearch || showSort) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      showSearch && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border",
+          style: {
+            backgroundColor: "var(--compass-color-background)",
+            borderColor: "var(--compass-color-border)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: "Search markets...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                className: "flex-1 bg-transparent outline-none text-sm",
+                style: { color: "var(--compass-color-text)" }
+              }
+            )
+          ]
+        }
+      ),
+      showSort && /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: sortBy,
+          onChange: (e) => setSortBy(e.target.value),
+          className: "px-3 py-2 rounded-lg border text-sm cursor-pointer",
+          style: {
+            backgroundColor: "var(--compass-color-background)",
+            borderColor: "var(--compass-color-border)",
+            color: "var(--compass-color-text)"
+          },
+          children: /* @__PURE__ */ jsx("option", { value: "supply_apy", children: "Supply APY" })
+        }
+      )
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-4 rounded-lg text-center",
+        style: {
+          backgroundColor: "var(--compass-color-error-muted)",
+          color: "var(--compass-color-error)"
+        },
+        children: "Failed to load Aave markets. Please try again."
+      }
+    ) : filteredMarkets.length === 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-8 text-center",
+        style: { color: "var(--compass-color-text-secondary)" },
+        children: "No markets found"
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: filteredMarkets.map((market) => {
+      const hasPosition = market.userPosition && parseFloat(market.userPosition.balance) > 0;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => handleMarketClick(market),
+          className: "w-full p-4 rounded-xl border transition-all text-left hover:scale-[1.01]",
+          style: {
+            backgroundColor: "var(--compass-color-surface)",
+            borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: "font-semibold",
+                    style: {
+                      fontSize: "var(--compass-font-size-body)",
+                      color: "var(--compass-color-text)"
+                    },
+                    children: market.underlyingSymbol
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-sm",
+                    style: { color: "var(--compass-color-text-secondary)" },
+                    children: "Aave V3"
+                  }
+                )
+              ] }),
+              showApy && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "font-mono font-semibold",
+                    style: { color: "var(--compass-color-success)" },
+                    children: formatAPY2(market.supplyApy)
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t", style: { borderColor: "var(--compass-color-border)" }, children: [
+              showTvl && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-xs",
+                    style: { color: "var(--compass-color-text-tertiary)" },
+                    children: "TVL"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "font-mono text-sm",
+                    style: { color: "var(--compass-color-text-secondary)" },
+                    children: formatTVL2(market.tvlUsd)
+                  }
+                )
+              ] }),
+              showUserPosition && hasPosition && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-xs",
+                    style: { color: "var(--compass-color-text-tertiary)" },
+                    children: "Your Position"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "font-mono text-sm font-medium",
+                    style: { color: "var(--compass-color-primary)" },
+                    children: [
+                      parseFloat(market.userPosition.balance).toFixed(4),
+                      " ",
+                      market.underlyingSymbol
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        market.marketAddress
+      );
+    }) }),
+    actionMode === "modal" && selectedMarket && /* @__PURE__ */ jsx(
+      ActionModal,
+      {
+        isOpen: !!selectedMarket,
+        onClose: () => setSelectedMarket(null),
+        title: `${selectedMarket.underlyingSymbol} - Aave`,
+        children: /* @__PURE__ */ jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          showPnL && selectedMarket.userPosition?.pnl && /* @__PURE__ */ jsx(
+            PnLSummary,
+            {
+              pnl: selectedMarket.userPosition.pnl,
+              tokenSymbol: selectedMarket.underlyingSymbol,
+              tokenPrice: 1
+            }
+          ),
+          showHistory && (selectedMarket.userPosition?.deposits?.length || selectedMarket.userPosition?.withdrawals?.length) && /* @__PURE__ */ jsx(
+            TransactionHistory,
+            {
+              deposits: selectedMarket.userPosition?.deposits,
+              withdrawals: selectedMarket.userPosition?.withdrawals,
+              tokenSymbol: selectedMarket.underlyingSymbol
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DepositWithdrawForm,
+            {
+              venueType: "AAVE",
+              venueAddress: selectedMarket.marketAddress,
+              tokenSymbol: selectedMarket.underlyingSymbol,
+              tokenDecimals: TOKEN_DECIMALS3[selectedMarket.underlyingSymbol] || 18,
+              positionBalance: selectedMarket.userPosition?.balance,
+              onSuccess: handleActionSuccess
+            }
+          )
+        ] }) })
+      }
+    )
+  ] });
+}
+function usePendleData(options = {}) {
+  const { client } = useEmbeddableApi();
+  const { address } = useEmbeddableWallet();
+  const { chainId } = useChain();
+  const { sortBy = "fixed_apy", assetFilter } = options;
+  const marketsQuery = useQuery({
+    queryKey: ["pendleMarkets", chainId, sortBy, assetFilter],
+    queryFn: async () => {
+      const underlyingSymbol = assetFilter && assetFilter.length === 1 ? assetFilter[0] : void 0;
+      const orderBy = sortBy === "tvl" ? "tvl_usd" : "implied_apy";
+      const response = await client.earn.earnPendleMarkets({
+        chain: chainId,
+        orderBy,
+        direction: "desc",
+        limit: 100,
+        ...underlyingSymbol && { underlyingSymbol }
+      });
+      const now = Date.now() / 1e3;
+      let markets = (response.markets || []).filter((m) => m.expiry && m.expiry > now).map((m) => ({
+        marketAddress: m.marketAddress || "",
+        ptAddress: m.ptAddress || "",
+        name: m.ptName || `PT-${m.underlyingSymbol || "UNKNOWN"}`,
+        underlyingSymbol: m.underlyingSymbol || "UNKNOWN",
+        // Use impliedApy as the main APY (this is what wallet-earn displays)
+        fixedApy: m.impliedApy?.toString() ?? null,
+        impliedApy: m.impliedApy?.toString() ?? null,
+        tvlUsd: m.tvlUsd?.toString() ?? null,
+        // Convert Unix timestamp to ISO string for display
+        expiry: new Date(m.expiry * 1e3).toISOString()
+      }));
+      if (assetFilter && assetFilter.length > 1) {
+        markets = markets.filter(
+          (m) => assetFilter.includes(m.underlyingSymbol.toUpperCase())
+        );
+      }
+      if (sortBy === "expiry") {
+        markets.sort((a, b) => {
+          return new Date(a.expiry).getTime() - new Date(b.expiry).getTime();
+        });
+      }
+      return markets;
+    },
+    staleTime: 30 * 1e3
+  });
+  const positionsQuery = useQuery({
+    queryKey: ["pendlePositions", chainId, address],
+    queryFn: async () => {
+      if (!address) return [];
+      const response = await client.earn.earnPositions({
+        chain: chainId,
+        owner: address
+      });
+      return (response.pendlePt || []).map((p) => ({
+        marketAddress: p.marketAddress || "",
+        balance: p.balance || "0",
+        pnl: p.pnl ? {
+          unrealizedPnl: p.pnl.unrealizedPnl || "0",
+          realizedPnl: p.pnl.realizedPnl || "0",
+          totalPnl: p.pnl.totalPnl || "0",
+          totalDeposited: p.pnl.totalDeposited || "0"
+        } : void 0,
+        deposits: (p.deposits || []).map((d) => ({
+          amount: d.inputAmount || d.amount || "0",
+          blockNumber: d.blockNumber || 0,
+          txHash: d.transactionHash || d.txHash || ""
+        })),
+        withdrawals: (p.withdrawals || []).map((w) => ({
+          amount: w.outputAmount || w.amount || "0",
+          blockNumber: w.blockNumber || 0,
+          txHash: w.transactionHash || w.txHash || ""
+        }))
+      }));
+    },
+    enabled: !!address,
+    staleTime: 30 * 1e3
+  });
+  const marketsWithPositions = (marketsQuery.data || []).map((market) => {
+    const position = positionsQuery.data?.find(
+      (p) => p.marketAddress.toLowerCase() === market.marketAddress.toLowerCase()
+    );
+    return { ...market, userPosition: position };
+  });
+  return {
+    markets: marketsWithPositions,
+    isLoading: marketsQuery.isLoading,
+    isError: marketsQuery.isError,
+    error: marketsQuery.error,
+    refetch: () => {
+      marketsQuery.refetch();
+      positionsQuery.refetch();
+    }
+  };
+}
+var TOKEN_DECIMALS4 = {
+  USDC: 6,
+  USDT: 6,
+  DAI: 18,
+  ETH: 18,
+  WETH: 18,
+  WBTC: 8,
+  cbBTC: 8
+};
+function formatAPY3(apy) {
+  if (!apy) return "0.00%";
+  return `${parseFloat(apy).toFixed(2)}%`;
+}
+function formatExpiry(expiry) {
+  const date = new Date(expiry);
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+}
+function formatTVL3(tvl) {
+  if (!tvl) return "$0";
+  const num = parseFloat(tvl);
+  if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
+  if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M`;
+  if (num >= 1e3) return `$${(num / 1e3).toFixed(2)}K`;
+  return `$${num.toFixed(2)}`;
+}
+function PendleMarketsList({
+  showApy = true,
+  showTvl = true,
+  showExpiry = true,
+  showUserPosition = true,
+  showPnL = true,
+  showHistory = true,
+  showSearch = true,
+  showSort = true,
+  actionMode = "modal",
+  defaultSort = "fixed_apy",
+  assetFilter,
+  onMarketSelect,
+  onDeposit,
+  onWithdraw
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortBy, setSortBy] = useState(defaultSort);
+  const [selectedMarket, setSelectedMarket] = useState(null);
+  const { markets, isLoading, isError, refetch } = usePendleData({ sortBy, assetFilter });
+  const filteredMarkets = useMemo(() => {
+    if (!searchQuery) return markets;
+    const query = searchQuery.toLowerCase();
+    return markets.filter(
+      (m) => m.name.toLowerCase().includes(query) || m.underlyingSymbol.toLowerCase().includes(query)
+    );
+  }, [markets, searchQuery]);
+  const handleMarketClick = (market) => {
+    setSelectedMarket(market);
+    onMarketSelect?.(market);
+  };
+  const handleActionSuccess = (action, amount, txHash) => {
+    if (action === "deposit") {
+      onDeposit?.(selectedMarket, amount, txHash);
+    } else {
+      onWithdraw?.(selectedMarket, amount, txHash);
+    }
+    refetch();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsx(ChainSwitcher, {}),
+      /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+    ] }),
+    (showSearch || showSort) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      showSearch && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border",
+          style: {
+            backgroundColor: "var(--compass-color-background)",
+            borderColor: "var(--compass-color-border)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: "Search markets...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                className: "flex-1 bg-transparent outline-none text-sm",
+                style: { color: "var(--compass-color-text)" }
+              }
+            )
+          ]
+        }
+      ),
+      showSort && /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: sortBy,
+          onChange: (e) => setSortBy(e.target.value),
+          className: "px-3 py-2 rounded-lg border text-sm cursor-pointer",
+          style: {
+            backgroundColor: "var(--compass-color-background)",
+            borderColor: "var(--compass-color-border)",
+            color: "var(--compass-color-text)"
+          },
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "fixed_apy", children: "Fixed APY" }),
+            /* @__PURE__ */ jsx("option", { value: "tvl", children: "TVL" }),
+            /* @__PURE__ */ jsx("option", { value: "expiry", children: "Expiry" })
+          ]
+        }
+      )
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-4 rounded-lg text-center",
+        style: {
+          backgroundColor: "var(--compass-color-error-muted)",
+          color: "var(--compass-color-error)"
+        },
+        children: "Failed to load Pendle markets. Please try again."
+      }
+    ) : filteredMarkets.length === 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-8 text-center",
+        style: { color: "var(--compass-color-text-secondary)" },
+        children: "No active markets found"
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: filteredMarkets.map((market) => {
+      const hasPosition = market.userPosition && parseFloat(market.userPosition.balance) > 0;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => handleMarketClick(market),
+          className: "w-full p-4 rounded-xl border transition-all text-left hover:scale-[1.01]",
+          style: {
+            backgroundColor: "var(--compass-color-surface)",
+            borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: "font-semibold",
+                    style: {
+                      fontSize: "var(--compass-font-size-body)",
+                      color: "var(--compass-color-text)"
+                    },
+                    children: market.name
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-sm",
+                    style: { color: "var(--compass-color-text-secondary)" },
+                    children: market.underlyingSymbol
+                  }
+                )
+              ] }),
+              showApy && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "font-mono font-semibold",
+                    style: { color: "var(--compass-color-success)" },
+                    children: formatAPY3(market.fixedApy)
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t", style: { borderColor: "var(--compass-color-border)" }, children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+                showTvl && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-xs",
+                      style: { color: "var(--compass-color-text-tertiary)" },
+                      children: "TVL"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "font-mono text-sm",
+                      style: { color: "var(--compass-color-text-secondary)" },
+                      children: formatTVL3(market.tvlUsd)
+                    }
+                  )
+                ] }),
+                showExpiry && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-xs",
+                      style: { color: "var(--compass-color-text-tertiary)" },
+                      children: "Expiry"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(Calendar, { size: 12, style: { color: "var(--compass-color-text-secondary)" } }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "font-mono text-sm",
+                        style: { color: "var(--compass-color-text-secondary)" },
+                        children: formatExpiry(market.expiry)
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              showUserPosition && hasPosition && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-xs",
+                    style: { color: "var(--compass-color-text-tertiary)" },
+                    children: "Your Position"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "font-mono text-sm font-medium",
+                    style: { color: "var(--compass-color-primary)" },
+                    children: [
+                      parseFloat(market.userPosition.balance).toFixed(4),
+                      " PT"
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        market.marketAddress
+      );
+    }) }),
+    actionMode === "modal" && selectedMarket && /* @__PURE__ */ jsx(
+      ActionModal,
+      {
+        isOpen: !!selectedMarket,
+        onClose: () => setSelectedMarket(null),
+        title: selectedMarket.name,
+        children: /* @__PURE__ */ jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          showPnL && selectedMarket.userPosition?.pnl && /* @__PURE__ */ jsx(
+            PnLSummary,
+            {
+              pnl: selectedMarket.userPosition.pnl,
+              tokenSymbol: selectedMarket.underlyingSymbol,
+              tokenPrice: 1
+            }
+          ),
+          showHistory && (selectedMarket.userPosition?.deposits?.length || selectedMarket.userPosition?.withdrawals?.length) && /* @__PURE__ */ jsx(
+            TransactionHistory,
+            {
+              deposits: selectedMarket.userPosition?.deposits,
+              withdrawals: selectedMarket.userPosition?.withdrawals,
+              tokenSymbol: selectedMarket.underlyingSymbol
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DepositWithdrawForm,
+            {
+              venueType: "PENDLE_PT",
+              venueAddress: selectedMarket.marketAddress,
+              tokenSymbol: selectedMarket.underlyingSymbol,
+              tokenDecimals: TOKEN_DECIMALS4[selectedMarket.underlyingSymbol] || 18,
+              positionBalance: selectedMarket.userPosition?.balance,
+              onSuccess: handleActionSuccess
+            }
+          )
+        ] }) })
+      }
+    )
+  ] });
+}
+function useSwapQuote({ fromToken, toToken, amount, enabled = true }) {
+  const { client } = useEmbeddableApi();
+  const { chainId } = useChain();
+  const query = useQuery({
+    queryKey: ["swapQuote", chainId, fromToken, toToken, amount],
+    queryFn: async () => {
+      if (!fromToken || !toToken || !amount || parseFloat(amount) <= 0) {
+        return null;
+      }
+      try {
+        const estimatedRate = 1;
+        const outputAmount = (parseFloat(amount) * estimatedRate).toString();
+        return {
+          inputAmount: amount,
+          outputAmount,
+          rate: estimatedRate.toString(),
+          priceImpact: "0",
+          fee: "0"
+        };
+      } catch (error) {
+        console.error("Failed to get swap quote:", error);
+        return null;
+      }
+    },
+    enabled: enabled && !!fromToken && !!toToken && !!amount && parseFloat(amount) > 0,
+    staleTime: 10 * 1e3,
+    // 10 seconds - quotes change frequently
+    refetchInterval: 15 * 1e3
+    // Refresh every 15 seconds
+  });
+  return {
+    quote: query.data,
+    isLoading: query.isLoading,
+    isError: query.isError,
+    refetch: query.refetch
+  };
+}
+var DEFAULT_TOKENS = ["USDC", "ETH", "WETH", "WBTC", "DAI", "USDT"];
+function SwapWidget({
+  layout = "full",
+  defaultFromToken = "ETH",
+  defaultToToken = "USDC",
+  allowedTokens = DEFAULT_TOKENS,
+  showReverseButton = true,
+  showSettings = false,
+  showPriceImpact = true,
+  onSwapSuccess,
+  onSwapError
+}) {
+  const [fromToken, setFromToken] = useState(defaultFromToken);
+  const [toToken, setToToken] = useState(defaultToToken);
+  const [fromAmount, setFromAmount] = useState("");
+  const [isSwapping, setIsSwapping] = useState(false);
+  const { address, isConnected } = useCompassWallet();
+  const { client } = useEmbeddableApi();
+  const { chainId } = useChain();
+  const { quote, isLoading: isQuoteLoading } = useSwapQuote({
+    fromToken,
+    toToken,
+    amount: fromAmount,
+    enabled: !!fromAmount && parseFloat(fromAmount) > 0
+  });
+  const handleReverse = useCallback(() => {
+    setFromToken(toToken);
+    setToToken(fromToken);
+    setFromAmount("");
+  }, [fromToken, toToken]);
+  const handleSwap = useCallback(async () => {
+    if (!address || !fromAmount || !quote) return;
+    setIsSwapping(true);
+    try {
+      const response = await client.earn.earnSwap({
+        chain: chainId,
+        sender: address,
+        tokenIn: fromToken,
+        tokenOut: toToken,
+        humanReadableAmountIn: fromAmount
+      });
+      console.log("Swap prepared:", response);
+      onSwapSuccess?.(fromToken, toToken, fromAmount, quote.outputAmount, "pending");
+      setFromAmount("");
+    } catch (error) {
+      console.error("Swap failed:", error);
+      onSwapError?.(error);
+    } finally {
+      setIsSwapping(false);
+    }
+  }, [address, fromAmount, quote, client, chainId, fromToken, toToken, onSwapSuccess, onSwapError]);
+  const isCompact = layout === "compact";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    !isCompact && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsx(ChainSwitcher, {}),
+      /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)" }, children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              value: fromAmount,
+              onChange: (e) => setFromAmount(e.target.value),
+              placeholder: "0.00",
+              className: "flex-1 bg-transparent outline-none text-2xl font-mono",
+              style: { color: "var(--compass-color-text)" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: fromToken,
+              onChange: (e) => setFromToken(e.target.value),
+              className: "px-3 py-2 rounded-lg border text-sm font-medium cursor-pointer",
+              style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)" },
+              children: allowedTokens.map((token) => /* @__PURE__ */ jsx("option", { value: token, children: token }, token))
+            }
+          )
+        ] })
+      ] }),
+      showReverseButton && /* @__PURE__ */ jsx("div", { className: "flex justify-center -my-1 relative z-10", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleReverse,
+          className: "p-2 rounded-full border transition-colors hover:opacity-80",
+          style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)" },
+          children: /* @__PURE__ */ jsx(ArrowDownUp, { size: 16, style: { color: "var(--compass-color-text-secondary)" } })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)" }, children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "To" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 text-2xl font-mono", style: { color: isQuoteLoading ? "var(--compass-color-text-tertiary)" : "var(--compass-color-text)" }, children: isQuoteLoading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }),
+            "Loading..."
+          ] }) : quote?.outputAmount ? parseFloat(quote.outputAmount).toFixed(6) : "0.00" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: toToken,
+              onChange: (e) => setToToken(e.target.value),
+              className: "px-3 py-2 rounded-lg border text-sm font-medium cursor-pointer",
+              style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)" },
+              children: allowedTokens.filter((t) => t !== fromToken).map((token) => /* @__PURE__ */ jsx("option", { value: token, children: token }, token))
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    showPriceImpact && quote && parseFloat(quote.priceImpact) > 0.01 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg", style: { backgroundColor: "var(--compass-color-warning-muted)" }, children: [
+      /* @__PURE__ */ jsx(AlertCircle, { size: 16, style: { color: "var(--compass-color-warning)" } }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm", style: { color: "var(--compass-color-warning)" }, children: [
+        "Price impact: ",
+        (parseFloat(quote.priceImpact) * 100).toFixed(2),
+        "%"
+      ] })
+    ] }),
+    quote && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: [
+      /* @__PURE__ */ jsx("span", { children: "Rate" }),
+      /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+        "1 ",
+        fromToken,
+        " = ",
+        parseFloat(quote.rate).toFixed(6),
+        " ",
+        toToken
+      ] })
+    ] }),
+    !isConnected ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-col items-center gap-3 py-6 px-4 rounded-lg",
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          border: "1px solid var(--compass-color-border)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(AlertCircle, { size: 24, style: { color: "var(--compass-color-text-tertiary)" } }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-sm text-center",
+              style: { color: "var(--compass-color-text-secondary)" },
+              children: "Connect your wallet to swap"
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleSwap,
+        disabled: isSwapping || !quote || !fromAmount || parseFloat(fromAmount) <= 0,
+        className: "w-full py-3 rounded-lg font-medium transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+        style: { backgroundColor: "var(--compass-color-primary)", color: "var(--compass-color-primary-text)" },
+        children: [
+          isSwapping && /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
+          isSwapping ? "Swapping..." : "Swap"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/CompassEarnWidget/presets.ts
+var allTabs = [
+  { id: "vaults", label: "Vaults", enabled: true },
+  { id: "aave", label: "Aave", enabled: true },
+  { id: "pendle", label: "Pendle", enabled: true },
+  { id: "swap", label: "Swap", enabled: true }
+];
+function getTabsForPreset(preset) {
+  switch (preset) {
+    case "full":
+      return allTabs;
+    case "earn-only":
+      return allTabs.map((tab) => ({
+        ...tab,
+        enabled: tab.id !== "swap"
+      }));
+    case "swap-only":
+      return allTabs.map((tab) => ({
+        ...tab,
+        enabled: tab.id === "swap"
+      }));
+    case "vaults-only":
+      return allTabs.map((tab) => ({
+        ...tab,
+        enabled: tab.id === "vaults"
+      }));
+    default:
+      return allTabs;
+  }
+}
+function getDefaultTab(tabs) {
+  const enabledTab = tabs.find((t) => t.enabled);
+  return enabledTab?.id || "vaults";
+}
+function CompassEarnWidget({
+  preset = "full",
+  enableVaults,
+  enableAave,
+  enablePendle,
+  enableSwap,
+  defaultTab,
+  showHeader = true,
+  onTabChange
+}) {
+  const tabs = useMemo(() => {
+    const baseTabs = getTabsForPreset(preset);
+    return baseTabs.map((tab) => {
+      let enabled = tab.enabled;
+      if (tab.id === "vaults" && enableVaults !== void 0) enabled = enableVaults;
+      if (tab.id === "aave" && enableAave !== void 0) enabled = enableAave;
+      if (tab.id === "pendle" && enablePendle !== void 0) enabled = enablePendle;
+      if (tab.id === "swap" && enableSwap !== void 0) enabled = enableSwap;
+      return { ...tab, enabled };
+    });
+  }, [preset, enableVaults, enableAave, enablePendle, enableSwap]);
+  const enabledTabs = tabs.filter((t) => t.enabled);
+  const initialTab = defaultTab && tabs.find((t) => t.id === defaultTab)?.enabled ? defaultTab : getDefaultTab(tabs);
+  const [activeTab, setActiveTab] = useState(initialTab);
+  const handleTabChange = (tab) => {
+    setActiveTab(tab);
+    onTabChange?.(tab);
+  };
+  const showTabs = enabledTabs.length > 1;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    showHeader && /* @__PURE__ */ jsx("h1", { className: "font-bold text-xl", style: { color: "var(--compass-color-text)" }, children: "Compass Earn" }),
+    showTabs && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex gap-1 p-1 rounded-lg",
+        style: { backgroundColor: "var(--compass-color-surface)" },
+        children: enabledTabs.map((tab) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleTabChange(tab.id),
+            className: "flex-1 py-2 px-3 rounded-md text-sm font-medium transition-all",
+            style: {
+              backgroundColor: activeTab === tab.id ? "var(--compass-color-primary)" : "transparent",
+              color: activeTab === tab.id ? "var(--compass-color-primary-text)" : "var(--compass-color-text-secondary)"
+            },
+            children: tab.label
+          },
+          tab.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { children: [
+      activeTab === "vaults" && tabs.find((t) => t.id === "vaults")?.enabled && /* @__PURE__ */ jsx(VaultsList, { showSearch: true, showSort: true }),
+      activeTab === "aave" && tabs.find((t) => t.id === "aave")?.enabled && /* @__PURE__ */ jsx(AaveMarketsList, { showSearch: true, showSort: true }),
+      activeTab === "pendle" && tabs.find((t) => t.id === "pendle")?.enabled && /* @__PURE__ */ jsx(PendleMarketsList, { showSearch: true, showSort: true }),
+      activeTab === "swap" && tabs.find((t) => t.id === "swap")?.enabled && /* @__PURE__ */ jsx(SwapWidget, { layout: "full" })
+    ] })
+  ] });
+}
+
+export { AaveMarketsList, ActionModal, ApiProvider, CHAINS, ChainSwitcher, CompassEarnWidget, CompassProvider, DepositWithdrawForm, EarnAccountGuard, PendleMarketsList, PnLSummary, SwapWidget, TOKEN_DECIMALS, ThemeProvider, TransactionHistory, VaultsList, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map