@james-wu/tokenguard-ui

Embeddable UI components for rendering TokenGuard risk alerts, phishing banners, and AI explanation panels inside wallets, browser extensions, exchanges, and security dashboards.

Best for:

• wallet popups and confirmation dialogs
• extension pages and side panels
• exchange or analyst dashboards
• lightweight framework-agnostic embeds

Installation

npm install @james-wu/tokenguard-ui

Links

• Repository: James-Wuguoqing/tokenguard-ai
• Package: npmjs.com/package/@james-wu/tokenguard-ui
• SDK package: npmjs.com/package/@james-wu/tokenguard-sdk
• Embedded widget example: examples/embedded-widget
• Local demo console: demo/index.html

Included

• RiskAlertCard()
• DomainWarningBanner()
• AIExplainPanel()
• clearNode()
• injectTokenGuardStyles()
• tokenGuardBaseStyles

Quick Start

import {
  AIExplainPanel,
  RiskAlertCard,
  injectTokenGuardStyles
} from "@james-wu/tokenguard-ui";

injectTokenGuardStyles();

const riskCard = RiskAlertCard({
  riskLevel: "high",
  title: "High-risk approval detected",
  summary: "This action would allow a third party to spend your tokens.",
  score: 92,
  reasons: ["infinite_approval_detected", "suspicious_origin_domain"],
  actions: ["Cancel the signature", "Switch to an exact approval amount"]
});

const explainPanel = AIExplainPanel({
  title: "Why this matters",
  explanation: "This is not a wallet login request. It is a token approval with long-lived permissions.",
  bullets: ["The spender can move assets later.", "The page origin looks suspicious."],
  caution: "Verify the site and contract before signing."
});

document.body.append(riskCard, explainPanel);

Usage Model

This package renders UI only. It does not fetch risk data by itself.

Typical integration flow:

1. call the TokenGuard API directly or via @james-wu/tokenguard-sdk
2. map the returned risk result into UI props
3. render the corresponding card, banner, or explanation panel

Styling

• Components return plain DOM nodes, which makes the package friendly for lightweight or framework-agnostic embeds.
• Styles are not injected automatically. Call injectTokenGuardStyles() before rendering if you want the default look.
• If you already have a design system, you can reuse the generated structure and replace the styling layer.

Pairing With The SDK

The usual production flow is:

1. fetch a structured risk result with @james-wu/tokenguard-sdk or the HTTP API
2. map that result into UI props
3. render the corresponding card, warning banner, or explanation panel