Composables - Reown Docs

Composables are functions that will help you control the modal, subscribe to wallet events and interact with them and smart contracts.

Composable Ecosystem

AppKit provides a comprehensive set of Vue composables that work together to provide a complete wallet connection and blockchain interaction experience. These composables can be categorized into several functional groups:

Connection Composables: Manage wallet connections and user authentication (useAppKit, useAppKitAccount, useAppKitProvider, useDisconnect)
Network Composables: Handle blockchain network selection and information (useAppKitNetwork)
UI Control Composables: Control the modal and UI elements (useAppKitState, useAppKitTheme)
Data Access Composables: Access wallet and blockchain data (useWalletInfo)
Event Composables: Subscribe to wallet and connection events (useAppKitEvents)
Payment Composables: Handle crypto payments and exchange integrations (usePay, useAvailableExchanges, usePayUrlActions, useExchangeBuyStatus)
Multi-Wallet Composables: Manage multiple wallet connections (useAppKitConnections, useAppKitConnection)
Authentication Composables: Handle authentication and user management (useAppKitUpdateEmail, useAppKitSIWX)
Solana-Specific Composables: Solana blockchain interactions (useAppKitConnection from Solana adapter)

The diagram below illustrates how these composables relate to each other and to the core AppKit functionality: This modular approach allows you to use only the composables you need for your specific use case, whether you’re building a simple wallet connection interface or a complex multi-chain application with payment capabilities.

useAppKit

Composable function for controlling the modal.

import { useAppKit } from "@reown/appkit/vue";

export default function Component() {
  const { open, close } = useAppKit();
}

Returns

open: Function to open the modal
close: Function to close the modal

Parameters

You can also select the modal’s view when calling the open function

open({ view: "Account" });

// to connect and show multi wallets view
open({ view: "Connect" });

// to connect and show only solana wallets
open({ view: "Connect", namespace: "solana" });

// to connect and show only bitcoin wallets
open({ view: "Connect", namespace: "bip122" });

// to connect and show only ethereum wallets
open({ view: "Connect", namespace: "eip155" });

// to open swap with arguments
open({
  view: 'Swap',
  arguments: {
    amount: '321.123',
    fromToken: 'USDC',
    toToken: 'ETH'
  }
})

// to open wallet send interface
open({ view: 'WalletSend' })

List of views you can select

useAppKitAccount

Composable function for accessing account data and connection status.

import { useAppKitAccount } from "@reown/appkit/vue";

const accountData = useAppKitAccount();

Composable function for accessing account data and connection status for each namespace when working in a multi-chain environment.

import { useAppKitAccount } from "@reown/appkit/vue";

const eip155Account = useAppKitAccount({ namespace: "eip155" }); // for EVM chains
const solanaAccount = useAppKitAccount({ namespace: "solana" });
const bip122Account = useAppKitAccount({ namespace: "bip122" }); // for bitcoin

Returns

accountData.value.address: The current account address
accountData.value.caipAddress: The current account address in CAIP format
accountData.value.isConnected: Boolean that indicates if the user is connected
accountData.value.status: The current connection status

Getting Bitcoin Public Keys

When working with Bitcoin accounts, you can extract public keys from the connected accounts:

<template>
  <div>
    <div v-for="(key, index) in publicKeys" :key="index">
      Public Key: {{ key }}
    </div>
  </div>
</template>

<script setup>
import { useAppKitAccount } from "@reown/appkit/vue";
import { computed } from 'vue';

const { allAccounts } = useAppKitAccount({ chainNamespace: 'bip122' });
const publicKeys = computed(() => allAccounts.value.map(acc => acc.publicKey));
</script>

This is particularly useful when you need to access Bitcoin public keys for transaction signing or address derivation.

useAppKitNetwork

Composable function for accessing network data and methods.

import { useAppKitNetwork } from "@reown/appkit/vue";

export default Component(){
  const networkData = useAppKitNetwork()
}

Returns

networkData.caipNetwork: The current network object
networkData.caipNetworkId: The current network id in CAIP format
networkData.chainId: The current chain id
networkData.switchNetwork: Function to switch the network. Accepts a caipNetwork object as argument.

switchNetwork Usage

import { polygon } from '@reown/appkit/networks'

...

networkData.switchNetwork(polygon)

See how to import or create a networks here.

useAppKitState

Composable function for getting the current value of the modal’s state.

import { useAppKitState } from "@reown/appkit/vue";

const stateData = useAppKitState();

Returns

stateData.initialized: Boolean that indicates if AppKit has been initialized. This sets to true when all controllers, adapters and internal state is ready
stateData.loading: Boolean that indicates if AppKit is loading
stateData.open: Boolean that indicates if the modal is open
stateData.selectedNetworkId: The current chain id selected by the user in CAIP-2 format
stateData.activeChain: The active chain namespace (e.g., ‘eip155’, ‘solana’, ‘bip122’)

Example Usage

<template>
  <div>
    <div v-if="!stateData.initialized">Initializing AppKit...</div>
    <div v-else-if="stateData.loading">Loading...</div>
    <div v-else>
      <p>Modal is {{ stateData.open ? 'open' : 'closed' }}</p>
      <p>Selected Network: {{ stateData.selectedNetworkId }}</p>
      <p>Active Chain: {{ stateData.activeChain }}</p>
    </div>
  </div>
</template>

<script setup>
import { useAppKitState } from "@reown/appkit/vue";

const stateData = useAppKitState();
</script>

useAppKitTheme

Composable function for controlling the modal’s theme.

import { useAppKitTheme } from "@reown/appkit/vue";
const themeAction = useAppKitTheme();
// or
// const { setThemeMode, setThemeVariables } = useAppKitTheme()

Returns

themeAction.themeMode: Get theme Mode.
themeAction.themeVariables: Get theme variables.
themeAction.setThemeMode: Set theme Mode. Accepts a string as parameter (‘dark’ | ‘light’)
themeAction.setThemeVariables: Set theme variables. Check the example usage.

Example Usage

setThemeMode("dark");

setThemeVariables({
  "--w3m-color-mix": "#00BB7F",
  "--w3m-color-mix-strength": 40,
});

useAppKitEvents

Composable function for subscribing to modal events.

import { useAppKitEvents } from "@reown/appkit/vue";

const events = useAppKitEvents();

Returns

events.timestamp: Get the timestamp of the event
events.data.event: Get string of the event.
events.data.properties: get more information from the event.

useDisconnect

Composable function for disconnecting the session.

import { useDisconnect } from "@reown/appkit/vue";

const { disconnect } = useDisconnect();

// Disconnect from all namespaces
await disconnect();

// Disconnect from specific namespace
await disconnect({ namespace: 'eip155' }); // Disconnect from Ethereum
await disconnect({ namespace: 'solana' }); // Disconnect from Solana
await disconnect({ namespace: 'bip122' }); // Disconnect from Bitcoin

Parameters

namespace (optional): The specific chain namespace to disconnect from. If not provided, disconnects from all connected namespaces.

Use Cases

Implementing a “Disconnect Wallet” button
Handling logout flows in your application
Cleaning up resources when a user disconnects
Resetting application state after disconnection
Disconnecting from specific chains in multi-chain applications

useWalletInfo

Composable function for accessing wallet information.

import { useWalletInfo } from '@reown/appkit/vue'


export default Component(){
  const { walletInfo } = useWalletInfo()
}

useAppKitProvider

Composable function that returns the walletProvider and the WalletProviderType for interacting with the connected wallet across different blockchain adapters.

import { useAppKitProvider } from "@reown/appkit/vue";
import type { Provider } from "@reown/appkit/vue";

const { walletProvider } = useAppKitProvider<Provider>("eip155");

Use Cases

Direct wallet interactions (signing messages, sending transactions)
Access to wallet-specific methods and properties
Integration with blockchain libraries (Ethers, Wagmi, Solana Web3.js)

Examples

import { useAppKitProvider } from "@reown/appkit/vue";
import type { Provider } from "@reown/appkit/vue";

const { walletProvider } = useAppKitProvider<Provider>("eip155");

Returns

walletProvider: The wallet provider instance for the specified chain namespace
walletProviderType: The type of wallet provider currently connected

useAppKitConnections

Composable function that manages multiple wallet connections and provides access to all connected wallets. Use this composable when building applications that support multiple simultaneous wallet connections.

import { useAppKitConnections } from "@reown/appkit/vue";

export default function Component() {
  const { connections, disconnect } = useAppKitConnections();
}

Use Cases

Managing multiple wallet connections simultaneously
Building multi-wallet dashboards or portfolio views
Implementing wallet comparison features
Creating advanced wallet management interfaces

Returns

connections: Reactive reference to array of all connected wallet connections
disconnect: Function to disconnect a specific wallet connection

Related composables: useAppKitConnection, useAppKitAccount

useAppKitConnection

Composable function that manages the active wallet connection and provides connection switching capabilities. Use this composable when you need to work with the currently active connection or switch between multiple connections.

import { useAppKitConnection } from "@reown/appkit/vue";

export default function Component() {
  const { connection, switchConnection } = useAppKitConnection();
}

Use Cases

Switching between multiple connected wallets
Accessing the currently active wallet connection
Building connection management interfaces
Implementing wallet-specific features based on the active connection

Returns

connection: Reactive reference to the currently active wallet connection
switchConnection: Function to switch to a different connected wallet

Related composables: useAppKitConnections, useAppKitAccount

usePay

Composable function that manages payment modal interactions and handles crypto payment flows. Use this composable when implementing payment features with exchange integrations.

import { usePay } from "@reown/appkit-pay/vue";

export default function Component() {
  const { pay, isLoading, error } = usePay({
    onSuccess: (result) => console.log('Payment successful:', result),
    onError: (error) => console.error('Payment failed:', error)
  });
}

Use Cases

Implementing crypto payment flows in your application
Handling payment success and error states
Integrating with centralized exchanges for payments
Building custom payment interfaces

Parameters

onSuccess: Optional callback function called when payment succeeds
onError: Optional callback function called when payment fails

Returns

pay: Function to initiate a payment with specified parameters
isLoading: Reactive reference to boolean indicating if a payment is in progress
error: Reactive reference to error object if payment fails

Related composables: useAvailableExchanges, usePayUrlActions

useAvailableExchanges

Composable function that fetches and manages the state for available exchanges. Use this composable when you need to display available payment options or filter exchanges based on criteria.

import { useAvailableExchanges } from "@reown/appkit-pay/vue";

export default function Component() {
  const { data, isLoading, error, fetch } = useAvailableExchanges({
    isFetchOnInit: true,
    asset: 'ETH',
    amount: 100,
    network: 'eip155:1'
  });
}

Use Cases

Displaying available exchanges to users
Filtering exchanges based on asset or network
Building custom exchange selection interfaces
Implementing exchange comparison features

Parameters

isFetchOnInit: Whether to fetch exchanges on composable initialization
asset: Filter exchanges by specific asset
amount: Filter exchanges by minimum amount
network: Filter exchanges by network support

Returns

data: Reactive reference to array of available exchanges
isLoading: Reactive reference to boolean indicating if exchanges are being fetched
error: Reactive reference to error object if fetching fails
fetch: Function to manually refetch exchanges

Related composables: usePay, usePayUrlActions

usePayUrlActions

Composable function that provides functions to interact with specific exchange URLs, returning the sessionId needed for status tracking. Use this composable when implementing custom exchange flows.

import { usePayUrlActions } from "@reown/appkit-pay/vue";

export default function Component() {
  const { getUrl, openUrl } = usePayUrlActions();

  // Get exchange URL
  const handleGetUrl = async () => {
    const { url, sessionId } = await getUrl('binance', {
      asset: 'ETH',
      amount: 0.1,
      recipient: '0x...'
    });
  };

  // Open exchange URL in new tab
  const handleOpenUrl = async () => {
    const { url, sessionId } = await openUrl('coinbase', {
      asset: 'USDC',
      amount: 100,
      recipient: '0x...'
    }, true);
  };
}

Use Cases

Building custom exchange integration flows
Implementing exchange URL generation
Creating custom payment interfaces
Tracking exchange sessions for status monitoring

Returns

getUrl: Function that returns exchange URL and session ID
openUrl: Function that opens exchange URL and returns session data

Related composables: useExchangeBuyStatus, useAvailableExchanges

useExchangeBuyStatus

Composable function that fetches and polls for the status of a headless payment transaction using exchangeId and sessionId. Use this composable to track payment progress and handle completion.

import { useExchangeBuyStatus } from "@reown/appkit-pay/vue";

export default function Component() {
  const { data, isLoading, error, refetch } = useExchangeBuyStatus({
    exchangeId: 'binance',
    sessionId: 'session-123',
    pollingInterval: 5000,
    isEnabled: true,
    onSuccess: (status) => console.log('Payment completed:', status),
    onError: (error) => console.error('Payment failed:', error)
  });
}

Use Cases

Tracking payment transaction status
Implementing payment progress indicators
Handling payment completion and failure states
Building real-time payment monitoring

Parameters

exchangeId: The exchange identifier
sessionId: The session ID from payment URL actions
pollingInterval: How often to check status (in milliseconds)
isEnabled: Whether to enable status polling
onSuccess: Callback for successful payment completion
onError: Callback for payment errors

Returns

data: Reactive reference to current payment status data
isLoading: Reactive reference to boolean indicating if status is being fetched
error: Reactive reference to error object if status fetching fails
refetch: Function to manually refetch status

Related composables: usePayUrlActions, usePay

useAppKitUpdateEmail

Composable function that updates user email address with success and error handling. Use this composable when implementing email update functionality for user accounts.

import { useAppKitUpdateEmail } from "@reown/appkit/vue";

export default function Component() {
  const { data, error, isPending, isError, isSuccess, updateEmail } = useAppKitUpdateEmail({
    onSuccess: (data) => console.log('Email updated:', data.email),
    onError: (error) => console.error('Update failed:', error)
  });
}

Use Cases

Implementing email update functionality
Building user profile management interfaces
Handling email verification flows
Creating account settings pages

Parameters

onSuccess: Optional callback function called when email update succeeds
onError: Optional callback function called when email update fails

Returns

data: Reactive reference to updated email data object
error: Reactive reference to error object if update fails
isPending: Reactive reference to boolean indicating if update is in progress
isError: Reactive reference to boolean indicating if there was an error
isSuccess: Reactive reference to boolean indicating if update was successful
updateEmail: Function to trigger email update

Related composables: useAppKitAccount, useWalletInfo

useAppKitSIWX

Composable function that provides access to Sign In With X (SIWX) configuration and state. Use this composable when implementing custom authentication flows with various blockchain protocols.

import { useAppKitSIWX } from "@reown/appkit/vue";

export default function Component() {
  const siwxConfig = useAppKitSIWX();

  if (siwxConfig.value) {
    console.log('SIWX enabled with config:', siwxConfig.value);
  }
}

Use Cases

Implementing custom Sign In With X flows
Accessing SIWX configuration for custom authentication
Building protocol-specific authentication interfaces
Handling multi-protocol sign-in scenarios

Returns

siwxConfig: Reactive reference to the current SIWX configuration object, or undefined if not configured

Related composables: useAppKitAccount, useAppKitUpdateEmail

useAppKitConnection (Solana)

Solana-specific composable function that provides access to the Solana connection instance for blockchain interactions. Use this composable when building Solana-specific features.

import { useAppKitConnection } from "@reown/appkit-adapter-solana/vue";

export default function Component() {
  const { connection } = useAppKitConnection();

  const getBalance = async (publicKey) => {
    if (connection.value) {
      // Use connection for Solana blockchain interactions
      const balance = await connection.value.getBalance(publicKey);
      return balance;
    }
  };
}

Use Cases

Accessing Solana connection for blockchain interactions
Building Solana-specific transaction flows
Implementing Solana program interactions
Creating Solana wallet features

Returns

connection: Reactive reference to the Solana connection instance, or undefined if not connected

This is the Solana-specific version of useAppKitConnection. For general connection management, see useAppKitConnection.

Ethereum/Solana Library

You can use Wagmi actions to sign messages, interact with smart contracts, and much more.

getAccount

Action for accessing account data and connection status.

import { getAccount } from "@wagmi/core";

const account = getAccount();

signMessage

Action for signing messages with connected account.

import { signMessage } from "@wagmi/core";

const signature = await signMessage({
  message: "gm wagmi frens",
});

useAppKitProvider

Hook that returns the walletProvider and the WalletProviderType.

import { useAppKitProvider } from "@reown/appkit/vue";
import type { Provider } from "@reown/appkit/vue";

function Components() {
  const { walletProvider } = useAppKitProvider<Provider>("eip155");

  async function onSignMessage() {
    console.log(walletProvider);
  }

  return <button onClick={() => onSignMessage()}>Sign Message</button>;
}

Fundamentals

Authentication

Early Access

Payments

Transactions

Cloud

​Composable Ecosystem

​useAppKit

​Returns

​Parameters

​useAppKitAccount

​Returns

​Getting Bitcoin Public Keys

​useAppKitNetwork

​Returns

​switchNetwork Usage

​useAppKitState

​Returns

​Example Usage

​useAppKitTheme

​Returns

​Example Usage

​useAppKitEvents

​Returns

​useDisconnect

​Parameters

​Use Cases

​useWalletInfo

​useAppKitProvider

​Use Cases

​Examples

​Returns

​useAppKitConnections

​Use Cases

​Returns

​useAppKitConnection

​Use Cases

​Returns

​usePay

​Use Cases

​Parameters

​Returns

​useAvailableExchanges

​Use Cases

​Parameters

​Returns

​usePayUrlActions

​Use Cases

​Returns

​useExchangeBuyStatus

​Use Cases

​Parameters

​Returns

​useAppKitUpdateEmail

​Use Cases

​Parameters

​Returns

​useAppKitSIWX

​Use Cases

​Returns

​useAppKitConnection (Solana)

​Use Cases

​Returns

​Ethereum/Solana Library

​getAccount

​signMessage

​useAppKitProvider

Learn More

Composable Ecosystem

useAppKit

Returns

Parameters

useAppKitAccount

Returns

Getting Bitcoin Public Keys

useAppKitNetwork

Returns

switchNetwork Usage

useAppKitState

Returns

Example Usage

useAppKitTheme

Returns

Example Usage

useAppKitEvents

Returns

useDisconnect

Parameters

Use Cases

useWalletInfo

useAppKitProvider

Use Cases

Examples

Returns

useAppKitConnections

Use Cases

Returns

useAppKitConnection

Use Cases

Returns

usePay

Use Cases

Parameters

Returns

useAvailableExchanges

Use Cases

Parameters

Returns

usePayUrlActions

Use Cases

Returns

useExchangeBuyStatus

Use Cases

Parameters

Returns

useAppKitUpdateEmail

Use Cases

Parameters

Returns

useAppKitSIWX

Use Cases

Returns

useAppKitConnection (Solana)

Use Cases

Returns

Ethereum/Solana Library

getAccount

signMessage

useAppKitProvider