@compass-labs/widgets 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +5 -17
  2. package/dist/index.d.ts +5 -17
  3. package/dist/index.js +90 -127
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +90 -127
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -361,7 +361,7 @@ interface CompassProviderProps {
361
361
  declare function CompassProvider({ children, apiKey, defaultChain, theme, wallet, }: CompassProviderProps): react_jsx_runtime.JSX.Element;
362
362
 
363
363
  type ApyPeriod = '7d' | '30d' | '90d';
364
- type SortOption$2 = 'apy_7d' | 'apy_30d' | 'apy_90d' | 'tvl';
364
+ type SortOption$1 = 'apy_7d' | 'apy_30d' | 'apy_90d' | 'tvl';
365
365
  interface VaultData {
366
366
  vaultAddress: string;
367
367
  name: string;
@@ -409,7 +409,7 @@ interface VaultsListProps {
409
409
  /** Enable sorting options */
410
410
  showSort?: boolean;
411
411
  /** Default sort option */
412
- defaultSort?: SortOption$2;
412
+ defaultSort?: SortOption$1;
413
413
  /** Filter by asset symbols */
414
414
  assetFilter?: string[];
415
415
  /** Minimum APY filter */
@@ -442,7 +442,7 @@ interface VaultsListProps {
442
442
  declare function VaultsList({ showApy, apyPeriods, showTvl, showUserPosition, showPnL, showHistory, showSearch, showSort, defaultSort, assetFilter, minApy, minTvl: initialMinTvl, showTvlFilter, onVaultSelect, onDeposit, onWithdraw, }: VaultsListProps): react_jsx_runtime.JSX.Element;
443
443
 
444
444
  interface UseVaultsDataOptions {
445
- sortBy?: SortOption$2;
445
+ sortBy?: SortOption$1;
446
446
  assetFilter?: string[];
447
447
  minApy?: number;
448
448
  minTvl?: number;
@@ -464,14 +464,12 @@ declare function useVaultsData(options?: UseVaultsDataOptions): {
464
464
  refetch: () => void;
465
465
  };
466
466
 
467
- type SortOption$1 = 'supply_apy';
468
467
  interface AaveMarketData {
469
468
  marketAddress: string;
470
469
  reserveSymbol: string;
471
470
  underlyingSymbol: string;
472
471
  supplyApy: string | null;
473
472
  borrowApy: string | null;
474
- tvlUsd: string | null;
475
473
  }
476
474
  interface TransactionEvent$1 {
477
475
  amount: string;
@@ -494,8 +492,6 @@ interface UserAavePosition {
494
492
  interface AaveMarketsListProps {
495
493
  /** Show APY metrics */
496
494
  showApy?: boolean;
497
- /** Show total value locked (not available for Aave) */
498
- showTvl?: boolean;
499
495
  /** Show user's current position */
500
496
  showUserPosition?: boolean;
501
497
  /** Show profit/loss summary */
@@ -504,10 +500,6 @@ interface AaveMarketsListProps {
504
500
  showHistory?: boolean;
505
501
  /** Enable search functionality */
506
502
  showSearch?: boolean;
507
- /** Enable sorting options */
508
- showSort?: boolean;
509
- /** Default sort option */
510
- defaultSort?: SortOption$1;
511
503
  /** Filter by asset symbols */
512
504
  assetFilter?: string[];
513
505
  /** Callback when market is clicked */
@@ -530,12 +522,9 @@ interface AaveMarketsListProps {
530
522
  * />
531
523
  * ```
532
524
  */
533
- declare function AaveMarketsList({ showApy, showTvl, // Aave API doesn't provide TVL data
534
- showUserPosition, showPnL, showHistory, showSearch, showSort, // Only one sort option (APY), so hide by default
535
- defaultSort, assetFilter, onMarketSelect, onSupply, onWithdraw, }: AaveMarketsListProps): react_jsx_runtime.JSX.Element;
525
+ declare function AaveMarketsList({ showApy, showUserPosition, showPnL, showHistory, showSearch, assetFilter, onMarketSelect, onSupply, onWithdraw, }: AaveMarketsListProps): react_jsx_runtime.JSX.Element;
536
526
 
537
527
  interface UseAaveDataOptions {
538
- sortBy?: SortOption$1;
539
528
  assetFilter?: string[];
540
529
  }
541
530
  declare function useAaveData(options?: UseAaveDataOptions): {
@@ -546,7 +535,6 @@ declare function useAaveData(options?: UseAaveDataOptions): {
546
535
  underlyingSymbol: string;
547
536
  supplyApy: string | null;
548
537
  borrowApy: string | null;
549
- tvlUsd: string | null;
550
538
  }[];
551
539
  isLoading: boolean;
552
540
  isError: boolean;
@@ -928,4 +916,4 @@ interface ChainConfig {
928
916
  }
929
917
  declare const CHAINS: Record<SupportedChainId, ChainConfig>;
930
918
 
931
- export { type AaveMarketData, AaveMarketsList, type AaveMarketsListProps, type SortOption$1 as AaveSortOption, AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, type ApyPeriod, CHAINS, type ChainConfig, ChainSwitcher, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, DepositWithdrawForm, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type PendleMarketData, PendleMarketsList, type PendleMarketsListProps, type SortOption as PendleSortOption, PnLSummary, type SupportedChain, type SupportedChainId, type SwapLayout, type SwapQuote, SwapWidget, type SwapWidgetProps, type TabId, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance, TransactionHistory, type TypedDataToSign, type UserAavePosition, type UserPendlePosition, type UserVaultPosition, type VaultData, VaultsList, type VaultsListProps, type SortOption$2 as VaultsSortOption, type WalletAdapter, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };
919
+ export { type AaveMarketData, AaveMarketsList, type AaveMarketsListProps, AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, type ApyPeriod, CHAINS, type ChainConfig, ChainSwitcher, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, DepositWithdrawForm, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type PendleMarketData, PendleMarketsList, type PendleMarketsListProps, type SortOption as PendleSortOption, PnLSummary, type SupportedChain, type SupportedChainId, type SwapLayout, type SwapQuote, SwapWidget, type SwapWidgetProps, type TabId, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance, TransactionHistory, type TypedDataToSign, type UserAavePosition, type UserPendlePosition, type UserVaultPosition, type VaultData, VaultsList, type VaultsListProps, type SortOption$1 as VaultsSortOption, type WalletAdapter, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };
package/dist/index.d.ts CHANGED
@@ -361,7 +361,7 @@ interface CompassProviderProps {
361
361
  declare function CompassProvider({ children, apiKey, defaultChain, theme, wallet, }: CompassProviderProps): react_jsx_runtime.JSX.Element;
362
362
 
363
363
  type ApyPeriod = '7d' | '30d' | '90d';
364
- type SortOption$2 = 'apy_7d' | 'apy_30d' | 'apy_90d' | 'tvl';
364
+ type SortOption$1 = 'apy_7d' | 'apy_30d' | 'apy_90d' | 'tvl';
365
365
  interface VaultData {
366
366
  vaultAddress: string;
367
367
  name: string;
@@ -409,7 +409,7 @@ interface VaultsListProps {
409
409
  /** Enable sorting options */
410
410
  showSort?: boolean;
411
411
  /** Default sort option */
412
- defaultSort?: SortOption$2;
412
+ defaultSort?: SortOption$1;
413
413
  /** Filter by asset symbols */
414
414
  assetFilter?: string[];
415
415
  /** Minimum APY filter */
@@ -442,7 +442,7 @@ interface VaultsListProps {
442
442
  declare function VaultsList({ showApy, apyPeriods, showTvl, showUserPosition, showPnL, showHistory, showSearch, showSort, defaultSort, assetFilter, minApy, minTvl: initialMinTvl, showTvlFilter, onVaultSelect, onDeposit, onWithdraw, }: VaultsListProps): react_jsx_runtime.JSX.Element;
443
443
 
444
444
  interface UseVaultsDataOptions {
445
- sortBy?: SortOption$2;
445
+ sortBy?: SortOption$1;
446
446
  assetFilter?: string[];
447
447
  minApy?: number;
448
448
  minTvl?: number;
@@ -464,14 +464,12 @@ declare function useVaultsData(options?: UseVaultsDataOptions): {
464
464
  refetch: () => void;
465
465
  };
466
466
 
467
- type SortOption$1 = 'supply_apy';
468
467
  interface AaveMarketData {
469
468
  marketAddress: string;
470
469
  reserveSymbol: string;
471
470
  underlyingSymbol: string;
472
471
  supplyApy: string | null;
473
472
  borrowApy: string | null;
474
- tvlUsd: string | null;
475
473
  }
476
474
  interface TransactionEvent$1 {
477
475
  amount: string;
@@ -494,8 +492,6 @@ interface UserAavePosition {
494
492
  interface AaveMarketsListProps {
495
493
  /** Show APY metrics */
496
494
  showApy?: boolean;
497
- /** Show total value locked (not available for Aave) */
498
- showTvl?: boolean;
499
495
  /** Show user's current position */
500
496
  showUserPosition?: boolean;
501
497
  /** Show profit/loss summary */
@@ -504,10 +500,6 @@ interface AaveMarketsListProps {
504
500
  showHistory?: boolean;
505
501
  /** Enable search functionality */
506
502
  showSearch?: boolean;
507
- /** Enable sorting options */
508
- showSort?: boolean;
509
- /** Default sort option */
510
- defaultSort?: SortOption$1;
511
503
  /** Filter by asset symbols */
512
504
  assetFilter?: string[];
513
505
  /** Callback when market is clicked */
@@ -530,12 +522,9 @@ interface AaveMarketsListProps {
530
522
  * />
531
523
  * ```
532
524
  */
533
- declare function AaveMarketsList({ showApy, showTvl, // Aave API doesn't provide TVL data
534
- showUserPosition, showPnL, showHistory, showSearch, showSort, // Only one sort option (APY), so hide by default
535
- defaultSort, assetFilter, onMarketSelect, onSupply, onWithdraw, }: AaveMarketsListProps): react_jsx_runtime.JSX.Element;
525
+ declare function AaveMarketsList({ showApy, showUserPosition, showPnL, showHistory, showSearch, assetFilter, onMarketSelect, onSupply, onWithdraw, }: AaveMarketsListProps): react_jsx_runtime.JSX.Element;
536
526
 
537
527
  interface UseAaveDataOptions {
538
- sortBy?: SortOption$1;
539
528
  assetFilter?: string[];
540
529
  }
541
530
  declare function useAaveData(options?: UseAaveDataOptions): {
@@ -546,7 +535,6 @@ declare function useAaveData(options?: UseAaveDataOptions): {
546
535
  underlyingSymbol: string;
547
536
  supplyApy: string | null;
548
537
  borrowApy: string | null;
549
- tvlUsd: string | null;
550
538
  }[];
551
539
  isLoading: boolean;
552
540
  isError: boolean;
@@ -928,4 +916,4 @@ interface ChainConfig {
928
916
  }
929
917
  declare const CHAINS: Record<SupportedChainId, ChainConfig>;
930
918
 
931
- export { type AaveMarketData, AaveMarketsList, type AaveMarketsListProps, type SortOption$1 as AaveSortOption, AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, type ApyPeriod, CHAINS, type ChainConfig, ChainSwitcher, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, DepositWithdrawForm, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type PendleMarketData, PendleMarketsList, type PendleMarketsListProps, type SortOption as PendleSortOption, PnLSummary, type SupportedChain, type SupportedChainId, type SwapLayout, type SwapQuote, SwapWidget, type SwapWidgetProps, type TabId, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance, TransactionHistory, type TypedDataToSign, type UserAavePosition, type UserPendlePosition, type UserVaultPosition, type VaultData, VaultsList, type VaultsListProps, type SortOption$2 as VaultsSortOption, type WalletAdapter, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };
919
+ export { type AaveMarketData, AaveMarketsList, type AaveMarketsListProps, AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, type ApyPeriod, CHAINS, type ChainConfig, ChainSwitcher, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, DepositWithdrawForm, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type PendleMarketData, PendleMarketsList, type PendleMarketsListProps, type SortOption as PendleSortOption, PnLSummary, type SupportedChain, type SupportedChainId, type SwapLayout, type SwapQuote, SwapWidget, type SwapWidgetProps, type TabId, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance, TransactionHistory, type TypedDataToSign, type UserAavePosition, type UserPendlePosition, type UserVaultPosition, type VaultData, VaultsList, type VaultsListProps, type SortOption$1 as VaultsSortOption, type WalletAdapter, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };
package/dist/index.js CHANGED
@@ -2789,22 +2789,24 @@ function formatAPY(apy) {
2789
2789
  function VaultCard({
2790
2790
  vault,
2791
2791
  showApy,
2792
- apyPeriods,
2792
+ sortBy,
2793
2793
  showTvl,
2794
2794
  showUserPosition,
2795
2795
  onClick
2796
2796
  }) {
2797
- const getApyValue = (period) => {
2798
- switch (period) {
2799
- case "7d":
2800
- return vault.apy7d;
2801
- case "30d":
2802
- return vault.apy30d;
2803
- case "90d":
2804
- return vault.apy90d;
2797
+ const getDisplayApy = () => {
2798
+ switch (sortBy) {
2799
+ case "apy_30d":
2800
+ return { value: vault.apy30d, period: "30d" };
2801
+ case "apy_90d":
2802
+ return { value: vault.apy90d, period: "90d" };
2803
+ case "apy_7d":
2804
+ case "tvl":
2805
+ default:
2806
+ return { value: vault.apy7d, period: "7d" };
2805
2807
  }
2806
2808
  };
2807
- const primaryApy = getApyValue(apyPeriods[0] || "7d");
2809
+ const displayApy = getDisplayApy();
2808
2810
  const hasPosition = vault.userPosition && parseFloat(vault.userPosition.balance) > 0;
2809
2811
  return /* @__PURE__ */ jsxRuntime.jsxs(
2810
2812
  "button",
@@ -2816,8 +2818,8 @@ function VaultCard({
2816
2818
  borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)"
2817
2819
  },
2818
2820
  children: [
2819
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
2820
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
2821
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
2822
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
2821
2823
  /* @__PURE__ */ jsxRuntime.jsx(
2822
2824
  "h3",
2823
2825
  {
@@ -2838,20 +2840,33 @@ function VaultCard({
2838
2840
  }
2839
2841
  )
2840
2842
  ] }),
2841
- showApy && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
2842
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }),
2843
- /* @__PURE__ */ jsxRuntime.jsx(
2843
+ showApy && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
2844
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
2845
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: 16, style: { color: "var(--compass-color-success)" } }),
2846
+ /* @__PURE__ */ jsxRuntime.jsx(
2847
+ "span",
2848
+ {
2849
+ className: "font-mono text-lg font-bold",
2850
+ style: { color: "var(--compass-color-success)" },
2851
+ children: formatAPY(displayApy.value)
2852
+ }
2853
+ )
2854
+ ] }),
2855
+ /* @__PURE__ */ jsxRuntime.jsxs(
2844
2856
  "span",
2845
2857
  {
2846
- className: "font-mono font-semibold",
2847
- style: { color: "var(--compass-color-success)" },
2848
- children: formatAPY(primaryApy)
2858
+ className: "text-xs",
2859
+ style: { color: "var(--compass-color-text-tertiary)" },
2860
+ children: [
2861
+ displayApy.period,
2862
+ " APY"
2863
+ ]
2849
2864
  }
2850
2865
  )
2851
2866
  ] })
2852
2867
  ] }),
2853
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t", style: { borderColor: "var(--compass-color-border)" }, children: [
2854
- showTvl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
2868
+ (showTvl || showUserPosition && hasPosition) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t", style: { borderColor: "var(--compass-color-border)" }, children: [
2869
+ showTvl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
2855
2870
  /* @__PURE__ */ jsxRuntime.jsx(
2856
2871
  "span",
2857
2872
  {
@@ -2869,13 +2884,13 @@ function VaultCard({
2869
2884
  }
2870
2885
  )
2871
2886
  ] }),
2872
- showUserPosition && hasPosition && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
2887
+ showUserPosition && hasPosition && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
2873
2888
  /* @__PURE__ */ jsxRuntime.jsx(
2874
2889
  "span",
2875
2890
  {
2876
2891
  className: "text-xs",
2877
2892
  style: { color: "var(--compass-color-text-tertiary)" },
2878
- children: "Your Position"
2893
+ children: "Position"
2879
2894
  }
2880
2895
  ),
2881
2896
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3185,7 +3200,7 @@ function VaultsList({
3185
3200
  {
3186
3201
  vault,
3187
3202
  showApy,
3188
- apyPeriods,
3203
+ sortBy,
3189
3204
  showTvl,
3190
3205
  showUserPosition,
3191
3206
  onClick: () => handleVaultClick(vault)
@@ -3234,9 +3249,9 @@ function useAaveData(options = {}) {
3234
3249
  const { client } = useEmbeddableApi();
3235
3250
  const { address } = useEmbeddableWallet();
3236
3251
  const { chainId } = useChain();
3237
- const { sortBy = "supply_apy", assetFilter } = options;
3252
+ const { assetFilter } = options;
3238
3253
  const marketsQuery = reactQuery.useQuery({
3239
- queryKey: ["aaveMarkets", chainId, sortBy, assetFilter],
3254
+ queryKey: ["aaveMarkets", chainId, assetFilter],
3240
3255
  queryFn: async () => {
3241
3256
  const response = await client.earn.earnAaveMarkets({
3242
3257
  chain: chainId
@@ -3257,9 +3272,7 @@ function useAaveData(options = {}) {
3257
3272
  reserveSymbol: symbol,
3258
3273
  underlyingSymbol: symbol,
3259
3274
  supplyApy: chainData.supplyApy?.toString() ?? null,
3260
- borrowApy: chainData.borrowApy?.toString() ?? null,
3261
- // Aave API doesn't provide TVL
3262
- tvlUsd: null
3275
+ borrowApy: chainData.borrowApy?.toString() ?? null
3263
3276
  });
3264
3277
  }
3265
3278
  }
@@ -3325,34 +3338,20 @@ function formatAPY2(apy) {
3325
3338
  const num = parseFloat(apy);
3326
3339
  return `${num.toFixed(2)}%`;
3327
3340
  }
3328
- function formatTVL2(tvl) {
3329
- if (!tvl) return "$0";
3330
- const num = parseFloat(tvl);
3331
- if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
3332
- if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M`;
3333
- if (num >= 1e3) return `$${(num / 1e3).toFixed(2)}K`;
3334
- return `$${num.toFixed(2)}`;
3335
- }
3336
3341
  function AaveMarketsList({
3337
3342
  showApy = true,
3338
- showTvl = false,
3339
- // Aave API doesn't provide TVL data
3340
3343
  showUserPosition = true,
3341
3344
  showPnL = true,
3342
3345
  showHistory = true,
3343
3346
  showSearch = true,
3344
- showSort = false,
3345
- // Only one sort option (APY), so hide by default
3346
- defaultSort = "supply_apy",
3347
3347
  assetFilter,
3348
3348
  onMarketSelect,
3349
3349
  onSupply,
3350
3350
  onWithdraw
3351
3351
  }) {
3352
3352
  const [searchQuery, setSearchQuery] = react.useState("");
3353
- const [sortBy, setSortBy] = react.useState(defaultSort);
3354
3353
  const [selectedMarket, setSelectedMarket] = react.useState(null);
3355
- const { markets, isLoading, isError, refetch } = useAaveData({ sortBy, assetFilter });
3354
+ const { markets, isLoading, isError, refetch } = useAaveData({ assetFilter });
3356
3355
  const filteredMarkets = react.useMemo(() => {
3357
3356
  if (!searchQuery) return markets;
3358
3357
  const query = searchQuery.toLowerCase();
@@ -3380,46 +3379,30 @@ function AaveMarketsList({
3380
3379
  /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
3381
3380
  ] })
3382
3381
  ] }),
3383
- (showSearch || showSort) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
3384
- showSearch && /* @__PURE__ */ jsxRuntime.jsxs(
3385
- "div",
3386
- {
3387
- className: "flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border",
3388
- style: {
3389
- backgroundColor: "var(--compass-color-background)",
3390
- borderColor: "var(--compass-color-border)"
3391
- },
3392
- children: [
3393
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
3394
- /* @__PURE__ */ jsxRuntime.jsx(
3395
- "input",
3396
- {
3397
- type: "text",
3398
- placeholder: "Search markets...",
3399
- value: searchQuery,
3400
- onChange: (e) => setSearchQuery(e.target.value),
3401
- className: "flex-1 bg-transparent outline-none text-sm",
3402
- style: { color: "var(--compass-color-text)" }
3403
- }
3404
- )
3405
- ]
3406
- }
3407
- ),
3408
- showSort && /* @__PURE__ */ jsxRuntime.jsx(
3409
- "select",
3410
- {
3411
- value: sortBy,
3412
- onChange: (e) => setSortBy(e.target.value),
3413
- className: "px-3 py-2 rounded-lg border text-sm cursor-pointer",
3414
- style: {
3415
- backgroundColor: "var(--compass-color-background)",
3416
- borderColor: "var(--compass-color-border)",
3417
- color: "var(--compass-color-text)"
3418
- },
3419
- children: /* @__PURE__ */ jsxRuntime.jsx("option", { value: "supply_apy", children: "Supply APY" })
3420
- }
3421
- )
3422
- ] }),
3382
+ showSearch && /* @__PURE__ */ jsxRuntime.jsxs(
3383
+ "div",
3384
+ {
3385
+ className: "flex items-center gap-2 px-3 py-2 rounded-lg border",
3386
+ style: {
3387
+ backgroundColor: "var(--compass-color-background)",
3388
+ borderColor: "var(--compass-color-border)"
3389
+ },
3390
+ children: [
3391
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
3392
+ /* @__PURE__ */ jsxRuntime.jsx(
3393
+ "input",
3394
+ {
3395
+ type: "text",
3396
+ placeholder: "Search markets...",
3397
+ value: searchQuery,
3398
+ onChange: (e) => setSearchQuery(e.target.value),
3399
+ className: "flex-1 bg-transparent outline-none text-sm",
3400
+ style: { color: "var(--compass-color-text)" }
3401
+ }
3402
+ )
3403
+ ]
3404
+ }
3405
+ ),
3423
3406
  isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
3424
3407
  "div",
3425
3408
  {
@@ -3483,48 +3466,28 @@ function AaveMarketsList({
3483
3466
  )
3484
3467
  ] })
3485
3468
  ] }),
3486
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t", style: { borderColor: "var(--compass-color-border)" }, children: [
3487
- showTvl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
3488
- /* @__PURE__ */ jsxRuntime.jsx(
3489
- "span",
3490
- {
3491
- className: "text-xs",
3492
- style: { color: "var(--compass-color-text-tertiary)" },
3493
- children: "TVL"
3494
- }
3495
- ),
3496
- /* @__PURE__ */ jsxRuntime.jsx(
3497
- "span",
3498
- {
3499
- className: "font-mono text-sm",
3500
- style: { color: "var(--compass-color-text-secondary)" },
3501
- children: formatTVL2(market.tvlUsd)
3502
- }
3503
- )
3504
- ] }),
3505
- showUserPosition && hasPosition && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
3506
- /* @__PURE__ */ jsxRuntime.jsx(
3507
- "span",
3508
- {
3509
- className: "text-xs",
3510
- style: { color: "var(--compass-color-text-tertiary)" },
3511
- children: "Your Position"
3512
- }
3513
- ),
3514
- /* @__PURE__ */ jsxRuntime.jsxs(
3515
- "span",
3516
- {
3517
- className: "font-mono text-sm font-medium",
3518
- style: { color: "var(--compass-color-primary)" },
3519
- children: [
3520
- parseFloat(market.userPosition.balance).toFixed(4),
3521
- " ",
3522
- market.underlyingSymbol
3523
- ]
3524
- }
3525
- )
3526
- ] })
3527
- ] })
3469
+ showUserPosition && hasPosition && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end mt-3 pt-3 border-t", style: { borderColor: "var(--compass-color-border)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
3470
+ /* @__PURE__ */ jsxRuntime.jsx(
3471
+ "span",
3472
+ {
3473
+ className: "text-xs",
3474
+ style: { color: "var(--compass-color-text-tertiary)" },
3475
+ children: "Your Position"
3476
+ }
3477
+ ),
3478
+ /* @__PURE__ */ jsxRuntime.jsxs(
3479
+ "span",
3480
+ {
3481
+ className: "font-mono text-sm font-medium",
3482
+ style: { color: "var(--compass-color-primary)" },
3483
+ children: [
3484
+ parseFloat(market.userPosition.balance).toFixed(4),
3485
+ " ",
3486
+ market.underlyingSymbol
3487
+ ]
3488
+ }
3489
+ )
3490
+ ] }) })
3528
3491
  ]
3529
3492
  },
3530
3493
  market.marketAddress
@@ -3675,7 +3638,7 @@ function formatExpiry(expiry) {
3675
3638
  const date = new Date(expiry);
3676
3639
  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
3677
3640
  }
3678
- function formatTVL3(tvl) {
3641
+ function formatTVL2(tvl) {
3679
3642
  if (!tvl) return "$0";
3680
3643
  const num = parseFloat(tvl);
3681
3644
  if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
@@ -3927,7 +3890,7 @@ function PendleMarketsList({
3927
3890
  {
3928
3891
  className: "font-mono text-sm",
3929
3892
  style: { color: "var(--compass-color-text-secondary)" },
3930
- children: formatTVL3(market.tvlUsd)
3893
+ children: formatTVL2(market.tvlUsd)
3931
3894
  }
3932
3895
  )
3933
3896
  ] }),