@compass-labs/widgets 0.1.20 → 0.1.21

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider, useQueryClient, useQuery } from '@tan
 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, ArrowRight, Loader2, ArrowDownLeft, ArrowUpRight, ExternalLink, Coins, Search, SlidersHorizontal, TrendingUp, ChevronRight, Plus, Minus, Shield, CheckCircle, Calendar, ArrowDownUp, ChevronUp, Inbox, Percent, Clock, TrendingDown } from 'lucide-react';
+import { Wallet, LogOut, X, ChevronDown, AlertCircle, ArrowRight, Loader2, ArrowDownLeft, ArrowUpRight, ExternalLink, Coins, Search, SlidersHorizontal, TrendingUp, Plus, ChevronRight, Minus, Shield, CheckCircle, Calendar, ArrowDownUp, ChevronUp, Inbox, Percent, Clock, TrendingDown } from 'lucide-react';
 
 // src/provider/CompassProvider.tsx
 var ApiContext = createContext(null);
@@ -3779,31 +3779,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] = useState(false);
-  const showTvl = marketType !== "aave";
+  const dropdownRef = useRef(null);
+  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 = useMemo(() => {
-    return markets.filter((m) => m.type === marketType && (showTvl ? m.tvl >= minTvl : true));
-  }, [markets, marketType, minTvl, showTvl]);
-  const maxTvl = 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`;
@@ -3842,15 +3856,15 @@ function MarketSelector({
                 border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
                 overflow: "hidden"
               },
-              children: MARKET_TYPES.map((type) => /* @__PURE__ */ jsx(
+              children: MARKET_TABS.map((tab) => /* @__PURE__ */ 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",
@@ -3858,9 +3872,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
               ))
             }
           )
@@ -3878,7 +3892,7 @@ function MarketSelector({
               children: "Select Market"
             }
           ),
-          /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxs("div", { ref: dropdownRef, style: { position: "relative" }, children: [
             /* @__PURE__ */ jsxs(
               "button",
               {
@@ -3905,7 +3919,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__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--compass-spacing-unit)" }, children: [
@@ -3998,7 +4012,7 @@ function MarketSelector({
                           ]
                         }
                       ),
-                      (showTvl || market.expiry) && /* @__PURE__ */ jsxs(
+                      (showTvl && market.tvl > 0 || market.expiry) && /* @__PURE__ */ jsxs(
                         "div",
                         {
                           style: {
@@ -4007,8 +4021,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}`
                           ]
                         }
@@ -4020,56 +4034,6 @@ function MarketSelector({
               }
             )
           ] })
-        ] }),
-        showTvl && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginBottom: "var(--compass-spacing-unit)"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "label",
-                  {
-                    style: {
-                      fontSize: "var(--compass-font-size-sm)",
-                      color: "var(--compass-color-text-secondary)"
-                    },
-                    children: "Min TVL"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "var(--compass-font-size-sm)",
-                      color: "var(--compass-color-text)"
-                    },
-                    children: formatTvl(minTvl)
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ 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)"
-              }
-            }
-          )
         ] })
       ]
     }
@@ -4667,12 +4631,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 = useQueryClient();
   const [activeTab, setActiveTab] = useState("deposit");
   const [selectedToken, setSelectedToken] = useState("USDC");
@@ -4688,9 +4655,8 @@ function EarnAccount({
   const [fundError, setFundError] = useState(null);
   const [fundStatus, setFundStatus] = useState("");
   const [isBalancesModalOpen, setIsBalancesModalOpen] = useState(false);
-  const [marketType, setMarketType] = useState(defaultMarketType);
+  const [marketTab, setMarketTab] = useState(defaultMarketTab);
   const [selectedMarket, setSelectedMarket] = useState(null);
-  const [minTvl, setMinTvl] = useState(defaultMinTvl);
   const [isEarningsModalOpen, setIsEarningsModalOpen] = useState(false);
   useEffect(() => {
     setSelectedMarket(null);
@@ -4756,7 +4722,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 = useQuery({
     queryKey: ["allAaveMarkets", CHAIN_ID],
     queryFn: async () => {
@@ -5373,7 +5339,7 @@ function EarnAccount({
       ) }),
       /* @__PURE__ */ jsx(WalletStatus, { compact: true })
     ] }),
-    /* @__PURE__ */ jsx(ChainSwitcher, {}),
+    !chainProp && /* @__PURE__ */ jsx(ChainSwitcher, {}),
     /* @__PURE__ */ jsxs(EarnAccountGuard, { children: [
       /* @__PURE__ */ jsxs(
         "div",
@@ -5385,14 +5351,14 @@ function EarnAccount({
             padding: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.25)"
           },
           children: [
-            /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+              /* @__PURE__ */ 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__ */ jsx(
                       "span",
                       {
@@ -5402,22 +5368,51 @@ function EarnAccount({
                       }
                     ),
                     /* @__PURE__ */ jsx(ChevronDown, { size: 12, style: { color: "var(--compass-color-text-tertiary)" } })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "font-bold",
-                      style: {
-                        color: "var(--compass-color-text)",
-                        fontSize: compact ? "2rem" : "2.5rem",
-                        lineHeight: "1"
-                      },
-                      children: formatCurrency(earnAccountTotal)
-                    }
-                  )
-                ]
-              }
-            ),
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setIsBalancesModalOpen(true),
+                    className: "transition-opacity hover:opacity-80",
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "font-bold",
+                        style: {
+                          color: "var(--compass-color-text)",
+                          fontSize: compact ? "2rem" : "2.5rem",
+                          lineHeight: "1"
+                        },
+                        children: formatCurrency(earnAccountTotal)
+                      }
+                    )
+                  }
+                ),
+                showTopUpButton && /* @__PURE__ */ 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__ */ jsx(Plus, { size: 14 }),
+                      "Top Up"
+                    ]
+                  }
+                )
+              ] })
+            ] }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -5480,14 +5475,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__ */ jsxs(
@@ -5747,26 +5741,6 @@ function EarnAccount({
             ] })
           ]
         }
-      ),
-      showTopUpButton && /* @__PURE__ */ 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__ */ jsx(Wallet, { size: compact ? 16 : 18 }),
-            "Top Up"
-          ]
-        }
       )
     ] }),
     /* @__PURE__ */ jsx(