Actions

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

Open and close the modal

const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
});

modal.open();

modal.close();

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

modal.open({ view: "Account" });

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

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

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

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

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

List of views you can select

Variable	Description
Connect	Principal view of the modal - default view when disconnected. A namespace can be selected to connect to a specific network (solana, bip122, or eip155).
Account	User profile - default view when connected.
AllWallets	Shows the list of all available wallets.
Networks	List of available networks - you can select and target a specific network before connecting.
WhatIsANetwork	”What is a network” onboarding view.
WhatIsAWallet	”What is a wallet” onboarding view.
OnRampProviders	On-Ramp main view.
Swap	Swap main view.

Disconnect

modal.adapter?.connectionControllerClient?.disconnect();

WalletInfo

Metadata information from the connected wallet

function handler({ name, icon }) {
  console.log(name, icon);
}

modal.subscribeWalletInfo(handler);

//or

const { name, icon } = modal.getWalletInfo();

Provider Access

Access wallet providers for direct blockchain interactions across different namespaces.

subscribeProviders

Subscribe to provider state changes and access wallet providers for different blockchain namespaces.

const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
});

const unsubscribe = modal.subscribeProviders((state) => {
  const eip155Provider = state["eip155"];
  const solanaProvider = state["solana"];
  const bitcoinProvider = state["bip122"];
  
  console.log("Providers updated:", { eip155Provider, solanaProvider, bitcoinProvider });
});

const providers = modal.getProviders();
const eip155Provider = providers["eip155"];

Examples by Namespace

EVM (eip155)

import { BrowserProvider, Contract, parseEther } from "ethers";

const provider = await modal.subscribeProviders((state) => {
  return state["eip155"];
});

if (!provider) throw Error("No EVM provider found");

const ethersProvider = new BrowserProvider(provider);
const signer = await ethersProvider.getSigner();

import { BrowserProvider, Contract, parseEther } from "ethers";

const provider = await modal.subscribeProviders((state) => {
  return state["eip155"];
});

if (!provider) throw Error("No EVM provider found");

const ethersProvider = new BrowserProvider(provider);
const signer = await ethersProvider.getSigner();

const provider = await modal.subscribeProviders((state) => {
  return state["solana"];
});

if (!provider) throw Error("No Solana provider found");

const signature = await provider.signMessage(new TextEncoder().encode("Hello"));

const provider = await modal.subscribeProviders((state) => {
  return state["bip122"];
});

if (!provider) throw Error("No Bitcoin provider found");

const signature = await provider.signMessage("Hello from AppKit");

Ethereum Library

Wagmi

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";
import { wagmiConfig } from "./main";

const account = getAccount(wagmiConfig);

signMessage

Action for signing messages with connected account.

import { signMessage } from "@wagmi/core";
import { wagmiConfig } from "./main";

await signMessage(wagmiConfig, { message: "hello world" });

Learn More

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";
import { wagmiConfig } from "./main";

const account = getAccount(wagmiConfig);

signMessage

Action for signing messages with connected account.

import { signMessage } from "@wagmi/core";
import { wagmiConfig } from "./main";

await signMessage(wagmiConfig, { message: "hello world" });

Learn More

You can use the following methods to get data and subscribe to changes:

getAddress

const address = modal.getAddress();

getError

const error = modal.getError();

getChainId

const chainId = modal.getChainId();

switchNetwork

import { createAppKit } from "@reown/appkit";
import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";

const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    analytics: true,
  },
});

modal.switchNetwork(polygon);

getIsConnected

const isConnected = modal.getIsConnected();

getWalletProvider

The wallet provider.

const walletProvider = modal.getWalletProvider();

getWalletProviderType

const walletProviderType = modal.getWalletProviderType();

subscribeProvider

function handleChange({
  provider,
  providerType,
  address,
  error,
  chainId,
  isConnected,
}) {
  //...
}

modal.subscribeProvider(handleChange);

Learn More

Modal State

Get the current value of the modal’s state

const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
});

const { open, selectedNetworkId } = modal.getState();

The modal state is an object of two properties:

Property	Description	Type
open	Open state will be true when the modal is open and false when closed.	boolean
selectedNetworkId	The current chain id selected by the user.	number

You can also subscribe to the modal’s state changes.

const modal = createAppKit({ wagmiConfig, projectId });

modal.subscribeState((newState) => console.log(newState));

ThemeMode

Set the themeMode after creating the modal

const modal = createAppKit({ wagmiConfig, projectId });

modal.setThemeMode("dark");

Get the current themeMode value by calling the getThemeMode function

const modal = createAppKit({ wagmiConfig, projectId });

const themeMode = modal.getThemeMode();

Wallet Buttons

Using wallet buttons (Demo in our Lab), you can directly connect to the top 20 wallets, WalletConnect QR and also all the social logins. This feature allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need for the traditional modal.

Follow these steps to use the component:

1. Install the package:

npm

npm install @reown/appkit-wallet-button

2. Import the library in your project and create the AppKit Wallet Button:

import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

// Create AppKit Wallet Button
const appKitWalletButton = createAppKitWalletButton()

3. Use this script for your Button called ‘walletButton’:

document.getElementById('walletButton')?.addEventListener(
  'click', async () => {
    // check if it's ready
    if (appKitWalletButton.isReady()) {
      appKitWalletButton
          .connect('walletConnect')
          .then(data => {
              console.log('connected', data)
          })
          .catch(err => {
              console.log('error connecting', err)
          })
    } else {
      console.log('appKitWalletButton is not ready')
    }
  }
)

 

Options for wallet property.

Change the string parameter name from appKitWalletButton.connect(name) in order to open a different wallet.

Type	Options
QR Code	walletConnect
Wallets	metamask, trust, coinbase, rainbow, coinbase, jupiter, solflare, coin98, magic-eden, backpack, frontier, xverse, okx, bitget, leather, binance, uniswap, safepal, bybit, phantom, ledger, timeless-x, safe, zerion, oneinch, crypto-com, imtoken, kraken, ronin, robinhood, exodus, argent, and tokenpocket
Social logins	google, github, apple, facebook, x, discord, and farcaster

themeVariables

Set the themeVariables after creating the modal

const modal = createAppKit({ wagmiConfig, projectId })

modal.setThemeVariables({ ... })

Get the current themeVariables value by calling the getThemeVariables function

const modal = createAppKit({ wagmiConfig, projectId });

const themeMode = modal.getThemeVariables();

Subscribe to theme changes

const unsubscribe = modal.subscribeTheme((newTheme) => console.log(newTheme));

Track modal events

modal.getEvent(); // get last event
modal.subscribeEvents((event) => console.log(event)); // subscribe to events