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
| 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
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.
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.
Ethers can help us interact with wallets and smart contracts:
import { BrowserProvider, Contract, parseEther } from 'ethers'
const provider = await appKit.subscribeProviders((state) => {
return state['eip155']
})
const addressFrom = await appKit.subscribeAccount((state) => {
return state
})
if (!provider) throw Error('No provider found')
if (!addressFrom) throw Error('No address found')
function sendTransaction() {
const tx = {
from: addressFrom,
to: '0x...', // any address
value: parseEther('0.0001')
}
const ethersProvider = new BrowserProvider(provider)
const signer = await ethersProvider.getSigner()
const tx = await signer.sendTransaction(tx)
console.log('transaction:', tx)
}
Modal State
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:
| 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 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
