Hooks

// React Example
import { useAppKit } from '@to-nexus/sdk/react'

const appKit = useAppKit()

// Connect the user's wallet
function handleConnect() {
  appKit.connect()
}

// Vanilla JS Example
import { useAppKitWallet } from '@to-nexus/sdk';

const appkitWallet = useAppKitWallet();

// Connect the user's wallet
async function handleConnect() {
  await appkitWallet.connect('cross_wallet');
}

// React Example
import { useEffect } from 'react'
import { useAppKitAccount } from '@to-nexus/sdk/react'

/**
 * Debug component that displays all account-related information
 * from useAppKitAccount hook
 */
export function DebugAccountInfo() {
  // Destructure all available values from the hook
  const {
    allAccounts,     // Array of all connected accounts
    caipAddress,     // CAIP-10 formatted address
    address,         // Plain wallet address (EOA)
    isConnected,     // Connection status boolean
    embeddedWalletInfo, // Additional info for embedded wallet users
    status,          // Detailed connection/session status
    balance,         // Native token balance
    balanceSymbol,   // Symbol of the native token (e.g., CROSS)
    balanceLoading,  // Loading state for balance
    tokenBalance     // ERC-20 token balances
  } = useAppKitAccount()

  // Monitor and log changes in wallet connection status
  useEffect(() => {
    // Early return if wallet is not connected
    if (!isConnected) {
      console.log('Wallet not connected.')
      return
    }

    // Log basic wallet information
    console.log('Wallet connected.')
    console.log('▶ Address:', address)
    console.log('▶ CAIP Address:', caipAddress)
    console.log('▶ Status:', status)
    console.log('▶ All Accounts:', allAccounts)

    // Log balance information
    console.log('▶ Native Balance:', balance, balanceSymbol)
    console.log('▶ Balance Loading:', balanceLoading)
    console.log('▶ ERC-20 Token Balances:', tokenBalance)

    // Log embedded wallet specific information if available
    if (embeddedWalletInfo) {
      console.log('▶ Embedded Wallet Info:')
      console.log('- Auth Provider:', embeddedWalletInfo.authProvider)
      console.log('- Is Smart Account Deployed:', embeddedWalletInfo.isSmartAccountDeployed)
      console.log('- User Info:', embeddedWalletInfo.user)
      console.log('- Account Type:', embeddedWalletInfo.accountType)
    }
  }, [isConnected]) // Re-run effect when connection status changes
}

// Vanilla JS Example
import { AccountController } from '@to-nexus/sdk';

// Access account state
const accountState = AccountController.state;
console.log('▶ Address:', accountState.address);
console.log('▶ CAIP Address:', accountState.caipAddress);
console.log('▶ Status:', accountState.status);
console.log('▶ All Accounts:', accountState.allAccounts);
console.log('▶ Native Balance:', accountState.balance, accountState.balanceSymbol);
console.log('▶ ERC-20 Token Balances:', accountState.tokenBalance);
// Embedded wallet info (if available)
if (accountState.embeddedWalletInfo) {
  console.log('▶ Embedded Wallet Info:', accountState.embeddedWalletInfo);
}

// React Example
import { useAppKitNetwork } from '@to-nexus/sdk/react'
import { crossMainnet, crossTestnet } from '@to-nexus/sdk/networks'

const { chainId, caipNetworkId, caipNetwork, switchNetwork } = useAppKitNetwork()

// Switch to testnet or mainnet based on env
async function handleSwitchNetwork() {
  try {
    const targetNetwork = import.meta.env['VITE_NODE_ENV'] === 'production'
      ? crossMainnet
      : crossTestnet

    await switchNetwork(targetNetwork)
    console.log(`Successfully switched to: ${targetNetwork.caipNetworkId}`)
  } catch (error) {
    console.error('Failed to switch network:', error)
  }
}

// Display current network info
console.log('Chain ID:', chainId)
console.log('CAIP Network ID:', caipNetworkId)

// Check and display detailed network info
if (caipNetwork) {
  const { chainNamespace, chainReference, name } = caipNetwork
  if (chainNamespace && chainReference) {
    console.log(`Current Network:`)
    console.log(`- CAIP Format: ${chainNamespace}:${chainReference}`)
    console.log(`- Network Name: ${name}`)
  }
}

// Vanilla JS Example
import { crossMainnet, crossTestnet } from '@to-nexus/sdk';

// Example: Switch network (assume crossSdk instance exists)
const targetNetwork = window?.VITE_NODE_ENV === 'production' ? crossMainnet : crossTestnet;
await crossSdk.switchNetwork(targetNetwork);
console.log('Switched to:', targetNetwork.caipNetworkId);

// Display current network info (assume networkState is set via crossSdk.subscribeNetwork)
console.log('Chain ID:', networkState.chainId);
console.log('CAIP Network ID:', networkState.caipNetworkId);

// Check and display detailed network info
if (networkState.caipNetwork) {
  const { chainNamespace, chainReference, name } = networkState.caipNetwork;
  if (chainNamespace && chainReference) {
    console.log('Current Network:');
    console.log('- CAIP Format:', `${chainNamespace}:${chainReference}`);
    console.log('- Network Name:', name);
  }
}

// React Example
import { useAppKitProvider, UniversalProvider } from '@to-nexus/sdk/react'

function WalletProviderInfo() {
  // Get all provider-related information
  const {
    walletProvider,    // The provider instance for RPC requests
    providerType,      // Current provider type (e.g., 'injected', 'walletconnect')
    isConnecting,      // Whether provider is in connecting state
    isConnected,       // Whether provider is connected
    chainId,           // Current chain ID
    accounts           // Available account addresses
  } = useAppKitProvider<UniversalProvider>('eip155')

  // Example: Making an RPC request
  async function handleProviderRequest() {
    try {
      // Check connection status
      if (!isConnected) {
        console.log('Provider not connected')
        return
      }

      // Log provider information
      console.log('Provider Type:', providerType)
      console.log('Chain ID:', chainId)
      console.log('Available Accounts:', accounts)

      // Make RPC request while handling connection state
      if (!isConnecting && walletProvider) {
        const balance = await walletProvider.request({
          method: 'eth_getBalance',
          params: [accounts[0], 'latest']
        })
        console.log('Account Balance:', balance)
      }
    } catch (error) {
      console.error('Provider request failed:', error)
    }
  }

// Vanilla JS Example
// Assume eip155Provider is set up via crossSdk.subscribeProviders
const accountState = /* AccountController.state or similar */;
const eip155Provider = /* from crossSdk.subscribeProviders */;
const providerType = /* provider type, if available */;
const isConnecting = /* is connecting state, if available */;
const isConnected = accountState.isConnected;
const chainId = /* chainId, if available */;
const accounts = [accountState.address];

// Check connection status
if (!isConnected) {
  console.log('Provider not connected');
} else {
  // Log provider information
  console.log('Provider Type:', providerType);
  console.log('Chain ID:', chainId);
  console.log('Available Accounts:', accounts);

  // Make RPC request while handling connection state
  if (!isConnecting && eip155Provider) {
    const balance = await eip155Provider.request({
      method: 'eth_getBalance',
      params: [accounts[0], 'latest']
    });
    console.log('Account Balance:', balance);
  }
}