Connected to chain: {chainId}
+Address: {address}
+Not Connected
; +} ``` -Please connect your wallet.
; + } + + const handleSignMessageEVM = async () => { + if (providerType === 'eip155' && address) { + // const ethersProvider = new BrowserProvider(provider); // Or however the provider is typed + // const signer = await ethersProvider.getSigner(); + // const signature = await signer.signMessage('Hello from AppKit!'); + // console.log('EVM Signature:', signature); + alert('EVM sign message functionality to be implemented using the provider.'); + } + }; + + const handleSignMessageSolana = async () => { + if (providerType === 'solana' && address) { + // const solanaConnection = provider as Connection; // Cast to Solana Connection + // const message = `Hello from AppKit! Address: ${address}`; + // const encodedMessage = new TextEncoder().encode(message); + // const signature = await provider.signMessage(encodedMessage, 'utf8'); // Assuming provider has signMessage + // console.log('Solana Signature:', signature); + alert('Solana sign message functionality to be implemented using the provider.'); + } + }; + + // Similar functions can be created for Bitcoin + + return ( +Current Chain ID: {chainId}
+Provider Type: {providerType || 'N/A'}
+ {providerType === 'eip155' && } + {providerType === 'solana' && } + {/* Add buttons for other provider types as needed */} +No wallet connected or info unavailable.
; + } -useAppKitEventSubscription('MODAL_OPEN', newEvent => { - // your code here -}); + return ( +Name: {walletInfo.name}
+Icon: {walletInfo.icon && }
For EVM-compatible chains, you can choose between the Ethers.js-based adapter or the Wagmi-based adapter. You should install the one that best fits your project's existing setup or preference.
+ +This adapter uses Ethers.js for interacting with EVM chains.
+ ```bash + npx expo install @reown/appkit-ethers-react-native@alpha + ``` +To initialize the Ethers adapter:
+ ```typescript + import { EthersAdapter } from '@reown/appkit-ethers-react-native'; + + const projectId = 'YOUR_PROJECT_ID'; // Obtain from Cloud + const ethersAdapter = new EthersAdapter({ projectId }); + ``` +This adapter integrates with Wagmi for state management and EVM interactions. It requires a few more setup steps compared to the Ethers adapter.
+ +1. Install Packages:
+First, install the Reown Wagmi adapter and its peer dependencies:
+ ```bash + # Install the Reown Wagmi adapter + npx expo install @reown/appkit-wagmi-react-native@alpha + + # Install Wagmi and its required peer dependencies + npx expo install wagmi viem@2.x @tanstack/react-query + ``` + +2. Configure Wagmi and Initialize Adapter:
+The `WagmiAdapter` requires a Wagmi configuration object. You'll create this using `createConfig` from `wagmi` (we recommend aliasing it, e.g., to `createWagmiConfig`, if you also use `createConfig` from AppKit). This config, defining your chains and transports, is then passed to the `WagmiAdapter` during its initialization within your AppKit setup file (e.g., `src/AppKitConfig.ts`).
+ + ```typescript + // src/AppKitConfig.ts (or wherever you configure AppKit) + import "@walletconnect/react-native-compat"; + import { createAppKit } from '@reown/appkit-react-native'; // Assuming other AppKit imports are present + import { WagmiAdapter } from '@reown/appkit-wagmi-react-native'; + import { http, createConfig as createWagmiCoreConfig } from 'wagmi'; + import { mainnet, sepolia } from 'wagmi/chains'; // Or other chains you need + // ... other adapter imports if any + + const projectId = 'YOUR_PROJECT_ID'; // Obtain from Cloud + + export const wagmiAdapter = new WagmiAdapter({ + projectId, + networks: [mainnet, sepolia], // Add all chains you want to support + }); + + export const appKit = createAppKit({ + projectId, + // Add your AppKitNetwork array for 'networks' matching the wagmiCoreConfig chains + // networks: [mainnet, sepolia, ...], + adapters: [wagmiAdapter, /* other adapters for other chain types */], + // ... other AppKit options + }); + ``` +3. Set up Context Providers in App.tsx:
+Wagmi requires its own context provider (`WagmiProvider`) and also relies on TanStack Query (`QueryClientProvider`). You'll need to wrap your application (or the relevant part of it) with these providers, in addition to the `AppKitProvider`. The `config` prop for `WagmiProvider` must be the `wagmiConfig` instance from your initialized `WagmiAdapter`. Refer to the official Wagmi documentation for details on provider setup.
+ + ```tsx + // App.tsx + import React from 'react'; + import { AppKitProvider } from '@reown/appkit-react-native'; + import { appKit, wagmiAdapter } from './AppKitConfig'; // Your configured AppKit instance + import YourAppRootComponent from './YourAppRootComponent'; // Your main app component + + import { WagmiProvider } from 'wagmi'; + import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; + + const queryClient = new QueryClient(); + + function App() { + return ( +For a practical implementation example, you can refer to the Reown AppKit + Wagmi example on GitHub.
+For Solana, install the Solana adapter:
+ ```bash + npx expo install @reown/appkit-solana-react-native@alpha + ``` +To initialize the Solana adapter:
+ ```typescript + import { SolanaAdapter } from '@reown/appkit-solana-react-native'; + + const projectId = 'YOUR_PROJECT_ID'; // Obtain from Cloud + const solanaAdapter = new SolanaAdapter({ projectId }); + ``` +For Bitcoin, install the Bitcoin adapter:
+ ```bash + npx expo install @reown/appkit-bitcoin-react-native@alpha + ``` +To initialize the Bitcoin adapter:
+ ```typescript + import { BitcoinAdapter } from '@reown/appkit-bitcoin-react-native'; + + const projectId = 'YOUR_PROJECT_ID'; // Obtain from Cloud + const bitcoinAdapter = new BitcoinAdapter({ projectId }); + ``` +Connected to: {chainId}
+Address: {address}
+ +