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
You can also select the modal’s view when calling the open
function
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
WalletInfo
Metadata information from the connected wallet
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.
signMessage
Action for signing messages with connected account.
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.
signMessage
Action for signing messages with connected account.
Learn More
Modal State
Get the current value of the modal’s state
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.
ThemeMode
Set the themeMode
after creating the modal
Get the current themeMode
value by calling the getThemeMode
function
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:
- Install the package:
- Import the library in your project and create the AppKit Wallet Button:
- Use this script for your Button called ‘walletButton’:
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
Get the current themeVariables
value by calling the getThemeVariables
function