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 + ``` +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 + + # 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 + ``` +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 + ``` +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}
+ +This adapter uses Ethers.js for interacting with EVM chains.
```bash - npx expo install @reown/appkit-ethers-react-native + npx expo install @reown/appkit-ethers-react-native@alpha ```To initialize the Ethers adapter:
```typescript @@ -75,7 +75,7 @@ Install the adapters for the chains you intend to support:First, install the Reown Wagmi adapter and its peer dependencies:
```bash # Install the Reown Wagmi adapter - npx expo install @reown/appkit-wagmi-react-native + 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 @@ -147,7 +147,7 @@ Install the adapters for the chains you intend to support:For Solana, install the Solana adapter:
```bash - npx expo install @reown/appkit-solana-react-native + npx expo install @reown/appkit-solana-react-native@alpha ```To initialize the Solana adapter:
```typescript @@ -160,7 +160,7 @@ Install the adapters for the chains you intend to support:For Bitcoin, install the Bitcoin adapter:
```bash - npx expo install @reown/appkit-bitcoin-react-native + npx expo install @reown/appkit-bitcoin-react-native@alpha ```To initialize the Bitcoin adapter:
```typescript diff --git a/appkit/react-native/core/migration-multichain.mdx b/appkit/react-native/core/migration-multichain.mdx index c44bdaea2..9ebeed778 100644 --- a/appkit/react-native/core/migration-multichain.mdx +++ b/appkit/react-native/core/migration-multichain.mdx @@ -29,12 +29,12 @@ Install the main AppKit library along with essential peer dependencies for React ```bash # For Expo projects -npx expo install @reown/appkit-react-native @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat expo-application +npx expo install @reown/appkit-react-native@alpha @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat expo-application # For React Native CLI projects -npm install @reown/appkit-react-native @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat +npm install @reown/appkit-react-native@alpha @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat # or -yarn add @reown/appkit-react-native @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat +yarn add @reown/appkit-react-native@alpha @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat ``` Then, for iOS in React Native CLI projects: ```bash @@ -47,34 +47,34 @@ Based on the blockchains your dApp needs to support, install the corresponding a - **EVM (Ethers):** ```bash # For Expo - npx expo install @reown/appkit-ethers-react-native + npx expo install @reown/appkit-ethers-react-native@alpha # For RN CLI - # npm install @reown/appkit-ethers-react-native - # yarn add @reown/appkit-ethers-react-native + # npm install @reown/appkit-ethers-react-native@alpha + # yarn add @reown/appkit-ethers-react-native@alpha ``` - **EVM (Wagmi):** ```bash # For Expo - npx expo install @reown/appkit-wagmi-react-native wagmi viem@2.x @tanstack/react-query + npx expo install @reown/appkit-wagmi-react-native@alpha wagmi viem@2.x @tanstack/react-query # For RN CLI - # npm install @reown/appkit-wagmi-react-native wagmi viem@2.x @tanstack/react-query - # yarn add @reown/appkit-wagmi-react-native wagmi viem@2.x @tanstack/react-query + # npm install @reown/appkit-wagmi-react-native@alpha wagmi viem@2.x @tanstack/react-query + # yarn add @reown/appkit-wagmi-react-native@alpha wagmi viem@2.x @tanstack/react-query ``` - **Solana:** ```bash # For Expo - npx expo install @reown/appkit-solana-react-native + npx expo install @reown/appkit-solana-react-native@alpha # For RN CLI - # npm install @reown/appkit-solana-react-native - # yarn add @reown/appkit-solana-react-native + # npm install @reown/appkit-solana-react-native@alpha + # yarn add @reown/appkit-solana-react-native@alpha ``` - **Bitcoin:** ```bash # For Expo - npx expo install @reown/appkit-bitcoin-react-native + npx expo install @reown/appkit-bitcoin-react-native@alpha # For RN CLI - # npm install @reown/appkit-bitcoin-react-native - # yarn add @reown/appkit-bitcoin-react-native + # npm install @reown/appkit-bitcoin-react-native@alpha + # yarn add @reown/appkit-bitcoin-react-native@alpha ```