@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

package/src/components/WhatsAppQrOverlay.tsx

@@ -1,230 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useWhatsAppPairing } from "../hooks";
-import { useApp } from "../state";
-
-interface WhatsAppQrOverlayProps {
-  accountId?: string;
-  /** Called when QR pairing succeeds — parent should install plugin + close modal. */
-  onConnected?: () => void;
-}
-
-export function WhatsAppQrOverlay({
-  accountId = "default",
-  onConnected,
-}: WhatsAppQrOverlayProps) {
-  const {
-    status,
-    qrDataUrl,
-    phoneNumber,
-    error,
-    startPairing,
-    stopPairing,
-    disconnect,
-  } = useWhatsAppPairing(accountId);
-  const { t } = useApp();
-
-  // Fire onConnected once when status transitions to "connected"
-  const firedRef = useRef(false);
-  useEffect(() => {
-    if (status === "connected" && onConnected && !firedRef.current) {
-      firedRef.current = true;
-      // Small delay so the user sees the success state briefly
-      const timer = setTimeout(onConnected, 1200);
-      return () => clearTimeout(timer);
-    }
-  }, [status, onConnected]);
-
-  // ── Connected ────────────────────────────────────────────────────────
-  if (status === "connected") {
-    return (
-      <div
-        className="p-4 mt-3"
-        style={{
-          border: "1px solid #22c55e",
-          background: "var(--ok-subtle)",
-        }}
-      >
-        <div className="flex items-center gap-2">
-          <span
-            className="inline-block w-2 h-2 rounded-full"
-            style={{ background: "#22c55e" }}
-          />
-          <span className="text-xs font-medium" style={{ color: "#22c55e" }}>
-            {t("onboarding.connected")}
-            {phoneNumber ? ` (+${phoneNumber})` : ""}
-          </span>
-        </div>
-        <div className="text-[10px] mt-1" style={{ color: "var(--muted)" }}>
-          {onConnected
-            ? "Installing WhatsApp plugin and restarting agent..."
-            : "WhatsApp is paired. Auth state is saved for automatic reconnection."}
-        </div>
-        {!onConnected && (
-          <button
-            type="button"
-            className="mt-2 px-2.5 py-1 text-[10px] bg-transparent cursor-pointer transition-colors"
-            style={{ border: "1px solid #ef4444", color: "#ef4444" }}
-            onClick={() => void disconnect()}
-          >
-            {t("whatsappqroverlay.Disconnect")}
-          </button>
-        )}
-      </div>
-    );
-  }
-
-  // ── Error / Timeout ──────────────────────────────────────────────────
-  if (status === "error" || status === "timeout") {
-    return (
-      <div
-        className="p-4 mt-3"
-        style={{
-          border: "1px solid #ef4444",
-          background: "var(--destructive-subtle)",
-        }}
-      >
-        <div className="text-xs mb-2" style={{ color: "#ef4444" }}>
-          {status === "timeout"
-            ? "QR code expired. Please try again."
-            : (error ?? "An error occurred.")}
-        </div>
-        <button
-          type="button"
-          className="px-3 py-1.5 text-[11px] bg-transparent cursor-pointer transition-colors"
-          style={{ border: "1px solid #f0b232", color: "#f0b232" }}
-          onClick={() => {
-            firedRef.current = false;
-            void startPairing();
-          }}
-        >
-          {t("whatsappqroverlay.TryAgain")}
-        </button>
-      </div>
-    );
-  }
-
-  // ── Idle ──────────────────────────────────────────────────────────────
-  if (status === "idle" || status === "disconnected") {
-    return (
-      <div
-        className="p-4 mt-3"
-        style={{
-          border: "1px solid var(--border)",
-          background: "var(--bg-hover)",
-        }}
-      >
-        <div className="text-xs mb-2" style={{ color: "var(--muted)" }}>
-          {t("whatsappqroverlay.ScanAQRCodeWith")}
-        </div>
-        <div
-          className="text-[10px] mb-2 opacity-70"
-          style={{ color: "var(--muted)" }}
-        >
-          {t("whatsappqroverlay.UsesAnUnofficialW")}
-        </div>
-        <button
-          type="button"
-          className="px-3 py-1.5 text-[11px] bg-transparent cursor-pointer transition-colors"
-          style={{ border: "1px solid #f0b232", color: "#f0b232" }}
-          onClick={() => {
-            firedRef.current = false;
-            void startPairing();
-          }}
-        >
-          {t("whatsappqroverlay.ConnectWhatsApp")}
-        </button>
-      </div>
-    );
-  }
-
-  // ── Initializing / Waiting for QR ────────────────────────────────────
-  return (
-    <div
-      className="p-4 mt-3"
-      style={{
-        border: "1px solid rgba(255,255,255,0.08)",
-        background: "rgba(255,255,255,0.04)",
-      }}
-    >
-      <div className="flex items-start gap-4">
-        {/* QR Code area */}
-        <div className="shrink-0">
-          {qrDataUrl ? (
-            <img
-              src={qrDataUrl}
-              alt="WhatsApp QR Code"
-              className="w-48 h-48 bg-white"
-              style={{
-                imageRendering: "pixelated",
-                border: "1px solid var(--border)",
-              }}
-            />
-          ) : (
-            <div
-              className="w-48 h-48 flex items-center justify-center"
-              style={{
-                border: "1px solid var(--border)",
-                background: "var(--bg-hover)",
-              }}
-            >
-              <span
-                className="text-xs animate-pulse"
-                style={{ color: "var(--muted)" }}
-              >
-                {t("whatsappqroverlay.GeneratingQR")}
-              </span>
-            </div>
-          )}
-        </div>
-
-        {/* Instructions */}
-        <div className="flex-1 min-w-0">
-          <div
-            className="text-xs font-medium mb-2"
-            style={{ color: "var(--text)" }}
-          >
-            {t("whatsappqroverlay.ScanWithWhatsApp")}
-          </div>
-          <ol
-            className="text-[11px] space-y-1 list-decimal pl-4 m-0"
-            style={{ color: "var(--muted)" }}
-          >
-            <li>{t("whatsappqroverlay.OpenWhatsAppOnYou")}</li>
-            <li>
-              {t("whatsappqroverlay.Tap")}{" "}
-              <strong>{t("whatsappqroverlay.Menu")}</strong> or{" "}
-              <strong>{t("nav.settings")}</strong>{" "}
-              {t("whatsappqroverlay.andSelect")}{" "}
-              <strong>{t("whatsappqroverlay.LinkedDevices")}</strong>
-            </li>
-            <li>
-              {t("whatsappqroverlay.Tap")}{" "}
-              <strong>{t("whatsappqroverlay.LinkADevice")}</strong>
-            </li>
-            <li>{t("whatsappqroverlay.PointYourPhoneAt")}</li>
-          </ol>
-          <div className="mt-3 flex items-center gap-2">
-            <span
-              className="inline-block w-1.5 h-1.5 rounded-full animate-pulse"
-              style={{ background: "#f0b232" }}
-            />
-            <span className="text-[10px]" style={{ color: "var(--muted)" }}>
-              {t("whatsappqroverlay.QRRefreshesAutomat")}
-            </span>
-          </div>
-          <button
-            type="button"
-            className="mt-3 px-2.5 py-1 text-[10px] cursor-pointer transition-colors"
-            style={{
-              border: "1px solid var(--border)",
-              color: "var(--muted)",
-            }}
-            onClick={() => void stopPairing()}
-          >
-            {t("onboarding.cancel")}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/__tests__/chainConfig.test.ts

@@ -1,220 +0,0 @@
-/**
- * Unit tests for the central chain configuration registry.
- */
-import { describe, expect, it } from "vitest";
-
-import {
-  CHAIN_CONFIGS,
-  getChainConfig,
-  getContractLogoUrl,
-  getExplorerTokenUrl,
-  getExplorerTxUrl,
-  getNativeLogoUrl,
-  getStablecoinAddress,
-  PRIMARY_CHAIN_KEYS,
-  resolveChainKey,
-} from "../chainConfig";
-
-describe("chainConfig", () => {
-  // ── CHAIN_CONFIGS registry ──────────────────────────────────────
-  describe("CHAIN_CONFIGS", () => {
-    it("contains all primary chains", () => {
-      for (const key of PRIMARY_CHAIN_KEYS) {
-        expect(CHAIN_CONFIGS[key]).toBeDefined();
-        expect(CHAIN_CONFIGS[key].chainKey).toBe(key);
-      }
-    });
-
-    it("every config has required fields", () => {
-      for (const config of Object.values(CHAIN_CONFIGS)) {
-        expect(config.name).toBeTruthy();
-        expect(config.nativeSymbol).toBeTruthy();
-        expect(config.explorerBaseUrl).toMatch(/^https?:\/\//);
-        expect(config.nativeLogoUrl).toMatch(/^https?:\/\//);
-        expect(config.addressRegex).toBeInstanceOf(RegExp);
-        expect(config.nameVariants.length).toBeGreaterThan(0);
-      }
-    });
-  });
-
-  // ── getChainConfig ──────────────────────────────────────────────
-  describe("getChainConfig", () => {
-    it("resolves BSC chain names", () => {
-      expect(getChainConfig("bsc")?.chainKey).toBe("bsc");
-      expect(getChainConfig("BNB Chain")?.chainKey).toBe("bsc");
-      expect(getChainConfig("BNB Smart Chain")?.chainKey).toBe("bsc");
-    });
-
-    it("resolves AVAX chain names", () => {
-      expect(getChainConfig("avax")?.chainKey).toBe("avax");
-      expect(getChainConfig("Avalanche")?.chainKey).toBe("avax");
-      expect(getChainConfig("c-chain")?.chainKey).toBe("avax");
-      expect(getChainConfig("avalanche c-chain")?.chainKey).toBe("avax");
-    });
-
-    it("resolves Solana chain names", () => {
-      expect(getChainConfig("solana")?.chainKey).toBe("solana");
-      expect(getChainConfig("SOL")?.chainKey).toBe("solana");
-    });
-
-    it("resolves Ethereum chain names", () => {
-      expect(getChainConfig("ethereum")?.chainKey).toBe("ethereum");
-      expect(getChainConfig("mainnet")?.chainKey).toBe("ethereum");
-      expect(getChainConfig("eth")?.chainKey).toBe("ethereum");
-    });
-
-    it("trims whitespace and is case-insensitive", () => {
-      expect(getChainConfig("  AVAX  ")?.chainKey).toBe("avax");
-      expect(getChainConfig("  BSC  ")?.chainKey).toBe("bsc");
-    });
-
-    it("returns null for unknown chains", () => {
-      expect(getChainConfig("fantom")).toBeNull();
-      expect(getChainConfig("")).toBeNull();
-    });
-  });
-
-  // ── resolveChainKey ─────────────────────────────────────────────
-  describe("resolveChainKey", () => {
-    it("returns the chain key for known chains", () => {
-      expect(resolveChainKey("avalanche")).toBe("avax");
-      expect(resolveChainKey("bsc")).toBe("bsc");
-      expect(resolveChainKey("solana")).toBe("solana");
-    });
-
-    it("returns null for unknowns", () => {
-      expect(resolveChainKey("fantom")).toBeNull();
-    });
-  });
-
-  // ── getExplorerTokenUrl ─────────────────────────────────────────
-  describe("getExplorerTokenUrl", () => {
-    const validAddr = `0x${"a".repeat(40)}`;
-    const solAddr = "So11111111111111111111111111111111111111112";
-
-    it("returns bscscan URL for BSC", () => {
-      expect(getExplorerTokenUrl("bsc", validAddr)).toBe(
-        `https://bscscan.com/token/${validAddr}`,
-      );
-    });
-
-    it("returns snowtrace URL for Avalanche", () => {
-      expect(getExplorerTokenUrl("avalanche", validAddr)).toBe(
-        `https://snowtrace.io/token/${validAddr}`,
-      );
-    });
-
-    it("returns solscan URL for Solana", () => {
-      expect(getExplorerTokenUrl("solana", solAddr)).toBe(
-        `https://solscan.io/token/${solAddr}`,
-      );
-    });
-
-    it("returns null for unknown chains", () => {
-      expect(getExplorerTokenUrl("fantom", validAddr)).toBeNull();
-    });
-
-    it("returns null for invalid addresses", () => {
-      expect(getExplorerTokenUrl("bsc", "not-an-address")).toBeNull();
-    });
-  });
-
-  // ── getExplorerTxUrl ────────────────────────────────────────────
-  describe("getExplorerTxUrl", () => {
-    const hash = `0x${"f".repeat(64)}`;
-
-    it("returns bscscan tx URL", () => {
-      expect(getExplorerTxUrl("bsc", hash)).toBe(
-        `https://bscscan.com/tx/${hash}`,
-      );
-    });
-
-    it("returns snowtrace tx URL", () => {
-      expect(getExplorerTxUrl("avax", hash)).toBe(
-        `https://snowtrace.io/tx/${hash}`,
-      );
-    });
-
-    it("returns null for unknown chains", () => {
-      expect(getExplorerTxUrl("fantom", hash)).toBeNull();
-    });
-  });
-
-  // ── getNativeLogoUrl ────────────────────────────────────────────
-  describe("getNativeLogoUrl", () => {
-    it("returns logo URL for known chains", () => {
-      expect(getNativeLogoUrl("bsc")).toMatch(/smartchain/);
-      expect(getNativeLogoUrl("avax")).toMatch(/avalanchec/);
-      expect(getNativeLogoUrl("solana")).toMatch(/solana/);
-      expect(getNativeLogoUrl("ethereum")).toMatch(/ethereum/);
-    });
-
-    it("returns null for unknown chains", () => {
-      expect(getNativeLogoUrl("fantom")).toBeNull();
-    });
-  });
-
-  // ── getContractLogoUrl ──────────────────────────────────────────
-  describe("getContractLogoUrl", () => {
-    const addr = `0x${"a".repeat(40)}`;
-
-    it("returns TrustWallet CDN URL for BSC", () => {
-      const url = getContractLogoUrl("bsc", addr);
-      expect(url).toMatch(/smartchain.*assets/);
-      expect(url).toContain(addr);
-    });
-
-    it("returns TrustWallet CDN URL for AVAX", () => {
-      const url = getContractLogoUrl("avalanche", addr);
-      expect(url).toMatch(/avalanchec.*assets/);
-    });
-
-    it("returns null when no contract address", () => {
-      expect(getContractLogoUrl("bsc", null)).toBeNull();
-    });
-
-    it("returns null for chains without TrustWallet slug", () => {
-      expect(getContractLogoUrl("arbitrum", addr)).toBeNull();
-    });
-  });
-
-  // ── getStablecoinAddress ────────────────────────────────────────
-  describe("getStablecoinAddress", () => {
-    it("returns USDT address for BSC", () => {
-      const addr = getStablecoinAddress("bsc", "USDT");
-      expect(addr).toBeTruthy();
-      expect(addr).toMatch(/^0x/);
-    });
-
-    it("returns USDC address for Avalanche", () => {
-      const addr = getStablecoinAddress("avax", "USDC");
-      expect(addr).toBeTruthy();
-      expect(addr).toMatch(/^0x/);
-    });
-
-    it("is case-insensitive for symbol", () => {
-      expect(getStablecoinAddress("bsc", "usdt")).toBe(
-        getStablecoinAddress("bsc", "USDT"),
-      );
-    });
-
-    it("returns null for unknown stablecoin", () => {
-      expect(getStablecoinAddress("bsc", "DAI")).toBeNull();
-    });
-
-    it("returns null for unknown chain", () => {
-      expect(getStablecoinAddress("fantom", "USDT")).toBeNull();
-    });
-  });
-
-  // ── PRIMARY_CHAIN_KEYS ──────────────────────────────────────────
-  describe("PRIMARY_CHAIN_KEYS", () => {
-    it("includes BSC, AVAX, and Solana", () => {
-      expect(PRIMARY_CHAIN_KEYS).toContain("ethereum");
-      expect(PRIMARY_CHAIN_KEYS).toContain("base");
-      expect(PRIMARY_CHAIN_KEYS).toContain("bsc");
-      expect(PRIMARY_CHAIN_KEYS).toContain("avax");
-      expect(PRIMARY_CHAIN_KEYS).toContain("solana");
-    });
-  });
-});

package/src/components/apps/AppDetailPane.tsx

@@ -1,242 +0,0 @@
-import { Button } from "@elizaos/ui";
-import type { RegistryAppInfo } from "../../api";
-import { useApp } from "../../state";
-import { getAppDetailExtension } from "./extensions/registry";
-import { CATEGORY_LABELS, getAppEmoji } from "./helpers";
-
-interface AppDetailPaneProps {
-  app: RegistryAppInfo;
-  busy: boolean;
-  compact?: boolean;
-  hasActiveViewer: boolean;
-  isActive: boolean;
-  onBack: () => void;
-  onLaunch: () => void;
-  onOpenCurrentGame: () => void;
-  onOpenCurrentGameInNewTab: () => void;
-}
-
-export function AppDetailPane({
-  app,
-  busy,
-  compact = false,
-  hasActiveViewer,
-  isActive,
-  onBack,
-  onLaunch,
-  onOpenCurrentGame,
-  onOpenCurrentGameInNewTab,
-}: AppDetailPaneProps) {
-  const { t } = useApp();
-  const DetailExtension = getAppDetailExtension(app);
-
-  if (compact) {
-    return (
-      <div className="phone-inline-detail">
-        <button
-          type="button"
-          className="flex items-center gap-1.5 text-[12px] text-muted hover:text-txt mb-4 cursor-pointer"
-          onClick={onBack}
-        >
-          ← {t("appsview.Back")}
-        </button>
-        <div className="flex items-center gap-3 mb-4">
-          <div className="phone-app-icon-lg">{getAppEmoji(app)}</div>
-          <div className="flex-1 min-w-0">
-            <div className="font-bold text-sm text-txt truncate">
-              {app.displayName ?? app.name}
-            </div>
-            <div className="flex items-center gap-2 mt-0.5">
-              {isActive ? (
-                <span className="text-[10px] font-bold text-ok">
-                  {t("appsview.Active")}
-                </span>
-              ) : (
-                <span className="text-[10px] text-muted">
-                  {t("appsview.Inactive")}
-                </span>
-              )}
-            </div>
-          </div>
-        </div>
-        <div className="text-[12px] text-muted leading-relaxed mb-4">
-          {app.description ?? "No description"}
-        </div>
-        <Button
-          variant="default"
-          size="sm"
-          className="rounded-xl shadow-sm w-full mb-4"
-          disabled={busy}
-          onClick={onLaunch}
-        >
-          {busy ? "Launching..." : "Launch"}
-        </Button>
-        {hasActiveViewer ? (
-          <Button
-            variant="outline"
-            size="sm"
-            className="rounded-xl shadow-sm w-full mb-4"
-            onClick={onOpenCurrentGame}
-          >
-            Resume Session
-          </Button>
-        ) : null}
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div className="mb-4">
-        <Button
-          variant="outline"
-          size="sm"
-          className="rounded-xl shadow-sm"
-          onClick={onBack}
-        >
-          {t("appsview.Back")}
-        </Button>
-      </div>
-
-      <div className="flex items-center gap-4 mb-5">
-        <div className="phone-app-icon-lg">{getAppEmoji(app)}</div>
-        <div className="flex-1 min-w-0">
-          <div className="font-bold text-lg text-txt">
-            {app.displayName ?? app.name}
-          </div>
-          <div className="flex items-center gap-2 mt-1">
-            {isActive ? (
-              <span className="text-[10px] font-bold text-ok">
-                {t("appsview.Active")}
-              </span>
-            ) : (
-              <span className="text-[10px] text-muted">
-                {t("appsview.Inactive")}
-              </span>
-            )}
-            {app.category ? (
-              <span className="text-[10px] px-1.5 py-0.5 rounded-full border border-border text-muted">
-                {CATEGORY_LABELS[app.category] ?? app.category}
-              </span>
-            ) : null}
-            {app.latestVersion ? (
-              <span className="text-[10px] text-muted font-mono">
-                v{app.latestVersion}
-              </span>
-            ) : null}
-          </div>
-        </div>
-      </div>
-
-      <div className="text-[13px] text-muted leading-relaxed mb-5 pb-5 border-b border-border">
-        {app.description ?? "No description available."}
-      </div>
-
-      <div className="flex flex-wrap gap-2 mb-5">
-        <Button
-          variant="default"
-          size="sm"
-          className="rounded-xl shadow-sm px-6"
-          disabled={busy}
-          onClick={onLaunch}
-        >
-          {busy ? "Launching..." : "Launch"}
-        </Button>
-        {hasActiveViewer ? (
-          <>
-            <Button
-              variant="outline"
-              size="sm"
-              className="rounded-xl shadow-sm"
-              onClick={onOpenCurrentGame}
-            >
-              Resume Session
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="rounded-xl shadow-sm"
-              onClick={onOpenCurrentGameInNewTab}
-            >
-              Open in Tab
-            </Button>
-          </>
-        ) : null}
-      </div>
-
-      <div className="flex flex-col gap-3 text-[12px] mb-5">
-        <div className="flex justify-between">
-          <span className="text-muted">Launch type</span>
-          <span className="text-txt">{app.launchType || "—"}</span>
-        </div>
-        {app.launchUrl ? (
-          <div className="flex justify-between">
-            <span className="text-muted">URL</span>
-            <span className="text-txt truncate max-w-[260px]">
-              {app.launchUrl}
-            </span>
-          </div>
-        ) : null}
-        {app.repository ? (
-          <div className="flex justify-between">
-            <span className="text-muted">Repository</span>
-            <a
-              href={app.repository}
-              target="_blank"
-              rel="noreferrer"
-              className="text-accent hover:underline truncate max-w-[260px]"
-            >
-              GitHub
-            </a>
-          </div>
-        ) : null}
-      </div>
-
-      {app.capabilities?.length ? (
-        <div className="mb-5">
-          <div className="text-[11px] text-muted mb-2 font-semibold uppercase tracking-wider">
-            Capabilities
-          </div>
-          <div className="flex flex-wrap gap-1.5">
-            {app.capabilities.map((capability) => (
-              <span
-                key={capability}
-                className="text-[10px] px-2 py-0.5 rounded-full border border-border text-muted"
-              >
-                {capability}
-              </span>
-            ))}
-          </div>
-        </div>
-      ) : null}
-
-      {app.viewer ? (
-        <div className="mb-5 p-3 rounded-xl border border-border bg-surface">
-          <div className="text-[11px] text-muted mb-2 font-semibold uppercase tracking-wider">
-            Viewer
-          </div>
-          <div className="flex flex-col gap-1.5 text-[11px]">
-            <div className="flex justify-between">
-              <span className="text-muted">URL</span>
-              <span className="text-txt truncate max-w-[240px]">
-                {app.viewer.url}
-              </span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-muted">Auth</span>
-              <span className="text-txt">
-                {app.viewer.postMessageAuth ? "enabled" : "disabled"}
-              </span>
-            </div>
-          </div>
-        </div>
-      ) : null}
-
-      {DetailExtension ? (
-        <div className="border-t border-border pt-4">
-          <DetailExtension app={app} />
-        </div>
-      ) : null}
-    </>
-  );
-}