npm package: @meshconnect/uwc-react
Description: React hooks and components for Universal Wallet Connector
Latest version: 0.6.3

# @meshconnect/uwc-react

React hooks and providers for Universal Wallet Connector.

## Installation

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

## Usage

### Setup Provider

```tsx
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:

```tsx
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:

```tsx
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:

```tsx
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:

```tsx
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:

```tsx
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
- `tonConnectConfig?: TonConnectConfig` - Optional TON Connect configuration (requires `manifestUrl`)

### 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.