@compass-labs/widgets 0.1.20 → 0.1.21

package/dist/index.d.mts

@@ -566,6 +566,8 @@ declare function useAaveData(options?: UseAaveDataOptions): {
 };
 
 type MarketType = 'aave' | 'pendle' | 'vaults';
+/** UI tab type for the market selector */
+type UIMarketTab = 'variable' | 'fixed';
 interface MarketOption {
     id: string;
     name: string;
@@ -605,16 +607,32 @@ interface EarnAccountProps {
     onDeposit?: (market: MarketOption, amount: number, txHash: string) => void;
     /** Callback after successful withdraw */
     onWithdraw?: (market: MarketOption, amount: number, txHash: string) => void;
-    /** Default market type to show @default 'aave' */
-    defaultMarketType?: MarketType;
-    /** Default minimum TVL filter @default 0 */
-    defaultMinTvl?: number;
+    /** Default market tab to show @default 'variable' */
+    defaultMarketTab?: UIMarketTab;
+    /**
+     * List of market IDs to show in Variable tab.
+     * If undefined, all variable markets are shown.
+     * Pass an empty array to hide all variable markets.
+     */
+    allowedVariableMarkets?: string[];
+    /**
+     * List of market IDs to show in Fixed tab.
+     * If undefined, all fixed markets are shown.
+     * Pass an empty array to hide all fixed markets.
+     */
+    allowedFixedMarkets?: string[];
+    /**
+     * Lock the widget to a specific chain.
+     * When provided, the chain selector is hidden and the widget uses this chain.
+     * Valid values: 'ethereum', 'base', 'arbitrum'
+     */
+    chain?: string;
 }
 
 /**
  * EarnAccount widget - A beautiful banking-style USDC savings account.
  */
-declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketType, defaultMinTvl, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
+declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketTab, allowedVariableMarkets, allowedFixedMarkets, chain: chainProp, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
 
 type SortOption = 'fixed_apy' | 'tvl' | 'expiry';
 interface PendleMarketData {

package/dist/index.d.ts

@@ -566,6 +566,8 @@ declare function useAaveData(options?: UseAaveDataOptions): {
 };
 
 type MarketType = 'aave' | 'pendle' | 'vaults';
+/** UI tab type for the market selector */
+type UIMarketTab = 'variable' | 'fixed';
 interface MarketOption {
     id: string;
     name: string;
@@ -605,16 +607,32 @@ interface EarnAccountProps {
     onDeposit?: (market: MarketOption, amount: number, txHash: string) => void;
     /** Callback after successful withdraw */
     onWithdraw?: (market: MarketOption, amount: number, txHash: string) => void;
-    /** Default market type to show @default 'aave' */
-    defaultMarketType?: MarketType;
-    /** Default minimum TVL filter @default 0 */
-    defaultMinTvl?: number;
+    /** Default market tab to show @default 'variable' */
+    defaultMarketTab?: UIMarketTab;
+    /**
+     * List of market IDs to show in Variable tab.
+     * If undefined, all variable markets are shown.
+     * Pass an empty array to hide all variable markets.
+     */
+    allowedVariableMarkets?: string[];
+    /**
+     * List of market IDs to show in Fixed tab.
+     * If undefined, all fixed markets are shown.
+     * Pass an empty array to hide all fixed markets.
+     */
+    allowedFixedMarkets?: string[];
+    /**
+     * Lock the widget to a specific chain.
+     * When provided, the chain selector is hidden and the widget uses this chain.
+     * Valid values: 'ethereum', 'base', 'arbitrum'
+     */
+    chain?: string;
 }
 
 /**
  * EarnAccount widget - A beautiful banking-style USDC savings account.
  */
-declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketType, defaultMinTvl, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
+declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketTab, allowedVariableMarkets, allowedFixedMarkets, chain: chainProp, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
 
 type SortOption = 'fixed_apy' | 'tvl' | 'expiry';
 interface PendleMarketData {

package/dist/index.js

@@ -3781,31 +3781,45 @@ function AaveMarketsList({
     )
   ] });
 }
-var MARKET_TYPES = [
-  { value: "aave", label: "SAFE" },
-  { value: "vaults", label: "MODERATE" },
-  { value: "pendle", label: "FIXED" }
+var MARKET_TABS = [
+  { value: "variable", label: "VARIABLE" },
+  { value: "fixed", label: "FIXED" }
 ];
+var TAB_TO_MARKET_TYPES = {
+  variable: ["aave", "vaults"],
+  fixed: ["pendle"]
+};
 function MarketSelector({
   markets,
   selectedMarket,
   onMarketSelect,
-  marketType,
-  onMarketTypeChange,
-  minTvl,
-  onMinTvlChange,
-  isLoading
+  marketTab,
+  onMarketTabChange,
+  isLoading,
+  allowedMarketIds
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = react.useState(false);
-  const showTvl = marketType !== "aave";
+  const dropdownRef = react.useRef(null);
+  react.useEffect(() => {
+    function handleClickOutside(e) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsDropdownOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const allowedTypes = TAB_TO_MARKET_TYPES[marketTab];
+  const showTvl = marketTab === "variable";
   const filteredMarkets = react.useMemo(() => {
-    return markets.filter((m) => m.type === marketType && (showTvl ? m.tvl >= minTvl : true));
-  }, [markets, marketType, minTvl, showTvl]);
-  const maxTvl = react.useMemo(() => {
-    const typeMarkets = markets.filter((m) => m.type === marketType);
-    if (typeMarkets.length === 0) return 0;
-    return Math.max(...typeMarkets.map((m) => m.tvl));
-  }, [markets, marketType]);
+    return markets.filter((m) => {
+      if (!allowedTypes.includes(m.type)) return false;
+      if (allowedMarketIds !== void 0) {
+        return allowedMarketIds.includes(m.id);
+      }
+      return true;
+    }).sort((a, b) => b.apy - a.apy);
+  }, [markets, allowedTypes, allowedMarketIds]);
   const hasMarkets = filteredMarkets.length > 0;
   const formatTvl = (value) => {
     if (value >= 1e9) return `$${(value / 1e9).toFixed(1)}B`;
@@ -3844,15 +3858,15 @@ function MarketSelector({
                 border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
                 overflow: "hidden"
               },
-              children: MARKET_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+              children: MARKET_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
-                  onClick: () => onMarketTypeChange(type.value),
+                  onClick: () => onMarketTabChange(tab.value),
                   style: {
                     flex: 1,
                     padding: "6px 8px",
-                    backgroundColor: marketType === type.value ? "var(--compass-color-primary, #6366f1)" : "var(--compass-color-surface, #12121a)",
-                    color: marketType === type.value ? "var(--compass-color-primary-text, white)" : "var(--compass-color-text, #e4e4e7)",
+                    backgroundColor: marketTab === tab.value ? "var(--compass-color-primary, #6366f1)" : "var(--compass-color-surface, #12121a)",
+                    color: marketTab === tab.value ? "var(--compass-color-primary-text, white)" : "var(--compass-color-text, #e4e4e7)",
                     border: "none",
                     cursor: "pointer",
                     fontSize: "12px",
@@ -3860,9 +3874,9 @@ function MarketSelector({
                     fontFamily: "var(--compass-font-family)",
                     transition: "var(--compass-transition-normal, all 0.2s ease)"
                   },
-                  children: type.label
+                  children: tab.label
                 },
-                type.value
+                tab.value
               ))
             }
           )
@@ -3880,7 +3894,7 @@ function MarketSelector({
               children: "Select Market"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, style: { position: "relative" }, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
@@ -3907,7 +3921,7 @@ function MarketSelector({
                       style: {
                         color: selectedMarket ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)"
                       },
-                      children: isLoading ? "Loading markets..." : !hasMarkets ? `No markets above ${formatTvl(minTvl)}` : selectedMarket ? selectedMarket.name : "Select a market"
+                      children: isLoading ? "Loading markets..." : !hasMarkets ? "No markets available" : selectedMarket ? selectedMarket.name : "Select a market"
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--compass-spacing-unit)" }, children: [
@@ -4000,7 +4014,7 @@ function MarketSelector({
                           ]
                         }
                       ),
-                      (showTvl || market.expiry) && /* @__PURE__ */ jsxRuntime.jsxs(
+                      (showTvl && market.tvl > 0 || market.expiry) && /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",
                         {
                           style: {
@@ -4009,8 +4023,8 @@ function MarketSelector({
                             marginTop: "calc(var(--compass-spacing-unit) * 0.5)"
                           },
                           children: [
-                            showTvl && `TVL: ${formatTvl(market.tvl)}`,
-                            showTvl && market.expiry && " \xB7 ",
+                            showTvl && market.tvl > 0 && `TVL: ${formatTvl(market.tvl)}`,
+                            showTvl && market.tvl > 0 && market.expiry && " \xB7 ",
                             market.expiry && `Expires: ${market.expiry}`
                           ]
                         }
@@ -4022,56 +4036,6 @@ function MarketSelector({
               }
             )
           ] })
-        ] }),
-        showTvl && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginBottom: "var(--compass-spacing-unit)"
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "label",
-                  {
-                    style: {
-                      fontSize: "var(--compass-font-size-sm)",
-                      color: "var(--compass-color-text-secondary)"
-                    },
-                    children: "Min TVL"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "var(--compass-font-size-sm)",
-                      color: "var(--compass-color-text)"
-                    },
-                    children: formatTvl(minTvl)
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "range",
-              min: 0,
-              max: maxTvl,
-              step: 1e5,
-              value: minTvl,
-              onChange: (e) => onMinTvlChange(Number(e.target.value)),
-              style: {
-                width: "100%",
-                accentColor: "var(--compass-color-primary)"
-              }
-            }
-          )
         ] })
       ]
     }
@@ -4669,12 +4633,15 @@ function EarnAccount({
   title = "Savings Account",
   onDeposit,
   onWithdraw,
-  defaultMarketType = "aave",
-  defaultMinTvl = 0
+  defaultMarketTab = "variable",
+  allowedVariableMarkets,
+  allowedFixedMarkets,
+  chain: chainProp
 }) {
   const { address, isConnected, login, signTypedData, switchChain, walletChainId } = useEmbeddableWallet();
   const { isDeployed } = useEarnAccount();
-  const { chainId: CHAIN_ID } = useChain();
+  const { chainId: contextChainId } = useChain();
+  const CHAIN_ID = chainProp || contextChainId;
   const queryClient = reactQuery.useQueryClient();
   const [activeTab, setActiveTab] = react.useState("deposit");
   const [selectedToken, setSelectedToken] = react.useState("USDC");
@@ -4690,9 +4657,8 @@ function EarnAccount({
   const [fundError, setFundError] = react.useState(null);
   const [fundStatus, setFundStatus] = react.useState("");
   const [isBalancesModalOpen, setIsBalancesModalOpen] = react.useState(false);
-  const [marketType, setMarketType] = react.useState(defaultMarketType);
+  const [marketTab, setMarketTab] = react.useState(defaultMarketTab);
   const [selectedMarket, setSelectedMarket] = react.useState(null);
-  const [minTvl, setMinTvl] = react.useState(defaultMinTvl);
   const [isEarningsModalOpen, setIsEarningsModalOpen] = react.useState(false);
   react.useEffect(() => {
     setSelectedMarket(null);
@@ -4758,7 +4724,7 @@ function EarnAccount({
   });
   const allPositionData = positionQuery.data || [];
   const totalDepositedBalance = allPositionData.reduce((sum, p) => sum + parseFloat(p.balanceUsd || "0"), 0);
-  const earnAccountTotal = parseFloat(earnAccountTotalUsd);
+  const earnAccountTotal = parseFloat(earnAccountTotalUsd) + totalDepositedBalance;
   const aaveMarketsQuery = reactQuery.useQuery({
     queryKey: ["allAaveMarkets", CHAIN_ID],
     queryFn: async () => {
@@ -5375,7 +5341,7 @@ function EarnAccount({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ChainSwitcher, {}),
+    !chainProp && /* @__PURE__ */ jsxRuntime.jsx(ChainSwitcher, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(EarnAccountGuard, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -5387,14 +5353,14 @@ function EarnAccount({
             padding: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.25)"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: () => setIsBalancesModalOpen(true),
-                className: "flex flex-col text-left w-full transition-opacity hover:opacity-80",
-                style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => setIsBalancesModalOpen(true),
+                  className: "flex items-center text-left transition-opacity hover:opacity-80",
+                  style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" },
+                  children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
@@ -5404,22 +5370,51 @@ function EarnAccount({
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 12, style: { color: "var(--compass-color-text-tertiary)" } })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      className: "font-bold",
-                      style: {
-                        color: "var(--compass-color-text)",
-                        fontSize: compact ? "2rem" : "2.5rem",
-                        lineHeight: "1"
-                      },
-                      children: formatCurrency(earnAccountTotal)
-                    }
-                  )
-                ]
-              }
-            ),
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => setIsBalancesModalOpen(true),
+                    className: "transition-opacity hover:opacity-80",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "font-bold",
+                        style: {
+                          color: "var(--compass-color-text)",
+                          fontSize: compact ? "2rem" : "2.5rem",
+                          lineHeight: "1"
+                        },
+                        children: formatCurrency(earnAccountTotal)
+                      }
+                    )
+                  }
+                ),
+                showTopUpButton && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => setIsFundModalOpen(true),
+                    className: "flex items-center font-medium transition-all hover:opacity-80",
+                    style: {
+                      backgroundColor: "var(--compass-color-surface-elevated, var(--compass-color-surface))",
+                      border: "1px solid var(--compass-color-border)",
+                      color: "var(--compass-color-text-secondary)",
+                      borderRadius: "var(--compass-border-radius-md)",
+                      padding: "6px 10px",
+                      gap: "4px",
+                      fontSize: "12px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 14 }),
+                      "Top Up"
+                    ]
+                  }
+                )
+              ] })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -5482,14 +5477,13 @@ function EarnAccount({
           markets: allMarkets,
           selectedMarket,
           onMarketSelect: setSelectedMarket,
-          marketType,
-          onMarketTypeChange: (type) => {
-            setMarketType(type);
+          marketTab,
+          onMarketTabChange: (tab) => {
+            setMarketTab(tab);
             setSelectedMarket(null);
           },
-          minTvl,
-          onMinTvlChange: setMinTvl,
-          isLoading: isMarketsLoading
+          isLoading: isMarketsLoading,
+          allowedMarketIds: marketTab === "variable" ? allowedVariableMarkets : allowedFixedMarkets
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5749,26 +5743,6 @@ function EarnAccount({
             ] })
           ]
         }
-      ),
-      showTopUpButton && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: () => setIsFundModalOpen(true),
-          className: "w-full font-medium flex items-center justify-center transition-all",
-          style: {
-            backgroundColor: "var(--compass-color-surface)",
-            border: "1px solid var(--compass-color-border)",
-            color: "var(--compass-color-text)",
-            borderRadius: "var(--compass-border-radius-lg)",
-            padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)",
-            gap: "calc(var(--compass-spacing-unit) * 0.5)",
-            transition: "var(--compass-transition-normal)"
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 16 : 18 }),
-            "Top Up"
-          ]
-        }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(