For a quick integration, you can use the createAppKit function with a unified configuration. This automatically applies the predefined configurations for different adapters like Wagmi, Ethers, or Solana, so you no longer need to manually configure each one individually. Simply pass the common parameters such as projectId, chains, metadata, etc., and the function will handle the adapter-specific configurations under the hood.
This includes WalletConnect, Coinbase and Injected connectors, and the Blockchain API as a transport
In your main.js file set up the following configuration.
import { createAppKit } from '@reown/appkit'import { mainnet, arbitrum } from '@reown/appkit/networks'import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'// 1. Get a project ID at https://cloud.reown.comconst projectId = 'YOUR_PROJECT_ID'export const networks = [mainnet, arbitrum]// 2. Set up Wagmi adapterconst wagmiAdapter = new WagmiAdapter({ projectId, networks})// 3. Configure the metadataconst metadata = { name: 'AppKit', description: 'AppKit Example', url: 'https://example.com', // origin must match your domain & subdomain icons: ['https://avatars.githubusercontent.com/u/179229932']}// 3. Create the modalconst modal = createAppKit({ adapters: [wagmiAdapter], networks: [mainnet, arbitrum], metadata, projectId, features: { analytics: true // Optional - defaults to your Cloud configuration }})// 4. Trigger modal programaticalyconst openConnectModalBtn = document.getElementById('open-connect-modal')const openNetworkModalBtn = document.getElementById('open-network-modal')openConnectModalBtn.addEventListener('click', () => modal.open())openNetworkModalBtn.addEventListener('click', () => modal.open({ view: 'Networks' }))// 5. Alternatively use w3m component buttons within the index.html file
Reown AppKit use Viem networks under the hood, which provide a wide variety of networks for EVM chains. You can find all the networks supported by Viem within the @reown/appkit/networks path.
import { createAppKit } from '@reown/appkit'import { mainnet, arbitrum, base, scroll, polygon } from '@reown/appkit/networks'
Looking to add a custom network? Check out the custom networks section.
For a quick integration, you can use the createAppKit function with a unified configuration. This automatically applies the predefined configurations for different adapters like Wagmi, Ethers, or Solana, so you no longer need to manually configure each one individually. Simply pass the common parameters such as projectId, chains, metadata, etc., and the function will handle the adapter-specific configurations under the hood.
This includes WalletConnect, Coinbase and Injected connectors, and the Blockchain API as a transport
In your main.js file set up the following configuration.
import { createAppKit } from '@reown/appkit'import { mainnet, arbitrum } from '@reown/appkit/networks'import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'// 1. Get a project ID at https://cloud.reown.comconst projectId = 'YOUR_PROJECT_ID'export const networks = [mainnet, arbitrum]// 2. Set up Wagmi adapterconst wagmiAdapter = new WagmiAdapter({ projectId, networks})// 3. Configure the metadataconst metadata = { name: 'AppKit', description: 'AppKit Example', url: 'https://example.com', // origin must match your domain & subdomain icons: ['https://avatars.githubusercontent.com/u/179229932']}// 3. Create the modalconst modal = createAppKit({ adapters: [wagmiAdapter], networks: [mainnet, arbitrum], metadata, projectId, features: { analytics: true // Optional - defaults to your Cloud configuration }})// 4. Trigger modal programaticalyconst openConnectModalBtn = document.getElementById('open-connect-modal')const openNetworkModalBtn = document.getElementById('open-network-modal')openConnectModalBtn.addEventListener('click', () => modal.open())openNetworkModalBtn.addEventListener('click', () => modal.open({ view: 'Networks' }))// 5. Alternatively use w3m component buttons within the index.html file
Reown AppKit use Viem networks under the hood, which provide a wide variety of networks for EVM chains. You can find all the networks supported by Viem within the @reown/appkit/networks path.
import { createAppKit } from '@reown/appkit'import { mainnet, arbitrum, base, scroll, polygon } from '@reown/appkit/networks'
Looking to add a custom network? Check out the custom networks section.
In your main.js file set up the following configuration.
import { createAppKit } from "@reown/appkit";import { Ethers5Adapter } from "@reown/appkit-adapter-ethers5";import { mainnet, arbitrum } from "@reown/appkit/networks";// 1. Get projectId at https://cloud.reown.comconst projectId = "YOUR_PROJECT_ID";// 2. Create your application's metadata objectconst metadata = { name: "My Website", description: "My Website description", url: "https://mywebsite.com", // url must match your domain & subdomain icons: ["https://avatars.mywebsite.com/"],};// 3. Create a AppKit instanceconst modal = createAppKit({ adapters: [new Ethers5Adapter()], metadata: metadata, networks: [mainnet, arbitrum], projectId, features: { analytics: true, // Optional - defaults to your Cloud configuration },});
Make sure that the url from the metadata matches your domain and subdomain. This will later be used by the Verify API to tell wallets if your application has been verified or not.
In your main.js file set up the following configuration.
import { createAppKit } from "@reown/appkit";import { EthersAdapter } from "@reown/appkit-adapter-ethers";import { mainnet, arbitrum } from "@reown/appkit/networks";// 1. Get projectId from https://cloud.reown.comconst projectId = "YOUR_PROJECT_ID";// 2. Create your application's metadata objectconst metadata = { name: "AppKit", description: "AppKit Example", url: "https://reown.com/appkit", // origin must match your domain & subdomain icons: ["https://avatars.githubusercontent.com/u/179229932"],};// 3. Create a AppKit instanceconst modal = createAppKit({ adapters: [new EthersAdapter()], networks: [mainnet, arbitrum], metadata, projectId, features: { analytics: true, // Optional - defaults to your Cloud configuration },});
Make sure that the url from the metadata matches your domain and subdomain. This will later be used by the Verify API to tell wallets if your application has been verified or not.
AppKit Solana is built on top of the AppKit library and provides a set of components and actions to easily connect Solana wallets with your application.
On top of your app set up the following configuration.
import { createAppKit } from "@reown/appkit";import { SolanaAdapter } from "@reown/appkit-adapter-solana";import { solana, solanaTestnet, solanaDevnet } from "@reown/appkit/networks";// 0. Set up Solana Adapterconst solanaWeb3JsAdapter = new SolanaAdapter();// 1. Get projectId from https://cloud.reown.comconst projectId = "YOUR_PROJECT_ID";// 2. Create a metadata object - optionalconst metadata = { name: "AppKit", description: "AppKit Solana Example", url: "https://example.com", // origin must match your domain & subdomain icons: ["https://avatars.githubusercontent.com/u/179229932"],};// 3. Create modalcreateAppKit({ adapters: [solanaWeb3JsAdapter], networks: [solana, solanaTestnet, solanaDevnet], metadata: metadata, projectId, features: { analytics: true, // Optional - defaults to your Cloud configuration },});
AppKit Bitcoin is built on top of the AppKit library and provides a set of components and actions to easily connect Bitcoin wallets with your decentralized application.
On top of your app set up the following configuration.
// App.tsximport { createAppKit } from '@reown/appkit'import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'import { bitcoin } from '@reown/appkit/networks'// 1. Get projectId from https://cloud.reown.comconst projectId = 'YOUR_PROJECT_ID'// 2. Set the networksconst networks = [bitcoin]// 3. Set up Bitcoin Adapterconst bitcoinAdapter = new BitcoinAdapter({ projectId})// 4. Create a metadata object - optionalconst metadata = { name: 'AppKit', description: 'AppKit Bitcoin Example', url: 'https://example.com', // origin must match your domain & subdomain icons: ['https://avatars.githubusercontent.com/u/179229932']}// 5. Create modalconst modal = createAppKit({ adapters: [bitcoinAdapter], networks, metadata, projectId, features: { analytics: true // Optional - defaults to your Cloud configuration, email: false, socials: [] }})// 6. Trigger modal programaticalyconst openConnectModalBtn = document.getElementById('open-connect-modal')const openNetworkModalBtn = document.getElementById('open-network-modal')openConnectModalBtn.addEventListener('click', () => modal.open())openNetworkModalBtn.addEventListener('click', () => modal.open({ view: 'Networks' }))
export type SignMessageParams = { /** * The message to be signed */ message: string /** * The address to sign the message with */ address: string }
export type SignMessageParams = { /** * The message to be signed */ message: string /** * The address to sign the message with */ address: string }
export type SendTransferParams = { /** * The amount to be sent in satoshis */ amount: string /** * The address to send the transfer to */ recipient: string }
export type SignPSBTParams = { /** * The PSBT to be signed, string base64 encoded */ psbt: string signInputs: { /** * The address whose private key to use for signing. */ address: string /** * Specifies which input to sign */ index: number /** * Specifies which part(s) of the transaction the signature commits to */ sighashTypes: number[] }[] /** * If `true`, the PSBT will be broadcasted after signing. Default is `false`. */ broadcast?: boolean}
export type AccountAddress = { /** * Public address belonging to the account. */ address: string /** * Public key for the derivation path in hex, without 0x prefix */ publicKey?: string /** * The derivation path of the address e.g. "m/84'/0'/0'/0/0" */ path?: string /** * The purpose of the address */ purpose: 'payment' | 'ordinal' | 'stx' }
export type AccountAddress = { /** * Public address belonging to the account. */ address: string /** * Public key for the derivation path in hex, without 0x prefix */ publicKey?: string /** * The derivation path of the address e.g. "m/84'/0'/0'/0/0" */ path?: string /** * The purpose of the address */ purpose: 'payment' | 'ordinal' | 'stx' }
export type SignPSBTResponse = { /** * The signed PSBT, string base64 encoded */ psbt: string /** * The `string` transaction id of the broadcasted transaction or `undefined` if not broadcasted */ txid?: string }
To open AppKit you can use our web component or build your own button with AppKit actions.
In this example we are going to use the <appkit-button> component.
Web components are global html elements that don’t require importing.
To open AppKit you can use our web component or build your own button with AppKit actions.
In this example we are going to use the <appkit-button> component.
Web components are global html elements that don’t require importing.
To open AppKit you can use our web component or build your own button with AppKit actions.
In this example we are going to use the <appkit-button> component.
Web components are global html elements that don’t require importing.
To open AppKit you can use our web component or build your own button with AppKit actions.
In this example we are going to use the <appkit-button> component.
Web components are global html elements that don’t require importing.