@meshconnect/uwc-react

React hooks and providers for Universal Wallet Connector.

Installation

npm install @meshconnect/uwc-react @meshconnect/uwc-core @meshconnect/uwc-types @meshconnect/uwc-constants

Usage

Setup Provider

import { ConnectionProvider } from '@meshconnect/uwc-react'
import { mainnetNetwork, baseNetwork } from '@meshconnect/uwc-constants'
import type { WalletMetadata } from '@meshconnect/uwc-types'

// Define your wallets
const wallets: WalletMetadata[] = [
  {
    id: 'metamask',
    name: 'MetaMask',
    metadata: {
      icon: 'https://...',
      description: 'Connect with MetaMask'
    },
    extensionInjectedProvider: {
      supportedNetworkIds: ['eip155:1', 'eip155:8453'],
      // ... other config
    },
    walletConnectProvider: {
      supportedNetworkIds: ['eip155:1', 'eip155:8453']
    }
  }
]

function App() {
  return (
    <ConnectionProvider
      networks={[mainnetNetwork, baseNetwork]}
      wallets={wallets}
      usingIntegratedBrowser={false}
    >
      {/* Your app */}
    </ConnectionProvider>
  )
}

Using Hooks

useConnection

Connect to a specific wallet with different connection modes:

import { useConnection } from '@meshconnect/uwc-react'

function WalletButton({ walletId }: { walletId: string }) {
  const { walletConnect, injected } = useConnection(walletId)
  
  return (
    <div>
      {/* Injected connection */}
      <button 
        onClick={() => injected.connect()}
        disabled={injected.isLoading}
      >
        {injected.isLoading ? 'Connecting...' : 'Connect with Browser'}
      </button>
      
      {/* WalletConnect connection */}
      <button 
        onClick={() => walletConnect.connect()}
        disabled={walletConnect.isLoading}
      >
        {walletConnect.isLoading ? 'Connecting...' : 'Connect with WalletConnect'}
      </button>
      
      {/* Show QR code URI when available */}
      {walletConnect.connectionURI && (
        <div>Connection URI: {walletConnect.connectionURI}</div>
      )}
    </div>
  )
}

useSwitchNetwork

Switch between available networks:

import { useSwitchNetwork, useSession } from '@meshconnect/uwc-react'

function NetworkSwitcher() {
  const { switchNetwork, isLoading, isWaitingForUserApproval } = useSwitchNetwork()
  const session = useSession()
  
  return (
    <div>
      <p>Current network: {session.activeNetwork?.name}</p>
      
      <button 
        onClick={() => switchNetwork('eip155:1')}
        disabled={isLoading}
      >
        {isWaitingForUserApproval 
          ? 'Waiting for approval...' 
          : isLoading 
          ? 'Switching...' 
          : 'Switch to Mainnet'}
      </button>
    </div>
  )
}

useDisconnect

Disconnect from the current wallet:

import { useDisconnect } from '@meshconnect/uwc-react'

function DisconnectButton() {
  const { disconnect, isLoading } = useDisconnect()
  
  return (
    <button onClick={disconnect} disabled={isLoading}>
      {isLoading ? 'Disconnecting...' : 'Disconnect'}
    </button>
  )
}

useSession

Access the current session state:

import { useSession } from '@meshconnect/uwc-react'

function SessionInfo() {
  const session = useSession()
  
  return (
    <div>
      <p>Connected: {session.activeAddress ? 'Yes' : 'No'}</p>
      <p>Address: {session.activeAddress}</p>
      <p>Network: {session.activeNetwork?.name}</p>
      <p>Wallet: {session.activeWallet?.name}</p>
      <p>Mode: {session.connectionMode}</p>
    </div>
  )
}

useWallets and useNetworks

Access available wallets and networks:

import { useWallets, useNetworks } from '@meshconnect/uwc-react'

function WalletList() {
  const wallets = useWallets()
  const networks = useNetworks()
  
  return (
    <div>
      <h3>Available Wallets:</h3>
      {wallets.map(wallet => (
        <div key={wallet.id}>
          {wallet.name}
        </div>
      ))}
      
      <h3>Available Networks:</h3>
      {networks.map(network => (
        <div key={network.id}>
          {network.name}
        </div>
      ))}
    </div>
  )
}

API Reference

ConnectionProvider

Provider component that initializes the UniversalWalletConnector and provides it to child components.

Props:

• networks: Network[] - Array of supported networks
• wallets: WalletMetadata[] - Array of supported wallets
• usingIntegratedBrowser?: boolean - Whether using integrated browser (default: false)
• walletConnectConfig?: WalletConnectConfig - Optional WalletConnect configuration

Hooks

useConnection(walletId: string)

Returns an object with connection methods for both injected and WalletConnect modes.

useSwitchNetwork()

Returns methods and state for switching networks.

useDisconnect()

Returns disconnect method and loading state.

useSession()

Returns the current session state.

useWallets()

Returns the list of available wallets.

useNetworks()

Returns the list of available networks.