App Launcher
App Launcher (Connect Kit)
The App Launcher is the CROSS ecosystem's drop-in wallet UI kit for DApps. Instead of wiring the JavaScript SDKs and building wallet UI yourself, you install one React package and get the complete, production-grade experience used across CROSS ecosystem services: a connect button and modal, a full wallet info panel, portfolio, buy (on-ramp), send, bridge, and the global app launcher menu.
It is distributed as a small family of npm packages, collectively called the Connect Kit.
Packages
| Package | Role | You install it when... |
|---|---|---|
@nexus-cross/connect-kit-react | Primary entry point. React provider, ConnectButton, connect modal, and re-exports of every UI feature and hook. | You build a React DApp (this is the only package most apps need). |
@nexus-cross/connect-kit-wagmi | Wagmi connector adapters and createCrossxConfig / createONEpocketConfig. Bridges the ONEpocket embedded wallet, the ONEpocket mobile app / browser extension, and external wallets (MetaMask, Binance Wallet) into wagmi. | You want a headless integration with your own UI on top of wagmi. |
@nexus-cross/connect-kit-core | Pure domain layer: wallet taxonomy, config and theme types, port interfaces, BigInt-safe balance formatters. No React, wagmi, or DOM dependency. | You normally don't install it directly — it comes in as a dependency. |
@nexus-cross/dapp-ui | The CROSS ecosystem UI component library (WalletInfo, WalletPortfolio, SendFlow, BridgeFlow, AppLauncher menu, Relay, and more). Wallet-agnostic: hosts inject wallet functions as props. | You want to embed individual ecosystem UI components without the Connect Kit wiring. |
Architecture in one line: react → core ← wagmi — the React layer composes UI, the wagmi layer implements connectors, and the core layer holds pure domain types shared by both. @nexus-cross/dapp-ui sits beside them and is re-exported through @nexus-cross/connect-kit-react, so a DApp imports everything from one place.
What you get
- One connect button, every wallet — ONEpocket embedded wallet (Google / Apple social login), ONEpocket mobile app, ONEpocket browser extension, MetaMask, and Binance Wallet behind a single unified modal.
- A full wallet panel — address + QR, multi-chain token balances with prices, token detail with price chart and transaction history, and action cards for Buy / Bridge / Receive.
- Ecosystem features as toggles — on-ramp (
onRampEnabled), KYC (kycEnabled), and ONEpop (onePopEnabled) turn on with a single config flag. - SSR support — cookie-based state hydration for the Next.js App Router, with no disconnect flash on reload.
- Theming — light/dark/system, design-system CSS variables, and per-component style overrides.
Requirements
| Peer | Version |
|---|---|
| react / react-dom | 18+ |
| wagmi | v2+ |
| viem | v2+ |
| @tanstack/react-query | v5+ |
Documentation
- Getting Started — install the Connect Kit and connect your first wallet
- Features — what each feature does and how to enable it
Relationship to the JavaScript SDKs
The Connect Kit is built on top of the SDKs documented in this section: @nexus-cross/connect-kit-wagmi embeds @nexus-cross/crossx-sdk-core and @nexus-cross/crossx-sdk-wagmi to talk to the ONEpocket embedded wallet. If the Connect Kit's UI is more than you need, drop down to those SDKs directly.
Updated 2 days ago