Skip to content

Web3 Model

Reown SDK (Web3Modal) Overview

Reown SDK (formerly Web3Modal) is a wallet connection UI library developed by the WalletConnect team, providing a beautiful and easy-to-use wallet connection interface for Web3 applications. Supporting 300+ wallets through a single SDK, including browser wallets, mobile wallets, and hardware wallets, Reown greatly simplifies the complexity of multi-wallet integration. As a core component of the WalletConnect ecosystem, Reown SDK has been adopted by thousands of DApps and is the standard solution for Web3 wallet connection.

Official Website: https://reown.com/

Note: Web3Modal was rebranded to Reown SDK in 2024; the core functionality remains the same.

Core Features

1. Multi-Wallet Support

Broad wallet ecosystem:

  • 300+ *Wallets*: Supports mainstream and long-tail wallets
  • Auto Detection: Detects wallets the user has installed
  • WalletConnect: Connect mobile wallets via QR scanning
  • Wallet Recommendations: Intelligently recommends suitable wallets
  • Custom List: Configure which wallets to display

2. Multi-Chain Support

Cross-chain wallet connection:

  • Ethereum: Ethereum and its Layer 2s
  • *Solana: *Solana ecosystem
  • Cosmos: Cosmos ecosystem chains
  • Polkadot: Polkadot ecosystem
  • Other Chains: Continuously adding new chain support

3. Beautiful UI

Modern design:

  • Responsive: Adapts to mobile and desktop
  • Dark Mode: Built-in light and dark themes
  • Customizable: Custom brand colors and styles
  • Multi-Language: Supports internationalization
  • Smooth Animations: Elegant interaction animations

4. Complete Features

All-in-one solution:

  • Account Management: Display account information and balances
  • Network Switching: Convenient network switching UI
  • Transaction History: View recent transactions
  • Disconnect: Clear disconnect flow
  • Error Handling: Friendly error messages

Quick Start

Installation

# Install Reown SDK (AppKit)
npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem

React Integration

Using the Wagmi adapter:

import { createAppKit } from '@reown/appkit/react'
import { WagmiProvider } from 'wagmi'
import { arbitrum, mainnet } from '@reown/appkit/networks'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

// 1. Get projectId
const projectId = 'YOUR_PROJECT_ID'

// 2. Create wagmiAdapter
const wagmiAdapter = new WagmiAdapter({
  networks: [mainnet, arbitrum],
  projectId
})

// 3. Create modal
createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
  metadata: {
    name: 'My App',
    description: 'My App description',
    url: 'https://myapp.com',
    icons: ['https://myapp.com/icon.png']
  }
})

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        {/* Your App */}
        <w3m-button />
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Vue Integration

import { createAppKit } from '@reown/appkit/vue'
import { mainnet, arbitrum } from '@reown/appkit/networks'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

const projectId = 'YOUR_PROJECT_ID'

const wagmiAdapter = new WagmiAdapter({
  networks: [mainnet, arbitrum],
  projectId
})

createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
  metadata: {
    name: 'My App',
    description: 'My App description',
    url: 'https://myapp.com',
    icons: ['https://myapp.com/icon.png']
  }
})

Using Button Components

// Default connect button
<w3m-button />

// Account button
<w3m-account-button />

// Network button
<w3m-network-button />

Custom Configuration

Theme Customization

createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet],
  projectId,
  themeMode: 'dark', // 'light' | 'dark'
  themeVariables: {
    '--w3m-accent': '#7b3ff2',
    '--w3m-border-radius-master': '2px'
  }
})

Feature Configuration

createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet],
  projectId,
  features: {
    analytics: true, // Enable analytics
    email: true, // Enable email login
    socials: ['google', 'github'], // Social login
    emailShowWallets: true // Show wallet options
  }
})

Wallet Configuration

createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet],
  projectId,
  featuredWalletIds: [
    'wallet-id-1',
    'wallet-id-2'
  ],
  includeWalletIds: ['metamask', 'rainbow'],
  excludeWalletIds: ['wallet-to-exclude']
})

Advanced Features

Programmatic Control

import { useAppKit } from '@reown/appkit/react'

function MyComponent() {
  const { open, close } = useAppKit()

  return (
    <>
      <button onClick={() => open()}>Open Modal</button>
      <button onClick={() => open({ view: 'Networks' })}>
        Select Network
      </button>
    </>
  )
}

Event Listening

import { useAppKitEvents } from '@reown/appkit/react'

function MyComponent() {
  const events = useAppKitEvents()

  // Listen for connection events
  useEffect(() => {
    const handleConnect = () => {
      console.log('Wallet connected')
    }

    // Subscribe to events
    return () => {
      // Cleanup
    }
  }, [events])
}

Custom Wallets

createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet],
  projectId,
  customWallets: [
    {
      id: 'myWallet',
      name: 'My Custom Wallet',
      homepage: 'https://mywallet.com',
      image_url: 'https://mywallet.com/icon.png',
      mobile_link: 'mywallet://',
      desktop_link: 'https://mywallet.com/download'
    }
  ]
})

Solana Support

Solana Adapter

import { createAppKit } from '@reown/appkit/react'
import { SolanaAdapter } from '@reown/appkit-adapter-solana/react'
import { solana, solanaTestnet } from '@reown/appkit/networks'
import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets'

const solanaAdapter = new SolanaAdapter({
  wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()]
})

createAppKit({
  adapters: [solanaAdapter],
  networks: [solana, solanaTestnet],
  projectId,
  metadata: {
    name: 'My **Solana** App',
    description: 'My Solana **DApp**',
    url: 'https://myapp.com',
    icons: ['https://myapp.com/icon.png']
  }
})

Best Practices

1. User Experience

  • Display clear connection status
  • Provide friendly error messages
  • Support multiple connection methods
  • Optimize mobile experience
  • Implement auto-reconnection

2. Performance Optimization

  • Load wallet list on demand
  • Cache wallet connection state
  • Optimize image resources
  • Reduce unnecessary re-renders
  • Use code splitting

3. Security Recommendations

  • Verify wallet connection state
  • Check network ID
  • Implement signature verification
  • Handle disconnection
  • Protect sensitive operations

Comparison with Other Solutions

Feature Reown SDK RainbowKit ConnectKit
Wallet Count 300+ 100+ 50+
Multi-Chain Support Yes EVM Only EVM Only
UI Quality Excellent Excellent Good
Customization High High Medium
Email Login Supported Not Supported Not Supported
Social Login Supported Not Supported Not Supported

Migration Guide

Migrating from Web3Modal v2

// Old Web3Modal v2
import { Web3Modal } from '@web3modal/html'

// New Reown SDK
import { createAppKit } from '@reown/appkit/react'

// Configuration is mostly the same, with some API adjustments

Summary

Reown SDK (Web3Modal) has become the preferred wallet connection solution for Web3 applications by providing a beautiful UI and powerful features. With support for 300+ wallets, multi-chain compatibility, and rich customization options, developers can easily provide users with a first-class wallet connection experience. With the brand upgrade to Reown, the SDK will continue to evolve, providing better infrastructure support for the Web3 ecosystem. Whether for Ethereum, Solana, or other blockchain DApps, Reown SDK is a trusted choice.