React SDK — Wallet

This guide covers wallet features using the useWallet and useCROSSx hooks.

Prerequisites

User should be authenticated (check isAuthenticated from useAuth or useCROSSx).
Chain ID in CAIP-2 format (e.g. eip155:612044).

useWallet

Provides wallet address, signing, and transaction capabilities.

import { useWallet } from '@nexus-cross/crossx-sdk-react'

function WalletInfo() {
  const { address, signMessage, sendTransaction, isLoading, error } = useWallet()

  if (!address) return null

  return (
    <div>
      <p>Address: {address}</p>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  )
}

Return values

Property	Type	Description
`address`	`string \| null`	Current wallet address
`isLoading`	`boolean`	Loading state
`error`	`string \| null`	Last error message
`signMessage`	`(chainId: string, message: string) => Promise<SignMessageResp>`	Sign personal message
`sendTransaction`	`(chainId: string, tx: EvmTransactionRequest) => Promise<SendTxResp>`	Send transaction

useWallet provides a simplified interface. For advanced operations (balance, gas, provider, typed data signing, etc.), use useCROSSx() to access the SDK directly.

Sign message

const { signMessage } = useWallet()

const handleSign = async () => {
  const { signature } = await signMessage('eip155:612044', 'Hello CROSSx')
  console.log('Signature:', signature)
}

Send transaction

const { sendTransaction } = useWallet()

const handleSend = async () => {
  const { txHash } = await sendTransaction('eip155:612044', {
    from: '0xYourAddress...',
    to: '0xRecipient...',
    value: '0xDE0B6B3A7640000',
    data: '0x',
  })
  console.log('TX Hash:', txHash)
}

useCROSSx

Access the SDK instance and reactive state for advanced use cases.

import { useCROSSx } from '@nexus-cross/crossx-sdk-react'

function AdvancedFeature() {
  const { sdk, isInitialized, isAuthenticated, walletAddress } = useCROSSx()

  const handleGetBalance = async () => {
    if (!sdk) return
    const { formatted } = await sdk.getBalance('eip155:612044')
    alert(`Balance: ${formatted}`)
  }

  const handleGetUserInfo = async () => {
    if (!sdk) return
    const userInfo = await sdk.getUserInfo()
    console.log(userInfo.email, userInfo.loginType)
  }

  const handleRpcCall = async () => {
    if (!sdk) return
    const blockNumber = await sdk.walletRpc('eth_blockNumber', [], 'eip155:612044')
    console.log('Block:', blockNumber)
  }

  return (
    <div>
      <p>Initialized: {String(isInitialized)}</p>
      <p>Authenticated: {String(isAuthenticated)}</p>
      <p>Address: {walletAddress}</p>
      <button onClick={handleGetBalance}>Balance</button>
      <button onClick={handleRpcCall}>Block Number</button>
      <button onClick={handleGetUserInfo}>User Info</button>
    </div>
  )
}

Return values

Property	Type	Description
`sdk`	`CROSSxSDK \| null`	SDK instance
`isInitialized`	`boolean`	`true` after `initialize()` completes
`isAuthenticated`	`boolean`	Reactive auth state (via `authChanged` event)
`walletAddress`	`string \| null`	Reactive wallet address (via `addressChanged` event)

Wallet selector

const { sdk, walletAddress } = useCROSSx()

const handleSelectWallet = async () => {
  if (!sdk) return
  // Pass current address to highlight it as "selected" in the popup
  const wallet = await sdk.selectWallet(walletAddress || undefined)
  if (wallet) {
    console.log('Selected:', wallet.address, wallet.index)
  }
}

Pass walletAddress to selectWallet() to highlight the currently active wallet in the popup. The walletAddress from useCROSSx() updates automatically after selection via the addressChanged event.

EIP-1193 Provider

Access the provider via useCROSSx():

const { sdk } = useCROSSx()

if (sdk) {
  const provider = sdk.getProvider('eip155:612044')

  // ethers.js v6
  const ethersProvider = new BrowserProvider(provider)

  // viem
  const client = createWalletClient({ transport: custom(provider) })
}