@elizaos/app-core 2.0.0-alpha.37

package/src/components/inventory/InventoryToolbar.tsx

@@ -0,0 +1,142 @@
+/**
+ * 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

@@ -0,0 +1,99 @@
+/**
+ * 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

@@ -0,0 +1,71 @@
+/**
+ * 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

@@ -0,0 +1,216 @@
+/**
+ * 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, idx) => {
+            const contractAddress = row.contractAddress;
+            return (
+              <tr
+                key={`${row.chain}-${row.symbol}-${idx}`}
+                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()}
+    </>
+  );
+}

package/src/components/inventory/constants.ts

@@ -0,0 +1,170 @@
+/**
+ * Shared constants, types, and utility helpers for the Inventory feature.
+ */
+
+/* ── Constants ──────────────────────────────────────────────────────── */
+
+export const BSC_GAS_READY_THRESHOLD = 0.005;
+export const BSC_GAS_THRESHOLD = 0.005;
+export const TRACKED_BSC_TOKENS_KEY = "wt_tracked_bsc_tokens";
+export const MAX_TRACKED_BSC_TOKENS = 30;
+export const HEX_ADDRESS_RE = /^0x[a-fA-F0-9]{40}$/;
+
+/* ── Row types ──────────────────────────────────────────────────────── */
+
+export interface TokenRow {
+  chain: string;
+  symbol: string;
+  name: string;
+  contractAddress: string | null;
+  logoUrl: string | null;
+  balance: string;
+  valueUsd: number;
+  balanceRaw: number;
+  isNative: boolean;
+  isTracked?: boolean;
+}
+
+export interface NftItem {
+  chain: string;
+  name: string;
+  imageUrl: string;
+  collectionName: string;
+}
+
+export interface TrackedBscToken {
+  contractAddress: string;
+  symbol: string;
+  name: string;
+  logoUrl?: string;
+}
+
+export interface TrackedToken {
+  address: string;
+  symbol: string;
+  addedAt: number;
+}
+
+/* ── Chain helpers ───────────────────────────────────────────────────── */
+
+export function chainIcon(chain: string): { code: string; cls: string } {
+  const c = chain.toLowerCase();
+  if (c === "ethereum" || c === "mainnet")
+    return { code: "E", cls: "bg-chain-eth" };
+  if (c === "base") return { code: "B", cls: "bg-chain-base" };
+  if (c === "bsc" || c === "bnb chain" || c === "bnb smart chain")
+    return { code: "B", cls: "bg-chain-bsc" };
+  if (
+    c === "avax" ||
+    c === "avalanche" ||
+    c === "c-chain" ||
+    c === "avalanche c-chain"
+  )
+    return { code: "A", cls: "bg-chain-avax" };
+  if (c === "arbitrum") return { code: "A", cls: "bg-chain-arb" };
+  if (c === "optimism") return { code: "O", cls: "bg-chain-op" };
+  if (c === "polygon") return { code: "P", cls: "bg-chain-pol" };
+  if (c === "solana") return { code: "S", cls: "bg-chain-sol" };
+  return { code: chain.charAt(0).toUpperCase(), cls: "bg-bg-muted" };
+}
+
+export function normalizeChainName(chain: string): string {
+  return chain.trim().toLowerCase();
+}
+
+export function isBscChainName(chain: string): boolean {
+  const c = normalizeChainName(chain);
+  return c === "bsc" || c === "bnb chain" || c === "bnb smart chain";
+}
+
+export function isAvaxChainName(chain: string): boolean {
+  const c = normalizeChainName(chain);
+  return (
+    c === "avax" ||
+    c === "avalanche" ||
+    c === "c-chain" ||
+    c === "avalanche c-chain"
+  );
+}
+
+/* ── Balance formatter ──────────────────────────────────────────────── */
+
+export function formatBalance(balance: string): string {
+  const num = Number.parseFloat(balance);
+  if (Number.isNaN(num)) return balance;
+  if (num === 0) return "0";
+  if (num < 0.0001) return "<0.0001";
+  if (num < 1) return num.toFixed(6);
+  if (num < 1000) return num.toFixed(4);
+  return num.toLocaleString("en-US", { maximumFractionDigits: 2 });
+}
+
+/* ── Address helpers ────────────────────────────────────────────────── */
+
+export function toNormalizedAddress(addr: string): string {
+  return addr.trim().toLowerCase();
+}
+
+/* ── localStorage helpers for tracked BSC tokens ────────────────────── */
+
+export function loadTrackedBscTokens(): TrackedBscToken[] {
+  try {
+    const raw = localStorage.getItem(TRACKED_BSC_TOKENS_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .filter(
+        (item): item is TrackedBscToken =>
+          Boolean(item) &&
+          typeof item === "object" &&
+          typeof item.contractAddress === "string" &&
+          typeof item.symbol === "string" &&
+          typeof item.name === "string" &&
+          (item.logoUrl === undefined || typeof item.logoUrl === "string") &&
+          HEX_ADDRESS_RE.test(item.contractAddress),
+      )
+      .slice(0, MAX_TRACKED_BSC_TOKENS);
+  } catch {
+    return [];
+  }
+}
+
+export function saveTrackedBscTokens(next: TrackedBscToken[]): void {
+  try {
+    localStorage.setItem(TRACKED_BSC_TOKENS_KEY, JSON.stringify(next));
+  } catch {
+    /* ignore */
+  }
+}
+
+export function removeTrackedBscToken(
+  contractAddress: string,
+  prev: TrackedBscToken[],
+): TrackedBscToken[] {
+  const normalized = toNormalizedAddress(contractAddress);
+  const next = prev.filter(
+    (item) => toNormalizedAddress(item.contractAddress) !== normalized,
+  );
+  saveTrackedBscTokens(next);
+  return next;
+}
+
+/* ── localStorage helpers for tracked tokens (TradePanel) ───────────── */
+
+export function loadTrackedTokens(): TrackedToken[] {
+  try {
+    const raw = localStorage.getItem(TRACKED_BSC_TOKENS_KEY);
+    if (!raw) return [];
+    return JSON.parse(raw) as TrackedToken[];
+  } catch {
+    return [];
+  }
+}
+
+export function saveTrackedTokens(tokens: TrackedToken[]): void {
+  try {
+    localStorage.setItem(TRACKED_BSC_TOKENS_KEY, JSON.stringify(tokens));
+  } catch {
+    // ignore in non-browser test runtime
+  }
+}