Skip to Content
Packages@cfxdevkit/ui

@cfxdevkit/ui

Tailwind-first reusable Conflux UI primitives built on @cfxdevkit/ui-core.

Install

pnpm add @cfxdevkit/ui

Tailwind-first reusable Conflux UI components built on @cfxdevkit/ui-core.

Setup

  • Ensure the consuming app already compiles Tailwind utility classes.
  • Include @cfxdevkit/ui in the app’s Tailwind source scan (e.g., via content: ["../node_modules/@cfxdevkit/ui/dist/**/*"]).
  • Provide the wagmi WalletProvider context before rendering wallet or network components.
  • Use app-level wrappers for product-specific copy, layout, or auth flows.
@import "tailwindcss";
@source "../node_modules/@cfxdevkit/ui/dist";
 
@theme {
  --color-brand-500: #22c55e;
  --color-brand-600: #16a34a;
  --radius-panel: 1.25rem;
  --font-ui: "Satoshi", sans-serif;
}

Default theming

  • Components ship with Tailwind utility classes only.
  • No component-local CSS files or inline style objects are allowed in this package.
  • Consumers customize visuals with className, slot-level class props (e.g., activeOptionClassName, buttonClassName), or wrappers.

Current surfaces

Sub-pathExports
.AppShell, Topbar, MainGrid, AssetConversionPanel, Field, IconButton, Metric, NetworkSwitchNotice, Notice, Panel, PanelBody, SegmentedControl, StatusGrid, TokenAmountField, TokenPairSelector, TokenSelect, WalletButton, WalletPickerModal, WalletProviderCard, WalletStatusChip
./shellAppShell, Topbar, MainGrid
./panelPanel, PanelBody, AssetConversionPanel
./formField, TokenAmountField, TokenPairSelector, TokenSelect, SegmentedControl, IconButton
./data-displayMetric, StatusGrid
./feedbackNotice, NetworkSwitchNotice
./walletWalletButton, WalletPickerModal, WalletProviderCard, WalletStatusChip

Usage

import {
  Field,
  IconButton,
  Metric,
  NetworkSwitchNotice,
  Notice,
  SegmentedControl,
  StatusGrid,
  TokenAmountField,
  WalletButton,
} from '@cfxdevkit/ui';
 
export function SwapHeader({ chainId, tokens }: { chainId: number; tokens: Array<{ address: string; symbol: string }> }) {
  return (
    <div className="space-y-4">
      <SegmentedControl
        value="testnet"
        onChange={() => undefined}
        options={[
          { label: 'Mainnet', value: 'mainnet' },
          { label: 'Testnet', value: 'testnet' },
        ]}
      />
      <WalletButton className="w-full" connectLabel="Connect eSpace wallet" />
      <NetworkSwitchNotice chainName="Conflux eSpace" expectedChainId={chainId} />
      <Notice tone="warning">Product copy and auth gating stay in your wrapper layer.</Notice>
      <TokenAmountField
        amount=""
        onAmountChange={() => undefined}
        onTokenChange={() => undefined}
        tokens={tokens}
        tokenValue={tokens[0]?.address ?? ''}
      />
      <Field label="RPC endpoint" hint="Validation and persistence stay app-level.">
        <input className="rounded-xl border border-slate-700 bg-slate-950 px-3 py-2" />
      </Field>
      <StatusGrid columns={2}>
        <Metric label="Portfolio" value="$12.4k" delta="+4.2%" />
        <Metric label="Gas budget" value="$42.80" />
      </StatusGrid>
    </div>
  );
}

Customization example

function PortfolioHeader() {
  return (
    <div className="rounded-[1.5rem] border border-emerald-400/20 bg-slate-950/90 p-5">
      <SegmentedControl
        className="bg-slate-900/80"
        activeOptionClassName="bg-emerald-400 text-slate-950"
        options={[
          { label: 'Mainnet', value: 'mainnet' },
          { label: 'Testnet', value: 'testnet' },
        ]}
        onChange={() => undefined}
        value="testnet"
      />
      <WalletButton
        connectLabel="Connect portfolio"
        disconnectedClassName="bg-emerald-400 text-slate-950 hover:bg-emerald-300"
      />
      <Notice tone="warning" className="mt-4 border-amber-300/20 bg-amber-300/10 text-amber-50">
        Product-specific messaging stays local while the shared package owns the shell styling.
      </Notice>
    </div>
  );
}

Boundary

  • @cfxdevkit/ui owns reusable styled wallet status, wallet selection, segmented-control, network notice, and token-selection surfaces.
  • @cfxdevkit/wallet-connect/ui remains only for legacy consumers that have not yet moved to the shared ui package.
  • Product-specific auth, session, and orchestration UI stays in app-level wrappers.

API Reference

See API.md for the full public surface.

Tier

Tier 0 — framework — Must not runtime-import from any higher tier.

API Reference

.

// Package name identifier for runtime introspection.
export declare const __packageName: "@cfxdevkit/ui";
 
// Root layout shell component providing consistent app structure (topbar, sidebar, main grid).
export interface AppShellProps {
  children: React.ReactNode;
}
 
// Props for the top navigation bar.
export interface TopbarProps {
  brand: React.ReactNode;
  actions: React.ReactNode;
}
 
// Props for the main content grid layout.
export interface MainGridProps {
  sidebar?: React.ReactNode;
  children: React.ReactNode;
}
 
// Panel for asset conversion flows (swap, wrap/unwrap).
export interface AssetConversionPanelProps {
  amount: string;
  amountLabel?: string;
  busy?: boolean;
  className?: string;
  error?: string;
  fromAssetLabel?: string;
  maxAmountLabel?: string;
  mode: 'swap' | 'wrap' | 'unwrap';
  onAmountChange: (value: string) => void;
  onMax?: () => void;
  onModeChange: (mode: 'swap' | 'wrap' | 'unwrap') => void;
  onSubmit: () => void;
  submitLabel?: string;
  success?: boolean;
  title?: string;
  toAssetLabel?: string;
  wrapLabel?: string;
  unwrapLabel?: string;
}
 
// Generic labeled input field wrapper with optional hint and required indicator.
export interface FieldProps {
  children: React.ReactNode;
  className?: string;
  contentClassName?: string;
  hint?: string;
  label?: string;
  labelClassName?: string;
  required?: boolean;
}
 
// Compact metric display showing value and optional delta.
export interface MetricProps {
  className?: string;
  delta?: string;
  deltaClassName?: string;
  label: string;
  labelClassName?: string;
  value: string | number;
  valueClassName?: string;
}
 
// Notice prompting user to switch networks in their wallet.
export interface NetworkSwitchNoticeProps {
  addChainParams?: {
    chainId: string;
    chainName: string;
    nativeCurrency: { name: string; symbol: string; decimals: number };
    rpcUrls: string[];
    blockExplorerUrls?: string[];
  };
  buttonClassName?: string;
  chainName: string;
  className?: string;
  expectedChainId: string;
  message?: string;
  preview?: boolean;
}
 
// Generic dismissible notice component with tone-based styling.
export interface NoticeProps {
  children: React.ReactNode;
  className?: string;
  tone: NoticeTone;
}
 
// Generic panel container with optional title, icon, and actions bar.
export interface PanelProps {
  title?: string;
  icon?: React.ReactNode;
  actions?: React.ReactNode;
  children: React.ReactNode;
}
 
// Body content wrapper for panels.
export interface PanelBodyProps {
  children: React.ReactNode;
}
 
// Option type for segmented control.
export interface SegmentedControlOption<TValue extends string = string> {
  label: string;
  value: TValue;
}
 
// Segmented control for mutually exclusive selection.
export interface SegmentedControlProps<TValue extends string = string> {
  activeOptionClassName?: string;
  className?: string;
  inactiveOptionClassName?: string;
  onChange: (value: TValue) => void;
  optionClassName?: string;
  options: SegmentedControlOption<TValue>[];
  value: TValue;
}
 
// Grid layout for status indicators.
export interface StatusGridProps {
  children: React.ReactNode;
  className?: string;
  columns?: number;
}
 
// Token amount input with balance display and token selection.
export interface TokenAmountFieldProps<TToken extends TokenSelectOption = TokenSelectOption> {
  amount: string;
  amountClassName?: string;
  balance?: string;
  className?: string;
  label?: string;
  onAmountChange: (value: string) => void;
  onTokenChange: (token: TToken) => void;
  tokens: TToken[];
  tokenValue?: TToken;
}
 
// Token pair selector for input/output token selection with swap affordance.
export interface TokenPairSelectorProps<TToken extends TokenSelectOption = TokenSelectOption> {
  className?: string;
  inputOptions: TToken[];
  onSwap?: () => void;
  onTokenInChange: (token: TToken) => void;
  onTokenOutChange: (token: TToken) => void;
  outputOptions: TToken[];
  tokenInValue?: TToken;
  tokenOutValue?: TToken;
}
 
// Token option shape used across token selection components.
export interface TokenSelectOption {
  symbol: string;
  name: string;
  address?: string;
  decimals?: number;
  icon?: string;
}
 
// Token dropdown selector with customizable label and options.
export interface TokenSelectProps<TToken extends TokenSelectOption = TokenSelectOption> {
  className?: string;
  disabled?: boolean;
  getOptionLabel?: (option: TToken) => string;
  onChange: (token: TToken) => void;
  options: TToken[];
  selectClassName?: string;
  value?: TToken;
}
 
// Wallet connection button with dynamic state labels.
export interface WalletButtonProps {
  className?: string;
  connectLabel?: string;
  connectedClassName?: string;
  disconnectedClassName?: string;
  disconnectLabel?: string;
}
 
// Modal for selecting a wallet provider.
export interface WalletPickerModalProps {
  open: boolean;
  onClose: () => void;
  section?: 'all' | 'popular' | 'other';
}
 
// Card displaying wallet provider status and actions.
export interface WalletProviderCardProps {
  account?: string;
  actions?: React.ReactNode;
  chainLabel?: string;
  className?: string;
  connectLabel?: string;
  connectPending?: boolean;
  error?: string;
  onConnect?: () => void;
  onDisconnect?: () => void;
  providerDescription?: string;
  providerPresent?: boolean;
  space?: string;
  status: WalletProviderCardStatus;
  title: string;
}
 
// Small badge showing wallet connection status and address.
export interface WalletStatusChipProps {
  address?: string;
  className?: string;
  status: WalletStatusChipState;
}
 
// Renders the full app shell layout.
export declare function AppShell({ children }: AppShellProps): import("react/jsx-runtime").JSX.Element;
 
// Renders the top navigation bar with brand and actions.
export declare function Topbar({ brand, actions }: TopbarProps): import("react/jsx-runtime").JSX.Element;
 
// Renders the main content grid with optional sidebar.
export declare function MainGrid({ sidebar, children }: MainGridProps): import("react/jsx-runtime").JSX.Element;
 
// Renders the asset conversion panel with full flow support.
export declare function AssetConversionPanel({ amount, amountLabel, busy, className, error, fromAssetLabel, maxAmountLabel, mode, onAmountChange, onMax, onModeChange, onSubmit, submitLabel, success, title, toAssetLabel, wrapLabel, unwrapLabel, }: AssetConversionPanelProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a labeled field with optional hint and required indicator.
export declare function Field({ children, className, contentClassName, hint, label, labelClassName, required, }: FieldProps): import("react/jsx-runtime").JSX.Element;
 
// Accessible icon-only button with title tooltip.
export declare function IconButton({ title, children, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a metric with optional delta indicator.
export declare function Metric({ className, delta, deltaClassName, label, labelClassName, value, valueClassName, }: MetricProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a network switch notice prompting wallet action.
export declare function NetworkSwitchNotice({ addChainParams, buttonClassName, chainName, className, expectedChainId, message, preview, }: NetworkSwitchNoticeProps): import("react/jsx-runtime").JSX.Element | null;
 
// Renders a tone-styled notice component.
export declare function Notice({ children, className, tone }: NoticeProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a panel with title, icon, and actions.
export declare function Panel({ title, icon, actions, children }: PanelProps): import("react/jsx-runtime").JSX.Element;
 
// Renders the body content of a panel.
export declare function PanelBody({ children }: PanelBodyProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a segmented control for mutually exclusive selection.
export declare function SegmentedControl<TValue extends string = string>({ activeOptionClassName, className, inactiveOptionClassName, onChange, optionClassName, options, value, }: SegmentedControlProps<TValue>): import("react/jsx-runtime").JSX.Element;
 
// Renders a responsive grid of status indicators.
export declare function StatusGrid({ children, className, columns }: StatusGridProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a token amount input with balance and token selector.
export declare function TokenAmountField<TToken extends TokenSelectOption = TokenSelectOption>({ amount, amountClassName, balance, className, label, onAmountChange, onTokenChange, tokens, tokenValue, }: TokenAmountFieldProps<TToken>): import("react/jsx-runtime").JSX.Element;
 
// Renders a token pair selector with swap affordance.
export declare function TokenPairSelector<TToken extends TokenSelectOption = TokenSelectOption>({ className, inputOptions, onSwap, onTokenInChange, onTokenOutChange, outputOptions, tokenInValue, tokenOutValue, }: TokenPairSelectorProps<TToken>): import("react/jsx-runtime").JSX.Element;
 
// Renders a token selection dropdown.
export declare function TokenSelect<TToken extends TokenSelectOption = TokenSelectOption>({ className, disabled, getOptionLabel, onChange, options, selectClassName, value, }: TokenSelectProps<TToken>): import("react/jsx-runtime").JSX.Element;
 
// Renders a wallet connection button with dynamic state.
export declare function WalletButton({ className, connectLabel, connectedClassName, disconnectedClassName, disconnectLabel, }: WalletButtonProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a wallet picker modal.
export declare function WalletPickerModal({ open, onClose, section }: WalletPickerModalProps): import("react/jsx-runtime").JSX.Element | null;
 
// Renders a wallet provider card with status and actions.
export declare function WalletProviderCard({ account, actions, chainLabel, className, connectLabel, connectPending, error, onConnect, onDisconnect, providerDescription, providerPresent, space, status, title, }: WalletProviderCardProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a wallet status chip (address + status).
export declare function WalletStatusChip({ address, className, status, }: WalletStatusChipProps): import("react/jsx-runtime").JSX.Element | null;
 
// Props for icon-only buttons (extends ButtonHTMLAttributes with accessibility).
export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'className' | 'type'> & {
  title: string;
};
 
// Tone options for notice components.
export type NoticeTone = 'neutral' | 'info' | 'ok' | 'success' | 'warning' | 'error';
 
// Status values for wallet provider cards.
export type WalletProviderCardStatus = 'active' | 'connecting' | 'detecting' | 'in-activating' | 'in-detecting' | 'not-active' | 'not-installed' | (string & {});
 
// State values for wallet status chips.
export type WalletStatusChipState = 'connected' | 'connecting' | 'disconnected';

Usage

import { AppShell, Topbar, MainGrid, Panel, Notice } from '@cfxdevkit/ui';
 
<AppShell>
  <Topbar brand={<Logo />} actions={<UserMenu />} />
  <MainGrid sidebar={<Sidebar />}>
    <Panel title="Overview">
      <Notice tone="info">Welcome back!</Notice>
      <MainContent />
    </Panel>
  </MainGrid>
</AppShell>

./shell

// Root layout shell component providing consistent app structure (topbar, sidebar, main grid).
export interface AppShellProps {
  children: React.ReactNode;
}
 
// Props for the top navigation bar.
export interface TopbarProps {
  brand: React.ReactNode;
  actions: React.ReactNode;
}
 
// Props for the main content grid layout.
export interface MainGridProps {
  sidebar?: React.ReactNode;
  children: React.ReactNode;
}
 
// Renders the full app shell layout.
export declare function AppShell({ children }: AppShellProps): import("react/jsx-runtime").JSX.Element;
 
// Renders the top navigation bar with brand and actions.
export declare function Topbar({ brand, actions }: TopbarProps): import("react/jsx-runtime").JSX.Element;
 
// Renders the main content grid with optional sidebar.
export declare function MainGrid({ sidebar, children }: MainGridProps): import("react/jsx-runtime").JSX.Element;

Usage

import { AppShell, Topbar, MainGrid } from '@cfxdevkit/ui/shell';
 
<AppShell>
  <Topbar brand={<Logo />} actions={<UserMenu />} />
  <MainGrid sidebar={<Sidebar />}>
    <MainContent />
  </MainGrid>
</AppShell>

./panel

// Props for asset conversion panel (swap/wrap/unwrap).
export interface AssetConversionPanelProps {
  amount: string;
  amountLabel?: string;
  busy?: boolean;
  className?: string;
  error?: string;
  fromAssetLabel?: string;
  maxAmountLabel?: string;
  mode: 'swap' | 'wrap' | 'unwrap';
  onAmountChange: (value: string) => void;
  onMax?: () => void;
  onModeChange: (mode: 'swap' | 'wrap' | 'unwrap') => void;
  onSubmit: () => void;
  submitLabel?: string;
  success?: boolean;
  title?: string;
  toAssetLabel?: string;
  wrapLabel?: string;
  unwrapLabel?: string;
}
 
// Props for generic panel container.
export interface PanelProps {
  title?: string;
  icon?: React.ReactNode;
  actions?: React.ReactNode;
  children: React.ReactNode;
}
 
// Props for panel body content.
export interface PanelBodyProps {
  children: React.ReactNode;
}
 
// Renders the asset conversion panel with full flow support.
export declare function AssetConversionPanel({ amount, amountLabel, busy, className, error, fromAssetLabel, maxAmountLabel, mode, onAmountChange, onMax, onModeChange, onSubmit, submitLabel, success, title, toAssetLabel, wrapLabel, unwrapLabel, }: AssetConversionPanelProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a panel with title, icon, and actions.
export declare function Panel({ title, icon, actions, children }: PanelProps): import("react/jsx-runtime").JSX.Element;
 
// Renders the body content of a panel.
export declare function PanelBody({ children }: PanelBodyProps): import("react/jsx-runtime").JSX.Element;

Usage

import { Panel, PanelBody } from '@cfxdevkit/ui/panel';
 
<Panel title="Settings" icon={<SettingsIcon />}>
  <PanelBody>
    <SettingsForm />
  </PanelBody>
</Panel>

./form

// Props for generic labeled field wrapper.
export interface FieldProps {
  children: React.ReactNode;
  className?: string;
  contentClassName?: string;
  hint?: string;
  label?: string;
  labelClassName?: string;
  required?: boolean;
}
 
// Props for token amount input with balance display.
export interface TokenAmountFieldProps<TToken extends TokenSelectOption = TokenSelectOption> {
  amount: string;
  amountClassName?: string;
  balance?: string;
  className?: string;
  label?: string;
  onAmountChange: (value: string) => void;
  onTokenChange: (token: TToken) => void;
  tokens: TToken[];
  tokenValue?: TToken;
}
 
// Props for token pair selector with swap affordance.
export interface TokenPairSelectorProps<TToken extends TokenSelectOption = TokenSelectOption> {
  className?: string;
  inputOptions: TToken[];
  onSwap?: () => void;
  onTokenInChange: (token: TToken) => void;
  onTokenOutChange: (token: TToken) => void;
  outputOptions: TToken[];
  tokenInValue?: TToken;
  tokenOutValue?: TToken;
}
 
// Token option shape used across token selection components.
export interface TokenSelectOption {
  symbol: string;
  name: string;
  address?: string;
  decimals?: number;
  icon?: string;
}
 
// Props for token dropdown selector.
export interface TokenSelectProps<TToken extends TokenSelectOption = TokenSelectOption> {
  className?: string;
  disabled?: boolean;
  getOptionLabel?: (option: TToken) => string;
  onChange: (token: TToken) => void;
  options: TToken[];
  selectClassName?: string;
  value?: TToken;
}
 
// Renders a labeled field with optional hint and required indicator.
export declare function Field({ children, className, contentClassName, hint, label, labelClassName, required, }: FieldProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a token amount input with balance and token selector.
export declare function TokenAmountField<TToken extends TokenSelectOption = TokenSelectOption>({ amount, amountClassName, balance, className, label, onAmountChange, onTokenChange, tokens, tokenValue, }: TokenAmountFieldProps<TToken>): import("react/jsx-runtime").JSX.Element;
 
// Renders a token pair selector with swap affordance.
export declare function TokenPairSelector<TToken extends TokenSelectOption = TokenSelectOption>({ className, inputOptions, onSwap, onTokenInChange, onTokenOutChange, outputOptions, tokenInValue, tokenOutValue, }: TokenPairSelectorProps<TToken>): import("react/jsx-runtime").JSX.Element;
 
// Renders a token selection dropdown.
export declare function TokenSelect<TToken extends TokenSelectOption = TokenSelectOption>({ className, disabled, getOptionLabel, onChange, options, selectClassName, value, }: TokenSelectProps<TToken>): import("react/jsx-runtime").JSX.Element;

Usage

import { Field, TokenAmountField, TokenSelect } from '@cfxdevkit/ui/form';
 
<Field label="Amount" required>
  <TokenAmountField
    amount="1.5"
    balance="10.0"
    label="From"
    tokens={[tokenA, tokenB]}
    onAmountChange={(val) => setAmount(val)}
    onTokenChange={(token) => setFromToken(token)}
  />
</Field>

./data-display

// Compact metric display showing value and optional delta.
export interface MetricProps {
  className?: string;
  delta?: string;
  deltaClassName?: string;
  label: string;
  labelClassName?: string;
  value: string | number;
  valueClassName?: string;
}
 
// Grid layout for status indicators.
export interface StatusGridProps {
  children: React.ReactNode;
  className?: string;
  columns?: number;
}
 
// Renders a metric with optional delta indicator.
export declare function Metric({ className, delta, deltaClassName, label, labelClassName, value, valueClassName, }: MetricProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a responsive grid of status indicators.
export declare function StatusGrid({ children, className, columns }: StatusGridProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a segmented control for mutually exclusive selection.
export declare function SegmentedControl<TValue extends string = string>({ activeOptionClassName, className, inactiveOptionClassName, onChange, optionClassName, options, value, }: SegmentedControlProps<TValue>): import("react/jsx-runtime").JSX.Element;
 
// Option type for segmented control.
export interface SegmentedControlOption<TValue extends string = string> {
  label: string;
  value: TValue;
}
 
// Segmented control for mutually exclusive selection.
export interface SegmentedControlProps<TValue extends string = string> {
  activeOptionClassName?: string;
  className?: string;
  inactiveOptionClassName?: string;
  onChange: (value: TValue) => void;
  optionClassName?: string;
  options: SegmentedControlOption<TValue>[];
  value: TValue;
}

Usage

import { Metric, StatusGrid, SegmentedControl } from '@cfxdevkit/ui/data-display';
 
<Metric label="Total Volume" value="$1.2M" delta="+12%" />
<StatusGrid columns={3}>
  <StatusItem icon={<CheckIcon />} label="Active" />
  <StatusItem icon={<ClockIcon />} label="Pending" />
  <StatusItem icon={<AlertIcon />} label="Error" />
</StatusGrid>
<SegmentedControl
  options={[
    { label: 'Swap', value: 'swap' },
    { label: 'Wrap', value: 'wrap' },
  ]}
  value={mode}
  onChange={(val) => setMode(val)}
/>

./feedback

// Notice prompting user to switch networks in their wallet.
export interface NetworkSwitchNoticeProps {
  addChainParams?: {
    chainId: string;
    chainName: string;
    nativeCurrency: { name: string; symbol: string; decimals: number };
    rpcUrls: string[];
    blockExplorerUrls?: string[];
  };
  buttonClassName?: string;
  chainName: string;
  className?: string;
  expectedChainId: string;
  message?: string;
  preview?: boolean;
}
 
// Generic dismissible notice component with tone-based styling.
export interface NoticeProps {
  children: React.ReactNode;
  className?: string;
  tone: NoticeTone;
}
 
// Renders a network switch notice prompting wallet action.
export declare function NetworkSwitchNotice({ addChainParams, buttonClassName, chainName, className, expectedChainId, message, preview, }: NetworkSwitchNoticeProps): import("react/jsx-runtime").JSX.Element | null;
 
// Renders a tone-styled notice component.
export declare function Notice({ children, className, tone }: NoticeProps): import("react/jsx-runtime").JSX.Element;
 
// Tone options for notice components.
export type NoticeTone = 'neutral' | 'info' | 'ok' | 'success' | 'warning' | 'error';

Usage

import { Notice, NetworkSwitchNotice } from '@cfxdevkit/ui/feedback';
 
<Notice tone="warning">Please confirm your transaction before proceeding.</Notice>
<NetworkSwitchNotice
  expectedChainId="0x1"
  chainName="Ethereum Mainnet"
  message="Switch to Ethereum to continue"
/>

./wallet

// Wallet connection button with dynamic state labels.
export interface WalletButtonProps {
  className?: string;
  connectLabel?: string;
  connectedClassName?: string;
  disconnectedClassName?: string;
  disconnectLabel?: string;
}
 
// Modal for selecting a wallet provider.
export interface WalletPickerModalProps {
  open: boolean;
  onClose: () => void;
  section?: 'all' | 'popular' | 'other';
}
 
// Card displaying wallet provider status and actions.
export interface WalletProviderCardProps {
  account?: string;
  actions?: React.ReactNode;
  chainLabel?: string;
  className?: string;
  connectLabel?: string;
  connectPending?: boolean;
  error?: string;
  onConnect?: () => void;
  onDisconnect?: () => void;
  providerDescription?: string;
  providerPresent?: boolean;
  space?: string;
  status: WalletProviderCardStatus;
  title: string;
}
 
// Small badge showing wallet connection status and address.
export interface WalletStatusChipProps {
  address?: string;
  className?: string;
  status: WalletStatusChipState;
}
 
// Renders a wallet connection button with dynamic state.
export declare function WalletButton({ className, connectLabel, connectedClassName, disconnectedClassName, disconnectLabel, }: WalletButtonProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a wallet picker modal.
export declare function WalletPickerModal({ open, onClose, section }: WalletPickerModalProps): import("react/jsx-runtime").JSX.Element | null;
 
// Renders a wallet provider card with status and actions.
export declare function WalletProviderCard({ account, actions, chainLabel, className, connectLabel, connectPending, error, onConnect, onDisconnect, providerDescription, providerPresent, space, status, title, }: WalletProviderCardProps): import("react/jsx-runtime").JSX.Element;
 
// Renders a wallet status chip (address + status).
export declare function WalletStatusChip({ address, className, status, }: WalletStatusChipProps): import("react/jsx-runtime").JSX.Element | null;
 
// Status values for wallet provider cards.
export type WalletProviderCardStatus = 'active' | 'connecting' | 'detecting' | 'in-activating' | 'in-detecting' | 'not-active' | 'not-installed' | (string & {});
 
// State values for wallet status chips.
export type WalletStatusChipState = 'connected' | 'connecting' | 'disconnected';

Usage

import { WalletButton, WalletStatusChip, WalletProviderCard } from '@cfxdevkit/ui/wallet';
 
<WalletButton connectLabel="Connect Wallet" disconnectLabel="Disconnect" />
<WalletStatusChip status="connected" address="0x1234..." />
<WalletProviderCard
  title="MetaMask"
  status="active"
  account="0x1234..."
  chainLabel="Ethereum Mainnet"
  onDisconnect={() => disconnect()}
/>
Last updated on
@cfxdevkit/theme@cfxdevkit/ui-core