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

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/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>
-  );
-}

package/src/components/inventory/TokensTable.tsx

@@ -1,216 +0,0 @@
-/**
- * Token balance table with per-chain error notices.
- */
-
-import type { EvmChainBalance } from "@elizaos/app-core/api";
-import type { createTranslator } from "@elizaos/app-core/i18n";
-import { Button } from "@elizaos/ui";
-import { chainIcon, formatBalance, type TokenRow } from "./constants";
-import { TokenLogo } from "./TokenLogo";
-
-interface WalletCopyAddress {
-  label: string;
-  address: string;
-}
-
-export interface TokensTableProps {
-  t: ReturnType<typeof createTranslator>;
-  walletLoading: boolean;
-  walletBalances: unknown;
-  visibleRows: TokenRow[];
-  visibleChainErrors: EvmChainBalance[];
-  inventoryChainFocus: string;
-  addresses: WalletCopyAddress[];
-  onCopyAddress: (address: string) => Promise<void> | void;
-  handleUntrackToken: (address: string) => void;
-}
-
-export function TokensTable({
-  t,
-  walletLoading,
-  walletBalances,
-  visibleRows,
-  visibleChainErrors,
-  inventoryChainFocus,
-  addresses,
-  onCopyAddress,
-  handleUntrackToken,
-}: TokensTableProps) {
-  const renderChainErrors = () =>
-    visibleChainErrors.length > 0 ? (
-      <div className="mt-1 text-[11px] text-muted px-3 pb-2">
-        {visibleChainErrors.map((chain: EvmChainBalance) => {
-          const icon = chainIcon(chain.chain);
-          return (
-            <div key={chain.chain} className="py-0.5">
-              <span
-                className={`inline-block w-3 h-3 rounded-full text-center leading-3 text-[7px] font-bold font-mono text-white align-middle ${icon.cls}`}
-              >
-                {icon.code}
-              </span>{" "}
-              {chain.chain}:{" "}
-              {chain.error?.includes("not enabled") ? (
-                <>
-                  data source not enabled &mdash;{" "}
-                  <a
-                    href="https://dashboard.alchemy.com/"
-                    target="_blank"
-                    rel="noopener"
-                    className="text-txt"
-                  >
-                    {t("wallet.enableIt")}
-                  </a>
-                </>
-              ) : (
-                chain.error
-              )}
-            </div>
-          );
-        })}
-      </div>
-    ) : null;
-
-  if (walletLoading) {
-    return (
-      <div className="text-center py-10 text-muted italic text-xs">
-        {t("wallet.loadingBalances")}
-      </div>
-    );
-  }
-
-  if (visibleRows.length === 0) {
-    return (
-      <div className="flex flex-1 flex-col items-center justify-center gap-4 px-4 text-center">
-        <div className="max-w-md space-y-2">
-          <div className="text-base font-medium text-txt-strong">
-            {walletBalances
-              ? t("wallet.noTokensFound")
-              : t("wallet.noDataRefresh")}
-          </div>
-          <div className="text-xs text-muted">{t("wallet.emptyTokensCta")}</div>
-        </div>
-        {addresses.length > 0 && (
-          <div className="flex flex-wrap items-center justify-center gap-2">
-            {addresses.map((item) => (
-              <Button
-                key={`${item.label}-${item.address}`}
-                variant="outline"
-                size="sm"
-                data-testid={`wallet-copy-${item.label.toLowerCase()}-address`}
-                className="h-8 px-3 text-xs shadow-sm hover:border-accent hover:text-txt"
-                onClick={() => void onCopyAddress(item.address)}
-              >
-                {item.label === "EVM"
-                  ? t("wallet.copyEvmAddress")
-                  : t("wallet.copySolanaAddress")}
-              </Button>
-            ))}
-          </div>
-        )}
-        {renderChainErrors()}
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <table className="w-full border-collapse">
-        <thead>
-          <tr className="border-b border-border">
-            <th className="pl-3 pr-2 py-2 text-left w-12" />
-            <th className="px-3 py-2 text-left text-[10px] text-muted font-bold uppercase tracking-wide">
-              {t("wallet.table.token")}
-            </th>
-            <th className="px-3 py-2 text-right text-[10px] text-muted font-bold uppercase tracking-wide">
-              {t("wallet.table.balance")}
-            </th>
-            <th className="px-3 py-2 text-right text-[10px] text-muted font-bold uppercase tracking-wide">
-              {t("wallet.value")}
-            </th>
-            <th className="pl-3 pr-3 py-2 text-right w-24" />
-          </tr>
-        </thead>
-        <tbody>
-          {visibleRows.map((row) => {
-            const contractAddress = row.contractAddress;
-            return (
-              <tr
-                key={`${row.chain}-${row.symbol}-${row.contractAddress ?? ""}`}
-                className="border-b border-border last:border-b-0 hover:bg-bg-hover transition-colors"
-              >
-                {/* Logo */}
-                <td className="pl-3 pr-2 py-3 align-middle">
-                  <TokenLogo
-                    symbol={row.symbol}
-                    chain={row.chain}
-                    contractAddress={contractAddress}
-                    preferredLogoUrl={row.logoUrl}
-                    size={32}
-                  />
-                </td>
-                {/* Symbol + name */}
-                <td className="px-3 py-3 align-middle">
-                  <div className="flex items-center gap-2">
-                    <div>
-                      <div className="text-sm font-bold font-mono leading-tight">
-                        {row.symbol}
-                      </div>
-                      <div className="text-[10px] text-muted leading-tight mt-0.5">
-                        {row.isNative ? (
-                          <span className="text-[9px] bg-accent/15 text-accent px-1 py-0.5 rounded">
-                            {t("tokenstable.nativeGas")}
-                          </span>
-                        ) : (
-                          <span className="inline-flex items-center gap-1">
-                            <span className="truncate max-w-[160px] inline-block">
-                              {row.name}
-                            </span>
-                            {row.isTracked && (
-                              <span className="text-[9px] bg-accent/15 text-accent px-1 py-0.5 rounded">
-                                {t("wallet.manual")}
-                              </span>
-                            )}
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                    {inventoryChainFocus === "all" && (
-                      <span className="text-[9px] text-muted font-mono border border-border px-1 py-0.5 rounded shrink-0">
-                        {row.chain}
-                      </span>
-                    )}
-                  </div>
-                </td>
-                {/* Balance */}
-                <td className="px-3 py-3 align-middle font-mono text-sm text-right whitespace-nowrap">
-                  {formatBalance(row.balance)}
-                </td>
-                {/* Value */}
-                <td className="px-3 py-3 align-middle font-mono text-sm text-right text-muted whitespace-nowrap">
-                  {row.valueUsd > 0
-                    ? `$${row.valueUsd.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
-                    : "\u2014"}
-                </td>
-                {/* Actions */}
-                <td className="pl-2 pr-3 py-3 align-middle whitespace-nowrap text-right">
-                  {row.isTracked && contractAddress && (
-                    <button
-                      type="button"
-                      data-testid="wallet-token-untrack"
-                      className="text-[10px] text-danger hover:underline cursor-pointer bg-transparent border-none p-0"
-                      title={t("wallet.removeManualTitle")}
-                      onClick={() => handleUntrackToken(contractAddress)}
-                    >
-                      {t("wallet.remove")}
-                    </button>
-                  )}
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-      {renderChainErrors()}
-    </>
-  );
-}