@compass-labs/widgets 0.1.4 → 0.1.6

package/dist/index.d.mts

@@ -326,8 +326,12 @@ interface WalletAdapter {
 
 interface CompassProviderProps {
     children: ReactNode;
-    /** Compass API key - required for all API calls */
-    apiKey: string;
+    /**
+     * Compass API key - optional when using server-side API routes.
+     * If not provided, all API calls will go through /api/compass/* routes.
+     * @deprecated Use server-side API routes instead for better security.
+     */
+    apiKey?: string;
     /** Default chain to use */
     defaultChain?: SupportedChain;
     /** Theme preset name, preset with overrides, or full theme object */
@@ -716,23 +720,27 @@ declare function useTheme(): ThemeContextValue;
  * Context value for the API context
  */
 interface ApiContextValue {
-    /** The API key used to authenticate with Compass API */
+    /** The API key used to authenticate with Compass API (may be empty when using server-side routes) */
     apiKey: string;
-    /** The Compass API SDK client instance */
+    /** The Compass API SDK client instance (may be a dummy when using server-side routes) */
     client: CompassApiSDK;
 }
 interface ApiProviderProps {
     children: ReactNode;
-    apiKey: string;
+    /** API key - optional when using server-side routes */
+    apiKey?: string;
     /** Optional API base URL override */
     serverURL?: string;
 }
 /**
  * Provider component that manages the Compass API client.
+ * When apiKey is not provided, a minimal client is created but all
+ * data fetching should go through server-side /api/compass/* routes.
  */
 declare function ApiProvider({ children, apiKey, serverURL }: ApiProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the Compass API client and API key.
+ * @deprecated When using server-side routes, prefer using fetch to /api/compass/* instead.
  */
 declare function useCompassApi(): ApiContextValue;
 declare const useEmbeddableApi: typeof useCompassApi;

package/dist/index.d.ts

@@ -326,8 +326,12 @@ interface WalletAdapter {
 
 interface CompassProviderProps {
     children: ReactNode;
-    /** Compass API key - required for all API calls */
-    apiKey: string;
+    /**
+     * Compass API key - optional when using server-side API routes.
+     * If not provided, all API calls will go through /api/compass/* routes.
+     * @deprecated Use server-side API routes instead for better security.
+     */
+    apiKey?: string;
     /** Default chain to use */
     defaultChain?: SupportedChain;
     /** Theme preset name, preset with overrides, or full theme object */
@@ -716,23 +720,27 @@ declare function useTheme(): ThemeContextValue;
  * Context value for the API context
  */
 interface ApiContextValue {
-    /** The API key used to authenticate with Compass API */
+    /** The API key used to authenticate with Compass API (may be empty when using server-side routes) */
     apiKey: string;
-    /** The Compass API SDK client instance */
+    /** The Compass API SDK client instance (may be a dummy when using server-side routes) */
     client: CompassApiSDK;
 }
 interface ApiProviderProps {
     children: ReactNode;
-    apiKey: string;
+    /** API key - optional when using server-side routes */
+    apiKey?: string;
     /** Optional API base URL override */
     serverURL?: string;
 }
 /**
  * Provider component that manages the Compass API client.
+ * When apiKey is not provided, a minimal client is created but all
+ * data fetching should go through server-side /api/compass/* routes.
  */
 declare function ApiProvider({ children, apiKey, serverURL }: ApiProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the Compass API client and API key.
+ * @deprecated When using server-side routes, prefer using fetch to /api/compass/* instead.
  */
 declare function useCompassApi(): ApiContextValue;
 declare const useEmbeddableApi: typeof useCompassApi;

package/dist/index.js

@@ -9,7 +9,7 @@ var lucideReact = require('lucide-react');
 
 // src/provider/CompassProvider.tsx
 var ApiContext = react.createContext(null);
-function ApiProvider({ children, apiKey, serverURL }) {
+function ApiProvider({ children, apiKey = "", serverURL }) {
   const client = react.useMemo(() => {
     return new apiSdk.CompassApiSDK({
       apiKeyAuth: apiKey,
@@ -2912,7 +2912,6 @@ function VaultCard({
   );
 }
 function useVaultsData(options = {}) {
-  const { client } = useEmbeddableApi();
   const { address } = useEmbeddableWallet();
   const { chainId } = useChain();
   const { sortBy = "apy_7d", assetFilter, minApy, minTvl } = options;
@@ -2920,14 +2919,19 @@ function useVaultsData(options = {}) {
     queryKey: ["vaults", chainId, sortBy, assetFilter, minApy, minTvl],
     queryFn: async () => {
       const assetSymbol = assetFilter && assetFilter.length === 1 ? assetFilter[0] : void 0;
-      const response = await client.earn.earnVaults({
+      const params = new URLSearchParams({
         chain: chainId,
         orderBy: sortBy === "tvl" ? "tvl_usd" : sortBy,
         direction: "desc",
-        limit: 100,
+        limit: "100",
         ...assetSymbol && { assetSymbol }
       });
-      let vaults = (response.vaults || []).map((v) => ({
+      const response = await fetch(`/api/compass/vaults?${params}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch vaults");
+      }
+      const data = await response.json();
+      let vaults = (data.vaults || []).map((v) => ({
         vaultAddress: v.vaultAddress,
         name: v.name || "Unknown Vault",
         assetSymbol: v.assetSymbol || "UNKNOWN",
@@ -2961,11 +2965,16 @@ function useVaultsData(options = {}) {
     queryKey: ["vaultPositions", chainId, address],
     queryFn: async () => {
       if (!address) return [];
-      const response = await client.earn.earnPositions({
+      const params = new URLSearchParams({
         chain: chainId,
         owner: address
       });
-      return (response.vaults || []).map((p) => ({
+      const response = await fetch(`/api/compass/positions?${params}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch positions");
+      }
+      const data = await response.json();
+      return (data.vaults || []).map((p) => ({
         vaultAddress: p.vaultAddress,
         balance: p.balance || "0",
         pnl: p.pnl ? {
@@ -3246,17 +3255,19 @@ function VaultsList({
   ] });
 }
 function useAaveData(options = {}) {
-  const { client } = useEmbeddableApi();
   const { address } = useEmbeddableWallet();
   const { chainId } = useChain();
   const { assetFilter } = options;
   const marketsQuery = reactQuery.useQuery({
     queryKey: ["aaveMarkets", chainId, assetFilter],
     queryFn: async () => {
-      const response = await client.earn.earnAaveMarkets({
-        chain: chainId
-      });
-      const marketsDict = response.markets || {};
+      const params = new URLSearchParams({ chain: chainId });
+      const response = await fetch(`/api/compass/aave/markets?${params}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch Aave markets");
+      }
+      const data = await response.json();
+      const marketsDict = data.markets || {};
       let markets = [];
       for (const [symbol, tokenData] of Object.entries(marketsDict)) {
         if (assetFilter && assetFilter.length > 0) {
@@ -3287,11 +3298,16 @@ function useAaveData(options = {}) {
     queryKey: ["aavePositions", chainId, address],
     queryFn: async () => {
       if (!address) return [];
-      const response = await client.earn.earnPositions({
+      const params = new URLSearchParams({
         chain: chainId,
         owner: address
       });
-      return (response.aave || []).map((p) => ({
+      const response = await fetch(`/api/compass/positions?${params}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch positions");
+      }
+      const data = await response.json();
+      return (data.aave || []).map((p) => ({
         marketAddress: p.marketAddress || "",
         reserveSymbol: p.reserveSymbol || "",
         balance: p.balance || "0",
@@ -3532,7 +3548,6 @@ function AaveMarketsList({
   ] });
 }
 function usePendleData(options = {}) {
-  const { client } = useEmbeddableApi();
   const { address } = useEmbeddableWallet();
   const { chainId } = useChain();
   const { sortBy = "fixed_apy", assetFilter, minTvl } = options;
@@ -3541,15 +3556,20 @@ function usePendleData(options = {}) {
     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({
+      const params = new URLSearchParams({
         chain: chainId,
         orderBy,
         direction: "desc",
-        limit: 100,
+        limit: "100",
         ...underlyingSymbol && { underlyingSymbol }
       });
+      const response = await fetch(`/api/compass/pendle/markets?${params}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch Pendle markets");
+      }
+      const data = await response.json();
       const now = Date.now() / 1e3;
-      let markets = (response.markets || []).filter((m) => m.expiry && m.expiry > now).map((m) => ({
+      let markets = (data.markets || []).filter((m) => m.expiry && m.expiry > now).map((m) => ({
         marketAddress: m.marketAddress || "",
         ptAddress: m.ptAddress || "",
         name: m.ptName || `PT-${m.underlyingSymbol || "UNKNOWN"}`,
@@ -3585,11 +3605,16 @@ function usePendleData(options = {}) {
     queryKey: ["pendlePositions", chainId, address],
     queryFn: async () => {
       if (!address) return [];
-      const response = await client.earn.earnPositions({
+      const params = new URLSearchParams({
         chain: chainId,
         owner: address
       });
-      return (response.pendlePt || []).map((p) => ({
+      const response = await fetch(`/api/compass/positions?${params}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch positions");
+      }
+      const data = await response.json();
+      return (data.pendlePt || []).map((p) => ({
         marketAddress: p.marketAddress || "",
         balance: p.balance || "0",
         pnl: p.pnl ? {