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();
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'
}
})
// to open wallet send interface
modal.open({ view: 'WalletSend' })
| 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. |
WalletSend | Token sending interface that allows users to send tokens to another address. |
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)
Solana
Bitcoin (bip122)
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();
Ethereum 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";
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" });
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();
| 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");
themeMode value by calling the getThemeMode function
const modal = createAppKit({ wagmiConfig, projectId });
const themeMode = modal.getThemeMode();
- Install the package:
npm install @reown/appkit-wallet-button
- Import and use it in your Javascript dApp:
<script type="module">
import { createAppKitWalletButton } from '@reown/appkit-wallet-button';
const wb = createAppKitWalletButton();
function connectWallet(id) {
if (wb.isReady()) {
wb.connect(id);
}
}
// Attach it to the global scope so it can be called from inline HTML
window.connectWallet = connectWallet;
</script>
<button onclick="connectWallet('walletConnect')">Open QR modal</button>
<button onclick="connectWallet('metamask')">Connect to MetaMask</button>
<button onclick="connectWallet('google')">Connect to Google</button>
Multichain Support
You can specify a blockchain namespace to target specific chains:
<script type="module">
import { createAppKitWalletButton } from '@reown/appkit-wallet-button';
// Create wallet buttons for different namespaces
const evmWalletButton = createAppKitWalletButton({ namespace: 'eip155' });
const solanaWalletButton = createAppKitWalletButton({ namespace: 'solana' });
const bitcoinWalletButton = createAppKitWalletButton({ namespace: 'bip122' });
function connectEVMWallet(id) {
if (evmWalletButton.isReady()) {
evmWalletButton.connect(id);
}
}
function connectSolanaWallet(id) {
if (solanaWalletButton.isReady()) {
solanaWalletButton.connect(id);
}
}
function connectBitcoinWallet(id) {
if (bitcoinWalletButton.isReady()) {
bitcoinWalletButton.connect(id);
}
}
// Attach to global scope
window.connectEVMWallet = connectEVMWallet;
window.connectSolanaWallet = connectSolanaWallet;
window.connectBitcoinWallet = connectBitcoinWallet;
</script>
<!-- Connect to Ethereum/EVM chains -->
<button onclick="connectEVMWallet('metamask')">Connect MetaMask (EVM)</button>
<!-- Connect to Solana -->
<button onclick="connectSolanaWallet('phantom')">Connect Phantom (Solana)</button>
<!-- Connect to Bitcoin -->
<button onclick="connectBitcoinWallet('leather')">Connect Leather (Bitcoin)</button>
Make sure to call createAppKitWalletButton after createAppKit.
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 |
Options for namespace property
| Value | Description |
|---|
eip155 | Ethereum and EVM-compatible chains |
solana | Solana blockchain |
bip122 | Bitcoin blockchain |
themeVariables
Set the themeVariables after creating the modal
const modal = createAppKit({ wagmiConfig, projectId })
modal.setThemeVariables({ ... })
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
