@compass-labs/widgets 0.1.18 → 0.1.20

package/dist/index.mjs

@@ -3801,7 +3801,8 @@ function MarketSelector({
   }, [markets, marketType, minTvl, showTvl]);
   const maxTvl = useMemo(() => {
     const typeMarkets = markets.filter((m) => m.type === marketType);
-    return Math.max(...typeMarkets.map((m) => m.tvl), 1e8);
+    if (typeMarkets.length === 0) return 0;
+    return Math.max(...typeMarkets.map((m) => m.tvl));
   }, [markets, marketType]);
   const hasMarkets = filteredMarkets.length > 0;
   const formatTvl = (value) => {
@@ -3816,7 +3817,7 @@ function MarketSelector({
       style: {
         display: "flex",
         flexDirection: "column",
-        gap: "calc(var(--compass-spacing-unit) * 3)"
+        gap: "calc(var(--compass-spacing-unit) * 1.5)"
       },
       children: [
         /* @__PURE__ */ jsxs("div", { children: [
@@ -3837,7 +3838,7 @@ function MarketSelector({
             {
               style: {
                 display: "flex",
-                borderRadius: "var(--compass-border-radius-lg, 12px)",
+                borderRadius: "var(--compass-border-radius-md, 8px)",
                 border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
                 overflow: "hidden"
               },
@@ -3847,12 +3848,12 @@ function MarketSelector({
                   onClick: () => onMarketTypeChange(type.value),
                   style: {
                     flex: 1,
-                    padding: "calc(var(--compass-spacing-unit, 8px) * 2)",
+                    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)",
                     border: "none",
                     cursor: "pointer",
-                    fontSize: "var(--compass-font-size-sm, 14px)",
+                    fontSize: "12px",
                     fontWeight: 500,
                     fontFamily: "var(--compass-font-family)",
                     transition: "var(--compass-transition-normal, all 0.2s ease)"
@@ -3885,10 +3886,11 @@ function MarketSelector({
                 disabled: !hasMarkets || isLoading,
                 style: {
                   width: "100%",
-                  padding: "calc(var(--compass-spacing-unit, 8px) * 2.5)",
+                  padding: "8px 12px",
                   backgroundColor: "var(--compass-color-surface, #12121a)",
                   border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
-                  borderRadius: "var(--compass-border-radius-lg, 12px)",
+                  borderRadius: "var(--compass-border-radius-md, 8px)",
+                  fontSize: "13px",
                   display: "flex",
                   justifyContent: "space-between",
                   alignItems: "center",
@@ -4668,7 +4670,7 @@ function EarnAccount({
   defaultMarketType = "aave",
   defaultMinTvl = 0
 }) {
-  const { address, signTypedData, switchChain, walletChainId } = useEmbeddableWallet();
+  const { address, isConnected, login, signTypedData, switchChain, walletChainId } = useEmbeddableWallet();
   const { isDeployed } = useEarnAccount();
   const { chainId: CHAIN_ID } = useChain();
   const queryClient = useQueryClient();
@@ -5695,8 +5697,8 @@ function EarnAccount({
       /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: handleAction,
-          disabled: isProcessing || !selectedMarket || !amount || parseFloat(amount) <= 0 || parseFloat(amount) > maxAmount,
+          onClick: !isConnected && login ? login : handleAction,
+          disabled: isConnected && (isProcessing || !selectedMarket || !amount || parseFloat(amount) <= 0 || parseFloat(amount) > maxAmount),
           className: "w-full font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed",
           style: {
             backgroundColor: "var(--compass-color-primary)",
@@ -5706,7 +5708,7 @@ function EarnAccount({
             fontSize: compact ? "0.875rem" : "1rem",
             transition: "var(--compass-transition-normal)"
           },
-          children: isProcessing ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+          children: !isConnected ? "Connect Wallet" : isProcessing ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
             /* @__PURE__ */ jsx(Loader2, { size: compact ? 16 : 20, className: "animate-spin" }),
             "Processing..."
           ] }) : !selectedMarket ? "Select a market" : needsActionSwap ? activeTab === "deposit" ? `Swap & Deposit` : `Withdraw & Swap` : activeTab === "deposit" ? "Deposit funds" : "Withdraw funds"
@@ -6678,152 +6680,154 @@ function SwapWidget({
         /* @__PURE__ */ jsx(WalletStatus, { compact: true })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-      /* @__PURE__ */ jsxs("div", { className: "border relative", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "number",
-              value: fromAmount,
-              onChange: (e) => setFromAmount(e.target.value),
-              placeholder: "0.00",
-              className: "flex-1 bg-transparent outline-none text-2xl font-mono min-w-0",
-              style: { color: "var(--compass-color-text)" }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              value: fromToken,
-              onChange: (e) => setFromToken(e.target.value),
-              className: "border text-sm font-medium cursor-pointer flex-shrink-0",
-              style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
-              children: allowedTokens.filter((t) => t !== toToken).map((token) => /* @__PURE__ */ jsx("option", { value: token, children: token }, token))
-            }
-          )
+    /* @__PURE__ */ jsxs(EarnAccountGuard, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+        /* @__PURE__ */ jsxs("div", { className: "border relative", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: fromAmount,
+                onChange: (e) => setFromAmount(e.target.value),
+                placeholder: "0.00",
+                className: "flex-1 bg-transparent outline-none text-2xl font-mono min-w-0",
+                style: { color: "var(--compass-color-text)" }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: fromToken,
+                onChange: (e) => setFromToken(e.target.value),
+                className: "border text-sm font-medium cursor-pointer flex-shrink-0",
+                style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
+                children: allowedTokens.filter((t) => t !== toToken).map((token) => /* @__PURE__ */ jsx("option", { value: token, children: token }, token))
+              }
+            )
+          ] })
+        ] }),
+        showReverseButton && /* @__PURE__ */ jsx("div", { className: "flex justify-center relative z-10", style: { margin: "calc(var(--compass-spacing-unit) * -0.25) 0" }, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleReverse,
+            className: "border hover:opacity-80",
+            style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-full)", padding: "calc(var(--compass-spacing-unit) * 0.5)", transition: "var(--compass-transition-normal)" },
+            children: /* @__PURE__ */ jsx(ArrowDownUp, { size: 16, style: { color: "var(--compass-color-text-secondary)" } })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "To" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 text-2xl font-mono", style: { color: isQuoteLoading ? "var(--compass-color-text-tertiary)" : "var(--compass-color-text)" }, children: isQuoteLoading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }),
+              "Loading..."
+            ] }) : quote?.outputAmount ? parseFloat(quote.outputAmount).toFixed(8) : "0.00000000" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: toToken,
+                onChange: (e) => setToToken(e.target.value),
+                className: "border text-sm font-medium cursor-pointer",
+                style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
+                children: allowedTokens.filter((t) => t !== fromToken).map((token) => /* @__PURE__ */ jsx("option", { value: token, children: token }, token))
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      quote && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: [
+        /* @__PURE__ */ jsx("span", { children: "Rate" }),
+        /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+          "1 ",
+          fromToken,
+          " = ",
+          parseFloat(quote.rate).toFixed(6),
+          " ",
+          toToken
         ] })
       ] }),
-      showReverseButton && /* @__PURE__ */ jsx("div", { className: "flex justify-center relative z-10", style: { margin: "calc(var(--compass-spacing-unit) * -0.25) 0" }, children: /* @__PURE__ */ jsx(
+      quoteError && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center text-sm",
+          style: {
+            backgroundColor: "var(--compass-color-error-muted)",
+            color: "var(--compass-color-error)",
+            borderRadius: "var(--compass-border-radius-lg)",
+            padding: "calc(var(--compass-spacing-unit) * 0.75)",
+            gap: "calc(var(--compass-spacing-unit) * 0.5)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(AlertCircle, { size: 16 }),
+            /* @__PURE__ */ jsx("span", { children: quoteError.message })
+          ]
+        }
+      ),
+      swapStatus && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center text-sm",
+          style: {
+            backgroundColor: swapStatus.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-surface)",
+            color: swapStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-text-secondary)",
+            borderRadius: "var(--compass-border-radius-lg)",
+            padding: "calc(var(--compass-spacing-unit) * 0.75)",
+            gap: "calc(var(--compass-spacing-unit) * 0.5)"
+          },
+          children: [
+            !swapStatus.includes("successful") && /* @__PURE__ */ jsx(Loader2, { size: 14, className: "animate-spin" }),
+            swapStatus
+          ]
+        }
+      ),
+      !isConnected ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col items-center",
+          style: {
+            backgroundColor: "var(--compass-color-surface)",
+            border: "1px solid var(--compass-color-border)",
+            borderRadius: "var(--compass-border-radius-lg)",
+            fontFamily: "var(--compass-font-family)",
+            padding: "calc(var(--compass-spacing-unit) * 1.5) var(--compass-spacing-card)",
+            gap: "calc(var(--compass-spacing-unit) * 0.75)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(AlertCircle, { size: 24, style: { color: "var(--compass-color-text-tertiary)" } }),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-sm text-center",
+                style: { color: "var(--compass-color-text-secondary)" },
+                children: "Connect your wallet to swap"
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: handleReverse,
-          className: "border hover:opacity-80",
-          style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-full)", padding: "calc(var(--compass-spacing-unit) * 0.5)", transition: "var(--compass-transition-normal)" },
-          children: /* @__PURE__ */ jsx(ArrowDownUp, { size: 16, style: { color: "var(--compass-color-text-secondary)" } })
+          onClick: handleSwap,
+          disabled: isSwapping || !quote || !fromAmount || parseFloat(fromAmount) <= 0,
+          className: "w-full font-medium flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed",
+          style: {
+            backgroundColor: "var(--compass-color-primary)",
+            color: "var(--compass-color-primary-text)",
+            borderRadius: "var(--compass-border-radius-lg)",
+            fontFamily: "var(--compass-font-family)",
+            padding: "calc(var(--compass-spacing-unit) * 0.75)",
+            gap: "calc(var(--compass-spacing-unit) * 0.5)",
+            transition: "var(--compass-transition-normal)"
+          },
+          children: [
+            isSwapping && /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
+            isSwapping ? "Swapping..." : "Swap"
+          ]
         }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "To" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-1 text-2xl font-mono", style: { color: isQuoteLoading ? "var(--compass-color-text-tertiary)" : "var(--compass-color-text)" }, children: isQuoteLoading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }),
-            "Loading..."
-          ] }) : quote?.outputAmount ? parseFloat(quote.outputAmount).toFixed(8) : "0.00000000" }),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              value: toToken,
-              onChange: (e) => setToToken(e.target.value),
-              className: "border text-sm font-medium cursor-pointer",
-              style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
-              children: allowedTokens.filter((t) => t !== fromToken).map((token) => /* @__PURE__ */ jsx("option", { value: token, children: token }, token))
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    quote && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: [
-      /* @__PURE__ */ jsx("span", { children: "Rate" }),
-      /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
-        "1 ",
-        fromToken,
-        " = ",
-        parseFloat(quote.rate).toFixed(6),
-        " ",
-        toToken
-      ] })
-    ] }),
-    quoteError && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex items-center text-sm",
-        style: {
-          backgroundColor: "var(--compass-color-error-muted)",
-          color: "var(--compass-color-error)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          padding: "calc(var(--compass-spacing-unit) * 0.75)",
-          gap: "calc(var(--compass-spacing-unit) * 0.5)"
-        },
-        children: [
-          /* @__PURE__ */ jsx(AlertCircle, { size: 16 }),
-          /* @__PURE__ */ jsx("span", { children: quoteError.message })
-        ]
-      }
-    ),
-    swapStatus && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex items-center text-sm",
-        style: {
-          backgroundColor: swapStatus.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-surface)",
-          color: swapStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-text-secondary)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          padding: "calc(var(--compass-spacing-unit) * 0.75)",
-          gap: "calc(var(--compass-spacing-unit) * 0.5)"
-        },
-        children: [
-          !swapStatus.includes("successful") && /* @__PURE__ */ jsx(Loader2, { size: 14, className: "animate-spin" }),
-          swapStatus
-        ]
-      }
-    ),
-    !isConnected ? /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex flex-col items-center",
-        style: {
-          backgroundColor: "var(--compass-color-surface)",
-          border: "1px solid var(--compass-color-border)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          fontFamily: "var(--compass-font-family)",
-          padding: "calc(var(--compass-spacing-unit) * 1.5) var(--compass-spacing-card)",
-          gap: "calc(var(--compass-spacing-unit) * 0.75)"
-        },
-        children: [
-          /* @__PURE__ */ jsx(AlertCircle, { size: 24, style: { color: "var(--compass-color-text-tertiary)" } }),
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: "text-sm text-center",
-              style: { color: "var(--compass-color-text-secondary)" },
-              children: "Connect your wallet to swap"
-            }
-          )
-        ]
-      }
-    ) : /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: handleSwap,
-        disabled: isSwapping || !quote || !fromAmount || parseFloat(fromAmount) <= 0,
-        className: "w-full font-medium flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed",
-        style: {
-          backgroundColor: "var(--compass-color-primary)",
-          color: "var(--compass-color-primary-text)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          fontFamily: "var(--compass-font-family)",
-          padding: "calc(var(--compass-spacing-unit) * 0.75)",
-          gap: "calc(var(--compass-spacing-unit) * 0.5)",
-          transition: "var(--compass-transition-normal)"
-        },
-        children: [
-          isSwapping && /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
-          isSwapping ? "Swapping..." : "Swap"
-        ]
-      }
-    )
+      )
+    ] })
   ] });
 }
 function getEarliestDepositTimestamp(deposits) {