@rickydata/react 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  DepositPanel: () => DepositPanel,
   RickyDataProvider: () => RickyDataProvider,
   SecretForm: () => SecretForm,
   SecretOrchestrator: () => SecretOrchestrator,
@@ -181,8 +182,9 @@ function useWalletBalance(opts) {
     staleTime: opts?.staleTime ?? 6e4,
     enabled: opts?.enabled !== false
   });
-  const balance = query.data?.availableBalance ?? "0";
-  const num = parseFloat(balance);
+  const rawBalance = query.data?.availableBalance ?? "0";
+  const num = parseFloat(rawBalance) / 1e6;
+  const balance = String(num);
   const balanceDisplay = isNaN(num) ? "$0.00" : num >= 0.01 ? `$${num.toFixed(2)}` : num > 0 ? `$${num.toFixed(4)}` : "$0.00";
   return {
     ...query,
@@ -190,6 +192,7 @@ function useWalletBalance(opts) {
     balanceDisplay,
     depositAddress: query.data?.unifiedDepositAddress,
     agentSpends: query.data?.agentSpends,
+    depositInstructions: query.data?.depositInstructions,
     refresh: () => query.refetch()
   };
 }
@@ -358,6 +361,7 @@ function useAgentChat({
   const [apiKeyConfigured, setApiKeyConfigured] = (0, import_react3.useState)(null);
   const modelRef = (0, import_react3.useRef)(model);
   modelRef.current = model;
+  const messageQueueRef = (0, import_react3.useRef)([]);
   (0, import_react3.useEffect)(() => {
     let cancelled = false;
     client.getApiKeyStatus().then(({ configured }) => {
@@ -390,7 +394,11 @@ function useAgentChat({
     };
   }, [client, agentId, resumeSessionId]);
   const sendMessage = (0, import_react3.useCallback)(async (text) => {
-    if (!text.trim() || sending) return;
+    if (!text.trim()) return;
+    if (sending) {
+      messageQueueRef.current.push(text.trim());
+      return;
+    }
     if (apiKeyConfigured === false) {
       setMessages((prev) => [...prev, {
         id: `msg-${Date.now()}-error`,
@@ -546,8 +554,12 @@ Error: ${event.data.message}`;
       setSending(false);
       setStreamingPhase("idle");
       setActiveTools([]);
+      const nextMessage = messageQueueRef.current.shift();
+      if (nextMessage) {
+        setTimeout(() => sendMessage(nextMessage), 0);
+      }
     }
-  }, [client, agentId, sending, sessionId, apiKeyConfigured]);
+  }, [client, agentId, sessionId, apiKeyConfigured]);
   const refreshApiKeyStatus = (0, import_react3.useCallback)(() => {
     client.getApiKeyStatus().then(({ configured }) => setApiKeyConfigured(configured)).catch(() => {
     });
@@ -952,8 +964,374 @@ function WalletChip({ address, balanceDisplay, displayName, onPress, className }
     }
   );
 }
+
+// src/components/DepositPanel.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var tokens = {
+  bg: "rgba(255,255,255,0.08)",
+  bgHover: "rgba(255,255,255,0.12)",
+  text: "#d1d5db",
+  textMuted: "#9ca3af",
+  primary: "#6366f1",
+  primaryLight: "#a5b4fc",
+  success: "#10b981",
+  error: "#f87171",
+  warning: "#fcd34d",
+  border: "rgba(255,255,255,0.1)"
+};
+var ICON_COPY = "\u2398";
+var ICON_CHECK = "\u2713";
+var ICON_WARNING = "\u26A0";
+var ICON_EXTERNAL = "\u2197";
+var ICON_CLOSE = "\u2715";
+var panelStyle = {
+  backgroundColor: tokens.bg,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: "12px",
+  padding: "16px",
+  color: tokens.text,
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  fontSize: "14px",
+  lineHeight: "1.5",
+  maxWidth: "420px",
+  width: "100%"
+};
+var headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "12px"
+};
+var titleStyle = {
+  fontSize: "16px",
+  fontWeight: 600,
+  color: "#f3f4f6",
+  margin: 0
+};
+var badgeStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "4px",
+  padding: "2px 8px",
+  borderRadius: "9999px",
+  backgroundColor: "rgba(99,102,241,0.2)",
+  color: tokens.primaryLight,
+  fontSize: "11px",
+  fontWeight: 500
+};
+var closeButtonStyle = {
+  background: "none",
+  border: "none",
+  color: tokens.textMuted,
+  cursor: "pointer",
+  fontSize: "16px",
+  padding: "4px",
+  lineHeight: 1
+};
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "8px 10px",
+  backgroundColor: "rgba(255,255,255,0.04)",
+  borderRadius: "8px",
+  marginBottom: "8px",
+  fontSize: "13px"
+};
+var warningBoxStyle = {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "8px",
+  padding: "10px 12px",
+  backgroundColor: "rgba(252,211,77,0.08)",
+  border: `1px solid rgba(252,211,77,0.2)`,
+  borderRadius: "8px",
+  marginBottom: "8px",
+  fontSize: "12px",
+  color: tokens.warning,
+  lineHeight: "1.4"
+};
+var addressBoxStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "10px 12px",
+  backgroundColor: "rgba(255,255,255,0.04)",
+  border: `1px solid ${tokens.border}`,
+  borderRadius: "8px",
+  marginBottom: "8px"
+};
+var addressTextStyle = {
+  flex: 1,
+  fontFamily: "monospace",
+  fontSize: "12px",
+  color: tokens.text,
+  wordBreak: "break-all"
+};
+var iconButtonStyle = {
+  background: "none",
+  border: "none",
+  color: tokens.textMuted,
+  cursor: "pointer",
+  fontSize: "14px",
+  padding: "4px",
+  lineHeight: 1,
+  transition: "color 0.15s"
+};
+var actionButtonsRow = {
+  display: "flex",
+  gap: "6px",
+  marginBottom: "8px",
+  flexWrap: "wrap"
+};
+var buttonBase = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "4px",
+  padding: "6px 12px",
+  borderRadius: "8px",
+  border: `1px solid ${tokens.border}`,
+  backgroundColor: tokens.bg,
+  color: tokens.text,
+  fontSize: "12px",
+  fontWeight: 500,
+  cursor: "pointer",
+  transition: "background-color 0.15s",
+  whiteSpace: "nowrap"
+};
+var primaryButton = {
+  ...buttonBase,
+  backgroundColor: tokens.primary,
+  borderColor: tokens.primary,
+  color: "#fff"
+};
+var inputStyle2 = {
+  flex: 1,
+  padding: "8px 10px",
+  borderRadius: "8px",
+  border: `1px solid ${tokens.border}`,
+  backgroundColor: "rgba(255,255,255,0.04)",
+  color: tokens.text,
+  fontSize: "14px",
+  fontFamily: "monospace",
+  outline: "none"
+};
+var inputRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  marginBottom: "8px"
+};
+var statusDotStyle = (isOnBase) => ({
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  backgroundColor: isOnBase ? tokens.success : tokens.warning,
+  flexShrink: 0
+});
+var feedbackStyle = (isError) => ({
+  fontSize: "12px",
+  color: isError ? tokens.error : tokens.success,
+  marginBottom: "8px",
+  padding: "6px 10px",
+  borderRadius: "6px",
+  backgroundColor: isError ? "rgba(248,113,113,0.08)" : "rgba(16,185,129,0.08)"
+});
+var balanceFooterStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  paddingTop: "8px",
+  borderTop: `1px solid ${tokens.border}`,
+  fontSize: "13px"
+};
+var linkStyle = {
+  color: tokens.primaryLight,
+  textDecoration: "none",
+  fontSize: "12px"
+};
+function truncateAddress2(addr) {
+  if (addr.length <= 14) return addr;
+  return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+}
+function baseScanUrl(address, type = "address") {
+  return `https://basescan.org/${type}/${address}`;
+}
+function DepositPanel({
+  depositAddress,
+  balanceDisplay,
+  depositInstructions,
+  isWalletOnBase,
+  depositStatus = "idle",
+  depositError,
+  depositResult,
+  onSwitchToBase,
+  onAddUsdcAsset,
+  onDeposit,
+  onAddressCopied,
+  onRefreshBalance,
+  onClose,
+  className,
+  recoveryPolicyUrl
+}) {
+  const [depositAmount, setDepositAmount] = (0, import_react6.useState)("");
+  const [copied, setCopied] = (0, import_react6.useState)(false);
+  const network = depositInstructions?.network ?? depositInstructions?.chainName ?? "Base";
+  const chainId = depositInstructions?.chainId ?? 8453;
+  const tokenSymbol = depositInstructions?.token ?? "USDC";
+  const contractAddr = depositInstructions?.tokenAddress;
+  const warningText = depositInstructions?.warning ?? `Send only ${tokenSymbol} on ${network}. Sending other tokens or using other networks may result in permanent loss.`;
+  const isLoading = depositStatus === "switching" || depositStatus === "signing" || depositStatus === "pending";
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(depositAddress);
+      setCopied(true);
+      onAddressCopied?.();
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  const handleDeposit = () => {
+    if (depositAmount && onDeposit) {
+      onDeposit(depositAmount);
+    }
+  };
+  const statusLabel = {
+    idle: "",
+    switching: "Switching network...",
+    signing: "Confirm in wallet...",
+    pending: "Transaction pending...",
+    confirmed: "Deposit confirmed!",
+    error: "Transaction failed"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: panelStyle, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: headerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: titleStyle, children: "Deposit Instructions" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: badgeStyle, children: [
+          network,
+          " (",
+          chainId,
+          ")"
+        ] })
+      ] }),
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", style: closeButtonStyle, onClick: onClose, "aria-label": "Close", children: ICON_CLOSE })
+    ] }),
+    contractAddr && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: rowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: tokens.textMuted }, children: "Token" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { style: { color: "#f3f4f6" }, children: tokenSymbol }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "a",
+          {
+            href: baseScanUrl(contractAddr, "token"),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: linkStyle,
+            title: "View on BaseScan",
+            children: [
+              truncateAddress2(contractAddr),
+              " ",
+              ICON_EXTERNAL
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: warningBoxStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "16px", flexShrink: 0 }, children: ICON_WARNING }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: warningText }),
+        recoveryPolicyUrl && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "a",
+          {
+            href: recoveryPolicyUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: { ...linkStyle, marginTop: "4px", display: "inline-block" },
+            children: [
+              "Recovery policy ",
+              ICON_EXTERNAL
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: addressBoxStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: addressTextStyle, children: depositAddress }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", style: iconButtonStyle, onClick: handleCopy, title: "Copy address", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: tokens.success }, children: ICON_CHECK }) : ICON_COPY }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "a",
+        {
+          href: baseScanUrl(depositAddress),
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: iconButtonStyle,
+          title: "View on BaseScan",
+          children: ICON_EXTERNAL
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: actionButtonsRow, children: [
+      onSwitchToBase && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", style: buttonBase, onClick: onSwitchToBase, disabled: isLoading, children: "Switch to Base" }),
+      onAddUsdcAsset && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", style: buttonBase, onClick: onAddUsdcAsset, disabled: isLoading, children: [
+        "Add ",
+        tokenSymbol,
+        " (Base)"
+      ] }),
+      onDeposit && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          style: primaryButton,
+          onClick: handleDeposit,
+          disabled: isLoading || !depositAmount,
+          children: isLoading ? statusLabel[depositStatus] : "Deposit From Wallet"
+        }
+      )
+    ] }),
+    onDeposit && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: inputRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        {
+          type: "text",
+          inputMode: "decimal",
+          placeholder: `Amount in ${tokenSymbol}`,
+          value: depositAmount,
+          onChange: (e) => setDepositAmount(e.target.value),
+          style: inputStyle2,
+          disabled: isLoading
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: tokens.textMuted },
+          title: isWalletOnBase ? "Connected to Base" : "Not on Base network",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: statusDotStyle(!!isWalletOnBase) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: isWalletOnBase ? "Base" : "Wrong network" })
+          ]
+        }
+      )
+    ] }),
+    depositStatus !== "idle" && statusLabel[depositStatus] && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: feedbackStyle(depositStatus === "error"), children: statusLabel[depositStatus] }),
+    depositError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: feedbackStyle(true), children: depositError }),
+    depositResult && !depositError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: feedbackStyle(false), children: depositResult }),
+    balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: balanceFooterStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+        "Balance: ",
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { style: { color: "#f3f4f6" }, children: balanceDisplay })
+      ] }),
+      onRefreshBalance && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", style: { ...iconButtonStyle, fontSize: "12px" }, onClick: onRefreshBalance, children: "Refresh" })
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DepositPanel,
   RickyDataProvider,
   SecretForm,
   SecretOrchestrator,

package/dist/index.d.cts

@@ -93,6 +93,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: WalletBalanceResponse;
     error: Error;
@@ -127,6 +137,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: WalletBalanceResponse;
     error: null;
@@ -161,6 +181,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: undefined;
     error: Error;
@@ -195,6 +225,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: undefined;
     error: null;
@@ -229,6 +269,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: undefined;
     error: null;
@@ -263,6 +313,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: WalletBalanceResponse;
     isError: false;
@@ -606,4 +666,36 @@ interface WalletChipProps {
  */
 declare function WalletChip({ address, balanceDisplay, displayName, onPress, className }: WalletChipProps): react_jsx_runtime.JSX.Element;
 
-export { type ChatMessage, RickyDataProvider, type RickyDataProviderProps, SecretForm, type SecretFormProps, SecretOrchestrator, type SecretOrchestratorProps, type SecretSection, type ToolExecution, type UseAgentChatOptions, type UseAgentChatResult, WalletChip, type WalletChipProps, agentKeys, apiKeyKeys, balanceKeys, sessionKeys, useAgent, useAgentChat, useAgents, useApiKeyStatus, useDeleteApiKey, useDeleteOpenAIApiKey, useDeleteSession, useOpenAIApiKeyStatus, useRickyData, useSecrets, useSession, useSessions, useSetApiKey, useSetOpenAIApiKey, useWalletBalance, useWalletSettings, useWalletTransactions, walletSettingsKeys };
+type DepositStatus = 'idle' | 'switching' | 'signing' | 'pending' | 'confirmed' | 'error';
+interface DepositPanelProps {
+    depositAddress: string;
+    balanceDisplay?: string;
+    depositInstructions?: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        warning?: string;
+    };
+    isWalletOnBase?: boolean;
+    depositStatus?: DepositStatus;
+    depositError?: string | null;
+    depositResult?: string | null;
+    onSwitchToBase?: () => void;
+    onAddUsdcAsset?: () => void;
+    onDeposit?: (amountUsdc: string) => void;
+    onAddressCopied?: () => void;
+    onRefreshBalance?: () => void;
+    onClose?: () => void;
+    className?: string;
+    recoveryPolicyUrl?: string;
+}
+/**
+ * Deposit instructions panel with copy-to-clipboard, network switching,
+ * and in-wallet USDC deposit. Inline CSSProperties, no external deps.
+ */
+declare function DepositPanel({ depositAddress, balanceDisplay, depositInstructions, isWalletOnBase, depositStatus, depositError, depositResult, onSwitchToBase, onAddUsdcAsset, onDeposit, onAddressCopied, onRefreshBalance, onClose, className, recoveryPolicyUrl, }: DepositPanelProps): react_jsx_runtime.JSX.Element;
+
+export { type ChatMessage, DepositPanel, type DepositPanelProps, type DepositStatus, RickyDataProvider, type RickyDataProviderProps, SecretForm, type SecretFormProps, SecretOrchestrator, type SecretOrchestratorProps, type SecretSection, type ToolExecution, type UseAgentChatOptions, type UseAgentChatResult, WalletChip, type WalletChipProps, agentKeys, apiKeyKeys, balanceKeys, sessionKeys, useAgent, useAgentChat, useAgents, useApiKeyStatus, useDeleteApiKey, useDeleteOpenAIApiKey, useDeleteSession, useOpenAIApiKeyStatus, useRickyData, useSecrets, useSession, useSessions, useSetApiKey, useSetOpenAIApiKey, useWalletBalance, useWalletSettings, useWalletTransactions, walletSettingsKeys };

package/dist/index.d.ts

@@ -93,6 +93,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: WalletBalanceResponse;
     error: Error;
@@ -127,6 +137,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: WalletBalanceResponse;
     error: null;
@@ -161,6 +181,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: undefined;
     error: Error;
@@ -195,6 +225,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: undefined;
     error: null;
@@ -229,6 +269,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: undefined;
     error: null;
@@ -263,6 +313,16 @@ declare function useWalletBalance(opts?: UseWalletBalanceOptions): {
     agentSpends: Record<string, {
         totalSpent: string;
     }> | undefined;
+    depositInstructions: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        minimumDeposit?: string;
+        warning?: string;
+    } | undefined;
     refresh: () => Promise<_tanstack_query_core.QueryObserverResult<WalletBalanceResponse, Error>>;
     data: WalletBalanceResponse;
     isError: false;
@@ -606,4 +666,36 @@ interface WalletChipProps {
  */
 declare function WalletChip({ address, balanceDisplay, displayName, onPress, className }: WalletChipProps): react_jsx_runtime.JSX.Element;
 
-export { type ChatMessage, RickyDataProvider, type RickyDataProviderProps, SecretForm, type SecretFormProps, SecretOrchestrator, type SecretOrchestratorProps, type SecretSection, type ToolExecution, type UseAgentChatOptions, type UseAgentChatResult, WalletChip, type WalletChipProps, agentKeys, apiKeyKeys, balanceKeys, sessionKeys, useAgent, useAgentChat, useAgents, useApiKeyStatus, useDeleteApiKey, useDeleteOpenAIApiKey, useDeleteSession, useOpenAIApiKeyStatus, useRickyData, useSecrets, useSession, useSessions, useSetApiKey, useSetOpenAIApiKey, useWalletBalance, useWalletSettings, useWalletTransactions, walletSettingsKeys };
+type DepositStatus = 'idle' | 'switching' | 'signing' | 'pending' | 'confirmed' | 'error';
+interface DepositPanelProps {
+    depositAddress: string;
+    balanceDisplay?: string;
+    depositInstructions?: {
+        network?: string;
+        chainId?: number;
+        chainName?: string;
+        token?: string;
+        tokenAddress?: string;
+        decimals?: number;
+        warning?: string;
+    };
+    isWalletOnBase?: boolean;
+    depositStatus?: DepositStatus;
+    depositError?: string | null;
+    depositResult?: string | null;
+    onSwitchToBase?: () => void;
+    onAddUsdcAsset?: () => void;
+    onDeposit?: (amountUsdc: string) => void;
+    onAddressCopied?: () => void;
+    onRefreshBalance?: () => void;
+    onClose?: () => void;
+    className?: string;
+    recoveryPolicyUrl?: string;
+}
+/**
+ * Deposit instructions panel with copy-to-clipboard, network switching,
+ * and in-wallet USDC deposit. Inline CSSProperties, no external deps.
+ */
+declare function DepositPanel({ depositAddress, balanceDisplay, depositInstructions, isWalletOnBase, depositStatus, depositError, depositResult, onSwitchToBase, onAddUsdcAsset, onDeposit, onAddressCopied, onRefreshBalance, onClose, className, recoveryPolicyUrl, }: DepositPanelProps): react_jsx_runtime.JSX.Element;
+
+export { type ChatMessage, DepositPanel, type DepositPanelProps, type DepositStatus, RickyDataProvider, type RickyDataProviderProps, SecretForm, type SecretFormProps, SecretOrchestrator, type SecretOrchestratorProps, type SecretSection, type ToolExecution, type UseAgentChatOptions, type UseAgentChatResult, WalletChip, type WalletChipProps, agentKeys, apiKeyKeys, balanceKeys, sessionKeys, useAgent, useAgentChat, useAgents, useApiKeyStatus, useDeleteApiKey, useDeleteOpenAIApiKey, useDeleteSession, useOpenAIApiKeyStatus, useRickyData, useSecrets, useSession, useSessions, useSetApiKey, useSetOpenAIApiKey, useWalletBalance, useWalletSettings, useWalletTransactions, walletSettingsKeys };

package/dist/index.js

@@ -130,8 +130,9 @@ function useWalletBalance(opts) {
     staleTime: opts?.staleTime ?? 6e4,
     enabled: opts?.enabled !== false
   });
-  const balance = query.data?.availableBalance ?? "0";
-  const num = parseFloat(balance);
+  const rawBalance = query.data?.availableBalance ?? "0";
+  const num = parseFloat(rawBalance) / 1e6;
+  const balance = String(num);
   const balanceDisplay = isNaN(num) ? "$0.00" : num >= 0.01 ? `$${num.toFixed(2)}` : num > 0 ? `$${num.toFixed(4)}` : "$0.00";
   return {
     ...query,
@@ -139,6 +140,7 @@ function useWalletBalance(opts) {
     balanceDisplay,
     depositAddress: query.data?.unifiedDepositAddress,
     agentSpends: query.data?.agentSpends,
+    depositInstructions: query.data?.depositInstructions,
     refresh: () => query.refetch()
   };
 }
@@ -307,6 +309,7 @@ function useAgentChat({
   const [apiKeyConfigured, setApiKeyConfigured] = useState2(null);
   const modelRef = useRef(model);
   modelRef.current = model;
+  const messageQueueRef = useRef([]);
   useEffect2(() => {
     let cancelled = false;
     client.getApiKeyStatus().then(({ configured }) => {
@@ -339,7 +342,11 @@ function useAgentChat({
     };
   }, [client, agentId, resumeSessionId]);
   const sendMessage = useCallback2(async (text) => {
-    if (!text.trim() || sending) return;
+    if (!text.trim()) return;
+    if (sending) {
+      messageQueueRef.current.push(text.trim());
+      return;
+    }
     if (apiKeyConfigured === false) {
       setMessages((prev) => [...prev, {
         id: `msg-${Date.now()}-error`,
@@ -495,8 +502,12 @@ Error: ${event.data.message}`;
       setSending(false);
       setStreamingPhase("idle");
       setActiveTools([]);
+      const nextMessage = messageQueueRef.current.shift();
+      if (nextMessage) {
+        setTimeout(() => sendMessage(nextMessage), 0);
+      }
     }
-  }, [client, agentId, sending, sessionId, apiKeyConfigured]);
+  }, [client, agentId, sessionId, apiKeyConfigured]);
   const refreshApiKeyStatus = useCallback2(() => {
     client.getApiKeyStatus().then(({ configured }) => setApiKeyConfigured(configured)).catch(() => {
     });
@@ -901,7 +912,373 @@ function WalletChip({ address, balanceDisplay, displayName, onPress, className }
     }
   );
 }
+
+// src/components/DepositPanel.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var tokens = {
+  bg: "rgba(255,255,255,0.08)",
+  bgHover: "rgba(255,255,255,0.12)",
+  text: "#d1d5db",
+  textMuted: "#9ca3af",
+  primary: "#6366f1",
+  primaryLight: "#a5b4fc",
+  success: "#10b981",
+  error: "#f87171",
+  warning: "#fcd34d",
+  border: "rgba(255,255,255,0.1)"
+};
+var ICON_COPY = "\u2398";
+var ICON_CHECK = "\u2713";
+var ICON_WARNING = "\u26A0";
+var ICON_EXTERNAL = "\u2197";
+var ICON_CLOSE = "\u2715";
+var panelStyle = {
+  backgroundColor: tokens.bg,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: "12px",
+  padding: "16px",
+  color: tokens.text,
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  fontSize: "14px",
+  lineHeight: "1.5",
+  maxWidth: "420px",
+  width: "100%"
+};
+var headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "12px"
+};
+var titleStyle = {
+  fontSize: "16px",
+  fontWeight: 600,
+  color: "#f3f4f6",
+  margin: 0
+};
+var badgeStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "4px",
+  padding: "2px 8px",
+  borderRadius: "9999px",
+  backgroundColor: "rgba(99,102,241,0.2)",
+  color: tokens.primaryLight,
+  fontSize: "11px",
+  fontWeight: 500
+};
+var closeButtonStyle = {
+  background: "none",
+  border: "none",
+  color: tokens.textMuted,
+  cursor: "pointer",
+  fontSize: "16px",
+  padding: "4px",
+  lineHeight: 1
+};
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "8px 10px",
+  backgroundColor: "rgba(255,255,255,0.04)",
+  borderRadius: "8px",
+  marginBottom: "8px",
+  fontSize: "13px"
+};
+var warningBoxStyle = {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "8px",
+  padding: "10px 12px",
+  backgroundColor: "rgba(252,211,77,0.08)",
+  border: `1px solid rgba(252,211,77,0.2)`,
+  borderRadius: "8px",
+  marginBottom: "8px",
+  fontSize: "12px",
+  color: tokens.warning,
+  lineHeight: "1.4"
+};
+var addressBoxStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "10px 12px",
+  backgroundColor: "rgba(255,255,255,0.04)",
+  border: `1px solid ${tokens.border}`,
+  borderRadius: "8px",
+  marginBottom: "8px"
+};
+var addressTextStyle = {
+  flex: 1,
+  fontFamily: "monospace",
+  fontSize: "12px",
+  color: tokens.text,
+  wordBreak: "break-all"
+};
+var iconButtonStyle = {
+  background: "none",
+  border: "none",
+  color: tokens.textMuted,
+  cursor: "pointer",
+  fontSize: "14px",
+  padding: "4px",
+  lineHeight: 1,
+  transition: "color 0.15s"
+};
+var actionButtonsRow = {
+  display: "flex",
+  gap: "6px",
+  marginBottom: "8px",
+  flexWrap: "wrap"
+};
+var buttonBase = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "4px",
+  padding: "6px 12px",
+  borderRadius: "8px",
+  border: `1px solid ${tokens.border}`,
+  backgroundColor: tokens.bg,
+  color: tokens.text,
+  fontSize: "12px",
+  fontWeight: 500,
+  cursor: "pointer",
+  transition: "background-color 0.15s",
+  whiteSpace: "nowrap"
+};
+var primaryButton = {
+  ...buttonBase,
+  backgroundColor: tokens.primary,
+  borderColor: tokens.primary,
+  color: "#fff"
+};
+var inputStyle2 = {
+  flex: 1,
+  padding: "8px 10px",
+  borderRadius: "8px",
+  border: `1px solid ${tokens.border}`,
+  backgroundColor: "rgba(255,255,255,0.04)",
+  color: tokens.text,
+  fontSize: "14px",
+  fontFamily: "monospace",
+  outline: "none"
+};
+var inputRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  marginBottom: "8px"
+};
+var statusDotStyle = (isOnBase) => ({
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  backgroundColor: isOnBase ? tokens.success : tokens.warning,
+  flexShrink: 0
+});
+var feedbackStyle = (isError) => ({
+  fontSize: "12px",
+  color: isError ? tokens.error : tokens.success,
+  marginBottom: "8px",
+  padding: "6px 10px",
+  borderRadius: "6px",
+  backgroundColor: isError ? "rgba(248,113,113,0.08)" : "rgba(16,185,129,0.08)"
+});
+var balanceFooterStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  paddingTop: "8px",
+  borderTop: `1px solid ${tokens.border}`,
+  fontSize: "13px"
+};
+var linkStyle = {
+  color: tokens.primaryLight,
+  textDecoration: "none",
+  fontSize: "12px"
+};
+function truncateAddress2(addr) {
+  if (addr.length <= 14) return addr;
+  return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+}
+function baseScanUrl(address, type = "address") {
+  return `https://basescan.org/${type}/${address}`;
+}
+function DepositPanel({
+  depositAddress,
+  balanceDisplay,
+  depositInstructions,
+  isWalletOnBase,
+  depositStatus = "idle",
+  depositError,
+  depositResult,
+  onSwitchToBase,
+  onAddUsdcAsset,
+  onDeposit,
+  onAddressCopied,
+  onRefreshBalance,
+  onClose,
+  className,
+  recoveryPolicyUrl
+}) {
+  const [depositAmount, setDepositAmount] = useState5("");
+  const [copied, setCopied] = useState5(false);
+  const network = depositInstructions?.network ?? depositInstructions?.chainName ?? "Base";
+  const chainId = depositInstructions?.chainId ?? 8453;
+  const tokenSymbol = depositInstructions?.token ?? "USDC";
+  const contractAddr = depositInstructions?.tokenAddress;
+  const warningText = depositInstructions?.warning ?? `Send only ${tokenSymbol} on ${network}. Sending other tokens or using other networks may result in permanent loss.`;
+  const isLoading = depositStatus === "switching" || depositStatus === "signing" || depositStatus === "pending";
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(depositAddress);
+      setCopied(true);
+      onAddressCopied?.();
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  const handleDeposit = () => {
+    if (depositAmount && onDeposit) {
+      onDeposit(depositAmount);
+    }
+  };
+  const statusLabel = {
+    idle: "",
+    switching: "Switching network...",
+    signing: "Confirm in wallet...",
+    pending: "Transaction pending...",
+    confirmed: "Deposit confirmed!",
+    error: "Transaction failed"
+  };
+  return /* @__PURE__ */ jsxs4("div", { style: panelStyle, className, children: [
+    /* @__PURE__ */ jsxs4("div", { style: headerStyle, children: [
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        /* @__PURE__ */ jsx5("h3", { style: titleStyle, children: "Deposit Instructions" }),
+        /* @__PURE__ */ jsxs4("span", { style: badgeStyle, children: [
+          network,
+          " (",
+          chainId,
+          ")"
+        ] })
+      ] }),
+      onClose && /* @__PURE__ */ jsx5("button", { type: "button", style: closeButtonStyle, onClick: onClose, "aria-label": "Close", children: ICON_CLOSE })
+    ] }),
+    contractAddr && /* @__PURE__ */ jsxs4("div", { style: rowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: { color: tokens.textMuted }, children: "Token" }),
+      /* @__PURE__ */ jsxs4("span", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+        /* @__PURE__ */ jsx5("strong", { style: { color: "#f3f4f6" }, children: tokenSymbol }),
+        /* @__PURE__ */ jsxs4(
+          "a",
+          {
+            href: baseScanUrl(contractAddr, "token"),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: linkStyle,
+            title: "View on BaseScan",
+            children: [
+              truncateAddress2(contractAddr),
+              " ",
+              ICON_EXTERNAL
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: warningBoxStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: { fontSize: "16px", flexShrink: 0 }, children: ICON_WARNING }),
+      /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx5("div", { children: warningText }),
+        recoveryPolicyUrl && /* @__PURE__ */ jsxs4(
+          "a",
+          {
+            href: recoveryPolicyUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: { ...linkStyle, marginTop: "4px", display: "inline-block" },
+            children: [
+              "Recovery policy ",
+              ICON_EXTERNAL
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: addressBoxStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: addressTextStyle, children: depositAddress }),
+      /* @__PURE__ */ jsx5("button", { type: "button", style: iconButtonStyle, onClick: handleCopy, title: "Copy address", children: copied ? /* @__PURE__ */ jsx5("span", { style: { color: tokens.success }, children: ICON_CHECK }) : ICON_COPY }),
+      /* @__PURE__ */ jsx5(
+        "a",
+        {
+          href: baseScanUrl(depositAddress),
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: iconButtonStyle,
+          title: "View on BaseScan",
+          children: ICON_EXTERNAL
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: actionButtonsRow, children: [
+      onSwitchToBase && /* @__PURE__ */ jsx5("button", { type: "button", style: buttonBase, onClick: onSwitchToBase, disabled: isLoading, children: "Switch to Base" }),
+      onAddUsdcAsset && /* @__PURE__ */ jsxs4("button", { type: "button", style: buttonBase, onClick: onAddUsdcAsset, disabled: isLoading, children: [
+        "Add ",
+        tokenSymbol,
+        " (Base)"
+      ] }),
+      onDeposit && /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          style: primaryButton,
+          onClick: handleDeposit,
+          disabled: isLoading || !depositAmount,
+          children: isLoading ? statusLabel[depositStatus] : "Deposit From Wallet"
+        }
+      )
+    ] }),
+    onDeposit && /* @__PURE__ */ jsxs4("div", { style: inputRowStyle, children: [
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "text",
+          inputMode: "decimal",
+          placeholder: `Amount in ${tokenSymbol}`,
+          value: depositAmount,
+          onChange: (e) => setDepositAmount(e.target.value),
+          style: inputStyle2,
+          disabled: isLoading
+        }
+      ),
+      /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: tokens.textMuted },
+          title: isWalletOnBase ? "Connected to Base" : "Not on Base network",
+          children: [
+            /* @__PURE__ */ jsx5("div", { style: statusDotStyle(!!isWalletOnBase) }),
+            /* @__PURE__ */ jsx5("span", { children: isWalletOnBase ? "Base" : "Wrong network" })
+          ]
+        }
+      )
+    ] }),
+    depositStatus !== "idle" && statusLabel[depositStatus] && /* @__PURE__ */ jsx5("div", { style: feedbackStyle(depositStatus === "error"), children: statusLabel[depositStatus] }),
+    depositError && /* @__PURE__ */ jsx5("div", { style: feedbackStyle(true), children: depositError }),
+    depositResult && !depositError && /* @__PURE__ */ jsx5("div", { style: feedbackStyle(false), children: depositResult }),
+    balanceDisplay && /* @__PURE__ */ jsxs4("div", { style: balanceFooterStyle, children: [
+      /* @__PURE__ */ jsxs4("span", { children: [
+        "Balance: ",
+        /* @__PURE__ */ jsx5("strong", { style: { color: "#f3f4f6" }, children: balanceDisplay })
+      ] }),
+      onRefreshBalance && /* @__PURE__ */ jsx5("button", { type: "button", style: { ...iconButtonStyle, fontSize: "12px" }, onClick: onRefreshBalance, children: "Refresh" })
+    ] })
+  ] });
+}
 export {
+  DepositPanel,
   RickyDataProvider,
   SecretForm,
   SecretOrchestrator,

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@rickydata/react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "React hooks, providers, and components for the rickydata Agent Gateway SDK",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "files": ["dist"],