@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/AvatarSelector.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Reusable avatar/character VRM selector.
+ *
+ * Shows a single row/grid of bundled VRM avatars as thumbnail images.
+ * The selected avatar gets a highlight ring. No text labels.
+ * Supports drag-and-drop for custom VRM uploads.
+ */
+export interface AvatarSelectorProps {
+    /** Currently selected index (1-N for bundled, 0 for custom) */
+    selected: number;
+    /** Called when a built-in avatar is selected */
+    onSelect: (index: number) => void;
+    /** Called when a custom VRM is uploaded */
+    onUpload?: (file: File) => void;
+    /** Whether to show the upload option */
+    showUpload?: boolean;
+    /** Expand selector to fill row width with responsive tile sizes */
+    fullWidth?: boolean;
+    /** Whether an avatar is currently loading (disables selection) */
+    loading?: boolean;
+}
+export declare function AvatarSelector({ selected, onSelect, onUpload, showUpload, fullWidth, loading, }: AvatarSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AvatarSelector.d.ts.map

package/components/AvatarSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarSelector.d.ts","sourceRoot":"","sources":["../../src/components/AvatarSelector.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAWH,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA6BD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAiB,EACjB,SAAiB,EACjB,OAAe,GAChB,EAAE,mBAAmB,2CA4JrB"}

package/components/AvatarSelector.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Reusable avatar/character VRM selector.
+ *
+ * Shows a single row/grid of bundled VRM avatars as thumbnail images.
+ * The selected avatar gets a highlight ring. No text labels.
+ * Supports drag-and-drop for custom VRM uploads.
+ */
+import { getVrmPreviewUrl, getVrmTitle, useApp, VRM_COUNT, } from "@elizaos/app-core/state";
+import { alertDesktopMessage } from "@elizaos/app-core/utils";
+import { useCallback, useRef, useState } from "react";
+function isVrmFile(file) {
+    return file.name.toLowerCase().endsWith(".vrm");
+}
+async function validateVrmFile(file) {
+    try {
+        const buffer = await file.arrayBuffer();
+        const bytes = new Uint8Array(buffer.slice(0, 32));
+        const textHeader = new TextDecoder().decode(bytes);
+        if (textHeader.startsWith("version https://git-lfs.github.com/spec/v1")) {
+            return "This .vrm is a Git LFS pointer, not the real model file. Export/download the actual VRM binary.";
+        }
+        const isGlbMagic = bytes.length >= 4 &&
+            bytes[0] === 0x67 && // g
+            bytes[1] === 0x6c && // l
+            bytes[2] === 0x54 && // T
+            bytes[3] === 0x46; // F
+        if (!isGlbMagic) {
+            return "Invalid VRM file. Please select a valid .vrm binary.";
+        }
+        return null;
+    }
+    catch {
+        return "Could not read the selected file. Please try another .vrm.";
+    }
+}
+export function AvatarSelector({ selected, onSelect, onUpload, showUpload = true, fullWidth = false, loading = false, }) {
+    const { t } = useApp();
+    const fileInputRef = useRef(null);
+    const [dragOver, setDragOver] = useState(false);
+    const handleVrmFile = useCallback((file) => {
+        if (!isVrmFile(file)) {
+            void alertDesktopMessage({
+                title: "Invalid Avatar File",
+                message: "Please select a .vrm file.",
+                type: "error",
+            });
+            return;
+        }
+        void (async () => {
+            const validationError = await validateVrmFile(file);
+            if (validationError) {
+                await alertDesktopMessage({
+                    title: "Invalid Avatar File",
+                    message: validationError,
+                    type: "error",
+                });
+                return;
+            }
+            onUpload?.(file);
+            onSelect(0);
+        })();
+    }, [onUpload, onSelect]);
+    const handleFileChange = (e) => {
+        const file = e.target.files?.[0];
+        if (file)
+            handleVrmFile(file);
+    };
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOver(true);
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOver(false);
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOver(false);
+        const file = e.dataTransfer.files[0];
+        if (file)
+            handleVrmFile(file);
+    }, [handleVrmFile]);
+    const avatarIndices = Array.from({ length: VRM_COUNT }, (_, i) => i + 1);
+    const containerClass = fullWidth
+        ? "flex flex-row gap-2 w-full items-center"
+        : "flex flex-wrap gap-3 justify-start";
+    const containerStyle = undefined;
+    const avatarButtonClass = fullWidth
+        ? "relative w-14 h-14 shrink-0 rounded-lg overflow-hidden cursor-pointer transition-all"
+        : "relative w-24 h-24 shrink-0 rounded-lg overflow-hidden cursor-pointer transition-all";
+    const uploadButtonClass = fullWidth
+        ? "w-14 h-14 shrink-0 rounded-lg border-2 flex flex-col items-center justify-center cursor-pointer transition-all"
+        : "w-24 h-24 shrink-0 rounded-lg border-2 flex flex-col items-center justify-center cursor-pointer transition-all";
+    return (_jsx("div", { className: fullWidth ? "w-full" : undefined, children: _jsxs("div", { className: containerClass, style: containerStyle, children: [avatarIndices.map((i) => (_jsxs("button", { className: `${avatarButtonClass} ${selected === i
+                        ? "ring-2 ring-[var(--accent)] ring-offset-2 ring-offset-[var(--card)] scale-105"
+                        : "opacity-60 hover:opacity-100 hover:scale-105"} ${loading ? "cursor-wait pointer-events-none" : ""}`, onClick: () => !loading && onSelect(i), disabled: loading, type: "button", children: [_jsx("img", { src: getVrmPreviewUrl(i), alt: getVrmTitle(i), draggable: false, className: `w-full h-full object-cover select-none ${loading && selected !== i ? "opacity-40" : ""}` }), loading && selected === i && (_jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center", children: _jsx("div", { className: "w-6 h-6 border-2 border-white/30 border-t-white rounded-full animate-spin" }) }))] }, i))), showUpload && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".vrm", className: "hidden", onChange: handleFileChange }), _jsxs("button", { className: `${uploadButtonClass} ${dragOver
+                                ? "border-[var(--accent)] bg-[var(--accent)]/20 text-[var(--accent)] scale-105 border-solid"
+                                : selected === 0
+                                    ? "border-[var(--accent)] bg-[var(--accent)] text-[var(--accent-foreground)] ring-2 ring-[var(--accent)] ring-offset-2 ring-offset-[var(--card)] scale-105 border-solid"
+                                    : "border-[var(--border)] text-[var(--muted)] opacity-60 hover:opacity-100 hover:border-[var(--accent)] hover:scale-105 border-dashed"}`, onClick: () => fileInputRef.current?.click(), onDragOver: handleDragOver, onDragEnter: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, title: t("avatarselector.UploadCustomVrm"), type: "button", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-label": "Upload VRM", children: [_jsx("title", { children: t("avatarselector.UploadVRM") }), dragOver ? (_jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5-5 5 5M12 5v10" })) : (_jsx("path", { d: "M12 5v14m-7-7h14" }))] }), dragOver && (_jsx("span", { className: "text-[10px] mt-1 font-medium", children: t("avatarselector.dropVrm") }))] })] }))] }) }));
+}

package/components/BscTradePanel.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Quick-trade panel — token address input, amount presets, buy/sell,
+ * quote display, execution confirmation, and tx status tracking.
+ *
+ * Extracted from InventoryView to keep that component focused on
+ * portfolio display and chain navigation.
+ */
+import type { BscTradeExecuteRequest, BscTradeExecuteResponse, BscTradePreflightResponse, BscTradeQuoteRequest, BscTradeQuoteResponse, BscTradeTxStatusResponse } from "@elizaos/app-core/api";
+import { type TrackedToken } from "./inventory/constants";
+export interface TradePanelProps {
+    tradeReady: boolean;
+    bnbBalance: number;
+    onAddToken: (token: TrackedToken) => void;
+    getBscTradePreflight?: (tokenAddress?: string) => Promise<BscTradePreflightResponse>;
+    getBscTradeQuote?: (request: BscTradeQuoteRequest) => Promise<BscTradeQuoteResponse>;
+    executeBscTrade?: (request: BscTradeExecuteRequest) => Promise<BscTradeExecuteResponse>;
+    getBscTradeTxStatus?: (hash: string) => Promise<BscTradeTxStatusResponse>;
+}
+export declare function TradePanel({ tradeReady, bnbBalance, onAddToken, getBscTradePreflight, getBscTradeQuote, executeBscTrade, getBscTradeTxStatus, }: TradePanelProps): import("react/jsx-runtime").JSX.Element;
+export type { TradePanelProps as BscTradePanelProps };
+export { TradePanel as BscTradePanel };
+//# sourceMappingURL=BscTradePanel.d.ts.map

package/components/BscTradePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BscTradePanel.d.ts","sourceRoot":"","sources":["../../src/components/BscTradePanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EACV,sBAAsB,EACtB,uBAAuB,EACvB,yBAAyB,EACzB,oBAAoB,EACpB,qBAAqB,EACrB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAOzE,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,oBAAoB,CAAC,EAAE,CACrB,YAAY,CAAC,EAAE,MAAM,KAClB,OAAO,CAAC,yBAAyB,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,CACjB,OAAO,EAAE,oBAAoB,KAC1B,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACpC,eAAe,CAAC,EAAE,CAChB,OAAO,EAAE,sBAAsB,KAC5B,OAAO,CAAC,uBAAuB,CAAC,CAAC;IACtC,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,wBAAwB,CAAC,CAAC;CAC3E;AAID,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,UAAU,EACV,UAAU,EACV,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,EAAE,eAAe,2CA4ejB;AAED,YAAY,EAAE,eAAe,IAAI,kBAAkB,EAAE,CAAC;AACtD,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,CAAC"}

package/components/BscTradePanel.js

@@ -0,0 +1,221 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useApp } from "@elizaos/app-core/state";
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useState } from "react";
+import { HEX_ADDRESS_RE } from "./companion/walletUtils";
+import { formatBalance } from "./inventory/constants";
+/* ── Constants ─────────────────────────────────────────────────────── */
+const AMOUNT_PRESETS = [0.05, 0.1, 0.2, 0.5];
+const DEFAULT_QUICK_AMOUNT = "0.1";
+/* ── Component ─────────────────────────────────────────────────────── */
+export function TradePanel({ tradeReady, bnbBalance, onAddToken, getBscTradePreflight, getBscTradeQuote, executeBscTrade, getBscTradeTxStatus, }) {
+    const { t, copyToClipboard, setActionNotice } = useApp();
+    const [quickTokenAddress, setQuickTokenAddress] = useState("");
+    const [quickAmount, setQuickAmount] = useState(DEFAULT_QUICK_AMOUNT);
+    const [latestQuote, setLatestQuote] = useState(null);
+    const [latestExecution, setLatestExecution] = useState(null);
+    const [txStatus, setTxStatus] = useState(null);
+    const [tradeFeedback, setTradeFeedback] = useState(null);
+    const [quoteSide, setQuoteSide] = useState("buy");
+    const [pendingTrade, setPendingTrade] = useState(null);
+    // ── Trade handlers ──────────────────────────────────────────────────
+    const requestQuote = useCallback(async (side) => {
+        if (!getBscTradeQuote)
+            return;
+        const tokenAddress = quickTokenAddress.trim();
+        if (!HEX_ADDRESS_RE.test(tokenAddress)) {
+            setActionNotice("Enter a valid token contract address first.", "error", 3200);
+            setTradeFeedback({
+                tone: "error",
+                text: "Enter a valid token contract address first.",
+            });
+            return;
+        }
+        const amount = quickAmount.trim() || DEFAULT_QUICK_AMOUNT;
+        const amountNum = Number.parseFloat(amount);
+        if (!Number.isFinite(amountNum) || amountNum <= 0) {
+            setActionNotice("Enter a valid BNB amount first.", "error", 3200);
+            setTradeFeedback({
+                tone: "error",
+                text: "Enter a valid BNB amount first.",
+            });
+            return;
+        }
+        setQuoteSide(side);
+        try {
+            if (getBscTradePreflight) {
+                const preflight = await getBscTradePreflight(tokenAddress);
+                if (!preflight.ok) {
+                    setLatestQuote(null);
+                    setLatestExecution(null);
+                    setTxStatus(null);
+                    setPendingTrade(null);
+                    setActionNotice(preflight.reasons[0] ?? "Preflight checks failed.", "error", 3600);
+                    setTradeFeedback({
+                        tone: "error",
+                        text: preflight.reasons[0] ?? "Preflight checks failed.",
+                    });
+                    return;
+                }
+            }
+            const result = await getBscTradeQuote({
+                side,
+                tokenAddress,
+                amount,
+            });
+            setLatestQuote(result);
+            setLatestExecution(null);
+            setTxStatus(null);
+            setPendingTrade(null);
+            setActionNotice(`${side === "buy" ? "Quote ready" : "Sell quote ready"}: ${result.quoteOut?.amount ?? ""} ${result.quoteOut?.symbol ?? ""}`.trim(), "success", 3200);
+            setTradeFeedback({
+                tone: "success",
+                text: `${side === "buy" ? "Quote ready" : "Sell quote ready"}: ${result.quoteOut?.amount ?? ""} ${result.quoteOut?.symbol ?? ""}`.trim(),
+            });
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setActionNotice(message, "error", 4600);
+            setTradeFeedback({
+                tone: "error",
+                text: message,
+            });
+        }
+    }, [
+        getBscTradePreflight,
+        getBscTradeQuote,
+        quickAmount,
+        quickTokenAddress,
+        setActionNotice,
+    ]);
+    const handlePreflight = useCallback(async () => {
+        if (!getBscTradePreflight)
+            return;
+        const tokenAddress = quickTokenAddress.trim();
+        if (tokenAddress && !HEX_ADDRESS_RE.test(tokenAddress)) {
+            setActionNotice("Enter a valid token contract address first.", "error", 3200);
+            setTradeFeedback({
+                tone: "error",
+                text: "Enter a valid token contract address first.",
+            });
+            return;
+        }
+        try {
+            const result = await getBscTradePreflight(tokenAddress || undefined);
+            if (!result.ok) {
+                setActionNotice(result.reasons[0] ?? "Preflight checks failed.", "error", 3600);
+                setTradeFeedback({
+                    tone: "error",
+                    text: result.reasons[0] ?? "Preflight checks failed.",
+                });
+                return;
+            }
+            const message = tokenAddress
+                ? "Preflight checks passed."
+                : "Wallet is ready for BSC trading checks.";
+            setActionNotice(message, "success", 2600);
+            setTradeFeedback({
+                tone: "success",
+                text: message,
+            });
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setActionNotice(message, "error", 4600);
+            setTradeFeedback({
+                tone: "error",
+                text: message,
+            });
+        }
+    }, [getBscTradePreflight, quickTokenAddress, setActionNotice]);
+    const handleQuickBuy = useCallback(async () => requestQuote("buy"), [requestQuote]);
+    const handleQuickSell = useCallback(async () => requestQuote("sell"), [requestQuote]);
+    const handleToolbarQuote = useCallback(async () => {
+        await requestQuote(quoteSide);
+    }, [quoteSide, requestQuote]);
+    const handleRequestExecute = useCallback(() => {
+        if (!latestQuote)
+            return;
+        setPendingTrade({
+            side: latestQuote.side,
+            amount: quickAmount,
+            token: quickTokenAddress,
+        });
+    }, [latestQuote, quickAmount, quickTokenAddress]);
+    const handleConfirmExecute = useCallback(async () => {
+        if (!executeBscTrade || !pendingTrade || !latestQuote)
+            return;
+        setPendingTrade(null);
+        try {
+            const result = await executeBscTrade({
+                side: latestQuote.side,
+                tokenAddress: pendingTrade.token,
+                amount: pendingTrade.amount,
+            });
+            setLatestExecution(result);
+            if (result?.executed && result?.execution) {
+                // Already executed on-chain
+            }
+            else if (result?.requiresUserSignature) {
+                setActionNotice("Sign swap transaction in your wallet to complete the trade.", "info", 4600);
+            }
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error ? err.message : String(err), "error", 4600);
+        }
+    }, [executeBscTrade, pendingTrade, latestQuote, setActionNotice]);
+    const handleCancelExecute = useCallback(() => {
+        setPendingTrade(null);
+    }, []);
+    const handleRefreshTxStatus = useCallback(async () => {
+        if (!getBscTradeTxStatus || !latestExecution)
+            return;
+        const hash = latestExecution.execution?.hash;
+        if (!hash)
+            return;
+        const status = await getBscTradeTxStatus(hash);
+        setTxStatus(status);
+    }, [getBscTradeTxStatus, latestExecution]);
+    const handleAddToken = useCallback(() => {
+        if (!HEX_ADDRESS_RE.test(quickTokenAddress))
+            return;
+        const newToken = {
+            address: quickTokenAddress,
+            symbol: `TKN-${quickTokenAddress.slice(2, 6)}`,
+            addedAt: Date.now(),
+        };
+        onAddToken(newToken);
+        setActionNotice("Token added to watchlist.", "success", 2600);
+    }, [quickTokenAddress, onAddToken, setActionNotice]);
+    // ── Render helpers ──────────────────────────────────────────────────
+    function renderExecutionResult() {
+        if (!latestExecution)
+            return null;
+        if (latestExecution.executed && latestExecution.execution) {
+            const { hash, status, explorerUrl } = latestExecution.execution;
+            const shortHash = hash ? `${hash.slice(0, 10)}` : "";
+            return (_jsxs("div", { className: "border border-border p-2 text-xs space-y-1", children: [_jsx("div", { children: _jsxs("a", { href: explorerUrl, target: "_blank", rel: "noopener noreferrer", className: "text-txt", children: [t("bsctradepanel.ViewTx"), " ", shortHash] }) }), status === "pending" && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-yellow-500", children: t("bsctradepanel.Pending") }), _jsx(Button, { variant: "outline", size: "sm", "data-testid": "wallet-tx-refresh", className: "h-6 px-2 py-0.5 text-[10px] font-mono shadow-sm hover:border-accent", onClick: handleRefreshTxStatus, children: t("bsctradepanel.RefreshStatus") })] })), txStatus && (_jsxs("div", { className: "text-muted", children: [t("bsctradepanel.Confirmations"), " ", txStatus.confirmations ?? 0] }))] }));
+        }
+        if (latestExecution.requiresUserSignature) {
+            return (_jsxs("div", { className: "border border-border p-2 text-xs space-y-1", children: [_jsx("div", { className: "text-yellow-500", children: t("bsctradepanel.RequiresWalletSign") }), latestExecution.unsignedApprovalTx && (_jsx(Button, { variant: "outline", size: "sm", "data-testid": "wallet-copy-approve-tx", className: "h-6 px-2 py-0.5 text-[10px] font-mono shadow-sm hover:border-accent", onClick: () => copyToClipboard(JSON.stringify(latestExecution.unsignedApprovalTx)), children: t("bsctradepanel.CopyApprovalTX") })), latestExecution.unsignedTx && (_jsx(Button, { variant: "outline", size: "sm", "data-testid": "wallet-copy-swap-tx", className: "h-6 px-2 py-0.5 text-[10px] font-mono shadow-sm hover:border-accent", onClick: () => copyToClipboard(JSON.stringify(latestExecution.unsignedTx)), children: t("bsctradepanel.CopySwapTX") }))] }));
+        }
+        return null;
+    }
+    // ── Main render ─────────────────────────────────────────────────────
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: tradeReady ? "text-green-500" : "text-yellow-500", children: tradeReady ? "Trade Ready" : "Trade Not Ready" }), _jsxs("span", { className: "text-muted", children: [t("bsctradepanel.BNB"), " ", formatBalance(String(bnbBalance))] }), getBscTradePreflight && (_jsx(Button, { variant: "outline", size: "sm", "data-testid": "wallet-token-preflight", className: "h-6 px-2 py-0.5 text-[10px] font-mono shadow-sm hover:border-accent", onClick: () => {
+                            void handlePreflight();
+                        }, children: t("bsctradepanel.Preflight") })), getBscTradeQuote && (_jsx(Button, { variant: "outline", size: "sm", "data-testid": "wallet-token-quote", className: "h-6 px-2 py-0.5 text-[10px] font-mono shadow-sm hover:border-accent", onClick: () => {
+                            void handleToolbarQuote();
+                        }, children: t("bsctradepanel.Quote") }))] }), tradeFeedback && (_jsx("div", { "data-testid": "wallet-trade-feedback", className: `border px-2 py-1.5 text-xs ${tradeFeedback.tone === "success"
+                    ? "border-green-500/40 text-green-400"
+                    : tradeFeedback.tone === "info"
+                        ? "border-accent/40 text-txt"
+                        : "border-red-500/40 text-red-400"}`, children: tradeFeedback.text })), _jsxs("div", { className: "border border-border bg-card p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { "data-testid": "wallet-quick-token-input", placeholder: t("bsctradepanel.TokenContractAddre"), value: quickTokenAddress, onChange: (e) => setQuickTokenAddress(e.target.value), className: "flex-1 h-8 px-2 py-1 text-xs font-mono bg-bg border-border shadow-sm focus-visible:ring-1 focus-visible:ring-accent" }), _jsx(Button, { variant: "outline", size: "sm", "data-testid": "wallet-quick-add-token", className: "h-8 px-2 py-1 text-[10px] font-mono shadow-sm hover:border-accent", onClick: handleAddToken, children: t("secretsview.Add") })] }), _jsx("div", { className: "flex items-center gap-1.5", children: AMOUNT_PRESETS.map((amt) => (_jsxs("button", { type: "button", "data-testid": `wallet-quick-amount-${amt}`, className: `px-2 py-0.5 border text-[10px] font-mono cursor-pointer ${quickAmount === String(amt)
+                                ? "border-accent text-txt"
+                                : "border-border bg-bg hover:border-accent"}`, onClick: () => setQuickAmount(String(amt)), children: [amt, " ", t("bsctradepanel.BNB1")] }, amt))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", "data-testid": "wallet-quick-buy", className: "h-8 px-3 py-1 text-xs font-mono text-green-500 border-green-500 hover:bg-green-500 hover:text-white shadow-sm", onClick: () => {
+                                    void handleQuickBuy();
+                                }, children: t("bsctradepanel.Buy") }), _jsx(Button, { variant: "outline", size: "sm", "data-testid": "wallet-quick-sell", className: "h-8 px-3 py-1 text-xs font-mono text-red-500 border-red-500 hover:bg-red-500 hover:text-white shadow-sm", onClick: () => {
+                                    void handleQuickSell();
+                                }, children: t("bsctradepanel.Sell") })] }), latestQuote && (_jsxs("div", { className: "border border-border p-2 text-xs", children: [_jsx("div", { className: "font-bold mb-1", children: t("bsctradepanel.LatestQuote") }), _jsxs("div", { className: "text-muted", children: [latestQuote.side === "buy" ? "Buy" : "Sell", " ", latestQuote.quoteOut?.amount ?? "", " ", latestQuote.quoteOut?.symbol ?? ""] }), pendingTrade ? (_jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsxs("span", { className: "text-yellow-500 font-bold", children: [t("onboarding.confirm"), " ", pendingTrade.side, " ", t("bsctradepanel.trade")] }), _jsx(Button, { variant: "outline", size: "sm", "data-testid": "wallet-quote-confirm", className: "h-7 px-3 py-1 text-[10px] font-mono text-green-500 border-green-500 hover:bg-green-500 hover:text-white shadow-sm", onClick: handleConfirmExecute, children: t("onboarding.confirm") }), _jsx(Button, { variant: "outline", size: "sm", "data-testid": "wallet-quote-cancel", className: "h-7 px-3 py-1 text-[10px] font-mono text-muted border-border hover:border-danger hover:text-danger shadow-sm", onClick: handleCancelExecute, children: t("onboarding.cancel") })] })) : (_jsx(Button, { variant: "default", size: "sm", "data-testid": "wallet-quote-execute", className: "mt-1 h-7 px-3 py-1 text-[10px] font-mono shadow-sm", onClick: handleRequestExecute, children: t("bsctradepanel.ExecuteTrade") }))] })), latestExecution && renderExecutionResult()] })] }));
+}
+export { TradePanel as BscTradePanel };

package/components/BugReportModal.d.ts

@@ -0,0 +1,2 @@
+export declare function BugReportModal(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=BugReportModal.d.ts.map

package/components/BugReportModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BugReportModal.d.ts","sourceRoot":"","sources":["../../src/components/BugReportModal.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,cAAc,mDAid7B"}

package/components/BugReportModal.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "@elizaos/ui";
+import { ChevronRight } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { client } from "../api";
+import { useBranding } from "../config/branding";
+import { useBugReport, useTimeout } from "../hooks";
+import { useApp } from "../state";
+import { openExternalUrl } from "../utils";
+const ENV_OPTIONS = ["macOS", "Windows", "Linux", "Other"];
+const EMPTY_FORM = {
+    description: "",
+    stepsToReproduce: "",
+    expectedBehavior: "",
+    actualBehavior: "",
+    environment: "",
+    nodeVersion: "",
+    modelProvider: "",
+    logs: "",
+};
+export function BugReportModal() {
+    const { setTimeout } = useTimeout();
+    const { copyToClipboard, t } = useApp();
+    const branding = useBranding();
+    const { isOpen, close } = useBugReport();
+    const [form, setForm] = useState(EMPTY_FORM);
+    const [submitting, setSubmitting] = useState(false);
+    const [resultUrl, setResultUrl] = useState(null);
+    const [errorMsg, setErrorMsg] = useState(null);
+    const [showLogs, setShowLogs] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const descRef = useRef(null);
+    // Fetch env info on open with cancellation guard
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        let cancelled = false;
+        setForm(EMPTY_FORM);
+        setSubmitting(false);
+        setResultUrl(null);
+        setErrorMsg(null);
+        setShowLogs(false);
+        setCopied(false);
+        client
+            .checkBugReportInfo()
+            .then((info) => {
+            if (cancelled)
+                return;
+            if (info.nodeVersion)
+                setForm((f) => ({ ...f, nodeVersion: info.nodeVersion ?? "" }));
+            if (info.platform)
+                setForm((f) => ({
+                    ...f,
+                    environment: info.platform === "darwin"
+                        ? "macOS"
+                        : info.platform === "win32"
+                            ? "Windows"
+                            : info.platform === "linux"
+                                ? "Linux"
+                                : "Other",
+                }));
+        })
+            .catch(() => { });
+        setTimeout(() => descRef.current?.focus(), 50);
+        return () => {
+            cancelled = true;
+        };
+    }, [isOpen, setTimeout]);
+    const updateField = useCallback((key, value) => {
+        setForm((f) => ({ ...f, [key]: value }));
+    }, []);
+    const formatMarkdown = useCallback(() => {
+        const strip = (s, max = 10_000) => s.replace(/<[^>]*>/g, "").slice(0, max);
+        const lines = [];
+        lines.push(`### Description\n${strip(form.description)}`);
+        lines.push(`\n### Steps to Reproduce\n${strip(form.stepsToReproduce)}`);
+        if (form.expectedBehavior)
+            lines.push(`\n### Expected Behavior\n${strip(form.expectedBehavior)}`);
+        if (form.actualBehavior)
+            lines.push(`\n### Actual Behavior\n${strip(form.actualBehavior)}`);
+        lines.push(`\n### Environment\n${strip(form.environment || "Not specified", 200)}`);
+        if (form.nodeVersion)
+            lines.push(`\n### Node Version\n${strip(form.nodeVersion, 200)}`);
+        if (form.modelProvider)
+            lines.push(`\n### Model Provider\n${strip(form.modelProvider, 200)}`);
+        if (form.logs)
+            lines.push(`\n### Logs\n\`\`\`\n${strip(form.logs, 50_000)}\n\`\`\``);
+        return lines.join("\n");
+    }, [form]);
+    const handleSubmit = useCallback(async () => {
+        if (!form.description.trim() || !form.stepsToReproduce.trim()) {
+            setErrorMsg("Description and Steps to Reproduce are required.");
+            return;
+        }
+        setSubmitting(true);
+        setErrorMsg(null);
+        try {
+            const result = await client.submitBugReport({
+                description: form.description,
+                stepsToReproduce: form.stepsToReproduce,
+                expectedBehavior: form.expectedBehavior,
+                actualBehavior: form.actualBehavior,
+                environment: form.environment,
+                nodeVersion: form.nodeVersion,
+                modelProvider: form.modelProvider,
+                logs: form.logs,
+            });
+            if (result.url) {
+                setResultUrl(result.url);
+            }
+            else if (result.fallback) {
+                // No GITHUB_TOKEN on server — copy report and open GitHub manually
+                let ok = false;
+                try {
+                    await copyToClipboard(formatMarkdown());
+                    ok = true;
+                }
+                catch {
+                    ok = false;
+                }
+                setCopied(ok);
+                await openExternalUrl(result.fallback);
+            }
+        }
+        catch (err) {
+            setErrorMsg(err instanceof Error ? err.message : "Failed to submit bug report");
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }, [copyToClipboard, form, formatMarkdown]);
+    const handleCopyAndOpen = useCallback(async () => {
+        let ok = false;
+        try {
+            await copyToClipboard(formatMarkdown());
+            ok = true;
+        }
+        catch {
+            ok = false;
+        }
+        setCopied(ok);
+        await openExternalUrl(branding.bugReportUrl);
+    }, [copyToClipboard, formatMarkdown, branding.bugReportUrl]);
+    // Close on Escape
+    useEffect(() => {
+        if (!isOpen || typeof window === "undefined")
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                close();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [isOpen, close]);
+    if (!isOpen)
+        return null;
+    const labelClass = "block text-[11px] font-bold mb-1";
+    const labelStyle = { color: "var(--muted)" };
+    const inputClass = "w-full h-9 px-3 py-2 text-sm shadow-sm transition-colors font-body";
+    const inputStyle = {
+        background: "var(--bg-hover)",
+        color: "var(--text)",
+        border: "1px solid var(--border)",
+    };
+    const textareaClass = "w-full px-3 py-2 text-sm shadow-sm focus-visible:ring-1 transition-colors font-body resize-y min-h-[60px]";
+    const textareaStyle = {
+        background: "var(--bg-hover)",
+        color: "var(--text)",
+        border: "1px solid var(--border)",
+    };
+    const canSubmit = form.description.trim() && form.stepsToReproduce.trim() && !submitting;
+    const backdropProps = {
+        className: "fixed inset-0 z-50 flex items-center justify-center",
+        style: {
+            background: "color-mix(in srgb, var(--bg) 50%, transparent)",
+            backdropFilter: "blur(4px)",
+        },
+        onClick: (e) => {
+            if (e.target === e.currentTarget)
+                close();
+        },
+        onKeyDown: (e) => {
+            if (e.key === "Escape")
+                close();
+        },
+        role: "dialog",
+        "aria-modal": true,
+        tabIndex: -1,
+    };
+    // Success state
+    if (resultUrl) {
+        return (_jsx("div", { ...backdropProps, children: _jsxs("div", { className: "w-full max-w-md shadow-lg flex flex-col rounded-xl", style: {
+                    background: "color-mix(in srgb, var(--bg) 96%, transparent)",
+                    border: "1px solid color-mix(in srgb, var(--accent) 18%, transparent)",
+                    backdropFilter: "blur(24px)",
+                    boxShadow: "var(--shadow-lg)",
+                }, children: [_jsxs("div", { className: "flex items-center px-5 py-3", style: { borderBottom: "1px solid var(--border)" }, children: [_jsx("span", { className: "font-bold text-sm flex-1", style: { color: "var(--text)" }, children: t("bugreportmodal.BugReportSubmitted") }), _jsx("button", { type: "button", className: "bg-transparent border-0 cursor-pointer text-lg h-6 w-6", style: { color: "var(--muted)" }, onClick: close, children: t("bugreportmodal.Times") })] }), _jsxs("div", { className: "px-5 py-6 text-center", children: [_jsx("p", { className: "text-sm mb-3", style: { color: "var(--text)" }, children: t("bugreportmodal.YourBugReportHas") }), _jsx("a", { href: resultUrl, target: "_blank", rel: "noopener noreferrer", className: "text-sm hover:underline break-all", style: { color: "#f0b232" }, children: resultUrl })] }), _jsx("div", { className: "flex justify-end px-5 py-3", style: { borderTop: "1px solid var(--border)" }, children: _jsx("button", { type: "button", className: "px-4 py-1.5 text-xs font-medium rounded cursor-pointer transition-colors", style: {
+                                background: "var(--bg-hover)",
+                                border: "1px solid var(--border)",
+                                color: "var(--text)",
+                            }, onClick: close, children: t("bugreportmodal.Close") }) })] }) }));
+    }
+    return (_jsx("div", { ...backdropProps, children: _jsxs("div", { className: "w-full max-w-lg shadow-lg flex flex-col max-h-[85vh] rounded-xl", style: {
+                background: "color-mix(in srgb, var(--bg) 96%, transparent)",
+                border: "1px solid color-mix(in srgb, var(--accent) 18%, transparent)",
+                backdropFilter: "blur(24px)",
+                boxShadow: "var(--shadow-lg)",
+            }, children: [_jsxs("div", { className: "flex items-center px-5 py-3 shrink-0", style: { borderBottom: "1px solid var(--border)" }, children: [_jsx("span", { className: "font-bold text-sm flex-1", style: { color: "var(--text)" }, children: t("bugreportmodal.ReportABug") }), _jsx("button", { type: "button", className: "bg-transparent border-0 cursor-pointer text-lg h-6 w-6", style: { color: "var(--muted)" }, onClick: close, children: t("bugreportmodal.Times") })] }), _jsxs("div", { className: "px-5 py-4 flex flex-col gap-3 overflow-y-auto", children: [errorMsg && (_jsx("div", { className: "text-xs px-3 py-2", style: { color: "#ef4444", border: "1px solid #ef4444" }, children: errorMsg })), _jsxs("label", { className: labelClass, style: labelStyle, children: [t("skillsview.Description"), " ", _jsx("span", { style: { color: "#ef4444" }, children: "*" }), _jsx("textarea", { ref: descRef, className: textareaClass, style: textareaStyle, placeholder: t("bugreportmodal.DescribeTheIssueY"), value: form.description, onChange: (e) => updateField("description", e.target.value), rows: 3 })] }), _jsxs("label", { className: labelClass, style: labelStyle, children: [t("bugreportmodal.StepsToReproduce"), " ", _jsx("span", { style: { color: "#ef4444" }, children: "*" }), _jsx("textarea", { className: textareaClass, style: textareaStyle, placeholder: "1. Go to ...\n2. Click on ...\n3. Observe ...", value: form.stepsToReproduce, onChange: (e) => updateField("stepsToReproduce", e.target.value), rows: 3 })] }), _jsxs("label", { className: labelClass, style: labelStyle, children: [t("bugreportmodal.ExpectedBehavior"), _jsx("textarea", { className: textareaClass, style: textareaStyle, placeholder: t("bugreportmodal.DescribeTheExpecte"), value: form.expectedBehavior, onChange: (e) => updateField("expectedBehavior", e.target.value), rows: 2 })] }), _jsxs("label", { className: labelClass, style: labelStyle, children: [t("bugreportmodal.ActualBehavior"), _jsx("textarea", { className: textareaClass, style: textareaStyle, placeholder: t("bugreportmodal.DescribeTheActual"), value: form.actualBehavior, onChange: (e) => updateField("actualBehavior", e.target.value), rows: 2 })] }), _jsxs("div", { className: "flex gap-3", children: [_jsxs("label", { className: `${labelClass} flex-1`, style: labelStyle, children: [t("bugreportmodal.Environment"), _jsxs("select", { className: inputClass, style: inputStyle, value: form.environment, onChange: (e) => updateField("environment", e.target.value), children: [_jsx("option", { value: "", children: t("bugreportmodal.Select") }), ENV_OPTIONS.map((opt) => (_jsx("option", { value: opt, children: opt }, opt)))] })] }), _jsxs("label", { className: `${labelClass} flex-1`, style: labelStyle, children: [t("bugreportmodal.NodeVersion"), _jsx(Input, { className: inputClass, style: inputStyle, placeholder: t("bugreportmodal.22X"), value: form.nodeVersion, onChange: (e) => updateField("nodeVersion", e.target.value) })] })] }), _jsxs("label", { className: labelClass, style: labelStyle, children: [t("bugreportmodal.ModelProvider"), _jsx(Input, { className: inputClass, style: inputStyle, placeholder: t("bugreportmodal.AnthropicOpenAI"), value: form.modelProvider, onChange: (e) => updateField("modelProvider", e.target.value) })] }), _jsxs("div", { children: [_jsxs("button", { type: "button", className: "h-auto p-0 text-[11px] font-bold bg-transparent border-0 cursor-pointer flex items-center gap-1 transition-colors", style: { color: "var(--muted)" }, onClick: () => setShowLogs(!showLogs), children: [_jsx(ChevronRight, { className: "w-3 h-3 inline-block transition-transform", style: { transform: showLogs ? "rotate(90deg)" : "none" } }), t("bugreportmodal.Logs")] }), showLogs && (_jsx("textarea", { className: `${textareaClass} mt-1 font-mono text-xs`, style: textareaStyle, placeholder: t("bugreportmodal.PasteRelevantError"), value: form.logs, onChange: (e) => updateField("logs", e.target.value), rows: 4 }))] })] }), _jsxs("div", { className: "flex items-center justify-between gap-2 px-5 py-3 shrink-0", style: { borderTop: "1px solid var(--border)" }, children: [_jsx("button", { type: "button", className: "px-3 py-1.5 text-xs font-medium rounded cursor-pointer transition-colors", style: {
+                                background: "transparent",
+                                border: "1px solid var(--border)",
+                                color: "var(--muted)",
+                            }, onClick: close, children: t("onboarding.cancel") }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", className: "px-3 py-1.5 text-xs font-medium rounded cursor-pointer transition-colors disabled:opacity-50", style: {
+                                        background: "var(--bg-hover)",
+                                        border: "1px solid var(--border)",
+                                        color: "var(--text)",
+                                    }, onClick: handleCopyAndOpen, disabled: !canSubmit, children: copied ? "Copied!" : "Copy & Open GitHub" }), _jsx("button", { type: "button", className: "px-3 py-1.5 text-xs font-medium rounded cursor-pointer transition-colors disabled:opacity-50", style: { background: "#f0b232", border: "none", color: "#000" }, onClick: handleSubmit, disabled: !canSubmit, children: submitting ? "Submitting..." : "Submit" })] })] })] }) }));
+}