Migrate to Multichain

# 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-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-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-community/netinfo @walletconnect/react-native-compat

npx pod-install

// App.tsx or your AppKitConfig.ts
import "@walletconnect/react-native-compat"; // MUST BE THE VERY FIRST IMPORT

// ... other imports like React, createAppKit, adapters, etc.

// Old implementation
import { createAppKit, defaultWagmiConfig } from "@reown/appkit-wagmi-react-native";
import { mainnet, polygon } from "@wagmi/chains";

const projectId = "YOUR_PROJECT_ID";
const metadata = { /* ... */ };
const chains = [mainnet, polygon];

const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });

const appKitInstance = createAppKit({
  wagmiConfig,
  projectId,
  metadata,
  // ... other options
});

// New approach: src/AppKitConfig.ts (or your preferred file)
import "@walletconnect/react-native-compat"; // Ensure this is the first import

import { createAppKit, type AppKitNetwork } from "@reown/appkit-react-native";
import { EthersAdapter } from "@reown/appkit-ethers-react-native";
import { SolanaAdapter } from "@reown/appkit-solana-react-native";
import { BitcoinAdapter } from "@reown/appkit-bitcoin-react-native";
import { WagmiAdapter } from "@reown/appkit-wagmi-react-native";

// Import chain definitions (examples)
import { mainnet, polygon } from "viem/chains"; // For EVM
import { solana, bitcoin } from "@reown/appkit-react-native"; // Pre-defined AppKitNetwork objects

const projectId = "YOUR_PROJECT_ID"; // Obtain from https://dashboard.reown.com/

const metadata = { /* ... */ };

// 1. Define your AppKitNetworks (for AppKit's UI and network management)
// These can come from viem/chains (for EVM) or be custom AppKitNetwork objects.
const appNetworks: AppKitNetwork[] = [
  mainnet, // viem chains are automatically compatible as AppKitNetwork for 'eip155'
  polygon,
  solana,
  bitcoin,
  // You can also define custom AppKitNetwork objects here
];

// 2. Initialize Adapters for the chains you want to support
// For EVM chains, choose ONE of the following adapters (EthersAdapter or WagmiAdapter):

// Option A: EthersAdapter for general EVM support
const ethersAdapter = new EthersAdapter();

// Option B: WagmiAdapter if you are using Wagmi for EVM state management
const wagmiEvmNetworks = [viemMainnet, viemPolygon]; // Subset of appNetworks or specific Wagmi chains
const wagmiAdapter = new WagmiAdapter({
  projectId,
  networks: [mainnet, polygon], // These are Wagmi/viem chain objects
});

// Initialize adapters for other chains as needed
const solanaAdapter = new SolanaAdapter();
const bitcoinAdapter = new BitcoinAdapter();

// 3. Create the AppKit instance
// In this example, we'll use EthersAdapter for EVM chains.
// If you chose WagmiAdapter, replace ethersAdapter with wagmiAdapter below.
export const appKit = createAppKit({
  projectId,
  metadata,
  networks: appNetworks, // Master list of networks for AppKit UI and context
  adapters: [
    ethersAdapter,  // Handles EVM chains defined in 'networks'
    // wagmiAdapter, // Or use this if you chose Wagmi for EVM
    solanaAdapter,  // Handles Solana chains
    bitcoinAdapter, // Handles Bitcoin chains
  ],
  // ... other AppKit options (see Options page)
});

// App.tsx
import "@walletconnect/react-native-compat";

import React from 'react';
import { AppKitProvider } from '@reown/appkit-react-native';
import { appKit } from './AppKitConfig'; // Your configured AppKit instance
import YourAppRootComponent from './YourAppRootComponent'; // Or your main app layout

function App() {
  return (
    <AppKitProvider instance={appKit}>
      <YourAppRootComponent />
    </AppKitProvider>
  );
}
export default App;

// App.tsx (if using WagmiAdapter)
import "@walletconnect/react-native-compat";

import React from 'react';
import { AppKitProvider } from '@reown/appkit-react-native';
import { appKit, wagmiAdapter } from './AppKitConfig'; 
import YourAppRootComponent from './YourAppRootComponent';

import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <AppKitProvider instance={appKit}>
      <WagmiProvider config={wagmiAdapter.wagmiConfig} reconnectOnMount={false}>
        <QueryClientProvider client={queryClient}>
          <YourAppRootComponent />
        </QueryClientProvider>
      </WagmiProvider>
    </AppKitProvider>
  );
}
export default App;

// YourAppRootComponent.tsx (Simplified)
import React from 'react';
import { AppKit } from '@reown/appkit-react-native';
// ... your other components ...

function YourAppRootComponent() {
  return (
    <>
      {/* Your app's content */}
      {/* ... e.g., ConnectButton, etc. ... */}
      
      <AppKit /> {/* This renders the modal and other AppKit UI */}
    </>
  );
}
export default YourAppRootComponent;