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

# useSwap

Hook to open the Swap interface using the Wallet Services plugin.

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 { useSwap } from '@web3auth/modal/react'

```

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

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

function SwapButton() {
  const { showSwap, loading, error } = useSwap()

  return (
    <div>
      <button onClick={() => showSwap()} disabled={loading}>
        {loading ? 'Opening Swap...' : 'Open Swap'}
      </button>
      {error && <div>Error: {error.message}</div>}
    </div>
  )
}

```

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

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

```

#### `loading`[​](#loading "Direct link to loading")

`boolean`

Whether the swap interface is being opened.

#### `error`[​](#error "Direct link to error")

`Web3AuthError | null`

Error that occurred while opening the swap interface.

#### `showSwap`[​](#showswap "Direct link to showswap")

`(showSwapParams?: BaseEmbedControllerState["showSwap"]) => Promise<void>`

Function to open the swap interface. Accepts optional parameters for customizing the swap view.