Installation

// src/AppKitConfig.ts (or wherever you prefer to configure it)
import "@walletconnect/react-native-compat";

import { createAppKit, bitcoin, solana, 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 { storage } from './StorageUtil'; // Import your custom storage

// You can use 'viem/chains' or define your own chains using `AppKitNetwork` type. Check Options/networks for more detailed info
import { mainnet, polygon } from 'viem/chains';

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

const ethersAdapter = new EthersAdapter();
const solanaAdapter = new SolanaAdapter();
const bitcoinAdapter = new BitcoinAdapter();

export const appKit = createAppKit({
  projectId,
  networks: [mainnet, polygon, solana, bitcoin],
  defaultNetwork: mainnet,
  adapters: [ethersAdapter, solanaAdapter, bitcoinAdapter],
  storage,

  // Other AppKit options (e.g., metadata for your dApp)
  metadata: {
    name: 'My Awesome dApp',
    description: 'My dApp description',
    url: 'https://myapp.com',
    icons: ['https://myapp.com/icon.png'],
    redirect: {
      native: "YOUR_APP_SCHEME://",
      universal: "YOUR_APP_UNIVERSAL_LINK.com",
    },
  }
});

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

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { AppKitProvider } from '@reown/appkit-react-native';
import { appKit } from './AppKitConfig'; // Your configured AppKit instance
import YourAppRootComponent from './YourAppRootComponent';

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

export default App;

// YourAppRootComponent.tsx (or App.tsx if it contains your main layout)
import React from 'react';
import { AppKit } from '@reown/appkit-react-native';
// ... other imports for your app components.

function YourAppRootComponent() {
  return (
    <>
      {/* Your application's content */}
      {/* Add the AppKit component here to render its UI */}
      <AppKit />
    </>
  );
}

export default YourAppRootComponent;

// components/ConnectButton.tsx
import { useAppKit, useAccount } from '@reown/appkit-react-native';

function ConnectButton() {
  const { open, disconnect } = useAppKit();
  const { address, isConnected, chainId } = useAccount();

  if (isConnected) {
    return (
      <div>
        <p>Connected to: {chainId}</p>
        <p>Address: {address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }

  return <button onClick={() => open()}>Connect Wallet</button>;
}

export default ConnectButton;

// src/AppKitConfig.ts (or wherever you prefer to configure it)
import "@walletconnect/react-native-compat";

import { createAppKit } from '@reown/appkit-react-native';
import { MMKV } from 'react-native-mmkv';
import { CoinbaseConnector } from '@reown/appkit-coinbase-react-native';

export const appKit = createAppKit({
  // ...
  extraConnectors: [
    new CoinbaseConnector({ storage: new MMKV() })
  ],
  // ...
});

// src/AppKitConfig.ts (or wherever you prefer to configure it)
import "@walletconnect/react-native-compat";

import { createAppKit } from '@reown/appkit-react-native';
import { SolanaAdapter, PhantomConnector, Solflare } from '@reown/appkit-solana-react-native';

export const appKit = createAppKit({
  // ...
  extraConnectors: [
    new PhantomConnector({ cluster: 'mainnet-beta' }), // Or 'devnet', 'testnet'
    new SolflareConnector({ cluster: 'mainnet-beta' }) // Or 'devnet', 'testnet'
  ],
  // ...
});