---
updatedAt: 2026-08-20T05:41:01.000Z
agentTools:
  projectIndex: https://docs.onechain.nexus/llms.txt
---

# Features

# 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.

<br />

## 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)

```ts
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

```ts
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

```ts
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.

<br />

## Feature toggle summary

| Feature                                           | How to enable                         |
| ------------------------------------------------- | ------------------------------------- |
| Connect button + modal, Wallet Info, Send, Bridge | On by default                         |
| Portfolio                                         | `<ConnectButton portfolio />`         |
| Buy (on-ramp)                                     | `onRampEnabled: true`                 |
| KYC                                               | `kycEnabled: true`                    |
| ONEpop                                            | `onePopEnabled: true`                 |
| Get One USD / Relay / App Launcher menu           | Mount the component where you want it |