@compass-labs/widgets 0.1.41 → 0.1.42

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { useQueryClient, useQuery, QueryClient, QueryClientProvider } from '@tan
 import { CompassApiSDK } from '@compass-labs/api-sdk';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { arbitrum, base, mainnet } from 'viem/chains';
-import { Wallet, Loader2, ArrowDownLeft, ArrowUpRight, Send, ArrowRight, X, CheckCircle, AlertCircle, CreditCard, ExternalLink, XCircle, Check, Copy, LogOut, ChevronDown, ArrowDownUp, ArrowLeftRight, TrendingUp, Plus, Minus, Circle, AlertTriangle, TrendingDown, ChevronRight, ArrowUpCircle, ArrowDownCircle, RotateCcw, Equal, ChevronUp, Inbox, Percent, Clock, Calendar } from 'lucide-react';
+import { Wallet, Loader2, ArrowDownLeft, ArrowUpRight, Send, ArrowRight, X, CheckCircle, AlertCircle, CreditCard, ExternalLink, XCircle, Check, Copy, LogOut, ChevronDown, ArrowDownUp, ArrowLeftRight, TrendingUp, Plus, Minus, Circle, ChevronRight, AlertTriangle, TrendingDown, ArrowUpCircle, ArrowDownCircle, RotateCcw, Equal, ChevronUp, Inbox, Percent, Clock, Calendar } from 'lucide-react';
 import { isAddress, encodeFunctionData, parseUnits } from 'viem';
 
 // src/provider/CompassProvider.tsx
@@ -172,8 +172,10 @@ function EarnAccountProvider({ children }) {
         throw new Error(error.error || "Failed to create earn account");
       }
       const result = await response.json();
-      await queryClient.invalidateQueries({
-        queryKey: ["earnAccount", address, chainId]
+      queryClient.setQueryData(["earnAccount", address, chainId], {
+        earnAccountAddress: result.earnAccountAddress,
+        isDeployed: true,
+        needsCreation: false
       });
       return result.earnAccountAddress;
     } catch (error) {
@@ -255,8 +257,10 @@ function CreditAccountProvider({ children }) {
         throw new Error(error.error || "Failed to create credit account");
       }
       const result = await response.json();
-      await queryClient.invalidateQueries({
-        queryKey: ["creditAccount", address, chainId]
+      queryClient.setQueryData(["creditAccount", address, chainId], {
+        creditAccountAddress: result.creditAccountAddress,
+        isDeployed: true,
+        needsCreation: false
       });
       return result.creditAccountAddress;
     } catch (error) {
@@ -1201,7 +1205,7 @@ function WalletStatus({
           },
           children: [
             /* @__PURE__ */ jsx(Wallet, { size: compact ? 14 : 16 }),
-            !compact && /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Connect Wallet" })
+            !compact && /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Sign in" })
           ]
         }
       );
@@ -5284,9 +5288,6 @@ function EarnAccount({
       );
       return Math.min(weightedSum / earnAccountTotal, 100);
     }
-    if (allMarkets.length > 0) {
-      return Math.min(Math.max(...allMarkets.map((m) => m.apy || 0)), 100);
-    }
     return 0;
   })();
   const needsActionSwap = selectedMarket ? selectedToken !== selectedMarket.underlyingToken : false;
@@ -5740,7 +5741,7 @@ function EarnAccount({
           },
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center", style: { width: "100%", marginBottom: "12px", gap: "8px" }, children: [
-              showInterestRate && bestApy > 0 && /* @__PURE__ */ jsxs(
+              showInterestRate && /* @__PURE__ */ jsxs(
                 "div",
                 {
                   className: "flex items-center",
@@ -5865,11 +5866,11 @@ function EarnAccount({
                 ] }) : "No active positions" })
               }
             ),
-            (balanceTokens.length > 0 || showTopUpButton) && /* @__PURE__ */ jsxs("div", { className: "flex", style: { gap: "8px", marginTop: "12px" }, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex", style: { gap: "8px", marginTop: "12px" }, children: [
               showTopUpButton && /* @__PURE__ */ jsxs(
                 "button",
                 {
-                  onClick: () => setIsFundModalOpen(true),
+                  onClick: () => isConnected ? setIsFundModalOpen(true) : login?.(),
                   "aria-label": "Add money",
                   className: "flex items-center justify-center",
                   style: {
@@ -5887,10 +5888,10 @@ function EarnAccount({
                   ]
                 }
               ),
-              balanceTokens.length > 0 && /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsxs(
                 "button",
                 {
-                  onClick: () => setIsSwapModalOpen(true),
+                  onClick: () => isConnected ? setIsSwapModalOpen(true) : login?.(),
                   "aria-label": "Swap tokens",
                   className: "flex items-center justify-center",
                   style: {
@@ -6166,7 +6167,7 @@ function EarnAccount({
                 },
                 children: !isConnected ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center", style: { gap: "8px" }, children: [
                   /* @__PURE__ */ jsx(Wallet, { size: 18 }),
-                  "Connect Wallet"
+                  "Sign in"
                 ] }) : isProcessing ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center", style: { gap: "4px", flexDirection: "column" }, children: [
                   /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center", style: { gap: "8px" }, children: [
                     /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }),
@@ -9299,29 +9300,11 @@ function CreditAccount({
                 ] }) : /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.875rem" }, children: "No active positions" })
               }
             ),
-            !isConnected ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => login?.(),
-                className: "flex items-center justify-center font-bold w-full",
-                style: {
-                  backgroundColor: "var(--compass-color-primary)",
-                  color: "var(--compass-color-primary-text, white)",
-                  borderRadius: "var(--compass-border-radius-lg)",
-                  padding: "12px",
-                  minHeight: "44px",
-                  fontSize: "1rem",
-                  marginTop: "8px",
-                  border: "none",
-                  transition: "all 200ms ease"
-                },
-                children: "Connect Wallet"
-              }
-            ) : isDeployed && (balancesWithUsd.length > 0 || showTopUpButton) ? /* @__PURE__ */ jsxs("div", { className: "flex", style: { gap: "8px", marginTop: "8px" }, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex", style: { gap: "8px", marginTop: "8px" }, children: [
               showTopUpButton && /* @__PURE__ */ jsxs(
                 "button",
                 {
-                  onClick: () => setShowTopUp(true),
+                  onClick: () => isConnected ? setShowTopUp(true) : login?.(),
                   className: "flex items-center justify-center",
                   style: {
                     height: "36px",
@@ -9338,10 +9321,10 @@ function CreditAccount({
                   ]
                 }
               ),
-              balancesWithUsd.length > 0 && /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsxs(
                 "button",
                 {
-                  onClick: () => setShowSwap(true),
+                  onClick: () => isConnected ? setShowSwap(true) : login?.(),
                   className: "flex items-center justify-center",
                   style: {
                     height: "36px",
@@ -9358,7 +9341,7 @@ function CreditAccount({
                   ]
                 }
               )
-            ] }) : null
+            ] })
           ]
         }
       ),
@@ -9375,7 +9358,7 @@ function CreditAccount({
             flex: 1
           },
           children: [
-            isDeployed && /* @__PURE__ */ jsx(
+            isDeployed ? /* @__PURE__ */ jsx(
               PositionsView,
               {
                 allowedCollateralTokens,
@@ -9397,8 +9380,100 @@ function CreditAccount({
                   setShowWithdraw(true);
                 }
               }
-            ),
-            /* @__PURE__ */ jsx(WidgetFooter, {})
+            ) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => login?.(),
+                  className: "w-full p-3 flex items-center justify-between transition-opacity hover:opacity-80",
+                  style: {
+                    backgroundColor: "var(--compass-color-surface)",
+                    border: "1.5px solid var(--compass-color-border)",
+                    borderRadius: "var(--compass-border-radius-xl)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "text-xs font-medium uppercase tracking-wide",
+                          style: { color: "var(--compass-color-text-tertiary)" },
+                          children: "Collateral"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "text-lg font-semibold tabular-nums",
+                          style: { color: "var(--compass-color-text)" },
+                          children: "$0.00"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5", style: { color: "var(--compass-color-text-tertiary)" } })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => login?.(),
+                  className: "w-full p-3 flex items-center justify-between transition-opacity hover:opacity-80",
+                  style: {
+                    backgroundColor: "var(--compass-color-surface)",
+                    border: "1.5px solid var(--compass-color-border)",
+                    borderRadius: "var(--compass-border-radius-xl)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "text-xs font-medium uppercase tracking-wide",
+                          style: { color: "var(--compass-color-text-tertiary)" },
+                          children: "Debt"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "text-lg font-semibold tabular-nums",
+                          style: { color: "var(--compass-color-text)" },
+                          children: "$0.00"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5", style: { color: "var(--compass-color-text-tertiary)" } })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { marginTop: "auto", display: "flex", flexDirection: "column", gap: "8px" }, children: [
+              !isConnected && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => login?.(),
+                  className: "w-full font-bold",
+                  style: {
+                    backgroundColor: "var(--compass-color-primary)",
+                    color: "var(--compass-color-primary-text, white)",
+                    borderRadius: "var(--compass-border-radius-lg)",
+                    padding: "12px",
+                    minHeight: "44px",
+                    fontSize: "1rem",
+                    transition: "all 200ms ease",
+                    border: "none"
+                  },
+                  children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center", style: { gap: "8px" }, children: [
+                    /* @__PURE__ */ jsx(Wallet, { size: 18 }),
+                    "Sign in"
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(WidgetFooter, {})
+            ] })
           ]
         }
       )
@@ -11699,7 +11774,7 @@ function RebalancingWidget({
                 fontSize: "0.875rem",
                 border: "none"
               },
-              children: "Connect Wallet"
+              children: "Sign in"
             }
           )
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -12042,7 +12117,7 @@ function RebalancingWidget({
                         border: "none",
                         opacity: isConnected && (depositTxState.status !== "idle" && depositTxState.status !== "confirmed" && depositTxState.status !== "failed" || !selectedMarket || !depositAmount || parseFloat(depositAmount) <= 0 || parseFloat(depositAmount) > earnBalancesQuery) ? 0.4 : 1
                       },
-                      children: !isConnected ? "Connect Wallet" : depositTxState.status !== "idle" && depositTxState.status !== "confirmed" && depositTxState.status !== "failed" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center", style: { gap: "8px" }, children: [
+                      children: !isConnected ? "Sign in" : depositTxState.status !== "idle" && depositTxState.status !== "confirmed" && depositTxState.status !== "failed" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center", style: { gap: "8px" }, children: [
                         /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }),
                         "Processing..."
                       ] }) : !selectedMarket ? "Select a market" : needsSwap ? "Swap & Deposit" : "Deposit"