JavaScript

AppKit has support for Wagmi and Ethers v6 on Ethereum, @solana/web3.js on Solana and Bitcoin. Choose one of these to get started.

We recommend using Vite to get started with AppKit JavaScript.

Installation

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem

npm install @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2

npm install @reown/appkit @reown/appkit-adapter-ethers ethers

npm install @reown/appkit @reown/appkit-adapter-solana

npm install @reown/appkit @reown/appkit-adapter-bitcoin

Cloud Configuration

Create a new project on Reown Cloud at https://cloud.reown.com and obtain a new project ID.

Don’t have a project ID?

Head over to Reown Cloud and create a new project now!

Get started

Implementation

wagmi Example

Check the JavaScript wagmi example

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.com
const projectId = 'YOUR_PROJECT_ID'

export const networks = [mainnet, arbitrum]

// 2. Set up Wagmi adapter
const wagmiAdapter = new WagmiAdapter({
  projectId,
  networks
})

// 3. Configure the metadata
const 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 modal
const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  metadata,
  projectId,
  features: {
    analytics: true // Optional - defaults to your Cloud configuration
  }
})

// 4. Trigger modal programaticaly
const 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

Importing networks

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.

wagmi Example

Check the JavaScript wagmi example

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.com
const projectId = 'YOUR_PROJECT_ID'

export const networks = [mainnet, arbitrum]

// 2. Set up Wagmi adapter
const wagmiAdapter = new WagmiAdapter({
  projectId,
  networks
})

// 3. Configure the metadata
const 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 modal
const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  metadata,
  projectId,
  features: {
    analytics: true // Optional - defaults to your Cloud configuration
  }
})

// 4. Trigger modal programaticaly
const 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

Importing networks

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.com
const projectId = "YOUR_PROJECT_ID";

// 2. Create your application's metadata object
const 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 instance
const 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.

ethers Example

Check the JavaScript ethers example

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.com
const projectId = "YOUR_PROJECT_ID";

// 2. Create your application's metadata object
const 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 instance
const 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.

Solana Example

Check the JavaScript Solana example

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 Adapter
const solanaWeb3JsAdapter = new SolanaAdapter();

// 1. Get projectId from https://cloud.reown.com
const projectId = "YOUR_PROJECT_ID";

// 2. Create a metadata object - optional
const 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 modal
createAppKit({
  adapters: [solanaWeb3JsAdapter],
  networks: [solana, solanaTestnet, solanaDevnet],
  metadata: metadata,
  projectId,
  features: {
    analytics: true, // Optional - defaults to your Cloud configuration
  },
});

Bitcoin Example

Check the JavaScript Bitcoin example

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.tsx
import { createAppKit } from '@reown/appkit'
import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
import { bitcoin } from '@reown/appkit/networks'

// 1. Get projectId from https://cloud.reown.com
const projectId = 'YOUR_PROJECT_ID'

// 2. Set the networks
const networks = [bitcoin]

// 3. Set up Bitcoin Adapter
const bitcoinAdapter = new BitcoinAdapter({
  projectId
})

// 4. Create a metadata object - optional
const 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 modal
const modal = createAppKit({
  adapters: [bitcoinAdapter],
  networks,
  metadata,
  projectId,
  features: {
    analytics: true // Optional - defaults to your Cloud configuration,
    email: false,
    socials: []
  }
})

// 6. Trigger modal programaticaly
const 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' }))

Bitcoin Provider Interface

export interface BitcoinConnector extends ChainAdapterConnector, Provider {
  getAccountAddresses(): Promise<BitcoinConnector.AccountAddress[]>;
  signMessage(params: BitcoinConnector.SignMessageParams): Promise<string>;
  sendTransfer(params: BitcoinConnector.SendTransferParams): Promise<string>;
  signPSBT(
    params: BitcoinConnector.SignPSBTParams
  ): Promise<BitcoinConnector.SignPSBTResponse>;
}

Parameters

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

}

Responses

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.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Example</title>
  </head>
  <body>
    <div id="app">
      <button id="open-connect-modal">Open Modal</button>
      <button id="open-network-modal">Open Networks</button>
      <appkit-button />
      <appkit-network-button />
    </div>
    <script type="module" src="main.js"></script>
  </body>
</html>

Learn more about the AppKit web components here

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.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Example</title>
  </head>
  <body>
    <div id="app">
      <button id="open-connect-modal">Open Modal</button>
      <button id="open-network-modal">Open Networks</button>
      <appkit-button />
      <appkit-network-button />
    </div>
    <script type="module" src="main.js"></script>
  </body>
</html>

Learn more about the AppKit web components here

To open AppKit you can use our web component or build your own button with AppKit actions.

<body>
    <div id="app">
      <appkit-button />
      <appkit-network-button />
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Learn more about the AppKit web components here

Web components are global html elements that don’t require importing.

<body>
    <div id="app">
      <appkit-button />
      <appkit-network-button />
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Learn more about the AppKit web components here

Web components are global html elements that don’t require importing.

You can trigger the modal by calling the open function from a modal instance returned by createAppKit.

Let’s first add two html button elements into our index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Example</title>
  </head>
  <body>
    <div id="app">
      <button id="open-connect-modal">Open Modal</button>
      <button id="open-network-modal">Open Networks</button>
    </div>
    <script type="module" src="main.js"></script>
  </body>
</html>

Following with our main.js file, we can now add the needed logic to open the modal:

// Trigger modal programaticaly
// Add this code inside `main.js` file at the end of the code file
const 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" })
);

Learn more about the AppKit actions here

To open AppKit you can use our web component or build your own button with AppKit actions.

<body>
    <div id="app">
      <appkit-button />
      <appkit-network-button />
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Learn more about the AppKit web components here

Web components are global html elements that don’t require importing.

<body>
    <div id="app">
      <appkit-button />
      <appkit-network-button />
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Learn more about the AppKit web components here

Web components are global html elements that don’t require importing.

You can trigger the modal by calling the open function from a modal instance returned by createAppKit.

Let’s first add two html button elements into our index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Example</title>
  </head>
  <body>
    <div id="app">
      <button id="open-connect-modal">Open Modal</button>
      <button id="open-network-modal">Open Networks</button>
    </div>
    <script type="module" src="main.js"></script>
  </body>
</html>

Following with our main.js file, we can now add the needed logic to open the modal:

// Trigger modal programaticaly
// Add this code inside `main.js` file at the end of the code file
const 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" })
);

Learn more about the AppKit actions here

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.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Example</title>
  </head>
  <body>
    <appkit-button />
    <script type="module" src="main.js"></script>
  </body>
</html>

Learn more about the AppKit web components here

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.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML AppKit Example</title>
  </head>
  <body>
    <appkit-button />
    <script type="module" src="main.js"></script>
  </body>
</html>

Blockchain Interaction

You need to install @wagmi/core to interact with smart contracts:

npm install @wagmi/core

Wagmi actions can help us interact with wallets and smart contracts:

For this use case, we need to import the wagmiConfigfrom our AppKit WagmiAdapter configuration.

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 need to install @wagmi/core to interact with smart contracts:

npm install @wagmi/core

Wagmi actions can help us interact with wallets and smart contracts:

For this use case, we need to import the wagmiConfigfrom our AppKit WagmiAdapter configuration.

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 modal.subscribeProviders((state) => {
  return state["eip155"];
});

const addressFrom = await modal.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);
}

@Solana/web3.js library allows for seamless interaction with wallets and smart contracts on the Solana blockchain.

For a practical example of how it works, you can refer to our lab dApp.

import { PublicKey, LAMPORTS_PER_SOL, Transaction, SystemProgram } from "@solana/web3.js";

import type { Provider } from '@reown/appkit-adapter-solana'

const solanaProvider = {};
const solanaConnection = {};
modal.subscribeProviders(state => {
    solanaProvider = state['solana'];
    const url = solanaProvider.getActiveChain().rpcUrls.default.http[0];
    const solanaConnection = new Connection(url);
})

const addressFrom = await modal.subscribeAccount(state => {
  return state;
})

const sendTransaction = async () => {
  if (!addressFrom || !solanaConnection) throw Error('user is disconnected');

  const wallet = new PublicKey(addressFrom);
  if (!wallet) throw Error('wallet provider is not available');

  const latestBlockhash = await solanaConnection.getLatestBlockhash();

  const transaction = new Transaction({
    feePayer: wallet,
    recentBlockhash: latestBlockhash?.blockhash,
  }).add(
    SystemProgram.transfer({
      fromPubkey: wallet,
      toPubkey: new PublicKey(address), // destination address
      lamports: 1000,
    })
  );

  return await provider.sendTransaction(transaction, solanaConnection);
}

const getBalance = async () => {
  if (!addressFrom || !solanaConnection) throw Error('user is disconnected');

  const wallet = new PublicKey(addressFrom);
  const balance = await solanaConnection?.getBalance(wallet);
  if (balance !== undefined) {
    return `${balance / LAMPORTS_PER_SOL}`;
  } else {
    return '-';
  }
}

Fundamentals

Authentication

Early Access

Payments

Transactions

Notifications

Cloud

Installation

JavaScript

Installation

Cloud Configuration

Get started

Implementation

wagmi Example

Importing networks

wagmi Example

Importing networks

ethers Example

Solana Example

Bitcoin Example

Bitcoin Provider Interface

Parameters

Responses

Blockchain Interaction

Fundamentals

Authentication

Early Access

Payments

Transactions

Notifications

Cloud

​JavaScript

​Installation

​Cloud Configuration

Get started

​Implementation

wagmi Example

​Importing networks

wagmi Example

​Importing networks

ethers Example

Solana Example

Bitcoin Example

​Bitcoin Provider Interface

​Parameters

​Responses

​Trigger the modal

​Blockchain Interaction

JavaScript

Installation

Cloud Configuration

Implementation

Importing networks

Importing networks

Bitcoin Provider Interface

Parameters

Responses

Trigger the modal

Blockchain Interaction