@nexus-cross/connect-kit-react 1.1.3-beta.1 → 1.1.3-beta.2

package/README.md

@@ -11,15 +11,20 @@ setup, use [`@nexus-cross/connect-kit-wagmi`](../wagmi) directly.
 ## Install
 
 ```sh
-pnpm add @nexus-cross/connect-kit-react @nexus-cross/connect-kit-wagmi \
+pnpm add @nexus-cross/connect-kit-react \
          wagmi viem @tanstack/react-query react react-dom
 ```
 
-Optional peers (same as `@nexus-cross/connect-kit-wagmi`): `@to-nexus/sdk`,
-`@to-nexus/appkit-adapter-wagmi`, `@reown/appkit`,
-`@reown/appkit-adapter-wagmi`, `@nexus-cross/crossx-sdk-core`,
-`@nexus-cross/crossx-sdk-wagmi`. Install the ones matching the adapters you
-enable in your config.
+`@nexus-cross/connect-kit-react` depends on
+`@nexus-cross/connect-kit-wagmi` and `@nexus-cross/dapp-ui`, so most React
+DApps install only the React package plus the peer dependencies above.
+
+If your config uses `toNexusAdapter()`, add the private registry entry required
+by the transitive `@to-nexus/*` packages:
+
+```ini
+@to-nexus:registry=https://package.cross-nexus.com/repository/cross-sdk-js
+```
 
 ## Quick start
 
@@ -29,6 +34,16 @@ import { createCrossxConfig } from '@nexus-cross/connect-kit-wagmi';
 import { toNexusAdapter } from '@nexus-cross/connect-kit-wagmi/to-nexus';
 import { reownAdapter } from '@nexus-cross/connect-kit-wagmi/reown';
 import { embeddedConnectorFactory } from '@nexus-cross/connect-kit-wagmi/embedded';
+import type { NetworkConfig } from '@nexus-cross/connect-kit-core';
+
+const crossTestnet: NetworkConfig = {
+  id: 612044,
+  name: 'CROSS Testnet',
+  nativeCurrency: { name: 'tCROSS', symbol: 'tCROSS', decimals: 18 },
+  rpcUrl: 'https://testnet.crosstoken.io:22001',
+  blockExplorerUrl: 'https://testnet.crossscan.io',
+  testnet: true,
+};
 
 export const config = createCrossxConfig({
   crossProjectId: '...',
@@ -57,10 +72,11 @@ export function App() {
 }
 ```
 
-That's it. Clicking the button launches the CROSSx embedded wallet flow; the
-"Other wallets" link opens a modal listing `cross_wallet`, `cross_extension`,
-`metamask`, `binance` — each of which routes through the correct provider
-automatically.
+That's it. Clicking the button opens the kit's unified connect modal. The
+social row routes through the embedded CROSSx OAuth adapter when
+`embeddedConnectorFactory` is configured; the wallet list routes
+`cross_wallet`, `cross_extension`, `metamask`, and `binance` through the
+correct provider automatically.
 
 ## Components
 
@@ -123,6 +139,11 @@ export function Providers({ children, initialState }) {
 
 Requires `createCrossxConfig({ ssr: true })`.
 
+`embeddedConnectorFactory` imports the browser-only CROSSx SDK. In Next.js App
+Router, do not import `@nexus-cross/connect-kit-wagmi/embedded` from a module
+that is also imported by a Server Component. Keep SSR configs server-safe, or
+build the embedded-enabled config inside a `'use client'` boundary.
+
 ### `<ConnectButton>`
 
 ```tsx
@@ -137,8 +158,8 @@ Requires `createCrossxConfig({ ssr: true })`.
 
 Three visual states, driven by wagmi + the kit context:
 
-1. **Disconnected** — solid pill with `label`, launches the embedded wallet
-   flow on click.
+1. **Disconnected** — solid pill with `label`, opens the unified connect modal
+   on click.
 2. **Connecting / Reconnecting** — spinner + "Connecting…".
 3. **Connected** — pill showing a **platform icon** + shortened address.
    Clicking opens a popover powered by `@nexus-cross/dapp-ui`'s `WalletInfo`
@@ -154,30 +175,41 @@ For `cross_embedded`, the popover's **My Wallet** header is populated with
 the saved wallet name from crossy-sdk 2.0 (`sdk.getAddresses()`) when one
 exists.
 
-### `<OtherWalletsModal>`
+### Unified connect modal
 
 ```tsx
-import { OtherWalletsModal, useCrossConnectKit } from '@nexus-cross/connect-kit-react';
+import { useCrossConnectKit } from '@nexus-cross/connect-kit-react';
 
 function MyCustomButton() {
-  const { connect, otherWalletsOpen, openOtherWallets, closeOtherWallets } =
-    useCrossConnectKit();
+  const { openOtherWallets } = useCrossConnectKit();
 
-  return (
-    <>
-      <button onClick={openOtherWallets}>Other wallets</button>
-      <OtherWalletsModal
-        open={otherWalletsOpen}
-        onClose={closeOtherWallets}
-        onSelect={connect}
-      />
-    </>
-  );
+  return <button onClick={openOtherWallets}>Connect another wallet</button>;
 }
 ```
 
-Ported from posa's ConnectWalletModal — themed via `--wi-*` CSS custom
-properties so it inherits the same palette as the WalletInfo popover.
+`CrossConnectKitProvider` renders the modal for you. Calling
+`openOtherWallets()` opens the same unified modal used by `<ConnectButton />`,
+including the social row and wallet list. `CrossConnectModal` and
+`OtherWalletsModal` are exported for low-level integrations, but most DApps
+should not render them directly.
+
+Filter the wallet list with provider props:
+
+```tsx
+<CrossConnectKitProvider
+  config={config}
+  walletAllowlist={['cross_wallet', 'cross_extension']}
+  extraWallets={{
+    verse8: () => window.alert('Verse8 support is coming soon'),
+  }}
+>
+  {children}
+</CrossConnectKitProvider>
+```
+
+`walletAllowlist={[]}` hides the wallet-list rows and leaves only the social row
+when embedded OAuth is configured. Disable the social row separately by omitting
+`embeddedConnectorFactory` from `createCrossxConfig`.
 
 ## Hooks
 
@@ -189,7 +221,7 @@ const {
   connectorRegistry,
   availableWallets,     // registry entries with type !== 'embedded'
   connect,              // (walletId: WalletId) => Promise<void>
-  connectWallet,        // () => Promise<void>  — launches embedded flow
+  connectWallet,        // () => Promise<void>  — opens the unified connect modal
   disconnect,           // () => Promise<void>
   selectWallet,         // () => Promise<{ address, index } | null>
   currentWallet,        // WalletId | null
@@ -230,27 +262,25 @@ import {
 
 ## Theming
 
-`WalletInfo` and `OtherWalletsModal` are styled through the `--wi-*` custom
-property set (surface, border, text, accent tokens). The kit reads these at
-runtime and forwards them to the crossy-sdk 2.0 login modal via
-`deriveSDKThemeTokensFromWalletInfo`, so a single CSS palette styles both
-the connect UI and the embedded login overlay.
+`CrossConnectKitProvider` emits `--cck-*` CSS variables from
+`config.themeTokens`. The dapp-ui surfaces (`WalletInfo`, `WalletPortfolio`,
+`WalletConnectModal`, `AppLauncher`) read those variables, and the embedded SDK
+receives the same theme tokens at runtime.
 
 ## Allowed dependencies
 
-This package may depend on: `react`, `react-dom` (peer), `wagmi` (peer, hooks
-only), `@tanstack/react-query` (peer), `@nexus-cross/connect-kit-core`,
-`@nexus-cross/connect-kit-wagmi`, `@nexus-cross/dapp-ui` (peer), `@to-nexus/sdk` (optional
-peer, for the hook that inspects the embedded session), radix-ui, vaul.
+This package may depend on: `@nexus-cross/connect-kit-core`,
+`@nexus-cross/connect-kit-wagmi`, and `@nexus-cross/dapp-ui`. React, wagmi, and
+TanStack Query stay peer dependencies of the consuming app.
 
-It must **not** import `@nexus-cross/*` or `viem` directly — domain types
-flow through `@nexus-cross/connect-kit-core`, and any external SDK access happens in the
-wagmi layer.
+It must not own low-level wallet transport logic. External SDK access belongs in
+the wagmi layer; this package composes providers, React context, hooks, and
+dapp-ui components.
 
 ## Compatibility
 
-- `react@^18`, `react-dom@^18`
-- `wagmi@^2`, `viem@^2`
+- `react@^19`, `react-dom@^19`
+- `wagmi>=2 <4`, `viem@^2`
 - `@tanstack/react-query@^5`
 
 ## License

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexus-cross/connect-kit-react",
-  "version": "1.1.3-beta.1",
+  "version": "1.1.3-beta.2",
   "description": "React components and hooks for @nexus-cross/connect-kit wallet connection",
   "type": "module",
   "main": "./dist/index.js",
@@ -19,9 +19,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@nexus-cross/connect-kit-core": "1.1.3-beta.1",
-    "@nexus-cross/connect-kit-wagmi": "1.1.3-beta.1",
-    "@nexus-cross/dapp-ui": "1.1.3-beta.1"
+    "@nexus-cross/connect-kit-core": "1.1.3-beta.2",
+    "@nexus-cross/connect-kit-wagmi": "1.1.3-beta.2",
+    "@nexus-cross/dapp-ui": "1.1.3-beta.2"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.60.0",