Hooks

import { useAppKit } from '@reown/appkit-react-native';

export default function MyComponent() {
  const {
    // Modal Control
    open, // Function to open the modal, optionally with a specific view
    close, // Function to close the modal

    // Actions
    disconnect, // Function to disconnect the current session
    switchNetwork, // Function to switch to a different chain/network. Accepts an AppKitNetwork object or a CAIP network ID string (e.g., 'eip155:1')
  } = useAppKit();
}

open({ view: 'Account' }); // Opens to the account view if connected
open({ view: 'Connect' }); // Opens to the wallet selection view
open({ view: 'Networks' }); // Opens to the network selection view

const { switchNetwork } = useAppKit();

// Using an AppKitNetwork object
switchNetwork(polygonNetwork);

// Using a CAIP network ID string
await switchNetwork('eip155:1'); // Ethereum Mainnet
await switchNetwork('eip155:137'); // Polygon

import { useAccount } from '@reown/appkit-react-native';

export default function MyComponent() {
  const {
    allAccounts, // Account[], all connected accounts across all connections
    address, // String, the connected account address (e.g., '0x...', 'Sol...', 'bc1...')
    chainId, // Number or String, the chain ID of the currently active connection
    isConnected, // Boolean, true if a wallet is connected on the current chain/namespace
    namespace, // String, the active namespace (e.g., 'eip155', 'solana', 'bip122')
    chain // AppKitNetwork object with active chain information
  } = useAccount();

  if (isConnected) {
    return (
      <View>
        <Text>Connected to chain: {chainId}</Text>
        <Text>Namespace: {namespace}</Text>
        <Text>Chain: {chain?.name}</Text>
        <Text>Address: {address}</Text>
        <Text>Total accounts: {allAccounts.length}</Text>
      </View>
    );
  }
  return <Text>Not Connected</Text>;
}

import { useProvider, useAccount } from '@reown/appkit-react-native';

export default function ChainSpecificActions() {
  // Get provider for the current active network
  const { provider, providerType } = useProvider(); 

  const { chainId, address, isConnected } = useAccount();

  if (!isConnected || !provider) {
    return <p>Please connect your wallet.</p>;
  }

  const handleSignMessageEVM = async () => {
    if (providerType === 'eip155' && address) {
      console.log('EVM sign message functionality to be implemented using the provider.');
    }
  };

  const handleSignMessageSolana = async () => {
    if (providerType === 'solana' && address) {
      console.log('Solana sign message functionality to be implemented using the provider.');
    }
  };
  
  // Similar functions can be created for Bitcoin

  return (
    <div>
      <p>Current Chain ID: {chainId}</p>
      <p>Provider Type: {providerType || 'N/A'}</p>
      {providerType === 'eip155' && <button onClick={handleSignMessageEVM}>Sign EVM Message</button>}
      {providerType === 'solana' && <button onClick={handleSignMessageSolana}>Sign Solana Message</button>}
      {/* Add buttons for other provider types as needed */}
    </div>
  );
}

import { useWalletInfo } from '@reown/appkit-react-native';

export default function WalletDetails() {
  const { walletInfo } = useWalletInfo();

  if (!walletInfo) {
    return <p>No wallet connected or info unavailable.</p>;
  }

  return (
    <div>
      <h3>Connected Wallet:</h3>
      <p>Name: {walletInfo.name}</p>
      <p>Icon: {walletInfo.icon && <img src={walletInfo.icon} alt={walletInfo.name} width="24" />}</p>
      {/* Refer to TypeUtil.ts for other walletInfo properties e.g., rdns, id etc. */}
    </div>
  );
}

import { useAppKitEventSubscription } from '@reown/appkit-react-native'; 

export default function EventLogger() {
  useAppKitEventSubscription('MODAL_OPEN', event => { console.log('Modal opened!', event); });

  useAppKitEventSubscription('CONNECT_SUCCESS', event => { console.log('Wallet connected!', event); });

  return null; 
}

import { useAppKitState } from '@reown/appkit-react-native';

export default function AppStatus() {
  const { 
    isOpen, // Boolean indicating if the modal is currently open
    isLoading, // Boolean indicating if the modal is loading
    isConnected, // Boolean indicating if a user is connected
    chain, // The connected chain object
  } = useAppKitState();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <p>Modal is {isOpen ? 'open' : 'closed'}</p>
      <p>User is {isConnected ? 'connected' : 'not connected'}</p>
      {chain && <p>Connected to: {chain.name}</p>}
    </div>
  );
}

import { useAppKitTheme } from '@reown/appkit-react-native';

export default function ThemeControl() {
  const {
    themeMode, // 'dark' or 'light', the current theme mode
    themeVariables, // Current theme variables (e.g., { accent: '#00BB7F' })
    setThemeMode, // Function to change the theme mode
    setThemeVariables, // Function to update theme variables
  } = useAppKitTheme();

  return (
    <View>
      <Text>Current theme: {themeMode}</Text>
      <Button
        title="Toggle Theme"
        onPress={() => setThemeMode(themeMode === 'dark' ? 'light' : 'dark')}
      />
      <Button
        title="Set Accent Color"
        onPress={() => setThemeVariables({ accent: '#FF5733' })}
      />
      <Button
        title="Reset to System Theme"
        onPress={() => setThemeMode(undefined)}
      />
    </View>
  );
}

import { useAppKitLogs } from '@reown/appkit-react-native';

export default function DebugPanel() {
  const { 
    logs, // All logs from AppKit
    errorLogs, // Error-level logs only
    warningLogs, // Warning-level logs only
    infoLogs, // Info-level logs only
    debugLogs, // Debug-level logs only
    getLogsByLevel, // Get logs filtered by level
    getRecentLogs, // Get recent logs (default: 100)
    exportLogs, // Export all logs as JSON string
    getLogsStats, // Get logging statistics by level
    clearLogs, // Clear all logs
  } = useAppKitLogs();

  const handleExportLogs = () => {
    const logData = exportLogs();
    console.log('Exported logs:', logData);
  };

  return (
    <div>
      <p>Total logs: {logs.length}</p>
      <p>Error logs: {errorLogs.length}</p>
      <p>Warning logs: {warningLogs.length}</p>
      <button onClick={handleExportLogs}>Export Logs</button>
      <button onClick={clearLogs}>Clear Logs</button>
    </div>
  );
}