> For the complete documentation index, see [llms.txt](/llms.txt).

# useWalletServicesPlugin

Hook to access the Wallet Services plugin context, enabling wallet-related features such as WalletConnect, checkout, swap, and wallet UI.

info

Please note that this hook doesn't work for external wallet logins. It only works for social login embedded wallets.

### Import[​](#import "Direct link to Import")

```
import { useWalletServicesPlugin } from '@web3auth/modal/react'

```

### Usage[​](#usage "Direct link to Usage")

```
import { useWalletServicesPlugin } from '@web3auth/modal/react'

function WalletServicesExample() {
  const { isPluginConnected, showWalletConnectScanner, showCheckout, showWalletUI } =
    useWalletServicesPlugin()

  return (
    <div>
      <button onClick={() => showWalletConnectScanner()} disabled={!isPluginConnected}>
        Show WalletConnect Scanner
      </button>
      <button onClick={() => showCheckout()} disabled={!isPluginConnected}>
        Show Checkout
      </button>
      <button onClick={() => showWalletUI()} disabled={!isPluginConnected}>
        Show Wallet UI
      </button>
    </div>
  )
}

```

### Return type[​](#return-type "Direct link to Return type")

```
import { type IWalletServicesContext } from '@web3auth/modal/react'

```

#### `IsPluginConnected`[​](#ispluginconnected "Direct link to ispluginconnected")

`boolean`

Whether the Wallet Services plugin is connected and ready to use.

#### `showWalletConnectScanner`[​](#showwalletconnectscanner "Direct link to showwalletconnectscanner")

`(showWalletConnectParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise<void>`

Shows the WalletConnect QR scanner. Accepts optional parameters for customizing the scanner behavior.

#### `showCheckout`[​](#showcheckout "Direct link to showcheckout")

`(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise<void>`

Shows the topup modal for fiat-to-crypto checkout. Accepts optional parameters for customizing the checkout experience.

#### `showWalletUI`[​](#showwalletui "Direct link to showwalletui")

`(showWalletUiParams?: BaseEmbedControllerState["showWalletUi"]) => Promise<void>`

Shows the Wallet Services modal UI. Accepts optional parameters for customizing the wallet UI experience.