React SDK — EIP-1193 Provider

The React SDK provides access to the EIP-1193 Ethereum provider through the useWallet hook, enabling integration with ethers.js, viem, and other Web3 libraries inside React components.

Getting the provider

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

function MyComponent() {
  const { sdk, isAuthenticated } = useCROSSx()

  if (!isAuthenticated || !sdk) return null

  const provider = sdk.getProvider('eip155:612044')
  // Use with ethers.js, viem, web3.js, etc.
}

With ethers.js v6

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

function SendToken() {
  const { sdk } = useCROSSx()

  const handleSend = async () => {
    if (!sdk) return
    const provider = sdk.getProvider('eip155:612044')
    const ethersProvider = new BrowserProvider(provider)
    const signer = await ethersProvider.getSigner()

    const tx = await signer.sendTransaction({
      to: '0xRecipient...',
      value: ethers.parseEther('0.1'),
    })
    const receipt = await tx.wait()
    console.log('Confirmed:', receipt.hash)
  }

  return <button onClick={handleSend}>Send 0.1 CROSS</button>
}

With viem

import { useCROSSx } from '@nexus-cross/crossx-sdk-react'
import { createWalletClient, custom, parseEther } from 'viem'

function ViemExample() {
  const { sdk, walletAddress } = useCROSSx()

  const handleSend = async () => {
    if (!sdk) return
    const provider = sdk.getProvider('eip155:612044')
    const client = createWalletClient({ transport: custom(provider) })

    const hash = await client.sendTransaction({
      account: walletAddress as `0x${string}`,
      to: '0xRecipient...',
      value: parseEther('0.1'),
    })
    console.log('TX Hash:', hash)
  }

  return <button onClick={handleSend}>Send via viem</button>
}

Contract interaction

import { useCROSSx } from '@nexus-cross/crossx-sdk-react'
import { BrowserProvider, ethers } from 'ethers'
import { useState } from 'react'

const ERC20_ABI = [
  'function name() view returns (string)',
  'function balanceOf(address) view returns (uint256)',
  'function transfer(address to, uint256 amount) returns (bool)',
]

function TokenBalance() {
  const { sdk } = useCROSSx()
  const [balance, setBalance] = useState<string>('')

  const fetchBalance = async () => {
    if (!sdk) return
    const provider = sdk.getProvider('eip155:612044')
    const ethersProvider = new BrowserProvider(provider)

    const token = new ethers.Contract('0xTokenAddress', ERC20_ABI, ethersProvider)
    const raw = await token.balanceOf('0xYourAddress')
    setBalance(ethers.formatUnits(raw, 18))
  }

  return (
    <div>
      <button onClick={fetchBalance}>Check Token Balance</button>
      {balance && <p>Balance: {balance}</p>}
    </div>
  )
}

Via useCROSSx (advanced)

For direct SDK access:

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

function RawProviderAccess() {
  const { sdk } = useCROSSx()

  const handleRequest = async () => {
    const provider = sdk.getProvider('eip155:612044')
    const blockNumber = await provider.request({
      method: 'eth_blockNumber',
      params: [],
    })
    console.log('Block:', blockNumber)
  }

  return <button onClick={handleRequest}>Get Block Number</button>
}

Notes

The provider instance is tied to a specific chain. Call getProvider() with different chain IDs for multi-chain support.
Signing and transaction methods always display a user confirmation modal.
For a detailed list of supported RPC methods, see Core SDK — EIP-1193 Provider.