Connect Kit Features

Every feature below ships inside @nexus-cross/connect-kit-react (most are implemented in @nexus-cross/dapp-ui and re-exported). All UI renders as a popover on desktop and a bottom drawer on mobile, switching automatically at the mobile breakpoint, and follows the kit theme.

Connect Button & Connect Modal

<ConnectButton /> is the single entry point:

• Disconnected — shows a connect pill; clicking opens the unified connect modal with every configured wallet: ONEpocket embedded (Google / Apple social login), ONEpocket mobile app (QR / deep link), ONEpocket browser extension, MetaMask, and Binance Wallet. Wallet availability is auto-detected (EIP-6963 + injected probing), and per-wallet setup guides can be linked via walletGuides.
• Connecting — pending state while pairing / OAuth completes.
• Connected — shows the truncated address (and balance with showBalance); clicking opens the Wallet Info panel.

Key props: label, portfolio (enable the portfolio screen), showBalance, theme, style / walletInfoStyle for fine-grained styling.

For custom UI, use the useCrossConnectKit() hook instead: connect(walletId), disconnect(), availableWallets, currentWallet, and selectWallet() for multi-address embedded wallets.

Wallet Info Panel

The connected-state panel (WalletInfo) is a complete mini wallet:

• Address bar with copy and QR code for receiving
• Token balances across ONEchain (CROSS) and BSC with prices and 24h change
• Total assets summary and a Send shortcut
• Token detail view — per-token price chart, stats, and transaction history classified as Receive / Send / Bridge In / Bridge Out
• Action cards — Buy, Bridge, Receive, Portfolio / ONEpop (depending on enabled features)
• Disconnect and theming controls

Wallet Portfolio

Enabled with <ConnectButton portfolio /> (or by embedding WalletPortfolioBody full-screen). Aggregates the user's positions across the ecosystem in sections: Rewards, Points, Staking, Game Swap, Forge, and CrossD Pool — with claim/withdraw actions wired through the host's wagmi connection.

Send

An asset-send flow (SendFlow) with token selection, a recent-address list, amount entry with BigInt-safe formatting (values are always floored, never rounded up), and status tracking. Reachable from the Wallet Info panel's Send shortcut.

Buy (On-Ramp)

createConnectKitConfig({ ..., onRampEnabled: true })

Adds a Buy action to the Wallet Info panel and exposes the useOnRamp / useOnRampEligibility hooks for fiat-to-crypto purchases through the CROSS on-ramp gateway. Pair with kycEnabled where verification is required.

Bridge

A bridge flow (BridgeFlow) for moving assets between ONEchain and BSC: quote → approve → submit with step-by-step status and history. The kit auto-registers the BSC pair network for each CROSS network (disable with disableBscAutoRegister), and by default restores the user's original chain after an operation-driven chain switch (restoreChainAfterSwitch, default true).

Get One USD

<CrossGetOneUsd /> — a floating action button (or inline button) that routes the user to the fastest way to get funds: Swap, Bridge, or Relay deposit, chosen automatically from what's available for the target token. Includes a transaction status pill.

Relay (Cross-chain Deposit)

Cross-chain deposit without leaving your DApp:

• <CrossRelayDeposit /> — single-view deposit modal
• <CrossRelayHistory /> — live order history (SSE-driven status updates)
• <CrossRelayRecovery /> — recover funds from incomplete orders, with a count badge

All three are pre-wired to the host wagmi connection via useRelayWalletProps.

App Launcher Menu

The component the kit is named after: <AppLauncher /> (with AppLauncherTrigger / AppLauncherContent) renders the global CROSS ecosystem service menu — a grid of ecosystem apps fetched from remote metadata, with smart same-domain vs cross-domain navigation and automatic hiding of the currently active service. Drop it in your header to give users one-click access to the whole ecosystem.

KYC

createConnectKitConfig({ ..., kycEnabled: true })

Mounts the KYC provider automatically and injects the embedded-wallet access token. Use useKyc() to read verification status and launchKycVerification() to start the flow.

ONEpop

createConnectKitConfig({ ..., onePopEnabled: true })

Adds the ONEpop card and screen to the Wallet Info panel: pending social-handle token drops, claim activity, and X (Twitter) account connection. State is fetched through a SIWE-gated API when the screen opens (useOnePopSummary).

Theming & Customization

• theme: 'light' | 'dark' plus autoDetectTheme to follow the OS setting
• themeTokens — semantic color overrides applied to both the kit UI and the embedded-wallet modal
• Per-component *Style props and CSS variables for fine-grained control
• pinKeyboard: 'virtual' | 'native' — choose the PIN input keyboard on mobile

Analytics

useConnectKitAnalytics() lets the host subscribe to user-flow events (connect started/succeeded, feature opened, ...) for product analytics. Events carry no addresses or PII.

Feature toggle summary