@compass-labs/widgets 0.1.3 → 0.1.4

package/dist/index.mjs

@@ -2787,22 +2787,24 @@ function formatAPY(apy) {
 function VaultCard({
   vault,
   showApy,
-  apyPeriods,
+  sortBy,
   showTvl,
   showUserPosition,
   onClick
 }) {
-  const getApyValue = (period) => {
-    switch (period) {
-      case "7d":
-        return vault.apy7d;
-      case "30d":
-        return vault.apy30d;
-      case "90d":
-        return vault.apy90d;
+  const getDisplayApy = () => {
+    switch (sortBy) {
+      case "apy_30d":
+        return { value: vault.apy30d, period: "30d" };
+      case "apy_90d":
+        return { value: vault.apy90d, period: "90d" };
+      case "apy_7d":
+      case "tvl":
+      default:
+        return { value: vault.apy7d, period: "7d" };
     }
   };
-  const primaryApy = getApyValue(apyPeriods[0] || "7d");
+  const displayApy = getDisplayApy();
   const hasPosition = vault.userPosition && parseFloat(vault.userPosition.balance) > 0;
   return /* @__PURE__ */ jsxs(
     "button",
@@ -2814,8 +2816,8 @@ function VaultCard({
         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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
             /* @__PURE__ */ jsx(
               "h3",
               {
@@ -2836,20 +2838,33 @@ function VaultCard({
               }
             )
           ] }),
-          showApy && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }),
-            /* @__PURE__ */ jsx(
+          showApy && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(TrendingUp, { size: 16, style: { color: "var(--compass-color-success)" } }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "font-mono text-lg font-bold",
+                  style: { color: "var(--compass-color-success)" },
+                  children: formatAPY(displayApy.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
               "span",
               {
-                className: "font-mono font-semibold",
-                style: { color: "var(--compass-color-success)" },
-                children: formatAPY(primaryApy)
+                className: "text-xs",
+                style: { color: "var(--compass-color-text-tertiary)" },
+                children: [
+                  displayApy.period,
+                  " APY"
+                ]
               }
             )
           ] })
         ] }),
-        /* @__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: [
+        (showTvl || showUserPosition && hasPosition) && /* @__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 items-center gap-1.5", children: [
             /* @__PURE__ */ jsx(
               "span",
               {
@@ -2867,13 +2882,13 @@ function VaultCard({
               }
             )
           ] }),
-          showUserPosition && hasPosition && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+          showUserPosition && hasPosition && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ jsx(
               "span",
               {
                 className: "text-xs",
                 style: { color: "var(--compass-color-text-tertiary)" },
-                children: "Your Position"
+                children: "Position"
               }
             ),
             /* @__PURE__ */ jsxs(
@@ -3183,7 +3198,7 @@ function VaultsList({
       {
         vault,
         showApy,
-        apyPeriods,
+        sortBy,
         showTvl,
         showUserPosition,
         onClick: () => handleVaultClick(vault)
@@ -3232,9 +3247,9 @@ function useAaveData(options = {}) {
   const { client } = useEmbeddableApi();
   const { address } = useEmbeddableWallet();
   const { chainId } = useChain();
-  const { sortBy = "supply_apy", assetFilter } = options;
+  const { assetFilter } = options;
   const marketsQuery = useQuery({
-    queryKey: ["aaveMarkets", chainId, sortBy, assetFilter],
+    queryKey: ["aaveMarkets", chainId, assetFilter],
     queryFn: async () => {
       const response = await client.earn.earnAaveMarkets({
         chain: chainId
@@ -3255,9 +3270,7 @@ function useAaveData(options = {}) {
             reserveSymbol: symbol,
             underlyingSymbol: symbol,
             supplyApy: chainData.supplyApy?.toString() ?? null,
-            borrowApy: chainData.borrowApy?.toString() ?? null,
-            // Aave API doesn't provide TVL
-            tvlUsd: null
+            borrowApy: chainData.borrowApy?.toString() ?? null
           });
         }
       }
@@ -3323,34 +3336,20 @@ function formatAPY2(apy) {
   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
-  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 { markets, isLoading, isError, refetch } = useAaveData({ assetFilter });
   const filteredMarkets = useMemo(() => {
     if (!searchQuery) return markets;
     const query = searchQuery.toLowerCase();
@@ -3378,46 +3377,30 @@ function AaveMarketsList({
         /* @__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" })
-        }
-      )
-    ] }),
+    showSearch && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "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)" }
+            }
+          )
+        ]
+      }
+    ),
     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",
       {
@@ -3481,48 +3464,28 @@ function AaveMarketsList({
                 )
               ] })
             ] }),
-            /* @__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
-                    ]
-                  }
-                )
-              ] })
-            ] })
+            showUserPosition && hasPosition && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end mt-3 pt-3 border-t", style: { borderColor: "var(--compass-color-border)" }, children: /* @__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
@@ -3673,7 +3636,7 @@ function formatExpiry(expiry) {
   const date = new Date(expiry);
   return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
 }
-function formatTVL3(tvl) {
+function formatTVL2(tvl) {
   if (!tvl) return "$0";
   const num = parseFloat(tvl);
   if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
@@ -3925,7 +3888,7 @@ function PendleMarketsList({
                     {
                       className: "font-mono text-sm",
                       style: { color: "var(--compass-color-text-secondary)" },
-                      children: formatTVL3(market.tvlUsd)
+                      children: formatTVL2(market.tvlUsd)
                     }
                   )
                 ] }),