@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, tonConnect } = useConnection(walletId)

  return (
    <div>
      {/* Injected connection (browser extensions) */}
      <button
        onClick={() => injected.connect()}
        disabled={injected.isLoading}
      >
        {injected.isLoading ? 'Connecting...' : 'Connect with Browser'}
      </button>

      {/* WalletConnect connection (EVM/Solana mobile) */}
      <button
        onClick={() => walletConnect.connect()}
        disabled={walletConnect.isLoading}
      >
        {walletConnect.isLoading ? 'Connecting...' : 'Connect with WalletConnect'}
      </button>

      {/* TON Connect connection (TON wallets) */}
      {tonConnect.available && (
        <button
          onClick={() => tonConnect.connect()}
          disabled={tonConnect.isLoading}
        >
          {tonConnect.isLoading ? 'Connecting...' : 'Connect TON Wallet'}
        </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>
  )
}

useSignSolanaTransaction

Sign a Solana transaction without broadcasting it — for fee-payer relay flows where a relay (e.g. your backend) pays the network fee and submits the transaction. Raw bytes in, signed bytes out, so callers don't need @solana/web3.js:

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

function SignButton({ unsignedTx }: { unsignedTx: Uint8Array }) {
  const { signSolanaTransaction, isLoading, error } = useSignSolanaTransaction()

  const onSign = async () => {
    const signedTx = await signSolanaTransaction(unsignedTx)
    // Hand signedTx to your relay to broadcast — UWC never sends it.
  }

  return (
    <div>
      <button onClick={onSign} disabled={isLoading}>
        {isLoading ? 'Signing...' : 'Sign Transaction'}
      </button>
      {error && <p>{error.message}</p>}
    </div>
  )
}

Works with injected wallets, WalletConnect, and through the iframe bridge.

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
• tonConnectConfig?: TonConnectConfig - Optional TON Connect configuration (requires manifestUrl)
• tronConnectorConfig?: TronConnectorConfig - Optional TRON connector configuration
• observer?: UWCObserver - Optional telemetry sink (onEvent, optional onLog) for wallet-handoff observability; with no observer wired nothing leaves the browser
• logger?: Logger / logLevel?: LogLevel - Optional runtime logging configuration
• correlationId?: string | (() => string) - Optional id stamped on every telemetry event; pass the getter form for an id that resolves late (e.g. a session id)

Read once. The provider builds one shared connector on the first render where wallets is non-empty, capturing observer / logger / logLevel / correlationId at that instant — later prop changes are ignored. Pass a stable observer from the first render (its onEvent can no-op until your sink is ready), use the correlationId getter for late ids, and connector.setLogLevel() for runtime level changes.

Hooks

useConnection(walletId: string)

Returns an object with connection methods for injected, WalletConnect, and TON Connect 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.

useSignSolanaTransaction()

Returns a sign-only signSolanaTransaction(bytes: Uint8Array) => Promise<Uint8Array> for Solana fee-payer relay flows, plus isLoading and error state. Never broadcasts — the relay owns submission.