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

package/src/components/format.ts

@@ -1,131 +0,0 @@
-/**
- * Shared formatting helpers for Eliza app views.
- */
-
-type ByteSizeFormatterOptions = {
-  /**
-   * Fallback string for invalid or negative byte values.
-   */
-  unknownLabel?: string;
-  /**
-   * Precision for KB / MB / GB / TB values.
-   */
-  kbPrecision?: number;
-  mbPrecision?: number;
-  gbPrecision?: number;
-  tbPrecision?: number;
-};
-
-type DateFormatOptions = {
-  /**
-   * Fallback string for empty/invalid dates.
-   */
-  fallback?: string;
-  /**
-   * Optional locale override.
-   */
-  locale?: string;
-};
-
-type DurationFormatOptions = {
-  /**
-   * Fallback string for non-positive/invalid durations.
-   */
-  fallback?: string;
-};
-
-/**
- * Format a byte count in human-readable units.
- */
-export function formatByteSize(
-  bytes: number,
-  options: ByteSizeFormatterOptions = {},
-): string {
-  const {
-    unknownLabel = "unknown",
-    kbPrecision = 1,
-    mbPrecision = 1,
-    gbPrecision = 1,
-    tbPrecision = 1,
-  } = options;
-
-  if (!Number.isFinite(bytes) || bytes < 0) return unknownLabel;
-  if (bytes >= 1024 ** 4) {
-    return `${(bytes / 1024 ** 4).toFixed(tbPrecision)} TB`;
-  }
-  if (bytes >= 1024 ** 3) {
-    return `${(bytes / 1024 ** 3).toFixed(gbPrecision)} GB`;
-  }
-  if (bytes >= 1024 ** 2) {
-    return `${(bytes / 1024 ** 2).toFixed(mbPrecision)} MB`;
-  }
-  if (bytes >= 1024) {
-    return `${(bytes / 1024).toFixed(kbPrecision)} KB`;
-  }
-  return `${bytes} B`;
-}
-
-/**
- * Format timestamp / date for locale display (`toLocaleString`).
- */
-export function formatDateTime(
-  value: number | string | Date | null | undefined,
-  options: DateFormatOptions = {},
-): string {
-  const { fallback = "—", locale } = options;
-  if (value == null || value === "") return fallback;
-  const parsed = value instanceof Date ? value : new Date(value);
-  if (!Number.isFinite(parsed.getTime())) return fallback;
-  return parsed.toLocaleString(locale);
-}
-
-/**
- * Format timestamp / date as locale time only (`toLocaleTimeString`).
- */
-export function formatTime(
-  value: number | string | Date | null | undefined,
-  options: DateFormatOptions = {},
-): string {
-  const { fallback = "—", locale } = options;
-  if (value == null || value === "") return fallback;
-  const parsed = value instanceof Date ? value : new Date(value);
-  if (!Number.isFinite(parsed.getTime())) return fallback;
-  return parsed.toLocaleTimeString(locale);
-}
-
-/**
- * Format timestamp / date as locale date only (`toLocaleDateString`).
- */
-export function formatShortDate(
-  value: number | string | Date | null | undefined,
-  options: DateFormatOptions = {},
-): string {
-  const { fallback = "—", locale } = options;
-  if (value == null || value === "") return fallback;
-  const parsed = value instanceof Date ? value : new Date(value);
-  if (!Number.isFinite(parsed.getTime())) return fallback;
-  return parsed.toLocaleDateString(locale, {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
-}
-
-/**
- * Format an elapsed duration in milliseconds into a compact human string.
- */
-export function formatDurationMs(
-  ms?: number | null,
-  options: DurationFormatOptions = {},
-): string {
-  const { fallback = "—" } = options;
-  if (!ms || ms <= 0) return fallback;
-  if (ms < 60_000) return `${Math.round(ms / 1000)}s`;
-  if (ms < 3_600_000) return `${Math.round(ms / 60_000)}m`;
-  if (ms < 86_400_000) {
-    const hours = ms / 3_600_000;
-    return hours === Math.floor(hours) ? `${hours}h` : `${hours.toFixed(1)}h`;
-  }
-  const days = ms / 86_400_000;
-  return days === Math.floor(days) ? `${days}d` : `${days.toFixed(1)}d`;
-}

package/src/components/index.ts

@@ -1,96 +0,0 @@
-export * from "./ApiKeyConfig";
-export * from "./AdvancedPageView";
-export * from "./AgentActivityBox";
-export * from "./AppsPageView";
-export * from "./AppsView";
-export * from "./AvatarLoader";
-export * from "./AvatarSelector";
-export * from "./avatar/VrmEngine";
-export * from "./avatar/VrmViewer";
-export * from "./BscTradePanel";
-export * from "./BugReportModal";
-export * from "./CharacterRoster";
-export * from "./CharacterView";
-export * from "./ChatAvatar";
-export * from "./ChatComposer";
-export * from "./ChatMessage";
-export * from "./ChatModalView";
-export * from "./ChatView";
-export * from "./CloudSourceControls";
-export * from "./CodingAgentSettingsSection";
-export * from "./CommandPalette";
-export * from "./CompanionSceneHost";
-export * from "./CompanionShell";
-export * from "./CompanionView";
-export * from "./ConfigPageView";
-export * from "./ConfigSaveFooter";
-export * from "./ConfirmModal";
-export * from "./ConnectionFailedBanner";
-export * from "./ConversationsSidebar";
-export * from "./ConnectorsPageView";
-export * from "./confirm-delete-control";
-export * from "./CustomActionEditor";
-export * from "./CustomActionsPanel";
-export * from "./CustomActionsView";
-export * from "./DatabasePageView";
-export * from "./DatabaseView";
-export * from "./ElizaCloudDashboard";
-export * from "./EmotePicker";
-export * from "./ErrorBoundary";
-export * from "./FineTuningView";
-export * from "./format";
-export * from "./GameView";
-export * from "./GameViewOverlay";
-export * from "./GlobalEmoteOverlay";
-export * from "./HeartbeatsView";
-export * from "./Header";
-export * from "./InventoryView";
-export * from "./KnowledgeView";
-export * from "./knowledge-upload-image";
-export * from "./LanguageDropdown";
-export * from "./LifoMonitorPanel";
-export * from "./LifoSandboxView";
-export * from "./LoadingScreen";
-export * from "./LogsPageView";
-export * from "./LogsView";
-export * from "./labels";
-export * from "./MediaGalleryView";
-export * from "./MiladyBar";
-export * from "./MediaSettingsSection";
-export * from "./MessageContent";
-export * from "./ElizaCloudDashboard";
-export * from "./OnboardingWizard";
-export * from "./PairingView";
-export * from "./PermissionsSection";
-export * from "./PluginsPageView";
-export * from "./PluginsView";
-export * from "./ProviderSwitcher";
-export * from "./RestartBanner";
-export * from "./RuntimeView";
-export * from "./SaveCommandModal";
-export * from "./SecretsView";
-export * from "./SettingsView";
-export * from "./ShellOverlays";
-export * from "./ShortcutsOverlay";
-export * from "./SkillsView";
-export * from "./StartupFailureView";
-export * from "./StreamView";
-export * from "./SubscriptionStatus";
-export * from "./SystemWarningBanner";
-export { useSharedCompanionScene } from "./shared-companion-scene-context";
-export * from "./skeletons";
-export * from "./ThemeToggle";
-export * from "./TriggersView";
-export * from "./TrajectoriesView";
-export * from "./TrajectoryDetailView";
-export * from "./trajectory-format";
-export * from "./ui-badges";
-export * from "./ui-switch";
-export * from "./VectorBrowserView";
-export * from "./VoiceConfigView";
-export * from "./VrmStage";
-export * from "./WhatsAppQrOverlay";
-export * from "./chainConfig";
-export * from "./companion-shell-styles";
-export * from "./conversations/ConversationListItem";
-export * from "./conversations/conversation-utils";

package/src/components/inventory/CopyableAddress.tsx

@@ -1,41 +0,0 @@
-/**
- * Truncated wallet address with a copy button.
- */
-
-import { useTimeout } from "@elizaos/app-core/hooks";
-import { Button } from "@elizaos/ui";
-import { useState } from "react";
-
-export function CopyableAddress({
-  address,
-  onCopy,
-}: {
-  address: string;
-  onCopy: (text: string) => Promise<void>;
-}) {
-  const { setTimeout } = useTimeout();
-  const [copied, setCopied] = useState(false);
-  const short = `${address.slice(0, 6)}...${address.slice(-4)}`;
-
-  const handleCopy = async () => {
-    await onCopy(address);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  };
-
-  return (
-    <div className="flex items-center gap-1.5 shrink-0">
-      <code className="font-mono text-xs text-muted select-all" title={address}>
-        {short}
-      </code>
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={handleCopy}
-        className="h-6 px-1.5 py-0.5 border-border bg-bg text-[10px] font-mono shadow-sm hover:border-accent hover:text-txt"
-      >
-        {copied ? "copied" : "copy"}
-      </Button>
-    </div>
-  );
-}

package/src/components/inventory/InventoryToolbar.tsx

@@ -1,142 +0,0 @@
-/**
- * Unified wallet header row: total, view toggle, chain filter, sort, refresh.
- */
-
-import type {
-  WalletBalancesResponse,
-  WalletNftsResponse,
-} from "@elizaos/app-core/api";
-import type { createTranslator } from "@elizaos/app-core/i18n";
-import type { AppState } from "@elizaos/app-core/state";
-import { Button } from "@elizaos/ui";
-import { CHAIN_CONFIGS, PRIMARY_CHAIN_KEYS } from "../chainConfig";
-
-type InventoryToolbarStateKey = "inventoryView" | "inventorySort";
-type InventorySort = AppState["inventorySort"];
-type InventoryView = AppState["inventoryView"];
-
-function isInventorySort(value: string): value is InventorySort {
-  return value === "value" || value === "chain" || value === "symbol";
-}
-
-export interface InventoryToolbarProps {
-  t: ReturnType<typeof createTranslator>;
-  totalUsd: number;
-  inventoryView: InventoryView;
-  inventorySort: InventorySort;
-  chainFocus: string;
-  walletBalances: WalletBalancesResponse | null;
-  walletNfts: WalletNftsResponse | null;
-  setState: <K extends InventoryToolbarStateKey>(
-    key: K,
-    value: AppState[K],
-  ) => void;
-  onChainChange: (chain: string) => void;
-  loadBalances: () => Promise<void> | void;
-  loadNfts: () => Promise<void> | void;
-}
-
-export function InventoryToolbar({
-  t,
-  totalUsd,
-  inventoryView,
-  inventorySort,
-  chainFocus,
-  walletBalances,
-  walletNfts,
-  setState,
-  onChainChange,
-  loadBalances,
-  loadNfts,
-}: InventoryToolbarProps) {
-  return (
-    <div className="flex flex-wrap items-center gap-2 border-b border-border pb-3">
-      <div
-        className="mr-auto text-[22px] font-bold text-txt-strong"
-        data-testid="wallet-balance-value"
-      >
-        {totalUsd > 0
-          ? `$${totalUsd.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
-          : "$0.00"}
-      </div>
-
-      <div className="flex items-center gap-1">
-        <button
-          type="button"
-          data-testid="wallet-view-tokens"
-          className={`h-8 border-b-2 px-2 text-xs font-medium cursor-pointer ${
-            inventoryView === "tokens"
-              ? "border-accent text-txt-strong"
-              : "border-transparent text-muted hover:text-txt"
-          }`}
-          onClick={() => {
-            setState("inventoryView", "tokens");
-            if (!walletBalances) void loadBalances();
-          }}
-        >
-          {t("wallet.tokens")}
-        </button>
-        <button
-          type="button"
-          data-testid="wallet-view-nfts"
-          className={`h-8 border-b-2 px-2 text-xs font-medium cursor-pointer ${
-            inventoryView === "nfts"
-              ? "border-accent text-txt-strong"
-              : "border-transparent text-muted hover:text-txt"
-          }`}
-          onClick={() => {
-            setState("inventoryView", "nfts");
-            if (!walletNfts) void loadNfts();
-          }}
-        >
-          {t("wallet.nfts")}
-        </button>
-      </div>
-
-      <select
-        data-testid="wallet-chain-select"
-        aria-label={t("wallet.chain")}
-        className="h-8 min-w-32 border border-border bg-bg px-2.5 text-xs text-txt"
-        value={chainFocus}
-        onChange={(event) => onChainChange(event.target.value)}
-      >
-        <option value="all">{t("wallet.all")}</option>
-        {PRIMARY_CHAIN_KEYS.map((key) => (
-          <option key={key} value={key}>
-            {CHAIN_CONFIGS[key].name}
-          </option>
-        ))}
-      </select>
-
-      {inventoryView === "tokens" && (
-        <select
-          data-testid="wallet-sort-select"
-          aria-label={t("wallet.sort")}
-          className="h-8 min-w-28 border border-border bg-bg px-2.5 text-xs text-txt"
-          value={inventorySort}
-          onChange={(event) => {
-            const nextSort = event.target.value;
-            if (isInventorySort(nextSort)) {
-              setState("inventorySort", nextSort);
-            }
-          }}
-        >
-          <option value="value">{t("wallet.value")}</option>
-          <option value="chain">{t("wallet.chain")}</option>
-          <option value="symbol">{t("wallet.name")}</option>
-        </select>
-      )}
-
-      <Button
-        variant="outline"
-        size="sm"
-        className="h-8 px-3 text-xs shadow-sm hover:border-accent hover:text-txt"
-        onClick={() =>
-          inventoryView === "tokens" ? loadBalances() : loadNfts()
-        }
-      >
-        {t("appsview.Refresh")}
-      </Button>
-    </div>
-  );
-}

package/src/components/inventory/NftGrid.tsx

@@ -1,99 +0,0 @@
-/**
- * NFT gallery grid with lazy-loaded images.
- */
-
-import type { createTranslator } from "@elizaos/app-core/i18n";
-import { useState } from "react";
-import { chainIcon, type NftItem } from "./constants";
-import { normalizeInventoryImageUrl } from "./media-url";
-
-export interface NftGridProps {
-  t: ReturnType<typeof createTranslator>;
-  walletNftsLoading: boolean;
-  walletNfts: unknown;
-  allNfts: NftItem[];
-}
-
-export function NftGrid({
-  t,
-  walletNftsLoading,
-  walletNfts,
-  allNfts,
-}: NftGridProps) {
-  const [failedImages, setFailedImages] = useState<Set<string>>(new Set());
-
-  if (walletNftsLoading) {
-    return (
-      <div className="flex flex-1 items-center justify-center text-center text-muted italic text-xs">
-        {t("wallet.loadingNfts")}
-      </div>
-    );
-  }
-  if (!walletNfts) {
-    return (
-      <div className="flex flex-1 items-center justify-center text-center text-muted italic text-xs">
-        {t("wallet.noNftData")}
-      </div>
-    );
-  }
-  if (allNfts.length === 0) {
-    return (
-      <div className="flex flex-1 items-center justify-center text-center text-muted italic text-xs">
-        {t("wallet.noNftsFound")}
-      </div>
-    );
-  }
-
-  return (
-    <div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-2.5 overflow-y-auto">
-      {allNfts.map((nft, idx) => {
-        const icon = chainIcon(nft.chain);
-        const key = `${nft.chain}-${nft.name}-${idx}`;
-        const normalizedImageUrl = normalizeInventoryImageUrl(nft.imageUrl);
-        const showImage = Boolean(normalizedImageUrl) && !failedImages.has(key);
-        return (
-          <div
-            key={key}
-            className="border border-border bg-card overflow-hidden"
-          >
-            {showImage ? (
-              <img
-                src={normalizedImageUrl ?? ""}
-                alt={nft.name}
-                loading="lazy"
-                className="w-full h-[150px] object-cover block bg-bg-muted"
-                onError={() => {
-                  setFailedImages((prev) => {
-                    const next = new Set(prev);
-                    next.add(key);
-                    return next;
-                  });
-                }}
-              />
-            ) : (
-              <div className="w-full h-[150px] bg-bg-muted flex items-center justify-center text-[11px] text-muted">
-                {t("wallet.noImage")}
-              </div>
-            )}
-            <div className="px-2 py-1.5">
-              <div className="text-[11px] font-bold overflow-hidden text-ellipsis whitespace-nowrap">
-                {nft.name}
-              </div>
-              <div className="text-[10px] text-muted overflow-hidden text-ellipsis whitespace-nowrap">
-                {nft.collectionName}
-              </div>
-              <div className="inline-flex items-center gap-1 text-[10px] text-muted mt-0.5">
-                <span
-                  className={`inline-block w-3 h-3 rounded-full text-center leading-3 text-[7px] font-bold font-mono text-white ${icon.cls}`}
-                >
-                  {icon.code}
-                </span>
-                {nft.chain}
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/inventory/TokenLogo.tsx

@@ -1,71 +0,0 @@
-/**
- * Token logo with CDN image + letter-fallback.
- */
-
-import { useState } from "react";
-import { getContractLogoUrl, getNativeLogoUrl } from "../chainConfig";
-import { chainIcon } from "./constants";
-import { normalizeInventoryImageUrl } from "./media-url";
-
-/* ── Logo URL resolver ──────────────────────────────────────────────── */
-
-export function tokenLogoUrl(
-  chain: string,
-  contractAddress: string | null,
-): string | null {
-  if (!contractAddress) {
-    // Use chain config for native logo resolution
-    return getNativeLogoUrl(chain);
-  }
-  // Use chain config for contract logo resolution (TrustWallet CDN)
-  return getContractLogoUrl(chain, contractAddress);
-}
-
-/* ── Component ──────────────────────────────────────────────────────── */
-
-export function TokenLogo({
-  symbol,
-  chain,
-  contractAddress,
-  preferredLogoUrl = null,
-  size = 32,
-}: {
-  symbol: string;
-  chain: string;
-  contractAddress: string | null;
-  preferredLogoUrl?: string | null;
-  size?: number;
-}) {
-  const [errored, setErrored] = useState(false);
-  const preferredResolved = normalizeInventoryImageUrl(preferredLogoUrl);
-  const defaultResolved = normalizeInventoryImageUrl(
-    tokenLogoUrl(chain, contractAddress),
-  );
-  const url = errored
-    ? null
-    : preferredResolved
-      ? preferredResolved
-      : defaultResolved;
-  const icon = chainIcon(chain);
-
-  if (url) {
-    return (
-      <img
-        src={url}
-        alt={symbol}
-        width={size}
-        height={size}
-        className="wt__token-logo"
-        onError={() => setErrored(true)}
-      />
-    );
-  }
-  return (
-    <span
-      className={`wt__token-logo is-letter ${icon.cls}`}
-      style={{ width: size, height: size, fontSize: size * 0.38 }}
-    >
-      {symbol.charAt(0).toUpperCase()}
-    </span>
-  );
-}