useConnectWallet

Connect / disconnect actions and WalletConnect pairing state. Requires WalletsProvider.

This hook opens a wallet. For the list of already-connected instances, use useWalletConnections. To bind these methods to one provider (connect() without passing provider each time), use useWallet.

Options and errors: Connect wallet (Core).

Bring your own QR component — qrcode.react in the examples is only an example.

Situation	UI
Extension installed	Connect button
Desktop, no extension, WalletConnect supported	QR
Mobile in-app browser	Injected
Mobile Safari / Chrome	Open in wallet / deeplink
Deeplink wallet on desktop	QR or “open on phone”

Example

import { QRCodeSVG } from 'qrcode.react'
import { IntegrationProvider } from '@swapped/connect-sdk'
import { useConnectWallet } from '@swapped/connect-sdk/react'

function ConnectMetaMask() {
  const {
    connect,
    isConnecting,
    pairingUri,
    pairingDeeplinkUrl,
    errors,
  } = useConnectWallet()

  return (
    <div>
      <button
        type="button"
        disabled={isConnecting(IntegrationProvider.MetaMask)}
        onClick={() =>
          void connect({
            provider: IntegrationProvider.MetaMask,
            transport: 'injected',
            popupIfUnavailable: true,
          })
        }
      >
        Connect extension
      </button>
      <button
        type="button"
        onClick={() =>
          void connect({
            provider: IntegrationProvider.MetaMask,
            transport: 'walletconnect',
            force: true,
          })
        }
      >
        WalletConnect
      </button>
      {pairingUri ? <QRCodeSVG value={pairingUri} size={180} /> : null}
      {pairingDeeplinkUrl ? (
        <button
          type="button"
          onClick={() =>
            window.open(pairingDeeplinkUrl, '_blank', 'noopener,noreferrer')
          }
        >
          Open in wallet
        </button>
      ) : null}
      {errors[IntegrationProvider.MetaMask]}
    </div>
  )
}

Returns

Field	Meaning
connect(request)	Promise<WalletConnection | null>. Same ConnectWalletRequest as Core
requiresDeepLink(provider)	Open-in-wallet-app path on this device
supportsWalletConnect(provider)	WalletConnect is offered
getDeepLinkUrl(provider)	Browse URL, or null
openDeepLink(provider)	Opens that URL; returns it or null
cancelPairing()	Abort in-flight WalletConnect pairing
disconnect(walletId)	One instance
disconnectProvider(provider)	Every instance of that provider
disconnectAll()	Every connection
isConnecting(provider?)	In-flight connect. Omit provider for any connect
pairingUri	Current WalletConnect URI, or null
pairingDeeplinkUrl	Current WalletConnect mobile deep link, or null
errors	Last error message keyed by provider or walletId

Transports

When transport is omitted, the SDK uses injected if the extension is installed, otherwise walletconnect if supported.

Injected — connect({ transport: 'injected', forcePopup?, popupIfUnavailable? }). Some wallets have isPopupConnection on AvailableWallet.

WalletConnect — connect({ transport: 'walletconnect', force? }). pairingUri / pairingDeeplinkUrl update while pairing. The demo renders pairingUri as a QR and uses pairingDeeplinkUrl for “Open in wallet”. cancelPairing() rejects the pending connect with WALLET_PAIRING_CANCELLED.

Deeplink — when requiresDeepLink(provider) is true, getDeepLinkUrl / openDeepLink open Swapped inside the wallet app. connect({ transport: 'injected' }) on that path returns null after handing off. Treat null as “opened the wallet app”, not a failed connect. isMobileBrowser() is exported from @swapped/connect-sdk.

Errors

connect / disconnect reject with ConnectSdkError. See Errors and Connect wallet (Core).