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

import { createAppKit } from '@reown/appkit'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { arbitrum, mainnet } from '@reown/appkit/networks'

const wagmiAdapter = new WagmiAdapter({
  networks: [mainnet, arbitrum],
  projectId
})

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

appKit.open();

appKit.close();

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

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

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

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

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

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

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

List of views you can select

VariableDescription
ConnectPrincipal view of the modal - default view when disconnected. A namespace can be selected to connect to a specific network (solana, bip122, or eip155).
AccountUser profile - default view when connected.
AllWalletsShows the list of all available wallets.
NetworksList 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.
OnRampProvidersOn-Ramp main view.
SwapSwap main view.

Disconnect

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

WalletInfo

Metadata information from the connected wallet

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

appKit.subscribeWalletInfo(handler);

//or

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

Svelte Store Integration

You can use Svelte stores to manage AppKit state across your application:

// lib/stores/appkit.ts
import { writable } from 'svelte/store';
import { browser } from '$app/environment';

let appKit: ReturnType<typeof createAppKit> | undefined = undefined;

if (browser) {
  // Initialize AppKit only in browser environment
  appKit = createAppKit({
    adapters: [wagmiAdapter],
    networks: [mainnet, arbitrum],
    projectId,
  });
}

export const appKitStore = writable(appKit);

Ethereum Library

You can use Wagmi actions to interact with wallets and smart contracts:

import { readContract } from '@wagmi/core'
import { USDTAbi } from '../abi/USDTAbi'

const USDTAddress = '0x...'

const data = readContract(wagmiConfig, {
  address: USDTAddress,
  abi: USDTAbi,
  functionName: 'totalSupply',
  args: []
})

Read more about Wagmi actions for smart contract interaction here.

Get the current value of the modal’s state

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

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

The modal state is an object of two properties:

PropertyDescriptionType
openOpen state will be true when the modal is open and false when closed.boolean
selectedNetworkIdThe current chain id selected by the user.number

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

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

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

ThemeMode

Set the themeMode after creating the modal

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

appKit.setThemeMode("dark");

Get the current themeMode value by calling the getThemeMode function

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

const themeMode = appKit.getThemeMode();

themeVariables

Set the themeVariables after creating the modal

const appKit = createAppKit({ wagmiConfig, projectId })

appKit.setThemeVariables({ ... })

Get the current themeVariables value by calling the getThemeVariables function

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

const themeMode = appKit.getThemeVariables();

Subscribe to theme changes

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

Track modal events

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