# Content Security Policy (CSP)
Source: https://docs.reown.com/advanced/security/content-security-policy



## Overview

A Content Security Policy (CSP) is a security feature that helps protect web applications from various attacks like Cross-Site Scripting (XSS), clickjacking, and data injection. By specifying allowed content sources, CSPs minimize the risk of executing malicious content on your site.

## CSP Guidance

### AppKit

The following is a **partial CSP** that covers WalletConnect's libraries and services for [AppKit](https://docs.walletconnect.com/appkit/overview). Note that **you may need to define additional sources based on your application's requirements**.

```
default-src 'self';
script-src 'self';
style-src https://fonts.googleapis.com;
img-src * 'self' data: blob: https://walletconnect.org https://walletconnect.com https://secure.walletconnect.com https://secure.walletconnect.org https://tokens-data.1inch.io https://tokens.1inch.io https://ipfs.io https://cdn.zerion.io;
font-src 'self' https://fonts.gstatic.com https://fonts.reown.com;
connect-src 'self' https://rpc.walletconnect.com https://rpc.walletconnect.org https://relay.walletconnect.com https://relay.walletconnect.org wss://relay.walletconnect.com wss://relay.walletconnect.org https://pulse.walletconnect.com https://pulse.walletconnect.org https://api.web3modal.com https://api.web3modal.org https://keys.walletconnect.com https://keys.walletconnect.org https://notify.walletconnect.com https://notify.walletconnect.org https://echo.walletconnect.com https://echo.walletconnect.org https://push.walletconnect.com https://push.walletconnect.org wss://www.walletlink.org https://cca-lite.coinbase.com;
frame-src 'self' https://verify.walletconnect.com https://verify.walletconnect.org https://secure.walletconnect.com https://secure.walletconnect.org;
Cross-Origin-Opener-Policy: same-origin-allow-popups;
```

<Note>
  You may need to list the RPC endpoints used by blockchain networks you have enabled (e.g. via the [`@wagmi/chains` package](https://wagmi.sh/core/api/chains)) as part of your `connect-src` definition.

  For a full of list of RPC sources used by `wagmi/viem`, please refer to [Viem's chain definitions](https://github.com/wevm/viem/tree/main/src/chains/definitions).
</Note>

<Note>
  **Cross-Origin-Opener-Policy for Social Login Security**: The `Cross-Origin-Opener-Policy: same-origin-allow-popups` header is essential when using AppKit's social login features (Google, X, GitHub, Discord, Apple, Facebook, Farcaster). This header helps prevent tabnabbing attacks during OAuth flows by controlling how popup windows can interact with your application. Without this header, malicious sites could potentially hijack the authentication flow and redirect users to phishing pages.
</Note>

## Testing and Deploying Your CSP

### Test Your CSP in a Staging Environment

Run through your standard user flows in a staging environment with CSP enforcement. This may include connecting to browser extension wallets, transacting, logging out, etc. Directives may need updates after SDK upgrades. Always test your CSP again before deploying updates to production.

### Using Report-Only Mode

Use the `Content-Security-Policy-Report-Only` header, which sends violation reports without enforcing policies. This helps assess the impact of CSP changes without affecting functionality.

### Deployment

First deploy your CSP in `report-only` mode. After validation, migrate to `Content-Security-Policy` for enforcement.

### Monitoring

Configure `report-uri` or `report-to` to receive violation reports and set up a monitoring dashboard for review.


# Security Information
Source: https://docs.reown.com/advanced/security/security-information



Security is not just a feature but a fundamental aspect of Reown's architecture. The infrastructure has undergone multiple rounds of third-party security reviews, audits, penetration testing, and threat modeling to ensure the highest standards of protection. Security is viewed as a continuously evolving discipline, with regular system audits to identify and address potential vulnerabilities.

## AppKit - Embedded Wallet Key Management

### Architecture and Custody

AppKit Embedded wallets enable applications to provide end-users with a quick onboarding experience by provisioning a non-custodial wallet through social login or email wallets. While the implementation varies per network, Reown relies on a SOC 2 Type 2 compliant third-party vendor for key management. The vendor's [security overview](https://magic.link/docs/home/security/product-security) and [list of audits](https://magic.link/docs/home/security/security-compliance) are available in their documentation.

For a subset of EVM Networks, gas abstraction functionality requires deploying a Smart Account on behalf of the end-user. In this case, the key management provider acts as a signer for this Smart Account. Reown relies on a third-party vendor for the Smart Account implementation. The [Smart Account implementation audits](https://docs.safe.global/smart-account-audits) are available in their documentation.

### Key Export

Reown enables end-users to export their keys when needed.

### Audits

Both the key management vendors and Smart Account vendors have undergone multiple audits (see links above). The integration of the key management provider into AppKit has been audited by Halborn. The complete audit report is available [here](https://drive.google.com/file/d/1LQ6BkcI4PHs_FKAzpCRMqwD--rq6uOy6/view).

## WalletKit

### Architecture

WalletKit provides an end-to-end encrypted solution for wallets to connect to applications and sign messages/transactions. As an open-source SDK, it supports multiple transport methods, from WebSockets to Universal Links.

### Handshake & End-to-End Encryption

For a detailed overview of the handshake and end-to-end encryption protocol, refer to the [technical specification](https://specs.walletconnect.com/2.0/specs/clients/sign/session-proposal).

### Audits

WalletKit, including its encryption stack, was audited by Trail of Bits. The audit report is available [here](https://github.com/trailofbits/publications/blob/master/reviews/2023-03-walletconnectv2-securityreview.pdf). This comprehensive security review covered the source code and included a lightweight Threat Model covering upstream and downstream dependencies. The broader WalletConnect system underwent Threat Modeling by Spearbit. The threat model is available [here](https://drive.google.com/file/d/1QpPSLvCEMunaYHHBPN0g6kYd39uFxpPk/view).

### Dependencies

WalletKit's design philosophy prioritizes minimizing third-party dependencies to reduce the attack surface area.

## Third-Party Reviews

The security infrastructure of Reown has undergone multiple rounds of audits by independent security auditing firms, including Trail of Bits, Halborn, and Spearbit. These audits cover both AppKit and WalletKit, along with a comprehensive company-wide Threat Model.

| Audit Scope                                          | Auditor       | Report                                                                                                                    |
| ---------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- |
| WalletConnect Comprehensive Threat Model             | Spearbit      | [View Report](https://drive.google.com/file/d/1QpPSLvCEMunaYHHBPN0g6kYd39uFxpPk/view)                                     |
| AppKit Embedded Wallet Integration Pentest           | Halborn       | [View Report](https://drive.google.com/file/d/1LQ6BkcI4PHs_FKAzpCRMqwD--rq6uOy6/view)                                     |
| WalletKit Security Review & Lightweight Threat Model | Trail of Bits | [View Report](https://github.com/trailofbits/publications/blob/master/reviews/2023-03-walletconnectv2-securityreview.pdf) |

## Bug Bounty Program

Reown maintains an active bug bounty program to encourage security researchers to responsibly disclose vulnerabilities and help strengthen the systems. For more information, visit the [security text file](https://reown.com/.well-known/security.txt) or the [security page](https://reown.com/security).

## Get in Touch

For security-related inquiries, please visit the [security contact page](https://reown.com/security).


# Actions
Source: https://docs.reown.com/appkit/android/core/actions



## Chains

### Get selected chain

You can get selected chain by calling the `getSelectedChain()` on the `AppKit` object.

```kotlin theme={null}
AppKit.getSelectedChain()
```

## AppKit.ModalDelegate

```kotlin theme={null}
val appKitModalDelegate = object : AppKit.ModalDelegate {
    override fun onSessionApproved(approvedSession: Modal.Model.ApprovedSession) {
        // Triggered when receives the session approval from wallet
    }

    override fun onSessionRejected(rejectedSession: Modal.Model.RejectedSession) {
        // Triggered when receives the session rejection from wallet
    }

    override fun onSessionUpdate(updatedSession: Modal.Model.UpdatedSession) {
        // Triggered when receives the session update from wallet
    }

    override fun onSessionExtend(session: Modal.Model.Session) {
        // Triggered when receives the session extend from wallet
    }

    override fun onSessionEvent(sessionEvent: Modal.Model.SessionEvent) {
        // Triggered when the peer emits events that match the list of events agreed upon session settlement
    }

    override fun onSessionDelete(deletedSession: Modal.Model.DeletedSession) {
        // Triggered when receives the session delete from wallet
    }

    override fun onSessionRequestResponse(response: Modal.Model.SessionRequestResponse) {
        // Triggered when receives the session request response from wallet
    }

    override fun onProposalExpired(proposal: Modal.Model.ExpiredProposal) {
        // Triggered when a proposal becomes expired
    }

    override fun onRequestExpired(request: Modal.Model.ExpiredRequest) {
        // Triggered when a request becomes expired
    }

    override fun onConnectionStateChange(state: Modal.Model.ConnectionState) {
        //Triggered whenever the connection state is changed
    }

    override fun onError(error: Modal.Model.Error) {
        // Triggered whenever there is an issue inside the SDK
    }
}
```

You have set delegate on AppKit to start getting updates from Wallet.

```kotlin theme={null}
    AppKit.setDelegate(appKitModalDelegate)
```

## Actions

### Disconnect

```kotlin theme={null}

AppKit.disconnect(
    onSuccess = {
    /* callback that letting you know that you have successfully disconnected */
    },
    onError = { error ->
    /* callback for error while trying to disconnection with a peer */
    }
)
```

### Request

```kotlin theme={null}
val requestParams = Modal.Params.Request(
    method = /* Selected method */,
    params = /* Method params  */,
)

AppKit.request(
    request = requestParams,
    onSuccess = {
    /* callback that letting you know that you have successful request */
    },
    onError = { error ->
    /* callback for error */
    }
)
```

### Get Active Account

Returns the current active account connected via AppKit

```kotlin theme={null}
AppKit.getAccount()
```

### Get Connection type

Return information about the type of our connection

```kotlin theme={null}
AppKit.getConnectorType()
```


# Components
Source: https://docs.reown.com/appkit/android/core/components



You can use predefined AppKitComponent and add it in your application. As a view, dialog or modal.

```kotlin theme={null}
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.ModalBottomSheetState
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.compose.material.ModalBottomSheetLayout

setContent {
    val modalSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden, skipHalfExpanded = true)
    val coroutineScope = rememberCoroutineScope()
    val navController = rememberNavController()

    ModalBottomSheetLayout(
        sheetContent = {
            AppKitComponent(
                shouldOpenChooseNetwork = true | false,
                closeModal = { coroutineScope.launch { modalSheetState.hide() }
            )
        }
    ) {
        // content
    }
}
```

## Buttons

You can add ready made button components to your application

### Web3Button

<Tabs>
  <Tab title="Compose">
    ```kotlin theme={null}
    import com.reown.appkit.ui.components.button.Web3Button
    import com.reown.appkit.ui.components.button.ConnectButtonSize
    import com.reown.appkit.ui.components.button.AccountButtonType
    import com.reown.appkit.ui.components.button.rememberAppKitState

    YourAppScreen(navController: NavController) {
        val appKitState = rememberAppKitState(navController = navController)
        Web3Button(
            state = appKitState,
            accountButtonType = AccountButtonType.NORMAL || AccountButtonType.MIXED,
            connectButtonSize = ConnectButtonSize.NORMAL || ConnectButtonSize.SMALL
        )
    }
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

            <com.reown.appkit.ui.components.button.views.Web3Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:connect_button_size="NORMAL" || "SMALL"
                app:account_button_type="NORMAL" || "MIXED"
            />
    </LinearLayout>
    ```
  </Tab>
</Tabs>

### Network Button

<Tabs>
  <Tab title="Compose">
    ```kotlin theme={null}
    import com.reown.appkit.ui.components.button.NetworkButton
    import com.reown.appkit.ui.components.button.rememberAppKitState

    YourAppScreen(navController: NavController) {
        val appKitState = rememberAppKitState(navController = navController)
        NetworkButton(state = appKitState)
    }
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

            <com.reown.appkit.ui.components.button.views.NetworkButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
            />
    </LinearLayout>
    ```
  </Tab>
</Tabs>

### Connect Button

<Tabs>
  <Tab title="Compose">
    ```kotlin theme={null}
    import com.reown.appkit.ui.components.button.ConnectButton
    import com.reown.appkit.ui.components.button.ConnectButtonSize
    import com.reown.appkit.ui.components.button.rememberAppKitState

    YourAppScreen(navController: NavController) {
        val appKitState = rememberAppKitState(navController = navController)
        ConnectButton(
            state = appKitState,
            buttonSize = ConnectButtonSize.NORMAL || ConnectButtonSize.SMALL
        )
    }
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

            <com.reown.appkit.ui.components.button.views.ConnectButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:connect_button_size="NORMAL" || "SMALL"
            />
    </LinearLayout>
    ```
  </Tab>
</Tabs>

### Account Button

<Tabs>
  <Tab title="Compose">
    ```kotlin theme={null}
    import com.reown.appkit.ui.components.button.AccountButton
    import com.reown.appkit.ui.components.button.AccountButtonType
    import com.reown.appkit.ui.components.button.rememberAppKitState

    YourAppScreen(navController: NavController) {
        val appKitState = rememberAppKitState(navController = navController)
        AccountButton(
            state = appKitState,
            buttonSize = AccountButtonType.NORMAL || AccountButtonType.MIXED
        )
    }
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

            <com.reown.appkit.ui.components.button.views.AccountButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:account_button_type="NORMAL" || "MIXED"
            />
    </LinearLayout>
    ```
  </Tab>
</Tabs>

### AppKit State

AppKitState is an object that ensures communication between your application and the state of the AppKit.

#### Create appKitState:

NavController is required to create appKitState

```kotlin theme={null}
    val appKitState = rememberAppKitState(navController)
```

#### AppKitState methods

```kotlin theme={null}
    appKitState.isOpen
```

returns `StateFlow<Boolean>` whose value is updated depending on whether the appkit component is open

```kotlin theme={null}
    appKitState.isConnected
```

returns `StateFlow<Boolean>` whose value depends on the active session in AppKit


# Kotlin
Source: https://docs.reown.com/appkit/android/core/installation



Kotlin implementation of AppKit for Android applications.

Android Core <img />\
Appkit <img />

### Requirements

* Android min SDK 23
* Java 11

## Installation

root/build.gradle.kts:

```gradle theme={null}
allprojects {
   repositories {
      mavenCentral()
      maven { url "https://jitpack.io" }
   }
}
```

app/build.gradle.kts

```gradle theme={null}
implementation(platform("com.reown:android-bom:$BOM_VERSION"))
implementation("com.reown:android-core")
implementation("com.reown:appkit")
```

## ProGuard rules

If you encounter issues with minification, add the below rules to your application:

```
-keepattributes *Annotation*

-keep class com.sun.jna.** { *; }
-keepclassmembers class com.sun.jna.** {
    native <methods>;
    *;
}

-keep class uniffi.** { *; }

-dontwarn uniffi.**
-dontwarn com.sun.jna.**
```

## Example

<Card title="AppKit with Kotlin example" icon="github" href="https://github.com/reown-com/reown-kotlin/tree/develop/sample/dapp">
  Check the Kotlin example
</Card>

## Test Apps

Want to see AppKit in action? Download our sample AppKit apps below and explore what it can do. Enjoy! 😊

* [Android Build (Firebase)](https://appdistribution.firebase.google.com/pub/i/4cf60e7b49f9265e)


# Sign In With Ethereum
Source: https://docs.reown.com/appkit/android/core/one-click-auth



AppKit provides a simple solution for integrating with "Sign In With Ethereum" (SIWE), a form of authentication that enables users to control their digital identity with their Ethereum account. SIWE is a standard also known as [EIP-4361](https://docs.login.xyz/general-information/siwe-overview/eip-4361).

## One-Click Auth

One-Click Auth represents a key advancement within WalletConnect v2, streamlining the user authentication process in AppKit by enabling them to seamlessly connect with a wallet and sign a SIWE message with just one click.
Connecting a wallet, proving control of an address with an off-chain signature, authorizing specific actions. These are the kinds of authorizations that can be encoded as "ReCaps". ReCaps are permissions for a specific website or dapp that can be compactly encoded as a long string in the message you sign and translated by any wallet into a straight-forward one-sentence summary. WalletConnect uses permissions expressed as ReCaps to enable a One-Click Authentication.

## Configure your AppKit Client

To integrate SIWE with AppKit, you need to configure your AppKit client using `Modal.Model.AuthPayloadParams`, which are required to create a SIWE message for the user to sign:

```kotlin theme={null}
 AppKit.setAuthRequestParams(authPayloadParams)
```

#### Example of AuthRequestParams

```kotlin theme={null}
 val authParams = Modal.Model.AuthPayloadParams(
    chains = ["eip155:1", "eip155:137"],
    domain = "yourDappDomain.com",
    uri = "https://yourDappDomain.com/login",
    nonce = //uniqueNonce,
    statement = "I accept the Terms of Service: https://yourDappDomain.com/",
    methods = ["personal_sign", "eth_sendTransaction"],
    resources = null //// Here your dapp may request authorization with ReCaps
)
```

Configuring your AppKit client with Modal.Model.AuthPayloadParams will prioritize authentication requests over regular session proposals. If the wallet supports One-Click Auth, the session will be created and the user will automatically authenticate without needing to send another SIWE request over personal\_sign. If the wallet does not support One-Click Auth, it will fall back to the session proposal. In this case, to authenticate the user, AppKit will send another session request to prove address ownership.

To check whether the user has signed a SIWE message, check `onSessionAuthenticateResponse` callback from `AppKit.ModalDelegate`:

```kotlin theme={null}
fun onSessionAuthenticateResponse(response: Modal.Model.SessionAuthenticateResponse) {
    // Triggered when Dapp receives the session authenticate response from wallet

    if (response is Modal.Model.SessionAuthenticateResponse.Result) {
        if (response.session != null) {
            // Authentication successful, session established
        } else {
            // Authentication successful, but no session created (SIWE-only flow)
        }
    } else {
        // Authentication request was rejected or failed
    }
}
```

### Fallback to SIWE Over Session Request

If the wallet connecting to your dapp does not support One-Click Auth, the SDK will fallback to the `wc_sessionPropose` method and create a session with the wallet. AppKit will then inform the user that they need to sign a message to prove address ownership. AppKit will send a SIWE request to the wallet, and once the wallet responds with a signed message, use `onSIWEAuthenticationResponse` callback to check the result:

```kotlin theme={null}
 override fun onSIWEAuthenticationResponse(response: Modal.Model.SIWEAuthenticateResponse) {
    if (response is Modal.Model.SIWEAuthenticateResponse.Result) {
        // message and signature
    } else {
        //error
    }
}
```

### Link Mode

The latest release of AppKit supports link mode, a low latency mechanism for transporting One-Click Auth requests and session requests over universal links, reducing the need for a WebSocket connection with the Relay. This significantly enhances the user experience when connecting native dApps to native wallets by reducing the latency associated with networking connections, especially when the user has an unstable internet connection.

<Frame>
  <video />
</Frame>

To support link mode, configure your AppMetaData `appLink` with a valid universal link and set the `linkMode` property to `true`:

```kotlin theme={null}
 val appMetaData = Core.Model.AppMetaData(
    ...
    appLink = "https://example.com/example_dapp",
    linkMode = true
)

CoreClient.initialize(
   metaData: appMetaData,
    ...
)

AppKit.initialize(Modal.Params.Init(core = CoreClient))
```

Once link mode is configured, your dApp will connect and send requests to wallets via app links after receiving proof from the wallet that it also supports link mode.

The wallet will also send responses using app links. Your app needs to pass these responses to the AppKit client so it can process them.

```kotlin theme={null}
AppKit.handleDeepLink(url) { error ->
    //handle error

}
```

Ensure to handle incoming app links in your Activity onCreate method and in onNewIntent callback.

Ensure that your App Link is properly configured in your app's Manifest file with the `autoVerify` set to `true`:

```
<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <data android:scheme="https" android:host="your_host" />
</intent-filter>
```

#### How does it look without Link Mode?

<Frame>
  <video />
</Frame>

For more information on how to configure app links for your app, refer to the [Android Documentation](https://developer.android.com/training/app-links/verify-android-applinks).

For enabling links to app content check [this](https://developer.android.com/training/app-links/deep-linking) documentation page.

For more information on how to interact with other apps using intents, see [Android Intent Documentation](https://developer.android.com/training/basics/intents).


# Options
Source: https://docs.reown.com/appkit/android/core/options



### Explorer recommended wallets

Allows to set default recommended wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/). You can define a list of wallets ids you'd like to prioritize (order is respected). You can get these ids from the explorer link mentioned before by clicking on a copy icon of your desired wallet card.

```kotlin theme={null}
val recommendedWalletsIds = listOf<String>(
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0"
)

val initParams = Modal.Params.Init(core = CoreClient, recommendedWalletsIds = recommendedWalletsIds)

AppKit.initialize(
    init = initParams,
    onSuccess = {
        // Callback will be called if initialization is successful
    },
    onError = { error ->
        // Error will be thrown if there's an issue during initialization
    }
)
```

### Explorer excluded wallets

Allows to exclude wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/). You can define an array of wallet ids you'd like to exclude. You can get these ids from the explorer link mentioned before by clicking on a copy icon of your desired wallet card.

```kotlin theme={null}
val excludedWalletIds = listOf<String>(
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0"
)

val initParams = Modal.Params.Init(core = CoreClient, excludedWalletIds = excludedWalletIds)

AppKit.initialize(
    init = initParams,
    onSuccess = {
        // Callback will be called if initialization is successful
    },
    onError = { error ->
        // Error will be thrown if there's an issue during initialization
    }
)
```

### Show installed wallets

Allows you to show the `INSTALLED` icon in the list. To use this feature, you need to add selected wallets that you want to handle to `AndroidManifest.xml` as a query. Specs: [Android Specs](https://developer.android.com/guide/topics/manifest/queries-element)

```xml theme={null}
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <queries>
        <package android:name="..."/>
    </queries>

    <application>
        ...
    </application>
</manifest>
```

### Enable Coinbase Wallet

<Warning>
  The new **Base Wallet** (formerly Coinbase Wallet) does not currently support the Coinbase Mobile Wallet SDK used by this integration. This means the Coinbase connector **will not work with Base Wallet** until the Base team adds support for the SDK on their end. This is a known limitation on the Base/Coinbase side and not an issue with AppKit. We will update this documentation once the Base team implements SDK compatibility.
</Warning>

<Warning>
  **The Coinbase integration is in Beta**.
  It's public API and associated documentation may still see significant and breaking changes.
</Warning>

Coinbase has been added since version 1.2.0

```kotlin theme={null}
val initParams = Modal.Params.Init(core = CoreClient, coinbaseEnabled = true)

AppKit.initialize(
    init = initParams,
    onSuccess = {
        // Callback will be called if initialization is successful
    },
    onError = { error ->
        // Error will be thrown if there's an issue during initialization
    }
)
```

Coinbase Wallet SDK requires AppKit registration in Activity to receive responses from Coinbase wallet

```kotlin theme={null}
    fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        AppKit.register(this)
        // Your content
    }
```


# Theming
Source: https://docs.reown.com/appkit/android/core/theming



## Usage

<Tabs>
  <Tab title="Compose">
    Wrap your composable component with `AppKitTheme`

    ```kotlin theme={null}
    import com.reown.appkit.ui.AppKitTheme

    AppKitTheme(
        mode = AppKitTheme.Mode.AUTO || AppKitTheme.Mode.LIGHT || AppKitTheme.Mode.DARK,
        lightColors = AppKitTheme.provideLightAppKitColors(
            // Override colors
        ),
        darkColors = AppKitTheme.provideDarkAppKitColors(
            // Override colors
        )
    )    {
        /* any AppKit component or graph */
    }

    ```
  </Tab>

  <Tab title="View">
    You can define AppKitTheme in yours `style.xml` files

    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <style name="AppKitTheme">
            <item name="modalMode">AUTO || LIGHT || DARK</item>
            /* Override colors */
        </style>
    </resources>
    ```
  </Tab>
</Tabs>

## Mode

<Tabs>
  <Tab title="Compose">
    ```kotlin theme={null}
        enum class Mode {
            LIGHT, DARK, AUTO
        }
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <attr name="modalMode" format="enum">
            <enum name="AUTO" value="0"/>
            <enum name="DARK" value="1"/>
            <enum name="LIGHT" value="2"/>
        </attr>
    </resources>
    ```
  </Tab>
</Tabs>

## Colors

<Tabs>
  <Tab title="Compose">
    Customizable colors in AppKitTheme.
    To override colors you need to use methods `AppKitTheme.provideLightAppKitColors` or AppKitTheme.provideDarkAppKitColors
    To override foreground or background `ColorPalette` you can define new palette or use one of the AppKitTheme methods to provide Palette and override selected colors

    ```kotlin theme={null}
        interface Colors {
            val accent100: Color
            val accent90: Color
            val accent80: Color
            val foreground: ColorPalette
            val background: ColorPalette
            val grayGlass: Color
            val success: Color
            val error: Color
        }
    ```

    ColorPalette

    ```kotlin theme={null}
        data class ColorPalette(
            val color100: Color,
            val color125: Color,
            val color150: Color,
            val color175: Color,
            val color200: Color,
            val color225: Color,
            val color250: Color,
            val color275: Color,
            val color300: Color,
        )
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>

    You can override those values in AppKitTheme in your style.xml file

    <resources>
        <attr name="modalAccent100" format="color"/>
        <attr name="modalAccent90" format="color"/>
        <attr name="modalAccent80" format="color"/>
        <attr name="modalForeground100" format="color"/>
        <attr name="modalForeground125" format="color"/>
        <attr name="modalForeground150" format="color"/>
        <attr name="modalForeground175" format="color"/>
        <attr name="modalForeground200" format="color"/>
        <attr name="modalForeground225" format="color"/>
        <attr name="modalForeground250" format="color"/>
        <attr name="modalForeground275" format="color"/>
        <attr name="modalForeground300" format="color"/>
        <attr name="modalBackground100" format="color"/>
        <attr name="modalBackground125" format="color"/>
        <attr name="modalBackground150" format="color"/>
        <attr name="modalBackground175" format="color"/>
        <attr name="modalBackground200" format="color"/>
        <attr name="modalBackground225" format="color"/>
        <attr name="modalBackground250" format="color"/>
        <attr name="modalBackground275" format="color"/>
        <attr name="modalBackground300" format="color"/>
        <attr name="modalGrayGlass" format="color"/>
        <attr name="modalSuccess" format="color"/>
        <attr name="modalError" format="color"/>

    </resources>
    ```
  </Tab>
</Tabs>


# Usage
Source: https://docs.reown.com/appkit/android/core/usage



`AppKit` is a singleton that interacts with the AppKit SDK.

## Implementation

#### Initialize

```kotlin theme={null}
val connectionType = ConnectionType.AUTOMATIC or ConnectionType.MANUAL
val projectId = "" // Get Project ID at https://dashboard.reown.com/
val appMetaData = Core.Model.AppMetaData(
    name = "Kotlin.AppKit",
    description = "Kotlin AppKit Implementation",
    url = "kotlin.reown.com",
    icons = listOf("https://gblobscdn.gitbook.com/spaces%2F-LJJeCjcLrr53DcT1Ml7%2Favatar.png?alt=media"),
    redirect = "kotlin-modal-wc://request"
)

CoreClient.initialize(projectId = projectId, connectionType = connectionType, application = this, metaData = appMetaData)

AppKit.initialize(
    init = Modal.Params.Init(CoreClient),
    onSuccess = {
        // Callback will be called if initialization is successful
     },
    onError = { error ->
        // Error will be thrown if there's an issue during initialization
    }
)
```

#### Session properties

You can define session properties by calling the `setSessionProperties` method on the `AppKit` object.

#### Chains

This example of define ethereum chain. You can define the chains you want to use. The chain must be EVM compatible.

```kotlin theme={null}
Example of definition chains: https://github.com/reown-com/reown-kotlin/blob/main/product/appkit/src/main/kotlin/com/reown/appkit/presets/AppKitChainsPresets.kt

AppKit.setChains(AppKitChainsPresets.ethChains.values.toList())
```

**IMPORTANT**: `Chains` must be set before opening the modal.

## Usage

<Tabs>
  <Tab title="Compose Accompanist">
    ```kotlin theme={null}
    import androidx.compose.material.ExperimentalMaterialApi
    import androidx.compose.material.ModalBottomSheetState
    import androidx.navigation.compose.NavHost
    import androidx.navigation.compose.composable
    import androidx.navigation.compose.rememberNavController
    import com.google.accompanist.navigation.material.BottomSheetNavigator
    import com.google.accompanist.navigation.material.ExperimentalMaterialNavigationApi
    import com.google.accompanist.navigation.material.ModalBottomSheetLayout
    import com.google.accompanist.navigation.material.bottomSheet
    import com.reown.appkit.ui.appKitGraph

    setContent {
        val modalSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden, skipHalfExpanded = true)
        val bottomSheetNavigator = BottomSheetNavigator(modalSheetState)
        val navController = rememberNavController(bottomSheetNavigator)

        ModalBottomSheetLayout(bottomSheetNavigator = bottomSheetNavigator) {
            NavHost(
                navController = navController,
                startDestination = "home"
            ) {
                composable("home") {
                    HomeScreen()
                }
                appKitGraph(navController)
            }
        }
    }
    ```

    **IMPORTANT**: AppKit uses accompanist navigation material inside. `ModalBottomSheetLayout` should be imported from [Accompanist Navigation Material](https://google.github.io/accompanist/navigation-material/)

    ```kotlin theme={null}
    import com.reown.appkit.ui.openAppKit

    navController().openAppKit(
        shouldOpenChooseNetwork = true | false
        onError = {  }
    )
    ```
  </Tab>

  <Tab title="Compose Component">
    ```kotlin theme={null}
    import androidx.compose.material.ExperimentalMaterialApi
    import androidx.compose.material.ModalBottomSheetState
    import androidx.navigation.compose.NavHost
    import androidx.navigation.compose.composable
    import androidx.navigation.compose.rememberNavController
    import androidx.compose.material.ModalBottomSheetLayout

    setContent {
        val modalSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden, skipHalfExpanded = true)
        val coroutineScope = rememberCoroutineScope()
        val navController = rememberNavController()

        ModalBottomSheetLayout(
            sheetContent = {
                AppKitComponent(
                    shouldOpenChooseNetwork = true | false,
                    closeModal = { coroutineScope.launch { modalSheetState.hide() }
                )
            }
        ) {
            // content
        }
    }
    ```
  </Tab>

  <Tab title="Kotlin DSL">
    ```kotlin theme={null}
    import androidx.navigation.createGraph
    import androidx.navigation.fragment.fragment
    import com.reown.appkit.ui.appKitGraph

    navController.graph = navController.createGraph("Home") {
        fragment<HomeFragment>("Home")
        appKit()
    }
    ```

    ```kotlin theme={null}
    import androidx.navigation.fragment.findNavController
    import com.reown.appkit.ui.openAppKit

    findNavController().openAppKit(
        shouldOpenChooseNetwork = true | false
        onError = {  }
    )
    ```
  </Tab>

  <Tab title="Nav graph">
    ```xml theme={null}
    <navigation >
        <fragment
            android:id="@+id/HomeFragment"
            android:name="com.reown.sample.HomeFragment">
        </fragment>

        <include app:graph ="@navigation/appkit_graph"/>
    </navigation>
    ```

    ```kotlin theme={null}
    import androidx.navigation.fragment.findNavController
    import com.reown.appkit.ui.openAppKit

    findNavController().openAppKit(
        shouldOpenChooseNetwork = true | false
        onError = {  }
    )
    ```
  </Tab>
</Tabs>


# One-Click Auth
Source: https://docs.reown.com/appkit/authentication/one-click-auth



**One-Click Auth** represents a key advancement within WalletConnect v2, streamlining the user authentication process in AppKit by enabling them to seamlessly connect with a wallet and sign a SIWE message with just one click.

Enable your users to connect to web3 through a single tap with One-Click Auth, improving connectivity speeds and creating all-around better UX and friction-free user journeys. With one-tap multi-chain and multi-account signing, let users authenticate multiple chains and accounts simultaneously.

<Frame>
  <video />
</Frame>

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/core/siwe">
    Get started with AppKit in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/core/siwe">
    Get started with AppKit in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/core/siwe">
    Get started with AppKit in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/core/siwe">
    Get started with AppKit in JavaScript.
  </Card>

  <Card title="React Native" icon="react" href="/appkit/react-native/core/1ca">
    Get started with AppKit in React Native.
  </Card>

  <Card title="Flutter" icon="flutter" href="/appkit/flutter/core/siwe">
    Get started with AppKit in Flutter.
  </Card>

  <Card title="Android" icon="android" href="/appkit/android/core/one-click-auth">
    Get started with AppKit in Android.
  </Card>

  <Card title="iOS" icon="apple" href="/appkit/ios/core/one-click-auth">
    Get started with AppKit in iOS.
  </Card>

  <Card title="Unity" icon="unity" href="/appkit/unity/core/siwe">
    Get started with AppKit in Unity.
  </Card>
</CardGroup>

<br />

<Card title="Try Demo" href="https://appkit-lab.reown.com/appkit/?name=wagmi-siwe" />


# Multichain Authentication (SIWX)
Source: https://docs.reown.com/appkit/authentication/siwx/default



The **Sign In With X** feature enables decentralized applications (Dapps) to authenticate users seamlessly across multiple blockchain networks, such as Ethereum, Solana, and Bitcoin, since this feature is **chain agnostic**.

This feature allows developers using our SDK to implement authentication by having users sign a unique string message with their blockchain wallets. The **Sign In With X** feature is designed in accordance with the [CAIP-122](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-122.md) standard, which establishes a chain-agnostic framework for blockchain-based authentication and authorization on off-chain services.

<Frame>
  <video />
</Frame>

## Demo

<CardGroup>
  <Card icon="flask" title="Try Demo" href="https://appkit-lab.reown.com/appkit/?name=siwx-default" />
</CardGroup>

## Getting Started

**SIWX** works as a plugin system for AppKit and you are going to add the plugin in the AppKit configuration. There are some ways to implement the **SIWX** feature:

* Use Reown Authentication to manage the sessions in the Reown Dashboard
* Use the `DefaultSIWX` class provided by AppKit
* Create a custom implementation to suit your specific requirements.

To initialize the **SIWX** feature, you need to add the `siwx` parameter to the `createAppKit` function.

### Reown Authentication

Reown Authentication is a predefined implementation of the SIWX configuration plugin that uses the Cloud service to create and manage SIWX messages and sessions. With Reown Authentication, you will be able to see and control the sessions of your users using the Reown [Dashboard](/cloud/reown-authentication).

Read more about the [Reown Authentication Implementation](./reown-authentication).

### Custom Implementation

`DefaultSIWX` is a scaffold implementation of the SIWX feature for quick custom integration. This option provides a set of pre-built components that allow you to have the feature up and running in no time or
you can configure the `siwx` parameters expected to receive. This is what allows you to customize the feature to suit your specific requirements.

The defined interface must follow specific rules to make sure that AppKit can interact with it correctly. Read more about how to have your [Custom Implementation](./siwx-custom).

## SIWX Expected Behavior

* **SIWX** will prompt to get the user signature and verify his identity every time a connection happen;
* In case a SIWX session is already stored, the user will be automatically signed in and the prompt step will be skipped;
* If the user changes the connected network, **SIWX** will prompt to get the user signature and verify his identity again;
* If the user disconnects from the Dapp, **SIWX** will revoke the session and the user will need to sign in again.

## Migrating from SIWE to SIWX

If you are currently already using **SIWE** from `@reown/appkit-siwe`, after AppKit version 1.5.0, you will be migrated into **SIWX**. The migration process is automatic and your `siweConfig` from `createAppKit` function will be mapped internally.

<Warning>
  It is important to note that you cannot use `siweConfig` and `siwx` at the same time, `createAppKit` will throw an error in case this happens.

  You may replace `siweConfig` with your own `siwx` configuration manually if you would like to do so.
</Warning>


# Email & Socials
Source: https://docs.reown.com/appkit/authentication/socials



Bring your app to a world of new users in minutes with default Email and Social login, giving both new and existing users the ability to seamlessly connect to your app using just an email address or social account. With minimal code changes, you can customize these options to suit your needs and use Smart Account functionality in minutes.

<Frame>
  <video />
</Frame>

## Demo

Want to see social login in action? Try out the live demo to experience the seamless social login flow firsthand.

<Card icon="flask" title="Try Demo" href="https://demo.reown.com/?utm_source=navbar&utm_medium=docs&utm_campaign=backlinks" />

## Supported Providers

AppKit supports the following providers: **Email**, **Google**, **X**, **GitHub**, **Discord**, **Apple**, **Facebook** and **Farcaster**.

<Note>
  Currently, Facebook is not supported on mobile devices.
</Note>

## Supported Chains

Email and Social login are supported for all **EVM-compatible chains** listed in Viem. If the EVM-compatible chain is included in the `viem/chains` [package](https://github.com/wevm/viem/blob/main/src/chains/index.ts), it should be supported for email and social login.

Email and Social login is also available for **Solana, Solana Devnet, and Solana Testnet**.

<Note>
  Email/social (embedded) wallets can only transact on chains reachable through the [Blockchain API](/cloud/blockchain-api). A chain that is EVM-compatible in viem but **not** on the Blockchain API list will let users log in, but transactions may fail. See the [Supported Chains Overview](/appkit/networks/overview) for how the support layers interact.
</Note>

<Note>
  **"Supported" means different things at different layers.** Before relying on a chain, check the [Supported Chains Overview](/appkit/networks/overview) — it explains how protocol-level support, AppKit SDK support, the Blockchain API, and embedded (email/social) wallets differ, and why a chain can be listed in one place but not work in another.
</Note>

## Ensuring the Security of Your Private Key

Reown AppKit uses [Magic](https://magic.link/) to provide Universal Wallets. For information on how these are created and how the **Private Keys** are managed, refer to Magic's docs [here](https://magic.link/docs/home/security/product-security#patented-key-management).

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/core/socials">
    Get started with AppKit in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/core/socials">
    Get started with AppKit in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/core/socials">
    Get started with AppKit in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/core/socials">
    Get started with AppKit in JavaScript.
  </Card>

  <Card title="React Native" icon="react" href="/appkit/react-native/core/email">
    Get started with AppKit in React Native.
  </Card>

  <Card title="Flutter" icon="flutter" href="/appkit/flutter/core/email">
    Get started with AppKit in Flutter.
  </Card>

  <Card title="Unity" icon="unity" href="/appkit/unity/core/socials">
    Get started with AppKit in Unity.
  </Card>
</CardGroup>


# Customizing your UI
Source: https://docs.reown.com/appkit/customizing-ui

Customize AppKit's look and feel — themes, colors, fonts, and pre-built UI components.

Reown allows you to customize the look and feel of the UI, including its theme (light or dark), colors and fonts. Plus, you can also add polished functionality to your app with pre-built UI components.

## Theming

Theming settings allow you to:

* Attach your app's theme to the user's system settings (light or dark)
* Override system theme settings and enforce either a light or dark theme.
* Set specific colors for your theme that align with your brand identity, including backgrounds, buttons, icons, labels & more.
* Pick a font that aligns with your brand identity and set its size

To learn more about theming settings, visit the theming page for your chosen framework.

<CardGroup>
  <Card title="React" icon="react" href="./react/core/theming">
    Explore React Theming Settings
  </Card>

  <Card title="Next.js" icon="square-n" href="./next/core/theming">
    Explore Next.js Theming Settings
  </Card>

  <Card title="Vue" icon="vuejs" href="./vue/core/theming">
    Explore Vue Theming Settings
  </Card>

  <Card title="Svelte" icon="https://mintcdn.com/reown-5552f0bb/y6FfJGDgiHdFLuuy/images/icons/svelte.svg?fit=max&auto=format&n=y6FfJGDgiHdFLuuy&q=85&s=ac80fcae3436e349d376fa7598bd4d32" href="./svelte/core/theming">
    Explore Svelte Theming Settings
  </Card>

  <Card title="Nuxt" icon="mountains" href="./nuxt/core/theming">
    Explore Nuxt Theming Settings
  </Card>

  <Card title="JavaScript" icon="js" href="./javascript/core/theming">
    Explore JavaScript Theming Settings
  </Card>

  <Card title="React Native" icon="react" href="./react-native/core/theming">
    Explore React Native Theming Settings
  </Card>

  <Card title="Flutter" icon="flutter" href="./flutter/core/theming">
    Explore Flutter Theming Settings
  </Card>

  <Card title="Android" icon="android" href="./android/core/theming">
    Explore Android Theming Settings
  </Card>

  <Card title="Unity" icon="unity" href="./unity/core/customization">
    Explore Unity Theming Settings
  </Card>
</CardGroup>

## Components

Reown also offers pre-built UI components that you can include in your UI immediately to allow specific functions.
These include components such as:

* Wallet Buttons: Provide buttons specifically for wallet connections without triggering the full connection modal
* Connect Button: Allows user to connect a wallet
* Account Button: Allows users to open account view
* Network Button: Lets the user switch networks

To learn more about pre-built components, head to the components page for your chosen framework.

<CardGroup>
  <Card title="React" icon="react" href="./react/core/components">
    Explore React Components
  </Card>

  <Card title="Next.js" icon="square-n" href="./next/core/components">
    Explore Next.js Components
  </Card>

  <Card title="Vue" icon="vuejs" href="./vue/core/components">
    Explore Vue Components.
  </Card>

  <Card title="Svelte" icon="https://mintcdn.com/reown-5552f0bb/y6FfJGDgiHdFLuuy/images/icons/svelte.svg?fit=max&auto=format&n=y6FfJGDgiHdFLuuy&q=85&s=ac80fcae3436e349d376fa7598bd4d32" href="./svelte/core/components">
    Explore Svelte Components.
  </Card>

  <Card title="Nuxt" icon="mountains" href="./nuxt/core/components">
    Explore Nuxt Components.
  </Card>

  <Card title="JavaScript" icon="js" href="./javascript/core/components">
    Explore JavaScript Components.
  </Card>

  <Card title="React Native" icon="react" href="./react-native/core/components">
    Explore React Native Components.
  </Card>

  <Card title="Android" icon="android" href="./android/core/components">
    Explore Android Components.
  </Card>
</CardGroup>


# AppKit FAQs
Source: https://docs.reown.com/appkit/faq



This FAQ section covers common questions and solutions for using AppKit. The questions are organized into three main categories:

* **Configuration**: Questions about setting up AppKit, including project configuration, wallet visibility, and RPC customization.
* **Features**: Information about AppKit's capabilities, including off-ramp support, multi-wallet address retrieval, and branding options.
* **Technical**: Technical details about project approval requirements and initialization constraints.

## AppKit Configuration

<AccordionGroup>
  <Accordion title="Why am I seeing an 'Invalid App Configuration' error?">
    <img />

    This error typically occurs when the `projectId` is not configured correctly. To resolve this:

    1. Create a valid project ID at [https://dashboard.reown.com/](https://dashboard.reown.com/)
    2. Add it to your AppKit configuration:

    ```javascript theme={null}
    const modal = createAppKit({
      ...
      projectId: "..." // Add your valid projectId here
    });
    ```

    3. Ensure that you have added your domain to the allowed domains in your project settings. If you have not done so, you can do so by navigating to **"Project Domains"** on the Dashboard, clicking on **"Configure Domains"** and adding your domain.
  </Accordion>

  <Accordion title="Why are the 'Connect wallet' and 'Network' buttons greyed out?">
    This can happen if your device is unable to reach the [WalletConnect relay service](https://relay.walletconnect.org).

    If you see an error like:

    ```bash theme={null}
    SocketException: Failed host lookup: 'relay.walletconnect.org' (OS Error: No address associated with hostname, errno = 7)
    ```

    It usually means your connection is blocked by your VPN or network.

    ### Common causes and steps to resolve:

    1. **VPN or Firewall settings**

    * Some VPNs may block access to the relay service.
    * If you are using a VPN (e.g., Windscribe), try:
      * Switching the VPN protocol to **WStunnel**.
      * Turning **off the Firewall toggle** in your VPN settings.

    2. **Network restrictions**

    * If you’re on a restricted network (e.g., public Wi-Fi, corporate network, or in a restricted country), the relay service may be blocked.
    * Try switching to a different ISP or network.

    3. **Connectivity issues**

    * Confirm that you can reach `relay.walletconnect.org`.
    * A 100% packet loss when pinging may indicate the service is blocked on your network.
  </Accordion>

  <Accordion title="Why can't I see any wallets in the modal and only see the 'Connect Wallet' title?">
    **Problem**: Users only see the "Connect Wallet" title in the modal after clicking the connect button.

    **Solution**: This issue typically has two possible causes:

    1. **Version Mismatch**: Ensure all @reown libraries use the same version in your `package.json`:

    ```json theme={null}
    {
      "dependencies": {
        "@reown/appkit": "1.7.8",
        "@reown/appkit-adapter-wagmi": "1.7.8"
        // ... other dependencies
      }
    }
    ```

    2. **Initialization Location**: Call `createAppKit` outside of your component to ensure proper initialization:

    ```javascript theme={null}
    // Create modal
    createAppKit({
      adapters: [wagmiAdapter],
      ...generalConfig,
      features: {
        analytics: true // Optional - defaults to your Cloud configuration
      }
    })

    export function App() {
      return (
        <WagmiProvider ...>
          <QueryClientProvider ...>
            <appkit-button />
          </QueryClientProvider>
        </WagmiProvider>
      )
    }
    ```
  </Accordion>

  <Accordion title="How can I use custom RPCs with AppKit?">
    You can use your own RPC by setting the `customRpcUrls` option in the AppKit configuration. This lets you define custom RPC URLs for specific chains. Each entry must follow the format:

    ```javascript theme={null}
    customRpcUrls: {
      [ChainId.Ethereum]: 'https://your.custom.rpc.url',
      [ChainId.Polygon]: 'https://your.polygon.rpc.url'
    }
    ```

    AppKit will prioritize these URLs over the default ones.
  </Accordion>
</AccordionGroup>

## Features

<AccordionGroup>
  <Accordion title="Which tokens does Reown / WalletConnect support?">
    Support is **network-dependent, not token-dependent**. Reown and the WalletConnect protocol don't maintain a list of individual tokens — instead, support is defined at the blockchain level. If a network is supported, then any token on that network (native or otherwise) works automatically.

    AppKit provides native SDK support for EVM chains, Solana, Bitcoin, TON, and TRON. Any token on a supported network is therefore covered.

    For the full list of supported networks, see [Reown AppKit Supported Chains](/appkit/networks/supported-chains).
  </Accordion>

  <Accordion title="When will Reown support off-ramp functionality?">
    Reown currently does not plan to support off-ramp functionality.
  </Accordion>

  <Accordion title="How do I get retrieve multiple addresses from multiple connected wallets?">
    To retrieve addresses from multiple connected wallets, refer to our multichain example:

    * [Live Demo](https://appkit-web-examples-react-multichain.reown.com/)
    * [Source Code](https://github.com/reown-com/appkit-web-examples/tree/main/react/react-multichain)

    Example using React SDK:

    ```javascript theme={null}
    import { useAppKitAccount } from '@reown/appkit/react'

    // Get account states for different chains
    const eip155AccountState = useAppKitAccount({ namespace: 'eip155' })
    const solanaAccountState = useAppKitAccount({ namespace: 'solana' })
    ```

    ```javascript theme={null}
    <>
      EVM Address: {eip155AccountState.address}<br />
      Solana Address: {solanaAccountState.address}<br />
    </>
    ```
  </Accordion>

  <Accordion title="How do I remove the 'UX by Reown' branding?">
    Currently, only enterprise clients can hide "UX by Reown" on the AppKit modal by adjusting this
    option on our Dashboard. If you are an enterprise client and would like to hide this branding,
    contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s).
  </Accordion>

  <Accordion title="How do I increase my project's RPC limits?">
    Reown currently provides 2.5 million requests per 30 days. If you wish to increase this limit, you need to upgrade to AppKit Pro.
  </Accordion>

  <Accordion title="Is there a limit on self-custodial wallet connections?">
    There is no fixed number for what counts as "excessive" self-custodial connections. Our Terms of Service reserve the right to limit usage that is clearly abusive or disruptive, such as traffic spikes or automated spamming, and this is assessed case by case. See our [Community Licence](ttps://github.com/reown-com/appkit-react-native?tab=License-1-ov-file#readme) for clearest thresholds before paid plans are needed:

    * **500 MAUs/month:** only authenticated users count toward this, not self-custodial connections
    * **2.5M RPC calls/month:** only applies if you use Reown's built-in RPC

    **Using your own RPC provider?** The RPC threshold will likely not apply to you. RPC usage may still occur from time to time to fetch users' balances. The only limit that could apply is the general fair use clause in our ToS. If your usage could reasonably be described as a spike attack or sustained automated abuse, that's when it becomes a concern. Normal app traffic is not what this clause is designed for.
  </Accordion>
</AccordionGroup>

## Technical

<AccordionGroup>
  <Accordion title="Do I need to wait for Web3 app approval before using my projectId?">
    No, dApps do not need approval in order to use your projectId.

    Additionally, you do not need to whitelist IP addresses when using AppKit. AppKit is a client-side SDK, so all requests are made directly from the user's browser or device, not from your servers.
  </Accordion>

  <Accordion title="Why are signatures longer in some cases?">
    Signatures can appear longer when using non-deployed smart accounts. These accounts include extra data in the signature to handle deployment and verification. Once the account is deployed, the signatures return to their normal size.
    This happens when you connect with a social login but haven’t made a transaction yet. Before the first transaction, the smart account isn’t deployed, so the signature includes extra data for deployment and verification. After the first transaction, the account is deployed and signatures go back to normal size.

    You can always use [viem's verifyMessage](https://viem.sh/docs/actions/public/verifyMessage) to verify the signature in different formats.
  </Accordion>

  <Accordion title="How can I add my web wallet to the wallet list in WalletConnect?">
    Add your web wallet to WalletConnect by following the steps in the [WalletGuide submission guide](https://docs.walletconnect.network/walletguide/explorer-submission).
  </Accordion>

  <Accordion title="Can I reinitialize AppKit with different network configurations?">
    Currently, `createAppKit` can only be called once during the application's lifecycle. It cannot be
    lazily initialized and then torn down for re-initialization. This means you must pass in all the
    networks you plan to support during the initial setup.
  </Accordion>

  <Accordion title="Why can't I open wallet apps from in-app browsers on Android?">
    When users access a dApp from within an in-app browser (such as Telegram, Discord, or other apps with embedded browsers) on Android, they may be unable to open external wallet apps like MetaMask or Trust Wallet. This is a known platform limitation on Android where in-app browsers restrict the ability to launch external applications via deep links.

    ### Why this happens

    Android in-app browsers (WebViews) are sandboxed environments that, by default, do not allow navigation to custom URL schemes or intent URLs that would open external apps. This is a security measure implemented at the operating system level and is not something that can be resolved by AppKit or the dApp itself.

    ### Workarounds for users

    1. **Open in external browser**: Most in-app browsers have an option to open the current page in the device's default browser (usually accessible via a menu or "Open in Browser" button). From the external browser, wallet deep links will work as expected.

    2. **Copy the link and paste in browser**: Users can copy the dApp URL and paste it into their preferred mobile browser (Chrome, Firefox, etc.).

    3. **Use QR code scanning**: If the user has their wallet app open, they can use the wallet's built-in QR code scanner to scan the WalletConnect QR code displayed in the AppKit modal, which bypasses the need for deep linking entirely.

    4. **Use the wallet's built-in browser**: Many wallet apps (MetaMask, Trust Wallet, etc.) have their own built-in dApp browsers. Users can navigate to the dApp directly within their wallet app for a seamless experience.

    ### For app developers embedding WebViews

    If you are building an app that embeds a WebView and want to support wallet connections, you need to explicitly handle deep links in your WebView implementation. See our [troubleshooting guide](/appkit/recipes/troubleshooting#in-app-browser-deeplink-detection) for code examples on how to intercept and handle wallet deep links across different platforms.
  </Accordion>

  <Accordion title="How do I delete a project?">
    To delete a project from your [Reown Dashboard](https://dashboard.reown.com/):

    1. Open the **Team** dropdown at the top of the Dashboard and select the team that contains the project you want to delete.

    <Frame>
      <img alt="Team dropdown in the Reown Dashboard" />
    </Frame>

    2. Click on the **three dots** (`...`) menu at the end of the project you want to delete.

    <Frame>
      <img alt="Project options menu showing Rename and Delete actions" />
    </Frame>

    3. Click **Delete** to remove the project.

    4. Type the name of the project to confirm and click **Delete**.

    <Frame>
      <img alt="Confirmation dialog to delete a project" />
    </Frame>

    <Warning>
      Deleting a project is permanent and cannot be undone. Any integrations using this project's `projectId` will stop working immediately.
    </Warning>
  </Accordion>

  <Accordion title="How do I delete a team?">
    To delete a team from your [Reown Dashboard](https://dashboard.reown.com/):

    1. Open the **Team** dropdown at the top of the Dashboard and select the team you want to delete.

    <Frame>
      <img alt="Team dropdown in the Reown Dashboard" />
    </Frame>

    2. Navigate to the team **Settings** page.

    3. Click the **Delete** button at the bottom of the settings page.

    <Frame>
      <img alt="Delete button on the team settings page" />
    </Frame>

    4. Type the name of the team to confirm and click **Delete**.

    <Frame>
      <img alt="Confirmation dialog to delete a team" />
    </Frame>

    <Warning>
      Deleting a team is permanent and cannot be undone. All projects within the team will also be deleted, and any integrations using their `projectId` values will stop working immediately.
    </Warning>
  </Accordion>

  <Accordion title="How do I update AppKit packages to the latest version?">
    Keep every `@reown/*` package on the exact same version. AppKit publishes its packages in coordinated releases, so mixing versions can cause subtle peer-dep and type mismatches.

    ### 1. Find the latest AppKit version

    Use the registry to read the current published version (do this once, and use the same number for every `@reown/*` package you install):

    ```bash theme={null}
    # npm
    npm view @reown/appkit version

    # pnpm
    pnpm view @reown/appkit version

    # yarn
    yarn npm info @reown/appkit version

    # bun
    bun info @reown/appkit version
    ```

    You can also eyeball the version on npm's package page for [@reown/appkit](https://www.npmjs.com/package/@reown/appkit).

    ### 2. Update your dependencies (all @reown/\* to the same version)

    Replace `X.Y.Z` below with the version you just looked up.

    <CodeGroup>
      ```bash npm theme={null}
      npm install \
        @reown/appkit@X.Y.Z \
        @reown/appkit-adapter-wagmi@X.Y.Z
      ```

      ```bash Yarn theme={null}
      yarn add \
        @reown/appkit@X.Y.Z \
        @reown/appkit-adapter-wagmi@X.Y.Z
      ```

      ```bash Bun theme={null}
      bun add \
        @reown/appkit@X.Y.Z \
        @reown/appkit-adapter-wagmi@X.Y.Z
      ```

      ```bash pnpm theme={null}
      pnpm add \
        @reown/appkit@X.Y.Z \
        @reown/appkit-adapter-wagmi@X.Y.Z
      ```
    </CodeGroup>

    ### 3. Pin in package.json (optional)

    If you prefer explicit pins (no carets), update `package.json`:

    ```json theme={null}
    "dependencies": {
      "@reown/appkit": "X.Y.Z",
      "@reown/appkit-adapter-wagmi": "X.Y.Z"
    }
    ```

    Then reinstall to refresh your lockfile:

    <CodeGroup>
      ```bash npm theme={null}
      rm -rf node_modules package-lock.json && npm install
      ```

      ```bash Yarn theme={null}
      rm -rf node_modules yarn.lock && yarn install
      ```

      ```bash Bun theme={null}
      rm -rf node_modules bun.lockb && bun install
      ```

      ```bash pnpm theme={null}
      rm -rf node_modules pnpm-lock.yaml && pnpm i
      ```
    </CodeGroup>

    All release information is available in the [AppKit GitHub Releases](https://github.com/reown-com/appkit/releases).
  </Accordion>

  <Accordion title="Why does my Vercel deployment fail with a 'Missing ./tempo specifier in @wagmi/core' error?">
    When deploying to Vercel, your build may fail with an error like:

    ```bash theme={null}
    Missing "./tempo" specifier in "@wagmi/core" package
    error TS2322: Type 'import("/vercel/path0/react/react-wagmi/node_modules/@wagmi/core/dist/types/createConfig")
    ```

    This is caused by a version mismatch between `@wagmi/core` and `@wagmi/connectors`. To resolve it, add `@wagmi/connectors` at version `6.2.0` to your dependencies:

    ```json theme={null}
    "dependencies": {
      "@wagmi/connectors": "6.2.0"
    }
    ```

    Then reinstall your dependencies and redeploy.
  </Accordion>

  <Accordion title="Error Codes">
    Below is a list of error codes you may encounter when using AppKit, along with their descriptions and recommended actions:

    | Code    | Message                   | Action                                                                                                                                                 |
    | ------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
    | APKT001 | Network Not Found         | We couldn't recognize the specified network. Make sure it's included in the `networks` array of your `createAppKit` config.                            |
    | APKT002 | Invalid App Configuration | The origin isn't in your allowlist. Update your allowed domains at [https://dashboard.reown.com](https://dashboard.reown.com).                         |
    | APKT003 | Wallet Load Failed        | We couldn't load the embedded wallet. This might be a network or server issue. Check your connection and try again, or contact support if it persists. |
    | APKT004 | Wallet Request Timeout    | The wallet didn't respond in time. Check your network and try again. If the issue continues, contact support.                                          |
    | APKT005 | Unverified Domain         | The embedded wallet didn't load. Please verify your domain at [https://dashboard.reown.com](https://dashboard.reown.com).                              |
    | APKT006 | Session Expired           | Your session has expired or is invalid. Please check your device's date and time, then reconnect.                                                      |
    | APKT007 | Invalid Project ID        | The project ID is invalid. You can find or create a valid one at [https://dashboard.reown.com](https://dashboard.reown.com).                           |
    | APKT008 | Project ID Missing        | No project ID was found. Set one up in your config at [https://dashboard.reown.com](https://dashboard.reown.com).                                      |
    | APKT009 | Server Error              | We couldn't load your App Configuration. Check your network and try again. Contact support if it keeps happening.                                      |
    | APKT010 | Rate Limited              | Too many requests for App Configuration. Please wait a few minutes and try again. Reach out to support if needed.                                      |
  </Accordion>
</AccordionGroup>

## Migration

<AccordionGroup>
  <Accordion title="How do I migrate from WalletConnect Modal to Reown AppKit?">
    Follow our dedicated guide to upgrade from WalletConnect Modal to Reown AppKit:

    * [Migrate from WalletConnect Modal to Reown AppKit](/appkit/upgrade/wcm)
  </Accordion>

  <Accordion title="How do I migrate from Web3Modal to Reown AppKit?">
    Pick the guide that matches your platform:

    **Web**

    * [Reown AppKit (Wagmi)](/appkit/upgrade/to-reown-appkit-web)
    * [Reown AppKit (Ethers)](/appkit/upgrade/to-reown-appkit-ethers-web)
    * [Reown AppKit (Ethers v5)](/appkit/upgrade/to-reown-appkit-ethers5-web)
    * [Reown AppKit (Solana)](/appkit/upgrade/to-reown-appkit-solana-web)

    **Other platforms**

    * [React Native](/appkit/upgrade/from-web3modal-react-native)
    * [Flutter](/appkit/upgrade/from-web3modal-flutter)
    * [Android](/appkit/upgrade/from-web3modal-android)
    * [iOS](/appkit/upgrade/from-web3modal-ios)
    * [Unity](/appkit/upgrade/from-web3modal-unity)
  </Accordion>

  <Accordion title="How do I migrate from other libraries to Reown AppKit?">
    Follow the guide for the library you're migrating from:

    * [Migrating from Privy to AppKit](/appkit/migration/from-privy-next)
    * [Migrating from RainbowKit to AppKit](/appkit/migration/from-rainbowkit-next)
    * [Migrating from ConnectKit to AppKit](/appkit/migration/from-connectkit-next)
    * [Migrating from Solana Anza Adapter to AppKit](/appkit/migration/from-anza-adapter-react)
  </Accordion>
</AccordionGroup>

## Support

<AccordionGroup>
  <Accordion title="How do I get technical support for AppKit?">
    Free tier AppKit customers only are only entitled to support via [Discord](https://discord.gg/reown). Please join the Discord server and create a forum post **#developers-forum** and the team will get back to you.

    AppKit Pro and Enterprise customers get priority support via dedicated channels.
  </Accordion>
</AccordionGroup>


# Multichain Support
Source: https://docs.reown.com/appkit/features/multichain



AppKit is now multichain. The architecture is designed to support both EVM and non-EVM blockchains. This will allow developers and projects to choose and configure multiple blockchain networks within their instance of AppKit, extending beyond just Ethereum-based (EVM) networks.

<video />

<Card title="Try Demo" href="https://appkit-lab.reown.com/appkit/?name=multichain-wagmi-solana" />

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/core/multichain">
    Get started with AppKit Multichain in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/core/multichain">
    Get started with AppKit Multichain in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/core/multichain">
    Get started with AppKit Multichain in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/core/multichain">
    Get started with AppKit Multichain in JavaScript.
  </Card>
</CardGroup>


# Multiwallet Linking
Source: https://docs.reown.com/appkit/features/multiwallet-linking



Multiwallet linking allows your users to connect multiple wallets simultaneously, switch between them seamlessly, and manage the connected wallets directly via your app. It also allows developers to view analytics and build data-driven improvements for wallets using wallet connection history and more.

## Use Cases

With Multiwallet linking you can:

* Manage multiple wallet connections simultaneously
* Switch between multiple connected wallets
* Build multi-wallet dashboards or portfolio views
* Implement wallet comparison features
* Create advanced wallet and wallet connection management interfaces
* Display and manage wallet connection history
* Access the currently active wallet connection
* Implement wallet-specific features based on the active connection
* Handle connection state changes with callbacks

## Why use Multiwallet Linking?

* **Build seamless UX**: allow users to connect multiple wallets and choose which wallet to use and when
* **Deeper insights into user behavior**: with multiwallet linking, users don't need to make 2 profiles to use 2 wallets, removing fragmentation and giving you better insights into user behavior.
* **Multichain Compatibility**: Multiwallet linking lets you connect Phantom on Solana and Trust on Base for building seamless multichain apps

## Get Started

Multiwallet linking is a paid feature available on Pro and Enterprise plans. Pro and Enterprise customers can enable it via the Reown dashboard toggle and implement it via Hooks, including `useAppKitConnection` & `useAppKitConnections`.

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/core/hooks#useappkitconnections">
    Get started with Multiwallet linking in React
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/core/hooks#useappkitconnections">
    Get started with Multiwallet linking in Next.js
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/core/composables#useappkitconnections">
    Get started with Multiwallet linking in Vue
  </Card>
</CardGroup>


# On-Ramp
Source: https://docs.reown.com/appkit/features/onramp



On-Ramp securely provides users access to over 100 cryptocurrencies from right within your app. In just a few clicks, users can purchase tokens to support in-app activity and transactions across multiple chains. Set up in minutes with just one line of code.

<div>
  <iframe title="YouTube video player" />
</div>

## Demo

<CardGroup>
  <Card icon="flask" title="Try Demo" href="https://appkit-lab.reown.com/appkit/?name=wagmi" />
</CardGroup>

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/transactions/onramp">
    Get started with AppKit in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/transactions/onramp">
    Get started with AppKit in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/transactions/onramp">
    Get started with AppKit in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/transactions/onramp">
    Get started with AppKit in JavaScript.
  </Card>
</CardGroup>

## Process Overview

AppKit On-Ramp makes it easy for users to purchase crypto without the hassle of switching between multiple platforms and signing multiple messages - a simple, seamless, in-app experience for anyone looking to securely transact within web3.

For a step-by-step guide on user flow with AppKit On-Ramp, refer to our Youtube video [here](https://youtu.be/m1E_N5b3r18?t=241\&feature=shared).

<Note>
  On-Ramp is supported in the latest version of AppKit. If you are using an
  older version, make sure you upgrade.
</Note>

### Connect your wallet

Head over to a AppKit-enabled application and click the "Connect Wallet" button. You will be prompted to connect your wallet.

<Frame>
  <img />
</Frame>

### Select "Buy Crypto"

Once connected, select "Buy Crypto" from the wallet modal.

<Frame>
  <img />
</Frame>

### Choose your provider

Select "Meld" as your provider.

<Frame>
  <img />
</Frame>

### Complete your purchase

Complete your purchase using your selected provider. You will be prompted to sign in to your Meld account.
If the payment page does not appear, you can copy link from the wallet modal and paste it in your browser.

### Select assets and amount

Choose the asset and amount you would like to purchase from your selected provider.

<Frame>
  <img />
</Frame>

### Receive your crypto

Once your purchase is complete, you will receive your crypto in your wallet.

<Frame>
  <img />
</Frame>


# Smart Accounts
Source: https://docs.reown.com/appkit/features/smart-accounts



AppKit now supports Smart Accounts, offering users enhanced security and convenience with features like multi-signature authorization and automated transaction workflows.
This update ensures a seamless and efficient experience for managing digital assets within decentralized applications.

<video />

<Card title="Try Demo" href="https://appkit-lab.reown.com/" />

## Use Cases

* Let new users onboard instantly in games, social apps, or marketplaces.
* Reduce drop-off during onboarding in DeFi apps and NFT platforms.

## Deployment

Smart Accounts are deployed alongside the first transaction. Until deployment, a precalculated address, known as the counterfactual address, is displayed. Despite not being deployed, the account can still sign using 6492 signatures.

## Supported Networks

**Smart Accounts are available on several EVM networks. You can view the complete list of supported networks [here](https://docs.pimlico.io/infra/platform/supported-chains).**

## User Eligibility

Smart Accounts are exclusively available for embedded wallet users (email and social login)

## FAQ

### What is a Smart Account?

A Smart Account improves the traditional account experience by replacing Externally Owned Accounts (EOAs) with a Smart Contract that follows the [ERC-4337 standard](https://eips.ethereum.org/EIPS/eip-4337). This opens up many use cases that were previously unavailable.

Smart Accounts do no require Private Keys or Seed Phrases, instead they rely on a key or multiple keys from designated signers to access the smart account and perform actions on chain. The keys can take multiple forms including passkeys and EOA signatures.

### What can I do with a Smart Account?

Smart accounts unlock a host of use cases that were previously unavailable with EOAs. Essentially anything that can be programmed into a smart contract can be used by Smart Accounts.

* **Multi-Signature Authorization:** Require multiple approvals for a transaction to increase security.
* **Delegated Transactions:** Allow a third party to execute transactions on your behalf under specific conditions.
* **Enhanced Security:** Implement complex security mechanisms such as time-locked transactions and withdrawal limits.
* **Interoperability:** Interact seamlessly with decentralized applications (dApps) and decentralized finance (DeFi) protocols.
* **Custom Logic:** Create custom transaction rules and workflows that align with personal or business requirements.

### How do I get a Smart Account?

Existing AppKit Universal Wallet Users will be given the option to upgrade their account to a smart account. Once you upgrade you will still be able to access your EOA and self-custody your account.

New AppKit Universal Wallet Users will be given smart accounts by default when they login for the first time.

### Does it cost anything?

There is a small additional cost for activating your smart account. The activation fee is added to the first transaction and covers the network fees required for deploying the new smart contract onchain.

### Can I export my Smart Account?

No, you cannot export your Smart Account. The Smart Account (SA) is deployed by the EOA and is owned by the EOA. Your EOA account will always be exportable.
Also is good to know that SA don't have seedphrases.

### Can I withdraw all my funds from my Smart Account?

Yes, you can withdraw all your funds from your Smart Account.

### What are account names?

Smart account addresses start with ’0x’ followed by 42 characters, this is the unique address of your smart account on the network. ‘0x’ addresses like this are long, unwieldy and unmemorable. AppKit allows you to assign a more memorable name for your smart account using [ENS Resolvers](https://docs.ens.domains/resolvers/ccip-read).

You can assign a name to your account and this will act as an alias for your account that can be shared publicly and provide a better user experience. AppKit account names are followed by the "reown.id" domain.

### What can I do with my account name?

As AppKit smart account addresses are the same across the supported networks by [Pimlico](https://docs.pimlico.io/infra/platform/supported-chains), you only need one account name which can then be used across the networks.

For example if you want someone to send you USDC on Polygon they can send it to “johnsmith.reown.id”. If you want someone wants to send you USDC on Optimism they can also use “johnsmith.reown.id”.


# Embedded Wallets Interactions (EIP-5792)
Source: https://docs.reown.com/appkit/features/smart-accounts-interaction



AppKit integrates with [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792) to interact with embedded Wallets (smart accounts) through wallet capabilities.
EIP-5792 introduces a general mechanism for wallets to expose structured execution capabilities to dApps. AppKit currently focuses on key capabilities like atomic batch transactions, but the interface is extensible and can support future capabilities defined by the spec.
AppKit uses the following primary methods defined in EIP-5792:

* wallet\_getCapabilities

* wallet\_sendCalls

* wallet\_getCallsStatus

<Card title="Guide: Switching to Send Calls" icon="arrow-right-arrow-left" href="/appkit/recipes/switching-to-send-calls">
  A step-by-step recipe for adopting `wallet_sendCalls` — checking wallet capabilities, batching transactions, and using paymasters (ERC-7677).
</Card>

## wallet\_getCapabilities

This method queries the wallet for its supported execution capabilities. AppKit inspects the response to determine what features are supported by the wallet, including (but not limited to) atomic batch execution.
Wallets should include the [EIP-5792 capabilities in CAIP-25](https://docs.walletconnect.network/wallet-sdk/android/eip5792#wallet-response).

## wallet\_sendCalls

Used to send one or more contract calls to the wallet for execution. The behavior depends on the specific capabilities returned by wallet\_getCapabilities. For example:

* `atomic: "supported"` -> The wallet guarantees atomic and contiguous execution.
* `atomic: "ready"` -> The wallet may support atomic execution pending user action.
* `atomic: "unsupported"` -> The wallet does not guarantee atomic execution.

If a required capability is not supported, the dApp should fall back to legacy methods (e.g. eth\_sendTransaction, eth\_getTransactionReceipt).

Request Example

```json theme={null}
{
    "from": "0xd46e8dd67c5d32be8058bb8eb970870f07244567",
    "chainId": "0x01",
    "atomicRequired": true,
    "calls": [
      {
        "to": "0xd46e8dd67c5d32be8058bb8eb970870f07244567",
        "value": "0x9184e72a",
        "data": "0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675"
      },
      {
        "to": "0xd46e8dd67c5d32be8058bb8eb970870f07244567",
        "value": "0x182183",
        "data": "0xfbadbaf01"
      }
    ]
  }
```

* `atomicRequired` should be set to true only if the dApp requires atomic execution and the wallet has advertised support.

## wallet\_getCallsStatus

This method returns the status and receipt(s) of a previously submitted batch.

* The `batchId` field, returned from the `wallet_sendCalls` will be used to identify the batch call.

* The `atomic` field specifies how the wallet handled the batch of calls, which affects the structure of the `receipts` field.

### Response Example

```json theme={null}
{
  "chainId": "0x01",
  "id": "0x00000000000000000000000000000000000000000000000000000000000000000e670ec64341771606e55d6b4ca35a1a6b75ee3d5145a99d05921026d1527331",
  "status": 200,
  "atomic": true,
  "receipts": [
    {
      "logs": [
        {
          "address": "0xa922b54716264130634d6ff183747a8ead91a40b",
          "topics": [
            "0x5a2a90727cc9d000dd060b1132a5c977c9702bb3a52afe360c9c22f0e9451a68"
          ],
          "data": "0xabcd"
        }
      ],
      "status": "0x1",
      "blockHash": "0xf19bbafd9fd0124ec110b848e8de4ab4f62bf60c189524e54213285e7f540d4a",
      "blockNumber": "0xabcd",
      "gasUsed": "0xdef",
      "transactionHash": "0x9b7bb827c2e5e3c1a0a44dc53e573aa0b3af3bd1f9f5ed03071b100bb039eaff"
    }
  ]
}
```

* if `atomic` is true, the batch was executed atomically by a wallet

* if `atomic` is false, the batch was executed **non-atomically** by a wallet


# Swaps
Source: https://docs.reown.com/appkit/features/swaps



With Swaps, your users can securely exchange crypto tokens right inside your app using the AppKit Modal. **The setup takes just one line of code**.

<video />

<Card title="Try Demo" href="https://appkit-lab.reown.com/" />

## Use Cases

Swaps can be used in various scenarios to enhance your application's functionality:

* **Token Exchange**: Allow users to easily convert between different cryptocurrencies
* **DeFi Integration**: Enable users to participate in DeFi protocols by swapping tokens
* **Payment Processing**: Let users pay with their preferred cryptocurrency by swapping to the required token
* **Cross-chain Operations**: Facilitate token swaps across different blockchain networks

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/transactions/swaps">
    Get started with AppKit in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/transactions/swaps">
    Get started with AppKit in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/transactions/swaps">
    Get started with AppKit in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/transactions/swaps">
    Get started with AppKit in JavaScript.
  </Card>
</CardGroup>


# Actions
Source: https://docs.reown.com/appkit/flutter/core/actions



### - Listen to balance change

You can subscribe to `_appKitModal.balanceNotifier` to stay up to date with the balance.

```dart theme={null}
// Example usage:
ValueListenableBuilder<String>(
  valueListenable: _appKitModal.balanceNotifier,
  builder: (_, balance, __) {
    return Text(balance);
  },
),

```

### Launch block explorer

You can open the selected chain's block explorer easily:

```dart theme={null}
_appKitModal.launchBlockExplorer();
```

### - Reconnect relay

In most cases it shouldn't be needed as it is called internally but this method is useful to reconnect the relay when internet connection is back after inactivity.

```dart theme={null}
await _appKitModal.reconnectRelay();
```

### - Load account data such as balance and identity

In most cases it shouldn't be needed as it is called internally but this method is useful to reload account data such as balance and identity. Particularly useful after a transaction.

```dart theme={null}
await _appKitModal.loadAccountData();
```

### - Send an RPC request

```dart theme={null}
final bytes = utf8.encode(message);
final encodedMessage = hex.encode(bytes);

final chainId = _appKitModal.selectedChain!.chainId;
final namespace = ReownAppKitModalNetworks.getNamespaceForChainId(chainId);

final result = await _appKitModal.request(
  topic: _appKitModal.session!.topic,
  chainId: chainId,
  request: SessionRequestParams(
    method: 'personal_sign',
    params: [
      '0x$encodedMessage',
      _appKitModal.session!.getAddress(namespace)!;
    ],
  ),
);
```

A list of all available methods can be found in [constants.dart](https://github.com/reown-com/reown_flutter/blob/master/packages/reown_core/lib/utils/constants.dart#L70) file, which is already exported for you to use directly from AppKit package.

### - List of approved chains by the connected wallet

```dart theme={null}
_appKitModal.getApprovedChains();
```

### - List of approved methods by connected wallet

```dart theme={null}
_appKitModal.getApprovedMethods();
```

### - List of approved events by the connected wallet

```dart theme={null}
_appKitModal.getApprovedEvents();
```

### - Request switch to or add chain

If you add a new chain on an ongoing session you should call `requestSwitchToChain()` so the wallet can add it as well. Otherwise it will not be usable.
`requestAddChain()` is called automatically by `requestSwitchToChain()` in case of failing with the proper error from the wallet.

```dart theme={null}
await _appKitModal.requestSwitchToChain(ReownAppKitModalNetworkInfo newChain);
await _appKitModal.requestAddChain(ReownAppKitModalNetworkInfo newChain);
```

### - Interact with Smart Contracts

<Info>
  These Smart Contract interaction methods only work for EVM chains but you can always structure your smart contract transaction and call the relevant chain method by using the [request()](#--send-an-rpc-request) method.
</Info>

### - Read function:

```dart theme={null}
Future<List<dynamic>> requestReadContract({
  required String? topic,
  required String chainId,
  required DeployedContract deployedContract,
  required String functionName,
  EthereumAddress? sender,
  List parameters = const [],
});
```

#### Usage:

1. Create a `DeployedContract` object

```dart theme={null}
// Create DeployedContract object using contract's ABI and address
final tetherContract = DeployedContract(
  ContractAbi.fromJson(
    jsonEncode([{.....}]), // ABI object
    'Tether USD',
  ),
  EthereumAddress.fromHex('0xdAC17F958D2ee523a2206206994597C13D831ec7'), // https://etherscan.io/token/0xdAC17F958D2ee523a2206206994597C13D831ec7
);
```

2. Read from it by calling a read function

```dart theme={null}
final chainId = _appKitModal.selectedChain!.chainId;
final namespace = ReownAppKitModalNetworks.getNamespaceForChainId(chainId);

// Get token decimals
final decimals = await _appKitModal.requestReadContract(
  topic: _appKitModal.session!.topic,
  chainId: chainId,
  deployedContract: tetherContract,
  functionName: 'decimals',
);

// Get balance of wallet
final balanceOf = await _appKitModal.requestReadContract(
  deployedContract: tetherContract,
  topic: _appKitModal.session!.topic,
  chainId: chainId,
  functionName: 'balanceOf',
  parameters: [
    EthereumAddress.fromHex(_appKitModal.session!.getAddress(namespace)),
  ],
);

// Get token total supply
final totalSupply = await _appKitModal.requestReadContract(
  deployedContract: tetherContract,
  topic: _appKitModal.session!.topic,
  chainId: _appKitModal.selectedChain!.chainId,
  functionName: 'totalSupply',
);
```

### - Write function:

```dart theme={null}
Future<dynamic> requestWriteContract({
  required String? topic,
  required String chainId,
  required DeployedContract deployedContract,
  required String functionName,
  required Transaction transaction,
  List<dynamic> parameters = const [],
  String? method,
});
```

#### Usage:

Write to it by calling a write function, for example, `transfer` function from USDC token contract:

```dart theme={null}
final decimalUnits = (decimals.first as BigInt); // decimals value from `decimals` contract function
final transferValue = _formatValue(0.23, decimals: decimalUnits); // your format value function

// Transfer USDT
Future<void> transferToken() async {
  final chainId = _appKitModal.selectedChain!.chainId;
  final namespace = ReownAppKitModalNetworks.getNamespaceForChainId(chainId);

  // Transfer 0.01 amount of Token using Smart Contract's transfer function
  final result = await _appKitModal.requestWriteContract(
    topic: _appKitModal.session!.topic,
    chainId: chainId,
    deployedContract: deployedContract,
    functionName: 'transfer',
    transaction: Transaction(
      from: EthereumAddress.fromHex(_appKitModal.session!.getAddress(namespace)), // sender address
    ),
    parameters: [
      EthereumAddress.fromHex('0x59e2f66C0E96803206B6486cDb39029abAE834c0'), // recipient address
      transferValue, // == 0.23 USDT
    ],
  );
}

```

#### Additional example:

Call a `sayHello` function of a smart contract to write a message.

```dart theme={null}
// Write a message data
Future<void> writeMessage() async {
  final chainId = _appKitModal.selectedChain!.chainId;
  final namespace = ReownAppKitModalNetworks.getNamespaceForChainId(chainId);

  final result = await _appKitModal.requestWriteContract(
    topic: _appKitModal.session!.topic,
    chainId: chainId,
    deployedContract: deployedContract,
    functionName: 'sayHello',
    transaction: Transaction(
      from: EthereumAddress.fromHex(_appKitModal.session!.getAddress(namespace)), // sender address
    ),
    parameters: ['Hello world!'],
  );
}
```

For a complete example app check out the [example app](https://github.com/reown-com/reown_flutter/blob/master/packages/reown_appkit/example/modal/lib/services/eip155_service.dart) for AppKit


# Email & Social Wallets
Source: https://docs.reown.com/appkit/flutter/core/email



AppKit enables passwordless Web3 onboarding and authentication, allowing your users to interact with your application by creating a non-custodial wallet with just their emails or social accounts.

<Frame>
  <video />
</Frame>

<Warning>
  Remember to whitelist your dapp's iOS's bundleId and Android's packageName in your cloud configuration.

  1. LogIn into [https://dashboard.reown.com](https://dashboard.reown.com)
  2. Open Dashboard and scroll down to *Mobile Application IDs* menu
  3. Add your iOS Bundle ID and your Android Package Name
</Warning>

<Note>
  Email and Social login are supported only on EVM networks and Solana.
</Note>

## Integration

In order to support Email and Social Wallets creation just set `featuresConfig:` parameter in `ReownAppKitModal` initialization.

```dart {14-27} theme={null}
final _appKitModal = ReownAppKitModal(
  context: context,
  projectId: '{YOUR_PROJECT_ID}',
  metadata: const PairingMetadata(
    name: 'Example App',
    description: 'Example app description',
    url: 'https://example.com/',
    icons: ['https://example.com/logo.png'],
    redirect: Redirect(
      native: 'exampleapp://',
      universal: 'https://reown.com/exampleapp',
    ),
  ),
  featuresConfig: FeaturesConfig(
    socials: [
      AppKitSocialOption.Email,
      AppKitSocialOption.X,
      AppKitSocialOption.Google,
      AppKitSocialOption.Apple,
      AppKitSocialOption.Discord,
      AppKitSocialOption.GitHub,
      AppKitSocialOption.Facebook,
      AppKitSocialOption.Twitch,
      AppKitSocialOption.Telegram,
    ],
    showMainWallets: false, // OPTIONAL - true by default
  ),
);
```

## Options

* ***socials `List<AppKitSocialOption>`*** : This list contains the list of social platforms that you want to enable for user authentication. It is empty by default, which means that no social options are enabled. The buttons in the modal will be shown in the same order you configure the list.
* ***showMainWallets `bool`*** : This boolean defines whether you want to show the main wallet options on the first connect screen. If this is `false` it will show a button that directs you to a new screen displaying all available wallets. Default `true`.

<Info>
  In order for Farcaster to work properly, either `AppKitModalConnectButton()` or `AppKitModalAccountButton()` has to be instantiated during the whole lifetime of the app.

  If you already use them then nothing else has to be done, but in case you don't use them but still want to support Email & Social Wallets you would have to instantiate and hide them as follows:

  ```dart theme={null}
  AppKitModalConnectButton(
    appKit: _appKitModal,
    custom: SizedBox.shrink(), // Will make the button invisible
  ),
  AppKitModalAccountButton(
    appKit: _appKitModal,
    custom: SizedBox.shrink(), // Will make the button invisible
  ),
  ```
</Info>

## User Flow

1. Users can connect to your application using either an email address or a social login option. Upon selecting an option, they will be redirected to a secure login page in the device’s default browser. If the Email option is selected, AppKit will first send an approval link to the user's email, followed by a One-Time Password (OTP) to be used in the login flow. This process helps verify the user’s identity. In both cases, whether using Email or Social login, a non-custodial wallet will be created for the user. This wallet will be accessible across any application that integrates AppKit and Email Wallets.

2. Eventually, users can optionally choose to upgrade from a non-custodial wallet to a self-custodial one by tapping “Upgrade Wallet” in AppKit. This action opens the Reown secure website, which guides the user through the upgrade process.


# Events
Source: https://docs.reown.com/appkit/flutter/core/events



### List of events you can subscribe to in order to get connection updates

#### Modal specific events

```dart theme={null}
_appKitModal.onModalConnect.subscribe((ModalConnect? event) {});

_appKitModal.onModalUpdate.subscribe((ModalConnect? event) {});

_appKitModal.onModalNetworkChange.subscribe((ModalNetworkChange? event) {});

_appKitModal.onModalDisconnect.subscribe((ModalDisconnect? event) {});

_appKitModal.onModalError.subscribe((ModalError? event) {});
```

<hr />

<Note>
  The following events are available only through WalletConnect protocol, meaning that they won't be throwing events when connected to Coinbase Wallet nor Email or Social Login.
</Note>

#### Session specific events

```dart theme={null}
_appKitModal.onSessionExpireEvent.subscribe((SessionExpire? event) {});

_appKitModal.onSessionUpdateEvent.subscribe((SessionUpdate? event) {});

_appKitModal.onSessionEventEvent.subscribe((SessionEvent? event) {});
```

#### Relay specific events

```dart theme={null}
_appKitModal.appKit!.core.relayClient.onRelayClientConnect.subscribe((EventArgs? event) {});

_appKitModal.appKit!.core.relayClient.onRelayClientError.subscribe((EventArgs? event) {});

_appKitModal.appKit!.core.relayClient.onRelayClientDisconnect.subscribe((EventArgs? event) {});
```


# Flutter
Source: https://docs.reown.com/appkit/flutter/core/installation



With AppKit Flutter, you can easily let people interact with multiple EVM compatible wallets and blockchains.

Let's get started with the installation and configuration!

## Installation

<Note>
  If you are just starting a new project, you can use our [CLI tool](https://pub.dev/packages/reown_cli) to get started quickly.
</Note>

1. * Add `reown_appkit` as a dependency in your `pubspec.yaml` and run `flutter pub get` (check out the [latest version](https://pub.dev/packages/reown_appkit/install))
   * Or simply run `flutter pub add reown_appkit`
2. * Locate your `/ios/Podfile` file and add the following as the first line:

```ruby theme={null}
platform :ios, '13.0'
```

3. * Run `$ pod install` inside the `/ios` folder.
4. * Depending on the Flutter version you are running, you may be required to update your app's NDK version to `27.0.12077973` instead of the default `flutter.ndkVersion`
5. * You should now be able to run your app with `flutter run --dart-define=PROJECT_ID={your_project_id}`

### Enable Installed Wallet Detection

To enable AppKit to detect installed wallets on the device, you need to make specific changes to the native sides of the project.

<Tabs>
  <Tab title="iOS">
    1. Open your `Info.plist` file (typically under `ios/Runner/Info.plist`).
    2. Locate the `<key>LSApplicationQueriesSchemes</key>` section.
    3. Add the desired wallet schemes as string entries within the `<array>`. These schemes represent the wallets you want to detect.
    4. Refer to our [Info.plist example file](https://github.com/reown-com/reown_flutter/blob/develop/packages/reown_appkit/example/modal/ios/Runner/Info.plist) for a detailed illustration.

    Example:

    ```xml theme={null}
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>metamask</string>
      <string>trust</string>
      <string>safe</string>
      <string>rainbow</string>
      <!-- Add other wallet schemes names here -->
    </array>
    ```

    <Note>
      Apple only allows a maximum of 50 entries in this array, so every other entry beyond the 50th will not be considered. See note here: [https://developer.apple.com/documentation/uikit/uiapplication/canopenurl(\_:)#Discussion](https://developer.apple.com/documentation/uikit/uiapplication/canopenurl\(_:\)#Discussion)
    </Note>
  </Tab>

  <Tab title="Android">
    1. Open your `AndroidManifest.xml` file (typically under `android/app/src/main/AndroidManifest.xml`).
    2. Add your `<queries>...</queries>` schemes outside of `<application />` scope.
    3. Refer to [Android Specs](https://developer.android.com/guide/topics/manifest/queries-element) for more information.

    Example:

    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android">

        <queries>
            <package android:name="io.metamask"/>
            <package android:name="com.wallet.crypto.trustapp"/>
            <package android:name="io.gnosis.safe"/>
            <package android:name="me.rainbow"/>
            <!-- Add other wallet schemes names here -->
        </queries>

        <application>
            ...
        </application>
    </manifest>
    ```
  </Tab>
</Tabs>

### Coinbase Wallet support

<Warning>
  The new **Base Wallet** (formerly Coinbase Wallet) does not currently support the Coinbase Mobile Wallet SDK used by this connector. This means the Coinbase connector **will not work with Base Wallet** until the Base team adds support for the SDK on their end. This is a known limitation on the Base/Coinbase side and not an issue with AppKit. We will update this documentation once the Base team implements SDK compatibility.
</Warning>

Coinbase Wallet does not use the WalletConnect protocol for communication between the dApp and the wallet.

This means that pairing topic, session topic, session events and other session-related features are not available when connecting to Coinbase Wallet.

However, you can still enable it to seamlessly connect with your dApp with these additional steps.

If you still want to support it, on your iOS and Android native side make the following changes:

<Tabs>
  <Tab title="iOS">
    1. Open your `Info.plist` file.
    2. Locate the `<key>LSApplicationQueriesSchemes</key>` section.
    3. Include the `<string>cbwallet</string>` scheme as mentioned above in the previous section

    Example:

    ```xml theme={null}
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>cbwallet</string>
      <!-- Any other scheme previously added -->
    </array>
    ```

    4. Make sure pods are installed, otherwise run `pod install` inside your `/ios` folder.
    5. Open your `/ios/Runner.xcworkspace` file with Xcode and add the following code in `AppDelegate.swift` file:

    ```swift theme={null}
    import CoinbaseWalletSDK
    ```

    ```swift {2-8} {14-21} theme={null}
    override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        if #available(iOS 13.0, *) {
          if (CoinbaseWalletSDK.isConfigured == true) {
            if (try? CoinbaseWalletSDK.shared.handleResponse(url)) == true {
                return true
            }
          }
        }

        return super.application(app, open: url, options: options)
    }

    override func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
        if #available(iOS 13.0, *) {
          if (CoinbaseWalletSDK.isConfigured == true) {
            if let url = userActivity.webpageURL,
                (try? CoinbaseWalletSDK.shared.handleResponse(url)) == true {
                return true
            }
          }
        }

        return super.application(application, continue: userActivity, restorationHandler: restorationHandler)
    }
    ```

    Check out the [AppDelegate.swift](https://github.com/reown-com/reown_flutter/blob/develop/packages/reown_appkit/example/modal/ios/Runner/AppDelegate.swift) file from our sample dapp for reference.
  </Tab>

  <Tab title="Android">
    1. Open your `AndroidManifest.xml` file.
    2. Add the `<package android:name="org.toshi"/>` scheme inside `<queries>...</queries>` as mentioned above in the previous section

    Example:

    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android">

        <queries>
            <package android:name="org.toshi"/>
            <!-- Any other scheme previously added -->
        </queries>

        <application>
            ...
        </application>
    </manifest>
    ```
  </Tab>
</Tabs>

#### Disable Coinbase Wallet

Coinbase Wallet is enabled by default. However, in order to function properly, a few steps have to be done as described in the previous section. If you don't want to include/support Coinbase Wallet in your app, you just need to pass Coinbase Wallet id `fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa` to the [excludedWalletIds](./options#excludedwalletids) options array.

<hr />

### Phantom Wallet support

<Note>
  Phantom Wallet support is available from `reown_appkit: ^1.4.0`.
</Note>

Phantom Wallet does not use the WalletConnect protocol for communication between the dApp and the wallet, instead it provides an internal API mechanism based on deep/universal links.

This means that pairing topic, session topic, session events and other session-related features are not available when connecting to Phantom Wallet and the interaction is really basic. Dapp sends a request, Phantom Wallet responds. That's all.

Furthermore, Phantom Wallet's deep/universal linking mechanism supports interaction exclusively with the Solana network. This means that if you have EVM networks configured in your AppKit instance, they will not be available for use after connecting with Phantom.

In order to support Phantom Wallet interactions, a few extra steps have to be performed (only if you haven't implemented [Link Mode](./link-mode) already).

1. First, be sure you already have your redirection back property configured in your dApp's metadata. See [Redirect to your dApp](./usage#redirect-to-your-dapp)
2. Then you will have to implement your own Deep Link mechanism on the Flutter (and native) side so that when a link is received through it, you can just call `await _appKitModal.dispatchEnvelope(link);`

As guidance, here you can see how it's done in our sample dApp:

#### First, enable Phantom Wallet detection

<Tabs>
  <Tab title="iOS">
    1. Open your `Info.plist` file.
    2. Locate the `<key>LSApplicationQueriesSchemes</key>` section.
    3. Include `<string>phantom</string>` scheme

    Example:

    ```xml theme={null}
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>phantom</string>
      <!-- Any other scheme previously added -->
    </array>
    ```
  </Tab>

  <Tab title="Android">
    1. Open your `AndroidManifest.xml` file.
    2. Add `<package android:name="app.phantom"/>` scheme inside `<queries>...</queries>` as mentioned above in previous section

    Example:

    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android">

        <queries>
            <package android:name="app.phantom"/>
            <!-- Any other scheme previously added -->
        </queries>

        <application>
            ...
        </application>
    </manifest>
    ```
  </Tab>
</Tabs>

#### Then, on Flutter side we create an `EventChannel` where links are going to be received and passed to `dispatchEnvelope()`.

<Tabs>
  <Tab title="Flutter">
    ```dart theme={null}
    import 'package:flutter/foundation.dart';
    import 'package:flutter/services.dart';
    import 'package:reown_appkit/modal/i_appkit_modal_impl.dart';

    class DeepLinkHandler {
      static const _eventChannel = EventChannel('com.exampledapp/events');
      static const _methodChannel = MethodChannel('com.exampledapp/methods');
      static late IReownAppKitModal _appKitModal;

      static void initEventChannel() {
        try {
          _eventChannel.receiveBroadcastStream().listen(_onLink, onError: _onError);
        } catch (e) {
          print(e);
        }
      }

      static void initMethodChannel(IReownAppKitModal appKitModal) {
        _appKitModal = appKitModal;
      }

      static void checkInitialLink() async {
        try {
          _methodChannel.invokeMethod('initialLink');
        } catch (e) {
          print(e);
        }
      }

      static void _onLink(dynamic link) async {
        try {
          _appKitModal.dispatchEnvelope(link);
        } catch (e) {
          print(e);
        }
      }

      static void _onError(dynamic e) {
        print(e);
      }
    }
    ```
  </Tab>
</Tabs>

#### Then, on both native sides we leverage native APIs to capture the app opening link and send it to Flutter side.

<Tabs>
  <Tab title="iOS">
    ```swift theme={null}
    import UIKit
    import Flutter

    @main
    @objc class AppDelegate: FlutterAppDelegate {
        
        private static let EVENTS_CHANNEL = "com.exampledapp/events" // TODO: Use your own channel name
        private static let METHODS_CHANNEL = "com.exampledapp/methods" // TODO: Use your own channel name
        
        private var eventsChannel: FlutterEventChannel?
        private var methodsChannel: FlutterMethodChannel?
        var initialLink: String?
        
        private let linkStreamHandler = LinkStreamHandler()
        
        override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
            GeneratedPluginRegistrant.register(with: self)
            
            if let window = self.window, let controller = window.rootViewController as? FlutterViewController {
                eventsChannel = FlutterEventChannel(name: AppDelegate.EVENTS_CHANNEL, binaryMessenger: controller.binaryMessenger)
                eventsChannel?.setStreamHandler(linkStreamHandler)
                
                methodsChannel = FlutterMethodChannel(name: AppDelegate.METHODS_CHANNEL, binaryMessenger: controller.binaryMessenger)
                methodsChannel?.setMethodCallHandler({ [weak self] (call: FlutterMethodCall, result: FlutterResult) -> Void in
                    if (call.method == "initialLink") {
                        if let link = self?.initialLink {
                            let handled = self?.linkStreamHandler.handleLink(link)
                            if (handled == true) {
                                self?.initialLink = nil
                            }
                        }
                    }
                })
            }
            
            // Add your deep link handling logic here
            if let url = launchOptions?[.url] as? URL {
                self.initialLink = url.absoluteString
            }

            if let userActivityDictionary = launchOptions?[.userActivityDictionary] as? [String: Any],
               let userActivity = userActivityDictionary["UIApplicationLaunchOptionsUserActivityKey"] as? NSUserActivity,
               userActivity.activityType == NSUserActivityTypeBrowsingWeb {
                
                handleIncomingUniversalLink(userActivity: userActivity)
            }
            
            return super.application(application, didFinishLaunchingWithOptions: launchOptions)
        }
        
        override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
            return linkStreamHandler.handleLink(url.absoluteString)
        }
        
        override func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
            if userActivity.activityType == NSUserActivityTypeBrowsingWeb {
                handleIncomingUniversalLink(userActivity: userActivity)
                return true
            }
            
            return false
        }
        
        private func handleIncomingUniversalLink(userActivity: NSUserActivity) {
            if let url = userActivity.webpageURL {
                // Handle the URL, navigate to appropriate screen
                print("App launched with Universal Link: \(url.absoluteString)")
                let handled = linkStreamHandler.handleLink(url.absoluteString)
                if (!handled){
                    self.initialLink = url.absoluteString
                }
            }
        }
    }

    class LinkStreamHandler: NSObject, FlutterStreamHandler {
        var eventSink: FlutterEventSink?
        var queuedLinks = [String]()
        
        func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? {
            self.eventSink = events
            queuedLinks.forEach({ events($0) })
            queuedLinks.removeAll()
            return nil
        }
        
        func onCancel(withArguments arguments: Any?) -> FlutterError? {
            self.eventSink = nil
            return nil
        }
        
        func handleLink(_ link: String) -> Bool {
            guard let eventSink = eventSink else {
                queuedLinks.append(link)
                return false
            }
            eventSink(link)
            return true
        }
    }
    ```
  </Tab>

  <Tab title="Android">
    ```kt theme={null}
    package dapp.example

    import io.flutter.embedding.android.FlutterActivity
    import android.content.BroadcastReceiver
    import android.content.Context
    import android.content.Intent
    import android.os.Bundle
    import io.flutter.plugin.common.EventChannel

    class MainActivity: FlutterActivity() {
      private val eventsChannel = "com.exampledapp/events"
      private var linksReceiver: BroadcastReceiver? = null

      override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        EventChannel(flutterEngine?.dartExecutor?.binaryMessenger, eventsChannel).setStreamHandler(
          object : EventChannel.StreamHandler {
            override fun onListen(args: Any?, events: EventChannel.EventSink) {
              linksReceiver = createChangeReceiver(events)
            }
            override fun onCancel(args: Any?) {
              linksReceiver = null
            }
          }
        )
      }

      override fun onNewIntent(intent: Intent) {
        super.onNewIntent(intent)
        if (intent.action === Intent.ACTION_VIEW) {
          linksReceiver?.onReceive(this.applicationContext, intent)
        }
      }

      fun createChangeReceiver(events: EventChannel.EventSink): BroadcastReceiver? {
        return object : BroadcastReceiver() {
          override fun onReceive(context: Context, intent: Intent) {
            val dataString = intent.dataString ?:
            events.error("UNAVAILABLE", "Link unavailable", null)
            events.success(dataString)
          }
        }
      }
    }
    ```
  </Tab>
</Tabs>

Links to full examples:

* [Android's platform specific code](https://github.com/reown-com/reown_flutter/blob/develop/packages/reown_appkit/example/base/android/app/src/main/kotlin/com/example/dapp/MainActivity.kt) (only `eventsChannel` is important Phantom wise)
* [iOS's platform specific code](https://github.com/reown-com/reown_flutter/blob/develop/packages/reown_appkit/example/base/ios/Runner/AppDelegate.swift)  (only `eventsChannel` is important Phantom wise)
* [Dart's specific code](https://github.com/reown-com/reown_flutter/blob/develop/packages/reown_appkit/example/base/lib/utils/deep_link_handler.dart)  (only `eventsChannel` is important Phantom wise)

*Constructing a Solana transaction would depend on the library/package of your choice but in [*our sample dApp's code*](https://github.com/reown-com/reown_flutter/blob/develop/packages/reown_appkit/example/base/lib/utils/crypto/helpers.dart#L170) you can see how we do it using `solana_web3` package.*

#### Disable Phantom Wallet

Phantom Wallet is enabled by default. However, in order to function properly, a few steps have to be done as described in the previous section. If you don't want to include/support Phantom Wallet in your app, you just need to pass Phantom Wallet id `a797aa35c0fadbfc1a53e7f675162ed5226968b44a19ee3d24385c64d1d3c393` to the [excludedWalletIds](./options#excludedwalletids) options array.

<hr />

### Solflare Wallet support

<Note>
  Solflare Wallet support is available from `reown_appkit: ^1.6.0`.
</Note>

Similar to Phantom Wallet, Solflare does not use the WalletConnect protocol for communication between the dApp and the wallet, instead it provides an internal API mechanism based on deep/universal links.

This means that pairing topic, session topic, session events and other session-related features are not available when connecting to Solflare Wallet and the interaction is really basic. Dapp sends a request, Solflare Wallet responds. That's all.

Furthermore, Solflare Wallet's deep/universal linking mechanism supports interaction exclusively with the Solana network. This means that if you have EVM networks configured in your AppKit instance, they will not be available for use after connecting with Solflare.

In order to support Solflare Wallet interactions, a few extra steps have to be performed (only if you haven't implemented [Link Mode](./link-mode) already).

1. First, be sure you already have your redirection back property configured in your dApp's metadata. See [Redirect to your dApp](./usage#redirect-to-your-dapp)
2. Then you will have to implement your own Deep Link mechanism on the Flutter (and native) side so that when a link is received through it, you can just call `await _appKitModal.dispatchEnvelope(link);`

As guidance, here you can see how it's done in our sample dApp:

#### First, enable Solflare Wallet detection

<Tabs>
  <Tab title="iOS">
    1. Open your `Info.plist` file.
    2. Locate the `<key>LSApplicationQueriesSchemes</key>` section.
    3. Include `<string>solflare</string>` scheme

    Example:

    ```xml theme={null}
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>solflare</string>
      <!-- Any other scheme previously added -->
    </array>
    ```
  </Tab>

  <Tab title="Android">
    1. Open your `AndroidManifest.xml` file.
    2. Add `<package android:name="com.solflare.mobile"/>` scheme inside `<queries>...</queries>` as mentioned above in previous section

    Example:

    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android">

        <queries>
            <package android:name="com.solflare.mobile"/>
            <!-- Any other scheme previously added -->
        </queries>

        <application>
            ...
        </application>
    </manifest>
    ```
  </Tab>
</Tabs>

<Note>
  The rest of the configuration is identical to Phantom's configuration.
</Note>

#### Disable Solflare Wallet

Solflare Wallet is enabled by default. However, in order to function properly, a few steps have to be done as described in the previous section. If you don't want to include/support Solflare Wallet in your app, you just need to pass Solflare Wallet id `1ca0bdd4747578705b1939af023d120677c64fe6ca76add81fda36e350605e79` to the [excludedWalletIds](./options#excludedwalletids) options array.

## Examples

<Card title="Basic example" icon="github" href="https://github.com/reown-com/reown_flutter/blob/develop/packages/reown_appkit/example/example.md">
  A starting point to use AppKit with Flutter
</Card>

<Card title="Full example" icon="github" href="https://github.com/reown-com/reown_flutter/tree/develop/packages/reown_appkit/example/base/lib">
  Full Flutter example using AppKit, which is also our demo dApp
</Card>

## Test Apps

Want to see AppKit in action? Download our sample AppKit apps below and explore what it can do. Enjoy! 😊

* [Android Build (Firebase)](https://appdistribution.firebase.dev/i/52c9b87bbf5fbe01)
* [iOS Build (Testflight)](https://testflight.apple.com/join/6aRJSllc)


# Link Mode
Source: https://docs.reown.com/appkit/flutter/core/link-mode



AppKit Link Mode is a low latency mechanism for transporting One-Click Auth requests and session requests over Universal Links, reducing the need for a WebSocket connection with the Relay. This significantly enhances the user experience when connecting native dApps to native wallets by reducing the latency associated with network connections, especially when the user has an unstable internet connection.

By enabling it, the wallet and dapp will communicate through declared Universal Links (on iOS) and/or App Links (on Android) **even without an internet connection.**

<Frame>
  <video />
</Frame>

<Warning>
  For Link Mode to fully work, you also need to enable the [One-Click Auth + Sign In With Ethereum](./siwe) feature.

  This feature is compatible only with EVM blockchains, so if you decide to include non-EVM blockchains Link Mode mechanism is going to be disabled internally.

  Check out [SIWE basic example](./siwe#basic-usage-example) to try it out.
</Warning>

### How to enable it:

1. Be sure you have this properly configured on your server (`.well-known/apple-app-site-association` and `.well-known/assetlinks.json`) and native app side.

   * If your domain is `https://example.com/` you should have your configuration files under
     * [https://example.com/.well-known/apple-app-site-association](https://example.com/.well-known/apple-app-site-association)
     * [https://example.com/.well-known/assetlinks.json](https://example.com/.well-known/assetlinks.json)
   * See more about this in the [Platform Specific](#platform-specifics) section

2. On your Flutter side, configure your `PairingMetadata`'s `redirect:` object with that Universal Link

3. Set the `linkMode` property to `true`:

```dart {11-12} theme={null}
final _appKitModal = ReownAppKitModal(
  context: context,
  projectId: '{YOUR_PROJECT_ID}',
  metadata: const PairingMetadata(
    name: 'Example App',
    description: 'Example app description',
    url: 'https://example.com/',
    icons: ['https://example.com/logo.png'],
    redirect: Redirect(
      native: 'exampleapp://',
      universal: 'https://reown.com/exampleapp',
      linkMode: true,
    ),
  ),
);

```

Once everything is properly configured, and the user interacts with a Link Mode-supporting Wallet, your dApp will receive responses through it.

In Flutter, there are several plugins that can help you integrate Universal/App Links. However, regardless of which one you choose, it is crucial that, when capturing an incoming link, you pass it to AppKit so it can process the request.

```dart theme={null}
void _onLinkCaptured(String link) async {
  await _appKitModal.dispatchEnvelope(link);
}
```

### How does it look without Link Mode?

<Frame>
  <video />
</Frame>

### Platform specifics

<Tabs>
  <Tab title="iOS">
    1. Ensure that you handle incoming Universal Links in the appropriate methods of `AppDelegate` or `SceneDelegate`.
    2. Ensure that you have enabled the Associated Domains Capability in your XCode project and that your Universal Link is properly configured. *(Depending on the previous states of your Provisioning Profiles it may be necessary to update or create new ones)*

    ```xml theme={null}
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
      <key>com.apple.developer.associated-domains</key>
      <array>
        <string>applinks:your_dapp_universal_link.com</string>
      </array>
    </dict>
    </plist>
    ```

    3. Update/Create your domain's `.well-known/apple-app-site-association` file accordingly.

    For more information on how to configure universal links for your app, refer to the [Apple Documentation](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content?language=swift).<br />
    For a debugging guide, visit the [Debugging Universal Links](https://developer.apple.com/documentation/technotes/tn3155-debugging-universal-links) page.<br />

    You can check our Flutter's AppKit sample [AppDelegate file](https://github.com/reown-com/reown_flutter/blob/master/packages/reown_appkit/example/base/ios/Runner/AppDelegate.swift) as a reference.
  </Tab>

  <Tab title="Android">
    1. Ensure that you handle incoming App Links in your Activity's `onCreate` method and in `onNewIntent` callback.
    2. Ensure that your App Link is properly configured in your app's `AndroidManifest.xml` file with the `autoVerify` set to `true`:

    ```xml theme={null}
    <intent-filter android:autoVerify="true">
      <action android:name="android.intent.action.VIEW" />

      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />

      <data android:scheme="https" />
      <data android:host="your_wallet_universal_link.com" />
      <data android:pathPattern="/open" />
    </intent-filter>
    ```

    3. Update/Create your domain's `.well-known/assetlinks.json` file accordingly

    For more information on how to configure app links for your app, refer to the [Android Documentation](https://developer.android.com/training/app-links/verify-android-applinks).<br />
    For enabling links to app content check [this](https://developer.android.com/training/app-links/deep-linking) documentation page.<br />
    For more information on how to interact with other apps using intents, see [Android Intent Documentation](https://developer.android.com/training/basics/intents).

    You can check our Flutter's AppKit sample [MainActivity file](https://github.com/reown-com/reown_flutter/blob/master/packages/reown_appkit/example/base/android/app/src/main/kotlin/com/example/dapp/MainActivity.kt) as a reference.
  </Tab>
</Tabs>


# Options
Source: https://docs.reown.com/appkit/flutter/core/options



```dart theme={null}
final _appKitModal = ReownAppKitModal(
  logLevel: LogLevel.error,
  context: context,
  projectId: '{YOUR_PROJECT_ID}',
  metadata: const PairingMetadata(
    name: 'Example App',
    description: 'Example app description',
    url: 'https://example.com/',
    icons: ['https://example.com/logo.png'],
    redirect: Redirect( // OPTIONAL
      native: 'exampleapp://',
      universal: 'https://reown.com/exampleapp',
      linkMode: true|false,
    ),
  ),
  // disconnectOnDispose: false,
  // enableAnalytics: true, // OPTIONAL - null by default
  // siweConfig: SIWEConfig(...), // OPTIONAL - null by default
  // featuresConfig: FeaturesConfig(
  //   email: true, // OPTIONAL - false by default
  //   socials: [...], // OPTIONAL - empty by default
  //   showMainWallets: true, // OPTIONAL - true by default
  // ),
  // getBalanceFallback: () async { }, // OPTIONAL - null by default
  // optionalNamespaces: {}, // OPTIONAL - null by default
  // featuredWalletIds: {}, // OPTIONAL - null by default
  // includedWalletIds: {}, // OPTIONAL - null by default
  // excludedWalletIds: {}, // OPTIONAL - null by default
  // customWallets: [ // OPTIONAL - null by default
  //   ReownAppKitModalWalletInfo(
  //     listing: AppKitModalWalletListing(
  //       ...
  //     ),
  //   ),
  // ],
);
```

### enableAnalytics:

Enable analytics to get more insights into your users' activity within your [Reown Dashboard](https://dashboard.reown.com)

### siweConfig:

Used to configure [One-Click Auth + Sign In With Ethereum](./siwe) feature.

Will be disabled automatically if you decide to support/include non-EVM blockchains.

### featuresConfig:

Used to configure extra features such as [Email and Social Login](../core/email).

### getBalanceFallback:

This callback method will be triggered if getting the balance from our blockchain API fails due to unsupported network. You may replace this with your own `getBalance()` method if desired.

### optionalNamespaces:

These are the set of namespaces that will be requested to the wallet you are connecting to.

These values are optional and, in most cases, not required, as AppKit already defines all namespaces internally based on the [default configured networks](https://github.com/reown-com/reown_flutter/blob/develop/packages/reown_appkit/lib/modal/utils/public/appkit_modal_default_networks.dart) (EVM and Solana).

However, if you would want to override that definition with your own or support more networks than just EVM and Solana (i.e. Polkadot, Kadena, etc...) then this is the object you should modify. See [Custom Networks](../core/custom-chains) section.

### featuredWalletIds:

Allows you to override default recommended wallets that are fetched from the API. You can define an array of wallet ids you'd like to prioritize (order is respected).
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```dart theme={null}
final Set<String> featuredWalletIds = {
  'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
  '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust
  'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa', // Coinbase Wallet
}
```

### includedWalletIds:

Similar to `featuredWalletIds`, this option allows you to determine exactly which wallets you want to show. If `includedWalletIds` is set, then only the wallets listed in this object will be displayed in the modal.

```dart theme={null}
final Set<String> includedWalletIds = {
  'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
  '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust
  'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa', // Coinbase Wallet
}
```

### excludedWalletIds:

Similar to `includedWalletIds`, this option allows you to exclude a list of wallets from the API response.

```dart theme={null}
final Set<String> excludedWalletIds = {
  'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
  '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust
  'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa', // Coinbase Wallet
}
```

### customWallets:

A list of user defined wallets. Example:

```dart theme={null}
customWallets: [
  ReownAppKitModalWalletInfo(
    listing: AppKitModalWalletListing(
      id: '00001',
      name: 'Reown Web Sample',
      homepage: 'https://react-wallet.walletconnect.com',
      imageId:
          'https://avatars.githubusercontent.com/u/179229932?s=200&v=4',
      order: 1,
      webappLink: 'https://react-wallet.walletconnect.com',
    ),
  ),
],
```

### disconnectOnDispose:

Whether you want to disconnect the user when disposing the context that holds your modal instance


# Sign In With Ethereum
Source: https://docs.reown.com/appkit/flutter/core/siwe



AppKit provides a simple solution for integrating with "Sign In With Ethereum" (SIWE), a new form of authentication that enables users to control their digital identity with their Ethereum account.
SIWE is a standard also known as [EIP-4361](https://docs.login.xyz/general-information/siwe-overview/eip-4361).

## One-Click Auth

*One-Click Auth* represents a key advancement within WalletConnect v2, streamlining the user authentication process in AppKit by enabling them to seamlessly connect with a wallet and sign a SIWE message with just one click.

Connecting a wallet, proving control of an address with an off-chain signature, authorizing specific actions. These are the kinds of authorizations that can be encoded as ["ReCaps"](https://eips.ethereum.org/EIPS/eip-5573). ReCaps are permissions for a specific website or dapp that can be compactly encoded as a long string in the message you sign and translated by any wallet into a straight-forward one-sentence summary.
WalletConnect uses permissions expressed as ReCaps to enable a One-Click Authentication.

## Pre-requisites

For 1-CA + SIWE to function properly, a backend for communication is required. This backend will be used to generate a nonce, verify messages and handle sessions.
More info [here](https://docs.login.xyz/sign-in-with-ethereum/quickstart-guide/implement-the-backend)

<Warning>
  This feature is compatible only with EVM blockchains. Therefore, including non-EVM blockchains will result in the internal disabling of the 1-CA + SIWE mechanism.

  If you want to support only EVM blockchains, you should disable Solana support from AppKit by calling `ReownAppKitModalNetworks.removeSupportedNetworks('solana');` right before your `ReownAppKitModal()` definition.
</Warning>

## Configure your SIWEConfig object

```dart theme={null}
final _siweConfig = SIWEConfig(
  getNonce: () async {
    // The getNonce method functions as a safeguard
    // against spoofing, akin to a CSRF token.

    return await yourApi.getNonce();
  },
  getMessageParams: () async {
    // Parameters to create the SIWE message internally.
    // More info in https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-222.method

    return SIWEMessageArgs(
      domain: 'yourdomain.com',
      uri: 'https://yourdomain.com/login',
      statement: 'Please sign with your account',
      methods: ['personal_sign', 'eth_sendTransaction'],
    );
  },
  createMessage: (SIWECreateMessageArgs args) {
    // Method for generating an EIP-4361-compatible message.
    // You can use our provided formatMessage() method or implement your own

    return SIWEUtils.formatMessage(args);
  },
  verifyMessage: (SIWEVerifyMessageArgs args) async {
    // This function ensures the message is valid,
    // has not been tampered with, and has been appropriately
    // signed by the wallet address.

    try {
      final isValidMessage = await yourApi.verifyMessage(args.toJson());
      return isValidMessage;
    } catch (error) {
      // error validating message
      return false;
    }
  },
  getSession: () async {
    // Called after verifyMessage() succeeds
    // The backend session should store the associated address and chainId
    // and return it via the `getSession` method.

    try {
      final session = await yourApi.getSession();
      return SIWESession(address: session.address, chains: [session.chainId]);
    } catch (error) {
      // error getting session
      rethrow;
    }
  },
  onSignIn: (SIWESession session) {
    // Called after getSession() succeeds
  },
  signOut: () async {
    // Called when wallet disconnects if `signOutOnDisconnect == true` and/or when
    // `signOutOnAccountChange == true` and/or
    // `signOutOnNetworkChange == true`
    try {
      final success = await yourApi.signOut();
      return success;
    } catch (error) {
      // error signing out
      return false;
    }
  },
  onSignOut: () {
    // Called after signOut() succeeds
  },
  // enabled: true, // OPTIONAL. Enables One-Click Auth + SIWE logic, if `false`, regular session proposal will be used. (default `true`)
  // signOutOnDisconnect: true, // OPTIONAL (default `true`)
  // signOutOnAccountChange: true, // OPTIONAL (default `true`)
  // signOutOnNetworkChange: true, // OPTIONAL (default `true`)
);
```

## Initialize ReownAppKitModal with your `siweConfig`

Add the siwe configuration in `ReownAppKitModal` initialization

```dart {14} theme={null}
final _appKitModal = ReownAppKitModal(
  context: context,
  projectId: '{YOUR_PROJECT_ID}',
  metadata: const PairingMetadata(
    name: 'Example App',
    description: 'Example app description',
    url: 'https://example.com/',
    icons: ['https://example.com/logo.png'],
    redirect: Redirect(
      native: 'exampleapp://',
      universal: 'https://reown.com/exampleapp',
    ),
  ),
  siweConfig: SIWEConfig(...),
);
```

### SIWEConfig reference

```dart theme={null}
class SIWEConfig {
  final Future<String> Function() getNonce;
  final Future<SIWEMessageArgs> Function() getMessageParams;
  final String Function(SIWECreateMessageArgs args) createMessage;
  final Future<bool> Function(SIWEVerifyMessageArgs args) verifyMessage;
  final Future<SIWESession?> Function() getSession;
  final Future<bool> Function() signOut;
  // Callback when user signs in
  final Function(SIWESession session)? onSignIn;
  // Callback when user signs out
  final VoidCallback? onSignOut;
  // Defaults to true
  final bool enabled;
  // In milliseconds, defaults to 5 minutes
  final int nonceRefetchIntervalMs;
  // In milliseconds, defaults to 5 minutes
  final int sessionRefetchIntervalMs;
  // Defaults to true
  final bool signOutOnDisconnect;
  // Defaults to true
  final bool signOutOnAccountChange;
  // Defaults to true
  final bool signOutOnNetworkChange;
  //

  SIWEConfig({
    required this.getNonce,
    required this.getMessageParams,
    required this.createMessage,
    required this.verifyMessage,
    required this.getSession,
    required this.signOut,
    this.onSignIn,
    this.onSignOut,
    this.enabled = true,
    this.signOutOnDisconnect = true,
    this.signOutOnAccountChange = true,
    this.signOutOnNetworkChange = true,
    this.nonceRefetchIntervalMs = 300000,
    this.sessionRefetchIntervalMs = 300000,
  });
}

```

<Note>
  Not configuring `siweConfig` object has the same effect as setting `false` on `siweConfig.enable` parameter.
</Note>

## Exported functions

### `generateNonce`

Simple method to generate a timestamp-based nonce

```dart theme={null}
SIWEUtils.generateNonce();
```

### `formatMessage`

Creates [EIP-4361](https://docs.login.xyz/general-information/siwe-overview/eip-4361#informal-message-template) message based on input arguments.

```dart theme={null}
SIWEUtils.formatMessage(args);
```

### `verifySignature`

Verify a SIWE signature. Internally it calls your backend verification method.

```dart theme={null}
await SIWEUtils.verifySignature(
  address,
  message,
  signature,
  chainId,
  projectId
);
```

### `getChainIdFromMessage`

Get the chain ID from the SIWE message.

```dart theme={null}
SIWEUtils.getChainIdFromMessage(message);
```

### `getAddressFromMessage`

Get the address from the SIWE message.

```dart theme={null}
SIWEUtils.getAddressFromMessage(message);
```

## Basic usage example

This basic configuration is enough to try the feature out without a backend

```dart theme={null}
final _appKitModal = ReownAppKitModal(
  context: context,
  projectId: '{YOUR_PROJECT_ID}',
  metadata: const PairingMetadata(
    name: 'Example App',
    description: 'Example app description',
    url: 'https://example.com/',
    icons: ['https://example.com/logo.png'],
    redirect: Redirect(
      native: 'exampleapp://',
      universal: 'https://reown.com/exampleapp',
    ),
  ),
  siweConfig: SIWEConfig(
    getNonce: () async {
      return SIWEUtils.generateNonce();
    },
    getMessageParams: () async {
      return SIWEMessageArgs(
        domain: Uri.parse(_appKitModal.appKit!.metadata.url).authority,
        uri: _appKitModal.appKit!.metadata.url,
        statement: '{Your custom message here}',
        methods: MethodsConstants.allMethods,
      );
    },
    createMessage: (SIWECreateMessageArgs args) {
      return SIWEUtils.formatMessage(args);
    },
    verifyMessage: (SIWEVerifyMessageArgs args) async {
      final chainId = SIWEUtils.getChainIdFromMessage(args.message);
      final address = SIWEUtils.getAddressFromMessage(args.message);
      final cacaoSignature = args.cacao != null
          ? args.cacao!.s
          : CacaoSignature(
              t: CacaoSignature.EIP191,
              s: args.signature,
            );
      return await SIWEUtils.verifySignature(
        address,
        args.message,
        cacaoSignature,
        chainId,
        DartDefines.projectId,
      );
    },
    getSession: () async {
      final chainId = _appKitModal.selectedChain?.chainId ?? '1';
      final namespace = ReownAppKitModalNetworks.getNamespaceForChainId(
        chainId,
      );
      final address = _appKitModal.session!.getAddress(namespace)!;
      return SIWESession(address: address, chains: [chainId]);
    },
    signOut: () async {
      return true;
    },
  ),
);
```


# Theming
Source: https://docs.reown.com/appkit/flutter/core/theming



To theme the `AppKitModal`, you must wrap your `MaterialApp` with a `ReownAppKitModalTheme` widget.

```dart theme={null}
return ReownAppKitModalTheme(
  child: MaterialApp(
    ...
  ),
);
```

### Default themes

*ReownAppKitModalTheme* already comes with 2 default themes.<br />
A light option: `ReownAppKitModalColors.lightMode`<br />
A dark option: `ReownAppKitModalColors.darkMode`.<br />
You can switch between them by toggling the `isDarkMode:` parameter in `ReownAppKitModalTheme` like so:

```dart theme={null}
return ReownAppKitModalTheme(
  isDarkMode: _isDarkMode,
  child: MaterialApp(
    ...
  ),
);
```

You can check the [Flutter documentation here](https://api.flutter.dev/flutter/widgets/WidgetsBinding/handlePlatformBrightnessChanged.html) to learn how to listen to device's theme changes

### Custom themes

You can define your own light and dark themes by tweaking `ReownAppKitModalThemeData` parameters. For instance, if you want to change the main foreground and background color you could do:

```dart theme={null}
final _themeData = ReownAppKitModalThemeData(
  lightColors: ReownAppKitModalColors.lightMode.copyWith(
    accent100: Colors.red,
    background125: Colors.yellow.shade300,
  ),
  darkColors: ReownAppKitModalColors.darkMode.copyWith(
    accent100: Colors.green,
    background125: Colors.brown,
  ),
);
```

and pass this object to the `ReownAppKitModalTheme`'s `themeData:` parameter:

```dart theme={null}
return ReownAppKitModalTheme(
  isDarkMode: _isDarkMode,
  themeData: _themeData,
  child: MaterialApp(
    ...
  ),
);
```

### Preset theme shortcuts

`ReownAppKitModalTheme` comes with default border radiuses but you can override these values by passing your own values to `ReownAppKitModalRadiuses()` object and then adding this object to `ReownAppKitModalThemeData`'s `radiuses:` parameter.

But you can also set *no corner radiuses* at all by setting this value to `ReownAppKitModalRadiuses.square` or *everything circular* by using `ReownAppKitModalRadiuses.circular`

```dart theme={null}
final _themeData = ReownAppKitModalThemeData(
  lightColors: ReownAppKitModalColors.lightMode.copyWith(
    accent100: Colors.red,
    background125: Colors.yellow.shade300,
  ),
  darkColors: ReownAppKitModalColors.darkMode.copyWith(
    accent100: Colors.green,
    background125: Colors.brown,
  ),
  // No corner radius, modal will look square, use ReownAppKitModalRadiuses.circular to make everything circular
  radiuses: ReownAppKitModalRadiuses.square,
);
```

<Note>
  If you don't wrap your `MaterialApp` with a `ReownAppKitModalTheme` widget, the `ReownAppKitModal` will use the default light theme.
</Note>

`ReownAppKitModalTheme` is an InheritedWidget, so it comes with a few handy methods for you to use:

Check if the current time is dark:

```dart theme={null}
final isDarkMode = ReownAppKitModalTheme.of(context).isDarkMode;
final isMaybeDarkMode = ReownAppKitModalTheme.maybeOf(context)?.isDarkMode;
```

Get current `ReownAppKitModalThemeData` object:

```dart theme={null}
final data = ReownAppKitModalTheme.getDataOf(context);
```

Get current `ReownAppKitModalColors` object:

```dart theme={null}
final colors = ReownAppKitModalTheme.colorsOf(context);
```

You can build your own theme by creating a `ReownAppKitModalThemeData` object. *(More and easier customization options will come in the future)*


# Usage
Source: https://docs.reown.com/appkit/flutter/core/usage



## Import the package:

```dart theme={null}
import "package:reown_appkit/reown_appkit.dart";
```

Create your `ReownAppKitModal()` instance, which is your primary class for opening, closing, disconnecting, etc.

Be sure to update the *project ID* and *metadata* with your own.

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

## Initialization

In order to initialize `ReownAppKitModal()` instance you must provide a *projectId* and a *metadata*.

```dart theme={null}
// AppKit Modal instance
final _appKitModal = ReownAppKitModal(
  context: context, // required BuildContext
  projectId: '{YOUR_PROJECT_ID}',
  metadata: const PairingMetadata(
    name: 'Example App',
    description: 'Example app description',
    url: 'https://example.com/',
    icons: ['https://example.com/logo.png'],
    redirect: Redirect(
      native: 'exampleapp://',
      universal: 'https://reown.com/exampleapp',
      linkMode: true|false,
    ),
  ),
  enableAnalytics: true,
  siweConfig: SIWEConfig(...),
  featuresConfig: FeaturesConfig(...),
  getBalanceFallback: () async {},
  disconnectOnDispose: true|false,
  customWallets: [
    ReownAppKitModalWalletInfo(
      listing: AppKitModalWalletListing(
        ...
      ),
    ),
  ],
);

// Register here the event callbacks on the service you'd like to use. See `Events` section.

await _appKitModal.init();
```

Alternatively, `ReownAppKitModal()` allows you to create an instance by passing a `ReownAppKit()` object as follows:

```dart theme={null}
// AppKit instance
final appKit = ReownAppKit.createInstance(
  projectId: '{YOUR_PROJECT_ID}',
  metadata: const PairingMetadata(
    name: 'Example App',
    description: 'Example app description',
    url: 'https://example.com/',
    icons: ['https://example.com/logo.png'],
    redirect: Redirect(
      native: 'exampleapp://',
      universal: 'https://reown.com/exampleapp',
      linkMode: true|false,
    ),
  ),
);

// AppKit Modal instance
final _appKitModal = ReownAppKitModal(
  context: context, // required BuildContext
  appKit: appKit,
);

// Register here the event callbacks on the service you'd like to use. See `Events` section.

await _appKitModal.init();
```

The `metadata` object should contain your dApp's name, description, url and icon. Redirect object is optional but *highly recommended*. See next session why.

## Redirect to your dApp

AppKit's metadata object contains a `redirect` option that should be used by the wallet to redirect back to your dapp after connection.

```dart theme={null}
redirect: Redirect(
  // your own custom scheme for deep linking
  native: 'exampleapp://',
  // your own universal link for deep linking, required if you are going to use Link Mode
  universal: 'https://reown.com/exampleapp',
  // enable or disable relay-less communication, see `Link Mode` section
  // won't be used if you decide to support/include non-EVM blockchains
  linkMode: true|false,
),
```

<Note>
  `native:` value must be a valid URI scheme: [https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes#syntax](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes#syntax)
</Note>

But in order for the redirect mechanism to work, you would also need to add the following in the iOS and Android native sides:

<Tabs>
  <Tab title="iOS">
    1. Locate your `Info.plist` file under `your_project/ios/Runner/` folder.
    2. Locate the `<key>CFBundleURLTypes</key>` section.
    3. Add your schema as `<dict>` entry within the `<array>` object as follows.

    ```xml theme={null}
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>com.example.yourBundleId</string> <!-- Bundle ID of your app -->
        <key>CFBundleURLSchemes</key>
        <array>
          <!-- your own custom scheme -->
          <!-- Should be the same you set on Redirect.native on Flutter side -->
          <!-- Be mind of removing :// for this step -->
          <string>exampleapp</string>
        </array>
      </dict>
    </array>
    ```
  </Tab>

  <Tab title="Android">
    1. Locate your `AndroidManifest.xml` file under `your_project/android/app/src/main/` folder.
    2. Locate the `<Activity .MainActivity` inside the `<application />` scope.
    3. Add the following intent

    ```xml theme={null}
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- your own custom scheme -->
        <!-- Should be the same you set on Redirect.native on Flutter side -->
        <!-- Be mind of removing :// for this step -->
        <data android:scheme="exampleapp" />
    </intent-filter>
    ```

    <Note>
      If you encounter any issues with your deep linking navigation, especially after upgrading to Flutter 3.27 or later, we kindly encourage you to disable Flutter built-in deep-linking feature as it's been set to true by default, introducing a breaking change: [https://docs.flutter.dev/release/breaking-changes/deep-links-flag-change](https://docs.flutter.dev/release/breaking-changes/deep-links-flag-change)

      So below your `<intent-filter>`, you would add this:

      ```xml theme={null}
      <meta-data android:name="flutter_deeplinking_enabled" android:value="false" />
      ```
    </Note>
  </Tab>
</Tabs>

## Available Buttons

`AppKitModalConnectButton` to open the modal and connect to a wallet or through social options

```dart theme={null}
AppKitModalConnectButton(appKit: _appKitModal)
```

`AppKitModalNetworkSelectButton` to select an available network

```dart theme={null}
AppKitModalNetworkSelectButton(appKit: _appKitModal)
```

`AppKitModalAccountButton` to open account screen once connected

```dart theme={null}
AppKitModalAccountButton(appKitModal: _appKitModal)
```

`AppKitModalAddressButton` shows the address on the current selected network

```dart theme={null}
AppKitModalAddressButton(appKitModal: _appKitModal)
```

`AppKitModalBalanceButton` shows wallet balance on the current selected network

```dart theme={null}
AppKitModalBalanceButton(appKitModal: _appKitModal)
```

To connect to a wallet, you can either use `AppKitModalConnectButton` or `AppKitModalNetworkSelectButton`.

`AppKitModalNetworkSelectButton` will allow the user to pre-select a network before connecting while `AppKitModalConnectButton` will directly show available wallets and social options.

Once connected, `AppKitModalConnectButton` will serve as a Disconnect button while `AppKitModalAccountButton` will show basic account data such as balance and address and will be used to open the Account screen.

Quick example:

```dart theme={null}
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    AppKitModalNetworkSelectButton(appKit: _appKitModal),
    AppKitModalConnectButton(appKit: _appKitModal),
    Visibility(
      visible: _appKitModal.isConnected,
      child: AppKitModalAccountButton(appKit: _appKitModal),
    )
  ],
),
```

`AppKitModalAccountButton` is composed of `AppKitModalBalanceButton` and `AppKitModalAddressButton`, and you can use these separately from `AppKitModalAccountButton`

```dart theme={null}
AppKitModalBalanceButton(appKitModal: _appKitModal, onTap: _appKitModal.openModalView);

AppKitModalAddressButton(appKitModal: _appKitModal, onTap: _appKitModal.openModalView);
```

## Custom Buttons

If you'd like, you can also override AppKit's buttons by using the `custom:` property as follows

```dart {3-8} theme={null}
AppKitModalConnectButton(
  appKit: _appKitModal,
  custom: MyCustomButton(
    onPressed: () {
      _appKitModal.openModalView();
    },
    child: const Text('CONNECT WALLET'),
  ),
),
```

`openModalView()` method can accept a "startWidget" argument that you can leverage to open specifics screens of the modal:

```dart theme={null}
// With no options will open default screen depending on the connection status
_appKitModal.openModalView();

// Will open Network Selection screen independently of the connection status
// This option is not needed if you use AppKitModalNetworkSelectButton()
_appKitModal.openModalView(ReownAppKitModalSelectNetworkPage());

// Will open QR Code screen for connection.
// Will work only if not yet connected.
_appKitModal.openModalView(ReownAppKitModalQRCodePage());

// Will open All Wallets screen for connection
// Will work only if not yet connected.
_appKitModal.openModalView(ReownAppKitModalAllWalletsPage());
```


# Deposit with Exchange - Flutter
Source: https://docs.reown.com/appkit/flutter/payments/deposit-with-exchange



<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Learn more in the WalletConnect Pay docs →](https://docs.walletconnect.com/payments/overview)
</Note>

**Deposit from Exchange** gives your users a seamless way to fund their connected wallets directly from centralized exchange accounts like Binance. Instead of forcing users to leave your app, log into their exchange, and manually handle withdrawals, you can offer a guided in-app flow that keeps them engaged and ready to transact.

The feature now supports automatic swapping and bridging of tokens when needed during deposits, allowing users to deposit from any supported asset on their exchange and receive the desired token on the target network.

## Quickstart

This feature will start working as soon as your team is on the allowed-list. Contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s) to get started.

## Usage Options

There are two ways to use **Deposit from Exchange**:

### 1. Built-in within AppKit (No extra code required)

After enabling the feature, it's automatically available within the AppKit modal. Users can access it by:

1. Connecting their wallet through AppKit
2. Opening the **Account Screen**
3. Clicking on the **"Fund wallet"** button

The deposit flow will be shown:

<img alt="Funding your wallet with Deposit with Exchange" />

<img alt="Funding your wallet with Deposit with Exchange" />

### 2. Stand-alone feature (Programmatic control)

If you want more control over when and how the deposit flow is triggered, you can use it as a stand-alone feature. This allows you to:

* Open the deposit screen from anywhere in your app
* Pre-configure assets, recipients, and other options
* Listen to deposit success events

Use the following helpers:

* Get available payment assets based on the network:

```dart theme={null}
final List<ExchangeAsset> assets = _appKitModal.getPaymentAssetsForNetwork(
    chainId: 'eip155:1',
    includeNative: false,
    includeTest: true,
);
```

***includeNative:*** will include or exclude native tokens, such as ETH on Ethereum or SOL on Solana. These are included by default.<br />
***includeTest:*** will include or exclude testnet assets (e.g., Sepolia, Base Sepolia). These are included by default.

* Configure the feature (if desired):

```dart theme={null}
_appKitModal.configDeposit(
  supportedAssets: assets,
  configuredRecipients: {
    'eip155': '0xYourEVMAddress',
    'solana': 'YourSolanaAddress',
  },
  filterByNetwork: true,
  depositAssetButton: true,
  showNetworkIcon: false,
  preselectedAsset: solanaUSDC, // Optional: locks to a specific asset
);
```

| Parameter              | Type                   | Default             | Description                                                                                                                                                                                                                           |
| ---------------------- | ---------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `supportedAssets`      | `List<ExchangeAsset>?` | `allExchangeAssets` | List of assets available for deposit. If not provided, all supported assets are available.                                                                                                                                            |
| `configuredRecipients` | `Map<String, String>`  | `{}`                | Map of namespace to recipient address (e.g., `{'eip155': '0x...', 'solana': '...'}`). If provided, funds will be sent to these addresses instead of the connected wallet. If not set and no wallet is connected, an error will occur. |
| `filterByNetwork`      | `bool?`                | `true`              | When `true`, filters available assets by the currently selected network.                                                                                                                                                              |
| `depositAssetButton`   | `bool?`                | `true`              | Controls visibility of the asset selection button. **Note:** If `preselectedAsset` is not set, this is always forced to `true`.                                                                                                       |
| `showNetworkIcon`      | `bool?`                | `true`              | Shows or hides the chain icon on asset options.                                                                                                                                                                                       |
| `preselectedAsset`     | `ExchangeAsset?`       | `null`              | If provided, locks the feature to this specific asset and disables the Asset Selector. The asset's network must be a valid CAIP-2 chain ID and must be registered in `ReownAppKitModalNetworks`.                                      |

<Warning>
  When using `preselectedAsset`, the asset's network must be registered in `ReownAppKitModalNetworks`. If using a custom network, add it first using `ReownAppKitModalNetworks.addSupportedNetworks()`. See [Custom Chains](/appkit/flutter/core/custom-chains) for details.
</Warning>

* Open the modal on Deposit Screen:

```dart theme={null}
// Unmodified
_appKitModal.openDepositView();

// With different screen title
await _appKitModal.openModalView(
    ReownAppKitModalDepositScreen(
        titleOverride: 'Your own title',
    ),
);
```

* Listen to deposit success events:

```dart theme={null}
void _onDepositSuccess(DepositSuccessEvent event) {
    debugPrint('Deposit successful from exchange: ${event.exchange.name}');
    // event.exchange contains: id, imageUrl, name
}

// Subscribe to the event
_appKitModal.onDepositSuccess.subscribe(_onDepositSuccess);

// Don't forget to unsubscribe when done
_appKitModal.onDepositSuccess.unsubscribe(_onDepositSuccess);
```

***

### As a standalone option you can also use this feature in a headless (no UI) version

### Instance creation

Create a `ReownAppKit` instance and initialize it (as with any other AppKit usage).

```dart theme={null}
final appKit = ReownAppKit(
  core: ReownCore(
    projectId: '876c62..........', // Project ID retrieved from Reown Dashboard
  ),
  metadata: PairingMetadata(
    name: 'Example',
    description: 'Deposit With Exchange Example',
    url: 'https://example.com/',
    icons: [
      'https://example.com/icon.png',
    ],
    redirect: Redirect(native: 'exampleapp://'),
  ),
);
```

### Initialize the SDK

After creating the instance, initialize it.

```dart theme={null}
// unawaited
appKit.init().then((_) => setState(() {}));

// awaited
await appKit.init();
```

### Supported Assets

Currently the feature works with a set of supported assets. You can use the following function to filter them according to your needs.

```dart theme={null}
// Get supported assets on the given chainId (CAIP-2)
// Null value will return all supported assets in all networks
final List<ExchangeAsset> assets = appKit.getPaymentAssetsForNetwork(
	chainId: 'eip155:1',
	includeNative: true,  // Include native tokens (ETH, SOL). Default: true
	includeTest: true,    // Include testnet assets. Default: true
);
```

Or you can pick any of the preconfigured constants by looking at their definitions:

```dart theme={null}
const ethereumETH = ExchangeAsset(
  network: 'eip155:1',
  address: 'native',
  metadata: AssetMetadata(name: 'Ethereum', symbol: 'ETH', decimals: 18),
);

const ethereumUSDC = ExchangeAsset(
  network: 'eip155:1',
  address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
  metadata: AssetMetadata(name: 'USD Coin', symbol: 'USDC', decimals: 6),
);

const ethereumUSDT = ExchangeAsset(
  network: 'eip155:1',
  address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
  metadata: AssetMetadata(name: 'Tether USD', symbol: 'USDT', decimals: 6),
);

const optimismUSDT = ExchangeAsset(
  network: 'eip155:10',
  address: '0x94b008aA00579c1307B0EF2c499aD98a8ce58e58',
  metadata: AssetMetadata(name: 'Tether USD', symbol: 'USDT', decimals: 6),
);

const polygonUSDC = ExchangeAsset(
  network: 'eip155:137',
  address: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
  metadata: AssetMetadata(name: 'USD Coin', symbol: 'USDC', decimals: 6),
);

const polygonUSDT = ExchangeAsset(
  network: 'eip155:137',
  address: '0xc2132d05d31c914a87c6611c10748aeb04b58e8f',
  metadata: AssetMetadata(name: 'Tether USD', symbol: 'USDT', decimals: 6),
);

const baseETH = ExchangeAsset(
  network: 'eip155:8453',
  address: 'native',
  metadata: AssetMetadata(name: 'Ethereum', symbol: 'ETH', decimals: 18),
);

const baseUSDC = ExchangeAsset(
  network: 'eip155:8453',
  address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
  metadata: AssetMetadata(name: 'USD Coin', symbol: 'USDC', decimals: 6),
);

const arbitrumUSDC = ExchangeAsset(
  network: 'eip155:42161',
  address: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831',
  metadata: AssetMetadata(name: 'USD Coin', symbol: 'USDC', decimals: 6),
);

const arbitrumUSDT = ExchangeAsset(
  network: 'eip155:42161',
  address: '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9',
  metadata: AssetMetadata(name: 'Tether USD', symbol: 'USDT', decimals: 6),
);

const baseSepoliaETH = ExchangeAsset(
  network: 'eip155:84532',
  address: 'native',
  metadata: AssetMetadata(name: 'Ethereum', symbol: 'ETH', decimals: 18),
);

const baseSepoliaUSDC = ExchangeAsset(
  network: 'eip155:84532',
  address: '0x036CbD53842c5426634e7929541eC2318f3dCF7e',
  metadata: AssetMetadata(name: 'USD Coin', symbol: 'USDC', decimals: 6),
);

const sepoliaETH = ExchangeAsset(
  network: 'eip155:11155111',
  address: 'native',
  metadata: AssetMetadata(name: 'Ethereum', symbol: 'ETH', decimals: 18),
);

const solanaSOL = ExchangeAsset(
  network: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
  address: 'native',
  metadata: AssetMetadata(name: 'Solana', symbol: 'SOL', decimals: 9),
);

const solanaUSDC = ExchangeAsset(
  network: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
  address: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
  metadata: AssetMetadata(name: 'USD Coin', symbol: 'USDC', decimals: 6),
);

const solanaUSDT = ExchangeAsset(
  network: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
  address: 'Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB',
  metadata: AssetMetadata(name: 'Tether USD', symbol: 'USDT', decimals: 6),
);

const List<ExchangeAsset> allExchangeAssets = [
  ethereumETH,
  ethereumUSDC,
  ethereumUSDT,
  optimismUSDT,
  polygonUSDC,
  polygonUSDT,
  baseETH,
  baseUSDC,
  arbitrumUSDC,
  arbitrumUSDT,
  baseSepoliaETH,
  baseSepoliaUSDC,
  sepoliaETH,
  solanaSOL,
  solanaUSDC,
  solanaUSDT,
];
```

### Get Supported Exchanges

Whether you previously selected a supported `asset` or not, the next step is to get all the supported exchanges. If `asset` is provided, the response will include only the exchanges supporting that particular asset.

```dart theme={null}
final params = GetExchangesParams(page: 1, asset: asset);
final GetExchangesResult result = await appKit.getExchanges(params: params);
// result.exchanges;
// result.total;
```

`GetExchangesParams` also accepts `includeOnly` and `exclude` parameters to filter the `getExchanges` response. Example:

```dart theme={null}
// Include only specific exchanges
final params = GetExchangesParams(
  page: 1,
  asset: asset,
  includeOnly: ['binance'],
);
final GetExchangesResult result = await appKit.getExchanges(params: params);
// result.exchanges will only contain Binance;
// result.total = 1;

// Exclude specific exchanges
final paramsWithExclude = GetExchangesParams(
  page: 1,
  asset: asset,
  exclude: ['binance'],
);
final GetExchangesResult resultExcluded = await appKit.getExchanges(params: paramsWithExclude);
// result.exchanges will contain all exchanges except Binance;
```

`GetExchangesResult` contains a list of exchanges (`List<Exchange>`) and the total number of them.

### Payment URL

After the user selects the Exchange to fund their wallet from, it's time to get the payment (funding) redirect URL with params:

* Selected `Exchange` ⇒ id
* Selected `ExchangeAsset`
* Amount to fund
* Your wallet address in CAIP-10

```dart theme={null}
final params = GetExchangeUrlParams(
  exchangeId: exchange.id,
  asset: asset,
  amount: '1.0',
  recipient: '${asset.network}:$yourWalletAddress',
);
final GetExchangeUrlResult result = await appKit.getExchangeUrl(
  params: params,
);
// result.sessionId;
// result.url;
```

The result will contain a `sessionId` (relevant later to check the status of the transaction/funding) and the payment URL.

At this point, your dApp will launch this URL on the user's device, and the Exchange App will be launched if installed; otherwise, their default browser will open to log into the exchange and fund.

### Status Check

Once the user completes the transaction on the Exchange side, they should return to your dApp and wait for the confirmation status.

> The recommended approach here is that, right after the user launches the payment URL, your dApp starts to query the confirmation status in a loop with a 3-second delay between each request, until a terminal status is received (or your own timeout logic is triggered). The SDK uses a maximum of 30 polling attempts by default.

```dart theme={null}
final params = GetExchangeDepositStatusParams(
  exchangeId: exchange.id,
  sessionId: sessionId,
);
final GetExchangeDepositStatusResult result = await appKit.getExchangeDepositStatus(
  params: params
);
// result.status
// result.txHash
```

Possible values of `status` are: **UNKNOWN**, **IN\_PROGRESS**, **CONFIRMED**, **FAILED**

* **UNKNOWN:** Transaction has not been submitted yet
* **IN\_PROGRESS:** Transaction submitted, checking confirmation
* **CONFIRMED:** Transaction confirmed, payment successful, `txHash` will be provided along with this status
* **FAILED:** Transaction failed


# Actions
Source: https://docs.reown.com/appkit/ios/core/actions



## Chains

### Chain selection

You can select your own chain by calling the `selectChain(_ chain: Chain)` static method on the `AppKit` object.

### Get selected chain

You can get selected chain by calling the `getSelectedChain()` static method on the `AppKit` object.

## Sign Actions

### Create pairing

```swift theme={null}
let uri: WalletConnectURI = try await AppKit.instance.createPairing()
```

### Connect

```swift theme={null}
try await AppKit.instance.connect(
    requiredNamespaces: [String: ProposalNamespace],
    optionalNamespaces: [String: ProposalNamespace]?,
    sessionProperties: [String: String]?,
    topic: topic // Can be existing topic or nil to create new one
)

// Or without specifying namespaces to stick with default values

try await AppKit.instance.connect(
    topic: topic // Can be existing topic or nil to create new one
)
```

More about optional and required namespaces can be found [here](https://github.com/ChainAgnostic/CAIPs/blob/master/CAIPs/caip-25.md)

### Disconnect

```swift theme={null}
try await AppKit.instance.disconnect(topic: topic)
```

### Request

```swift theme={null}
try await AppKit.instance.request(
    params: .init(
        topic: session.topic,
        method: "some_method",
        params: AnyCodable(payload),
        chainId: Blockchain
    )
)
```

### Get List of Active Sessions

```swift theme={null}
AppKit.instance.getSessions()
```

To get a list of active sessions, call `AppKit.instance.getSessions()` which will return `[Session]`.

### launch connected wallet

```swift theme={null}
AppKit.instance.launchCurrentWallet()
```

To open a wallet that your dapp is connected to

### handle deep links

```swift theme={null}
AppKit.instance.handleDeeplink(url)
```

### Cleanup

```swift theme={null}
AppKit.instance.cleanup(topic)
```

Delete all stored data such as: pairings, sessions, keys


# Swift
Source: https://docs.reown.com/appkit/ios/core/installation



<Tabs>
  <Tab title="SPM">
    ### SwiftPackageManager

    You can add AppKit to your project with Swift Package Manager. In order to do that:

    1. Open Xcode
    2. Go to File -> Add Packages
    3. Paste the repo GitHub url: [https://github.com/reown-com/reown-swift](https://github.com/reown-com/reown-swift)
    4. Tap Add Package
    5. Choose the AppKit products that you want installed in your app.

    ### Alternatively, add AppKit to a `Package.swift` manifest

    To integrate via a `Package.swift` manifest instead of Xcode, you can add
    AppKit to the dependencies array of your package:

    ```swift theme={null}
    dependencies: [
      .package(
        name: "AppKit",
        url: "https://github.com/reown-com/reown-swift",
        .upToNextMajor(from: "1.0.0")
      ),

      // Any other dependencies you have...
    ],
    ```

    Then, in any target that depends on a AppKit product, add it to the `dependencies`
    array of that target:

    ```swift theme={null}
    .target(
      name: "MyTargetName",
      dependencies: [
        // The product(s) you want (most likely AppKit).
        .product(name: "AppKit", package: "AppKit"),
      ]
    ),
    ```
  </Tab>

  <Tab title="Cocoapods">
    <Warning>
      Cocoapods support may be deprecated soon, use SPM instead.
    </Warning>

    1. Update Cocoapods spec repos. Type in terminal `pod repo update`
    2. Initialize Podfile if needed with `pod init`
    3. Add pod to your Podfile like this:

    ```ruby theme={null}
    pod 'reown-swift/ReownAppKit', :git => 'https://github.com/reown-com/reown-swift.git', :tag => '1.0.4'
    ```

    4. Install pods with `pod install`
  </Tab>
</Tabs>

## Example

<Card title="AppKit with Swift example" icon="github" href="https://github.com/reown-com/reown-swift/tree/develop/Example/ExampleApp.xcodeproj">
  Check the Swift example
</Card>

## Test Apps

Want to see AppKit in action? Download our sample AppKit apps below and explore what it can do. Enjoy! 😊

* [iOS Build (Testflight)](https://testflight.apple.com/join/7S1GYcjC)


# One-Click Auth (SIWE)
Source: https://docs.reown.com/appkit/ios/core/one-click-auth



AppKit provides a simple solution for integrating with "Sign In With Ethereum" (SIWE), a form of authentication that enables users to control their digital identity with their Ethereum account. SIWE is a standard also known as EIP-4361.

## One-Click Auth

One-Click Auth represents a key advancement within WalletConnect v2, streamlining the user authentication process in AppKit by enabling them to seamlessly connect with a wallet and sign a SIWE message with just one click.
Connecting a wallet, proving control of an address with an off-chain signature, authorizing specific actions. These are the kinds of authorizations that can be encoded as "ReCaps". ReCaps are permissions for a specific website or dapp that can be compactly encoded as a long string in the message you sign and translated by any wallet into a straight-forward one-sentence summary. WalletConnect uses permissions expressed as ReCaps to enable a One-Click Authentication.

## Configure your AppKit Client

To integrate SIWE with AppKit, you need to configure your AppKit client using `AuthRequestParams`, which are required to create a SIWE message for the user to sign:

```swift theme={null}
AppKit.configure(
    ...
    authRequestParams: authRequestParams,
    ...
)
```

#### Example of AuthRequestParams

```swift theme={null}
extension AuthRequestParams {
    static func stub(
        domain: String = "yourDappDomain.com",
        chains: [String] = ["eip155:1", "eip155:137"],
        nonce: String = "uniqueNonce",
        uri: String = "https://yourDappDomain.com/login",
        statement: String? = "I accept the Terms of Service: https://yourDappDomain.com/tos",
        resources: [String]? = nil, // Here your dapp may request authorization with ReCaps
        methods: [String]? = ["personal_sign", "eth_sendTransaction"]
    ) -> AuthRequestParams {
        return try! AuthRequestParams(
            domain: domain,
            chains: chains,
            nonce: nonce,
            uri: uri,
            statement: statement,
            resources: resources,
            methods: methods
        )
    }
}
```

Configuring your AppKit client with AuthRequestParams will prioritize authentication requests over regular session proposals. If the wallet supports One-Click Auth, the session will be created and the user will automatically authenticate without needing to send another SIWE request over personal\_sign. If the wallet does not support One-Click Auth, it will fall back to the session proposal. In this case, to authenticate the user, you can send another session request to prove address ownership.

To check whether the user has signed a SIWE message, subscribe to authResponsePublisher:

```swift theme={null}
AppKit.instance.authResponsePublisher.sink { (id, result) in
    switch result {
    case .success((session, cacaos)):
        // User has authenticated
        ...
    }
}
```

### Link Mode

The latest release of AppKit supports link mode, a low latency mechanism for transporting 1-click auth requests and session requests over universal links, eliminating the need for a WebSocket connection with the Relay. This significantly enhances the user experience when connecting native dApps to native wallets by reducing the latency associated with networking connections, especially when the user has an unstable internet connection.

<Frame>
  <video />
</Frame>

To support link mode, configure your AppMetadata.Redirect with a valid universal link and set the linkMode property to true:

```swift theme={null}
let metadata = AppMetadata(
    ...
    redirect: try! AppMetadata.Redirect(native: "exampleApp://", universal: "https://example.com/example_dapp", linkMode: true)
)

AppKit.configure(
    ...
    metadata: metadata,
    ...
)
```

#### How does it look without Link Mode?

<Frame>
  <video />
</Frame>

For more information on how to configure universal links for your app, refer to the [Apple Documentation](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content?language=objc).

For a debugging guide, visit the [Debugging Universal Links](https://developer.apple.com/documentation/technotes/tn3155-debugging-universal-links) page.

Once link mode is configured, your dApp will connect and send requests to wallets via universal links after receiving proof from the wallet that it also supports link mode.

The wallet will also send responses using universal links. Your app needs to pass these responses to the AppKit client so it can process them.

```swift theme={null}
AppKit.instance.handleDeeplink(url)
```


# Options
Source: https://docs.reown.com/appkit/ios/core/options



### Explorer recommended wallets

Allows to set default recommended wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/). You can define a list of wallets ids you'd like to prioritize (order is respected). You can get these ids from the explorer link mentioned before by clicking on a copy icon of your desired wallet card.

```swift theme={null}
AppKit.configure(
    ...
    recommendedWalletIds: [String]
    ...
)
```

### Explorer excluded wallets

Allows to exclude wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/). You can define an array of wallet ids you'd like to exclude. You can get these ids from the explorer link mentioned before by clicking on a copy icon of your desired wallet card.

```swift theme={null}
AppKit.configure(
    ...
    excludedWalletIds: [String]
    ...
)
```

### Add custom wallets

If you want to list wallet that is not included in the explorer, you can configure the client as follows:

```swift theme={null}
AppKit.configure(
    ...
    customWallets: [
                .init(
                    id: "swift-sample",
                    name: "Swift Sample Wallet",
                    homepage: "https://reown.com/",
                    imageUrl: "https://avatars.githubusercontent.com/u/179229932?s=200&v=4",
                    order: 1,
                    mobileLink: "walletapp://",
                    linkMode: "https://appkit-lab.reown.com/example"
                )
            ]
    ...
)
```

### Enable Installed Wallet Detection

To enable AppKit to detect wallets installed on the device, you need to make specific changes your project Info.plist.

#### For iOS:

1. Open your `Info.plist` file.
2. Locate the `<key>LSApplicationQueriesSchemes</key>` section.
3. Add the desired wallet schemes as string entries within the `<array>`. These schemes represent the wallets you want to detect.
4. Refer to our [Info.plist example file](https://github.com/WalletConnect/react-native-examples/blob/main/dapps/ModalUProvider/ios/ModalUProvider/Info.plist) for a detailed illustration.

Example:

```xml theme={null}
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>metamask</string>
  <string>trust</string>
  <string>safe</string>
  <string>rainbow</string>
  <string>uniswap</string>
  <!-- Add other wallet schemes names here -->
</array>
```

### Enable Coinbase Wallet

<Warning>
  The new **Base Wallet** (formerly Coinbase Wallet) does not currently support the Coinbase Mobile Wallet SDK used by this integration. This means the Coinbase connector **will not work with Base Wallet** until the Base team adds support for the SDK on their end. This is a known limitation on the Base/Coinbase side and not an issue with AppKit. We will update this documentation once the Base team implements SDK compatibility.
</Warning>

<Note>
  Coinbase Wallet is available from AppKit **version 1.1.0** and higher
</Note>

Since Coinbase Wallet uses its own SDK there are a few simply steps to do if you are planning to include and support it

1. Open your `Info.plist` file.
2. Locate the `<key>LSApplicationQueriesSchemes</key>` section.
3. Include `<string>cbwallet</string>` scheme as mentioned above in previous section

Example:

```xml theme={null}
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>cbwallet</string>
  <!-- Any other scheme previously added -->
</array>
```

Then you need to add the following code to your `AppDelegate.swift` file

```swift theme={null}
import CoinbaseWalletSDK

override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    AppKit.instance.handleDeeplink(url)
}
```

or for SwiftUI attach `onOpenURL` modifier somewhere in your view hierarchy like shown below.

```swift theme={null}
WindowGroup {
  YourView()
      .onOpenURL { url in
          AppKit.instance.handleDeeplink(url)
      }
}

```

<Info>
  If you don't want to include/support Coinbase Wallet you just need to set `coinbaseEnabled` to `false` in your AppKit configure call.
</Info>


# Usage
Source: https://docs.reown.com/appkit/ios/core/usage



### Configure Networking and Pair clients

Make sure that you properly configure Networking and Pair Clients first.

* [Networking](/advanced/api/core/relay)

### Initialize AppKit Client

In order to initialize a client just call a `configure` method from the AppKit instance wrapper

```swift theme={null}
let metadata = AppMetadata(
    name: "Example Wallet",
    description: "Wallet description",
    url: "example.wallet",
    icons: ["https://avatars.githubusercontent.com/u/179229932"],
    // Used for the Verify: to opt-out verification ignore this parameter
    verifyUrl: "verify.walletconnect.com"
)

AppKit.configure(
    projectId: PROJECT_ID,
    metadata: metadata
)
```

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

This example will default to using following namespaces.

```swift theme={null}
let methods: Set<String> = ["eth_sendTransaction", "personal_sign", "eth_signTypedData"]
let events: Set<String> = ["chainChanged", "accountsChanged"]
let blockchains: Set<Blockchain> = [Blockchain("eip155:1")!]
let namespaces: [String: ProposalNamespace] = [
    "eip155": ProposalNamespace(
        chains: blockchains,
        methods: methods,
        events: events
    )
]

let defaultSessionParams =  SessionParams(
                                namespaces: namespaces,
                                sessionProperties: nil
                            )
```

If you want to change that you can call configure and define your own session parameters like this.

```swift theme={null}
let metadata = AppMetadata(...)

let sessionParams = SessionParams(...)

AppKit.configure(
    projectId: PROJECT_ID,
    metadata: metadata,
    sessionParams: sessionParams
)
```

or you can change them later by calling `AppKit.set(sessionParams: SessionParams(...))`

### Provided UI components

Now you can use the `AppKitButton` or `AppKitNetworkButton` components. These two components reflect the state of the AppKit client,
including the session state, account address and balance, currently selected network, and will automatically update when the state changes.
More can be found in [https://github.com/reown-com/reown-swift/blob/develop/Sample/Example/ContentView.swift](https://github.com/reown-com/reown-swift/blob/develop/Sample/Example/ContentView.swift) as part of the Sample app.

### Custom UI

If you want to use custom UI you can present the modal by simply calling.

```swift theme={null}
AppKit.present()
```

It will traverse the view hierarchy and try to present from top most controller. This is meant more towards SwiftUI.

Otherwise you can specify the viewController to present from.

```swift theme={null}
AppKit.present(from: viewController)
```

### Subscribe for AppKit Publishers

The following publishers are available to subscribe:

```swift theme={null}
public var sessionPublisher: AnyPublisher<[Session], Never>
public var sessionSettlePublisher: AnyPublisher<Session, Never>
public var sessionRejectionPublisher: AnyPublisher<(Session.Proposal, Reason), Never>
public var sessionDeletePublisher: AnyPublisher<(String, Reason), Never>
public var sessionResponsePublisher: AnyPublisher<Response, Never>
public var socketConnectionStatusPublisher: AnyPublisher<SocketConnectionStatus, Never>
public var authResponsePublisher: AnyPublisher<(id: RPCID, result: Result<(Session?, [Cacao]), AuthError>), Never>
```

### Sign methods

AppKit is internally using Sign SDK and most of its method are being exposed through AppKit interface.

### Where to go from here

Check the AppKit usage in our Sample app that is part of AppKit repository.


# Actions
Source: https://docs.reown.com/appkit/javascript/core/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

```ts theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
});

modal.open();

modal.close();
```

You can also select the modal's view when calling the `open` function

```ts theme={null}
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' })
```

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.                                                                                                                                        |
| `WalletSend`      | Token sending interface that allows users to send tokens to another address.                                                                              |
| `Swap`            | Swap main view.                                                                                                                                           |
| `ProfileWallets`  | View for managing connected wallets in the user profile.                                                                                                  |

## Disconnect

```ts theme={null}
modal.adapter?.connectionControllerClient?.disconnect();
```

## WalletInfo

Metadata information from the connected wallet

```ts theme={null}
function handler({ name, icon }) {
  console.log(name, icon);
}

modal.subscribeWalletInfo(handler);

//or

const { name, icon } = modal.getWalletInfo();
```

## Get Disabled Networks

Returns an array of CAIP networks that are disabled in the current configuration. This is useful for understanding which networks are not available for user selection.

```ts theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
});

const disabledNetworks = modal.getDisabledCaipNetworks();
console.log('Disabled networks:', disabledNetworks);
```

## 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.

```ts theme={null}
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

<Tabs>
  <Tab title="EVM (eip155)">
    ```ts theme={null}
    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();
    ```
  </Tab>

  <Tab title="Solana">
    ```ts theme={null}
    const provider = await modal.subscribeProviders((state) => {
      return state["solana"];
    });

    if (!provider) throw Error("No Solana provider found");

    const signature = await provider.signMessage(new TextEncoder().encode("Hello"));
    ```
  </Tab>

  <Tab title="Bitcoin (bip122)">
    ```ts theme={null}
    const provider = await modal.subscribeProviders((state) => {
      return state["bip122"];
    });

    if (!provider) throw Error("No Bitcoin provider found");

    const signature = await provider.signMessage("Hello from AppKit");
    ```
  </Tab>
</Tabs>

## Ethereum Library

<Tabs>
  <Tab title="Wagmi">
    You can use [Wagmi actions](https://wagmi.sh/core/actions/getAccount) to sign messages, interact with smart contracts, and much more.

    ### getAccount

    Action for accessing account data and connection status.

    ```tsx theme={null}
    import { getAccount } from "@wagmi/core";
    import { wagmiConfig } from "./main";

    const account = getAccount(wagmiConfig);
    ```

    ### signMessage

    Action for signing messages with connected account.

    ```ts theme={null}
    import { signMessage } from "@wagmi/core";
    import { wagmiConfig } from "./main";

    await signMessage(wagmiConfig, { message: "hello world" });
    ```

    <Card title="Learn More" href="https://wagmi.sh/core/actions/readContract" />
  </Tab>

  <Tab title="Ethers">
    You can use the following methods to get data and subscribe to changes:

    ### getAddress

    ```ts theme={null}
    const address = modal.getAddress();
    ```

    ### getError

    ```ts theme={null}
    const error = modal.getError();
    ```

    ### getChainId

    ```ts theme={null}
    const chainId = modal.getChainId();
    ```

    ### switchNetwork

    ```ts theme={null}
    import { createAppKit } from "@reown/appkit";
    import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";

    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata: metadata,
      features: {
        analytics: true,
      },
    });

    modal.switchNetwork(polygon);
    ```

    ### getIsConnected

    ```ts theme={null}
    const isConnected = modal.getIsConnected();
    ```

    ### getWalletProvider

    The wallet provider.

    ```ts theme={null}
    const walletProvider = modal.getWalletProvider();
    ```

    ### getWalletProviderType

    ```ts theme={null}
    const walletProviderType = modal.getWalletProviderType();
    ```

    ### subscribeProvider

    ```ts theme={null}
    function handleChange({
      provider,
      providerType,
      address,
      error,
      chainId,
      isConnected,
    }) {
      //...
    }

    modal.subscribeProvider(handleChange);
    ```

    <Card title="Learn More" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>
</Tabs>

## Modal State

Get the current value of the modal's state

```ts theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
});

const { open, selectedNetworkId } = modal.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.

```ts theme={null}
const modal = createAppKit({ wagmiConfig, projectId });

modal.subscribeState((newState) => console.log(newState));
```

## ThemeMode

Set the `themeMode` after creating the modal

```ts theme={null}
const modal = createAppKit({ wagmiConfig, projectId });

modal.setThemeMode("dark");
```

Get the current `themeMode` value by calling the `getThemeMode` function

```ts theme={null}
const modal = createAppKit({ wagmiConfig, projectId });

const themeMode = modal.getThemeMode();
```

## Wallet Buttons

Using wallet buttons ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and 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:

1. Install the package:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-wallet-button
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-wallet-button
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-wallet-button
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-wallet-button
  ```
</CodeGroup>

2. Import and use it in your Javascript dApp:

```javascript theme={null}
<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:

```javascript theme={null}
<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>
```

<Note>
  Make sure to call `createAppKitWalletButton` after `createAppKit`.
</Note>

#### 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`, `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`, `tokenpocket`, `haha`, `ambire-wallet`, `bitpay`, `blade-wallet`, `brave`, `coinstats`, `kresus-superapp`, `plena-app`, `status`, `tomo-wallet`, `valora`, and `zengo-wallet` |
| 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                 |

#### Enhanced Multichain Examples

The wallet button now supports enhanced multichain functionality with improved namespace targeting:

```javascript theme={null}
<script type="module">
  import { createAppKitWalletButton } from '@reown/appkit-wallet-button';
  
  const wallets = [
    { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
    { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
    { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
  ];

  wallets.forEach(({ wallet, namespace, label }) => {
    const walletButton = createAppKitWalletButton({ namespace });
    
    walletButton.subscribeIsReady(({ isReady }) => {
      if (!isReady) return;

      const button = document.querySelector(`[data-wallet="${wallet}-${namespace}"]`);
      if (button) {
        button.disabled = false;
        button.textContent = `Connect ${label}`;
        button.onclick = () => walletButton.connect(wallet);
      }
    });
  });
</script>

<button data-wallet="metamask-eip155" disabled>Loading...</button>
<button data-wallet="metamask-solana" disabled>Loading...</button>
<button data-wallet="phantom-bip122" disabled>Loading...</button>
```

## themeVariables

Set the `themeVariables` after creating the modal

```ts theme={null}
const modal = createAppKit({ wagmiConfig, projectId })

modal.setThemeVariables({ ... })
```

Get the current `themeVariables` value by calling the `getThemeVariables` function

```ts theme={null}
const modal = createAppKit({ wagmiConfig, projectId });

const themeMode = modal.getThemeVariables();
```

## Subscribe to theme changes

```ts theme={null}
const unsubscribe = modal.subscribeTheme((newTheme) => console.log(newTheme));
```

## Track modal events

```ts theme={null}
modal.getEvent(); // get last event
modal.subscribeEvents((event) => console.log(event)); // subscribe to events
```


# Components
Source: https://docs.reown.com/appkit/javascript/core/components



# Web Components

AppKit provides pre-built UI components that you can use to trigger the modal or display wallet information.

## React Components

For React and Next.js applications, you can use React components instead of HTML elements:

```tsx theme={null}
import { 
  AppKitButton, 
  AppKitConnectButton, 
  AppKitAccountButton, 
  AppKitNetworkButton 
} from "@reown/appkit/react";

export default function MyApp() {
  return (
    <div>
      <AppKitButton />
      <AppKitConnectButton />
      <AppKitAccountButton />
      <AppKitNetworkButton />
    </div>
  );
}
```

## HTML Elements

AppKit's [web components](https://www.webcomponents.org/) are custom and reusable HTML tags. They will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

<Note>
  Web components are global html elements that don't require importing.
</Note>

### List of optional properties for AppKit web components

### `<appkit-button />`

| Variable       | Description                                                                                            | Type                               |
| -------------- | ------------------------------------------------------------------------------------------------------ | ---------------------------------- |
| `disabled`     | Enable or disable the button.                                                                          | `boolean`                          |
| `balance`      | Show or hide the user's balance.                                                                       | `'show'   \| 'hide'`               |
| `size`         | Default size for the button.                                                                           | `'md'     \| 'sm'`                 |
| `label`        | The text shown in the button.                                                                          | `string`                           |
| `loadingLabel` | The text shown in the button when the modal is open.                                                   | `string`                           |
| `namespace`    | Option to show specific namespace account info. Note: `eip155` is for EVM and `bip122` is for Bitcoin. | `'eip155' \| 'solana' \| 'bip122'` |

### `<appkit-account-button />`

| Variable   | Description                      | Type                 |
| ---------- | -------------------------------- | -------------------- |
| `disabled` | Enable or disable the button.    | `boolean`            |
| `balance`  | Show or hide the user's balance. | `'show'   \| 'hide'` |

### `<appkit-connect-button />`

| Variable       | Description                                          | Type              |
| -------------- | ---------------------------------------------------- | ----------------- |
| `size`         | Default size for the button.                         | `'md'    \| 'sm'` |
| `label`        | The text shown in the button.                        | `string`          |
| `loadingLabel` | The text shown in the button when the modal is open. | `string`          |

### `<appkit-network-button />`

| Variable   | Description                   | Type      |
| ---------- | ----------------------------- | --------- |
| `disabled` | Enable or disable the button. | `boolean` |


# Custom connectors
Source: https://docs.reown.com/appkit/javascript/core/custom-connectors



In AppKit, a 'connector' is the bridge between your app and a user's wallet. This page shows how to add custom connectors beyond the default ones, allowing your users to connect with additional wallet types and authentication methods.

<Tabs>
  <Tab title="Wagmi">
    If you already have Wagmi integrated into your application or would like more control over Wagmi's configuration, you can integrate AppKit on top of it.

    Adding custom connectors like WalletConnect and Coinbase is optional.

    By default, [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and WC connectors are provided out of the box.

    ```ts theme={null}
    import { createAppKit } from '@reown/appkit'
    import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    import { reconnect, http, createConfig } from '@wagmi/core'
    import { CreateConnectorFn } from 'wagmi'
    import { abstractTestnet } from '@reown/appkit/networks'
    // you need to add the abstract library in order to make it work
    import { abstractWalletConnector } from "@abstract-foundation/agw-react/connectors";

    const projectId = 'YOUR_PROJECT_ID'

    const metadata = {
      //...
    }

    // create the connectors (delete the ones you don't need)
    const connectors: CreateConnectorFn[] = []
    connectors.push(abstractWalletConnector())

    export const networks = [abstractTestnet]

    export const wagmiAdapter = new WagmiAdapter({
      connectors,
      projectId,
      networks
    })

    export const config = wagmiAdapter.wagmiConfig

    createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks
    })
    ```

    Check our JavaScript Wagmi demo in [Github](https://github.com/reown-com/appkit-web-examples/)
  </Tab>
</Tabs>


# Installation
Source: https://docs.reown.com/appkit/javascript/core/installation



AppKit provides seamless integration with multiple blockchain ecosystems. It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum,
[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON, TRON and other networks.

<Note>
  We recommend using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to get
  started with AppKit JavaScript.
</Note>

## Installation

Try installing AppKit Skills to get AI-assisted guidance. Your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.

## Custom Installation

<Tabs>
  <Tab title="Wagmi">
    <Warning>
      AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.
    </Warning>

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers v5">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Solana">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-solana
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Bitcoin">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
      ```
    </CodeGroup>
  </Tab>

  <Tab title="TON">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ton
      ```
    </CodeGroup>
  </Tab>

  <Tab title="TRON">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-tron
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Others networks (AppKit Core)">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Cloud Configuration

Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

## Implementation

<Tabs>
  <Tab title="Wagmi">
    <Card title="wagmi Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/javascript/javascript-wagmi">
      Check the JavaScript wagmi example
    </Card>

    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](../../../../cloud/blockchain-api) as a [transport](https://wagmi.sh/core/api/createConfig#transports)

    In your `main.js` file set up the following configuration.

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    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://dashboard.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](https://viem.sh/) 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.

    ```js {2} theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { createAppKit } from '@reown/appkit'
    import { mainnet, arbitrum, base, scroll, polygon } from '@reown/appkit/networks'
    ```

    <Note>
      Looking to add a custom network? Check out the [custom networks](/appkit/javascript/core/custom-networks) section.
    </Note>
  </Tab>

  <Tab title="Ethers v5">
    In your `main.js` file set up the following configuration.

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { createAppKit } from "@reown/appkit";
    import { Ethers5Adapter } from "@reown/appkit-adapter-ethers5";
    import { mainnet, arbitrum } from "@reown/appkit/networks";

    // 1. Get projectId at https://dashboard.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
      },
    });
    ```

    <Warning>
      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.
    </Warning>
  </Tab>

  <Tab title="Ethers">
    <Card title="ethers Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/javascript/javascript-ethers">
      Check the JavaScript ethers example
    </Card>

    In your `main.js` file set up the following configuration.

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { createAppKit } from "@reown/appkit";
    import { EthersAdapter } from "@reown/appkit-adapter-ethers";
    import { mainnet, arbitrum } from "@reown/appkit/networks";

    // 1. Get projectId from https://dashboard.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
      },
    });
    ```

    <Warning>
      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.
    </Warning>
  </Tab>

  <Tab title="Solana">
    <Warning>
      MetaMask does not currently support WalletConnect connections on Solana. The MetaMask team is working on adding this feature. In the meantime, we recommend using other wallets that support Solana. You can find the complete list of supported wallets on [WalletGuide](https://walletguide.walletconnect.network/).
    </Warning>

    <Card title="Solana Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/javascript/javascript-solana">
      Check the JavaScript Solana example
    </Card>

    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.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    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://dashboard.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
      },
    });
    ```
  </Tab>

  <Tab title="Bitcoin">
    <Card title="Bitcoin Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/javascript/javascript-bitcoin">
      Check the JavaScript Bitcoin example
    </Card>

    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.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // App.tsx
    import { createAppKit } from '@reown/appkit'
    import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
    import { bitcoin, bitcoinTestnet, bitcoinSignet } from '@reown/appkit/networks'

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

    // 2. Set the networks
    const networks = [bitcoin, bitcoinTestnet, bitcoinSignet]

    // 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 Dashboard 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

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    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

    <Tabs>
      <Tab title="SignMessageParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          export type SignMessageParams = {
            /**
             * The message to be signed
             */
            message: string
            /**
             * The address to sign the message with
             */
            address: string
          }
        ```
      </Tab>

      <Tab title="SendTransferParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          export type SendTransferParams = {
            /**
             * The amount to be sent in satoshis
             */
            amount: string
            /**
             * The address to send the transfer to
             */
            recipient: string
          }
        ```
      </Tab>

      <Tab title="SignPSBTParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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

        }

        ```
      </Tab>
    </Tabs>

    ### Responses

    <Tabs>
      <Tab title="AccountAddress">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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'
          }
        ```
      </Tab>

      <Tab title="SignPSBTResponse">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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
          }
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="TON">
    <Card title="TON Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/javascript/javascript-ton">
      Check the JavaScript TON example
    </Card>

    AppKit TON is built on top of the AppKit library and provides a set of components and actions to easily connect TON wallets with your decentralized application.

    On top of your app set up the following configuration.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // App.tsx
    import { createAppKit } from '@reown/appkit'
    import { TonAdapter } from '@reown/appkit-adapter-ton'
    import { ton, tonTestnet } from '@reown/appkit/networks'

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

    // 2. Set the networks
    const networks = [ton, tonTestnet]

    // 3. Set up TON Adapter
    const tonAdapter = new TonAdapter({
      projectId
    })

    // 4. Create a metadata object - optional
    const metadata = {
      name: 'AppKit',
      description: 'AppKit TON 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: [tonAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true // Optional - defaults to your Dashboard configuration,
        email: false,
        socials: []
      }
    })

    // 6. Trigger modal programmatically
    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' }))
    ```
  </Tab>

  <Tab title="TRON">
    AppKit TRON is built on top of the AppKit library and provides a set of components and actions to easily connect TRON wallets with your decentralized application.

    On top of your app set up the following configuration.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // App.tsx
    import { createAppKit } from '@reown/appkit'
    import { TronAdapter } from '@reown/appkit-adapter-tron'
    import { tronMainnet } from '@reown/appkit/networks'

    // Import wallet adapters you want to support
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'

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

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

    // 3. Set up TRON Adapter with wallet adapters
    const tronAdapter = new TronAdapter({
      walletAdapters: [
        new TronLinkAdapter({
          openUrlWhenWalletNotFound: false,
          checkTimeout: 3000
        })
      ]
    })

    // 4. Create a metadata object - optional
    const metadata = {
      name: 'AppKit',
      description: 'AppKit TRON 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: [tronAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true, // Optional - defaults to your Dashboard 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' }))
    ```

    ## Install Wallet Adapters

    TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size.

    <Tabs>
      <Tab title="TronLink">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-tronlink
          ```
        </CodeGroup>
      </Tab>

      <Tab title="MetaMask">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-metamask-tron
          ```
        </CodeGroup>
      </Tab>

      <Tab title="Trust Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-trust
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-trust
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-trust
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-trust
          ```
        </CodeGroup>
      </Tab>

      <Tab title="OKX Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-okxwallet
          ```
        </CodeGroup>
      </Tab>

      <Tab title="BitKeep">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-bitkeep
          ```
        </CodeGroup>
      </Tab>

      <Tab title="Binance Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-binance
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-binance
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-binance
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-binance
          ```
        </CodeGroup>
      </Tab>
    </Tabs>

    <Note>
      For a complete list of available TRON wallet adapters, visit the [official wallet adapter documentation](https://walletadapter.org/docs/guide/wallet-reference.html).
    </Note>

    ### Using Multiple Wallet Adapters

    After installing your desired wallet adapters, import and add them to the `walletAdapters` array when creating the TRON adapter:

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'
    import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron'
    import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust'
    import { OkxWalletAdapter } from '@tronweb3/tronwallet-adapter-okxwallet'

    const tronAdapter = new TronAdapter({
      walletAdapters: [
        new TronLinkAdapter({
          openUrlWhenWalletNotFound: false,
          checkTimeout: 3000
        }),
        new MetaMaskAdapter(),
        new TrustAdapter(),
        new OkxWalletAdapter({
          openUrlWhenWalletNotFound: false
        })
      ]
    })
    ```
  </Tab>

  <Tab title="Others networks (AppKit Core)">
    <Card title="AppKit Core Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/javascript/javascript-core-universal-connector">
      Check the JavaScript AppKit Core example for Sui and Stacks
    </Card>

    For a quick integration of Appkit Core you can use the `UniversalConnector` class. Which simplifies the integration of Appkit Core by providing a single interface for all the blockchain protocols.

    You can configure the Universal Connector with the networks you want to support.
    For more information, please visit [RPC Reference](https://docs.reown.com/advanced/multichain/rpc-reference/cosmos-rpc) section from our docs.

    We recommend creating a config file to establish a singleton instance for the Universal Connector:

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { UniversalConnector } from '@reown/appkit-universal-connector'

    export const projectId = import.meta.env.VITE_PROJECT_ID || "b56e18d47c72ab683b10814fe9495694" // this is a public projectId only to use on localhost
    if (!projectId) {
      throw new Error('Project ID is not defined')
    }

    // you can configure your own network
    const suiMainnet = {
      id: 784,
      chainNamespace: 'sui',
      caipNetworkId: 'sui:mainnet',
      name: 'Sui',
      nativeCurrency: { name: 'SUI', symbol: 'SUI', decimals: 9 },
      rpcUrls: { default: { http: ['https://fullnode.mainnet.sui.io:443'] } }
    }

    const stacksMainnet = {
      id: 1,
      chainNamespace: 'stacks',
      caipNetworkId: 'stacks:1',
      name: 'Stacks',
      nativeCurrency: { name: 'STX', symbol: 'STX', decimals: 6 },
      rpcUrls: { default: { http: ['https://stacks-node-mainnet.stacks.co'] } }
    }


    export const networks = [suiMainnet, stacksMainnet]

    export let universalConnector

    export async function getUniversalConnector() {
      if (!universalConnector) {
        universalConnector = await UniversalConnector.init({
          projectId,
          metadata: {
            name: 'Universal Connector',
            description: 'Universal Connector',
            url: 'https://appkit.reown.com',
            icons: ['https://appkit.reown.com/icon.png']
          },
          networks: [
            {
              methods: ['sui_signPersonalMessage'],
              chains: [suiMainnet],
              events: [],
              namespace: 'sui'
            },
            {
              methods: ['stx_signMessage'],
              chains: [stacksMainnet],
              events: ['stx_chainChanged'],
              namespace: 'stacks'
            }
          ]
        })
      }
      return universalConnector
    }
    ```

    In de main.js file you can add :

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { getUniversalConnector } from './config/appKit.js'

    async function setup() {
      const universalConnector = await getUniversalConnector()

      // check if session is already connected
      if (universalConnector?.provider.session) {
        session = universalConnector?.provider.session
      }
    }

    setup() 
    ```
  </Tab>
</Tabs>

## Trigger the modal

<Tabs>
  <Tab title="AppKit">
    To open AppKit you can use our [**web component**](/appkit/javascript/core/components) or build your own button with AppKit [**actions**](/appkit/javascript/core/actions#open-and-close-the-modal).

    <CodeGroup>
      ```tsx ConnectButton.html theme={null}
      <!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>
      ```

      You can trigger the modal by calling the `open` function from the modal instance.

      ```js ConnectButtonWithFunctions.js theme={null}
      const modal = createAppKit({
        adapters: [wagmiAdapter],
        networks: [mainnet, arbitrum],
        projectId
      })

      modal.open()
      ```
    </CodeGroup>
  </Tab>

  <Tab title="AppKit Core">
    To open AppKit Core you need to call the `connect` function from the Universal Connector.

    ```tsx theme={null}
    <script>
      let session = null

      async function handleConnect() {
        // universalConnector is the universal connector instance from the implementation section
        if (!universalConnector) {
          return
        }

        const { session: providerSession } = await universalConnector.connect()
        session = providerSession
      }

      async function handleDisconnect() {
        if (!universalConnector) {
          return
        }
        await universalConnector.disconnect()
        session = null
      }

      document.getElementById('open-connect-modal').addEventListener('click', handleConnect)
      document.getElementById('disconnect').addEventListener('click', handleDisconnect)
    </script>

    <div>
      <button id="open-connect-modal">Open AppKit Core</button>
      <button id="disconnect">Disconnect</button>
    </div>
    ```
  </Tab>
</Tabs>

## Blockchain Interaction

<Tabs>
  <Tab title="Wagmi">
    You need to install @wagmi/core to interact with smart contracts:

    <CodeGroup>
      ```bash npm theme={null}
      npm install @wagmi/core
      ```

      ```bash Yarn theme={null}
      yarn add @wagmi/core
      ```

      ```bash Bun theme={null}
      bun a @wagmi/core
      ```

      ```bash pnpm theme={null}
      pnpm add @wagmi/core
      ```
    </CodeGroup>

    [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) can help us interact with wallets and smart contracts:

    For this use case, we need to import the `wagmiConfig`from our AppKit WagmiAdapter configuration.

    ```tsx theme={null}
    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](https://wagmi.sh/core/actions/readContract).
  </Tab>

  <Tab title="Ethers">
    [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:

    ```tsx theme={null}
    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)
    }
    ```
  </Tab>

  <Tab title="Solana">
    [@Solana/web3.js](https://solana.com/docs/clients/javascript) 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](https://appkit-lab.reown.com/appkit/?name=solana).

    ```js theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    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 '-';
      }
    }
    ```
  </Tab>
</Tabs>

## Alternative Installation

If you are starting from scratch, you can use the following methods to set up your project with Reown AppKit.

<AccordionGroup>
  <Accordion title="AppKit Skills">
    AppKit Skills provide AI-powered assistance for building with Reown AppKit. Once installed, your AI coding assistant can help you set up, build, and debug your AppKit integration.

    To install AppKit Skills, run the following command in your terminal:

    ```bash theme={null}
    npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
    ```

    After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.
  </Accordion>

  <Accordion title="AppKit CLI">
    Reown offers a dedicated CLI to set up a minimal version of AppKit in the easiest and quickest way possible.

    To do this, please run the command below.

    ```bash theme={null}
    npx @reown/appkit-cli
    ```

    After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:

    1. **Project Name**: Enter the name for your project.
    2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
    3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).

    After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.

    To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.

    **Refer to [this section](#cloud-configuration) for more information.**
  </Accordion>
</AccordionGroup>


# Options
Source: https://docs.reown.com/appkit/javascript/core/options



# Options

The following options can be passed to the `createAppKit` function:

```ts theme={null}
createAppKit({ adapters, projectId, networks, ...options });
```

## networks

Array of networks that can be chosen from the `@reown/appkit/networks` library. This library retrieves the list of EVM networks from Viem and also includes the Solana networks.

```ts theme={null}
import { mainnet, solana } from "@reown/appkit/networks";

createAppKit({
  // ...
  networks: [mainnet, solana],
});
```

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

## metadata

Metadata for your AppKit. The `name`, `description`, `icons`, and `url` are used at certain places like the wallet connection, sign message, etc screens. If not provided, they will be fetched from the metadata of your website's document object.

```ts theme={null}
createAppKit({
  // ...
  metadata: {
    name: "My App",
    description: "My App Description",
    icons: ["https://myapp.com/icon.png"],
    url: "https://myapp.com",
  },
});
```

This information will primarily be used in modals when signing a transaction or message using [Embedded wallets (Smart Accounts)](/appkit/features/smart-accounts), or when verifying ownership with [SIWE/SIWX](/appkit/authentication/siwx/default) using any wallet.

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

<AccordionGroup>
  <Accordion title="The icon can be an encoded image">
    ```typescript theme={null}
    const icon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
    createAppKit({
      // ...
      metadata: {
        // ...
        icons: [icon]
      }
    })
    ```
  </Accordion>
</AccordionGroup>

## defaultNetwork

Desired network for the initial connection as default:

<Tabs>
  <Tab title="Wagmi">
    ```ts theme={null}
    import { mainnet } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts theme={null}
    const mainnet = {
      chainId: 1,
      name: "Ethereum",
      currency: "ETH",
      explorerUrl: "https://etherscan.io",
      rpcUrl: "https://cloudflare-eth.com",
    };

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Solana">
    ```ts theme={null}
    import { solana } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: solana,
    });
    ```
  </Tab>
</Tabs>

## defaultAccountTypes

It allows you to configure the default account selected for the specified networks in AppKit. For example, if you want your EVM networks to use an EOA account by default, you can configure it as shown in the code below.

```ts theme={null}
createAppKit({
  //...
  defaultAccountTypes: { eip155: "eoa" },
});
```

Here are all the options you have for each network identifier or networks. Network identifier or networks available are `eip155` for EVM chains, `solana` for Solana, `bip122` for Bitcoin, and `polkadot` for Polkadot.

```ts theme={null}
type DefaultAccountTypes = {
  eip155: "eoa" | "smartAccount";
  solana: "eoa";
  bip122: "payment" | "ordinal" | "stx";
  polkadot: "eoa";
};
```

## featuredWalletIds

Select wallets that are going to be shown on the modal's main view. Default wallets are MetaMask and Trust Wallet.
Array of wallet ids defined will be prioritized (order is respected).
These wallets will also show up first in `All Wallets` view.
You can find the wallets IDs in [Wallets List](/cloud/wallets/wallet-list) or in [WalletGuide](https://walletguide.walletconnect.network/)

```ts theme={null}
createAppKit({
  //...
  featuredWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

## chainImages

Add or override the modal's network images.

```ts theme={null}
createAppKit({
  // ...
  chainImages: {
    1: "https://my.images.com/eth.png",
  },
});
```

## connectorImages

<Tabs>
  <Tab title="Wagmi">
    Set or override the images of any [connector](https://wagmi.sh/core/connectors/injected). AppKit supports two types of connector identification:

    * **EIP6963 wallets** (announced wallets): Use RDNS format like `'io.metamask'`, `'io.coinbase'`, `'app.phantom'`
    * **Other wallets**: Use normal connector IDs like `walletConnect`, `injected`, `appKitAuth`

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'io.metamask': "https://images.mydapp.com/metamask.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
        injected: "https://images.mydapp.com/browser-wallet.png",
      },
    });
    ```
  </Tab>

  <Tab title="Ethers">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>

  <Tab title="Solana">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'app.phantom': "https://images.mydapp.com/phantom.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>
</Tabs>

## enableWallets

Enable or disable injected wallets and WalletConnect. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWallets: false,
});
```

## enableNetworkSwitch

Enables or disables the network switching functionality in the modal. The default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableNetworkSwitch: false,
});
```

## enableReconnect

Enable or disable automatic reconnection on initialization and page load. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableReconnect: false,
});
```

## enableMobileFullScreen

Enable or disable fullscreen rendering of AppKit Core on mobile devices. Default is `false`.

```ts theme={null}
createAppKit({
  //...
  enableMobileFullScreen: true,
});
```

## debug

Enable or disable debug mode in your AppKit. This is useful if you want to see UI alerts when debugging. Default is `false`.

```ts theme={null}
debug: true;
```

## enableWalletGuide

Enable or disable the wallet guide text: `Haven't got a wallet? Get started`, is useful for people that don't have a wallet yet. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWalletGuide: false,
});
```

## termsConditionsUrl

You can add an url for the *terms and conditions* link.

```ts theme={null}
createAppKit({
  //...
  termsConditionsUrl: "https://www.mytermsandconditions.com",
});
```

## privacyPolicyUrl

A URL for the *privacy policy* link.

```ts theme={null}
createAppKit({
  //...
  privacyPolicyUrl: "https://www.myprivacypolicy.com",
});
```

## features

Allows you to toggle (enable or disable) additional features provided by AppKit. Features such as analytics, email and social logins, On-ramp, swaps, etc., can be enabled using this parameter.

### analytics

Enable analytics to get more insights on your users activity within your [Reown Dashboard](https://dashboard.reown.com)

```ts theme={null}
createAppKit({
  //...
  features: {
    analytics: true,
  },
});
```

<Card title="Learn More" href="/cloud/analytics" />

### swaps

Enable or disable the swap feature in your AppKit. [Swaps](/appkit/react/transactions/swaps) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    swaps: true,
  },
});
```

### onramp

Enable or disable the onramp feature in your AppKit. [Onramp](/appkit/react/transactions/onramp) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    onramp: true,
  },
});
```

### connectMethodsOrder

Order of the connection methods in the modal. The default order is `['wallet', 'email', 'social']`.

<Frame>
  <img />
</Frame>

```ts theme={null}
createAppKit({
  //...
  features: {
    connectMethodsOrder: ["social", "email", "wallet"],
  },
});
```

### legalCheckbox

Enable or disable the terms of service and/or privacy policy checkbox.

```ts theme={null}
createAppKit({
  //...
  features: {
    legalCheckbox: true,
  },
});
```

<Frame>
  <img />
</Frame>

## customWallets

Adds custom wallets to the modal. `customWallets` is an array of objects, where each object contains specific information of a custom wallet.

```ts theme={null}
createAppKit({
  //...
  customWallets: [
    {
      id: "myCustomWallet",
      name: "My Custom Wallet",
      homepage: "www.mycustomwallet.com", // Optional
      image_url: "my_custom_wallet_image", // Optional
      mobile_link: "mobile_link", // Optional - Deeplink or universal
      desktop_link: "desktop_link", // Optional - Deeplink
      webapp_link: "webapp_link", // Optional
      app_store: "app_store", // Optional
      play_store: "play_store", // Optional
    },
  ],
});
```

## AllWallets

<Warning>
  If the "All Wallets" button is removed on mobile, all the mobile wallets that were not added on the main view of the modal **won't** be able to connect to your website via WalletConnect protocol.
</Warning>

The `allWallets` parameter allows you to add or remove the "All Wallets" button on the modal.

| Value         | Description                                              |
| ------------- | -------------------------------------------------------- |
| `SHOW`        | Shows the "All Wallets" button on AppKit.                |
| `HIDE`        | Removes the "All Wallets" button from AppKit.            |
| `ONLY_MOBILE` | Shows the "All Wallets" button on AppKit only on mobile. |

```ts theme={null}
createAppKit({
  //...
  allWallets: "ONLY_MOBILE",
});
```

## includeWalletIds & excludeWalletIds

<Warning>
  Wallets that are either not included or excluded **won't** be able to connect to your website on mobile via WalletConnect protocol.
</Warning>

### includeWalletIds

Override default recommended wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be shown (order is respected).
Unlike `featuredWalletIds`, these wallets will be the **only** ones shown in `All Wallets` view and as recommended wallets.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  includeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### excludeWalletIds

Exclude wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be excluded. All other wallets will be shown in respective places.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  excludeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### Coinbase Smart Wallet

The Coinbase connector now includes a new flag to customize the Smart Wallet behavior.

The `preference` (or `coinbasePreference`) flag accepts one of the following string values:

* `eoaOnly`: Uses EOA Browser Extension or Mobile Coinbase Wallet.
* `smartWalletOnly`: Displays Smart Wallet popup.
* `all` (default): Supports both `eoaOnly` and `smartWalletOnly` based on context.

<Tabs>
  <Tab title="Wagmi">
    AppKit can be configured in **two** different ways: **Default** or **Custom**

    Select your preferred configuration mode below:

    Learn more about the Coinbase connector in the [Wagmi documentation](https://wagmi.sh/react/api/connectors/coinbaseWallet#preference).

    <CodeGroup>
      ```ts Default {4} theme={null}
      createAppKit({
        //...
        enableCoinbase: true, // true by default
        coinbasePreference: "smartWalletOnly",
      });
      ```

      ```ts Custom {8} theme={null}
      import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";

      const adapter = new WagmiAdapter({
        //...
        connectors: [
          coinbaseWallet({
            //...
            preference: "smartWalletOnly",
          }),
          projectId,
          networks,
        ],
      });

      export const config = wagmiAdapter.wagmiConfig;
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    ```ts {4} theme={null}
    createAppKit({
      //...
      enableCoinbase: true, // true by default
      coinbasePreference: "smartWalletOnly",
    });
    ```
  </Tab>
</Tabs>

## customRpcUrls

This function allows you to add custom RPC URLs to override the default network RPC URLs for native RPC calls. This is useful when you want to use your own RPC endpoints instead of the defaults.

```ts theme={null}
type CustomRpcUrl = {
  url: string
  config?: HttpTransportConfig // Optional transport configuration
}

type CustomRpcUrlMap = Record<CaipNetworkId, CustomRpcUrl[]>

createAppKit({
  //...
  customRpcUrls: {
    'eip155:1': [
      {
        url: 'https://your-custom-mainnet-url.com',
        config: {
          // Optional HTTP transport configuration
        }
      }
    ],
    'eip155:137': [
      {
        url: 'https://your-custom-polygon-url.com'
      }
    ]
  }
})
```

If you are using the Wagmi adapter, you need to pass the same `customRpcUrls` configuration to both the `WagmiAdapter` and `createAppKit`.

```ts theme={null}
const customRpcUrls: CustomRpcUrlMap = {
  'eip155:1': [{ url: 'https://your-custom-mainnet-url.com' }],
  'eip155:137': [{ url: 'https://your-custom-polygon-url.com' }]
}

const wagmiAdapter = new WagmiAdapter({
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})

const modal = createAppKit({
  adapters: [...],
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})
```

<Note>
  When using the Wagmi adapter, you don't need to configure [`transports`](https://wagmi.sh/core/api/createConfig#transports) separately. The WagmiAdapter will automatically configure them based on your `customRpcUrls`.

  However, if you use both `customRpcUrls` and Wagmi's `transports` property, be aware that `transports` will take precedence and override any conflicting RPC URLs defined in `customRpcUrls`.

  ```ts theme={null}
  const wagmiAdapter = new WagmiAdapter({
    //...
    customRpcUrls: {
      'eip155:1': [{ url: 'https://custom-rpc-1.com' }] // This will be overridden
    },
    transports: {
      [mainnet.id]: http('https://transport-rpc-1.com') // This takes precedence
    }
  })
  ```
</Note>

## universalProviderConfigOverride

Lets you customize specific aspects of the provider's behavior.

```ts theme={null}
createAppKit({
  //...
  universalProviderConfigOverride: {
    methods: { eip155: ['eth_sendTransaction', 'personal_sign'] },
    chains: { eip155: ['1', '137'] },
    events: { eip155: ['chainChanged', 'accountsChanged'] },
    rpcMap: { eip155:1: 'https://ethereum.publicnode.com' },
    defaultChain: 'eip155:1'
  },
});
```

You can override any of the following properties:

* `methods`: Custom RPC methods for each namespace
* `chains`: Supported chains for each namespace
* `events`: Events to subscribe to for each namespace
* `rpcMap`: Custom RPC URLs for specific chains
* `defaultChain`: The default chain to connect to

## allowUnsupportedChain

Allow users to switch to an unsupported chain. This parameter prevents the switch network dialog when a user connects to a network not listed under the `networks` attribute.

```ts theme={null}
createAppKit({
  //...
  allowUnsupportedChain: true,
});
```


# Sign In With Ethereum
Source: https://docs.reown.com/appkit/javascript/core/siwe



<Warning>
  **SIWE is being migrated to SIWX.** We recommend using [SIWX (Sign In With X)](/appkit/authentication/siwx/default) for new implementations as it provides multichain authentication support. For existing SIWE implementations, see the [migration guide](/appkit/authentication/siwx/default#migrating-from-siwe-to-siwx).
</Warning>

AppKit provides a simple solution for integrating with "Sign In With Ethereum" (SIWE), a new form of authentication that enables users to control their digital identity with their Ethereum account.
SIWE is a standard also known as [EIP-4361](https://docs.login.xyz/general-information/siwe-overview/eip-4361).

## One-Click Auth

**One-Click Auth** represents a key advancement within WalletConnect v2, streamlining the user authentication process in AppKit by enabling them to seamlessly connect with a wallet and sign a SIWE message with just one click.
It supports both [EIP-1271](https://eips.ethereum.org/EIPS/eip-1271), the standard for signature validation in smart accounts, and [EIP-6492](https://eips.ethereum.org/EIPS/eip-6492), which enables signature validation for smart accounts (contracts) that are not yet deployed, allowing messages to be signed without requiring prior deployment.

Connecting a wallet, proving control of an address with an off-chain signature, authorizing specific actions. These are the kinds of authorizations that can be encoded as ["ReCaps"](https://eips.ethereum.org/EIPS/eip-5573). ReCaps are permissions for a specific website or dapp that can be compactly encoded as a long string in the message you sign and translated by any wallet into a straight-forward one-sentence summary.
WalletConnect uses permissions expressed as ReCaps to enable a One-Click Authentication.

## Installation

<Tabs>
  <Tab title="One-Click Auth">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit-siwe siwe
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit-siwe siwe
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit-siwe siwe
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit-siwe siwe
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Legacy">
    <Warning>For a better UX we recommend using One-Click Auth.</Warning>

    Install the AppKit SIWE package, additionally we also recommend installing [siwe](https://docs.login.xyz/) which will abstract a lot of the required logic.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit-siwe siwe viem
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit-siwe siwe viem
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit-siwe siwe viem
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit-siwe siwe viem
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Configure your SIWE Client

<Tabs>
  <Tab title="One-Click Auth">
    <Note>
      If you are not using our library on the server-side, please normalize the address with eip-55 in the createMessage function. You can check our example for that Functionality.
    </Note>

    ```ts theme={null}
    import { SiweMessage } from "siwe";
    import {
      type SIWESession,
      type SIWEVerifyMessageArgs,
      type SIWECreateMessageArgs,
      createSIWEConfig,
      formatMessage,
    } from "@reown/appkit-siwe";

    const BASE_URL = "http://localhost:8080";

    /* Function that returns the user's session - this should come from your SIWE backend */
    async function getSession() {
      const res = await fetch(BASE_URL + "/session", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
      });
      if (!res.ok) {
        throw new Error("Network response was not ok");
      }

      const data = await res.json();

      const isValidData =
        typeof data === "object" &&
        typeof data.address === "string" &&
        typeof data.chainId === "number";

      return isValidData ? (data as SIWESession) : null;
    }

    /* Use your SIWE server to verify if the message and the signature are valid */
    const verifyMessage = async ({ message, signature }: SIWEVerifyMessageArgs) => {
      try {
        const response = await fetch(BASE_URL + "/verify", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          mode: "cors",
          body: JSON.stringify({ message, signature }),
          credentials: "include",
        });

        if (!response.ok) {
          return false;
        }

        const result = await response.json();
        return result === true;
      } catch (error) {
        return false;
      }
    };

    // Check the full example for signOut and getNonce functions ...

    /* Create a SIWE configuration object */
    export const siweConfig = createSIWEConfig({
      getMessageParams: async () => ({
        domain: window.location.host,
        uri: window.location.origin,
        chains: [1, 2020],
        statement: "Please sign with your account",
      }),
      createMessage: ({ address, ...args }: SIWECreateMessageArgs) =>
        formatMessage(args, address),

      getNonce: async () => {
        //This is only an example, substitute it with your actual nonce getter.
        const nonce = "YOUR_NONCE_GETTER";
        if (!nonce) {
          throw new Error("Failed to get nonce!");
        }
        return nonce;
      },
      getSession,
      verifyMessage,
      signOut: async () => {
        //Example
        // Implement your Sign out function
      },
    });
    ```

    ## Server Side

    Setting up a backend server using Express for a web application that interacts with the Siwe protocol.

    ### Routes:

    * GET '/nonce': Generates and returns a nonce (single-use random number).
    * POST '/verify': Uses the Siwe protocol to verify the message, requiring a signature (the one you are going to approve throw the UX) and a nonce stored in the session.
    * GET '/session': Retrieves the stored Siwe object from the session.
    * GET '/signout': Clears the session.

    ```ts theme={null}
    import cors from "cors";
    import express from "express";
    import Session from "express-session";
    import { generateNonce } from "siwe";
    import {
      /*verifySignature,*/
      getAddressFromMessage,
      getChainIdFromMessage,
    } from "@reown/appkit-siwe";
    import { createPublicClient, http } from "viem";

    const app = express();

    const projectId = "YOUR_PROJECT_ID";

    // configure cors and sessions
    app.use(
      cors({
        origin: "http://localhost:5173", // frontend URL
        credentials: true,
      })
    );
    app.use(express.json());
    app.use(
      Session({
        name: "siwe-quickstart",
        secret: "siwe-quickstart-secret",
        resave: true,
        saveUninitialized: true,
        cookie: { secure: false, sameSite: true },
      })
    );

    app.get("/nonce", function (_, res) {
      res.setHeader("Content-Type", "text/plain");
      res.send(generateNonce());
    });

    // verify the message
    app.post("/verify", async (req, res) => {
      try {
        if (!req.body.message) {
          return res.status(400).json({ error: "SiweMessage is undefined" });
        }

        // save the session with the address and chainId (SIWESession)
        req.session.siwe = { address, chainId };
        req.session.save(() => res.status(200).send(true));

        const message = req.body.message;
        const signature = req.body.signature;
        const address = getAddressFromMessage(message);
        let chainId = getChainIdFromMessage(message);

        // for the moment, the verifySignature is not working with social logins and emails  with non deployed smart accounts
        // for this reason we recommend using the viem to verify the signature
        const publicClient = createPublicClient({
          transport: http(
            `https://rpc.walletconnect.org/v1/?chainId=${chainId}&projectId=${projectId}`
          ),
        });
        const isValid = await publicClient.verifyMessage({
          message,
          address,
          signature,
        });
        if (!isValid) {
          // throw an error if the signature is invalid
          throw new Error("Invalid signature");
        }
        if (chainId.includes(":")) {
          chainId = chainId.split(":")[1];
        }

        // Convert chainId to a number
        chainId = Number(chainId);

        if (isNaN(chainId)) {
          throw new Error("Invalid chainId");
        }

        // save the session with the address and chainId (SIWESession)
        req.session.siwe = { address, chainId };
        req.session.save(() => res.status(200).send(true));
      } catch (e) {
        // clean the session
        req.session.siwe = null;
        req.session.nonce = null;
        req.session.save(() => res.status(500).json({ message: e.message }));
      }
    });

    /// ... check the github repository for the others endpoints

    // get the session
    app.get("/session", (req, res) => {
      res.setHeader("Content-Type", "application/json");
      res.send(req.session.siwe);
    });
    ```

    Check the github full example to see the full flow working: [siwe-quickstart](https://github.com/WalletConnect/web-examples/tree/main/dapps/appkit-siwe/react/)

    ### `verifySignature`

    Verify a SIWE signature.

    ```ts theme={null}
    import { createPublicClient, http } from "viem";

    const publicClient = createPublicClient({
      transport: http(
        `https://rpc.walletconnect.org/v1/?chainId=${chainId}&projectId=${projectId}`
      ),
    });
    const isValid = await publicClient.verifyMessage({
      message,
      address: address as `0x${string}`,
      signature: signature as `0x${string}`,
    });

    // The verifySignature is not working with social logins and emails with non deployed smart accounts
    // for this reason we recommend using the viem to verify the signature
    // import { verifySignature } from '@reown/appkit-siwe'
    // const isValid = await verifySignature({ address, message, signature, chainId, projectId })
    ```
  </Tab>

  <Tab title="Legacy">
    With help of the [siwe package](https://docs.login.xyz/sign-in-with-ethereum/quickstart-guide/implement-the-frontend) we will create the required configuration for AppKit.

    <Info>
      The nonce and verification process will be implemented in your backend. [Read more.](https://docs.login.xyz/sign-in-with-ethereum/quickstart-guide/implement-the-backend)
    </Info>

    ```ts theme={null}
    import { SiweMessage } from 'siwe'
    import type { SIWECreateMessageArgs, SIWEVerifyMessageArgs } from '@reown/appkit-siwe'

    /* Function that creates a SIWE message */
    function createMessage({ nonce, address, chainId }: SIWECreateMessageArgs){
      const message = new SiweMessage({
        version: '1',
        domain: window.location.host,
        uri: window.location.origin,
        address,
        chainId,
        nonce,
        statement: 'Sign in With Ethereum.'
      })

      return message.prepareMessage()
    }

    /* Function that returns the user's session */
    async function getSession(){
      //...
    }

    /* Use your SIWE server to verify if the message and the signature are valid */
    async function verifyMessage({ message, signature }: SIWEVerifyMessageArgs){
      try {
        const isValid = await validateMessage({ message, signature })

        return isValid
      } catch (error) {
        return false
      }
    },

    /* Create a SIWE configuration object */
    export const siweConfig = createSIWEConfig({
      createMessage,
      getNonce: async () => { //This is only an example, substitute it with your actual nonce getter.
        const nonce = "YOUR_NONCE_GETTER"
        if (!nonce) {
          throw new Error('Failed to get nonce!')
        }
        return nonce
      },
      getSession,
      verifyMessage,
      signOut: async () => { //Example
        // Implement your Sign out function
      }
    })
    ```
  </Tab>
</Tabs>

## Initialize AppKit with your `siweConfig`

```ts theme={null}
// Pass your siweConfig inside the createAppKit() function
const modal = createAppKit({
  adapters: [wagmiAdapter], //or your Ethers adapter
  projectId,
  networks: [mainnet, arbitrum],
  defaultNetwork: mainnet,
  features: {
    analytics: true, // Optional - defaults to your Cloud configuration
  },
  siweConfig: siweConfig, // pass your siweConfig
});
```

## SIWE Config Parameters

<Tabs>
  <Tab title="One-Click Auth">
    #### getMessageParams `() => Promise<{ domain: string, uri: string, chains: number[], statement: string }>`

    Parameters to create the SIWE message internally.

    #### getNonce `() => Promise<string>`

    The getNonce method functions as a safeguard against spoofing, akin to a CSRF token. The siwe package provides a generateNonce() helper, or you can utilize an existing CSRF token from your backend if available.

    #### createMessage `(args: SIWECreateMessageArgs) => string`

    The official siwe package offers a straightforward method for generating an EIP-4361-compatible message, which can subsequently be authenticated using the same package. The nonce parameter is derived from your getNonce endpoint, while the address and chainId variables are sourced from the presently connected wallet.

    #### verifyMessage `(args: SIWEVerifyMessageArgs) => Promise<boolean>`

    The function to ensure the message is valid, has not been tampered with, and has been appropriately signed by the wallet address.

    #### getSession `() => Promise<SIWESession | null>`

    The backend session should store the associated address and chainId and return it via the `getSession` method.

    #### signOut `() => Promise<boolean>`

    The users session can be destroyed calling `signOut`.

    #### onSignIn `(session?: SIWESession) => void`

    Callback when user signs in (Optional).

    #### onSignOut `() => void`

    Callback when user signs out (Optional).

    #### signOutOnDisconnect `boolean`

    * defaults to `true`

    Whether or not to sign out when the user disconnects their wallet (Optional).
  </Tab>

  <Tab title="Legacy">
    #### getNonce `() => Promise<string>`

    The getNonce method functions as a safeguard against spoofing, akin to a CSRF token. The siwe package provides a generateNonce() helper, or you can utilize an existing CSRF token from your backend if available.

    #### createMessage `(args: SIWECreateMessageArgs) => string`

    The official siwe package offers a straightforward method for generating an EIP-4361-compatible message, which can subsequently be authenticated using the same package. The nonce parameter is derived from your getNonce endpoint, while the address and chainId variables are sourced from the presently connected wallet.

    #### verifyMessage `(args: SIWEVerifyMessageArgs) => Promise<boolean>`

    The `verifyMessage` method should lean on the siwe package's new

    ```js theme={null}
    SiweMessage(message).validate(signature);
    ```

    to ensure the message is valid, has not been tampered with, and has been appropriately signed by the wallet address.

    #### getSession `() => Promise<SIWESession | null>`

    The backend session should store the associated address and chainId and return it via the `getSession` method.

    #### signOut `() => Promise<boolean>`

    The users session can be destroyed calling `signOut`.

    #### onSignIn `(session?: SIWESession) => void`

    Callback when user signs in (Optional).

    #### onSignOut `() => void`

    Callback when user signs out (Optional).

    #### signOutOnDisconnect `boolean`

    * defaults to `true`

    Whether or not to sign out when the user disconnects their wallet (Optional).
  </Tab>
</Tabs>


# SIWX
Source: https://docs.reown.com/appkit/javascript/core/siwx



# Sign In With X

## Introduction

The **Sign In With X** feature enables decentralized applications (Dapps) to authenticate users seamlessly across multiple blockchain networks, such as Ethereum, Polygon or Solana. This feature allows developers using our SDK to implement authentication by having users sign a unique string message with their blockchain wallets. The **Sign In With X** feature is designed in accordance with the [CAIP-122](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-122.md) standard, which establishes a chain-agnostic framework for blockchain-based authentication and authorization on off-chain services.

<Frame>
  <img />
</Frame>

<br />

<Card title="Try Demo" href="https://appkit-lab.reown.com/appkit/?name=siwx-default" />

<br />

## Getting Started

**SIWX** works as a plugin system for AppKit and you are going to add the plugin in the AppKit configuration. There are some ways to implement the **SIWX** feature:

* Use Reown Authentication to manage the sessions in the Reown Dashboard
* Use the `DefaultSIWX` class provided by AppKit
* Create a custom implementation to suit your specific requirements.

To initialize the **SIWX** feature, you need to add the `siwx` parameter to the `createAppKit` function.

### Reown Authentication

Reown Authentication is a predefined implementation of the SIWX configuration plugin that uses the Cloud service to create and manage SIWX messages and sessions. With Reown Authentication, you will be able to see and control the sessions of your users using the Reown [Dashboard](/cloud/reown-authentication).

Read more about the [Reown Authentication Implementation](./reown-authentication).

### Custom Implementation

`DefaultSIWX` is a scaffold implementation of the SIWX feature for quick custom integration. It offers pre-built components to get the feature running quickly with some custom adjustments.
Additionally, the expected \` parameters can be configured to allow customization of the feature to suit your specific requirements.

The defined interface must follow specific rules to make sure that AppKit can interact with it correctly. Read more about how to have your [Custom Implementation](./siwx-custom).

## SIWX Expected Behavior

* **SIWX** will prompt to get the user signature and verify his identity every time a connection happen;
* In case a SIWX session is already stored, the user will be automatically signed in and the prompt step will be skipped;
* If the user changes the connected network, **SIWX** will prompt to get the user signature and verify his identity again;
* If the user disconnects from the Dapp, **SIWX** will revoke the session and the user will need to sign in again.

## Migrating from SIWE to SIWX

If you are currently already using **SIWE** from `@reown/appkit-siwe`, after AppKit version 1.5.0, you will be migrated into **SIWX**. The migration process is automatic and your `siweConfig` from `createAppKit` function will be mapped internally.

<Warning>
  It is important to note that if you cannot use `siweConfig` and `siwx` at the same time, `createAppKit` will throw an error in case this happens.

  You may replace `siweConfig` with your own `siwx` configuration manually if you would like to do so.
</Warning>


# Email & Socials
Source: https://docs.reown.com/appkit/javascript/core/socials



To allow users to authenticate using their email or social accounts, you need to configure the `features` parameter in the `createAppKit` function.

<Tabs>
  <Tab title="Wagmi">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```

    <Note>
      AppKit with ethers v5 does not support the `auth` parameter and social logins. If you're using ethers v5, please consider upgrading to ethers v6 following this [ethers migration guide](https://docs.ethers.org/v6/migrating/) and [AppKit Docs](https://docs.walletconnect.com/appkit/overview)
    </Note>
  </Tab>

  <Tab title="Solana">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [solanaWeb3JsAdapter],
      projectId,
      networks: [solana, solanaTestnet, solanaDevnet],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "discord",
          "farcaster",
          "github",
          "apple",
          "facebook",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>
</Tabs>

## Options

* ***email \[boolean]*** : This boolean defines whether you want to enable email login. Default `true`
* ***socials \[array]*** : This array contains the list of social platforms that you want to enable for user authentication. The platforms in the example include Google, X, GitHub, Discord, Apple, Facebook and Farcaster. The default value of `undefined` displays everything. Set it to `false` to disable this feature. You can also pass an empty array to disable it.
* ***emailShowWallets \[boolean]*** : This boolean defines whether you want to show the wallet options on the first connect screen. If this is false and `socials` are enabled, it will show a button that directs you to a new screen displaying the wallet options. Default `true`

## User flow

1. Users will be able to connect to you application by simply using an email address. AppKit will send to them a One Time Password (OTP) to copy and paste in the modal, which will help to
   verify the user's authenticity. This will create a non-custodial wallet for your user which will be available in any application that integrates AppKit and email login.

2. Eventually the user can optionally choose to move from a non-custodial wallet to a self-custodial one by pressing "Upgrade Wallet" on AppKit.
   This will open the *([WalletConnect secure website](https://secure.walletconnect.com/dashboard))* that will walk your user through the upgrading process.

## UI Variants

AppKit SDK offers multiple UI variants to customize the user experience for the authentication process.

By configuring the `emailShowWallets` option in the `features` parameter, you can control the initial connect screen behavior:

* **`emailShowWallets: true`**: When this option is enabled, the initial connect screen will display the available wallet options directly to the user. This allows users to choose their preferred wallet immediately.

<Frame>
  <img />
</Frame>

* **`emailShowWallets: false`**: If this option is disabled, the initial connect screen will show a button instead. When the user clicks this button, they will be directed to a new screen that lists all the available wallet options. This can help simplify the initial interface and reduce visual clutter.

<Frame>
  <img />
</Frame>

By configuring the `socials` option in the `features` parameter, you can control the amount of social providers you want to show on the connect screen:

* **`socials: ['google']`**: When you only set one social provider, it will give you a button with \`connect with provider.

<Frame>
  <img />
</Frame>

* **`socials: ['google', 'discord']`**: When you set 2 social provider, it will give you 2 buttons next to each other with the logo of the social provider

<Frame>
  <img />
</Frame>

* **` socials: ['google', 'x', 'discord', 'apple', 'github']`**: When you set more than 2 social providers, the first provider in the array will get a button with `connect with provider`. The other providers will get a button with the logo of the social provider next to each other.

<Frame>
  <img />
</Frame>

* **`socials: []` or `socials: false`**: When you want to disable social logins.

<Frame>
  <img />
</Frame>

* **` email: false`**: When you want to disable email login.

<Frame>
  <img />
</Frame>

By configuring the `allWallets` option inside the `createAppKit` function, you can control whether if and when you want to display all wallets.

* **`allWallets: 'HIDE'`**: When you do not want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'SHOW'`**: When you want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'ONLY_MOBILE'`**: When you want to display all wallets only on a mobile device.


# Theming
Source: https://docs.reown.com/appkit/javascript/core/theming



The theme for the AppKit integration in your dApp can be fully customized.

## ThemeMode

By default `themeMode` option will be set to user system settings 'light' or 'dark'. But you can override it like this:

```ts theme={null}
createAppKit({
  //...
  themeMode: "light",
});
```

## themeVariables

By default `themeVariables` are undefined. You can set them like this:

```ts theme={null}
createAppKit({
  //...
  themeVariables: {
    "--apkt-color-mix": "#00BB7F",
    "--apkt-color-mix-strength": 40,
  },
});
```

The following list shows the theme variables you can override:

| Variable                      | Description                                                   | Type     |
| ----------------------------- | ------------------------------------------------------------- | -------- |
| `--apkt-font-family`          | Base font family                                              | `string` |
| `--apkt-accent`               | Color used for buttons, icons, labels, etc.                   | `string` |
| `--apkt-color-mix`            | The color that blends in with the default colors              | `string` |
| `--apkt-color-mix-strength`   | The percentage on how much "--apkt-color-mix" should blend in | `number` |
| `--apkt-font-size-master`     | The base pixel size for fonts.                                | `string` |
| `--apkt-border-radius-master` | The base border radius in pixels.                             | `string` |
| `--apkt-z-index`              | The z-index of the modal.                                     | `number` |


# Deposit with Exchange - JavaScript
Source: https://docs.reown.com/appkit/javascript/payments/deposit-with-exchange



<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Learn more in the WalletConnect Pay docs →](https://docs.walletconnect.com/payments/overview)
</Note>

**Deposit with Exchange** gives your users a seamless way to fund their connected wallets directly from centralized exchange accounts like Binance. Instead of forcing users to leave your app, log into their exchange, and manually handle withdrawals, you can offer a guided in-app flow that keeps them engaged and ready to transact.

## Quickstart

This feature will start working as soon as your team is on the allowed-list. Contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s) to get started.

<Warning>
  Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven't done so, please refer to the [Reown AppKit docs](/appkit/overview#quickstart).
</Warning>

Clicking on Fund your wallet will show the modal below:

<img alt="Funding your wallet with Deposit with Exchange" />

## Start Deposit with Exchange from a button

### Install the library

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-pay
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-pay
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-pay
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-pay
  ```
</CodeGroup>

### Usage

Import the `baseUSDC` asset, the `pay` function and the `useAppKitAccount` hook to get the address of the connected wallet.

```ts theme={null}

import { baseUSDC, pay } from '@reown/appkit-pay';
```

Get the address of the connected wallet using the `subscribeAccount` function.

```ts theme={null}
let address = null;
const appKit = createAppKit({...}); // please check our docs or examples to understand how to create the AppKit instance
appKit.subscribeAccount(state => {
    address = state['accountState']?.address;
})
```

In order to run the deposit, use the function `pay`. This function receives three parameters.

```ts theme={null}
// pay function returns a PaymentResult object
const result = await pay({ 
    recipient: address,
    amount: 0.0001,
    paymentAsset: baseUSDC
});

if (result.success) {
    console.log("Payment successful: "+ result.result);
} else {
    console.error("Payment error: "+ result.error);
}
```

## Supported Networks and Assets

Currently, Deposit with Exchange supports the following assets on the following networks:

**Asset -> Network**

**Binance**

* USDC -> Ethereum, Optimism, Arbitrum, Base, Polygon, Solana
* USDT -> Ethereum, Optimism, Arbitrum, Polygon, Solana
* Native Solana

For access to additional networks or assets, contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s).

## Assets Configuration

For the moment, AppKit Pay has pre-configured these assets:

* baseETH, baseSepoliaETH, and baseUSDC
* ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
* ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT

```ts theme={null}
import { baseETH } from '@reown/appkit-pay' 
```

For custom assets, you can create a paymentAsset object with all the information:

```ts theme={null}
// Configure the paymentAsset
const paymentAssetDetails = {
    network: 'eip155:8453', // Base Mainnet
    asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
    metadata: {
        name: 'Ethereum', // Or 'USD Coin'
        symbol: 'ETH',    // Or 'USDC'
        decimals: 18      // Or 6 for USDC
    }
};
```


# Pay with Self-Custodial Wallets - Javascript
Source: https://docs.reown.com/appkit/javascript/payments/pay-with-self-custodial-wallets



<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Learn more in the WalletConnect Pay docs →](https://docs.walletconnect.com/payments/overview)
</Note>

**Pay with Self-Custodial Wallets** lets users pay with their self-custodial wallets like MetaMask, Trust, Ledger, and more directly in-app.

## Quick Start

Here you can find a simplify process to integrate AppKit Pay with Javascript SDK:

<Warning>
  Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven't done so, please refer to the [Reown AppKit docs](/appkit/overview#quickstart).
</Warning>

### Install the library

<Note>
  Projects currently using Reown AppKit to enable self-custodial wallet payments in their own checkout flows are encouraged to switch to AppKit Pay for a simpler integration and significantly improved user experience. AppKit Pay can be found in `@reown/appkit-pay` npm package.
</Note>

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-pay
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-pay
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-pay
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-pay
  ```
</CodeGroup>

### `pay` - Full Payment Flow

#### Usage

```ts theme={null}
import { pay, baseSepoliaETH } from '@reown/appkit-pay' 
```

This function handles the complete payment flow — it opens the payment UI *and* waits for the result (success, failure, cancel, timeout). This function receives three values: `recipient`, `amount`, and `paymentAsset`.

```ts theme={null}
// pay function returns a PaymentResult object
const result = await pay({
    recipient: addressRecipient,
    amount: amount,
    paymentAsset: baseSepoliaETH
});

if (result.success) {
    console.log("Payment successful: " + result.result);
} else {
    console.error("Payment error: " + result.error);
}
```

## Prerequisites

### Enable Payments Feature in Dashboard

The "Payments" feature **must be enabled** in the [Reown Dashboard](https://dashboard.reown.com) before you can use AppKit Pay, even for local testing.

1. Go to your project in the Reown Dashboard
2. Navigate to the Payments section
3. Enable the Payments feature for your projectId

## Test locally

In order to test locally use localhost and port 3000. This is the only port available for local testing.

Add the following to your package.json file in order to run the development server on port 3000:

```json theme={null}
"scripts": {
    "dev": "vite --port 3000",
},
```

## Supported Networks and Assets

For a complete list of supported networks and assets, please refer to the [Networks and Assets Supported](/appkit/payments/pay-with-self-custodial-wallets#networks-and-assets-supported) section in our Pay with Self-Custodial Wallets documentation.

## Assets Configuration

For the moment, AppKit Pay has pre-configured these assets:

* baseETH, baseSepoliaETH, and baseUSDC
* ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
* ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT

```ts theme={null}
import { baseETH } from '@reown/appkit-pay' 
```

For custom assets, you can create a paymentAsset object with all the information:

```ts theme={null}
// Configure the paymentAsset
const paymentAssetDetails = {
    network: 'eip155:8453', // Base Mainnet
    asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
    metadata: {
        name: 'Ethereum', // Or 'USD Coin'
        symbol: 'ETH',    // Or 'USDC'
        decimals: 18      // Or 6 for USDC
    }
};
```

## Functions

### pay

Opens the payment modal. Resolves when the modal is closed by the user or programmatically.

`pay(amount, addressRecipient, options: PaymentOptions): Promise<PaymentResult>`

### getExchanges

<Warning>
  The Pay with Exchange feature has been deprecated. The following exchange-related functions are retained for backward compatibility only. For more details, see the [Payments FAQs](/appkit/payments/overview#payments-faqs).
</Warning>

Fetches available exchanges.

`getExchanges(page?: number): Promise<{ exchanges: Exchange[], total: number }>`

### getPayResult

Use with caution regarding timing; subscriptions are preferred.

`getPayResult(): PayResult | null`

Returns the result of the last successful payment.

### getPayError

Use with caution regarding timing; subscriptions are preferred.

`getPayError(): AppKitPayErrorMessage | null`

Returns the error object if the last payment failed.

### getIsPaymentInProgress

Checks if a payment is currently processing.

`getIsPaymentInProgress(): boolean`


# On-Ramp
Source: https://docs.reown.com/appkit/javascript/transactions/onramp



# On-Ramp

AppKit seamlessly incorporates Coinbase Pay, enabling users to sign in to their Coinbase accounts and utilize fiat payment methods for purchasing cryptocurrencies.

<Note>
  On-Ramp is supported in the latest version of AppKit. If you are using an older version, make sure you upgrade.
</Note>

## Integration

The On-Ramp feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `onramp` flag to `false` in the configuration of the `createAppKit` function.

<Note>
  On-Ramp is now available on **Solana**. The configuration for On-Ramp on both EVM and Solana is the same. Please refer to the code snippet below.
</Note>

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    onramp: false // Optional - true by default
  }
})
```

## On-Ramp API

You can programmatically open the On-Ramp modal.

```
modal.open({ view: 'OnRampProviders' })
```


# Swaps
Source: https://docs.reown.com/appkit/javascript/transactions/swaps



The Swap feature allows users to exchange one cryptocurrency for another directly within the AppKit modal.
This feature is designed to provide a seamless and efficient swapping experience, leveraging our collaboration with [1inch](https://1inch.io/) as the swap provider.

## Availability

* **Requirement**: The Swap feature is available only to users who log in via email or social login. This is consistent with other wallet features such as sending tokens.
* **Transaction Fee**: Reown charges a 0.85% transaction fee on all swaps.
* **Supported Tokens**: The tokens available for swapping are limited to those supported by 1Inch. Note that the availability of tokens may vary depending on the network.
* **Network Availability**: The Swap feature is not available on Sepolia or other testnets at this time.

## How to Use

1. **Connect**: Ensure you are logged in via email or social login.
2. **Access Swap**: Navigate to the Swap feature within the account view.
3. **Select Tokens**: Choose the tokens you wish to swap from the available options.
4. **Type amount**: Enter your desired swap values. You can use the Max button to swap your all tokens or enter any specific number.
5. **See swap details**: Once you type amount value. You'll see the available quote details as received amount, network fee, maximum slippage, or price impact.
6. **Confirm Swap**: Review the swap details, including the transaction fee, and confirm the swap.

## Integration

The Swaps feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `swaps` flag to `false` in the configuration of the `createAppKit` function.

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    swaps: false // Optional - true by default
  }
})
```

## Setting Default Tokens

You can programmatically open the Swap view with pre-selected tokens and amounts using the `open` function from the [`useAppKit`](/appkit/react/core/hooks#useappkit) hook. This allows you to customize the default swap experience for your users.

```ts theme={null}
import { useAppKit } from '@reown/appkit/react'

function Component() {
  const { open } = useAppKit()

  const openSwapWithDefaults = () => {
    open({
      view: 'Swap',
      arguments: {
        amount: '100',      // Optional: pre-fill the swap amount
        fromToken: 'USDC',  // Optional: set the token to swap from
        toToken: 'ETH'      // Optional: set the token to swap to
      }
    })
  }

  return <button onClick={openSwapWithDefaults}>Swap USDC to ETH</button>
}
```

### Parameters

* `amount` (optional): Pre-fill the amount to swap
* `fromToken` (optional): Set the default token to swap from (e.g., 'USDC', 'ETH', 'DAI')
* `toToken` (optional): Set the default token to swap to (e.g., 'ETH', 'USDC', 'USDT')

This is particularly useful when you want to guide users to swap specific tokens or create custom swap buttons for different token pairs in your application.


# Bitcoin
Source: https://docs.reown.com/appkit/networks/bitcoin



The AppKit SDK supports Bitcoin, allowing users to connect their Bitcoin wallets to applications. AppKit provides a simple, secure, and seamless in-app experience for users looking to transact within web3.

<video />

### Bitcoin Standards and Supported Wallets

The AppKit Bitcoin integration aims to support connections through WBIPs and the Bitcoin Wallet Standard. However, most wallets have their own proprietary connection interfaces. To address this, we will gradually expand the list of supported wallets.

Currently, the following extension wallets are supported:

* **Xverse**
* **OKX**
* **Leather**
* **Phantom**.

Here is the list of supported Bitcoin JSON-RPC methods:

1. `sendTransfer`
2. `getAccountAddresses`
3. `signPSBT`
4. `signMessage`

You can find more information about the supported Bitcoin RPC methods [here](/advanced/multichain/rpc-reference/bitcoin-rpc).

While we provide a standardized interface for Bitcoin connector methods, not all wallets support every method. As a result, you may encounter a `MethodNotSupportedError` when attempting to use methods that are not supported by a specific wallet.
If your wallet supports a mentioned standard but you cannot connect, please reach out to our development team for assistance via [Github issues](https://github.com/reown-com/appkit/issues/new/choose).

<Card title="Try Demo" href="https://appkit-lab.reown.com/appkit/?name=bitcoin" />

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/core/installation#bitcoin">
    Get started with AppKit in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/core/installation#bitcoin">
    Get started with AppKit in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/core/installation#bitcoin">
    Get started with AppKit in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/core/installation#bitcoin">
    Get started with AppKit in JavaScript.
  </Card>

  <Card title="React Native" icon="react" href="/appkit/react-native/core/installation#bitcoin">
    Get started with AppKit in React Native.
  </Card>
</CardGroup>


# Add Custom Networks
Source: https://docs.reown.com/appkit/networks/custom-networks



If you cannot find the network you are looking for within the `@reown/appkit/networks` path, you can always add a custom network to allow your app to support WalletConnect.

Since AppKit v1.1.0, there are two ways to add your network to AppKit:

### 1. Adding Your Chain to Viem's Directory (Recommended)

Reown AppKit use Viem to provide EVM chains to users under the hood. If your chain is EVM-compatible, it is recommended to open a PR to Viem to add your network to Viem's directory. Once your chain is accepted by Viem, it will automatically be available in AppKit with no additional steps required.

**Here is the documentation of how to add new chain to Viem:**

[https://github.com/wevm/viem/blob/main/.github/CONTRIBUTING.md#chains](https://github.com/wevm/viem/blob/main/.github/CONTRIBUTING.md#chains)

### 2. Creating a Custom Chain Object

You can also create a custom network object without waiting for approval from Viem's repository.

**Required Information**

You will need the following values to create a custom network:

* **id**: Chain ID of the network.
* **name**: Name of the network.
* **caipNetworkId**: CAIP-2 compliant network ID.
* **chainNamespace**: Chain namespace.
* **nativeCurrency**: Native currency of the network.
* **rpcUrls**: Object containing the RPC URLs for the network.
* **blockExplorers**: Object containing the block explorers for the network.

```js theme={null} theme={null}
import { defineChain } from '@reown/appkit/networks';

// Define the custom network
const customNetwork = defineChain({
  id: 123456789,
  caipNetworkId: 'eip155:123456789',
  chainNamespace: 'eip155',
  name: 'Custom Network',
  nativeCurrency: {
    decimals: 18,
    name: 'Ether',
    symbol: 'ETH',
  },
  blockExplorers: {
    default: { name: 'Explorer', url: 'BLOCK_EXPLORER_URL' },
  },
  contracts: {
    // Add the contracts here
  }
})

// Then pass it to the AppKit
createAppKit({
    adapters: [...],
    networks: [customNetwork],
    chainImages: { // Customize networks' logos
      123456789: '/custom-network-logo.png', // <chainId>: 'www.network.com/logo.png'
    }
})
```

You can use your own RPC by setting the `customRpcUrls` option in the [AppKit configuration](/appkit/react/core/options#customrpcurls). This lets you define custom RPC URLs for specific chains. Each entry must follow the format:

```javascript theme={null} theme={null}
customRpcUrls: {
  'eip155:1': 'https://your.custom.rpc.url',
  'eip155:137': 'https://your.polygon.rpc.url'
}
```

AppKit will prioritize these URLs over the default ones.

## Example of adding WalletConnect to an app on an unsupported network

This guide walks through adding WalletConnect support in your app for networks AppKit doesn't support natively, such as non-EVM networks and L1s that aren't Bitcoin, Solana, Ton or Tron.

The integration is custom: render a "Connect with WalletConnect" button that opens the Reown AppKit QR modal. Each step links to the underlying Reown or WalletConnect doc for full reference.

### 1. Install AppKit

Install `@reown/appkit-core` and the framework adapter for your stack (React, Next.js, Vue, or vanilla JS). Pick the matching installation page from the [WalletConnect standalone integration overview](https://docs.walletconnect.network/app-sdk/overview#standalone-integration-of-walletconnect-as-an-app).

### 2. Define the Network as a custom network

If your chosen chain is non-EVM, you'll need to register it through `defineChain` from `@reown/appkit/networks` using its CAIP-2 identifiers. In this example, we'll use Canton network which uses the identifiers `canton:mainnet` and `canton:testnet`:

```typescript theme={null}
import { defineChain } from '@reown/appkit/networks'

const cantonMainnet = defineChain({
  id: 'canton:mainnet',
  caipNetworkId: 'canton:mainnet',
  chainNamespace: 'canton',
  name: 'Canton Mainnet',
  nativeCurrency: { name: 'Canton Coin', symbol: 'CC', decimals: 10 },
  rpcUrls: { default: { http: ['<your-validator-rpc-url>'] } },
  blockExplorers: { default: { name: 'Canton Explorer', url: '<explorer-url>' } },
})

const cantonTestnet = defineChain({
  id: 'canton:testnet',
  caipNetworkId: 'canton:testnet',
  chainNamespace: 'canton',
  name: 'Canton Testnet',
  nativeCurrency: { name: 'Canton Coin', symbol: 'CC', decimals: 10 },
  rpcUrls: { default: { http: ['<your-validator-rpc-url>'] } },
  blockExplorers: { default: { name: 'Canton Explorer', url: '<explorer-url>' } },
})
```

The RPC URL should point to either a local devnet or a private validator you control. In this case, both can be deployed using the [Hyperledger Splice Wallet Kernel](https://github.com/hyperledger-labs/splice-wallet-kernel); Canton does not expose a shared public RPC.

Full reference: [Reown custom networks](/appkit/react/core/custom-networks).

### 3. Initialize `universal-provider`

```typescript theme={null}
const provider = await UniversalProvider.init({
  projectId: '<your-walletconnect-project-id>',
  metadata: {
    name: '<your-app-name>',
    description: '<your-app-description>',
    url: '<your-app-url>',
    icons: [],
  },
});
```

### 4. Pass the networks & universal-provider to AppKit

```typescript theme={null}
import { createAppKit } from '@reown/appkit'

createAppKit({
  projectId: '<your-walletconnect-project-id>',
  networks: [cantonMainnet, cantonTestnet],
  universalProvider: provider // universal-provider instance
})
```

### 5. Establishing a session on Canton

Calling `.connect` would automatically trigger AppKit modal to display a QR.

```typescript theme={null}
const namespacesToRequest = {
  canton: {
    chains: ['canton:mainnet', 'canton:testnet'],
    methods: [
      "canton_prepareSignExecute",
      "canton_listAccounts",
      "canton_getPrimaryAccount",
      "canton_getActiveNetwork",
      "canton_status",
      "canton_ledgerApi",
      "canton_signMessage",
    ],
    events: ['accountsChanged', 'chainChanged']
  }
}

const session = await provider.connect({
  optionalNamespaces: namespacesToRequest
});
```

### 6. Verify

* Confirm the wallet receives a session proposal scoped to `canton:mainnet` or `canton:testnet`.
* Test signing on Canton Testnet before enabling Mainnet in production.

### 7. Sending requests

Use the `universal-provider` instance to send session requests on Canton:

```typescript theme={null}
const result = await provider.request<{ signature: string, publicKey: string }>({
  topic: session.topic,
  chainId, // canton:mainnet for example
  request: {
    method: 'canton_signMessage',
    params: { message: '<the message you want to sign>' },
  },
});
```


# EVM
Source: https://docs.reown.com/appkit/networks/evm



## Support for all EVM Chains

The AppKit SDK supports all EVM-compatible chains, allowing users to connect their EVM wallets to Web3 applications. As long as the EVM chain you are trying to configure is included in [Viem's package](https://github.com/wevm/viem/blob/main/src/chains/index.ts), AppKit will support it.

<Frame>
  <video />
</Frame>

**AppKit provides a simple, secure, and seamless in-app experience for users looking to transact within web3.**

<Card title="Try Demo" href="https://appkit-lab.reown.com/appkit/?name=solana" />

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/core/installation">
    Get started with AppKit in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/core/installation">
    Get started with AppKit in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/core/installation">
    Get started with AppKit in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/core/installation">
    Get started with AppKit in JavaScript.
  </Card>

  <Card title="React Native" icon="react" href="/appkit/react-native/core/installation">
    Get started with AppKit in React Native.
  </Card>

  <Card title="Flutter" icon="code" href="/appkit/flutter/core/installation">
    Get started with AppKit in Flutter.
  </Card>

  <Card title="Android" icon="android" href="/appkit/android/core/installation">
    Get started with AppKit in Android.
  </Card>

  <Card title="iOS" icon="apple" href="/appkit/ios/core/installation">
    Get started with AppKit in iOS.
  </Card>

  <Card title="Unity" icon="unity" href="/appkit/unity/core/installation">
    Get started with AppKit in Unity.
  </Card>
</CardGroup>


# Supported Chains Overview
Source: https://docs.reown.com/appkit/networks/overview



"Is chain X supported?" doesn't have a single yes/no answer in the Reown stack — it depends on **which capability** you need. Support is layered, and a chain can be available at one layer but not another. This page is the single source of truth for how those layers fit together.

## The four layers of "supported"

| Capability                                     | What "supported" means                                                                                                                                                             | Where the list lives                                                                               | How to extend it                                                                                                                                                                                              |
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Reown SDK (AppKit)**                         | The AppKit SDK has first-class support for the ecosystem (EVM, Solana, Bitcoin, TON, TRON).                                                                                        | [AppKit Supported Chains](/appkit/networks/supported-chains)                                       | EVM: add the chain via [viem](https://github.com/wevm/viem/blob/main/src/chains/index.ts); other ecosystems per their setup guide                                                                             |
| **WalletConnect Protocol**                     | A dApp and wallet can communicate over the WalletConnect protocol (for example, using a QR code to connect). Appearing on this list does **not** guarantee that app features work. | [Chain List](/cloud/chains/chain-list) (live)                                                      | Register your chain in the Explorer — see [Chain Onboarding](/cloud/chains/overview). To connect via QR code across any of these networks, use the [Universal Connector](/appkit/recipes/universal-connector) |
| **On-chain data / RPC proxy** (Blockchain API) | Reown's `rpc.walletconnect.org` proxy serves the chain — powering balances, transaction history, and the default RPC. This is a **curated, closed list**.                          | [Blockchain API](/cloud/blockchain-api)                                                            | [Configure your own RPC URL](/appkit/react/core/custom-networks#2-creating-a-custom-chain-object) for chains not on the list.                                                                                 |
| **Embedded wallet** (Email / Social login)     | Email and social login can sign and broadcast transactions on the chain.                                                                                                           | EVM chains in viem + Solana/Devnet/Testnet — see [Email & Socials](/appkit/authentication/socials) | Limited to chains the Blockchain API can reach (see below)                                                                                                                                                    |

## Listed ≠ usable

The layers are **cumulative** as you move from connecting a wallet toward using app features:

1. A chain on the [Chain List](/cloud/chains/chain-list) only guarantees protocol-level connectivity. Anyone can register a chain in the Explorer, so this list is large and inclusive.
2. To read balances or show transaction history through Reown's default RPC, the chain must also be on the [Blockchain API](/cloud/blockchain-api) list.
3. To use **email/social (embedded) wallets**, the chain must additionally be reachable by the embedded wallet.

So a chain can appear on the protocol Chain List, yet fail when an app tries to fetch a balance or send a transaction — because it isn't served by the Blockchain API, or isn't reachable by the embedded wallet.

### Embedded wallets and the Blockchain API

<Note>
  Email and social login use Reown's secure-site embedded wallet, which signs inside an iframe hosted at `secure.walletconnect.org` and, by default, broadcasts through Reown's Blockchain API (`rpc.walletconnect.org`). In practice, embedded wallets are limited to the chains the secure site and Blockchain API support. A chain that is EVM-compatible in viem but outside that supported set will let a user log in, but transactions are not reliably served — so treat embedded-wallet support as "Blockchain-API-served chains only."
</Note>

## Which list should I check?

| I want to…                                                   | Check this list                                                               |
| ------------------------------------------------------------ | ----------------------------------------------------------------------------- |
| Let users connect a wallet                                   | [Chain List](/cloud/chains/chain-list)                                        |
| Use AppKit SDK features (modal, hooks, etc.)                 | [AppKit Supported Chains](/appkit/networks/supported-chains)                  |
| Read balances or transaction history, or use the default RPC | [Blockchain API](/cloud/blockchain-api)                                       |
| Offer email / social login                                   | EVM-in-viem + Solana **and** [Blockchain API](/cloud/blockchain-api) coverage |

## Detailed references

<CardGroup>
  <Card title="Chain List (protocol)" icon="link" href="/cloud/chains/chain-list">
    Every chain that can use the WalletConnect protocol.
  </Card>

  <Card title="AppKit Supported Chains" icon="layer-group" href="/appkit/networks/supported-chains">
    Ecosystems with native AppKit SDK support.
  </Card>

  <Card title="Blockchain API" icon="server" href="/cloud/blockchain-api">
    Chains served by Reown's RPC proxy.
  </Card>

  <Card title="Email & Socials" icon="envelope" href="/appkit/authentication/socials">
    Chains supported for embedded (email/social) wallets.
  </Card>
</CardGroup>


# Solana
Source: https://docs.reown.com/appkit/networks/solana



The AppKit SDK supports Solana and SVM-based chains, allowing users to connect their wallets to applications built on Solana and compatible networks such as [Solayer Chain](https://solayer.org).

<Frame>
  <video />
</Frame>

**AppKit provides a simple, secure, and seamless in-app experience for users looking to transact within web3.**

<Card title="Try Demo" href="https://appkit-lab.reown.com/appkit/?name=solana" />

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/core/installation#solana">
    Get started with AppKit in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/core/installation#solana">
    Get started with AppKit in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/core/installation#solana">
    Get started with AppKit in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/core/installation#solana">
    Get started with AppKit in JavaScript.
  </Card>

  <Card title="React Native" icon="react" href="/appkit/react-native/core/installation#solana">
    Get started with AppKit in React Native.
  </Card>

  <Card title="Unity" icon="unity" href="/appkit/unity/core/installation">
    Get started with AppKit in Unity.
  </Card>
</CardGroup>


# TON
Source: https://docs.reown.com/appkit/networks/ton



The AppKit SDK supports TON (The Open Network), allowing users to connect their TON wallets to applications.

**AppKit provides a simple, secure, and seamless in-app experience for users looking to transact within web3.**

<Card title="Try Demo" href="https://lab.reown.com/appkit/?name=ton" />

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/core/installation#ton">
    Get started with AppKit in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/core/installation#ton">
    Get started with AppKit in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/core/installation#ton">
    Get started with AppKit in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/core/installation#ton">
    Get started with AppKit in JavaScript.
  </Card>

  <Card title="Svelte" icon="code" href="/appkit/svelte/core/installation#ton">
    Get started with AppKit in Svelte.
  </Card>

  <Card title="Nuxt" icon="code" href="/appkit/nuxt/core/installation#ton">
    Get started with AppKit in Nuxt.
  </Card>
</CardGroup>


# TRON
Source: https://docs.reown.com/appkit/networks/tron



The AppKit SDK supports TRON, allowing users to connect their TRON wallets to applications.

**AppKit provides a simple, secure, and seamless in-app experience for users looking to transact within web3.**

<Card title="Try Demo" href="https://lab.reown.com/appkit/?name=tron" />

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/core/installation#tron">
    Get started with AppKit in React.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/core/installation#tron">
    Get started with AppKit in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/core/installation#tron">
    Get started with AppKit in JavaScript.
  </Card>
</CardGroup>


# Components
Source: https://docs.reown.com/appkit/next/core/components



AppKit provides pre-built React components that you can use to trigger the modal or display wallet information in your Next.js application.

## React Components

```tsx theme={null}
import { 
  AppKitButton, 
  AppKitConnectButton, 
  AppKitAccountButton, 
  AppKitNetworkButton 
} from "@reown/appkit/react";

export default function MyApp() {
  return (
    <div>
      {/* Default button that handles the modal state */}
      <AppKitButton />
      
      {/* Button for connecting a wallet */}
      <AppKitConnectButton />
      
      {/* Button for account view */}
      <AppKitAccountButton />
      
      {/* Button for network selection */}
      <AppKitNetworkButton />
    </div>
  );
}
```

### Component Properties

All React components support the same properties as their HTML element counterparts:

* **AppKitButton**: `size`, `label`, `loadingLabel`, `disabled`, `balance`, `namespace`
* **AppKitConnectButton**: `size`, `label`, `loadingLabel`
* **AppKitAccountButton**: `disabled`, `balance`
* **AppKitNetworkButton**: `disabled`

### `<appkit-wallet-button  />`

<Frame>
  <img />
</Frame>

Using the wallet button components ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.
This component 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:

1. Install the package:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-wallet-button
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-wallet-button
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-wallet-button
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-wallet-button
  ```
</CodeGroup>

2. Import the library in your project:

```tsx theme={null}
import "@reown/appkit-wallet-button/react";
```

3. use the component in your project:

```tsx theme={null}
import { AppKitWalletButton } from "@reown/appkit-wallet-button/react";

export default function MyApp() {
  return <AppKitWalletButton wallet="metamask" />;
}
```

#### Multichain Support

You can specify a blockchain namespace to target specific chains:

```tsx theme={null}
<!-- Connect to Ethereum/EVM chains -->
<appkit-wallet-button wallet="metamask" namespace="eip155" />

<!-- Connect to Solana -->
<appkit-wallet-button wallet="phantom" namespace="solana" />

<!-- Connect to Bitcoin -->
<appkit-wallet-button wallet="leather" namespace="bip122" />
```

#### Enhanced Multichain Examples

The wallet button now supports enhanced multichain functionality with improved namespace targeting:

```tsx theme={null}
const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <appkit-wallet-button
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}
```

#### Options for wallet property

| Type          | Options                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| QR Code       | `walletConnect`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| Wallets       | `metamask`, `trust`, `coinbase`, `rainbow`, `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`, `tokenpocket`, `haha`, `ambire-wallet`, `bitpay`, `blade-wallet`, `brave`, `coinstats`, `kresus-superapp`, `plena-app`, `status`, `tomo-wallet`, `valora`, and `zengo-wallet` |
| 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                 |


# Custom connectors
Source: https://docs.reown.com/appkit/next/core/custom-connectors



In AppKit, a 'connector' is the bridge between your app and a user's wallet. This page shows how to add custom connectors beyond the default ones, allowing your users to connect with additional wallet types and authentication methods.

<Tabs>
  <Tab title="Wagmi">
    If you already have Wagmi integrated into your application or would like more control over Wagmi's configuration, you can integrate AppKit on top of it.

    Adding custom connectors like WalletConnect and Coinbase is optional.

    By default, [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and WC connectors are provided out of the box.

    ```tsx theme={null}
    import { createAppKit } from '@reown/appkit/react'
    import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

    import { http, WagmiProvider, CreateConnectorFn } from 'wagmi'
    import { abstractTestnet } from '@reown/appkit/networks'
    // you need to add the abstract library in order to make it work
    import { abstractWalletConnector } from "@abstract-foundation/agw-react/connectors";
    import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

    const queryClient = new QueryClient()

    export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID

    const metadata = {
      //...
    }

    // create the custom connector (in this example Abastract)
    const connectors: CreateConnectorFn[] = []
    connectors.push(abstractWalletConnector())

    export const networks = [abstractTestnet]

    export const wagmiAdapter = new WagmiAdapter({
      connectors,
      projectId,
      networks
    })

    export const config = wagmiAdapter.wagmiConfig

    createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks
    })

    export function ContextProvider({ children }) {
      return (
        <WagmiProvider config={config}>
          <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </WagmiProvider>
      )
    }
    ```

    Check our Next.js Wagmi demo in [Github](https://github.com/reown-com/appkit-web-examples/)
  </Tab>
</Tabs>


# Hooks
Source: https://docs.reown.com/appkit/next/core/hooks



Hooks are React functions that provide access to wallet connection features, modal controls, blockchain interactions, and wallet event subscriptions. They enable you to manage wallet connections, handle user authentication, interact with smart contracts, and respond to wallet events in your application.

## Hook Ecosystem

AppKit provides a comprehensive set of React hooks that work together to provide a complete wallet connection and blockchain interaction experience. These hooks can be categorized into several functional groups:

* **Connection Hooks**: Manage wallet connections and user authentication (`useAppKit`, `useAppKitAccount`, `useDisconnect`)
* **Network Hooks**: Handle blockchain network selection and information (`useAppKitNetwork`)
* **UI Control Hooks**: Control the modal and UI elements (`useAppKitState`, `useAppKitTheme`)
* **Data Access Hooks**: Access wallet and blockchain data (`useAppKitBalance`, `useWalletInfo`)
* **Event Hooks**: Subscribe to wallet and connection events (`useAppKitEvents`)
* **Payment Hooks**: Handle crypto payments and exchange integrations (`usePay`, `useAvailableExchanges`, `usePayUrlActions`, `useExchangeBuyStatus`)
* **Multi-Wallet Hooks**: Manage multiple wallet connections (`useAppKitConnections`, `useAppKitConnection`)
* **Authentication Hooks**: Handle authentication and user management (`useAppKitUpdateEmail`, `useAppKitSIWX`)
* **Solana-Specific Hooks**: Solana blockchain interactions (`useAppKitConnection` from Solana adapter)

The diagram below illustrates how these hooks relate to each other and to the core AppKit functionality:

```mermaid theme={null}
graph TD
  AppKit[AppKit Core] --> ConnHooks[Connection Hooks]
  AppKit --> NetworkHooks[Network Hooks]
  AppKit --> UIHooks[UI Control Hooks]
  AppKit --> DataHooks[Data Access Hooks]
  AppKit --> EventHooks[Event Hooks]
  AppKit --> PaymentHooks[Payment Hooks]
  AppKit --> MultiWalletHooks[Multi-Wallet Hooks]
  AppKit --> AuthHooks[Authentication Hooks]
  AppKit --> SolanaHooks[Solana-Specific Hooks]
  
  ConnHooks --> useAppKit
  ConnHooks --> useAppKitAccount
  ConnHooks --> useDisconnect
  ConnHooks --> useAppKitWallet
  
  NetworkHooks --> useAppKitNetwork
  
  UIHooks --> useAppKitState
  UIHooks --> useAppKitTheme
  
  DataHooks --> useWalletInfo
  DataHooks --> useAppKitBalance
  
  EventHooks --> useAppKitEvents
  
  PaymentHooks --> usePay
  PaymentHooks --> useAvailableExchanges
  PaymentHooks --> usePayUrlActions
  PaymentHooks --> useExchangeBuyStatus
  
  MultiWalletHooks --> useAppKitConnections
  MultiWalletHooks --> useAppKitConnection
  
  AuthHooks --> useAppKitUpdateEmail
  AuthHooks --> useAppKitSIWX
  
  SolanaHooks --> useAppKitConnectionSolana[useAppKitConnection]
  
  useAppKit -.-> useAppKitAccount
  useAppKitAccount -.-> useAppKitBalance
  useAppKitNetwork -.-> useAppKitBalance
  useAppKitWallet -.-> useAppKitAccount
  usePay -.-> useAvailableExchanges
  usePayUrlActions -.-> useExchangeBuyStatus
```

These hooks provide a modular way to integrate wallet functionality into your application, allowing you to use only the features you need.

## useAppKit

The primary hook for controlling the modal's visibility and behavior. Use this hook when you need to programmatically open or close the modal, or when you want to show specific views like the connection screen or account details.

```ts theme={null}
import { useAppKit } from "@reown/appkit/react";

export default function Component() {
  const { open, close } = useAppKit();
}
```

### Use Cases

* Opening the modal when a user clicks a "Connect Wallet" button
* Closing the modal after a successful connection
* Opening specific views of the modal (e.g., account view, connect view)
* Handling custom wallet connection flows

### Returns

* `open`: Function to open the modal
* `close`: Function to close the modal

### Parameters

You can also select the modal's view when calling the `open` function

```ts theme={null} theme={null} theme={null}
open({ view: "Account" });

// to connect and show multi wallets view
open({ view: "Connect" });

// to connect and show only solana wallets
open({ view: "Connect", namespace: "solana" });

// to connect and show only bitcoin wallets
open({ view: "Connect", namespace: "bip122" });

// to connect and show only ethereum wallets
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
open({ view: 'WalletSend' })
```

**Available namespaces for the Connect view:**

| Namespace | Description                        |
| --------- | ---------------------------------- |
| solana    | For connecting to Solana wallets   |
| bip122    | For connecting to Bitcoin wallets  |
| eip155    | For connecting to Ethereum wallets |

**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                                                                                                                                       |
| WalletSend      | Token sending interface that allows users to send tokens to another address                                                                             |
| Swap            | Swap main view                                                                                                                                          |
| ProfileWallets  | View for managing connected wallets in the user profile                                                                                                 |

## useAppKitAccount

The essential hook for accessing wallet connection state and user information. Use this hook whenever you need to know if a user is connected, get their wallet address, or access their embedded wallet details.

```ts theme={null}
import { useAppKitAccount } from "@reown/appkit/react";

const { address, isConnected, caipAddress, status, embeddedWalletInfo } =
  useAppKitAccount();
```

### Use Cases

* Displaying the connected wallet address in your UI
* Checking if a user is connected before showing certain features
* Getting user information for embedded wallets
* Handling multi-chain scenarios where you need account info for specific chains

<Note>
  Related hooks: [useAppKitWallet](#useappkitwallet), [useDisconnect](#usedisconnect)
</Note>

Hook for accessing account data and connection status for each namespace when working in a multi-chain environment.

```ts theme={null}
import { useAppKitAccount } from "@reown/appkit/react";

const eip155Account = useAppKitAccount({ namespace: "eip155" }); // for EVM chains
const solanaAccount = useAppKitAccount({ namespace: "solana" });
const bip122Account = useAppKitAccount({ namespace: "bip122" }); // for bitcoin
```

### Returns

* `allAccounts`: A list of connected accounts. Each account includes the `address`, `type`, and `namespace`. Accounts also include `caipAddress` (CAIP-10 format) and `chainId` when network information is available.
* `address`: The current account address
* `caipAddress`: The current account address in CAIP format
* `isConnected`: Boolean that indicates if the user is connected
* `status`: The current connection status
* `embeddedWalletInfo`: The current embedded wallet information

```typescript theme={null}
type EmbeddedWalletInfo {
  user: {
    email?: string | null | undefined
    username?: string | null | undefined
  },
  accountType: 'eoa' | 'smartAccount',
  authProvider: 'google' | 'apple' | 'facebook' | 'x' | 'discord' | 'farcaster' | 'github' | 'email',
  isSmartAccountDeployed: boolean
}

type ConnectionStatus = 'connected' | 'disconnected' | 'connecting' | 'reconnecting'

type Account = {
  namespace: ChainNamespace
  address: string
  chainId?: string | number
  caipAddress?: `${string}:${string}:${string}`
  type: string
  publicKey?: string // Available for Bitcoin (bip122) accounts
}

type UseAppKitAccountReturnType = {
  isConnected: boolean
  allAccounts: Account[]
  status?: ConnectionStatus
  address?: string
  caipAddress?: `${string}:${string}`
  embeddedWalletInfo?: EmbeddedWalletInfo
}
```

### Getting Bitcoin Public Keys

When working with Bitcoin accounts, you can extract public keys from the connected accounts:

```tsx theme={null}
import { useAppKitAccount } from "@reown/appkit/react";

function BitcoinComponent() {
  const { allAccounts } = useAppKitAccount({ chainNamespace: 'bip122' });
  const publicKeys = allAccounts.map(acc => acc.publicKey);
  
  return (
    <div>
      {publicKeys.map((key, index) => (
        <div key={index}>Public Key: {key}</div>
      ))}
    </div>
  );
}
```

This is particularly useful when you need to access Bitcoin public keys for transaction signing or address derivation.

## useAppKitWallet

<Frame>
  <img />
</Frame>

The direct wallet connection hook that enables connectivity to specific wallets without opening the modal. Use this hook when you want to provide direct wallet buttons, create a customized wallet selection interface, or implement social login options.

Using the wallet button hooks ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.
This hook allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need to open the traditional modal.
Execute this command to install the library for use it:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-wallet-button
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-wallet-button
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-wallet-button
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-wallet-button
  ```
</CodeGroup>

Then you have to import the hook in your project:

```tsx theme={null}
import { useAppKitWallet } from "@reown/appkit-wallet-button/react";
```

And finally, you can use the hook in your project:

```tsx theme={null}
const { isReady, isPending, connect } = useAppKitWallet({
    namespace: 'eip155', // Optional: specify chain namespace
    onSuccess(parsedCaipAddress) {
      // Access the parsed CAIP address object
      // See: https://github.com/reown-com/appkit/blob/main/packages/common/src/utils/ParseUtil.ts#L3-L7
      // ...
    },
    onError(error) {
      // ...
    }
  })

...

// Connect to WalletConnect
<Button onClick={() => connect("walletConnect")} />
```

#### Options for the connect parameter

AppKit supports more than 40 of the top wallets globally ([see full list](https://github.com/reown-com/appkit/blob/main/packages/wallet-button/src/utils/ConstantsUtil.ts#L11-L55)), WalletConnect, social logins, and email authentication:

| Type          | Options                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| QR Code       | `walletConnect`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| Wallets       | `metamask`, `trust`, `coinbase`, `rainbow`, `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`, `tokenpocket`, `haha`, `ambire-wallet`, `bitpay`, `blade-wallet`, `brave`, `coinstats`, `kresus-superapp`, `plena-app`, `status`, `tomo-wallet`, `valora`, and `zengo-wallet` |
| Social logins | `google`, `github`, `apple`, `facebook`, `x`, `discord`, and `farcaster`                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| Email         | `email`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |

#### Use Cases

`useAppKitWallet` enables:

1. **Direct Wallet Integration**
   * Direct connection to specific wallets (e.g., MetaMask, Coinbase)
   * Streamlined connection flow without modal

2. **Social Authentication**
   * Social login options (Google, GitHub, etc.)
   * Email-based authentication

3. **Custom Wallet Selection**
   * Branded wallet selection interface
   * Custom styling and filtering options

4. **Network-Specific Access**
   * Chain-specific wallet options
   * Conditional wallet availability

5. **Enhanced UX**
   * Loading states and error handling
   * Custom notifications
   * Responsive connection states

6. **Multichain Support**
   * Connect to specific blockchain namespaces
   * Target wallets for specific chains (EVM, Solana, Bitcoin)

#### Multichain Examples

```tsx theme={null}
// Connect to Ethereum/EVM chains
const { connect: connectEVM } = useAppKitWallet({
  namespace: 'eip155',
  onSuccess: (address) => console.log('Connected to EVM:', address)
})

// Connect to Solana
const { connect: connectSolana } = useAppKitWallet({
  namespace: 'solana',
  onSuccess: (address) => console.log('Connected to Solana:', address)
})

// Connect to Bitcoin
const { connect: connectBitcoin } = useAppKitWallet({
  namespace: 'bip122',
  onSuccess: (address) => console.log('Connected to Bitcoin:', address)
})

// Usage
<Button onClick={() => connectEVM("metamask")}>Connect MetaMask (EVM)</Button>
<Button onClick={() => connectSolana("phantom")}>Connect Phantom (Solana)</Button>
<Button onClick={() => connectBitcoin("leather")}>Connect Leather (Bitcoin)</Button>
```

#### Parameters

* `namespace` (optional): The blockchain namespace to target. Supported values:
  * `'eip155'` - Ethereum and EVM-compatible chains
  * `'solana'` - Solana blockchain
  * `'bip122'` - Bitcoin blockchain
  * If not specified, uses the default namespace from your AppKit configuration

## useAppKitNetwork

The network management hook that provides access to chain information and network switching capabilities. Use this hook when you need to display the current network, switch between networks, or validate network compatibility.

```ts theme={null}
import { useAppKitNetwork } from "@reown/appkit/react";

export default Component(){
  const { caipNetwork, caipNetworkId, chainId, switchNetwork } = useAppKitNetwork()
}
```

### Use Cases

* Displaying the current network/chain in your UI
* Switching networks when a user selects a different chain
* Validating if a user is on the correct network for your dApp
* Handling network-specific features or contracts

<Note>
  Related hooks: [useAppKitBalance](#useappkitbalance), [useWalletInfo](#usewalletinfo)
</Note>

### Returns

* `caipNetwork`: The current network object
* `caipNetworkId`: The current network id in CAIP format
* `chainId`: The current chain id
* `switchNetwork`: Function to switch the network. Accepts a `caipNetwork` object as argument.

<Note>
  See how to import or use custom networks
  [here](/appkit/next/core/custom-networks).
</Note>

## useAppKitBalance

The balance management hook that provides functions to fetch the native token balance of the connected wallet. Use this hook when you need to display the user's balance, check if they have sufficient funds for a transaction, or track balance changes.

```ts theme={null}
import { useAppKitBalance } from "@reown/appkit/react";

function BalanceDisplay() {
  const { fetchBalance } = useAppKitBalance();
  const [balance, setBalance] = useState();
  const { isConnected } = useAppKitAccount();
  
  useEffect(() => {
    if (isConnected) {
      fetchBalance().then(setBalance);
    }
  }, [isConnected, fetchBalance]);

  return (
    <div>
      {balance && (
        <p>Balance: {balance.data?.formatted} {balance.data?.symbol}</p>
      )}
    </div>
  );
}
```

### Use Cases

* Displaying the user's wallet balance in your UI
* Checking if a user has sufficient funds before initiating a transaction
* Monitoring balance changes after transactions
* Implementing balance-based features or UIs

<Note>
  Related hooks: [useAppKitAccount](#useappkitaccount), [useAppKitNetwork](#useappkitnetwork)
</Note>

### Returns

* `fetchBalance`: Async function that returns the current balance of the connected wallet
  ```ts theme={null}
  type BalanceResult = {
    data?: {
      formatted: string;
      symbol: string;
    };
    error: string | null;
    isSuccess: boolean;
    isError: boolean;
  }
  ```

## useAppKitState

The state management hook that provides real-time access to the modal's current state. Use this hook when you need to react to modal state changes or synchronize your UI with the modal's status.

```ts theme={null}
import { useAppKitState } from "@reown/appkit/react";

const { 
  initialized, 
  loading, 
  open, 
  selectedNetworkId, 
  activeChain 
} = useAppKitState();
```

### Use Cases

* Syncing your UI with the modal's open/closed state
* Tracking which network the user has selected
* Creating custom UI elements that respond to modal state changes
* Implementing custom loading states based on modal state
* Checking if AppKit has been fully initialized before rendering components
* Displaying chain-specific UI based on the active blockchain namespace

### Returns

* `initialized`: Boolean that indicates if AppKit has been initialized. This sets to true when all controllers, adapters and internal state is ready
* `loading`: Boolean that indicates if AppKit is loading
* `open`: Boolean that indicates if the modal is open
* `selectedNetworkId`: The current chain id selected by the user in CAIP-2 format
* `activeChain`: The active chain namespace (e.g., 'eip155', 'solana', 'bip122')

### Example Usage

```tsx theme={null}
import { useAppKitState } from "@reown/appkit/react";

function AppStatus() {
  const { initialized, loading, open, selectedNetworkId, activeChain } = useAppKitState();

  if (!initialized) {
    return <div>Initializing AppKit...</div>;
  }

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <p>Modal is {open ? 'open' : 'closed'}</p>
      <p>Selected Network: {selectedNetworkId}</p>
      <p>Active Chain: {activeChain}</p>
    </div>
  );
}
```

## useAppKitTheme

The theming hook that controls the visual appearance of the modal. Use this hook when you need to customize the modal's colors, implement dark/light mode, or match the modal's appearance with your application's theme.

```ts theme={null}
import { useAppKitTheme } from "@reown/appkit/react";
const { themeMode, themeVariables, setThemeMode, setThemeVariables } =
  useAppKitTheme();

setThemeMode("dark");

setThemeVariables({
  "--apkt-color-mix": "#00BB7F",
  "--apkt-color-mix-strength": 40,
});
```

### Use Cases

* Implementing dark/light mode in your dApp
* Customizing the modal's appearance to match your brand
* Creating theme-specific UI elements
* Syncing the modal's theme with your app's theme

## useAppKitEvents

Subscribes to modal, wallet, and transaction events emitted by AppKit. Useful for analytics, telemetry, custom notifications, or reacting to specific user actions.

```ts theme={null}
import { useAppKitEvents } from "@reown/appkit/react";

const events = useAppKitEvents();
```

The hook returns the latest event object. Each time a new event is emitted, the component re-renders with the new value:

```ts theme={null}
{
  timestamp: number
  data: {
    type: 'track' | 'error'
    event: string        // the event name
    properties?: object  // event-specific payload
  }
}
```

### Use Cases

* Tracking user interactions with the modal
* Implementing analytics for wallet connections
* Creating custom notifications for connection events
* Handling specific wallet events in your application

<Card title="Full events reference" icon="list" href="/appkit/features/events">
  See every available event, its trigger condition, and the properties payload.
</Card>

## useDisconnect

The session management hook that handles wallet disconnection. Use this hook when implementing logout functionality or when you need to clean up resources after a user disconnects their wallet.

```ts theme={null}
import { useDisconnect } from "@reown/appkit/react";

const { disconnect } = useDisconnect();

// Disconnect from all namespaces
await disconnect();

// Disconnect from specific namespace
await disconnect({ namespace: 'eip155' }); // Disconnect from Ethereum
await disconnect({ namespace: 'solana' }); // Disconnect from Solana  
await disconnect({ namespace: 'bip122' }); // Disconnect from Bitcoin
```

### Parameters

* `namespace` (optional): The specific chain namespace to disconnect from. If not provided, disconnects from all connected namespaces.

### Use Cases

* Implementing a "Disconnect Wallet" button
* Handling logout flows in your application
* Cleaning up resources when a user disconnects
* Resetting application state after disconnection
* Disconnecting from specific chains in multi-chain applications

## useWalletInfo

Hook for accessing wallet information.

```tsx theme={null}
import { useWalletInfo } from '@reown/appkit/react'


function WalletDisplay() {
  const { walletInfo } = useWalletInfo();
  
  return (
    <div className="wallet-info">
      {walletInfo?.name && (
        <>
          <img src={walletInfo.icon} alt={walletInfo.name} />
          <span>{walletInfo.name}</span>
        </>
      )}
    </div>
  );
}
```

### Use Cases

* Displaying wallet-specific information in your UI
* Implementing wallet-specific features
* Showing wallet icons or branding
* Handling wallet-specific behaviors

## useAppKitProvider

Hook that returns the `walletProvider` and the `WalletProviderType` for interacting with the connected wallet across different blockchain adapters.

```ts theme={null}
import { useAppKitProvider } from "@reown/appkit/react";
import type { Provider } from "@reown/appkit/react";

const { walletProvider } = useAppKitProvider<Provider>("eip155");
```

### Use Cases

* Direct wallet interactions (signing messages, sending transactions)
* Access to wallet-specific methods and properties
* Integration with blockchain libraries (Ethers, Wagmi, Solana Web3.js)

### Examples

<Tabs>
  <Tab title="EVM (eip155)">
    ```tsx theme={null}
    import { useAppKitProvider } from "@reown/appkit/react";
    import type { Provider } from "@reown/appkit/react";

    const { walletProvider } = useAppKitProvider<Provider>("eip155");
    ```
  </Tab>

  <Tab title="Solana">
    ```tsx theme={null}
    import { useAppKitProvider } from "@reown/appkit/react";
    import type { Provider } from "@reown/appkit-adapter-solana/react";

    const { walletProvider } = useAppKitProvider<Provider>("solana");
    ```
  </Tab>

  <Tab title="Bitcoin (bip122)">
    ```tsx theme={null}
    import { useAppKitProvider } from "@reown/appkit/react";
    import type { BitcoinConnector } from "@reown/appkit-adapter-bitcoin";

    const { walletProvider } = useAppKitProvider<BitcoinConnector>("bip122");
    ```
  </Tab>
</Tabs>

### Returns

* `walletProvider`: The wallet provider instance for the specified chain namespace
* `walletProviderType`: The type of wallet provider currently connected

## useAppKitConnections

Hook that manages multiple wallet connections and provides access to all connected wallets. Use this hook when building applications that support multiple simultaneous wallet connections.

```ts theme={null}
import { useAppKitConnections } from "@reown/appkit/next";

const { connections, disconnect } = useAppKitConnections();
```

### Use Cases

* Managing multiple wallet connections simultaneously
* Building multi-wallet dashboards or portfolio views
* Implementing wallet comparison features
* Creating advanced wallet management interfaces

### Returns

* `connections`: Array of all connected wallet connections
* `disconnect`: Function to disconnect a specific wallet connection

<Note>
  Related hooks: [useAppKitConnection](#useappkitconnection), [useAppKitAccount](#useappkitaccount)
</Note>

## useAppKitConnection

Hook that manages the active wallet connection and provides connection switching capabilities. Use this hook when you need to work with the currently active connection or switch between multiple connections.

```ts theme={null}
import { useAppKitConnection } from "@reown/appkit/next";

const { connection, switchConnection } = useAppKitConnection();
```

### Use Cases

* Switching between multiple connected wallets
* Accessing the currently active wallet connection
* Building connection management interfaces
* Implementing wallet-specific features based on the active connection

### Returns

* `connection`: The currently active wallet connection
* `switchConnection`: Function to switch to a different connected wallet

<Note>
  Related hooks: [useAppKitConnections](#useappkitconnections), [useAppKitAccount](#useappkitaccount)
</Note>

## usePay

Hook that manages payment modal interactions and handles crypto payment flows. Use this hook when implementing payment features with exchange integrations.

```ts theme={null}
import { usePay } from "@reown/appkit-pay/react";

const { pay, isLoading, error } = usePay({
  onSuccess: (result) => console.log('Payment successful:', result),
  onError: (error) => console.error('Payment failed:', error)
});
```

### Use Cases

* Implementing crypto payment flows in your application
* Handling payment success and error states
* Integrating with centralized exchanges for payments
* Building custom payment interfaces

### Parameters

* `onSuccess`: Optional callback function called when payment succeeds
* `onError`: Optional callback function called when payment fails

### Returns

* `pay`: Function to initiate a payment with specified parameters
* `isLoading`: Boolean indicating if a payment is in progress
* `error`: Error object if payment fails

<Note>
  Related hooks: [useAvailableExchanges](#useavailableexchanges), [usePayUrlActions](#usepayurlactions)
</Note>

## useAvailableExchanges

Hook that fetches and manages the state for available exchanges. Use this hook when you need to display available payment options or filter exchanges based on criteria.

```ts theme={null}
import { useAvailableExchanges } from "@reown/appkit-pay/react";

const { data, isLoading, error, fetch } = useAvailableExchanges({
  isFetchOnInit: true,
  asset: 'ETH',
  amount: 100,
  network: 'eip155:1'
});
```

### Use Cases

* Displaying available exchanges to users
* Filtering exchanges based on asset or network
* Building custom exchange selection interfaces
* Implementing exchange comparison features

### Parameters

* `isFetchOnInit`: Whether to fetch exchanges on hook initialization
* `asset`: Filter exchanges by specific asset
* `amount`: Filter exchanges by minimum amount
* `network`: Filter exchanges by network support

### Returns

* `data`: Array of available exchanges
* `isLoading`: Boolean indicating if exchanges are being fetched
* `error`: Error object if fetching fails
* `fetch`: Function to manually refetch exchanges

<Note>
  Related hooks: [usePay](#usepay), [usePayUrlActions](#usepayurlactions)
</Note>

## usePayUrlActions

Hook that provides functions to interact with specific exchange URLs, returning the sessionId needed for status tracking. Use this hook when implementing custom exchange flows.

```ts theme={null}
import { usePayUrlActions } from "@reown/appkit-pay/react";

const { getUrl, openUrl } = usePayUrlActions();

// Get exchange URL
const { url, sessionId } = await getUrl('binance', {
  asset: 'ETH',
  amount: 0.1,
  recipient: '0x...'
});

// Open exchange URL in new tab
const { url, sessionId } = await openUrl('coinbase', {
  asset: 'USDC',
  amount: 100,
  recipient: '0x...'
}, true);
```

### Use Cases

* Building custom exchange integration flows
* Implementing exchange URL generation
* Creating custom payment interfaces
* Tracking exchange sessions for status monitoring

### Returns

* `getUrl`: Function that returns exchange URL and session ID
* `openUrl`: Function that opens exchange URL and returns session data

<Note>
  Related hooks: [useExchangeBuyStatus](#useexchangebuystatus), [useAvailableExchanges](#useavailableexchanges)
</Note>

## useExchangeBuyStatus

Hook that fetches and polls for the status of a headless payment transaction using exchangeId and sessionId. Use this hook to track payment progress and handle completion.

```ts theme={null}
import { useExchangeBuyStatus } from "@reown/appkit-pay/react";

const { data, isLoading, error, refetch } = useExchangeBuyStatus({
  exchangeId: 'binance',
  sessionId: 'session-123',
  pollingInterval: 5000,
  isEnabled: true,
  onSuccess: (status) => console.log('Payment completed:', status),
  onError: (error) => console.error('Payment failed:', error)
});
```

### Use Cases

* Tracking payment transaction status
* Implementing payment progress indicators
* Handling payment completion and failure states
* Building real-time payment monitoring

### Parameters

* `exchangeId`: The exchange identifier
* `sessionId`: The session ID from payment URL actions
* `pollingInterval`: How often to check status (in milliseconds)
* `isEnabled`: Whether to enable status polling
* `onSuccess`: Callback for successful payment completion
* `onError`: Callback for payment errors

### Returns

* `data`: Current payment status data
* `isLoading`: Boolean indicating if status is being fetched
* `error`: Error object if status fetching fails
* `refetch`: Function to manually refetch status

<Note>
  Related hooks: [usePayUrlActions](#usepayurlactions), [usePay](#usepay)
</Note>

## useAppKitUpdateEmail

Hook that updates user email address with success and error handling. Use this hook when implementing email update functionality for user accounts.

```ts theme={null}
import { useAppKitUpdateEmail } from "@reown/appkit/next";

const { data, error, isPending, isError, isSuccess, updateEmail } = useAppKitUpdateEmail({
  onSuccess: (data) => console.log('Email updated:', data.email),
  onError: (error) => console.error('Update failed:', error)
});
```

### Use Cases

* Implementing email update functionality
* Building user profile management interfaces
* Handling email verification flows
* Creating account settings pages

### Parameters

* `onSuccess`: Optional callback function called when email update succeeds
* `onError`: Optional callback function called when email update fails

### Returns

* `data`: Updated email data object
* `error`: Error object if update fails
* `isPending`: Boolean indicating if update is in progress
* `isError`: Boolean indicating if there was an error
* `isSuccess`: Boolean indicating if update was successful
* `updateEmail`: Function to trigger email update

<Note>
  Related hooks: [useAppKitAccount](#useappkitaccount), [useAppKitWallet](#useappkitwallet)
</Note>

## useAppKitSIWX

Hook that provides access to Sign In With X (SIWX) configuration and state. Use this hook when implementing custom authentication flows with various blockchain protocols.

```ts theme={null}
import { useAppKitSIWX } from "@reown/appkit/next";

const siwxConfig = useAppKitSIWX();

if (siwxConfig) {
  console.log('SIWX enabled with config:', siwxConfig);
}
```

### Use Cases

* Implementing custom Sign In With X flows
* Accessing SIWX configuration for custom authentication
* Building protocol-specific authentication interfaces
* Handling multi-protocol sign-in scenarios

### Returns

* `siwxConfig`: The current SIWX configuration object, or undefined if not configured

<Note>
  Related hooks: [useAppKitAccount](#useappkitaccount), [useAppKitUpdateEmail](#useappkitupdateemail)
</Note>

## useAppKitConnection (Solana)

Solana-specific hook that provides access to the Solana connection instance for blockchain interactions. Use this hook when building Solana-specific features.

```ts theme={null}
import { useAppKitConnection } from "@reown/appkit-adapter-solana/react";

const { connection } = useAppKitConnection();

if (connection) {
  // Use connection for Solana blockchain interactions
  const balance = await connection.getBalance(publicKey);
}
```

### Use Cases

* Accessing Solana connection for blockchain interactions
* Building Solana-specific transaction flows
* Implementing Solana program interactions
* Creating Solana wallet features

### Returns

* `connection`: The Solana connection instance, or undefined if not connected

<Note>
  This is the Solana-specific version of useAppKitConnection. For general connection management, see [useAppKitConnection](#useappkitconnection).
</Note>

## Ethereum/Solana Library

<Tabs>
  <Tab title="Wagmi">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/react";

    function Components() {
      const { address, caipAddress, isConnected } = useAppKitAccount();

      //...
    }
    ```

    ### useSignMessage

    Hook for signing messages with connected account.

    ```tsx theme={null} theme={null} theme={null}
    import { useSignMessage } from "wagmi";

    function App() {
      const { signMessage } = useSignMessage();

      return (
        <button onClick={() => signMessage({ message: "hello world" })}>
          Sign message
        </button>
      );
    }
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitProvider } from "@reown/appkit/react";
    import type { Provider } from "@reown/appkit/react";

    function Components() {
      const { walletProvider } = useAppKitProvider<Provider>("eip155");

      async function onSignMessage() {
        console.log(walletProvider);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    <Card title="Learn More" href="https://wagmi.sh/react/hooks/useReadContract" />
  </Tab>

  <Tab title="Ethers">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/react";

    function Components() {
      const { address, caipAddress, isConnected } = useAppKitAccount();

      //...
    }
    ```

    ### switchNetwork

    ```tsx theme={null} theme={null} theme={null}
    import { createAppKit } from "@reown/appkit/react";
    import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";

    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata: metadata,
      features: {
        analytics: true,
      },
    });

    modal.switchNetwork(polygon);
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import { BrowserProvider } from "ethers";
    import { useAppKitProvider } from "@reown/appkit/react";

    function Components() {
      const { walletProvider } = useAppKitProvider("eip155");

      async function onSignMessage() {
        const provider = new BrowserProvider(walletProvider);
        const signer = await provider.getSigner();
        const signature = await signer?.signMessage("Hello AppKit Ethers");
        console.log(signature);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    ### getError

    ```ts theme={null} theme={null} theme={null}
    function Components() {
      const error = modal.getError();
      //...
    }
    ```

    <Card title="Learn More About Ethers" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>

  <Tab title="Ethers v5">
    ### switchNetwork

    ```tsx theme={null} theme={null} theme={null}
    import { createAppKit } from "@reown/appkit/react";
    import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";

    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata: metadata,
      features: {
        analytics: true,
      },
    });

    modal.switchNetwork(polygon);
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import {
      useAppKitAccount,
      useAppKitProvider,
      useAppKitNetwork,
    } from "@reown/appkit/react";
    import { ethers } from "ethers";
    import { useAppKitProvider } from "@reown/appkit/react";

    function Components() {
      const { walletProvider } = useAppKitProvider("eip155");
      const { address } = useAppKitAccount();
      const { chainId } = useAppKitNetwork();

      async function onSignMessage() {
        const provider = new ethers.providers.Web3Provider(walletProvider, chainId);
        const signer = provider.getSigner(address);
        const signature = await signer?.signMessage("Hello AppKit Ethers");
        console.log(signature);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    ### getError

    ```ts theme={null} theme={null} theme={null}
    function Components() {
      const error = modal.getError();
      //...
    }
    ```

    <Card title="Learn More About Ethers" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>

  <Tab title="Solana">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/react";

    function Components() {
      const { address, caipAddress, isConnected } = useAppKitAccount();

      //...
    }
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount, useAppKitProvider } from "@reown/appkit/react";
    import type { Provider } from "@reown/appkit-adapter-solana";

    function SignMessage() {
      // 0. Get account and provider
      const { address } = useAppKitAccount();
      const { walletProvider } = useAppKitProvider<Provider>("solana");

      // 1. Create a function to sign a message
      async function onSignMessage() {
        try {
          if (!walletProvider || !address) {
            throw Error("user is disconnected");
          }

          // 2. Encode message and sign it
          const encodedMessage = new TextEncoder().encode("Hello from AppKit");
          const signature = await walletProvider.signMessage(encodedMessage);

          console.log(signature);
        } catch (err) {
          // Handle Error Here
        }
      }

      // 3. Create a button to trigger the function
      return <button onClick={onSignMessage}>Sign Message</button>;
    }
    ```

    ## useAppKitConnection

    Hook that returns the connection object. More info about [Connection Class](https://solana-labs.github.io/solana-web3.js/classes/Connection.html)

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitConnection } from '@reown/appkit-adapter-solana/react'

    ...

    const { connection } = useAppKitConnection()
    ```
  </Tab>

  <Tab title="Bitcoin">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/react";

    const { address, status, isConnected } = useAppKitAccount();
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitProvider } from "@reown/appkit/react";
    import type { BitcoinConnector } from "@reown/appkit-adapter-bitcoin";

    function Components() {
      const { walletProvider } = useAppKitProvider<BitcoinConnector>("bip122");

      async function onSignMessage() {
        if (!walletProvider) {
          throw Error("user is disconnected");
        }

        const signature = await walletProvider.signMessage("Hello from AppKit");
        console.log(signature);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    <Card title="Learn More About Bitcoin" href="https://developer.bitcoin.org/" />
  </Tab>
</Tabs>


# Installation
Source: https://docs.reown.com/appkit/next/core/installation



AppKit provides seamless integration with multiple blockchain ecosystems. It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum,
[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON, TRON and other networks.

<Note>
  These steps are specific to [Next.js](https://nextjs.org/) app router. For other React frameworks
  read the [React documentation](../../react/core/installation).
</Note>

## Installation

Try installing AppKit Skills to get AI-assisted guidance. Your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.

## Custom Installation

<Tabs>
  <Tab title="Wagmi">
    <Warning>
      AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.
    </Warning>

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @tanstack/react-query
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @tanstack/react-query
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @tanstack/react-query
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @tanstack/react-query
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers v5">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Solana">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-solana
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Bitcoin">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
      ```
    </CodeGroup>
  </Tab>

  <Tab title="TON">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ton
      ```
    </CodeGroup>
  </Tab>

  <Tab title="TRON">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-tron
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Others networks (AppKit Core)">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Cloud Configuration

Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

## Implementation

<Tabs>
  <Tab title="Wagmi">
    <Card title="wagmi Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/nextjs/next-wagmi-app-router">
      Check the Next wagmi example
    </Card>

    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](../../../../cloud/blockchain-api) as a [transport](https://wagmi.sh/core/api/createConfig#transports)

    ### Wagmi config

    Create a new file for your Wagmi configuration, since we are going to be calling this function on the client and the server it cannot live inside a file with the 'use client' directive.

    For this example we will create a file called `config/index.tsx` outside our app directory and set up the following configuration

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { cookieStorage, createStorage, http } from '@wagmi/core'
    import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    import { mainnet, arbitrum } from '@reown/appkit/networks'

    // Get projectId from https://dashboard.reown.com
    export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID

    if (!projectId) {
      throw new Error('Project ID is not defined')
    }

    export const networks = [mainnet, arbitrum]

    //Set up the Wagmi Adapter (Config)
    export const wagmiAdapter = new WagmiAdapter({
      storage: createStorage({
        storage: cookieStorage
      }),
      ssr: true,
      projectId,
      networks
    })

    export const config = wagmiAdapter.wagmiConfig
    ```

    ## Importing networks

    Reown AppKit use [Viem](https://viem.sh/) 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.

    ```js {2} theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { createAppKit } from '@reown/appkit'
    import { mainnet, arbitrum, base, scroll, polygon } from '@reown/appkit/networks'
    ```

    <Note>
      Looking to add a custom network? Check out the [custom
      networks](/appkit/next/core/custom-networks) section.
    </Note>

    ## SSR and Hydration

    * Using cookies is completely optional and by default Wagmi will use `localStorage` instead if the `storage` param is not defined.
    * The `ssr` flag will delay the hydration of Wagmi's store to avoid hydration mismatch errors.
    * AppKit doesn't fully support the `ssr` flag.

    ### Context Provider

    Let's create now a context provider that will wrap our application and initialized AppKit (`createAppKit` needs to be called inside a Next Client Component file).

    In this example we will create a file called `context/index.tsx` outside our app directory and set up the following configuration

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    'use client'

    import { wagmiAdapter, projectId } from '@/config'
    import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
    import { createAppKit } from '@reown/appkit/react'
    import { mainnet, arbitrum } from '@reown/appkit/networks'
    import React, { type ReactNode } from 'react'
    import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi'

    // Set up queryClient
    const queryClient = new QueryClient()

    if (!projectId) {
      throw new Error('Project ID is not defined')
    }

    // Set up metadata
    const metadata = {
      name: 'appkit-example',
      description: 'AppKit Example',
      url: 'https://appkitexampleapp.com', // origin must match your domain & subdomain
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // Create the modal
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      defaultNetwork: mainnet,
      metadata: metadata,
      features: {
        analytics: true // Optional - defaults to your Cloud configuration
      }
    })

    function ContextProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) {
      const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies)

      return (
        <WagmiProvider config={wagmiAdapter.wagmiConfig as Config} initialState={initialState}>
          <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </WagmiProvider>
      )
    }

    export default ContextProvider
    ```

    ### Layout

    Next, in our `app/layout.tsx` file, we will import our `ContextProvider` component and call [the Wagmi's function `cookieToInitialState`.](https://wagmi.sh/react/guides/ssr#_2-hydrate-the-cookie)

    The `initialState` returned by `cookieToInitialState`, contains the optimistic values that will populate the Wagmi's store both on the server and client.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import type { Metadata } from 'next'
    import { Inter } from 'next/font/google'
    import './globals.css'

    const inter = Inter({ subsets: ['latin'] })

    import { headers } from 'next/headers' // added
    import ContextProvider from '@/context'

    export const metadata: Metadata = {
      title: 'AppKit Example App',
      description: 'Powered by Reown'
    }

    export default async function RootLayout({
      children
    }: Readonly<{
      children: React.ReactNode
    }>) {
      const headersObj = await headers()
      const cookies = headersObj.get('cookie')

      return (
        <html lang="en">
          <body className={inter.className}>
            <ContextProvider cookies={cookies}>{children}</ContextProvider>
          </body>
        </html>
      )
    }
    ```
  </Tab>

  <Tab title="Ethers v5">
    In this example we will create a new file called `context/appkit.tsx` outside our app directory and set up the following configuration

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    "use client";

    import { createAppKit } from "@reown/appkit/react";
    import { Ethers5Adapter } from "@reown/appkit-adapter-ethers5";
    import { mainnet, arbitrum } from "@reown/appkit/networks";

    // 1. Get projectId at https://dashboard.reown.com
    const projectId = "YOUR_PROJECT_ID";

    // 2. Create a metadata object
    const metadata = {
      name: "My Website",
      description: "My Website description",
      url: "https://mywebsite.com", // origin must match your domain & subdomain
      icons: ["https://avatars.mywebsite.com/"],
    };

    // 3. Create the AppKit instance
    createAppKit({
      adapters: [new Ethers5Adapter()],
      metadata: metadata,
      networks: [mainnet, arbitrum],
      projectId,
      features: {
        analytics: true, // Optional - defaults to your Cloud configuration
      },
    });

    export function AppKit() {
      return (
        <YourApp /> //make sure you have configured the <appkit-button> inside
      );
    }
    ```

    Next, in your `app/layout.tsx` or `app/layout.jsx` file, import the custom AppKit component.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import "./globals.css";

    import { AppKit } from "../context/appkit";

    export const metadata = {
      title: "AppKit",
      description: "AppKit Example",
    };

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <AppKit>{children}</AppKit>
          </body>
        </html>
      );
    }
    ```

    <Warning>
      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.
    </Warning>
  </Tab>

  <Tab title="Ethers">
    <Card title="ethers Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/nextjs/next-ethers-app-router">
      Check the Next ethers example
    </Card>

    In this example we will create a new file called `context/appkit.tsx` outside our app directory and set up the following configuration

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    "use client";

    import { createAppKit } from "@reown/appkit/react";
    import { EthersAdapter } from "@reown/appkit-adapter-ethers";
    import { mainnet, arbitrum } from "@reown/appkit/networks";

    // 1. Get projectId at https://dashboard.reown.com
    const projectId = "YOUR_PROJECT_ID";

    // 2. Create a metadata object
    const metadata = {
      name: "My Website",
      description: "My Website description",
      url: "https://mywebsite.com", // origin must match your domain & subdomain
      icons: ["https://avatars.mywebsite.com/"],
    };

    // 3. Create the AppKit instance
    createAppKit({
      adapters: [new EthersAdapter()],
      metadata,
      networks: [mainnet, arbitrum],
      projectId,
      features: {
        analytics: true, // Optional - defaults to your Cloud configuration
      },
    });

    export function AppKit() {
      return (
        <YourApp /> //make sure you have configured the <appkit-button> inside
      );
    }
    ```

    Next, in your `app/layout.tsx` or `app/layout.jsx` file, import the custom AppKit component.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import "./globals.css";

    import { AppKit } from "../context/appkit";

    export const metadata = {
      title: "AppKit",
      description: "AppKit Example",
    };

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <AppKit>{children}</AppKit>
          </body>
        </html>
      );
    }
    ```

    <Warning>
      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.
    </Warning>
  </Tab>

  <Tab title="Solana">
    <Warning>
      MetaMask does not currently support WalletConnect connections on Solana. The MetaMask team is working on adding this feature. In the meantime, we recommend using other wallets that support Solana. You can find the complete list of supported wallets on [WalletGuide](https://walletguide.walletconnect.network/).
    </Warning>

    <Card title="Solana Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/nextjs/next-solana-app-router">
      Check the Next Solana example
    </Card>

    AppKit Solana provides a set of React components and hooks to easily connect Solana wallets with your application.

    On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // App.tsx
    import { createAppKit } from "@reown/appkit/react";
    import { SolanaAdapter } from "@reown/appkit-adapter-solana/react";
    import { solana, solanaTestnet, solanaDevnet } from "@reown/appkit/networks";

    // 0. Set up Solana Adapter
    const solanaWeb3JsAdapter = new SolanaAdapter();

    // 1. Get projectId from https://dashboard.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
      },
    });

    export default function App() {
      return <YourApp />;
    }
    ```
  </Tab>

  <Tab title="Bitcoin">
    <Card title="Bitcoin Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/nextjs/next-bitcoin-app-router">
      Check the Next Bitcoin example
    </Card>

    AppKit Bitcoin provides a set of React components and hooks to easily connect Bitcoin wallets with your application.

    On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // App.tsx
    import { createAppKit } from '@reown/appkit/react'
    import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
    import { bitcoin, bitcoinTestnet, bitcoinSignet } from '@reown/appkit/networks'

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

    // 2. Set the networks
    const networks = [bitcoin, bitcoinTestnet, bitcoinSignet]

    // 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
    createAppKit({
      adapters: [bitcoinAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true // Optional - defaults to your Cloud configuration,
        email: false,
        socials: []
      }
    })

    export default function App() {
      return <YourApp />
    }
    ```

    ## Bitcoin Provider Interface

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    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

    <Tabs>
      <Tab title="SignMessageParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          export type SignMessageParams = {
            /**
             * The message to be signed
             */
            message: string
            /**
             * The address to sign the message with
             */
            address: string
          }
        ```
      </Tab>

      <Tab title="SendTransferParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          export type SendTransferParams = {
            /**
             * The amount to be sent in satoshis
             */
            amount: string
            /**
             * The address to send the transfer to
             */
            recipient: string
          }
        ```
      </Tab>

      <Tab title="SignPSBTParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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

        }

        ```
      </Tab>
    </Tabs>

    ### Responses

    <Tabs>
      <Tab title="AccountAddress">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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'
          }
        ```
      </Tab>

      <Tab title="SignPSBTResponse">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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
          }
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="TON">
    <Card title="TON Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/nextjs/next-ton-app-router">
      Check the Next TON example
    </Card>

    AppKit TON provides a set of React components and hooks to easily connect TON wallets with your application.

    On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // App.tsx
    import { createAppKit } from '@reown/appkit/react'
    import { TonAdapter } from '@reown/appkit-adapter-ton'
    import { ton, tonTestnet } from '@reown/appkit/networks'

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

    // 2. Set the networks
    const networks = [ton, tonTestnet]

    // 3. Set up TON Adapter
    const tonAdapter = new TonAdapter({
      projectId
    })

    // 4. Create a metadata object - optional
    const metadata = {
      name: 'AppKit',
      description: 'AppKit TON Example',
      url: 'https://example.com', // origin must match your domain & subdomain
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // 5. Create modal
    createAppKit({
      adapters: [tonAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true // Optional - defaults to your Cloud configuration,
        email: false,
        socials: []
      }
    })

    export default function App() {
      return <YourApp />
    }
    ```
  </Tab>

  <Tab title="TRON">
    <Card title="TRON Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/nextjs/next-tron-app-router">
      Check the Next TRON example
    </Card>

    AppKit TRON provides a set of React components and hooks to easily connect TRON wallets with your application.

    On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // App.tsx
    import { createAppKit } from '@reown/appkit/react'
    import { TronAdapter } from '@reown/appkit-adapter-tron'
    import { tronMainnet } from '@reown/appkit/networks'

    // Import wallet adapters you want to support
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'

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

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

    // 3. Set up TRON Adapter with wallet adapters
    const tronAdapter = new TronAdapter({
      walletAdapters: [
        new TronLinkAdapter({
          openUrlWhenWalletNotFound: false,
          checkTimeout: 3000
        })
      ]
    })

    // 4. Create a metadata object - optional
    const metadata = {
      name: 'AppKit',
      description: 'AppKit TRON Example',
      url: 'https://example.com', // origin must match your domain & subdomain
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // 5. Create modal
    createAppKit({
      adapters: [tronAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true, // Optional - defaults to your Dashboard configuration
        email: false,
        socials: []
      }
    })

    export default function App() {
      return <YourApp />
    }
    ```

    ## Install Wallet Adapters

    TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size.

    <Tabs>
      <Tab title="TronLink">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-tronlink
          ```
        </CodeGroup>
      </Tab>

      <Tab title="MetaMask">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-metamask-tron
          ```
        </CodeGroup>
      </Tab>

      <Tab title="Trust Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-trust
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-trust
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-trust
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-trust
          ```
        </CodeGroup>
      </Tab>

      <Tab title="OKX Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-okxwallet
          ```
        </CodeGroup>
      </Tab>

      <Tab title="BitKeep">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-bitkeep
          ```
        </CodeGroup>
      </Tab>

      <Tab title="Binance Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-binance
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-binance
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-binance
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-binance
          ```
        </CodeGroup>
      </Tab>
    </Tabs>

    <Note>
      For a complete list of available TRON wallet adapters, visit the [official wallet adapter documentation](https://walletadapter.org/docs/guide/wallet-reference.html).
    </Note>

    ### Using Multiple Wallet Adapters

    After installing your desired wallet adapters, import and add them to the `walletAdapters` array when creating the TRON adapter:

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'
    import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron'
    import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust'
    import { OkxWalletAdapter } from '@tronweb3/tronwallet-adapter-okxwallet'

    const tronAdapter = new TronAdapter({
      walletAdapters: [
        new TronLinkAdapter({
          openUrlWhenWalletNotFound: false,
          checkTimeout: 3000
        }),
        new MetaMaskAdapter(),
        new TrustAdapter(),
        new OkxWalletAdapter({
          openUrlWhenWalletNotFound: false
        })
      ]
    })
    ```
  </Tab>

  <Tab title="Others networks (AppKit Core)">
    For a quick integration of Appkit Core you can use the `UniversalConnector` class. Which simplifies the integration of Appkit Core by providing a single interface for all the blockchain protocols.

    You can configure the Universal Connector with the networks you want to support.
    For more information, please visit [RPC Reference](https://docs.reown.com/advanced/multichain/rpc-reference/cosmos-rpc) section from our docs.

    We recommend creating a config file to establish a singleton instance for the Universal Connector:

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import type { AppKitNetwork } from '@reown/appkit/networks'
    import type { CustomCaipNetwork } from '@reown/appkit-common'
    import { UniversalConnector } from '@reown/appkit-universal-connector'

    // Get projectId from https://dashboard.reown.com
    export const projectId = import.meta.env.VITE_PROJECT_ID || "b56e18d47c72ab683b10814fe9495694" // this is a public projectId only to use on localhost

    if (!projectId) {
      throw new Error('Project ID is not defined')
    }

    // you can configure your own network
    const suiMainnet: CustomCaipNetwork<'sui'> = {
      id: 784,
      chainNamespace: 'sui' as const,
      caipNetworkId: 'sui:mainnet',
      name: 'Sui',
      nativeCurrency: { name: 'SUI', symbol: 'SUI', decimals: 9 },
      rpcUrls: { default: { http: ['https://fullnode.mainnet.sui.io:443'] } }
    }


    export async function getUniversalConnector() {
      const universalConnector = await UniversalConnector.init({
        projectId,
        metadata: {
          name: 'Universal Connector',
          description: 'Universal Connector',
          url: 'https://appkit.reown.com',
          icons: ['https://appkit.reown.com/icon.png']
        },
        networks: [
          {
            methods: ['sui_signPersonalMessage'],
            chains: [suiMainnet as CustomCaipNetwork],
            events: [],
            namespace: 'sui'
          }
        ]
      })

      return universalConnector
    }
    ```

    In de App.tsx file you can add :

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { useState, useEffect } from 'react'
    import { getUniversalConnector } from './config' // previous config file
    import { UniversalConnector } from '@reown/appkit-universal-connector'

    export function App() {
      const [universalConnector, setUniversalConnector] = useState<UniversalConnector>()
      const [session, setSession] = useState<any>()

      
      // Initialize the Universal Connector on component mount
      useEffect(() => {
        getUniversalConnector().then(setUniversalConnector)
      }, [])

      // Set the session state in case it changes
      useEffect(() => {
        setSession(universalConnector?.provider.session)
      }, [universalConnector?.provider.session])
    ```
  </Tab>
</Tabs>

## Trigger the modal

<Tabs>
  <Tab title="AppKit">
    To open AppKit you can use our [**React components**](/appkit/react/core/components) or build your own button with AppKit [**hooks**](/appkit/react/core/hooks#useAppKit).

    <CodeGroup>
      ```tsx ConnectButton.tsx theme={null}
      import { AppKitButton } from '@reown/appkit/react'

      export default function ConnectButton() {
        return <AppKitButton />
      }
      ```

      ```tsx ConnectButtonWithHooks.tsx theme={null}
      import { useAppKit } from '@reown/appkit/react'

      export default function ConnectButton() {
        const { open } = useAppKit()

        return (
          <>
            <button onClick={() => open()}>Open Connect Modal</button>
            <button onClick={() => open({ view: 'Networks' })}>Open Network Modal</button>
          </>
        )
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="AppKit Core">
    To open AppKit Core you need to call the `connect` function from the Universal Connector.

    ```tsx theme={null}
    // get the session from the universal connector
    const handleConnect = async () => {
      if (!universalConnector) {
        return
      }

      const { session: providerSession } = await universalConnector.connect()
      setSession(providerSession)
    }

    // disconnect the universal connector
    const handleDisconnect = async () => {
      if (!universalConnector) {
        return
      }
      await universalConnector.disconnect()
      setSession(null)
    }

    ...

    return (
      <div>
        <button onClick={handleConnect}>Open AppKit Core</button>
        <button onClick={handleDisconnect}>Disconnect</button>
      </div>
    )
    ```
  </Tab>
</Tabs>

## Smart Contract Interaction

<Tabs>
  <Tab title="Wagmi">
    [Wagmi hooks](https://wagmi.sh/react/api/hooks/useReadContract) can help us interact with wallets and smart contracts:

    ```tsx theme={null}
    import { useReadContract } from 'wagmi'
    import { USDTAbi } from '../abi/USDTAbi'

    const USDTAddress = '0x...'

    function App() {
      const result = useReadContract({
        abi: USDTAbi,
        address: USDTAddress,
        functionName: 'totalSupply'
      })
    }
    ```

    Read more about Wagmi hooks for smart contract interaction [here](https://wagmi.sh/react/hooks/useReadContract).
  </Tab>

  <Tab title="Ethers">
    [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:

    ```tsx theme={null}
    import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/react'
    import { BrowserProvider, Contract, formatUnits } from 'ethers'

    const USDTAddress = '0x617f3112bf5397D0467D315cC709EF968D9ba546'

    // The ERC-20 Contract ABI, which is a common contract interface
    // for tokens (this is the Human-Readable ABI format)
    const USDTAbi = [
      'function name() view returns (string)',
      'function symbol() view returns (string)',
      'function balanceOf(address) view returns (uint)',
      'function transfer(address to, uint amount)',
      'event Transfer(address indexed from, address indexed to, uint amount)'
    ]

    function Components() {
      const { address, caipAddress, isConnected } = useAppKitAccount()
      const { walletProvider } = useAppKitProvider('eip155')

      async function getBalance() {
        if (!isConnected) throw Error('User disconnected')

        const ethersProvider = new BrowserProvider(walletProvider)
        const signer = await ethersProvider.getSigner()
        // The Contract object
        const USDTContract = new Contract(USDTAddress, USDTAbi, signer)
        const USDTBalance = await USDTContract.balanceOf(address)

        console.log(formatUnits(USDTBalance, 18))
      }

      return <button onClick={getBalance}>Get User Balance</button>
    }
    ```
  </Tab>

  <Tab title="Solana">
    [@Solana/web3.js](https://solana.com/docs/clients/javascript) 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](https://appkit-lab.reown.com/appkit/?name=solana).

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import {
      SystemProgram,
      PublicKey,
      Keypair,
      Transaction,
      TransactionInstruction,
      LAMPORTS_PER_SOL
    } from '@solana/web3.js'
    import { useAppKitAccount, useAppKitProvider } from '@reown/appkit/react'
    import { useAppKitConnection, type Provider } from '@reown/appkit-adapter-solana/react'

    function deserializeCounterAccount(data?: Buffer): { count: number } {
      if (data?.byteLength !== 8) {
        throw Error('Need exactly 8 bytes to deserialize counter')
      }

      return {
        count: Number(data[0])
      }
    }

    const { address } = useAppKitAccount()
    const { connection } = useAppKitConnection()
    const { walletProvider } = useAppKitProvider<Provider>('solana')

    async function onIncrementCounter() {
      const PROGRAM_ID = new PublicKey('Cb5aXEgXptKqHHWLifvXu5BeAuVLjojQ5ypq6CfQj1hy')

      const counterKeypair = Keypair.generate()
      const counter = counterKeypair.publicKey

      const balance = await connection.getBalance(walletProvider.publicKey)
      if (balance < LAMPORTS_PER_SOL / 100) {
        throw Error('Not enough SOL in wallet')
      }

      const COUNTER_ACCOUNT_SIZE = 8
      const allocIx: TransactionInstruction = SystemProgram.createAccount({
        fromPubkey: walletProvider.publicKey,
        newAccountPubkey: counter,
        lamports: await connection.getMinimumBalanceForRentExemption(COUNTER_ACCOUNT_SIZE),
        space: COUNTER_ACCOUNT_SIZE,
        programId: PROGRAM_ID
      })

      const incrementIx: TransactionInstruction = new TransactionInstruction({
        programId: PROGRAM_ID,
        keys: [
          {
            pubkey: counter,
            isSigner: false,
            isWritable: true
          }
        ],
        data: Buffer.from([0x0])
      })

      const tx = new Transaction().add(allocIx).add(incrementIx)

      tx.feePayer = walletProvider.publicKey
      tx.recentBlockhash = (await connection.getLatestBlockhash('confirmed')).blockhash

      await walletProvider.signAndSendTransaction(tx, [counterKeypair])

      const counterAccountInfo = await connection.getAccountInfo(counter, {
        commitment: 'confirmed'
      })

      if (!counterAccountInfo) {
        throw new Error('Expected counter account to have been created')
      }

      const counterAccount = deserializeCounterAccount(counterAccountInfo?.data)

      if (counterAccount.count !== 1) {
        throw new Error('Expected count to have been 1')
      }

      console.log(`[alloc+increment] count is: ${counterAccount.count}`);
    }
    ```
  </Tab>
</Tabs>

## Extra configuration

Next.js relies on [SSR](https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering). This means some specific steps are required to make AppKit work properly.

* Add the following code in the `next.config.js` file

```ts theme={null}
// Path: next.config.js
const nextConfig = {
  webpack: config => {
    config.externals.push('pino-pretty', 'lokijs', 'encoding')
    return config
  }
}
```

* [Learn more about SSR with Wagmi](https://wagmi.sh/react/guides/ssr)

## Video Tutorial

<div>
  <iframe title="YouTube video player" />
</div>

## Alternative Installation

If you are starting from scratch, you can use the following methods to set up your project with Reown AppKit.

<AccordionGroup>
  <Accordion title="AppKit Skills">
    AppKit Skills provide AI-powered assistance for building with Reown AppKit. Once installed, your AI coding assistant can help you set up, build, and debug your AppKit integration.

    To install AppKit Skills, run the following command in your terminal:

    ```bash theme={null}
    npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
    ```

    After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.
  </Accordion>

  <Accordion title="AppKit CLI">
    Reown offers a dedicated CLI to set up a minimal version of AppKit in the easiest and quickest way possible.

    To do this, please run the command below.

    ```bash theme={null}
    npx @reown/appkit-cli
    ```

    After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:

    1. **Project Name**: Enter the name for your project.
    2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
    3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).

    After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.

    To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.

    **Refer to [this section](#cloud-configuration) for more information.**
  </Accordion>
</AccordionGroup>


# Options
Source: https://docs.reown.com/appkit/next/core/options



The following options can be passed to the `createAppKit` function:

```ts theme={null}
createAppKit({ adapters, projectId, networks, ...options });
```

## networks

Array of networks that can be chosen from the `@reown/appkit/networks` library. This library retrieves the list of EVM networks from Viem and also includes the Solana networks.

```ts theme={null}
import { mainnet, solana } from "@reown/appkit/networks";

createAppKit({
  // ...
  networks: [mainnet, solana],
});
```

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

## metadata

Metadata for your AppKit. The `name`, `description`, `icons`, and `url` are used at certain places like the wallet connection, sign message, etc screens. If not provided, they will be fetched from the metadata of your website's document object.

```ts theme={null}
createAppKit({
  // ...
  metadata: {
    name: "My App",
    description: "My App Description",
    icons: ["https://myapp.com/icon.png"],
    url: "https://myapp.com",
  },
});
```

This information will primarily be used in modals when signing a transaction or message using [Embedded wallets (Smart Accounts)](/appkit/features/smart-accounts), or when verifying ownership with [SIWE/SIWX](/appkit/authentication/siwx/default) using any wallet.

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

<AccordionGroup>
  <Accordion title="The icon can be an encoded image">
    ```typescript theme={null}
    const icon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
    createAppKit({
      // ...
      metadata: {
        // ...
        icons: [icon]
      }
    })
    ```
  </Accordion>
</AccordionGroup>

## defaultNetwork

Desired network for the initial connection as default:

<Tabs>
  <Tab title="Wagmi">
    ```ts theme={null}
    import { mainnet } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts theme={null}
    const mainnet = {
      chainId: 1,
      name: "Ethereum",
      currency: "ETH",
      explorerUrl: "https://etherscan.io",
      rpcUrl: "https://cloudflare-eth.com",
    };

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Solana">
    ```ts theme={null}
    import { solana } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: solana,
    });
    ```
  </Tab>
</Tabs>

## defaultAccountTypes

It allows you to configure the default account selected for the specified networks in AppKit. For example, if you want your EVM networks to use an EOA account by default, you can configure it as shown in the code below.

```ts theme={null}
createAppKit({
  //...
  defaultAccountTypes: { eip155: "eoa" },
});
```

Here are all the options you have for each network identifier or networks. Network identifier or networks available are `eip155` for EVM chains, `solana` for Solana, `bip122` for Bitcoin, and `polkadot` for Polkadot.

```ts theme={null}
type DefaultAccountTypes = {
  eip155: "eoa" | "smartAccount";
  solana: "eoa";
  bip122: "payment" | "ordinal" | "stx";
  polkadot: "eoa";
};
```

## featuredWalletIds

Select wallets that are going to be shown on the modal's main view. Default wallets are MetaMask and Trust Wallet.
Array of wallet ids defined will be prioritized (order is respected).
These wallets will also show up first in `All Wallets` view.
You can find the wallets IDs in [Wallets List](/cloud/wallets/wallet-list) or in [WalletGuide](https://walletguide.walletconnect.network/)

```ts theme={null}
createAppKit({
  //...
  featuredWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

## chainImages

Add or override the modal's network images.

```ts theme={null}
createAppKit({
  // ...
  chainImages: {
    1: "https://my.images.com/eth.png",
  },
});
```

## connectorImages

<Tabs>
  <Tab title="Wagmi">
    Set or override the images of any [connector](https://wagmi.sh/core/connectors/injected). AppKit supports two types of connector identification:

    * **EIP6963 wallets** (announced wallets): Use RDNS format like `'io.metamask'`, `'io.coinbase'`, `'app.phantom'`
    * **Other wallets**: Use normal connector IDs like `walletConnect`, `injected`, `appKitAuth`

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'io.metamask': "https://images.mydapp.com/metamask.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
        injected: "https://images.mydapp.com/browser-wallet.png",
      },
    });
    ```
  </Tab>

  <Tab title="Ethers">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>

  <Tab title="Solana">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'app.phantom': "https://images.mydapp.com/phantom.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>
</Tabs>

## enableWallets

Enable or disable injected wallets and WalletConnect. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWallets: false,
});
```

## enableNetworkSwitch

Enables or disables the network switching functionality in the modal. The default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableNetworkSwitch: false,
});
```

## enableReconnect

Enable or disable automatic reconnection on initialization and page load. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableReconnect: false,
});
```

## enableMobileFullScreen

Enable or disable fullscreen rendering of AppKit Core on mobile devices. Default is `false`.

```ts theme={null}
createAppKit({
  //...
  enableMobileFullScreen: true,
});
```

## debug

Enable or disable debug mode in your AppKit. This is useful if you want to see UI alerts when debugging. Default is `false`.

```ts theme={null}
debug: true;
```

## enableWalletGuide

Enable or disable the wallet guide text: `Haven't got a wallet? Get started`, is useful for people that don't have a wallet yet. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWalletGuide: false,
});
```

## termsConditionsUrl

You can add an url for the *terms and conditions* link.

```ts theme={null}
createAppKit({
  //...
  termsConditionsUrl: "https://www.mytermsandconditions.com",
});
```

## privacyPolicyUrl

A URL for the *privacy policy* link.

```ts theme={null}
createAppKit({
  //...
  privacyPolicyUrl: "https://www.myprivacypolicy.com",
});
```

## features

Allows you to toggle (enable or disable) additional features provided by AppKit. Features such as analytics, email and social logins, On-ramp, swaps, etc., can be enabled using this parameter.

### analytics

Enable analytics to get more insights on your users activity within your [Reown Dashboard](https://dashboard.reown.com)

```ts theme={null}
createAppKit({
  //...
  features: {
    analytics: true,
  },
});
```

<Card title="Learn More" href="/cloud/analytics" />

### swaps

Enable or disable the swap feature in your AppKit. [Swaps](/appkit/react/transactions/swaps) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    swaps: true,
  },
});
```

### onramp

Enable or disable the onramp feature in your AppKit. [Onramp](/appkit/react/transactions/onramp) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    onramp: true,
  },
});
```

### connectMethodsOrder

Order of the connection methods in the modal. The default order is `['wallet', 'email', 'social']`.

<Frame>
  <img />
</Frame>

```ts theme={null}
createAppKit({
  //...
  features: {
    connectMethodsOrder: ["social", "email", "wallet"],
  },
});
```

### legalCheckbox

Enable or disable the terms of service and/or privacy policy checkbox.

```ts theme={null}
createAppKit({
  //...
  features: {
    legalCheckbox: true,
  },
});
```

<Frame>
  <img />
</Frame>

## customWallets

Adds custom wallets to the modal. `customWallets` is an array of objects, where each object contains specific information of a custom wallet.

```ts theme={null}
createAppKit({
  //...
  customWallets: [
    {
      id: "myCustomWallet",
      name: "My Custom Wallet",
      homepage: "www.mycustomwallet.com", // Optional
      image_url: "my_custom_wallet_image", // Optional
      mobile_link: "mobile_link", // Optional - Deeplink or universal
      desktop_link: "desktop_link", // Optional - Deeplink
      webapp_link: "webapp_link", // Optional
      app_store: "app_store", // Optional
      play_store: "play_store", // Optional
    },
  ],
});
```

## AllWallets

<Warning>
  If the "All Wallets" button is removed on mobile, all the mobile wallets that were not added on the main view of the modal **won't** be able to connect to your website via WalletConnect protocol.
</Warning>

The `allWallets` parameter allows you to add or remove the "All Wallets" button on the modal.

| Value         | Description                                              |
| ------------- | -------------------------------------------------------- |
| `SHOW`        | Shows the "All Wallets" button on AppKit.                |
| `HIDE`        | Removes the "All Wallets" button from AppKit.            |
| `ONLY_MOBILE` | Shows the "All Wallets" button on AppKit only on mobile. |

```ts theme={null}
createAppKit({
  //...
  allWallets: "ONLY_MOBILE",
});
```

## includeWalletIds & excludeWalletIds

<Warning>
  Wallets that are either not included or excluded **won't** be able to connect to your website on mobile via WalletConnect protocol.
</Warning>

### includeWalletIds

Override default recommended wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be shown (order is respected).
Unlike `featuredWalletIds`, these wallets will be the **only** ones shown in `All Wallets` view and as recommended wallets.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  includeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### excludeWalletIds

Exclude wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be excluded. All other wallets will be shown in respective places.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  excludeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### Coinbase Smart Wallet

The Coinbase connector now includes a new flag to customize the Smart Wallet behavior.

The `preference` (or `coinbasePreference`) flag accepts one of the following string values:

* `eoaOnly`: Uses EOA Browser Extension or Mobile Coinbase Wallet.
* `smartWalletOnly`: Displays Smart Wallet popup.
* `all` (default): Supports both `eoaOnly` and `smartWalletOnly` based on context.

<Tabs>
  <Tab title="Wagmi">
    AppKit can be configured in **two** different ways: **Default** or **Custom**

    Select your preferred configuration mode below:

    Learn more about the Coinbase connector in the [Wagmi documentation](https://wagmi.sh/react/api/connectors/coinbaseWallet#preference).

    <CodeGroup>
      ```ts Default {4} theme={null}
      createAppKit({
        //...
        enableCoinbase: true, // true by default
        coinbasePreference: "smartWalletOnly",
      });
      ```

      ```ts Custom {8} theme={null}
      import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";

      const adapter = new WagmiAdapter({
        //...
        connectors: [
          coinbaseWallet({
            //...
            preference: "smartWalletOnly",
          }),
          projectId,
          networks,
        ],
      });

      export const config = wagmiAdapter.wagmiConfig;
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    ```ts {4} theme={null}
    createAppKit({
      //...
      enableCoinbase: true, // true by default
      coinbasePreference: "smartWalletOnly",
    });
    ```
  </Tab>
</Tabs>

## customRpcUrls

This function allows you to add custom RPC URLs to override the default network RPC URLs for native RPC calls. This is useful when you want to use your own RPC endpoints instead of the defaults.

```ts theme={null}
type CustomRpcUrl = {
  url: string
  config?: HttpTransportConfig // Optional transport configuration
}

type CustomRpcUrlMap = Record<CaipNetworkId, CustomRpcUrl[]>

createAppKit({
  //...
  customRpcUrls: {
    'eip155:1': [
      {
        url: 'https://your-custom-mainnet-url.com',
        config: {
          // Optional HTTP transport configuration
        }
      }
    ],
    'eip155:137': [
      {
        url: 'https://your-custom-polygon-url.com'
      }
    ]
  }
})
```

If you are using the Wagmi adapter, you need to pass the same `customRpcUrls` configuration to both the `WagmiAdapter` and `createAppKit`.

```ts theme={null}
const customRpcUrls: CustomRpcUrlMap = {
  'eip155:1': [{ url: 'https://your-custom-mainnet-url.com' }],
  'eip155:137': [{ url: 'https://your-custom-polygon-url.com' }]
}

const wagmiAdapter = new WagmiAdapter({
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})

const modal = createAppKit({
  adapters: [...],
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})
```

<Note>
  When using the Wagmi adapter, you don't need to configure [`transports`](https://wagmi.sh/core/api/createConfig#transports) separately. The WagmiAdapter will automatically configure them based on your `customRpcUrls`.

  However, if you use both `customRpcUrls` and Wagmi's `transports` property, be aware that `transports` will take precedence and override any conflicting RPC URLs defined in `customRpcUrls`.

  ```ts theme={null}
  const wagmiAdapter = new WagmiAdapter({
    //...
    customRpcUrls: {
      'eip155:1': [{ url: 'https://custom-rpc-1.com' }] // This will be overridden
    },
    transports: {
      [mainnet.id]: http('https://transport-rpc-1.com') // This takes precedence
    }
  })
  ```
</Note>

## universalProviderConfigOverride

Lets you customize specific aspects of the provider's behavior.

```ts theme={null}
createAppKit({
  //...
  universalProviderConfigOverride: {
    methods: { eip155: ['eth_sendTransaction', 'personal_sign'] },
    chains: { eip155: ['1', '137'] },
    events: { eip155: ['chainChanged', 'accountsChanged'] },
    rpcMap: { eip155:1: 'https://ethereum.publicnode.com' },
    defaultChain: 'eip155:1'
  },
});
```

You can override any of the following properties:

* `methods`: Custom RPC methods for each namespace
* `chains`: Supported chains for each namespace
* `events`: Events to subscribe to for each namespace
* `rpcMap`: Custom RPC URLs for specific chains
* `defaultChain`: The default chain to connect to

## allowUnsupportedChain

Allow users to switch to an unsupported chain. This parameter prevents the switch network dialog when a user connects to a network not listed under the `networks` attribute.

```ts theme={null}
createAppKit({
  //...
  allowUnsupportedChain: true,
});
```


# Sign In With Ethereum
Source: https://docs.reown.com/appkit/next/core/siwe



AppKit provides a simple solution for integrating with "Sign In With Ethereum" (SIWE), a new form of authentication that enables users to control their digital identity with their Ethereum account.
SIWE is a standard also known as [EIP-4361](https://docs.login.xyz/general-information/siwe-overview/eip-4361).

<Warning>
  **SIWE is being migrated to SIWX.** We recommend using [SIWX (Sign In With X)](/appkit/authentication/siwx/default) for new implementations as it provides multichain authentication support. For existing SIWE implementations, see the [migration guide](/appkit/authentication/siwx/default#migrating-from-siwe-to-siwx).
</Warning>

## One-Click Auth

**One-Click Auth** represents a key advancement within WalletConnect v2, streamlining the user authentication process in AppKit by enabling them to seamlessly connect with a wallet and sign a SIWE message with just one click.
It supports both [EIP-1271](https://eips.ethereum.org/EIPS/eip-1271), the standard for signature validation in smart accounts, and [EIP-6492](https://eips.ethereum.org/EIPS/eip-6492), which enables signature validation for smart accounts (contracts) that are not yet deployed, allowing messages to be signed without requiring prior deployment.

Connecting a wallet, proving control of an address with an off-chain signature, authorizing specific actions. These are the kinds of authorizations that can be encoded as ["ReCaps"](https://eips.ethereum.org/EIPS/eip-5573). ReCaps are permissions for a specific website or dapp that can be compactly encoded as a long string in the message you sign and translated by any wallet into a straight-forward one-sentence summary.
WalletConnect uses permissions expressed as ReCaps to enable a One-Click Authentication.

## NextAuth

[NextAuth](https://next-auth.js.org/) is a complete open-source authentication solution for Next.js applications.
It is designed from the ground up to support Next.js and Serverless. We can use NextAuth with SIWE to handle users authentication and sessions.

## Installation

<Tabs>
  <Tab title="One-Click Auth">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit-siwe next-auth
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit-siwe next-auth
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit-siwe next-auth
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit-siwe next-auth
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Legacy">
    <Warning>For a better UX we recommend using One-Click Auth.</Warning>

    Install the AppKit SIWE package, additionally we also recommend installing [siwe](https://docs.login.xyz/) which will abstract a lot of the required logic.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit-siwe siwe next-auth viem
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit-siwe siwe next-auth viem
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit-siwe siwe next-auth viem
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit-siwe siwe next-auth viem
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Configure your SIWE Client

<Card title="Next.js SIWE Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/nextjs/next-siwe-next-auth">
  Check the Next.js example using NextAuth
</Card>

<Tabs>
  <Tab title="One-Click Auth">
    ```ts theme={null}
    import { getCsrfToken, signIn, signOut, getSession } from "next-auth/react";
    import type {
      SIWEVerifyMessageArgs,
      SIWECreateMessageArgs,
      SIWESession,
    } from "@reown/appkit-siwe";
    import { createSIWEConfig, formatMessage } from "@reown/appkit-siwe";
    import { mainnet, sepolia } from "@reown/appkit/networks";

    export const siweConfig = createSIWEConfig({
      getMessageParams: async () => ({
        domain: typeof window !== "undefined" ? window.location.host : "",
        uri: typeof window !== "undefined" ? window.location.origin : "",
        chains: [mainnet.id, sepolia.id],
        statement: "Please sign with your account",
      }),
      createMessage: ({ address, ...args }: SIWECreateMessageArgs) =>
        formatMessage(args, address),
      getNonce: async () => {
        const nonce = await getCsrfToken();
        if (!nonce) {
          throw new Error("Failed to get nonce!");
        }

        return nonce;
      },
      getSession: async () => {
        const session = await getSession();
        if (!session) {
          return null;
        }

        // Validate address and chainId types
        if (
          typeof session.address !== "string" ||
          typeof session.chainId !== "number"
        ) {
          return null;
        }

        return {
          address: session.address,
          chainId: session.chainId,
        } satisfies SIWESession;
      },
      verifyMessage: async ({ message, signature }: SIWEVerifyMessageArgs) => {
        try {
          const success = await signIn("credentials", {
            message,
            redirect: false,
            signature,
            callbackUrl: "/protected",
          });

          return Boolean(success?.ok);
        } catch (error) {
          return false;
        }
      },
      signOut: async () => {
        try {
          await signOut({
            redirect: false,
          });

          return true;
        } catch (error) {
          return false;
        }
      },
    });
    ```

    ### `verifySignature`

    Verify a SIWE signature.

    ```ts theme={null}
    import { createPublicClient, http } from "viem";

    const publicClient = createPublicClient({
      transport: http(
        `https://rpc.walletconnect.org/v1/?chainId=${chainId}&projectId=${projectId}`
      ),
    });
    const isValid = await publicClient.verifyMessage({
      message,
      address: address as `0x${string}`,
      signature: signature as `0x${string}`,
    });

    // The verifySignature is not working with social logins and emails with non deployed smart accounts
    // for this reason we recommend using the viem to verify the signature
    // import { verifySignature } from '@reown/appkit-siwe'
    // const isValid = await verifySignature({ address, message, signature, chainId, projectId })
    ```

    ### `getChainIdFromMessage`

    Get the chain ID from the SIWE message.

    ```ts theme={null}
    import { getChainIdFromMessage } from "@reown/appkit-siwe";

    const chainId = getChainIdFromMessage(message);
    ```

    ### `getAddressFromMessage`

    Get the address from the SIWE message.

    ```ts theme={null}
    import { getAddressFromMessage } from "@reown/appkit-siwe";

    const address = getAddressFromMessage(message);
    ```
  </Tab>

  <Tab title="Legacy">
    With help of the [siwe package](https://docs.login.xyz/sign-in-with-ethereum/quickstart-guide/implement-the-frontend) we will create the required configuration for AppKit.

    <Info>
      The nonce and verification process will be implemented in your backend. [Read
      more.](https://docs.login.xyz/sign-in-with-ethereum/quickstart-guide/implement-the-backend)
    </Info>

    Let's create a file to instantiate our SIWE configuration. For this example we will use `config/siwe.ts`

    ```ts theme={null}
    import { getCsrfToken, signIn, signOut, getSession } from "next-auth/react";

    import { SiweMessage } from "siwe";

    import type {
      SIWEVerifyMessageArgs,
      SIWECreateMessageArgs,
    } from "@reown/appkit-siwe";
    import { createSIWEConfig, formatMessage } from "@reown/appkit-siwe";

    export const siweConfig = createSIWEConfig({
      createMessage: ({ nonce, address, chainId }: SIWECreateMessageArgs) =>
        new SiweMessage({
          version: "1",
          domain: window.location.host,
          uri: window.location.origin,
          address,
          chainId,
          nonce,
          // Human-readable ASCII assertion that the user will sign, and it must not contain `\n`.
          statement: "Sign in With Ethereum.",
        }).prepareMessage(),
      getNonce: async () => {
        const nonce = await getCsrfToken();
        if (!nonce) {
          throw new Error("Failed to get nonce!");
        }

        return nonce;
      },
      getSession,
      verifyMessage: async ({ message, signature }: SIWEVerifyMessageArgs) => {
        try {
          const success = await signIn("credentials", {
            message,
            redirect: false,
            signature,
            callbackUrl: "/protected",
          });

          return Boolean(success?.ok);
        } catch (error) {
          return false;
        }
      },
      signOut: async () => {
        try {
          await signOut({
            redirect: false,
          });

          return true;
        } catch (error) {
          return false;
        }
      },
    });
    ```
  </Tab>
</Tabs>

## Set up your API route

Add `NEXTAUTH_SECRET` as an environment variable, it will be used to encrypt and decrypt user sessions. [Learn more.](https://next-auth.js.org/configuration/options#nextauth_secret)

Create your API route at `app/api/auth/[...nextauth]/route.ts`.

<Tabs>
  <Tab title="One-Click Auth">
    ```ts theme={null}
    import NextAuth from "next-auth";
    import credentialsProvider from "next-auth/providers/credentials";
    import {
      type SIWESession,
      verifySignature,
      getChainIdFromMessage,
      getAddressFromMessage,
    } from "@reown/appkit-siwe";

    declare module "next-auth" {
      interface Session extends SIWESession {
        address: string;
        chainId: number;
      }
    }

    const nextAuthSecret = process.env.NEXTAUTH_SECRET;
    if (!nextAuthSecret) {
      throw new Error("NEXTAUTH_SECRET is not set");
    }

    const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
    if (!projectId) {
      throw new Error("NEXT_PUBLIC_PROJECT_ID is not set");
    }

    const providers = [
      credentialsProvider({
        name: "Ethereum",
        credentials: {
          message: {
            label: "Message",
            type: "text",
            placeholder: "0x0",
          },
          signature: {
            label: "Signature",
            type: "text",
            placeholder: "0x0",
          },
        },
        async authorize(credentials) {
          try {
            if (!credentials?.message) {
              throw new Error("SiweMessage is undefined");
            }
            const { message, signature } = credentials;
            const address = getAddressFromMessage(message);
            const chainId = getChainIdFromMessage(message);

            const isValid = await verifySignature({
              address,
              message,
              signature,
              chainId,
              projectId,
            });

            if (isValid) {
              return {
                id: `${chainId}:${address}`,
              };
            }

            return null;
          } catch (e) {
            return null;
          }
        },
      }),
    ];

    const handler = NextAuth({
      // https://next-auth.js.org/configuration/providers/oauth
      secret: nextAuthSecret,
      providers,
      session: {
        strategy: "jwt",
      },
      callbacks: {
        session({ session, token }) {
          if (!token.sub) {
            return session;
          }

          const [, chainId, address] = token.sub.split(":");
          if (chainId && address) {
            session.address = address;
            session.chainId = parseInt(chainId, 10);
          }

          return session;
        },
      },
    });

    export { handler as GET, handler as POST };
    ```
  </Tab>

  <Tab title="Legacy">
    ```ts theme={null}
    import { NextAuthOptions } from "next-auth";
    import credentialsProvider from "next-auth/providers/credentials";
    import { getCsrfToken } from "next-auth/react";
    import NextAuth from "next-auth/next";

    import type { SIWESession } from "@reown/appkit-siwe";
    import { SiweMessage } from "siwe";

    declare module "next-auth" {
      interface Session extends SIWESession {
        address: string;
        chainId: number;
      }
    }

    const nextAuthSecret = process.env.NEXTAUTH_SECRET;
    if (!nextAuthSecret) {
      throw new Error("NEXTAUTH_SECRET is not set");
    }
    // Get your projectId on https://dashboard.reown.com
    const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
    if (!projectId) {
      throw new Error("NEXT_PUBLIC_PROJECT_ID is not set");
    }

    const authOptions: NextAuthOptions = {
      // https://next-auth.js.org/configuration/providers/oauth
      secret: nextAuthSecret,
      providers: [
        credentialsProvider({
          name: "Ethereum",
          credentials: {
            message: {
              label: "Message",
              type: "text",
              placeholder: "0x0",
            },
            signature: {
              label: "Signature",
              type: "text",
              placeholder: "0x0",
            },
          },
          async authorize(credentials, req) {
            try {
              if (!credentials?.message) {
                throw new Error("SiweMessage is undefined");
              }
              const siwe = new SiweMessage(credentials.message);
              const nonce = await getCsrfToken({ req: { headers: req.headers } });
              const result = await siwe.verify({
                signature: credentials?.signature || "",
                nonce,
              });
              if (result.success) {
                return {
                  id: `eip155:${siwe.chainId}:${siwe.address}`,
                };
              }

              return null;
            } catch (e) {
              return null;
            }
          },
        }),
      ],
      session: {
        strategy: "jwt",
      },
      callbacks: {
        session({ session, token }) {
          if (!token.sub) {
            return session;
          }

          const [, chainId, address] = token.sub.split(":");
          if (chainId && address) {
            session.address = address;
            session.chainId = parseInt(chainId, 10);
          }

          return session;
        },
      },
    };

    const handler = NextAuth(authOptions);
    export { handler as GET, handler as POST };
    ```
  </Tab>
</Tabs>

<Card title="Learn More" href="https://next-auth.js.org/" />

## Initialize AppKit with your `siweConfig`.

```js theme={null}
// Pass your siweConfig inside the createAppKit() function
const modal = createAppKit({
  adapters: [wagmiAdapter], //or your Ethers adapter
  projectId,
  networks: [mainnet, arbitrum],
  defaultNetwork: mainnet,
  features: {
    analytics: true, // Optional - defaults to your Cloud configuration
  },
  siweConfig: siweConfig, // pass your siweConfig
});
```

### SIWE Config reference

```ts theme={null}
interface SIWEConfig {
  // Required
  getNonce: () => Promise<string>;
  createMessage: (args: SIWECreateMessageArgs) => string;
  verifyMessage: (args: SIWEVerifyMessageArgs) => Promise<boolean>;
  getSession: () => Promise<SIWESession | null>;
  signOut: () => Promise<boolean>;

  // Optional
  onSignIn?: (session?: SIWESession) => void;
  onSignOut?: () => void;
  // Defaults to true
  enabled?: boolean;
  // In milliseconds, defaults to 5 minutes
  nonceRefetchIntervalMs?: number;
  // In milliseconds, defaults to 5 minutes
  sessionRefetchIntervalMs?: number;
  // Defaults to true
  signOutOnDisconnect?: boolean;
  // Defaults to true
  signOutOnAccountChange?: boolean;
  // Defaults to true
  signOutOnNetworkChange?: boolean;
}
```

### Required

#### getNonce

The getNonce method functions as a safeguard against spoofing, akin to a CSRF token. The siwe package provides a generateNonce() helper, or you can utilize an existing CSRF token from your backend if available.

#### createMessage

The official siwe package offers a straightforward method for generating an EIP-4361-compatible message, which can subsequently be authenticated using the same package. The nonce parameter is derived from your getNonce endpoint, while the address and chainId variables are sourced from the presently connected wallet.

#### verifyMessage

The `verifyMessage` method should lean on the siwe package's new

```js theme={null}
SiweMessage(message).validate(signature);
```

to ensure the message is valid, has not been tampered with, and has been appropriately signed by the wallet address.

#### getSession

The backend session should store the associated address and chainId and return it via the `getSession` method.

#### signOut

The users session can be destroyed calling `signOut`.

### Optional

#### onSignIn `(session?: SIWESession) => void`

Callback when user signs in.

#### onSignOut `() => void`

Callback when user signs out.

#### enabled `boolean` - defaults to `true`

Whether or not to enable SIWE. Defaults to true.

#### nonceRefetchIntervalMs `number` - defaults to `300000`ms (5 minutes)

How often to refetch the nonce, in milliseconds.

#### sessionRefetchIntervalMs `number` - defaults to `300000`ms (5 minutes)

How often to refetch the session, in milliseconds.

#### signOutOnDisconnect `boolean` - defaults to true

Whether or not to sign out when the user disconnects their wallet.

#### signOutOnAccountChange `boolean` - defaults to true

Users will be signed out and redirected to the SIWE view to sign a new message in order to keep the SIWE session in sync with the connected account.

#### signOutOnNetworkChange `boolean` - defaults to true

Users will be signed out and redirected to the SIWE view to sign a new message in order to keep the SIWE session in sync with the connected account/network.


# Sign In With X
Source: https://docs.reown.com/appkit/next/core/siwx



## Introduction

The **Sign In With X** feature enables decentralized applications (Dapps) to authenticate users seamlessly across multiple blockchain networks, such as Ethereum, Polygon or Solana. This feature allows developers using our SDK to implement authentication by having users sign a unique string message with their blockchain wallets. The **Sign In With X** feature is designed in accordance with the [CAIP-122](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-122.md) standard, which establishes a chain-agnostic framework for blockchain-based authentication and authorization on off-chain services.

<Frame>
  <img />
</Frame>

<br />

<Card title="Try Demo" href="https://appkit-lab.reown.com/appkit/?name=siwx-default" />

<br />

## Getting Started

**SIWX** works as a plugin system for AppKit and you are going to add the plugin in the AppKit configuration. There are some ways to implement the **SIWX** feature:

* Use Reown Authentication to manage the sessions in the Reown Dashboard
* Use the `DefaultSIWX` class provided by AppKit
* Create a custom implementation to suit your specific requirements.

To initialize the **SIWX** feature, you need to add the `siwx` parameter to the `createAppKit` function.

### Reown Authentication

Reown Authentication is a predefined implementation of the SIWX configuration plugin that uses the Cloud service to create and manage SIWX messages and sessions. With Reown Authentication, you will be able to see and control the sessions of your users using the Reown [Dashboard](/cloud/reown-authentication).

Read more about the [Reown Authentication Implementation](./reown-authentication).

### Custom Implementation

`DefaultSIWX` is a scaffold implementation of the SIWX feature for quick custom integration. It offers pre-built components to get the feature running quickly with some custom adjustments.
Additionally, the expected \` parameters can be configured to allow customization of the feature to suit your specific requirements.

The defined interface must follow specific rules to make sure that AppKit can interact with it correctly. Read more about how to have your [Custom Implementation](./siwx-custom).

## SIWX Expected Behavior

* **SIWX** will prompt to get the user signature and verify his identity every time a connection happen;
* In case a SIWX session is already stored, the user will be automatically signed in and the prompt step will be skipped;
* If the user changes the connected network, **SIWX** will prompt to get the user signature and verify his identity again;
* If the user disconnects from the Dapp, **SIWX** will revoke the session and the user will need to sign in again.

## Migrating from SIWE to SIWX

If you are currently already using **SIWE** from `@reown/appkit-siwe`, after AppKit version 1.5.0, you will be migrated into **SIWX**. The migration process is automatic and your `siweConfig` from `createAppKit` function will be mapped internally.

<Warning>
  It is important to note that if you cannot use `siweConfig` and `siwx` at the same time, `createAppKit` will throw an error in case this happens.

  You may replace `siweConfig` with your own `siwx` configuration manually if you would like to do so.
</Warning>


# Email & Socials
Source: https://docs.reown.com/appkit/next/core/socials



To allow users to authenticate using their email or social accounts, you need to configure the `features` parameter in the `createAppKit` function.

<Tabs>
  <Tab title="Wagmi">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```

    <Note>
      AppKit with ethers v5 does not support the `auth` parameter and social logins. If you're using ethers v5, please consider upgrading to ethers v6 following this [ethers migration guide](https://docs.ethers.org/v6/migrating/) and [AppKit Docs](https://docs.walletconnect.com/appkit/overview)
    </Note>
  </Tab>

  <Tab title="Solana">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [solanaWeb3JsAdapter],
      projectId,
      networks: [solana, solanaTestnet, solanaDevnet],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "discord",
          "farcaster",
          "github",
          "apple",
          "facebook",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>
</Tabs>

## Options

* ***email \[boolean]*** : This boolean defines whether you want to enable email login. Default `true`
* ***socials \[array]*** : This array contains the list of social platforms that you want to enable for user authentication. The platforms in the example include Google, X, GitHub, Discord, Apple, Facebook and Farcaster. The default value of `undefined` displays everything. Set it to `false` to disable this feature. You can also pass an empty array to disable it.
* ***emailShowWallets \[boolean]*** : This boolean defines whether you want to show the wallet options on the first connect screen. If this is false and `socials` are enabled, it will show a button that directs you to a new screen displaying the wallet options. Default `true`

## User flow

1. Users will be able to connect to you application by simply using an email address. AppKit will send to them a One Time Password (OTP) to copy and paste in the modal, which will help to
   verify the user's authenticity. This will create a non-custodial wallet for your user which will be available in any application that integrates AppKit and email login.

2. Eventually the user can optionally choose to move from a non-custodial wallet to a self-custodial one by pressing "Upgrade Wallet" on AppKit.
   This will open the *([WalletConnect secure website](https://secure.walletconnect.com/dashboard))* that will walk your user through the upgrading process.

## UI Variants

AppKit SDK offers multiple UI variants to customize the user experience for the authentication process.

By configuring the `emailShowWallets` option in the `features` parameter, you can control the initial connect screen behavior:

* **`emailShowWallets: true`**: When this option is enabled, the initial connect screen will display the available wallet options directly to the user. This allows users to choose their preferred wallet immediately.

<Frame>
  <img />
</Frame>

* **`emailShowWallets: false`**: If this option is disabled, the initial connect screen will show a button instead. When the user clicks this button, they will be directed to a new screen that lists all the available wallet options. This can help simplify the initial interface and reduce visual clutter.

<Frame>
  <img />
</Frame>

By configuring the `socials` option in the `features` parameter, you can control the amount of social providers you want to show on the connect screen:

* **`socials: ['google']`**: When you only set one social provider, it will give you a button with \`connect with provider.

<Frame>
  <img />
</Frame>

* **`socials: ['google', 'discord']`**: When you set 2 social provider, it will give you 2 buttons next to each other with the logo of the social provider

<Frame>
  <img />
</Frame>

* **` socials: ['google', 'x', 'discord', 'apple', 'github']`**: When you set more than 2 social providers, the first provider in the array will get a button with `connect with provider`. The other providers will get a button with the logo of the social provider next to each other.

<Frame>
  <img />
</Frame>

* **`socials: []` or `socials: false`**: When you want to disable social logins.

<Frame>
  <img />
</Frame>

* **` email: false`**: When you want to disable email login.

<Frame>
  <img />
</Frame>

By configuring the `allWallets` option inside the `createAppKit` function, you can control whether if and when you want to display all wallets.

* **`allWallets: 'HIDE'`**: When you do not want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'SHOW'`**: When you want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'ONLY_MOBILE'`**: When you want to display all wallets only on a mobile device.


# Theming
Source: https://docs.reown.com/appkit/next/core/theming



The theme for the AppKit integration in your dApp can be fully customized.

## ThemeMode

By default `themeMode` option will be set to user system settings 'light' or 'dark'. But you can override it like this:

```ts theme={null}
createAppKit({
  //...
  themeMode: "light",
});
```

## themeVariables

By default `themeVariables` are undefined. You can set them like this:

```ts theme={null}
createAppKit({
  //...
  themeVariables: {
    "--apkt-color-mix": "#00BB7F",
    "--apkt-color-mix-strength": 40,
  },
});
```

The following list shows the theme variables you can override:

| Variable                      | Description                                                   | Type     |
| ----------------------------- | ------------------------------------------------------------- | -------- |
| `--apkt-font-family`          | Base font family                                              | `string` |
| `--apkt-accent`               | Color used for buttons, icons, labels, etc.                   | `string` |
| `--apkt-color-mix`            | The color that blends in with the default colors              | `string` |
| `--apkt-color-mix-strength`   | The percentage on how much "--apkt-color-mix" should blend in | `number` |
| `--apkt-font-size-master`     | The base pixel size for fonts.                                | `string` |
| `--apkt-border-radius-master` | The base border radius in pixels.                             | `string` |
| `--apkt-z-index`              | The z-index of the modal.                                     | `number` |

## Wallet Buttons

Wallet buttons are components that allow users to connect their wallets to your dApp. They provide a simple and easy way to connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.
You can also call them directly using hooks. Please check the [components](/appkit/next/core/components#walletButtons) and [hooks](/appkit/next/core/hooks#useappkitwallet) documentation for more information.

<Frame>
  <img />
</Frame>

<br />

<br />

<Card title="Try Wallet Buttons" href="https://appkit-lab.reown.com/appkit/?name=wagmi" />


# Deposit with Exchange - Next.js
Source: https://docs.reown.com/appkit/next/payments/deposit-with-exchange



<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Learn more in the WalletConnect Pay docs →](https://docs.walletconnect.com/payments/overview)
</Note>

**Deposit with Exchange** gives your users a seamless way to fund their connected wallets directly from centralized exchange accounts like Binance. Instead of forcing users to leave your app, log into their exchange, and manually handle withdrawals, you can offer a guided in-app flow that keeps them engaged and ready to transact.

## Quickstart

This feature will start working as soon as your team is on the allowed-list. Contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s) to get started.

<Warning>
  Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven't done so, please refer to the [Reown AppKit docs](/appkit/overview#quickstart).
</Warning>

Clicking on Fund your wallet will show the modal below:

<img alt="Funding your wallet with Deposit with Exchange" />

## Start Deposit with Exchange from a button

### Install the library

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-pay
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-pay
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-pay
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-pay
  ```
</CodeGroup>

### Usage

Import the `baseUSDC` asset, the `pay` function and the `useAppKitAccount` hook to get the address of the connected wallet.

```ts theme={null}

import { baseUSDC, pay } from '@reown/appkit-pay';
import { useAppKitAccount  } from '@reown/appkit/react'
```

Get the address of the connected wallet using the `useAppKitAccount` hook. You can also check if the user is connected using the `isConnected` boolean.

```ts theme={null}
const { address, isConnected } = useAppKitAccount()
```

In order to run the deposit, use the function `pay`. This function receives three values.

```ts theme={null}
// pay function returns a PaymentResult object
const result = await pay({ 
    recipient: address,
    amount: 0.0001,
    paymentAsset: baseUSDC
});

if (result.success) {
    console.log("Payment successful: "+ result.result);
} else {
    console.error("Payment error: "+ result.error);
}
```

## Supported Networks and Assets

Currently, Deposit with Exchange supports the following assets on the following networks:

**Asset -> Network**

**Binance**

* USDC -> Ethereum, Optimism, Arbitrum, Base, Polygon, Solana
* USDT -> Ethereum, Optimism, Arbitrum, Polygon, Solana
* Native Solana

For access to additional networks or assets, contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s).

## Assets Configuration

For the moment, AppKit Pay has pre-configured these assets:

* baseETH, baseSepoliaETH, and baseUSDC
* ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
* ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT

```ts theme={null}
import { baseETH } from '@reown/appkit-pay' 
```

For custom assets, you can create a paymentAsset object with all the information:

```ts theme={null}
// Configure the paymentAsset
const paymentAssetDetails = {
    network: 'eip155:8453', // Base Mainnet
    asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
    metadata: {
        name: 'Ethereum', // Or 'USD Coin'
        symbol: 'ETH',    // Or 'USDC'
        decimals: 18      // Or 6 for USDC
    }
};
```


# Pay with Self-Custodial Wallets - Next.js
Source: https://docs.reown.com/appkit/next/payments/pay-with-self-custodial-wallets



<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Learn more in the WalletConnect Pay docs →](https://docs.walletconnect.com/payments/overview)
</Note>

**Pay with Self-Custodial Wallets** lets users pay with their self-custodial wallets like MetaMask, Trust, Ledger, and more directly in-app.

## Quickstart

Here you can find a simplified process to integrate AppKit Pay:

<Warning>
  Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven't done so, please refer to the [Reown AppKit docs](/appkit/overview#quickstart).
</Warning>

## Code Example

<Card title="AppKit Pay Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-wagmi-appkit-pay">
  Check the React example
</Card>

### Install the library

<Note>
  Projects currently using Reown AppKit, or planning to use it to build custom payment flows with self-custodial wallets, should use AppKit Pay for a streamlined integration and significantly improved user experience out of the box. AppKit Pay can be found in `@reown/appkit-pay` npm package.
</Note>

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-pay
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-pay
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-pay
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-pay
  ```
</CodeGroup>

There are two main ways to handle payments:

### `pay` - Full Payment Flow

This function handles the complete payment flow — it opens the payment UI *and* waits for the result (success, failure, cancel, timeout).

```ts theme={null}
import { baseSepoliaETH, pay} from '@reown/appkit-pay'
```

In order to run the payment, use the function `pay`. This function receives three values: `recipient`, `amount`, and `paymentAsset`.

```ts theme={null}
// pay function returns a PaymentResult object
const result = await pay({ 
    recipient: addressRecipient,
    amount: 0.0001,
    paymentAsset: baseSepoliaETH
});

if (result.success) {
    console.log("Payment successful: "+ result.result);
} else {
    console.error("Payment error: "+ result.error);
}
```

### `openPay` - Open Payment UI Only

This function opens or triggers the payment UI modal but doesn't return the result of the payment. Use the hook to handle the payment result.

```ts theme={null}
import { baseSepoliaETH, openPay} from '@reown/appkit-pay'
```

Call the hook to open the payment modal.

```tsx theme={null}
    const { open: openPay, isPending, isSuccess, data, error } = usePay({
      onSuccess: handleSuccess, 
      onError: handleError,
    });
```

Open the payment modal, but onSuccess/onError handles the actual payment result:

```tsx theme={null}
      await openPay({ 
        paymentAsset: baseSepoliaETH,
        recipient: address,
        amount: 1000000000000000000 // 1 ETH
      });
```

Handle the payment result in the onSuccess/onError callbacks:

```tsx theme={null}
    const handleSuccess = (data: PaymentResult) => {
      console.log("Payment successful:", data);
    };

    const handleError = (error: AppKitPayErrorMessage) => {
      console.error("Payment error:", error);
    };
```

Or handle the payment result in the UI by displaying the payment status:

```tsx theme={null}
    {isSuccess || isPending || error && (
          <section>
            <h2>Payment Status</h2>
          {isSuccess && (
            <p>Payment successful: {data}</p>
          )}
          {isPending && (
            <p>Payment pending: {data}</p>
          )}
          {error && (
            <p>Payment error: {error}</p>
          )}
          </section>
    )}
```

## Supported Networks and Assets

For a complete list of supported networks and assets, please refer to the [Networks and Assets Supported](/appkit/payments/pay-with-self-custodial-wallets#networks-and-assets-supported) section in our Pay with Self-Custodial Wallets documentation.

## Assets Configuration

For the moment, AppKit Pay has pre-configured these assets:

* baseETH, baseSepoliaETH, and baseUSDC
* ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
* ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT

```ts theme={null}
import { baseETH } from '@reown/appkit-pay' 
```

For custom assets, you can create a paymentAsset object with all the information:

```ts theme={null}
// Configure the paymentAsset
const paymentAssetDetails = {
    network: 'eip155:8453', // Base Mainnet
    asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
    metadata: {
        name: 'Ethereum', // Or 'USD Coin'
        symbol: 'ETH',    // Or 'USDC'
        decimals: 18      // Or 6 for USDC
    }
};
```

## Prerequisites

### Enable Payments Feature in Dashboard

The "Payments" feature **must be enabled** in the [Reown Dashboard](https://dashboard.reown.com) before you can use AppKit Pay, even for local testing.

1. Go to your project in the Reown Dashboard
2. Navigate to the Payments section
3. Enable the Payments feature for your projectId

## Test locally

In order to test locally use localhost and port 3000. This is the only port available for local testing.

Add the following to your package.json file in order to run the development server on port 3000:

```json theme={null}
"scripts": {
    "dev": "vite --port 3000",
},
```

## Hooks

All the hooks must be imported from `@reown/appkit-pay/react`. For example:

```tsx theme={null}
import { useAvailableExchanges } from '@reown/appkit-pay/react';
```

### useAvailableExchanges

<Warning>
  The Pay with Exchange feature has been deprecated. The following exchange-related hooks are retained for backward compatibility only. For more details, see the [Payments FAQs](/appkit/payments/overview#payments-faqs).
</Warning>

Fetches and manages the state for available exchanges.

`useAvailableExchanges(options?: { isFetchOnInit?: boolean } & GetExchangesParams): UseAvailableExchangesReturn`

* `options`: Control initial fetch behavior.
* `returns`: `{ data, isLoading, error, fetch }`

`type GetExchangesParams= {
  page?: number
  asset?: string
  amount?: number | string
  network?: CaipNetworkId
}`

### usePayUrlActions

<Warning>
  The Pay with Exchange feature has been deprecated. This hook is retained for backward compatibility only. For more details, see the [Payments FAQs](/appkit/payments/overview#payments-faqs).
</Warning>

Provides functions (getUrl, openUrl) to interact with specific exchange URLs, returning the sessionId needed for status tracking.

`usePayUrlActions(): { getUrl, openUrl }`

* `getUrl(exchangeId, params): Promise<PayUrlResponse>`
* `openUrl(exchangeId, params, openInNewTab?): Promise<PayUrlResponse>` (Returns `{ url, sessionId }`)

### useExchangeBuyStatus

<Warning>
  The Pay with Exchange feature has been deprecated. This hook is retained for backward compatibility only. For more details, see the [Payments FAQs](/appkit/payments/overview#payments-faqs).
</Warning>

Fetches and polls for the status of a headless payment transaction using exchangeId and sessionId.

`useExchangeBuyStatus(params: UseExchangeBuyStatusParameters): UseExchangeBuyStatusReturn`

* `params`: `{ exchangeId, sessionId, pollingInterval?, isEnabled?, onSuccess?, onError? }`
* `returns`: `{ data, isLoading, error, refetch }`


# On-Ramp
Source: https://docs.reown.com/appkit/next/transactions/onramp



AppKit seamlessly incorporates Coinbase Pay, enabling users to sign in to their Coinbase accounts and utilize fiat payment methods for purchasing cryptocurrencies.

<Note>
  On-Ramp is supported in the latest version of AppKit. If you are using an older version, make sure you upgrade.
</Note>

## Integration

The On-Ramp feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `onramp` flag to `false` in the configuration of the `createAppKit` function.

<Note>
  On-Ramp is now available on **Solana**. The configuration for On-Ramp on both EVM and Solana is the same. Please refer to the code snippet below.
</Note>

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    onramp: false // Optional - true by default
  }
})
```

## On-Ramp API

You can programmatically open the On-Ramp modal.

```
const { open } = useAppKit()

open({ view: 'OnRampProviders' })
```


# Swaps
Source: https://docs.reown.com/appkit/next/transactions/swaps



The Swap feature allows users to exchange one cryptocurrency for another directly within the AppKit modal.
This feature is designed to provide a seamless and efficient swapping experience, leveraging our collaboration with [1inch](https://1inch.io/) as the swap provider.

## Availability

* **Requirement**: The Swap feature is available only to users who log in via email or social login. This is consistent with other wallet features such as sending tokens.
* **Transaction Fee**: Reown charges a 0.85% transaction fee on all swaps.
* **Supported Tokens**: The tokens available for swapping are limited to those supported by 1Inch. Note that the availability of tokens may vary depending on the network.
* **Network Availability**: The Swap feature is not available on Sepolia or other testnets at this time.

## How to Use

1. **Connect**: Ensure you are logged in via email or social login.
2. **Access Swap**: Navigate to the Swap feature within the account view.
3. **Select Tokens**: Choose the tokens you wish to swap from the available options.
4. **Type amount**: Enter your desired swap values. You can use the Max button to swap your all tokens or enter any specific number.
5. **See swap details**: Once you type amount value. You'll see the available quote details as received amount, network fee, maximum slippage, or price impact.
6. **Confirm Swap**: Review the swap details, including the transaction fee, and confirm the swap.

## Integration

The Swaps feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `swaps` flag to `false` in the configuration of the `createAppKit` function.

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    swaps: false // Optional - true by default
  }
})
```

## Setting Default Tokens

You can programmatically open the Swap view with pre-selected tokens and amounts using the `open` function from the [`useAppKit`](/appkit/react/core/hooks#useappkit) hook. This allows you to customize the default swap experience for your users.

```ts theme={null}
import { useAppKit } from '@reown/appkit/react'

function Component() {
  const { open } = useAppKit()

  const openSwapWithDefaults = () => {
    open({
      view: 'Swap',
      arguments: {
        amount: '100',      // Optional: pre-fill the swap amount
        fromToken: 'USDC',  // Optional: set the token to swap from
        toToken: 'ETH'      // Optional: set the token to swap to
      }
    })
  }

  return <button onClick={openSwapWithDefaults}>Swap USDC to ETH</button>
}
```

### Parameters

* `amount` (optional): Pre-fill the amount to swap
* `fromToken` (optional): Set the default token to swap from (e.g., 'USDC', 'ETH', 'DAI')
* `toToken` (optional): Set the default token to swap to (e.g., 'ETH', 'USDC', 'USDT')

This is particularly useful when you want to guide users to swap specific tokens or create custom swap buttons for different token pairs in your application.


# Components
Source: https://docs.reown.com/appkit/nuxt/core/components



AppKit provides pre-built UI components that you can use to trigger the modal or display wallet information.

## React Components

For React and Next.js applications, you can use React components instead of HTML elements:

```tsx theme={null}
import { 
  AppKitButton, 
  AppKitConnectButton, 
  AppKitAccountButton, 
  AppKitNetworkButton 
} from "@reown/appkit/react";

export default function MyApp() {
  return (
    <div>
      <AppKitButton />
      <AppKitConnectButton />
      <AppKitAccountButton />
      <AppKitNetworkButton />
    </div>
  );
}
```

## HTML Elements

AppKit's [web components](https://www.webcomponents.org/) are custom and reusable HTML tags. They will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

<Note>
  Web components are global html elements that don't require importing.
</Note>

### List of optional properties for AppKit web components

### `<appkit-button />`

| Variable       | Description                                                                                            | Type                               |
| -------------- | ------------------------------------------------------------------------------------------------------ | ---------------------------------- |
| `disabled`     | Enable or disable the button.                                                                          | `boolean`                          |
| `balance`      | Show or hide the user's balance.                                                                       | `'show'   \| 'hide'`               |
| `size`         | Default size for the button.                                                                           | `'md'     \| 'sm'`                 |
| `label`        | The text shown in the button.                                                                          | `string`                           |
| `loadingLabel` | The text shown in the button when the modal is open.                                                   | `string`                           |
| `namespace`    | Option to show specific namespace account info. Note: `eip155` is for EVM and `bip122` is for Bitcoin. | `'eip155' \| 'solana' \| 'bip122'` |

### `<appkit-account-button />`

| Variable   | Description                      | Type                 |
| ---------- | -------------------------------- | -------------------- |
| `disabled` | Enable or disable the button.    | `boolean`            |
| `balance`  | Show or hide the user's balance. | `'show'   \| 'hide'` |

### `<appkit-connect-button />`

| Variable       | Description                                          | Type              |
| -------------- | ---------------------------------------------------- | ----------------- |
| `size`         | Default size for the button.                         | `'md'    \| 'sm'` |
| `label`        | The text shown in the button.                        | `string`          |
| `loadingLabel` | The text shown in the button when the modal is open. | `string`          |

### `<appkit-network-button />`

| Variable   | Description                   | Type      |
| ---------- | ----------------------------- | --------- |
| `disabled` | Enable or disable the button. | `boolean` |

<Note>
  When using AppKit components in Nuxt, make sure to wrap them in `<client-only>` tags for SSR compatibility.
</Note>

```javascript theme={null}
<template>
  <client-only>
    <appkit-button />
    <appkit-network-button />
    <appkit-connect-button />
    <appkit-account-button />
  </client-only>
</template>
```


# Composables
Source: https://docs.reown.com/appkit/nuxt/core/composables



Composables are functions that will help you control the modal, subscribe to wallet events and interact with them and smart contracts.

<Note>
  When using AppKit composables in Nuxt, make sure to use them within `<client-only>` components for SSR compatibility.
</Note>

## useAppKit

Composable function for controlling the modal.

```ts theme={null}
import { useAppKit } from "@reown/appkit/vue";

export default function Component() {
  const { open, close } = useAppKit();
}
```

### Returns

* `open`: Function to open the modal
* `close`: Function to close the modal

### Parameters

You can also select the modal's view when calling the `open` function

```ts theme={null}
open({ view: "Account" });

// to connect and show multi wallets view
open({ view: "Connect" });

// to connect and show only solana wallets
open({ view: "Connect", namespace: "solana" });

// to connect and show only bitcoin wallets
open({ view: "Connect", namespace: "bip122" });

// to connect and show only ethereum wallets
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
open({ view: 'WalletSend' })
```

List of views you can select

<Table />

## useAppKitAccount

Composable function for accessing account data and connection status.

```ts theme={null}
import { useAppKitAccount } from "@reown/appkit/vue";

const accountData = useAppKitAccount();
```

Composable function for accessing account data and connection status for each namespace when working in a multi-chain environment.

```ts theme={null}
import { useAppKitAccount } from "@reown/appkit/vue";

const eip155Account = useAppKitAccount({ namespace: "eip155" }); // for EVM chains
const solanaAccount = useAppKitAccount({ namespace: "solana" });
const bip122Account = useAppKitAccount({ namespace: "bip122" }); // for bitcoin
```

### Returns

* `accountData.value.address`: The current account address
* `accountData.value.caipAddress`: The current account address in CAIP format
* `accountData.value.isConnected`: Boolean that indicates if the user is connected
* `accountData.value.status`: The current connection status

## useAppKitNetwork

Composable function for accessing network data and methods.

```ts theme={null}
import { useAppKitNetwork } from "@reown/appkit/vue";

export default Component(){
  const networkData = useAppKitNetwork()
}
```

### Returns

* `networkData.caipNetwork`: The current network object
* `networkData.caipNetworkId`: The current network id in CAIP format
* `networkData.chainId`: The current chain id
* `networkData.switchNetwork`: Function to switch the network. Accepts a `caipNetwork` object as argument.

### switchNetwork Usage

```ts theme={null}
import { polygon } from '@reown/appkit/networks'

...

networkData.switchNetwork(polygon)
```

<Note>
  See how to import or create a networks
  [here](/appkit/nuxt/core/custom-networks).
</Note>

## useAppKitState

Composable function for getting the current value of the modal's state.

```ts theme={null}
import { useAppKitState } from "@reown/appkit/vue";

const stateData = useAppKitState();
```

### Returns

* `stateData.open`: Boolean that indicates if the modal is open
* `stateData.selectedNetworkId`: The current chain id selected by the user

## useAppKitTheme

Composable function for controlling the modal's theme.

```ts theme={null}
import { useAppKitTheme } from "@reown/appkit/vue";
const themeAction = useAppKitTheme();
// or
// const { setThemeMode, setThemeVariables } = useAppKitTheme()
```

### Returns

* `themeAction.themeMode`: Get theme Mode.
* `themeAction.themeVariables`: Get theme variables.
* `themeAction.setThemeMode`: Set theme Mode. Accepts a string as parameter ('dark' | 'light')
* `themeAction.setThemeVariables`: Set theme variables. Check the example usage.

### Example Usage

```ts theme={null}
setThemeMode("dark");

setThemeVariables({
  "--apkt-color-mix": "#00BB7F",
  "--apkt-color-mix-strength": 40,
});
```

## useAppKitEvents

Subscribes to modal, wallet, and transaction events emitted by AppKit. Useful for analytics, telemetry, custom notifications, or reacting to specific user actions.

```ts theme={null}
import { useAppKitEvents } from "@reown/appkit/vue";

const events = useAppKitEvents();
```

The composable returns the latest event object. Each time a new event is emitted, the component re-renders with the new value:

```ts theme={null}
{
  timestamp: number
  data: {
    type: 'track' | 'error'
    event: string        // the event name
    properties?: object  // event-specific payload
  }
}
```

### Returns

* `events.timestamp`: Get the timestamp of the event
* `events.data.event`: Get the event name string
* `events.data.properties`: Get event-specific payload

<Card title="Full events reference" icon="list" href="/appkit/features/events">
  See every available event, its trigger condition, and the properties payload.
</Card>

## useDisconnect

Composable function for disconnecting the session.

```ts theme={null}
import { useDisconnect } from "@reown/appkit/vue";

const { disconnect } = useDisconnect();

// Disconnect from all namespaces
await disconnect();

// Disconnect from specific namespace
await disconnect({ namespace: 'eip155' }); // Disconnect from Ethereum
await disconnect({ namespace: 'solana' }); // Disconnect from Solana
await disconnect({ namespace: 'bip122' }); // Disconnect from Bitcoin
```

### Parameters

* `namespace` (optional): The specific chain namespace to disconnect from. If not provided, disconnects from all connected namespaces.

### Use Cases

* Implementing a "Disconnect Wallet" button
* Handling logout flows in your application
* Cleaning up resources when a user disconnects
* Resetting application state after disconnection
* Disconnecting from specific chains in multi-chain applications

## useWalletInfo

Composable function for accessing wallet information.

```ts theme={null}
import { useWalletInfo } from '@reown/appkit/vue'


export default Component(){
  const { walletInfo } = useWalletInfo()
}
```

## Ethereum/Solana Library

<Tabs>
  <Tab title="Wagmi">
    You can use [Wagmi actions](https://wagmi.sh/core/actions/getAccount) to sign messages, interact with smart contracts, and much more.

    ### getAccount

    Action for accessing account data and connection status.

    ```tsx theme={null}
    import { getAccount } from "@wagmi/core";

    const account = getAccount();
    ```

    ### signMessage

    Action for signing messages with connected account.

    ```ts theme={null}
    import { signMessage } from "@wagmi/core";

    const signature = await signMessage({
      message: "gm wagmi frens",
    });
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null}
    import { useAppKitProvider } from "@reown/appkit/vue";
    import type { Provider } from "@reown/appkit/vue";

    function Components() {
      const { walletProvider } = useAppKitProvider<Provider>("eip155");

      async function onSignMessage() {
        console.log(walletProvider);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    <Card title="Learn More" href="https://wagmi.sh/core/actions/readContract" />
  </Tab>

  <Tab title="Ethers">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null}
    import { useAppKitAccount } from "@reown/appkit/vue";

    const { address, status, isConnected } = useAppKitAccount();
    ```

    ### switchNetwork

    ```tsx theme={null}
    import { createAppKit } from "@reown/appkit/vue";
    import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";

    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata: metadata,
      features: {
        analytics: true,
      },
    });

    modal.switchNetwork(polygon);
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null}
    import { BrowserProvider } from "ethers";
    import { useAppKitProvider } from "@reown/appkit/vue";

    function Components() {
      const { walletProvider } = useAppKitProvider("eip155");

      async function onSignMessage() {
        const provider = new BrowserProvider(walletProvider);
        const signer = await provider.getSigner();
        const signature = await signer?.signMessage("Hello AppKit Ethers");
        console.log(signature);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    ### getError

    ```ts theme={null}
    function Components() {
      const error = modal.getError();
      //...
    }
    ```

    <Card title="Learn More About Ethers" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>

  <Tab title="Ethers v5">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null}
    import { useAppKitAccount } from "@reown/appkit/vue";

    const { address, status, isConnected } = useAppKitAccount();
    ```

    ### switchNetwork

    ```tsx theme={null}
    import { createAppKit } from "@reown/appkit/vue";
    import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";

    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata: metadata,
      features: {
        analytics: true,
      },
    });

    modal.switchNetwork(polygon);
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null}
    import {
      useAppKitAccount,
      useAppKitProvider,
      useAppKitNetwork,
    } from "@reown/appkit/vue";
    import { ethers } from "ethers";
    import { useAppKitProvider } from "@reown/appkit/vue";

    function Components() {
      const { walletProvider } = useAppKitProvider("eip155");
      const { address } = useAppKitAccount();
      const { chainId } = useAppKitNetwork();

      async function onSignMessage() {
        const provider = new ethers.providers.Web3Provider(walletProvider, chainId);
        const signer = provider.getSigner(address);
        const signature = await signer?.signMessage("Hello AppKit Ethers");
        console.log(signature);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    ### getError

    ```ts theme={null}
    function Components() {
      const error = modal.getError();
      //...
    }
    ```

    <Card title="Learn More About Ethers" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>

  <Tab title="Solana">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null}
    import { useAppKitAccount } from "@reown/appkit/vue";

    function Components() {
      const { address, caipAddress, isConnected } = useAppKitAccount();

      //...
    }
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null}
    import { useAppKitAccount, useAppKitProvider } from "@reown/appkit/vue";
    import type { Provider } from "@reown/appkit-adapter-solana";

    function SignMessage() {
      // 0. Get account and provider
      const { address } = useAppKitAccount();
      const { walletProvider } = useAppKitProvider<Provider>("solana");

      // 1. Create a function to sign a message
      async function onSignMessage() {
        try {
          if (!walletProvider || !address) {
            throw Error("user is disconnected");
          }

          // 2. Encode message and sign it
          const encodedMessage = new TextEncoder().encode("Hello from AppKit");
          const signature = await walletProvider.signMessage(encodedMessage);

          console.log(signature);
        } catch (err) {
          // Handle Error Here
        }
      }

      // 3. Create a button to trigger the function
      return <button onClick={onSignMessage}>Sign Message</button>;
    }
    ```

    ## useAppKitConnection

    Hook that returns the connection object. More info about [Connection Class](https://solana-labs.github.io/solana-web3.js/classes/Connection.html)

    ```tsx theme={null}
    import { useAppKitConnection } from '@reown/appkit-adapter-solana/vue'

    ...

    const { connection } = useAppKitConnection()
    ```
  </Tab>
</Tabs>


# Custom Connectors
Source: https://docs.reown.com/appkit/nuxt/core/custom-connectors



Custom connectors allow you to integrate wallets that are not natively supported by AppKit.

## Adding Custom Connectors

You can add custom connectors to your AppKit configuration:

```ts theme={null}
import { createAppKit } from '@reown/appkit'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { mainnet, arbitrum } from '@reown/appkit/networks'

const wagmiAdapter = new WagmiAdapter({
  networks: [mainnet, arbitrum],
  projectId
})

const appKit = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
  connectors: [
    // Add your custom connectors here
  ]
})
```

For more information on creating custom connectors, refer to the [Wagmi documentation](https://wagmi.sh/core/connectors/custom).


# Installation
Source: https://docs.reown.com/appkit/nuxt/core/installation



# Nuxt

AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, Bitcoin and TON.
Choose one of these to get started.

<Note>
  AppKit for Nuxt requires SSR compatibility considerations. Make sure to use the `<client-only>` wrapper and configure your Nuxt app appropriately.
</Note>

## Installation

Try installing AppKit Skills to get AI-assisted guidance. Your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.

<Tabs>
  <Tab title="Wagmi">
    <Warning>
      AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.
    </Warning>

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @wagmi/vue @tanstack/vue-query
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @wagmi/vue @tanstack/vue-query
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @wagmi/vue @tanstack/vue-query
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @wagmi/vue @tanstack/vue-query
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Solana">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-solana
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Bitcoin">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
      ```
    </CodeGroup>
  </Tab>

  <Tab title="TON">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ton
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Cloud Configuration

Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

## Implementation

<Tabs>
  <Tab title="Wagmi">
    <Card title="Nuxt Wagmi Example" icon="github" href="https://github.com/reown-com/appkit/tree/main/examples/nuxt-wagmi-solana-bitcoin">
      Check the Nuxt Wagmi example
    </Card>

    For this example, we'll be using **Wagmi** and **Viem** with Nuxt.

    First, configure your Nuxt application for SSR compatibility by updating your `nuxt.config.ts`:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    export default defineNuxtConfig({
      ssr: false,
      modules: ['@wagmi/vue/nuxt'],
      runtimeConfig: {
        public: {
          projectId: process.env.NUXT_PROJECT_ID
        }
      }
    })
    ```

    Create Nuxt plugins for vue-query and wagmi setup:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // plugins/1.vue-query.ts
    import { defineNuxtPlugin } from '#imports'
    import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'

    export default defineNuxtPlugin(nuxt => {
      const queryClient = new QueryClient({
        defaultOptions: { queries: { staleTime: 5000 } }
      })

      nuxt.vueApp.use(VueQueryPlugin, {
        queryClient,
        enableDevtoolsV6Plugin: true
      })
    })
    ```

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // plugins/2.wagmi.ts
    import { WagmiPlugin } from '@wagmi/vue'
    import { defineNuxtPlugin } from 'nuxt/app'
    import { wagmiAdapter } from '~/config/appkit'

    export default defineNuxtPlugin(nuxtApp => {
      nuxtApp.vueApp.use(WagmiPlugin, { config: wagmiAdapter.wagmiConfig })
    })
    ```

    Create your AppKit configuration:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // config/appkit.ts
    import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    import { mainnet, arbitrum } from '@reown/appkit/networks'

    export const projectId = process.env.NUXT_PROJECT_ID || 'YOUR_PROJECT_ID'

    export const networks = [mainnet, arbitrum]

    export const wagmiAdapter = new WagmiAdapter({
      networks,
      projectId
    })
    ```

    Then in your `app.vue` file, set up AppKit:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script setup lang="ts">
    import { createAppKit } from '@reown/appkit/vue'
    import { wagmiAdapter, networks, projectId } from './config/appkit'

    createAppKit({
      adapters: [wagmiAdapter],
      networks,
      projectId,
      metadata: {
        name: 'AppKit Nuxt Wagmi Example',
        description: 'AppKit Nuxt Wagmi Example',
        url: 'https://reown.com/appkit',
        icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
      }
    })
    </script>

    <template>
      <client-only>
        <div class="page-container">
          <h1>Nuxt Wagmi Example</h1>
          <appkit-button />
        </div>
      </client-only>
    </template>
    ```

    <Note>
      Make sure to set your `NUXT_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `ssr: false` configuration and `<client-only>` wrapper ensure AppKit works correctly with Nuxt's SSR environment.
    </Note>
  </Tab>

  <Tab title="Ethers">
    In your Nuxt application, set up the following configuration for Ethers integration.

    First, configure your `nuxt.config.ts` for SSR compatibility:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    export default defineNuxtConfig({
      ssr: false,
      runtimeConfig: {
        public: {
          projectId: process.env.NUXT_PROJECT_ID
        }
      }
    })
    ```

    Then in your `app.vue` file set up the following configuration:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script setup lang="ts">
    import { createAppKit } from '@reown/appkit/vue'
    import { EthersAdapter } from '@reown/appkit-adapter-ethers'
    import { mainnet, arbitrum } from '@reown/appkit/networks'

    const config = useRuntimeConfig()
    const projectId = config.public.projectId

    const metadata = {
      name: 'My Nuxt App',
      description: 'My Nuxt App description',
      url: 'https://mywebsite.com',
      icons: ['https://avatars.mywebsite.com/']
    }

    createAppKit({
      adapters: [new EthersAdapter()],
      networks: [mainnet, arbitrum],
      metadata,
      projectId,
      features: {
        analytics: true
      }
    })
    </script>

    <template>
      <client-only>
        <div class="page-container">
          <h1>Nuxt Ethers Example</h1>
          <appkit-button />
        </div>
      </client-only>
    </template>
    ```

    <Warning>
      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.
    </Warning>

    <Note>
      The `ssr: false` configuration and `<client-only>` wrapper ensure AppKit works correctly with Nuxt's SSR environment.
    </Note>
  </Tab>

  <Tab title="Solana">
    <Warning>
      MetaMask does not currently support WalletConnect connections on Solana. The MetaMask team is working on adding this feature. In the meantime, we recommend using other wallets that support Solana. You can find the complete list of supported wallets on [WalletGuide](https://walletguide.walletconnect.network/).
    </Warning>

    In your Nuxt application, set up the following configuration for Solana integration.

    First, configure your `nuxt.config.ts` for SSR compatibility:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    export default defineNuxtConfig({
      ssr: false,
      runtimeConfig: {
        public: {
          projectId: process.env.NUXT_PROJECT_ID
        }
      }
    })
    ```

    Then in your `app.vue` file set up the following configuration:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script setup lang="ts">
    import { createAppKit } from '@reown/appkit-solana/vue'
    import { SolanaAdapter } from '@reown/appkit-adapter-solana'
    import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/networks'

    const config = useRuntimeConfig()
    const projectId = config.public.projectId

    const metadata = {
      name: 'AppKit Nuxt',
      description: 'AppKit Nuxt Solana Example',
      url: 'https://example.com',
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    const solanaWeb3JsAdapter = new SolanaAdapter()

    createAppKit({
      adapters: [solanaWeb3JsAdapter],
      metadata,
      networks: [solana, solanaTestnet, solanaDevnet],
      projectId
    })
    </script>

    <template>
      <client-only>
        <div class="page-container">
          <h1>Nuxt Solana Example</h1>
          <appkit-button />
        </div>
      </client-only>
    </template>
    ```

    <Warning>
      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.
    </Warning>

    <Note>
      The `ssr: false` configuration and `<client-only>` wrapper ensure AppKit works correctly with Nuxt's SSR environment.
    </Note>
  </Tab>

  <Tab title="Bitcoin">
    AppKit Bitcoin provides a set of Vue components and composables to easily connect Bitcoin wallets with your Nuxt application.

    First, configure your `nuxt.config.ts` for SSR compatibility:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    export default defineNuxtConfig({
      ssr: false,
      runtimeConfig: {
        public: {
          projectId: process.env.NUXT_PROJECT_ID
        }
      }
    })
    ```

    In your `app.vue` file set up the following configuration:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script setup lang="ts">
    import { createAppKit } from '@reown/appkit/vue'
    import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
    import { bitcoin, bitcoinTestnet, bitcoinSignet } from '@reown/appkit/networks'

    const config = useRuntimeConfig()
    const projectId = config.public.projectId

    const networks = [bitcoin, bitcoinTestnet, bitcoinSignet]

    const bitcoinAdapter = new BitcoinAdapter({
      projectId
    })

    const metadata = {
      name: 'AppKit Nuxt',
      description: 'AppKit Nuxt Bitcoin Example',
      url: 'https://example.com',
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    createAppKit({
      adapters: [bitcoinAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true,
        email: false,
        socials: []
      }
    })
    </script>

    <template>
      <client-only>
        <div class="page-container">
          <h1>Nuxt Bitcoin Example</h1>
          <appkit-button />
        </div>
      </client-only>
    </template>
    ```

    ## Bitcoin Provider Interface

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    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

    <Tabs>
      <Tab title="SignMessageParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          export type SignMessageParams = {
            /**
             * The message to be signed
             */
            message: string
            /**
             * The address to sign the message with
             */
            address: string
          }
        ```
      </Tab>

      <Tab title="SendTransferParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          export type SendTransferParams = {
            /**
             * The amount to be sent in satoshis
             */
            amount: string
            /**
             * The address to send the transfer to
             */
            recipient: string
          }
        ```
      </Tab>

      <Tab title="SignPSBTParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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

        }

        ```
      </Tab>
    </Tabs>

    ### Responses

    <Tabs>
      <Tab title="AccountAddress">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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'
          }
        ```
      </Tab>

      <Tab title="SignPSBTResponse">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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
          }
        ```
      </Tab>
    </Tabs>

    <Note>
      The `ssr: false` configuration and `<client-only>` wrapper ensure AppKit works correctly with Nuxt's SSR environment.
    </Note>
  </Tab>

  <Tab title="TON">
    AppKit TON provides a set of Vue components and composables to easily connect TON wallets with your Nuxt application.

    First, configure your `nuxt.config.ts` for SSR compatibility:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    export default defineNuxtConfig({
      ssr: false,
      runtimeConfig: {
        public: {
          projectId: process.env.NUXT_PROJECT_ID
        }
      }
    })
    ```

    In your `app.vue` file set up the following configuration:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script setup lang="ts">
    import { createAppKit } from '@reown/appkit/vue'
    import { TonAdapter } from '@reown/appkit-adapter-ton'
    import { ton, tonTestnet } from '@reown/appkit/networks'

    const config = useRuntimeConfig()
    const projectId = config.public.projectId

    const networks = [ton, tonTestnet]

    const tonAdapter = new TonAdapter({
      projectId
    })

    const metadata = {
      name: 'AppKit Nuxt',
      description: 'AppKit Nuxt TON Example',
      url: 'https://example.com',
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    createAppKit({
      adapters: [tonAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true,
        email: false,
        socials: []
      }
    })
    </script>

    <template>
      <client-only>
        <div class="page-container">
          <h1>Nuxt TON Example</h1>
          <appkit-button />
        </div>
      </client-only>
    </template>
    ```

    <Note>
      The `ssr: false` configuration and `<client-only>` wrapper ensure AppKit works correctly with Nuxt's SSR environment.
    </Note>
  </Tab>
</Tabs>

## Trigger the modal

<Note>
  AppKit for Nuxt requires SSR compatibility considerations. Make sure to use the `<client-only>` wrapper and configure your Nuxt app appropriately.
</Note>

<Tabs>
  <Tab title="AppKit">
    To open AppKit you can use our [**web components**](/appkit/vue/core/components) or build your own button with AppKit [**composables**](/appkit/vue/core/composables#useAppKit).

    <CodeGroup>
      ```vue ConnectButton.vue theme={null}
      <template>
        <client-only>
          <appkit-button />
        </client-only>
      </template>
      ```

      ```vue ConnectButtonWithComposables.vue theme={null}
      <script setup lang="ts">
      import { useAppKit } from '@reown/appkit/vue'

      const { open } = useAppKit()
      </script>

      <template>
        <client-only>
          <button @click="open()">Open Connect Modal</button>
          <button @click="open({ view: 'Networks' })">Open Network Modal</button>
        </client-only>
      </template>
      ```
    </CodeGroup>

    <Note>
      The `<client-only>` wrapper ensures AppKit components only render on the client side, preventing SSR hydration issues.
    </Note>
  </Tab>

  <Tab title="AppKit Core">
    To open AppKit Core you need to call the `connect` function from the Universal Connector.

    ```vue theme={null}
    <script setup lang="ts">
    import { ref } from 'vue'

    let session = ref(null)

    async function handleConnect() {
      // universalConnector is the universal connector instance from the implementation section
      if (!universalConnector) {
        return
      }

      const { session: providerSession } = await universalConnector.connect()
      session.value = providerSession
    }

    async function handleDisconnect() {
      if (!universalConnector) {
        return
      }
      await universalConnector.disconnect()
      session.value = null
    }
    </script>

    <template>
      <client-only>
        <div>
          <button @click="handleConnect">Open AppKit Core</button>
          <button @click="handleDisconnect">Disconnect</button>
        </div>
      </client-only>
    </template>
    ```
  </Tab>
</Tabs>

## Blockchain Interaction

<Tabs>
  <Tab title="Wagmi">
    You need to install @wagmi/core to interact with smart contracts:

    <CodeGroup>
      ```bash npm theme={null}
      npm install @wagmi/core
      ```

      ```bash Yarn theme={null}
      yarn add @wagmi/core
      ```

      ```bash Bun theme={null}
      bun add @wagmi/core
      ```

      ```bash pnpm theme={null}
      pnpm add @wagmi/core
      ```
    </CodeGroup>

    [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) can help us interact with wallets and smart contracts:

    For this use case, we need to import the `wagmiConfig` from our AppKit WagmiAdapter configuration.

    ```ts theme={null}
    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](https://wagmi.sh/core/actions/readContract).
  </Tab>

  <Tab title="Ethers">
    [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:

    ```ts theme={null}
    import { BrowserProvider, Contract, parseEther } from 'ethers'
    import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/vue'

    const { walletProvider } = useAppKitProvider('eip155')
    const { address } = useAppKitAccount()

    if (!walletProvider) throw Error('No provider found')
    if (!address) throw Error('No address found')

    function sendTransaction() {
      const tx = {
        from: address,
        to: '0x...', // any address
        value: parseEther('0.0001')
      }
      const ethersProvider = new BrowserProvider(walletProvider)
      const signer = await ethersProvider.getSigner()
      const tx = await signer.sendTransaction(tx)
      console.log('transaction:', tx)
    }
    ```
  </Tab>
</Tabs>

## AppKit Skills

AppKit Skills provide AI-powered assistance for building with Reown AppKit. Once installed, your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.


# Options
Source: https://docs.reown.com/appkit/nuxt/core/options



The following options can be passed to the `createAppKit` function:

```ts theme={null}
createAppKit({ adapters, projectId, networks, ...options });
```

## networks

Array of networks that can be chosen from the `@reown/appkit/networks` library. This library retrieves the list of EVM networks from Viem and also includes the Solana networks.

```ts theme={null}
import { mainnet, solana } from "@reown/appkit/networks";

createAppKit({
  // ...
  networks: [mainnet, solana],
});
```

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

## metadata

Metadata for your AppKit. The `name`, `description`, `icons`, and `url` are used at certain places like the wallet connection, sign message, etc screens. If not provided, they will be fetched from the metadata of your website's document object.

```ts theme={null}
createAppKit({
  // ...
  metadata: {
    name: "My App",
    description: "My App Description",
    icons: ["https://myapp.com/icon.png"],
    url: "https://myapp.com",
  },
});
```

This information will primarily be used in modals when signing a transaction or message using [Embedded wallets (Smart Accounts)](/appkit/features/smart-accounts), or when verifying ownership with [SIWE/SIWX](/appkit/authentication/siwx/default) using any wallet.

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

<AccordionGroup>
  <Accordion title="The icon can be an encoded image">
    ```typescript theme={null}
    const icon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
    createAppKit({
      // ...
      metadata: {
        // ...
        icons: [icon]
      }
    })
    ```
  </Accordion>
</AccordionGroup>

## defaultNetwork

Desired network for the initial connection as default:

<Tabs>
  <Tab title="Wagmi">
    ```ts theme={null}
    import { mainnet } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts theme={null}
    const mainnet = {
      chainId: 1,
      name: "Ethereum",
      currency: "ETH",
      explorerUrl: "https://etherscan.io",
      rpcUrl: "https://cloudflare-eth.com",
    };

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Solana">
    ```ts theme={null}
    import { solana } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: solana,
    });
    ```
  </Tab>
</Tabs>

## defaultAccountTypes

It allows you to configure the default account selected for the specified networks in AppKit. For example, if you want your EVM networks to use an EOA account by default, you can configure it as shown in the code below.

```ts theme={null}
createAppKit({
  //...
  defaultAccountTypes: { eip155: "eoa" },
});
```

Here are all the options you have for each network identifier or networks. Network identifier or networks available are `eip155` for EVM chains, `solana` for Solana, `bip122` for Bitcoin, and `polkadot` for Polkadot.

```ts theme={null}
type DefaultAccountTypes = {
  eip155: "eoa" | "smartAccount";
  solana: "eoa";
  bip122: "payment" | "ordinal" | "stx";
  polkadot: "eoa";
};
```

## featuredWalletIds

Select wallets that are going to be shown on the modal's main view. Default wallets are MetaMask and Trust Wallet.
Array of wallet ids defined will be prioritized (order is respected).
These wallets will also show up first in `All Wallets` view.
You can find the wallets IDs in [Wallets List](/cloud/wallets/wallet-list) or in [WalletGuide](https://walletguide.walletconnect.network/)

```ts theme={null}
createAppKit({
  //...
  featuredWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

## chainImages

Add or override the modal's network images.

```ts theme={null}
createAppKit({
  // ...
  chainImages: {
    1: "https://my.images.com/eth.png",
  },
});
```

## connectorImages

<Tabs>
  <Tab title="Wagmi">
    Set or override the images of any [connector](https://wagmi.sh/core/connectors/injected). AppKit supports two types of connector identification:

    * **EIP6963 wallets** (announced wallets): Use RDNS format like `'io.metamask'`, `'io.coinbase'`, `'app.phantom'`
    * **Other wallets**: Use normal connector IDs like `walletConnect`, `injected`, `appKitAuth`

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'io.metamask': "https://images.mydapp.com/metamask.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
        injected: "https://images.mydapp.com/browser-wallet.png",
      },
    });
    ```
  </Tab>

  <Tab title="Ethers">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>

  <Tab title="Solana">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'app.phantom': "https://images.mydapp.com/phantom.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>
</Tabs>

## enableWallets

Enable or disable injected wallets and WalletConnect. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWallets: false,
});
```

## enableNetworkSwitch

Enables or disables the network switching functionality in the modal. The default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableNetworkSwitch: false,
});
```

## enableReconnect

Enable or disable automatic reconnection on initialization and page load. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableReconnect: false,
});
```

## enableMobileFullScreen

Enable or disable fullscreen rendering of AppKit Core on mobile devices. Default is `false`.

```ts theme={null}
createAppKit({
  //...
  enableMobileFullScreen: true,
});
```

## debug

Enable or disable debug mode in your AppKit. This is useful if you want to see UI alerts when debugging. Default is `false`.

```ts theme={null}
debug: true;
```

## enableWalletGuide

Enable or disable the wallet guide text: `Haven't got a wallet? Get started`, is useful for people that don't have a wallet yet. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWalletGuide: false,
});
```

## termsConditionsUrl

You can add an url for the *terms and conditions* link.

```ts theme={null}
createAppKit({
  //...
  termsConditionsUrl: "https://www.mytermsandconditions.com",
});
```

## privacyPolicyUrl

A URL for the *privacy policy* link.

```ts theme={null}
createAppKit({
  //...
  privacyPolicyUrl: "https://www.myprivacypolicy.com",
});
```

## features

Allows you to toggle (enable or disable) additional features provided by AppKit. Features such as analytics, email and social logins, On-ramp, swaps, etc., can be enabled using this parameter.

### analytics

Enable analytics to get more insights on your users activity within your [Reown Dashboard](https://dashboard.reown.com)

```ts theme={null}
createAppKit({
  //...
  features: {
    analytics: true,
  },
});
```

<Card title="Learn More" href="/cloud/analytics" />

### swaps

Enable or disable the swap feature in your AppKit. [Swaps](/appkit/react/transactions/swaps) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    swaps: true,
  },
});
```

### onramp

Enable or disable the onramp feature in your AppKit. [Onramp](/appkit/react/transactions/onramp) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    onramp: true,
  },
});
```

### connectMethodsOrder

Order of the connection methods in the modal. The default order is `['wallet', 'email', 'social']`.

<Frame>
  <img />
</Frame>

```ts theme={null}
createAppKit({
  //...
  features: {
    connectMethodsOrder: ["social", "email", "wallet"],
  },
});
```

### legalCheckbox

Enable or disable the terms of service and/or privacy policy checkbox.

```ts theme={null}
createAppKit({
  //...
  features: {
    legalCheckbox: true,
  },
});
```

<Frame>
  <img />
</Frame>

## customWallets

Adds custom wallets to the modal. `customWallets` is an array of objects, where each object contains specific information of a custom wallet.

```ts theme={null}
createAppKit({
  //...
  customWallets: [
    {
      id: "myCustomWallet",
      name: "My Custom Wallet",
      homepage: "www.mycustomwallet.com", // Optional
      image_url: "my_custom_wallet_image", // Optional
      mobile_link: "mobile_link", // Optional - Deeplink or universal
      desktop_link: "desktop_link", // Optional - Deeplink
      webapp_link: "webapp_link", // Optional
      app_store: "app_store", // Optional
      play_store: "play_store", // Optional
    },
  ],
});
```

## AllWallets

<Warning>
  If the "All Wallets" button is removed on mobile, all the mobile wallets that were not added on the main view of the modal **won't** be able to connect to your website via WalletConnect protocol.
</Warning>

The `allWallets` parameter allows you to add or remove the "All Wallets" button on the modal.

| Value         | Description                                              |
| ------------- | -------------------------------------------------------- |
| `SHOW`        | Shows the "All Wallets" button on AppKit.                |
| `HIDE`        | Removes the "All Wallets" button from AppKit.            |
| `ONLY_MOBILE` | Shows the "All Wallets" button on AppKit only on mobile. |

```ts theme={null}
createAppKit({
  //...
  allWallets: "ONLY_MOBILE",
});
```

## includeWalletIds & excludeWalletIds

<Warning>
  Wallets that are either not included or excluded **won't** be able to connect to your website on mobile via WalletConnect protocol.
</Warning>

### includeWalletIds

Override default recommended wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be shown (order is respected).
Unlike `featuredWalletIds`, these wallets will be the **only** ones shown in `All Wallets` view and as recommended wallets.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  includeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### excludeWalletIds

Exclude wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be excluded. All other wallets will be shown in respective places.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  excludeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### Coinbase Smart Wallet

The Coinbase connector now includes a new flag to customize the Smart Wallet behavior.

The `preference` (or `coinbasePreference`) flag accepts one of the following string values:

* `eoaOnly`: Uses EOA Browser Extension or Mobile Coinbase Wallet.
* `smartWalletOnly`: Displays Smart Wallet popup.
* `all` (default): Supports both `eoaOnly` and `smartWalletOnly` based on context.

<Tabs>
  <Tab title="Wagmi">
    AppKit can be configured in **two** different ways: **Default** or **Custom**

    Select your preferred configuration mode below:

    Learn more about the Coinbase connector in the [Wagmi documentation](https://wagmi.sh/react/api/connectors/coinbaseWallet#preference).

    <CodeGroup>
      ```ts Default {4} theme={null}
      createAppKit({
        //...
        enableCoinbase: true, // true by default
        coinbasePreference: "smartWalletOnly",
      });
      ```

      ```ts Custom {8} theme={null}
      import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";

      const adapter = new WagmiAdapter({
        //...
        connectors: [
          coinbaseWallet({
            //...
            preference: "smartWalletOnly",
          }),
          projectId,
          networks,
        ],
      });

      export const config = wagmiAdapter.wagmiConfig;
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    ```ts {4} theme={null}
    createAppKit({
      //...
      enableCoinbase: true, // true by default
      coinbasePreference: "smartWalletOnly",
    });
    ```
  </Tab>
</Tabs>

## customRpcUrls

This function allows you to add custom RPC URLs to override the default network RPC URLs for native RPC calls. This is useful when you want to use your own RPC endpoints instead of the defaults.

```ts theme={null}
type CustomRpcUrl = {
  url: string
  config?: HttpTransportConfig // Optional transport configuration
}

type CustomRpcUrlMap = Record<CaipNetworkId, CustomRpcUrl[]>

createAppKit({
  //...
  customRpcUrls: {
    'eip155:1': [
      {
        url: 'https://your-custom-mainnet-url.com',
        config: {
          // Optional HTTP transport configuration
        }
      }
    ],
    'eip155:137': [
      {
        url: 'https://your-custom-polygon-url.com'
      }
    ]
  }
})
```

If you are using the Wagmi adapter, you need to pass the same `customRpcUrls` configuration to both the `WagmiAdapter` and `createAppKit`.

```ts theme={null}
const customRpcUrls: CustomRpcUrlMap = {
  'eip155:1': [{ url: 'https://your-custom-mainnet-url.com' }],
  'eip155:137': [{ url: 'https://your-custom-polygon-url.com' }]
}

const wagmiAdapter = new WagmiAdapter({
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})

const modal = createAppKit({
  adapters: [...],
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})
```

<Note>
  When using the Wagmi adapter, you don't need to configure [`transports`](https://wagmi.sh/core/api/createConfig#transports) separately. The WagmiAdapter will automatically configure them based on your `customRpcUrls`.

  However, if you use both `customRpcUrls` and Wagmi's `transports` property, be aware that `transports` will take precedence and override any conflicting RPC URLs defined in `customRpcUrls`.

  ```ts theme={null}
  const wagmiAdapter = new WagmiAdapter({
    //...
    customRpcUrls: {
      'eip155:1': [{ url: 'https://custom-rpc-1.com' }] // This will be overridden
    },
    transports: {
      [mainnet.id]: http('https://transport-rpc-1.com') // This takes precedence
    }
  })
  ```
</Note>

## universalProviderConfigOverride

Lets you customize specific aspects of the provider's behavior.

```ts theme={null}
createAppKit({
  //...
  universalProviderConfigOverride: {
    methods: { eip155: ['eth_sendTransaction', 'personal_sign'] },
    chains: { eip155: ['1', '137'] },
    events: { eip155: ['chainChanged', 'accountsChanged'] },
    rpcMap: { eip155:1: 'https://ethereum.publicnode.com' },
    defaultChain: 'eip155:1'
  },
});
```

You can override any of the following properties:

* `methods`: Custom RPC methods for each namespace
* `chains`: Supported chains for each namespace
* `events`: Events to subscribe to for each namespace
* `rpcMap`: Custom RPC URLs for specific chains
* `defaultChain`: The default chain to connect to

## allowUnsupportedChain

Allow users to switch to an unsupported chain. This parameter prevents the switch network dialog when a user connects to a network not listed under the `networks` attribute.

```ts theme={null}
createAppKit({
  //...
  allowUnsupportedChain: true,
});
```


# Email & Socials
Source: https://docs.reown.com/appkit/nuxt/core/socials



To allow users to authenticate using their email or social accounts, you need to configure the `features` parameter in the `createAppKit` function.

<Tabs>
  <Tab title="Wagmi">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```

    <Note>
      AppKit with ethers v5 does not support the `auth` parameter and social logins. If you're using ethers v5, please consider upgrading to ethers v6 following this [ethers migration guide](https://docs.ethers.org/v6/migrating/) and [AppKit Docs](https://docs.walletconnect.com/appkit/overview)
    </Note>
  </Tab>

  <Tab title="Solana">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [solanaWeb3JsAdapter],
      projectId,
      networks: [solana, solanaTestnet, solanaDevnet],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "discord",
          "farcaster",
          "github",
          "apple",
          "facebook",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>
</Tabs>

## Options

* ***email \[boolean]*** : This boolean defines whether you want to enable email login. Default `true`
* ***socials \[array]*** : This array contains the list of social platforms that you want to enable for user authentication. The platforms in the example include Google, X, GitHub, Discord, Apple, Facebook and Farcaster. The default value of `undefined` displays everything. Set it to `false` to disable this feature. You can also pass an empty array to disable it.
* ***emailShowWallets \[boolean]*** : This boolean defines whether you want to show the wallet options on the first connect screen. If this is false and `socials` are enabled, it will show a button that directs you to a new screen displaying the wallet options. Default `true`

## User flow

1. Users will be able to connect to you application by simply using an email address. AppKit will send to them a One Time Password (OTP) to copy and paste in the modal, which will help to
   verify the user's authenticity. This will create a non-custodial wallet for your user which will be available in any application that integrates AppKit and email login.

2. Eventually the user can optionally choose to move from a non-custodial wallet to a self-custodial one by pressing "Upgrade Wallet" on AppKit.
   This will open the *([WalletConnect secure website](https://secure.walletconnect.com/dashboard))* that will walk your user through the upgrading process.

## UI Variants

AppKit SDK offers multiple UI variants to customize the user experience for the authentication process.

By configuring the `emailShowWallets` option in the `features` parameter, you can control the initial connect screen behavior:

* **`emailShowWallets: true`**: When this option is enabled, the initial connect screen will display the available wallet options directly to the user. This allows users to choose their preferred wallet immediately.

<Frame>
  <img />
</Frame>

* **`emailShowWallets: false`**: If this option is disabled, the initial connect screen will show a button instead. When the user clicks this button, they will be directed to a new screen that lists all the available wallet options. This can help simplify the initial interface and reduce visual clutter.

<Frame>
  <img />
</Frame>

By configuring the `socials` option in the `features` parameter, you can control the amount of social providers you want to show on the connect screen:

* **`socials: ['google']`**: When you only set one social provider, it will give you a button with \`connect with provider.

<Frame>
  <img />
</Frame>

* **`socials: ['google', 'discord']`**: When you set 2 social provider, it will give you 2 buttons next to each other with the logo of the social provider

<Frame>
  <img />
</Frame>

* **` socials: ['google', 'x', 'discord', 'apple', 'github']`**: When you set more than 2 social providers, the first provider in the array will get a button with `connect with provider`. The other providers will get a button with the logo of the social provider next to each other.

<Frame>
  <img />
</Frame>

* **`socials: []` or `socials: false`**: When you want to disable social logins.

<Frame>
  <img />
</Frame>

* **` email: false`**: When you want to disable email login.

<Frame>
  <img />
</Frame>

By configuring the `allWallets` option inside the `createAppKit` function, you can control whether if and when you want to display all wallets.

* **`allWallets: 'HIDE'`**: When you do not want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'SHOW'`**: When you want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'ONLY_MOBILE'`**: When you want to display all wallets only on a mobile device.

## Nuxt-specific considerations

When implementing social authentication in Nuxt, make sure to handle the authentication flow within `<client-only>` components to avoid SSR issues:

```javascript theme={null}
<script setup lang="ts">
import { useAppKitAccount } from '@reown/appkit/vue'

const { isConnected } = useAppKitAccount()
</script>

<template>
  <client-only>
    <div v-if="isConnected">
      <p>Connected via social login!</p>
    </div>
    <appkit-button v-else />
  </client-only>
</template>
```


# Theming
Source: https://docs.reown.com/appkit/nuxt/core/theming



The theme for the AppKit integration in your dApp can be fully customized.

## ThemeMode

By default `themeMode` option will be set to user system settings 'light' or 'dark'. But you can override it like this:

```ts theme={null}
createAppKit({
  //...
  themeMode: "light",
});
```

## themeVariables

By default `themeVariables` are undefined. You can set them like this:

```ts theme={null}
createAppKit({
  //...
  themeVariables: {
    "--apkt-color-mix": "#00BB7F",
    "--apkt-color-mix-strength": 40,
  },
});
```

The following list shows the theme variables you can override:

| Variable                      | Description                                                   | Type     |
| ----------------------------- | ------------------------------------------------------------- | -------- |
| `--apkt-font-family`          | Base font family                                              | `string` |
| `--apkt-accent`               | Color used for buttons, icons, labels, etc.                   | `string` |
| `--apkt-color-mix`            | The color that blends in with the default colors              | `string` |
| `--apkt-color-mix-strength`   | The percentage on how much "--apkt-color-mix" should blend in | `number` |
| `--apkt-font-size-master`     | The base pixel size for fonts.                                | `string` |
| `--apkt-border-radius-master` | The base border radius in pixels.                             | `string` |
| `--apkt-z-index`              | The z-index of the modal.                                     | `number` |

## Nuxt-specific theming

When working with theming in Nuxt, you can use the `useAppKitTheme` composable within `<client-only>` components:

```javascript theme={null}
<script setup lang="ts">
import { useAppKitTheme } from '@reown/appkit/vue'

const { setThemeMode, setThemeVariables } = useAppKitTheme()

function toggleTheme() {
  setThemeMode('dark')
}
</script>

<template>
  <client-only>
    <button @click="toggleTheme">Toggle Dark Mode</button>
  </client-only>
</template>
```


# Wallet Buttons
Source: https://docs.reown.com/appkit/nuxt/core/wallet-buttons



<Frame>
  <img />
</Frame>

Using the wallet button composable ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.

Follow these steps to use the composable:

1. Install the package:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-wallet-button
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-wallet-button
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-wallet-button
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-wallet-button
  ```
</CodeGroup>

2. Import and use in your Vue component:

```javascript theme={null}
<template>
  <div>
    <button @click="() => appKitWalletButton.connect('metamask')" :disabled="!isReady">
      Connect to MetaMask
    </button>
    <button @click="() => appKitWalletButton.connect('walletConnect')" :disabled="!isReady">
      Open QR modal
    </button>
    <button @click="() => appKitWalletButton.connect('google')" :disabled="!isReady">
      Connect to Google
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

const appKitWalletButton = createAppKitWalletButton()
const isReady = ref(false)

onMounted(() => {
  isReady.value = appKitWalletButton.isReady()
})
</script>
```

#### Multichain Support

You can specify a blockchain namespace to target specific chains:

```javascript theme={null}
<template>
  <div>
    <!-- Connect to Ethereum/EVM chains -->
    <button @click="() => evmWalletButton.connect('metamask')" :disabled="!isEvmReady">
      Connect MetaMask (EVM)
    </button>
    
    <!-- Connect to Solana -->
    <button @click="() => solanaWalletButton.connect('phantom')" :disabled="!isSolanaReady">
      Connect Phantom (Solana)
    </button>
    
    <!-- Connect to Bitcoin -->
    <button @click="() => bitcoinWalletButton.connect('leather')" :disabled="!isBitcoinReady">
      Connect Leather (Bitcoin)
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

const evmWalletButton = createAppKitWalletButton({ namespace: 'eip155' })
const solanaWalletButton = createAppKitWalletButton({ namespace: 'solana' })
const bitcoinWalletButton = createAppKitWalletButton({ namespace: 'bip122' })

const isEvmReady = ref(false)
const isSolanaReady = ref(false)
const isBitcoinReady = ref(false)

onMounted(() => {
  isEvmReady.value = evmWalletButton.isReady()
  isSolanaReady.value = solanaWalletButton.isReady()
  isBitcoinReady.value = bitcoinWalletButton.isReady()
})
</script>
```

<Note>
  Make sure to call wallet button methods after `createAppKit` has been initialized.
</Note>

#### Options for wallet property

| Type          | Options                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| QR Code       | `walletConnect`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| Wallets       | `metamask`, `trust`, `coinbase`, `rainbow`, `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`, `tokenpocket`, `haha`, `ambire-wallet`, `bitpay`, `blade-wallet`, `brave`, `coinstats`, `kresus-superapp`, `plena-app`, `status`, `tomo-wallet`, `valora`, and `zengo-wallet` |
| Social logins | `google`, `github`, `apple`, `facebook`, `x`, `discord`, and `farcaster`                                                                                                                                                                                                                                                                                                                                                                                                                                                      |


# On-Ramp
Source: https://docs.reown.com/appkit/nuxt/transactions/onramp



AppKit seamlessly incorporates Coinbase Pay, enabling users to sign in to their Coinbase accounts and utilize fiat payment methods for purchasing cryptocurrencies.

<Note>
  On-Ramp is supported in the latest version of AppKit. If you are using an older version, make sure you upgrade.
</Note>

## Integration

The On-Ramp feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `onramp` flag to `false` in the configuration of the `createAppKit` function.

<Note>
  On-Ramp is now available on **Solana**. The configuration for On-Ramp on both EVM and Solana is the same. Please refer to the code snippet below.
</Note>

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    onramp: false // Optional - true by default
  }
})
```

## API

```javascript theme={null}
<script setup lang="ts">
import { useAppKit } from '@reown/appkit/vue'

const { open } = useAppKit()

function openOnRamp() {
  open({ view: 'OnRampProviders' })
}
</script>

<template>
  <client-only>
    <button @click="openOnRamp">Buy Crypto</button>
  </client-only>
</template>
```


# Swaps
Source: https://docs.reown.com/appkit/nuxt/transactions/swaps



The Swap feature allows users to exchange one cryptocurrency for another directly within the AppKit modal.
This feature is designed to provide a seamless and efficient swapping experience, leveraging our collaboration with [1inch](https://1inch.io/) as the swap provider.

## Availability

* **Requirement**: The Swap feature is available only to users who log in via email or social login. This is consistent with other wallet features such as sending tokens.
* **Transaction Fee**: Reown charges a 0.85% transaction fee on all swaps.
* **Supported Tokens**: The tokens available for swapping are limited to those supported by 1Inch. Note that the availability of tokens may vary depending on the network.
* **Network Availability**: The Swap feature is not available on Sepolia or other testnets at this time.

## How to Use

1. **Connect**: Ensure you are logged in via email or social login.
2. **Access Swap**: Navigate to the Swap feature within the account view.
3. **Select Tokens**: Choose the tokens you wish to swap from the available options.
4. **Type amount**: Enter your desired swap values. You can use the Max button to swap your all tokens or enter any specific number.
5. **See swap details**: Once you type amount value. You'll see the available quote details as received amount, network fee, maximum slippage, or price impact.
6. **Confirm Swap**: Review the swap details, including the transaction fee, and confirm the swap.

## Integration

The Swaps feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `swaps` flag to `false` in the configuration of the `createAppKit` function.

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    swaps: false // Optional - true by default
  }
})
```

## Setting Default Tokens

You can programmatically open the Swap view with pre-selected tokens and amounts using the `open` function from the [`useAppKit`](/appkit/react/core/hooks#useappkit) hook. This allows you to customize the default swap experience for your users.

```ts theme={null}
import { useAppKit } from '@reown/appkit/react'

function Component() {
  const { open } = useAppKit()

  const openSwapWithDefaults = () => {
    open({
      view: 'Swap',
      arguments: {
        amount: '100',      // Optional: pre-fill the swap amount
        fromToken: 'USDC',  // Optional: set the token to swap from
        toToken: 'ETH'      // Optional: set the token to swap to
      }
    })
  }

  return <button onClick={openSwapWithDefaults}>Swap USDC to ETH</button>
}
```

### Parameters

* `amount` (optional): Pre-fill the amount to swap
* `fromToken` (optional): Set the default token to swap from (e.g., 'USDC', 'ETH', 'DAI')
* `toToken` (optional): Set the default token to swap to (e.g., 'ETH', 'USDC', 'USDT')

This is particularly useful when you want to guide users to swap specific tokens or create custom swap buttons for different token pairs in your application.

## API

```javascript theme={null}
<script setup lang="ts">
import { useAppKit } from '@reown/appkit/vue'

const { open } = useAppKit()

function openSwaps() {
  open({ view: 'Swap' })
}
</script>

<template>
  <client-only>
    <button @click="openSwaps">Open Swaps</button>
  </client-only>
</template>
```


# Get started with Reown
Source: https://docs.reown.com/appkit/overview



Ready to start building? Follow the steps below to set up your account and install AppKit.

## Set yourself up in the Reown Dashboard

1. Navigate to the [Reown Login page](https://dashboard.reown.com/sign-up)
2. Set up your account; either with an email and password or Google auth.
3. Follow the onboarding flow so you get the best dashboard experience
4. Toggle marketing communications on so you can receive updates on your app performance and new product releases.
5. Name your team and add team members (if applicable)
6. Create your first project and copy the Project ID to get ready for installation.

## Get started with your chosen framework

Now you have your project ID, you're ready to install using your chosen framework. For quickstart implementations and guidance, check out the [Install with AI guide](#get-started-with-ai-assistance) and [Install using the CLI guide](#get-started-with-the-cli)

<CardGroup>
  <Card title="React" icon="react" href="./react/core/installation">
    Get started with AppKit in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="./next/core/installation">
    Get started with AppKit in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="./vue/core/installation">
    Get started with AppKit in Vue.
  </Card>

  <Card title="Svelte" icon="https://mintcdn.com/reown-5552f0bb/y6FfJGDgiHdFLuuy/images/icons/svelte.svg?fit=max&auto=format&n=y6FfJGDgiHdFLuuy&q=85&s=ac80fcae3436e349d376fa7598bd4d32" href="./svelte/core/installation">
    Get started with AppKit in Svelte.
  </Card>

  <Card title="Nuxt" icon="mountains" href="./nuxt/core/installation">
    Get started with AppKit in Nuxt.
  </Card>

  <Card title="JavaScript" icon="js" href="./javascript/core/installation">
    Get started with AppKit in JavaScript.
  </Card>

  <Card title="React Native" icon="react" href="./react-native/core/installation">
    Get started with AppKit in React Native.
  </Card>

  <Card title="Flutter" icon="flutter" href="./flutter/core/installation">
    Get started with AppKit in Flutter.
  </Card>

  <Card title="Android" icon="android" href="./android/core/installation">
    Get started with AppKit in Android.
  </Card>

  <Card title="iOS" icon="apple" href="./ios/core/installation">
    Get started with AppKit in iOS.
  </Card>

  <Card title="Unity" icon="unity" href="./unity/core/installation">
    Get started with AppKit in Unity.
  </Card>
</CardGroup>

## Framework Support

The Reown SDK offers a wide range of features, networks, and authentication methods that make it easy to build interactive and user-friendly blockchain applications. However, certain features are limited to specific frameworks.

**The following table provides an overview of the features, networks, and authentication methods available in AppKit and the frameworks they support.**

* ✅ - indicates the feature is supported and can be integrated.
* ❌ - indicates the feature is not supported and cannot be integrated.

|                              | React              | Next.js            | Vue                | Svelte             | Nuxt               | JavaScript         | React Native       | Flutter            | Android            | Swift              | Unity (Web)        | Unity (Native)     |
| ---------------------------- | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ |
| ***Features***               |                    |                    |                    |                    |                    |                    |                    |                    |                    |                    |                    |                    |
| Swaps (EVM Only)             | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> |
| On-Ramp                      | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> |
| Multichain Modal             | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> |
| Smart Accounts               | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>✅</center> | <center>❌</center> |
| Telegram Mini Apps           | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>❌</center> | <center>❌</center> | <center>✅</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> |
| ***Networks***               |                    |                    |                    |                    |                    |                    |                    |                    |                    |                    |                    |                    |
| EVM Chains                   | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> |
| Solana                       | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>✅</center> |
| Bitcoin                      | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> |
| ***Authentication***         |                    |                    |                    |                    |                    |                    |                    |                    |                    |                    |                    |                    |
| Email & Social Login         | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>❌</center> | <center>❌</center> | <center>✅</center> | <center>❌</center> |
| Sign in with Ethereum (SIWE) | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>❌</center> | <center>✅</center> |
| SIWX                         | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>✅</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> | <center>❌</center> |

## Get started with AI assistance

Try installing AppKit Skills to get AI-assisted guidance. Your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null} theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.

## Get started with the CLI

Reown offers a dedicated CLI to set up a minimal version of Reown AppKit in the easiest and quickest way possible.

To do this, please run the command below.

```bash theme={null} theme={null}
npx @reown/appkit-cli
```

After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:

1. **Project Name**: Enter the name for your project.
2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).

After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.

To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.

## Do I need Reown SDK (AppKit) or AppKit Core?

Whether you need the Reown SDK or AppKit core depends on your implementation needs. You have 3 main options:

**1. You want to enable all Reown Capabilities on a [Reown AppKit supported network](/appkit/networks/supported-chains)**
In this case, you can install the regular appkit package [via your chosen framework](#get-started-with-your-chosen-framework)

**2. You want to support multiple networks; both those supported by the Reown SDK and additional networks not already supported.**
In this case, you can install the regular appkit package and set up the universal Connector. Find details to complete this [here](/appkit/recipes/universal-connector#start-building-with-universal-connector).

**3. You only want to support a network the Reown SDK does NOT support natively.**
In this case, you'll want to install the AppKit core package, configure your chosen network and use the UniversalProvider connector. Find instructions on how to add WalletConnect modals to custom networks [here](/appkit/networks/custom-networks).

### AppKit (Reown SDK) vs AppKit Core

AppKit Core is a **chain-agnostic** implementation that uses the Universal Provider/Universal Connector for blockchain interactions. Whereas the Reown SDK (AppKit) includes chain-specific adapters and full UI, AppKit Core offers a minimal, chain-agnostic foundation.

The Reown SDK is best for most builders, but AppKit Core is ideal for developers who want to build more flexible custom-built solutions—those that don't need built-in features from day one.

***

| Feature                                       | Reown SDK (AppKit) | AppKit Core |
| :-------------------------------------------- | :----------------: | :---------: |
| Swaps                                         |          ✅         |      ❌      |
| Onramps                                       |          ✅         |      ❌      |
| Smart Accounts                                |          ✅         |      ❌      |
| Pre-Built Modal UI                            |          ✅         |      ❌      |
| Chain-specific adapters                       |          ✅         |      ❌      |
| Wallet Connections via WalletConnect Protocol |          ✅         |      ✅      |
| Multichain support                            |          ✅         |      ✅      |
| Multichain auth (SIWX)                        |          ✅         |      ✅      |


# Enterprise Plan
Source: https://docs.reown.com/appkit/paid-plans/enterprise

Custom agreements for large-scale businesses that require custom SLAs or features negotiated with the Reown team.

The Enterprise plan is available for large scale businesses that require custom agreements with the Reown team, either to negotiate custom SLAs or custom features.

## How to Upgrade to an Enterprise plan

If you're interested in upgrading to an Enterprise plan, you will need to talk to the Reown sales team. [To book a call, fill out the form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s).

<Info>
  The Enterprise plan is only available for large scale teams that require custom agreements and features. To access enterprise-grade features immediately, you can upgrade to a [Growth plan](/appkit/paid-plans/growth) directly via the [Reown Dashboard](https://dashboard.reown.com/).
</Info>

***

## What can I expect from an Enterprise plan?

### Custom RPC calls & MAUs

Enterprise plans are for large sized teams that need more RPC calls and Monthly Active Users (MAUs).

* **RPC Calls:** More than 12.5 Million per month.
* **MAUs:** More than 15,000 per month.

### Unlimited team members

If you need more than 10 team members, an Enterprise deal may suit your team best.

### Feature Toggles

On an Enterprise plan, you can enable the following features in your dashboard configuration settings:

* [Authentication](/appkit/authentication/siwx/default): Allow connections to 500+ crypto wallets across all supported networks via the WalletConnect Protocol.
* [Social & Email logins](/appkit/authentication/socials): Provide non-crypto logins via Google, Apple, Github, Facebook and more.
* [Multiwallet Linking](/appkit/features/multiwallet-linking): Allow users to connect multiple wallets to your app in a single session.
* [Onramps](/appkit/features/onramp): Let your users buy crypto via a third-party provider directly in app.
* [Swaps](/appkit/features/swaps): Let your users make crypto to crypto exchanges on all supported networks.
* Funding Wallets: Allow your users to fund in-app wallets with either [exchange wallets](/appkit/payments/deposit-with-exchange) or [self-custodial wallets](/appkit/payments/pay-with-self-custodial-wallets) they already own.
* Event Tracking: Capture in-app events to track data performance in your [Analytics dashboard](/cloud/analytics).
* Activity: Allow your users to view their in-app transaction log.
* Headless: Personalize your connection UI to fit your app's brand aesthetics.
* Remove Reown branding: Remove the "UX powered by Reown" tag at the bottom of your modals.

For more information on feature toggles, visit the [dashboard configuration docs](/cloud/dashboard-configuration-settings).

### Advanced analytics

Dive deeper into your data to make informed decisions. Gather full history, 7-day, 30-day and quarterly reports on users, behavior, and app usage, including:

* **App Performance:** Sessions, Sessions vs wallet connections, Signatures, Active Hours.
* **User Insights:** Total users, Geographical Distribution, Net Worth, App Co-usage, Sanctioned users.
* **Connections:** Networks, Login methods, Wallet providers.
* **Payments:** Swaps, Onramps, Revenue, swap pairs, Onramp currencies, Geographic distribution of swaps and onramps.
* **Technical insights:** Devices, Operating systems.

### Improved Support

Get assistance when you need it. Access effective support with the ability to create support tickets directly via the Reown dashboard and escalate to a human whenever necessary. Enterprise customers also receive a dedicated Account Manager and a direct contact channel for questions, troubleshooting, and feature requests.

### Co-Marketing

Reown teams can collaborate on co-marketing campaigns such as educational blog exchanges, case studies, and amplification of key launches.

***

## Pricing

Available on request, depending on the features needed.


# Growth Plan
Source: https://docs.reown.com/appkit/paid-plans/growth

Enterprise-grade features without the custom agreement — upgrade directly through the Reown dashboard and get access immediately.

The Growth plan offers enterprise-grade features, such as advanced analytics, funding in-app wallet flows, UI customization, and in-dashboard support. Plus, you can upgrade directly through the Reown dashboard and receive the features immediately.

## How to Upgrade to the Reown Growth plan

If you're interested in upgrading to the Growth plan, you can self-serve directly via the Reown dashboard.

<Steps>
  <Step title="Login to the Reown Dashboard">
    Go to [dashboard.reown.com](https://dashboard.reown.com/).
  </Step>

  <Step title="Click &#x22;Upgrade Now&#x22;">
    Click the **"Upgrade Now"** button in the top right-hand corner.
  </Step>

  <Step title="Choose Growth">
    Select the **Growth** plan.
  </Step>

  <Step title="Check out via Stripe">
    Complete your purchase through Stripe.
  </Step>
</Steps>

***

## What can I expect from the Growth plan?

### More RPC calls & MAUs

Start building and iterating for more users and usage, with higher limits for RPC calls and the capacity to handle more Monthly Active Users (MAUs).

* **RPC Calls:** Up to 12.5 Million (vs 5 Million on Pro).
* **MAUs:** Up to 15,000 (vs 7,500 on Pro).

### Uncapped Overage

Eliminate disruptions as your app grows. Unlike the Starter plan, where projects are paused upon reaching limits, Reown Growth features uncapped overage.

* **Extra MAUs:** \$0.05 per extra MAU above 15,000.
* **Extra RPC:** \$1 per 100K extra RPC calls over 12.5 Million.

### Unlock seamless project management

Manage **unlimited projects** from a single team dashboard and add up to **10 team members**, allowing your entire team to collaborate effectively in one environment.

### Feature Toggles

On the Growth plan, you can enable the following features in your dashboard configuration settings:

* [Authentication](/appkit/authentication/siwx/default): Allow connections to 500+ crypto wallets across all supported networks via the WalletConnect Protocol.
* [Social & Email logins](/appkit/authentication/socials): Provide non-crypto logins via Google, Apple, Github, Facebook and more.
* [Multiwallet Linking](/appkit/features/multiwallet-linking): Allow users to connect multiple wallets to your app in a single session.
* [Onramps](/appkit/features/onramp): Let your users buy crypto via a third-party provider directly in app.
* [Swaps](/appkit/features/swaps): Let your users make crypto to crypto exchanges on all supported networks.
* Funding Wallets: Allow your users to fund in-app wallets with either [exchange wallets](/appkit/payments/deposit-with-exchange) or [self-custodial wallets](/appkit/payments/pay-with-self-custodial-wallets) they already own.
* Event Tracking: Capture in-app events to track data performance in your [Analytics dashboard](/cloud/analytics).
* Activity: Allow your users to view their in-app transaction log.
* Headless: Personalize your connection UI to fit your app's brand aesthetics.
* Remove Reown branding: Remove the "UX powered by Reown" tag at the bottom of your modals.

For more information on feature toggles, visit the [dashboard configuration docs](/cloud/dashboard-configuration-settings).

### Advanced analytics

Dive deeper into your data to make informed decisions. Gather full history, 7-day, 30-day and quarterly reports on users, behavior, and app usage, including:

* **App Performance:** Sessions, Sessions vs wallet connections, Signatures, Active Hours.
* **User Insights:** Total users, Geographical Distribution, Net Worth, App Co-usage, Sanctioned users.
* **Connections:** Networks, Login methods, Wallet providers.
* **Payments:** Swaps, Onramps, Revenue, swap pairs, Onramp currencies, Geographic distribution of swaps and onramps.
* **Technical insights:** Devices, Operating systems.

### Improved Support

Get assistance when you need it. Access effective support with the ability to create support tickets directly via the Reown dashboard and escalate to a human whenever necessary.

***

## Pricing

| Plan         | Price (Monthly) | Price (Annual)              |
| :----------- | :-------------- | :-------------------------- |
| Reown Growth | \$350 / month   | \$3,500 / year (Save \$700) |

<Tip>
  Annual billing gives you two months free!
</Tip>


# Pro Plan
Source: https://docs.reown.com/appkit/paid-plans/pro

More advanced features and analytics for growing teams, available directly via the Reown dashboard.

Reown Pro bridges the gap between Starter and Growth tiers, offering more advanced features and analytics for growing teams, available directly via the Reown dashboard.

## How to Upgrade to Reown Pro

If you're interested in upgrading to Reown Pro, you can self-serve directly via the Reown dashboard.

<Steps>
  <Step title="Login to the Reown Dashboard">
    Go to [dashboard.reown.com](https://dashboard.reown.com/).
  </Step>

  <Step title="Click &#x22;Upgrade Now&#x22;">
    Click the **"Upgrade Now"** button in the top right-hand corner.
  </Step>

  <Step title="Choose Reown Pro">
    Select the **Reown Pro** plan.
  </Step>

  <Step title="Check out via Stripe">
    Complete your purchase through Stripe.
  </Step>
</Steps>

<Info>
  You will immediately get access to Pro features upon successful checkout. All new Pro subscriptions include 14 days free, and billing only starts after your free trial concludes.
</Info>

***

## What can I expect from the Pro plan?

### More RPC calls & MAUs

Start building and iterating for more users and usage, with higher limits for RPC calls and the capacity to handle more Monthly Active Users (MAUs).

* **RPC Calls:** Up to 5 Million (vs 2.5 Million on Starter).
* **MAUs:** Up to 7,500 (vs 500 on Starter).

### Uncapped Overage

Eliminate disruptions as your app grows. Unlike the Starter plan, where projects are paused upon reaching limits, Reown Pro features uncapped overage.

* **Extra MAUs:** \$0.05 per extra MAU above 7,500.
* **Extra RPC:** \$1 per 100K extra RPC calls over 5 Million.

### More projects & Team members

Manage up to **3 projects** from a single team dashboard and add up to **5 team members**, allowing your entire team to collaborate effectively in one environment.

### Feature Toggles

On the Pro plan, you can enable the following features in your dashboard configuration settings:

* [Authentication](/appkit/authentication/siwx/default): Allow connections to 500+ crypto wallets across all supported networks via the WalletConnect Protocol.
* [Social & Email logins](/appkit/authentication/socials): Provide non-crypto logins via Google, Apple, Github, Facebook and more.
* [Multiwallet Linking](/appkit/features/multiwallet-linking): Allow users to connect multiple wallets to your app in a single session.
* [Onramps](/appkit/features/onramp): Let your users buy crypto via a third-party provider directly in app.
* [Swaps](/appkit/features/swaps): Let your users make crypto to crypto exchanges on all supported networks.
* Event Tracking: Capture in-app events to track data performance in your [Analytics dashboard](/cloud/analytics).
* Activity: Allow your users to view their in-app transaction log.
* Headless: Personalize your connection UI to fit your app's brand aesthetics.

For more information on feature toggles, visit the [dashboard configuration docs](/cloud/dashboard-configuration-settings).

### Advanced analytics

Dive deeper into your data to make informed decisions. Gather 7-day analytics on total users, behavior, and app usage, including:

* **App Performance:** Sessions vs wallet connections, Signatures, Active Hours.
* **User Insights:** Total users, Geographical Distribution.
* **Connections:** Networks, Login methods, Wallet providers.
* **Payments:** Swaps, Onramps, Revenue, swap pairs, Onramp currencies, Geographic distribution of swaps and onramps.
* **Technical insights:** Devices, Operating systems.

### Improved Support

Get assistance when you need it. Access effective support with the ability to create support tickets directly via the Reown dashboard and escalate to a human whenever necessary.

***

## Pricing

| Plan      | Price (Monthly) | Price (Annual)            |
| :-------- | :-------------- | :------------------------ |
| Reown Pro | \$89 / month    | \$890 / year (Save \$178) |

<Tip>
  Annual billing gives you two months free!
</Tip>


# Starter Plan
Source: https://docs.reown.com/appkit/paid-plans/starter

The free plan for early-stage startups to test features and get started immediately at no cost.

The Starter plan is completely free; designed for early-stage startups that want to test out features, provide wallet connections and get started immediately at no cost.

## How to use the Starter plan

All new users are on the Starter plan by default. Simply sign up or login via the [Reown Dashboard](https://dashboard.reown.com/) to start building on Starter.

***

## What can I expect on the Starter plan?

### 1 Project & 1 Team member

The Starter plan includes 1 project and 1 team member.

### Basic Usage Allowance

* **RPC Calls:** Up to 2.5 Million
* **MAUs:** 500

<Info>
  Exceeding your usage on the Starter tier will pause your project, meaning you will no longer be able to make RPC calls or accept extra MAUs. If you need uncapped overage, please upgrade to the Pro plan.
</Info>

### Feature Toggles

On the Starter plan, you can enable the following features in your dashboard configuration settings:

* [Authentication](/appkit/authentication/siwx/default): Allow connections to 500+ crypto wallets across all supported networks via the WalletConnect Protocol.
* [Social & Email logins](/appkit/authentication/socials): Provide non-crypto logins via Google, Apple, Github, Facebook and more.
* [Onramps](/appkit/features/onramp): Let your users buy crypto via a third-party provider directly in app.
* [Swaps](/appkit/features/swaps): Let your users make crypto to crypto exchanges on all supported networks.
* Event Tracking: Capture in-app events to track data performance in your [Analytics dashboard](/cloud/analytics).
* Activity: Allow your users to view their in-app transaction log.

For more information on feature toggles, visit the [dashboard configuration docs](/cloud/dashboard-configuration-settings).

### Basic analytics

The Starter tier includes basic app analytics for the previous 7 days including:

* **App Performance:** Sessions vs wallet connections
* **User Insights:** Total users
* **Payments:** Total Swaps, Total Onramps

### AI-assisted Support

Starter tier users can ask the in-dashboard support bot any questions on the product or their integration, but do not have the ability to escalate to the human customer experience team or open tickets.


# Deposit with Exchange
Source: https://docs.reown.com/appkit/payments/deposit-with-exchange

Let users seamlessly fund their connected wallets directly from their exchange accounts or another wallet.

<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Learn more in the WalletConnect Pay docs →](https://docs.walletconnect.com/payments/overview)
</Note>

**Deposit with Exchange** gives your users a seamless way to fund their connected wallets directly from centralized exchange accounts like **Binance**.
Instead of forcing users to leave your app, log into their exchange, and manually handle withdrawals, you can offer a guided in-app flow that keeps them engaged and ready to transact.

## Why Deposit with Exchange?

* **Instant access to existing funds:** No need for fiat payments, KYC, or new providers. Users move crypto they already own.
* **Frictionless experience:** Just a few clicks to deposit directly from an exchange into their wallet.
* **Perpetually available:** Reown establishes direct agreements with partner exchanges to ensure perpetual availability.
* **Security-first:** All activity flows directly through the exchange - no third-party access at any point.
* **Full customization:** Deposit with Exchange is provided through a headless SDK to ensure flexibility for you and your users.
* **Boost activation and retention:** A smoother onboarding and funding flow leads to better conversion, more repeat usage, less drop-offs.

<Note>
  **Onramp.money, Rootstock Collective, Bitgpt.xyz**, and a dozen other teams use the Pay/Deposit with Exchange feature already.
</Note>

## How does it work?

1. User connects a wallet through Reown AppKit.
2. After user realizes that their wallet is short on funds, the user selects "Transfer or Deposit with Exchange" as the funding method.
3. User chooses an exchange account and token.
4. User completes the deposit/transfer flow via the CEX's authorization.
5. The funds appear in the connected wallet and the user can proceed with their intended action.

<video />

## Supported tokens, networks, and platforms

Currently, AppKit Deposit with Exchange supports the following assets on the following networks:

**Asset -> Network**

**Binance**

* USDC → Ethereum, Optimism, Arbitrum, Base, Polygon, Solana
* USDT → Ethereum, Optimism, Arbitrum, Polygon, Solana
* Native Solana

For access to additional networks or assets, contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s).

**Platforms & SDKs**

* **Web**: React, Next.js, Vue, JavaScript SDK
* **Mobile and Native Apps**: Supported via deep link + QR

## Use cases

### Dapps (DeFi, Staking, Restaking)

* Enable users to fund → stake in one smooth flow (early-access).
* Avoid drop-off caused by slow fiat onramps or KYC barriers.

**Examples**: Lido, dYdX, Synthetix, Aave.

### Non-Custodial Wallets

* In-app top-ups from supported exchanges.
* No fiat, bridging, or browser extension hurdles.
* Faster first transaction, better onboarding, reduced support overhead.

**Examples**: Trust Wallet, Frame, Core, Rainbow.

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/payments/deposit-with-exchange">
    Get started with Deposit with Exchange in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/payments/deposit-with-exchange">
    Get started with Deposit with Exchange in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/payments/deposit-with-exchange">
    Get started with Deposit with Exchange in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/payments/deposit-with-exchange">
    Get started with Deposit with Exchange in JavaScript.
  </Card>

  <Card title="Flutter" icon="flutter" href="/appkit/flutter/payments/deposit-with-exchange">
    Get started with Deposit with Exchange in Flutter.
  </Card>
</CardGroup>


# Payments
Source: https://docs.reown.com/appkit/payments/overview



Reown offers a comprehensive Payments toolkit, supporting all levels of users, multiple chains and diverse asset types. Instead of a single rigid flow, Reown provides modular solutions for different financial needs, giving you access to hundreds of millions of users via 600+ wallets and multiple exchanges, with support for EVM, Bitcoin, Solana, Ton and Tron networks.

Reown's all-in-one toolkit for creating seamless payment flows includes:

1. **Onramps**: Let users buy cryptocurrencies with fiat currencies, like dollars or euros directly in-app.

2. **Swaps**: Let users swap coins and tokens seamlessly, directly in-app.

3. **Pay with Self Custodial Wallet**: Let users pay with their self custodial wallets like MetaMask, Trust, Ledger, and more.

4. **Deposit with Exchange**: Let users deposit funds in-app via Centralized Exchanges (CEXs) wallets, like Binance.

## Get Started

<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Compare Reown Payments and WalletConnect Pay here →](#reown-payments-or-walletconnect-pay-which-solution-is-better-for-me)
</Note>

<CardGroup>
  <Card title="Onramps" icon="cart-plus" href="/appkit/features/onramp">
    Get started with Reown Onramps.
  </Card>

  <Card title="Swaps" icon="rotate" href="/appkit/features/swaps">
    Get started with Reown Swaps.
  </Card>

  <Card title="Pay with Self-Custodial Wallets" icon="money-check-dollar" href="/appkit/payments/pay-with-self-custodial-wallets">
    Get started with Pay with self-custodial wallets.
  </Card>

  <Card title="Deposit with Exchange" icon="building-columns" href="/appkit/payments/deposit-with-exchange">
    Get started with Deposit with Exchange.
  </Card>
</CardGroup>

## Reown Payments or WalletConnect Pay? Which solution is better for me?

To understand which solution is better for you, browse and answer these questions for your own business.

<AccordionGroup>
  <Accordion title="Are you a crypto-enabled app developer or are you looking to accept crypto payments in any other type of business?">
    The Reown SDK is designed for crypto-enabled app developers, incorporating payments solutions into a wider stack also offering authentication and interaction solutions. [WalletConnect Pay](https://docs.walletconnect.com/payments/overview) is a standalone B2B payments infrastructure product targeting merchants, PSPs, and e-commerce/POS systems — it's purely focused on crypto payment processing.

    The bottom line:

    * If you're building a crypto-enabled app, Reown is likely your best solution
    * If you want to accept crypto payments in your online or in-person store, [WalletConnect Pay](https://docs.walletconnect.com/payments/overview) may suit you better.
  </Accordion>

  <Accordion title="Which architecture type suits your business better?">
    The Reown SDK's payment solutions are client-initiated: your frontend passes payment parameters (recipient, amount, asset) directly into the SDK, which opens a modal UI and handles the flow. [WalletConnect Pay](https://docs.walletconnect.com/payments/overview) is server-authoritative: a payment intent is created server-side, and the wallet resolves the canonical payment details by calling Gateway endpoints. This means the server defines what the wallet does, not the client, making WalletConnect Pay more tamper-resistant.
  </Accordion>

  <Accordion title="What level of compliance do you need?">
    [WalletConnect Pay](https://docs.walletconnect.com/payments/overview) provides infrastructure for compliance reporting that Reown doesn't. When a user connects their wallet, WalletConnect Pay runs 3 pre-execution checks; Wallet screening, location check and identity screening. These checks do not replace or outsource your own regulatory obligations. Instead, they can be incorporated into your own compliance process to help you meet your necessary obligations.
  </Accordion>

  <Accordion title="What other features do you need?">
    Reown offers broader solutions such as smart accounts, app analytics, funding from existing wallets, hooks and interactions infrastructure and more.

    [WalletConnect Pay](https://docs.walletconnect.com/payments/overview) is purely for payments, also offering deeper payment solutions such as merchant reconciliation, fiat off-ramp, POS integration, gateway API, payment history, and whitelabel.
  </Accordion>
</AccordionGroup>

***

## Reown Payments vs WalletConnect Pay — Features Comparison

| Feature                                                         | Reown SDK                                        | WalletConnect Pay (WCP)                                   |
| --------------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------- |
| **KEY DIFFERENCES**                                             |                                                  |                                                           |
| Description                                                     | Full-stack Web3 app SDK                          | Crypto payments infrastructure                            |
| Built for                                                       | Crypto-enabled app developers                    | Merchants, PSPs, e-commerce/POS platforms                 |
| Architecture                                                    | Client-initiated (frontend passes params to SDK) | Server-authoritative (wallet resolves intent via gateway) |
| Checkout surface                                                | Embedded in-app modal                            | Scan-to-pay (QR), POS terminal flows                      |
| Wallet support                                                  | 700+ wallets                                     | 700+ wallets                                              |
| Multi-chain support                                             | Yes (EVM, Solana, Bitcoin, Ton, Tron)            | EVM now; Solana coming soon                               |
| Integration method                                              | 1 SDK in app code                                | REST API embedded in merchant/PSP systems                 |
| Merchant Autonomy                                               | Full wallet ownership retained by merchant       | Permissions abstracted via gateway                        |
| **INCLUDED FEATURES**                                           |                                                  |                                                           |
| Cross-chain swaps                                               | ✅                                                | ✅                                                         |
| Gas sponsorship                                                 | ❌                                                | ✅                                                         |
| Onramp                                                          | ✅                                                | ❌                                                         |
| Deposits to existing crypto wallets (Self-custodial & Exchange) | ✅                                                | ❌                                                         |
| Smart accounts                                                  | ✅                                                | ❌                                                         |
| Social/email onboarding                                         | ✅                                                | ❌                                                         |
| Blockchain API & smart contract hooks                           | ✅                                                | ❌                                                         |
| Analytics                                                       | ✅                                                | ❌                                                         |
| Merchant reconciliation & dashboard                             | ❌                                                | ✅                                                         |
| Whitelabel / headless                                           | ✅                                                | ✅                                                         |
| Fee splitting                                                   | ❌                                                | ✅ (coming soon)                                           |
| **CHECKOUT EXPERIENCE**                                         |                                                  |                                                           |
| POS (in-store) payments                                         | ❌                                                | ✅                                                         |
| E-commerce checkout integration                                 | ❌                                                | ✅                                                         |
| Merchant fiat settlement                                        | ❌                                                | ✅                                                         |
| Refunds                                                         | ❌                                                | ✅                                                         |
| Cashback                                                        | ❌                                                | ✅                                                         |
| **COMPLIANCE**                                                  |                                                  |                                                           |
| Merchant can prove wallet ownership for compliance reporting    | ✅                                                | ❌                                                         |
| KYC / AML / Sanction screening                                  | ❌                                                | ✅                                                         |
| Travel rule compliance                                          | ❌                                                | ✅                                                         |

## Payments FAQs

<AccordionGroup>
  <Accordion title="What happened to &#x22;Pay with Exchange&#x22;?">
    The Pay with exchange feature has been deprecated due to the evolving challenge of compliance for our partner centralized exchanges. In future, it may be added to WalletConnect Pay. [To learn more about WalletConnect Pay, visit the docs here →](https://docs.walletconnect.com/payments/overview)
  </Accordion>

  <Accordion title="What happened to one-click checkout?">
    One-click checkout has been migrated to WalletConnect Pay. [To set up seamless crypto payments for your business, visit the WalletConnect Pay docs here →](https://docs.walletconnect.com/payments/overview)
  </Accordion>
</AccordionGroup>


# Pay with Self-Custodial Wallets
Source: https://docs.reown.com/appkit/payments/pay-with-self-custodial-wallets



<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Learn more in the WalletConnect Pay docs →](https://docs.walletconnect.com/payments/overview)
</Note>

**Pay with Self-Custodial Wallets** is a feature of Reown's AppKit for Payments, enabling end users to make crypto payments directly from **non-custodial wallets.** This includes mobile wallets connected via WalletConnect as well as many browser wallets, giving users full control of their assets throughout the payment process.

<Frame>
  <video />
</Frame>

## Networks and Assets Supported

Currently, Pay with Self-Custodial Wallets supports the following assets on the following networks:

**Asset -> Network**

* USDC -> Ethereum, Optimism, Arbitrum, Base, Polygon, Solana
* USDT -> Ethereum, Optimism, Arbitrum, Polygon, Solana
* Native Solana

**Both EVM and Solana networks and their assets can be added.**

For access to additional networks or assets, contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s).

## Get Started

<CardGroup>
  <Card title="React" icon="react" href="/appkit/react/payments/pay-with-self-custodial-wallets">
    Get started with Pay with self-custodial wallets in React.
  </Card>

  <Card title="Next.js" icon="square-n" href="/appkit/next/payments/pay-with-self-custodial-wallets">
    Get started with Pay with self-custodial wallets in Next.js.
  </Card>

  <Card title="Vue" icon="vuejs" href="/appkit/vue/payments/pay-with-self-custodial-wallets">
    Get started with Pay with self-custodial wallets in Vue.
  </Card>

  <Card title="JavaScript" icon="js" href="/appkit/javascript/payments/pay-with-self-custodial-wallets">
    Get started with Pay with self-custodial wallets in JavaScript.
  </Card>
</CardGroup>

## Pay with Self-Custodial Wallets FAQs

<AccordionGroup>
  <Accordion title="What is 'Pay with Self-Custodial Wallets'?">
    **Pay with Self-Custodial Wallets** is a feature of Reown's AppKit for Payments, enabling end users to make crypto payments directly from **non-custodial wallets.** This includes mobile wallets connected via WalletConnect as well as many browser wallets, giving users full control of their assets throughout the payment process.
  </Accordion>

  <Accordion title="Which wallets are supported?">
    600+ wallets are supported - all major wallets and any wallet that supports WalletConnect.
  </Accordion>
</AccordionGroup>

### User Experience

<AccordionGroup>
  <Accordion title="How does the user authorize a payment?">
    The user first connects their chosen wallet after which they will see a transaction prompt in their wallet interface with recipient address, network, asset and amount pre-filled. To complete the payment, the user must confirm the transaction in their chosen wallet.
  </Accordion>

  <Accordion title="What happens if a user cancels mid-flow?">
    If a user abandons the flow before signing the transaction in their wallet, **no transaction occurs**. Apps can implement timeout logic to handle cancellations gracefully.
  </Accordion>

  <Accordion title="Can a user switch wallets?">
    Yes, a user can simply disconnect a wallet and connected another without losing the payment detail.
  </Accordion>
</AccordionGroup>

### Compliance, Security & Observability

<AccordionGroup>
  <Accordion title="Can we monitor transactions in real time?">
    Yes. AppKit provides **blockchain** **transaction IDs**, which can be used for real-time monitoring and reconciliation.
  </Accordion>
</AccordionGroup>

### Integration & Support

<AccordionGroup>
  <Accordion title="How do we integrate this into our checkout or app flow?">
    Pay with Wallet is part of **AppKit Pay**, which includes components to handle wallet connection, transaction creation, and monitoring. Integration follows the standard AppKit SDK setup and works as a modal.
  </Accordion>

  <Accordion title="How long does a full integration typically take?">
    For developers already using AppKit, integration is estimated to take **less than a day**. New customers must first complete the AppKit SDK integration, which typically takes a few days depending on team setup.
  </Accordion>

  <Accordion title="What's your uptime guarantee?">
    Reown guarantees 99.9% uptime for paid customers, 90-day uptime can be found [here](https://status.reown.com/).

    Availability of a particular wallet will also depend on the wallet uptime.
  </Accordion>
</AccordionGroup>

### Pricing & Fees

<AccordionGroup>
  <Accordion title="What does it cost to use Pay with Wallet?">
    Reown uses a **tiered pricing model**, calculated on the USD value of processed payments. These fees are billed to Reown's customers monthly, and not applied to end users at the time of payment.
  </Accordion>

  <Accordion title="Are there overage fees or API rate limits?">
    Yes, if usage exceeds AppKit tier limits.
  </Accordion>

  <Accordion title="Who pays the network fees?">
    The **end user covers network fees**, they will be visible upon signing the transaction in the wallet.
  </Accordion>
</AccordionGroup>

### Strategic Benefits

<AccordionGroup>
  <Accordion title="Why should we offer 'Pay with Wallet' to our users?">
    * Reach **600+ wallets** and millions of users with one integration
    * Seamless UX for Ethereum, and other major networks
    * Pre-filled amount, network, asset removes **manual steps for users and** eliminates over/underpayment risk
  </Accordion>

  <Accordion title="Are there distinctive elements with your solution?">
    * **Cross-wallet support** without needing individual wallet SDKs
    * Real-time observability
    * Headless support for full UI control
  </Accordion>
</AccordionGroup>


# One-Click Auth (SIWE)
Source: https://docs.reown.com/appkit/react-native/core/1ca



## One-Click Auth

**One-Click Auth** represents a key advancement within WalletConnect v2, streamlining the user authentication process in AppKit by enabling them to seamlessly connect with a wallet and sign a SIWE message with just one click.

Connecting a wallet, proving control of an address with an off-chain signature, authorizing specific actions. These are the kinds of authorizations that can be encoded as ["ReCaps"](https://eips.ethereum.org/EIPS/eip-5573). ReCaps are permissions for a specific website or dapp that can be compactly encoded as a long string in the message you sign and translated by any wallet into a straight-forward one-sentence summary.
WalletConnect uses permissions expressed as ReCaps to enable a One-Click Authentication.

## Pre-requisites

In order for One-Click Auth to work, you need to meet the following requirements:

1. **Enable SIWX in your AppKit configuration** - One-Click Auth requires [SIWX (Sign In With X)](./siwx) to be enabled in your AppKit setup.

2. **Configure EVM chains only** - One-Click Auth currently supports EVM chains only. Make sure your AppKit [networks](./options#networks) configuration includes only EVM-compatible chains.

3. **Use [Reown Authentication](./reown-authentication) or set up a backend** - You need to have a backend to communicate with. This backend will be used to generate a nonce, verify messages and handle sessions.
   More info [here](https://docs.login.xyz/sign-in-with-ethereum/quickstart-guide/implement-the-backend)

### How It Works

When users connect their wallet with One-Click Auth enabled:

1. The connection and SIWE message sign are done in a single step
2. Your backend receives and verifies the signature
3. The user is authenticated and ready to use your app

## Related Documentation

* [Reown Authentication](/appkit/react-native/core/reown-authentication) - Required SIWX setup
* [SIWX Custom](/appkit/react-native/core/siwx-custom) - Advanced SIWX configuration options


# Components
Source: https://docs.reown.com/appkit/react-native/core/components



AppKit comes with a set of pre-built UI components to help you quickly integrate wallet connection and display functionalities into your React Native application. You can import them directly from `@reown/appkit-react-native`.

### `<AppKitButton />`

The `AppKitButton` is a versatile component that intelligently adapts its appearance and behavior based on the current connection status.

* When no wallet is connected, it functions as a "Connect Wallet" button.
* When a wallet is connected, it functions as an "Account" button, typically displaying account information and a disconnect option.

| Variable       | Description                                                 | Type               |
| -------------- | ----------------------------------------------------------- | ------------------ |
| `disabled`     | Enable or disable the button.                               | `boolean`          |
| `balance`      | Show or hide the user's balance.                            | `'show' \| 'hide'` |
| `size`         | Default size for the button.                                | `'md' \| 'sm'`     |
| `label`        | The text shown in the button (primarily when disconnected). | `string`           |
| `loadingLabel` | The text shown in the button when the modal is open.        | `string`           |

### `<AccountButton />`

This button is specifically designed to display when a user is connected. It typically shows account information and provides a way to disconnect or manage the connected account.

| Variable   | Description                      | Type               |
| ---------- | -------------------------------- | ------------------ |
| `disabled` | Enable or disable the button.    | `boolean`          |
| `balance`  | Show or hide the user's balance. | `'show' \| 'hide'` |

### `<ConnectButton />`

This button is primarily used to initiate the connection process when no user is connected.

| Variable       | Description                                          | Type           |
| -------------- | ---------------------------------------------------- | -------------- |
| `size`         | Default size for the button.                         | `'md' \| 'sm'` |
| `label`        | The text shown in the button.                        | `string`       |
| `loadingLabel` | The text shown in the button when the modal is open. | `string`       |

### `<NetworkButton />`

This button displays the currently active network of the connection. When pressed, it opens the network selection view within the AppKit modal, allowing users to switch networks.

| Variable   | Description                   | Type      |
| ---------- | ----------------------------- | --------- |
| `disabled` | Enable or disable the button. | `boolean` |


# Email & Socials
Source: https://docs.reown.com/appkit/react-native/core/email



AppKit enables passwordless Web3 onboarding and authentication, allowing your users interact with your application by creating a non-custodial wallet with just their emails or social network.

<Note>
  Due to Safari’s strict third-party cookie policies, the SDK is not preserving sessions after the app is closed. Our team is working to solve this issue soon.
</Note>

<Note>
  Email and social wallets currently support EVM chains only. Support for additional chains (Solana, Bitcoin) will be available soon.
</Note>

## Integration

### Update your Dashboard settings

1. Go to your [Dashboard](https://dashboard.reown.com) project
2. Open Dashboard and scroll down to Mobile Application IDs menu
3. Add your iOS Bundle ID and/or your Android Package Name

* Changes might take some minutes to impact

### Enable Email & Social Authentication

To enable email and social authentication in your AppKit configuration, add the `features` option to your `createAppKit` call:

```tsx {4-6} theme={null}
export const appKit = createAppKit({
  // other config...
  features: {
    email: true,
    socials: ['email', 'google', 'x', 'discord', 'apple', 'facebook', 'github', 'farcaster'],
    showWallets: true
  }
});
```

* ***email \[boolean]*** : This boolean defines whether you want to enable email login. Default `true`
* ***socials \[array]*** : This array contains the list of social platforms that you want to enable for user authentication. The platforms supported are Google, X, GitHub, Discord, Apple, Facebook and Farcaster. The default value of `undefined` displays everything. Set it to `false` to disable this feature. You can also pass an empty array to disable it.
* ***emailShowWallets \[boolean]*** : This boolean defines whether you want to show the wallet options on the first connect screen. If this is false and `socials` are enabled, it will show a button that directs you to a new screen displaying the wallet options. Default `true`

## User Flow

1. Users will be able to connect to you application by simply using an email address. AppKit will send to them a One Time Password (OTP) to copy and paste in the modal, which will help to
   verify the user's authenticity. This will create a non-custodial wallet for your user which will be available in any application that integrates AppKit and email login.

   * For Social options, the One Time Password (OTP) is not sent.

2. Eventually the user can optionally choose to move from a non-custodial wallet to a self-custodial one by pressing "Upgrade Wallet" on AppKit.
   This will open the *([Reown Secure Site](https://secure.reown.com/dashboard))* that will walk your user through the upgrading process.


# Hooks
Source: https://docs.reown.com/appkit/react-native/core/hooks



AppKit for React Native provides a set of hooks to interact with the wallet connection lifecycle, access connection state, and control the modal.

All hooks are imported from `@reown/appkit-react-native`.

## `useAppKit()`

The primary hook for controlling the modal's visibility and behavior. Use this hook when you need to programmatically open or close the modal, or when you want to show specific views like the connection screen or account details.

```typescript theme={null}
import { useAppKit } from '@reown/appkit-react-native';

export default function MyComponent() {
  const {
    // Modal Control
    open, // Function to open the modal, optionally with a specific view
    close, // Function to close the modal

    // Actions
    disconnect, // Function to disconnect the current session
    switchNetwork, // Function to switch to a different chain/network. Accepts an AppKitNetwork object or a CAIP network ID string (e.g., 'eip155:1')
  } = useAppKit();
}
```

### Use Cases

* Opening the modal when a user clicks a "Connect Wallet" button
* Closing the modal after a successful connection
* Opening specific views of the modal (e.g., account view, connect view)
* Disconnecting users from their wallets
* Switching between different blockchain networks

### Returns

* `open`: Function to open the modal
* `close`: Function to close the modal
* `disconnect`: Function to disconnect the current session
* `switchNetwork`: Function to switch to a different chain/network. Accepts an `AppKitNetwork` object or a CAIP network ID string (e.g., `'eip155:1'`)

### Parameters

You can direct the modal to open to a specific view using the `open` function:

```typescript theme={null}
open({ view: 'Account' }); // Opens to the account view if connected
open({ view: 'Connect' }); // Opens to the wallet selection view
open({ view: 'Networks' }); // Opens to the network selection view
```

Here is a list of possible views you can select:

| Variable         | Description                                                                                  |
| ---------------- | -------------------------------------------------------------------------------------------- |
| `Connect`        | Principal view of the modal - default view when disconnected.                                |
| `WalletConnect`  | View with a QR code to scan with wallets and connect via WalletConnect                       |
| `Account`        | User profile - default view when connected.                                                  |
| `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.                                                          |

**switchNetwork**

You can switch networks by passing either an `AppKitNetwork` object or a CAIP network ID string:

```typescript theme={null}
const { switchNetwork } = useAppKit();

// Using an AppKitNetwork object
switchNetwork(polygonNetwork);

// Using a CAIP network ID string
await switchNetwork('eip155:1'); // Ethereum Mainnet
await switchNetwork('eip155:137'); // Polygon
```

## `useAccount()`

The essential hook for accessing wallet connection state and user information. Use this hook whenever you need to know if a user is connected, get their wallet address, or access their account details.

```typescript theme={null}
import { useAccount } from '@reown/appkit-react-native';

export default function MyComponent() {
  const {
    allAccounts, // Account[], all connected accounts across all connections
    address, // String, the connected account address (e.g., '0x...', 'Sol...', 'bc1...')
    chainId, // Number or String, the chain ID of the currently active connection
    isConnected, // Boolean, true if a wallet is connected on the current chain/namespace
    namespace, // String, the active namespace (e.g., 'eip155', 'solana', 'bip122')
    chain // AppKitNetwork object with active chain information
  } = useAccount();

  if (isConnected) {
    return (
      <View>
        <Text>Connected to chain: {chainId}</Text>
        <Text>Namespace: {namespace}</Text>
        <Text>Chain: {chain?.name}</Text>
        <Text>Address: {address}</Text>
        <Text>Total accounts: {allAccounts.length}</Text>
      </View>
    );
  }
  return <Text>Not Connected</Text>;
}
```

### Use Cases

* Displaying the connected wallet address in your UI
* Checking if a user is connected before showing certain features
* Getting user information for authentication flows
* Handling multi-chain scenarios where you need account info for specific chains
* Implementing conditional rendering based on connection status
* Accessing the active blockchain namespace for chain-specific logic
* Getting detailed chain information for network-specific features

### Returns

* `allAccounts`: Array of all connected accounts across all connections. Each account includes `address`, `type`, and `namespace`. Accounts also include `caipAddress` (CAIP-10 format) and `chainId` when network information is available. (Account\[])
* `address`: The connected account address (string)
* `chainId`: The chain ID of the currently active connection (number or string)
* `isConnected`: Boolean indicating if a wallet is connected on the current chain/namespace
* `namespace`: The active namespace (string, e.g., 'eip155', 'solana', 'bip122')
* `chain`: The active chain object with detailed chain information (AppKitNetwork type)

The `Account` type has the following structure:

| Property      | Type           | Description                                                               |
| ------------- | -------------- | ------------------------------------------------------------------------- |
| `address`     | `string`       | The blockchain address of the account                                     |
| `namespace`   | `string`       | The blockchain namespace (e.g., 'eip155', 'solana', 'bip122')             |
| `chainId`     | `string`       | The chain ID where this account is active                                 |
| `type`        | `AccountType?` | Optional account type (e.g., 'eoa' or 'smartAccount')                     |
| `caipAddress` | `string?`      | CAIP-10 formatted address. Present when network information is available. |
| `publicKey`   | `string?`      | Bitcoin public key. Only present for Bitcoin (bip122) accounts.           |

## `useProvider()`

The provider access hook that provides access to the underlying chain-specific provider for the currently active connection. Use this hook when you need to perform direct interactions with the blockchain that go beyond the standard AppKit actions.

By default, `useProvider()` returns the provider for the currently active network.

```typescript theme={null}
import { useProvider, useAccount } from '@reown/appkit-react-native';

export default function ChainSpecificActions() {
  // Get provider for the current active network
  const { provider, providerType } = useProvider(); 

  const { chainId, address, isConnected } = useAccount();

  if (!isConnected || !provider) {
    return <p>Please connect your wallet.</p>;
  }

  const handleSignMessageEVM = async () => {
    if (providerType === 'eip155' && address) {
      console.log('EVM sign message functionality to be implemented using the provider.');
    }
  };

  const handleSignMessageSolana = async () => {
    if (providerType === 'solana' && address) {
      console.log('Solana sign message functionality to be implemented using the provider.');
    }
  };
  
  // Similar functions can be created for Bitcoin

  return (
    <div>
      <p>Current Chain ID: {chainId}</p>
      <p>Provider Type: {providerType || 'N/A'}</p>
      {providerType === 'eip155' && <button onClick={handleSignMessageEVM}>Sign EVM Message</button>}
      {providerType === 'solana' && <button onClick={handleSignMessageSolana}>Sign Solana Message</button>}
      {/* Add buttons for other provider types as needed */}
    </div>
  );
}
```

### Use Cases

* Accessing the wallet provider for direct blockchain interactions
* Signing transactions and messages with the connected wallet
* Integrating with blockchain-specific libraries (ethers, solana web3, etc.)
* Building custom wallet interactions across different chains
* Performing advanced blockchain operations not covered by AppKit's standard actions

### Returns

* `provider`: The underlying chain-specific provider for the currently active connection
* `providerType`: The type of provider (e.g., 'eip155', 'solana', 'bip122')

Refer to the example usage in:

* [EVM + Ethers](https://github.com/reown-com/appkit-react-native/blob/develop/apps/native/src/views/EthersActionsView.tsx)
* [EVM + Wagmi](https://github.com/reown-com/appkit-react-native/blob/develop/apps/native/src/views/WagmiActionsView.tsx)
* [Solana](https://github.com/reown-com/appkit-react-native/blob/develop/apps/native/src/views/SolanaActionsView.tsx)
* [Bitcoin](https://github.com/reown-com/appkit-react-native/blob/develop/apps/native/src/views/BitcoinActionsView.tsx)

## `useWalletInfo()`

The wallet information hook that provides details about the connected wallet. Use this hook when you need to display wallet-specific information, show wallet branding, or implement wallet-specific features.

```typescript theme={null}
import { useWalletInfo } from '@reown/appkit-react-native';

export default function WalletDetails() {
  const { walletInfo } = useWalletInfo();

  if (!walletInfo) {
    return <p>No wallet connected or info unavailable.</p>;
  }

  return (
    <div>
      <h3>Connected Wallet:</h3>
      <p>Name: {walletInfo.name}</p>
      <p>Icon: {walletInfo.icon && <img src={walletInfo.icon} alt={walletInfo.name} width="24" />}</p>
      {/* Refer to TypeUtil.ts for other walletInfo properties e.g., rdns, id etc. */}
    </div>
  );
}
```

### Use Cases

* Displaying wallet-specific information in your UI
* Implementing wallet-specific features
* Showing wallet icons or branding
* Handling wallet-specific behaviors
* Creating custom wallet selection interfaces

### Returns

* `walletInfo`: Object containing metadata about the connected wallet (name, icon, rdns, id, etc.)

<Note>
  The exact structure of `walletInfo` can be found in the `WalletInfo` type definition in [packages/common/src/utils/TypeUtil.ts](https://github.com/reown-com/appkit-react-native/blob/develop/packages/common/src/utils/TypeUtil.ts#L365).
</Note>

## `useAppKitEventSubscription()`

The event subscription hook that allows you to listen to modal and wallet events. Use this hook when you need to track user interactions, implement analytics, or respond to specific wallet events in your application.

```typescript theme={null}
import { useAppKitEventSubscription } from '@reown/appkit-react-native'; 

export default function EventLogger() {
  useAppKitEventSubscription('MODAL_OPEN', event => { console.log('Modal opened!', event); });

  useAppKitEventSubscription('CONNECT_SUCCESS', event => { console.log('Wallet connected!', event); });

  return null; 
}
```

### Use Cases

* Tracking user interactions with the modal
* Implementing analytics for wallet connections
* Creating custom notifications for connection events
* Handling specific wallet events in your application
* Monitoring connection state changes

### Parameters

* `eventType`: The specific event type to subscribe to (e.g., 'MODAL\_OPEN', 'CONNECT\_SUCCESS')
* `callback`: Function that is executed when the event is triggered

<Note>
  The full list of event types and their payloads can be found in `AppKitEvents` within [packages/core/src/utils/TypeUtil.ts](https://github.com/reown-com/appkit-react-native/blob/develop/packages/core/src/utils/TypeUtil.ts#L369).
</Note>

## `useAppKitState()`

The state management hook that provides real-time access to the modal's current state and connection status. Use this hook when you need to react to modal state changes or synchronize your UI with the modal's status.

```typescript theme={null}
import { useAppKitState } from '@reown/appkit-react-native';

export default function AppStatus() {
  const { 
    isOpen, // Boolean indicating if the modal is currently open
    isLoading, // Boolean indicating if the modal is loading
    isConnected, // Boolean indicating if a user is connected
    chain, // The connected chain object
  } = useAppKitState();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <p>Modal is {isOpen ? 'open' : 'closed'}</p>
      <p>User is {isConnected ? 'connected' : 'not connected'}</p>
      {chain && <p>Connected to: {chain.name}</p>}
    </div>
  );
}
```

### Use Cases

* Syncing your UI with the modal's open/closed state
* Creating custom UI elements that respond to modal state changes
* Implementing custom loading states based on modal state
* Checking connection status without accessing account details
* Displaying chain-specific UI based on the connected blockchain

### Returns

* `isOpen`: Boolean indicating if the modal is currently open
* `isLoading`: Boolean indicating if the modal is loading
* `isConnected`: Boolean indicating if a user is connected
* `chain`: The connected chain object

## `useAppKitTheme()`

The theme control hook that provides access to the modal's visual appearance settings. Use this hook when you need to dynamically change the theme mode or customize theme variables at runtime, such as implementing a dark/light mode toggle or matching the modal's appearance with your application's theme.

```typescript theme={null}
import { useAppKitTheme } from '@reown/appkit-react-native';

export default function ThemeControl() {
  const {
    themeMode, // 'dark' or 'light', the current theme mode
    themeVariables, // Current theme variables (e.g., { accent: '#00BB7F' })
    setThemeMode, // Function to change the theme mode
    setThemeVariables, // Function to update theme variables
  } = useAppKitTheme();

  return (
    <View>
      <Text>Current theme: {themeMode}</Text>
      <Button
        title="Toggle Theme"
        onPress={() => setThemeMode(themeMode === 'dark' ? 'light' : 'dark')}
      />
      <Button
        title="Set Accent Color"
        onPress={() => setThemeVariables({ accent: '#FF5733' })}
      />
      <Button
        title="Reset to System Theme"
        onPress={() => setThemeMode(undefined)}
      />
    </View>
  );
}
```

### Use Cases

* Implementing a dark/light mode toggle in your app
* Matching the modal's appearance with your application's theme
* Dynamically changing the accent color based on user preferences
* Resetting the theme to follow the system setting

### Returns

* `themeMode`: The current theme mode (`'dark'` or `'light'`)
* `themeVariables`: The current theme variables object
* `setThemeMode`: Function to set the theme mode. Pass `'dark'`, `'light'`, or `undefined` to revert to the system theme
* `setThemeVariables`: Function to update theme variables. Pass `undefined` or `{}` to clear custom variables

The following theme variables are currently supported:

| Variable | Description                                 | Type     |
| -------- | ------------------------------------------- | -------- |
| `accent` | Color used for buttons, icons, labels, etc. | `string` |

## `useAppKitLogs()`

The logging hook that provides access to AppKit's internal logging system. Use this hook when you need to debug your application, monitor AppKit's behavior, or export logs for troubleshooting purposes.

```typescript theme={null}
import { useAppKitLogs } from '@reown/appkit-react-native';

export default function DebugPanel() {
  const { 
    logs, // All logs from AppKit
    errorLogs, // Error-level logs only
    warningLogs, // Warning-level logs only
    infoLogs, // Info-level logs only
    debugLogs, // Debug-level logs only
    getLogsByLevel, // Get logs filtered by level
    getRecentLogs, // Get recent logs (default: 100)
    exportLogs, // Export all logs as JSON string
    getLogsStats, // Get logging statistics by level
    clearLogs, // Clear all logs
  } = useAppKitLogs();

  const handleExportLogs = () => {
    const logData = exportLogs();
    console.log('Exported logs:', logData);
  };

  return (
    <div>
      <p>Total logs: {logs.length}</p>
      <p>Error logs: {errorLogs.length}</p>
      <p>Warning logs: {warningLogs.length}</p>
      <button onClick={handleExportLogs}>Export Logs</button>
      <button onClick={clearLogs}>Clear Logs</button>
    </div>
  );
}
```

### Use Cases

* Debugging AppKit behavior and troubleshooting issues
* Monitoring application performance and error tracking
* Exporting logs for support or analysis purposes
* Building custom debugging interfaces for development
* Filtering logs by severity level or time range

### Returns

* `logs`: All logs from AppKit (array of LogEntry objects)
* `errorLogs`: Error-level logs only (array of LogEntry objects)
* `warningLogs`: Warning-level logs only (array of LogEntry objects)
* `infoLogs`: Info-level logs only (array of LogEntry objects)
* `debugLogs`: Debug-level logs only (array of LogEntry objects)
* `getLogsByLevel`: Function to get logs filtered by level (error, warn, info, debug)
* `getRecentLogs`: Function to get recent logs (default: 100, accepts count parameter)
* `exportLogs`: Function to export all logs as JSON string
* `getLogsStats`: Function to get logging statistics by level
* `clearLogs`: Function to clear all logs

<Note>
  This hook requires the `debug` option to be set to `true` in your AppKit configuration to capture logs. See the [Options](/appkit/react-native/core/options#debug) documentation for more details.
</Note>

## Deprecated Hooks

### `useDisconnect()`

The functionality of `useDisconnect` (which previously exposed a `disconnect` function) is now available directly from the `useAppKit()` hook.


# Installation
Source: https://docs.reown.com/appkit/react-native/core/installation



AppKit for React Native enables seamless integration with multiple blockchain ecosystems, including **EVM chains (like Ethereum, Polygon, etc.), Solana, and Bitcoin**. It provides a unified API to manage wallet connections, interact with different chains, and build rich multi-chain applications.

At the core of AppKit is a centralized `AppKit` instance that handles connection logic, manages various chain adapters, and provides data to your application via a React Context.

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

## Installation

### AppKit CLI

Get started quickly with our dedicated CLI that sets up a minimal AppKit configuration for you.

Run the command below and select React Native:

```bash theme={null}
npx @reown/appkit-cli
```

### Add AppKit to your existing project

Installation is a two-step process:

1. Install the core AppKit library.
2. Install the specific chain adapters you need for your application.

<Tabs>
  <Tab title="Expo">
    ### Core Library

    ```bash theme={null}
    npx expo install @reown/appkit-react-native @react-native-async-storage/async-storage react-native-get-random-values react-native-svg @react-native-community/netinfo @walletconnect/react-native-compat react-native-safe-area-context expo-application
    ```

    ### Create babel.config.js

    For Expo SDK 53 and later, you need to create a `babel.config.js` file in your project root to properly support the valtio library:

    ```js theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    module.exports = function (api) {
      api.cache(true);
      return {
        presets: [["babel-preset-expo", { unstable_transformImportMeta: true }]],
      };
    };
    ```

    This configuration enables the `unstable_transformImportMeta` option which is required for valtio to work correctly with Expo 53+.
  </Tab>

  <Tab title="React Native CLI">
    ### Core Library

    Install our core library and it's dependencies

    ```bash theme={null}
    npm install @reown/appkit-react-native @react-native-async-storage/async-storage react-native-get-random-values react-native-svg @react-native-community/netinfo @walletconnect/react-native-compat react-native-safe-area-context
    ```

    On iOS, use CocoaPods to add the native modules to your project:

    ```bash theme={null}
    npx pod-install
    ```
  </Tab>
</Tabs>

### Chain Adapters

<Note>For React Native CLI projects, use `npm install ...` or `yarn add ...`.</Note>

Install the adapters for the chains you intend to support:

<Tabs>
  <Tab title="EVM">
    <p>For EVM-compatible chains, you can choose between the Ethers.js-based adapter or the Wagmi-based adapter. You should install the one that best fits your project's existing setup or preference.</p>

    <Tabs>
      <Tab title="Ethers">
        <p>This adapter uses Ethers.js for interacting with EVM chains.</p>

        ```bash theme={null}
        npx expo install @reown/appkit-ethers-react-native
        ```

        <p>To initialize the Ethers adapter:</p>

        ```typescript theme={null}
        import { EthersAdapter } from '@reown/appkit-ethers-react-native';

        const ethersAdapter = new EthersAdapter();
        ```
      </Tab>

      <Tab title="Wagmi">
        <p>This adapter integrates with Wagmi for state management and EVM interactions. It requires a few more setup steps compared to the Ethers adapter.</p>

        <p><strong>1. Install Packages:</strong></p>
        <p>First, install the Reown Wagmi adapter and its peer dependencies:</p>

        <Warning>
          AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.
        </Warning>

        ```bash theme={null}
        # Install the Reown Wagmi adapter
        npx expo install @reown/appkit-wagmi-react-native

        # Install Wagmi and its required peer dependencies
        npx expo install wagmi viem@2.x @tanstack/react-query
        ```

        <Note>
          **Version Conflicts:** Wagmi internally installs multiple versions of viem and valtio which can cause conflicts. If you encounter errors, try overriding these versions in your `package.json` and re-install the dependencies:

          **NPM users:**

          ```json theme={null}
          "overrides": {
            "@walletconnect/universal-provider": "2.21.10", // use the latest version
            "viem": "2.x.x", // use latest version
            "valtio": "2.1.8"
          }
          ```

          **Yarn users:**

          ```json theme={null}
          "resolutions": {
            "@walletconnect/universal-provider": "2.21.10", // use the latest version
            "viem": "2.x.x", // use latest version
            "valtio": "2.1.8"
          }
          ```
        </Note>

        <p><strong>2. Configure Wagmi and Initialize Adapter:</strong></p>
        <p>The `WagmiAdapter` requires a Wagmi configuration object. You'll create this using `createConfig` from `wagmi` (we recommend aliasing it, e.g., to `createWagmiConfig`, if you also use `createConfig` from AppKit). This config, defining your chains and transports, is then passed to the `WagmiAdapter` during its initialization within your AppKit setup file (e.g., `src/AppKitConfig.ts`).</p>

        ```typescript theme={null}
        // src/AppKitConfig.ts (or wherever you configure AppKit)
        import "@walletconnect/react-native-compat"; // add this import before using appkit

        import { createAppKit } from '@reown/appkit-react-native';
        import { WagmiAdapter } from '@reown/appkit-wagmi-react-native';
        import { http, createConfig as createWagmiCoreConfig } from 'wagmi';
        import { mainnet, sepolia } from 'wagmi/chains'; // Or other chains you need
        // ... other adapter imports if any

        const projectId = 'YOUR_PROJECT_ID'; // Obtain from https://dashboard.reown.com/

        export const wagmiAdapter = new WagmiAdapter({
          projectId,
          networks: [mainnet, sepolia], // Add all chains you want to support
        });

        export const appKit = createAppKit({
          projectId,
          // Add your AppKitNetwork array for 'networks' matching the wagmiCoreConfig chains
          // networks: [mainnet, sepolia, ...],
          adapters: [wagmiAdapter, /* other adapters for other chain types */],
          // ... other AppKit options
        });
        ```

        <Note>Ensure the `networks` array in `AppKit` options includes the chains defined in `wagmiAdapter`.</Note>

        <p><strong>3. Set up Context Providers in App.tsx:</strong></p>
        <p>Wagmi requires its own context provider (`WagmiProvider`) and also relies on TanStack Query (`QueryClientProvider`). You'll need to wrap your application (or the relevant part of it) with these providers, in addition to the `AppKitProvider`. The `config` prop for `WagmiProvider` must be the `wagmiConfig` instance from your initialized `WagmiAdapter`. Refer to the official <a href="https://wagmi.sh/react/getting-started#wrap-app-in-context-provider">Wagmi documentation</a> for details on provider setup.</p>

        ```tsx theme={null}
        // App.tsx
        import "@walletconnect/react-native-compat";

        import React from 'react';
        import { appKit, wagmiAdapter } from './AppKitConfig'; // Your configured AppKit instance
        import { AppKitProvider } from '@reown/appkit-react-native';
        import YourAppRootComponent from './YourAppRootComponent'; // Your main app component

        import { WagmiProvider } from 'wagmi';
        import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

        const queryClient = new QueryClient();

        function App() {
          return (
            <AppKitProvider instance={appKit}>
              <WagmiProvider config={wagmiAdapter.wagmiConfig}>
                <QueryClientProvider client={queryClient}>
                  <YourAppRootComponent />
                </QueryClientProvider>
              </WagmiProvider>
            </AppKitProvider>
          );
        }

        export default App;
        ```

        <p>For a practical implementation example, you can refer to the <a href="https://github.com/reown-com/appkit-react-native/blob/develop/apps/native/App.tsx">Reown AppKit + Wagmi example on GitHub</a>.</p>
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Solana">
    <Warning>
      MetaMask does not currently support WalletConnect connections on Solana. The MetaMask team is working on adding this feature. In the meantime, we recommend using other wallets that support Solana. You can find the complete list of supported wallets on [WalletGuide](https://walletguide.walletconnect.network/).
    </Warning>

    <p>For Solana, install the Solana adapter:</p>

    ```bash theme={null}
    npx expo install @reown/appkit-solana-react-native text-encoding
    ```

    <p>To initialize the Solana adapter:</p>

    ```typescript theme={null}
    import 'text-encoding'; // needed for @solana/web3.js to work
    import '@walletconnect/react-native-compat';

    import { SolanaAdapter } from '@reown/appkit-solana-react-native';

    const solanaAdapter = new SolanaAdapter();
    ```
  </Tab>

  <Tab title="Bitcoin">
    <p>For Bitcoin, install the Bitcoin adapter:</p>

    ```bash theme={null}
    npx expo install @reown/appkit-bitcoin-react-native
    ```

    <p>To initialize the Bitcoin adapter:</p>

    ```typescript theme={null}
    import { BitcoinAdapter } from '@reown/appkit-bitcoin-react-native';

    const bitcoinAdapter = new BitcoinAdapter();
    ```
  </Tab>
</Tabs>

## Implementation

### Prerequisites

Before setting up AppKit, you need to wrap your app with `SafeAreaProvider` from `react-native-safe-area-context`. This is required for proper modal rendering and safe area handling.

<Note>**Expo users**: You can skip this step as it's already handled internally by Expo.</Note>

```tsx theme={null}
import { SafeAreaProvider } from 'react-native-safe-area-context'

function App() {
  return <SafeAreaProvider>{/* Your app content */}</SafeAreaProvider>
}
```

For more detailed information about `SafeAreaProvider`, check the [official documentation](https://appandflow.github.io/react-native-safe-area-context/api/safe-area-provider).

### 1. Initialize AppKit

Create an instance of `AppKit`. This is where you'll configure your project ID (if using WalletConnect features) and define the chains your application will support, along with their respective adapters.

<Note>
  To ensure proper functioning with React Native, make sure `import
      "@walletconnect/react-native-compat";` is the very first line in your configuration file (e.g.,
  `AppKitConfig.ts`), even before other imports. This import handles necessary polyfills.
</Note>

```typescript theme={null}
// src/AppKitConfig.ts (or wherever you prefer to configure it)
import '@walletconnect/react-native-compat'

import { createAppKit, bitcoin, solana, type AppKitNetwork } from '@reown/appkit-react-native'
import { EthersAdapter } from '@reown/appkit-ethers-react-native'
import { SolanaAdapter } from '@reown/appkit-solana-react-native'
import { BitcoinAdapter } from '@reown/appkit-bitcoin-react-native'

// You can use 'viem/chains' or define your own chains using `AppKitNetwork` type. Check Options/networks for more detailed info
import { mainnet, polygon } from 'viem/chains'

const projectId = 'YOUR_PROJECT_ID' // Obtain from https://dashboard.reown.com/

const ethersAdapter = new EthersAdapter()
const solanaAdapter = new SolanaAdapter()
const bitcoinAdapter = new BitcoinAdapter()

export const appKit = createAppKit({
  projectId,
  networks: [mainnet, polygon, solana, bitcoin],
  defaultNetwork: mainnet, // Optional: set a default network
  adapters: [ethersAdapter, solanaAdapter, bitcoinAdapter],

  // Other AppKit options (e.g., metadata for your dApp)
  metadata: {
    name: 'My Awesome dApp',
    description: 'My dApp description',
    url: 'https://myapp.com',
    icons: ['https://myapp.com/icon.png'],
    redirect: {
      native: 'YOUR_APP_SCHEME://',
      universal: 'YOUR_APP_UNIVERSAL_LINK.com'
    }
  }
})
```

<Note>
  **Default Features:** AppKit comes with email and social login, swaps, and onramp features enabled
  by default. To disable any of these features, see the [Options](./options) documentation for
  configuration details.
</Note>

### 2. Configure Storage

For data to persist across sessions, you need to provide a storage solution. The `createAppKit` function accepts a `storage` option that must conform to the `Storage` interface.

The `Storage` interface, which can be imported from `@reown/appkit-react-native`, is defined as follows:

```typescript theme={null}
export interface Storage {
  /**
   * Returns all keys in storage.
   */
  getKeys(): Promise<string[]>

  /**
   * Returns all key-value entries in storage.
   */
  getEntries<T = any>(): Promise<[string, T][]>

  /**
   * Get an item from storage for a given key.
   * @param key The key to retrieve.
   */
  getItem<T = any>(key: string): Promise<T | undefined>

  /**
   * Set an item in storage for a given key.
   * @param key The key to set.
   * @param value The value to set.
   */
  setItem<T = any>(key: string, value: T): Promise<void>

  /**
   * Remove an item from storage for a given key.
   * @param key The key to remove.
   */
  removeItem(key: string): Promise<void>
}
```

For complete storage implementation examples, see the [Storage Options](./options#storage) documentation.

**Update AppKit Configuration**

Finally, import your custom storage and pass it to `createAppKit` in your `AppKitConfig.ts`. This example builds on the configuration from [Initialize AppKit](#1-initialize-appkit):

```typescript {8,24} theme={null}
// src/AppKitConfig.ts (or wherever you prefer to configure it)
import '@walletconnect/react-native-compat'

import { createAppKit, bitcoin, solana, type AppKitNetwork } from '@reown/appkit-react-native'
import { EthersAdapter } from '@reown/appkit-ethers-react-native'
import { SolanaAdapter } from '@reown/appkit-solana-react-native'
import { BitcoinAdapter } from '@reown/appkit-bitcoin-react-native'
import { storage } from './StorageUtil' // Import your custom storage

// You can use 'viem/chains' or define your own chains using `AppKitNetwork` type. Check Options/networks for more detailed info
import { mainnet, polygon } from 'viem/chains'

const projectId = 'YOUR_PROJECT_ID' // Obtain from https://dashboard.reown.com/

const ethersAdapter = new EthersAdapter()
const solanaAdapter = new SolanaAdapter()
const bitcoinAdapter = new BitcoinAdapter()

export const appKit = createAppKit({
  projectId,
  networks: [mainnet, polygon, solana, bitcoin],
  defaultNetwork: mainnet,
  adapters: [ethersAdapter, solanaAdapter, bitcoinAdapter],
  storage,

  // Other AppKit options (e.g., metadata for your dApp)
  metadata: {
    name: 'My Awesome dApp',
    description: 'My dApp description',
    url: 'https://myapp.com',
    icons: ['https://myapp.com/icon.png'],
    redirect: {
      native: 'YOUR_APP_SCHEME://',
      universal: 'YOUR_APP_UNIVERSAL_LINK.com'
    }
  }
})
```

### 3. Provide AppKit Instance

Wrap your application with the `AppKitProvider` to make the `AppKit` instance available throughout your component tree via context.

```tsx {6,13,15} theme={null}
// App.tsx
import '@walletconnect/react-native-compat'

import React from 'react'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { AppKitProvider } from '@reown/appkit-react-native'
import { appKit } from './AppKitConfig' // Your configured AppKit instance
import YourAppRootComponent from './YourAppRootComponent'

function App() {
  return (
    <SafeAreaProvider>
      <AppKitProvider instance={appKit}>
        <YourAppRootComponent />
      </AppKitProvider>
    </SafeAreaProvider>
  )
}

export default App
```

### 4. Render AppKit UI

To display the AppKit modal and other potential UI elements, you need to include the `<AppKit />` component in your application. If you want the modal to be accessible from anywhere in your app, it's best to place this component within your main application root component (e.g., the `YourAppRootComponent` from the example above, or directly in `App.tsx` if it serves as your main layout).

```tsx {3,11} theme={null}
// YourAppRootComponent.tsx (or App.tsx if it contains your main layout)
import React from 'react'
import { AppKit } from '@reown/appkit-react-native'
// ... other imports for your app components.

function YourAppRootComponent() {
  return (
    <>
      {/* Your application's content */}
      {/* Add the AppKit component here to render its UI */}
      <AppKit />
    </>
  )
}

export default YourAppRootComponent
```

<Note>
  **Expo Android Modal Issue**: If you're using Expo Router and the modal doesn't open on Android, you may need to wrap the `<AppKit />` component in a View with absolute positioning. Here's the workaround:

  ```tsx theme={null}
  import { View } from 'react-native'

  // Replace the simple <AppKit /> with:
  ;<View style={{ position: 'absolute', height: '100%', width: '100%' }}>
    <AppKit />
  </View>
  ```

  This is a known issue with Expo Router on Android and this workaround resolves the modal rendering problem.
</Note>

### 5. Using AppKit in Components

You can now access AppKit functionalities (like connecting, getting account state, etc.) using hooks provided by the library.

```tsx {2,5,6} theme={null}
// components/ConnectButton.tsx
import { useAppKit, useAccount } from '@reown/appkit-react-native'

function ConnectButton() {
  const { open, disconnect } = useAppKit()
  const { address, isConnected, chainId } = useAccount()

  if (isConnected) {
    return (
      <div>
        <p>Connected to: {chainId}</p>
        <p>Address: {address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    )
  }

  return <button onClick={() => open()}>Connect Wallet</button>
}

export default ConnectButton
```

For detailed examples on specific actions like signing messages, sending transactions, or switching networks, please refer to the [Hooks](./hooks#useprovider) and [Examples](#examples) sections.

**Pre-built Components**

AppKit includes pre-built components to speed up your development:

* `<AppKitButton />` - A pre-styled connect button
* `<AppKitAccountButton />` - A button showing account information when connected

For detailed information about all available components, hooks, and examples for specific actions like signing messages, sending transactions, or switching networks, see the [Components](./components), [Hooks](./hooks), and [Examples](#examples) documentation.

## Enable Wallet Detection

<Info>
  **Optional feature** - This detects wallets installed on the user's device and enhances the user experience by:

  * Showing a green checkmark next to installed wallets
  * Prioritizing installed wallets at the top of the wallet selection list

  All 600+ wallets in the AppKit ecosystem work via WalletConnect protocol regardless of this configuration. You only need to add the wallets your users most commonly have installed.
</Info>

To enable AppKit to detect wallets installed on the device, you can make specific changes to the native code of your project.

<Tabs>
  <Tab title="Expo">
    <Tabs>
      <Tab title="iOS">
        To enable AppKit to detect wallets installed on the device in your Expo project for iOS, follow these steps:

        1. Open your `app.json` (or `app.config.js`) file.
        2. Locate the ios section within the configuration.
        3. Add the `infoPlist` object if it doesn't exist, and within it, include the `LSApplicationQueriesSchemes` array. This array will contain the desired wallet schemes you want to detect.
        4. Add the wallet schemes to the `LSApplicationQueriesSchemes` array.

        Your configuration should look like this:

        ```js {4-13} theme={null}
        {
          "expo": {
            "ios": {
              "infoPlist": {
                "LSApplicationQueriesSchemes": [
                  "metamask",
                  "trust",
                  "safe",
                  "rainbow",
                  "uniswap"
                  // Add other wallet schemes names here
                ]
              }
            }
          }
        }
        ```
      </Tab>

      <Tab title="Android">
        To enable AppKit to detect wallets installed on the device in your Expo project for Android, follow these steps:

        1. Open your `app.json` (or `app.config.js`) file.
        2. Locate the plugins section within the configuration.
        3. Add `queries.js` in the plugins array:

        ```js {4} theme={null}
        {
          "plugins": [
            // other plugins,
            "./queries.js"
          ],
        }
        ```

        4. Create the file `queries.js`:

        ```js theme={null}
        // based on https://github.com/expo/config-plugins/issues/123#issuecomment-1746757954

        const { AndroidConfig, withAndroidManifest, createRunOncePlugin } = require('expo/config-plugins')

        const queries = {
          package: [
            { $: { 'android:name': 'com.wallet.crypto.trustapp' } },
            { $: { 'android:name': 'io.metamask' } },
            { $: { 'android:name': 'me.rainbow' } },
            { $: { 'android:name': 'io.zerion.android' } },
            { $: { 'android:name': 'io.gnosis.safe' } },
            { $: { 'android:name': 'com.uniswap.mobile' } }
            // Add other wallet package names here
          ]
        }

        /**
         * @param {import('@expo/config-plugins').ExportedConfig} config
         */
        const withAndroidManifestService = config => {
          return withAndroidManifest(config, config => {
            config.modResults.manifest = {
              ...config.modResults.manifest,
              queries
            }

            return config
          })
        }

        module.exports = createRunOncePlugin(
          withAndroidManifestService,
          'withAndroidManifestService',
          '1.0.0'
        )
        ```

        5. Add the wallet package names you want to be detected by your app.
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="React Native CLI">
    <Tabs>
      <Tab title="iOS">
        1. Open your `Info.plist` file.
        2. Locate the `<key>LSApplicationQueriesSchemes</key>` section.
        3. Add the desired wallet schemes as string entries within the `<array>`. These schemes represent the wallets you want to detect.
        4. Refer to our [Info.plist example file](https://github.com/reown-com/react-native-examples/blob/main/dapps/W3MEthers/ios/Web3ModalEthers/Info.plist#L38) for a detailed illustration.

        Example:

        ```xml theme={null}
        <key>LSApplicationQueriesSchemes</key>
        <array>
          <string>metamask</string>
          <string>trust</string>
          <string>safe</string>
          <string>rainbow</string>
          <string>uniswap</string>
          <!-- Add other wallet schemes names here -->
        </array>
        ```
      </Tab>

      <Tab title="Android">
        1. Open your `AndroidManifest.xml` file.
        2. Locate the `<queries>` section.
        3. Add the desired wallet package names as `<package>` entries within the `<queries>`. These package names correspond to the wallets you want to detect.
        4. Refer to our [AndroidManifest.xml example file](https://github.com/reown-com/react-native-examples/blob/main/dapps/W3MEthers/android/app/src/main/AndroidManifest.xml#L4) for detailed guidance.

        Example:

        ```xml theme={null}
        <queries>
          <package android:name="io.metamask"/>
          <package android:name="com.wallet.crypto.trustapp"/>
          <package android:name="io.gnosis.safe"/>
          <package android:name="me.rainbow"/>
          <!-- Add other wallet package names here -->
        </queries>
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Connectors

<Info>
  **Optional feature** - These connectors are only needed if you want to support specific wallets
  that use custom connection protocols. All 600+ wallets in the AppKit ecosystem work via
  WalletConnect protocol regardless of this configuration.
</Info>

AppKit supports various custom connectors for specific wallets that use their own connection protocols. These connectors allow you to integrate popular wallets like Coinbase and Phantom directly into your AppKit configuration.

### Coinbase

<Warning>
  The new **Base Wallet** (formerly Coinbase Wallet) does not currently support the Coinbase Mobile Wallet SDK used by this connector. This means the Coinbase connector **will not work with Base Wallet** until the Base team adds support for the SDK on their end. This is a known limitation on the Base/Coinbase side and not an issue with AppKit. We will update this documentation once the Base team implements SDK compatibility.
</Warning>

Coinbase Wallet is a popular wallet that uses a custom connection protocol. To enable it in your AppKit configuration, you'll need to install the Coinbase SDK and add a specific connector.

<Note>
  **Expo Compatibility:** Coinbase SDK works with [Expo
  Prebuild](https://docs.expo.dev/workflow/prebuild/) but not with Expo Go. You'll need to use `expo
      prebuild` to generate native code before building your app.
</Note>

To enable Coinbase Wallet, follow these steps:

1. Enable Expo Modules in your project:

```
npx install-expo-modules@latest
```

2. Install the Coinbase SDK and our custom connector:

```
yarn add @coinbase/wallet-mobile-sdk @reown/appkit-coinbase-react-native react-native-mmkv
```

3. Run pod-install:

```
npx pod-install
```

4. Set up deeplink handling in your project following the [React Native docs](https://reactnative.dev/docs/linking?syntax=ios#enabling-deep-links)

5. Add Coinbase package configuration to your native files:

```xml theme={null}
// AndroidManifest.xml

<queries>
  <!-- other queries -->
  <package android:name="org.toshi" />
</queries>
```

```xml theme={null}
// Info.plist

<key>LSApplicationQueriesSchemes</key>
<array>
  <!-- other schemes -->
  <string>cbwallet</string>
</array>
```

6. Add the custom connector to your `extraConnectors`:

```typescript {5-6,10} theme={null}
// src/AppKitConfig.ts (or wherever you prefer to configure it)
import '@walletconnect/react-native-compat'

import { createAppKit } from '@reown/appkit-react-native'
import { MMKV } from 'react-native-mmkv'
import { CoinbaseConnector } from '@reown/appkit-coinbase-react-native'

export const appKit = createAppKit({
  // ...
  extraConnectors: [new CoinbaseConnector({ storage: new MMKV() })]
  // ...
})
```

7. Add the Coinbase response handler to process wallet responses:

```tsx theme={null}
import { handleResponse } from '@coinbase/wallet-mobile-sdk'

// Add this to your app's deeplink handling code
useEffect(() => {
  const sub = Linking.addEventListener('url', ({ url }) => {
    const handledBySdk = handleResponse(new URL(url))
    if (!handledBySdk) {
      // Handle other deeplinks
    }
  })

  return () => sub.remove()
}, [])
```

For more detailed information, check the [Coinbase docs](https://mobilewalletprotocol.github.io/wallet-mobile-sdk/docs/client-sdk/rn-install).

### Phantom & Solflare

Phantom and Solflare are popular wallets on the Solana blockchain. Because they use a custom connection protocol, it requires a specific connector to be added to your AppKit configuration.

To enable Phantom Wallet, you'll need to import the `PhantomConnector` or `SolflareConnector` from `@reown/appkit-solana-react-native` and add it to the `extraConnectors` array in your `createAppKit` configuration.

Here's how to update your `AppKitConfig.ts` file, using the example from the [Implementation](#1-initialize-appkit) section as a base:

```typescript {5,9-12} theme={null}
// src/AppKitConfig.ts (or wherever you prefer to configure it)
import '@walletconnect/react-native-compat'

import { createAppKit } from '@reown/appkit-react-native'
import { SolanaAdapter, PhantomConnector, SolflareConnector } from '@reown/appkit-solana-react-native'

export const appKit = createAppKit({
  // ...
  extraConnectors: [
    new PhantomConnector({ cluster: 'mainnet-beta' }), // Or 'devnet', 'testnet'
    new SolflareConnector({ cluster: 'mainnet-beta' }) // Or 'devnet', 'testnet'
  ]
  // ...
})
```

<Note>
  The `cluster` option can be set to `'mainnet-beta'`, `'devnet'`, or `'testnet'` depending on which
  Solana cluster you want to connect to.
</Note>

## Examples

<Tabs>
  <Tab title="Wagmi">
    <Card title="AppKit with Wagmi example" icon="github" href="https://github.com/reown-com/react-native-examples/tree/main/dapps/appkit-wagmi">
      Check the React Native example using Wagmi
    </Card>
  </Tab>

  <Tab title="Ethers">
    <Card title="AppKit with Ethers example" icon="github" href="https://github.com/reown-com/react-native-examples/tree/main/dapps/W3MEthers">
      Check the React Native example using Ethers
    </Card>
  </Tab>

  <Tab title="Ethers v5">
    <Card title="AppKit with Ethers v5 example" icon="github" href="https://github.com/reown-com/react-native-examples/tree/main/dapps/W3MEthers5">
      Check the React Native example using Ethers v5
    </Card>
  </Tab>
</Tabs>

## Test Apps

Want to see AppKit in action? Download our sample AppKit apps below and explore what it can do. Enjoy! 😊

* [Android Build (Firebase)](https://appdistribution.firebase.google.com/pub/i/0297fbd3de8f1e3f)
* [iOS Build (Testflight)](https://testflight.apple.com/join/YW2jD2s0)

## Getting Support 🙋

Reown is committed to delivering the best developer experience.

If you have any questions, feature requests, or bug reports, feel free to open an issue on [GitHub](https://github.com/reown-com/appkit-react-native)


# Link Mode
Source: https://docs.reown.com/appkit/react-native/core/link-mode



AppKit Link Mode is a low latency mechanism for transporting One-Click Auth requests and session requests over universal links, reducing the need for a WebSocket connection with the Relay. This significantly enhances the user experience when connecting native dApps to native wallets by reducing the latency associated with networking connections, especially when the user has an unstable internet connection.

<Frame>
  <video />
</Frame>

<Warning>
  For Link Mode to fully work, you also need to enable the [One-Click Auth (SIWE)](./1ca) feature.

  This feature is compatible only with EVM blockchains, so if you decide to include non-EVM blockchains Link Mode mechanism is going to be disabled internally.
</Warning>

### How to enable it:

To support link mode, configure your Metadata with a **valid universal link** and set the `linkMode` property to `true`:

```ts {8,9} theme={null}
const metadata = {
  name: "AppKit App",
  description: "AppKit for React Native",
  url: "https://reown.com",
  icons: ["https://avatars.githubusercontent.com/u/179229932"],
  redirect: {
    native: "YOUR_APP_SCHEME://",
    universal: "https://example.com/example_dapp",
    linkMode: true,
  },
};
```

### How does it look without Link Mode?

<Frame>
  <video />
</Frame>

### Platform specifics:

<Tabs>
  <Tab title="iOS">
    To enable universal links for your app, refer to [React Native Documentation](https://reactnative.dev/docs/linking?syntax=ios#enabling-deep-links).<br />

    After following the steps provided in the official guide:

    1. Ensure that you handle incoming Universal Links in the your `AppDelegate.mm` file.

    ```swift theme={null}
    #import <React/RCTLinkingManager.h>

    // Enable deeplinks
    - (BOOL)application:(UIApplication *)application
       openURL:(NSURL *)url
       options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
    {
      return [RCTLinkingManager application:application openURL:url options:options];
    }

    // Enable Universal Links
    - (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
     restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
    {
     return [RCTLinkingManager application:application
                      continueUserActivity:userActivity
                        restorationHandler:restorationHandler];
    }
    ```

    2. Open your project in XCode and go to `Settings/Signing & Capabilities/Associated Domains` to add the new domain. After this, `your_project.entitlement` should look like this:

    ```xml theme={null}
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
      <key>com.apple.developer.associated-domains</key>
      <array>
        <string>applinks:example.com</string>
      </array>
    </dict>
    </plist>
    ```

    3. Update/Create your domain's `.well-known/apple-app-site-association` file accordingly.

    For more information about supporting universal links, visit the [Supporting associated domains](https://developer.apple.com/documentation/xcode/supporting-associated-domains?language=objc) page

    For a debugging guide, visit the [Debugging Universal Links](https://developer.apple.com/documentation/technotes/tn3155-debugging-universal-links) page.<br />
  </Tab>

  <Tab title="Android">
    Android Studio provides a tool to configure Universal Links easily, you can read the guide in [Android Documentation](https://developer.android.com/studio/write/app-link-indexing)

    After following the steps provided in the guide:

    1. Ensure that your Universal Link is properly configured in your app's `AndroidManifest.xml` file with the `autoVerify` set to `true`. It should look similar to this:

    ```xml theme={null}
    <intent-filter android:autoVerify="true">
      <action android:name="android.intent.action.VIEW" />

      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />

      <data android:scheme="https" />
      <data android:host="example.com" />
      <data android:pathPattern="/example_wallet" />
    </intent-filter>
    ```

    2. Update/Create your domains's `.well-known/assetlinks.json` file accordingly

    For more information on how to configure universal links for your app, refer to [Android Documentation](https://developer.android.com/studio/write/app-link-indexing).<br />
    For testing the configured universal link to app content check [this](https://developer.android.com/training/app-links/deep-linking#testing-filters) documentation page.<br />
  </Tab>
</Tabs>

Once everything is properly configured, and the user connects with a Link Mode-supporting wallet using One-Click Auth, your dapp will send requests through it.


# Migrate to Multichain
Source: https://docs.reown.com/appkit/react-native/core/migration-multichain

A guide to help you migrate your existing Reown AppKit React Native integration to the new multichain version.

This guide will walk you through the necessary steps to update your existing Reown AppKit React Native integration to the latest multichain version. The new version introduces a more flexible and powerful architecture, centered around a core AppKit library and distinct chain-specific adapters.

## Key Changes at a Glance

Before diving into the specific steps, here's a high-level overview of the most significant changes:

* **Core Library & Adapters:** Instead of using monolithic, EVM-specific packages like `@reown/appkit-wagmi-react-native` or `@reown/appkit-ethers-react-native` as your primary entry point, you will now use a core package `@reown/appkit-react-native`. Chain-specific logic for **EVM (Ethers, Wagmi), Solana, Bitcoin**, and potentially other chains is handled by separate, installable adapter packages (e.g., `@reown/appkit-ethers-react-native`, `@reown/appkit-solana-react-native`).
* **Centralized Logic:** The new `appkit` instance (initialized via `createAppKit`) becomes the central hub for managing connections, adapters, and events across multiple chains.
* **Unified Hooks & Components:** Hooks and UI components are now consistently imported from the core `@reown/appkit-react-native` package.

## 1. Dependency Updates

Your first step is to update your project's dependencies.

### a. Remove Old Packages (If Applicable)

If you were previously using older, specific AppKit packages like `@web3modal/*` or potentially differently named predecessors to `@reown/appkit-*-react-native`, you should remove them. The primary packages to focus on now are `@reown/appkit-react-native` and the new chain adapters.

### b. Install Core Package & Polyfills/Helpers

Install the main AppKit library along with essential peer dependencies for React Native:

```bash theme={null}
# For Expo projects
npx expo install @reown/appkit-react-native @react-native-async-storage/async-storage react-native-get-random-values react-native-svg @react-native-community/netinfo @walletconnect/react-native-compat expo-application

# For React Native CLI projects
npm install @reown/appkit-react-native @react-native-async-storage/async-storage react-native-get-random-values react-native-svg @react-native-community/netinfo @walletconnect/react-native-compat
# or
yarn add @reown/appkit-react-native @react-native-async-storage/async-storage react-native-get-random-values react-native-svg @react-native-community/netinfo @walletconnect/react-native-compat
```

Then, for iOS in React Native CLI projects:

```bash theme={null}
npx pod-install
```

### c. Install Chain Adapter Packages

Based on the blockchains your dApp needs to support, install the corresponding adapter packages. Here are the primary ones:

* **EVM (Ethers):**
  ```bash theme={null}
  # For Expo
  npx expo install @reown/appkit-ethers-react-native
  # For RN CLI
  # npm install @reown/appkit-ethers-react-native
  # yarn add @reown/appkit-ethers-react-native
  ```
* **EVM (Wagmi):**

  <Warning>
    AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.
  </Warning>

  ```bash theme={null}
  # For Expo
  npx expo install @reown/appkit-wagmi-react-native wagmi viem@2.x @tanstack/react-query
  # For RN CLI
  # npm install @reown/appkit-wagmi-react-native wagmi viem@2.x @tanstack/react-query
  # yarn add @reown/appkit-wagmi-react-native wagmi viem@2.x @tanstack/react-query
  ```
* **Solana:**
  ```bash theme={null}
  # For Expo
  npx expo install @reown/appkit-solana-react-native
  # For RN CLI
  # npm install @reown/appkit-solana-react-native
  # yarn add @reown/appkit-solana-react-native
  ```
* **Bitcoin:**
  ```bash theme={null}
  # For Expo
  npx expo install @reown/appkit-bitcoin-react-native
  # For RN CLI
  # npm install @reown/appkit-bitcoin-react-native
  # yarn add @reown/appkit-bitcoin-react-native
  ```

<Note>
  The package names for adapters like `@reown/appkit-ethers-react-native` and `@reown/appkit-wagmi-react-native` are the same as some older, more monolithic packages. The key difference is how they are used (as pluggable adapters into the core `@reown/appkit-react-native`).
</Note>

## 2. Crucial Polyfill Import

To ensure proper functioning, especially for WalletConnect features within React Native, the `@walletconnect/react-native-compat` package must be imported at the very beginning of your application's entry point or your AppKit configuration file.

```typescript theme={null}
// App.tsx or your AppKitConfig.ts
import "@walletconnect/react-native-compat"; // MUST BE THE VERY FIRST IMPORT

// ... other imports like React, createAppKit, adapters, etc.
```

This step is critical for avoiding runtime errors related to missing polyfills.

## 3. AppKit Initialization (`createAppKit`)

The way you initialize AppKit has changed significantly to support the new adapter-based architecture.

### Old Implementation

Previously, for an EVM setup with Wagmi, you might have done something like this

```typescript theme={null}
// Old implementation
import { createAppKit, defaultWagmiConfig } from "@reown/appkit-wagmi-react-native";
import { mainnet, polygon } from "@wagmi/chains";

const projectId = "YOUR_PROJECT_ID";
const metadata = { /* ... */ };
const chains = [mainnet, polygon];

const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });

const appKitInstance = createAppKit({
  wagmiConfig,
  projectId,
  metadata,
  // ... other options
});
```

### New Multichain Implementation

With the new version, you initialize adapters first and then pass them to `createAppKit` from the core `@reown/appkit-react-native` package.

```typescript theme={null}
// New approach: src/AppKitConfig.ts (or your preferred file)
import "@walletconnect/react-native-compat"; // Ensure this is the first import

import { createAppKit, type AppKitNetwork } from "@reown/appkit-react-native";
import { EthersAdapter } from "@reown/appkit-ethers-react-native";
import { SolanaAdapter } from "@reown/appkit-solana-react-native";
import { BitcoinAdapter } from "@reown/appkit-bitcoin-react-native";
import { WagmiAdapter } from "@reown/appkit-wagmi-react-native";

// Import chain definitions (examples)
import { mainnet, polygon } from "viem/chains"; // For EVM
import { solana, bitcoin } from "@reown/appkit-react-native"; // Pre-defined AppKitNetwork objects

const projectId = "YOUR_PROJECT_ID"; // Obtain from https://dashboard.reown.com/

const metadata = { /* ... */ };

// 1. Define your AppKitNetworks (for AppKit's UI and network management)
// These can come from viem/chains (for EVM) or be custom AppKitNetwork objects.
const appNetworks: AppKitNetwork[] = [
  mainnet, // viem chains are automatically compatible as AppKitNetwork for 'eip155'
  polygon,
  solana,
  bitcoin,
  // You can also define custom AppKitNetwork objects here
];

// 2. Initialize Adapters for the chains you want to support
// For EVM chains, choose ONE of the following adapters (EthersAdapter or WagmiAdapter):

// Option A: EthersAdapter for general EVM support
const ethersAdapter = new EthersAdapter();

// Option B: WagmiAdapter if you are using Wagmi for EVM state management
const wagmiEvmNetworks = [viemMainnet, viemPolygon]; // Subset of appNetworks or specific Wagmi chains
const wagmiAdapter = new WagmiAdapter({
  projectId,
  networks: [mainnet, polygon], // These are Wagmi/viem chain objects
});

// Initialize adapters for other chains as needed
const solanaAdapter = new SolanaAdapter();
const bitcoinAdapter = new BitcoinAdapter();

// 3. Create the AppKit instance
// In this example, we'll use EthersAdapter for EVM chains.
// If you chose WagmiAdapter, replace ethersAdapter with wagmiAdapter below.
export const appKit = createAppKit({
  projectId,
  metadata,
  networks: appNetworks, // Master list of networks for AppKit UI and context
  adapters: [
    ethersAdapter,  // Handles EVM chains defined in 'networks'
    // wagmiAdapter, // Or use this if you chose Wagmi for EVM
    solanaAdapter,  // Handles Solana chains
    bitcoinAdapter, // Handles Bitcoin chains
  ],
  // ... other AppKit options (see Options page)
});
```

**Key differences in initialization:**

* `createAppKit` is imported from `@reown/appkit-react-native`.
* You explicitly create instances of the adapters you need (e.g., `new EthersAdapter()`, `new WagmiAdapter(...)`).
* The `adapters` array in `createAppKit` takes these initialized adapter instances.
* The `networks` array in `createAppKit` takes `AppKitNetwork` objects, which define all supported networks for AppKit's UI and context. `viem/chains` objects can be directly used for EVM networks.
* For the `WagmiAdapter`, the `networks` property in its constructor defines which EVM chains *it* will specifically manage using Wagmi.

## 4. Provider Setup

The way you set up providers in your `App.tsx` (or equivalent root file) has minor adjustments, especially if you are using Wagmi.

### a. `AppKitProvider`

You will now need to wrap your application (or the relevant part) with `AppKitProvider` from `@reown/appkit-react-native`. This provider makes the AppKit instance, created in the previous step, available to all child components and hooks.

```tsx theme={null}
// App.tsx
import "@walletconnect/react-native-compat";

import React from 'react';
import { AppKitProvider } from '@reown/appkit-react-native';
import { appKit } from './AppKitConfig'; // Your configured AppKit instance
import YourAppRootComponent from './YourAppRootComponent'; // Or your main app layout

function App() {
  return (
    <AppKitProvider instance={appKit}>
      <YourAppRootComponent />
    </AppKitProvider>
  );
}
export default App;
```

### b. Wagmi Specific Providers (`WagmiProvider`, `QueryClientProvider`)

If you're using the `WagmiAdapter`, you still need to set up `WagmiProvider` (from `wagmi`) and `QueryClientProvider` (from `@tanstack/react-query`) as you did before. The primary change is that the `config` prop for `WagmiProvider` now comes directly from your initialized `WagmiAdapter` instance's `wagmiConfig` property.

```tsx theme={null}
// App.tsx (if using WagmiAdapter)
import "@walletconnect/react-native-compat";

import React from 'react';
import { AppKitProvider } from '@reown/appkit-react-native';
import { appKit, wagmiAdapter } from './AppKitConfig'; 
import YourAppRootComponent from './YourAppRootComponent';

import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <AppKitProvider instance={appKit}>
      <WagmiProvider config={wagmiAdapter.wagmiConfig} reconnectOnMount={false}>
        <QueryClientProvider client={queryClient}>
          <YourAppRootComponent />
        </QueryClientProvider>
      </WagmiProvider>
    </AppKitProvider>
  );
}
export default App;
```

### c. Rendering AppKit UI

Ensure the `<AppKit />` component (imported from `@reown/appkit-react-native`) is included in your app's component tree, typically in your root component, to render the modal UI. This was likely already in place.

```tsx theme={null}
// YourAppRootComponent.tsx (Simplified)
import React from 'react';
import { AppKit } from '@reown/appkit-react-native';
// ... your other components ...

function YourAppRootComponent() {
  return (
    <>
      {/* Your app's content */}
      {/* ... e.g., ConnectButton, etc. ... */}
      
      <AppKit /> {/* This renders the modal and other AppKit UI */}
    </>
  );
}
export default YourAppRootComponent;
```

## 5. Configuration Options (`createAppKit` parameters)

Many configuration options previously passed to `createAppKit` (or `defaultConfig`/`defaultWagmiConfig`) are still available but are now part of the single `createAppKit` call from `@reown/appkit-react-native`.

* **`networks`**: As described above, an array of `AppKitNetwork` objects.
* **`adapters`**: As described, an array of initialized adapter instances.
* **`defaultNetwork`**:  (Formerly `defaultChain`).
* **`networkImages`**: (Formerly `chainImages`).
* **`tokens`**: New property (`Record<string, { address: string }>`) for displaying token balances.

Refer to the [Options](./options) documentation for the complete and up-to-date list of configuration parameters.

## 6. Hooks Migration

All AppKit hooks are now imported directly from `@reown/appkit-react-native`.

* **`useAppKit()`**:
  * Import from `@reown/appkit-react-native`.
  * Still the primary hook for modal control (`open`, `close`, `isOpen`).
  * Now also includes actions like `disconnect` and `switchNetwork`.
* **`useAccount()`**:
  * Import from `@reown/appkit-react-native`.
  * Provides `address`, `chainId`, `isConnected`, and potentially other multichain-aware details. Functionality is largely the same; primary change is the import path and potentially more multichain-aware return values.
* **`useAppKitState()`**:
  * Import from `@reown/appkit-react-native`.
  * Provides real-time access to the modal's current state and connection status
* **`useProvider()` (New Hook)**:
  * Import from `@reown/appkit-react-native`.
  * Use this to get the underlying chain-specific provider/client (e.g., Ethers provider, Wagmi client, Solana connection).
* **`useAppKitEventSubscription()` (New Hook)**:
  * Import from `@reown/appkit-react-native`.
  * Allows subscription to various AppKit lifecycle events.
* **Deprecated Hooks:**
  * `useDisconnect`: The `disconnect` function is now available from `useAppKit().disconnect()`.

Review the [Hooks](./hooks) documentation for detailed API information.

## 7. Components Migration

Update all UI component imports to use `@reown/appkit-react-native`. Key components include:

* `<AppKit />`
* `<AppKitButton />`
* `<ConnectButton />`
* `<AccountButton />`
* `<NetworkButton />`

Their core functionality and props remain largely the same as before, but ensure you're importing them from the new unified package. Refer to the [Components](./components) documentation for details on props if needed.

## Summary of Key Actions

1. **Update Dependencies:** Switch to `@reown/appkit-react-native` and add new adapter packages.
2. **Ensure Polyfill:** Add `import "@walletconnect/react-native-compat";` as the very first import.
3. **Revamp Initialization:** Use the new `createAppKit` signature with `networks` and `adapters` arrays.
4. **Adjust Provider Setup:** Set up `AppKitProvider`. For Wagmi, use `wagmiAdapter.wagmiConfig` for `WagmiProvider`.
5. **Update Hook Imports:** Change all hook imports to `@reown/appkit-react-native` and adapt to API changes (e.g., `useDisconnect` -> `useAppKit().disconnect`, new hooks like `useProvider`).
6. **Update Component Imports:** Change all component imports to `@reown/appkit-react-native`.
7. **Add `<AppKit />`:** Ensure this component is rendered for the modal UI.
8. **Review Options:** Check your `createAppKit` options against the new [Options](./options) documentation.

This migration involves some significant structural changes, but the result is a more robust and flexible system for building multichain React Native applications. If you encounter issues, refer to the main documentation pages or seek support.


# Options
Source: https://docs.reown.com/appkit/react-native/core/options



AppKit for React Native is configured by calling the `createAppKit` function and passing a configuration object to it. This function initializes and returns the AppKit instance that you will use throughout your application, typically by providing it via the `AppKitProvider`.

```typescript theme={null}
import { createAppKit } from '@reown/appkit-react-native';
import { EthersAdapter } from '@reown/appkit-ethers-react-native';
import { SolanaAdapter } from '@reown/appkit-solana-react-native';
// Import other adapters as needed (e.g., BitcoinAdapter)

// Define your network configurations (see 'networks' option below for details)
const ethMainnet = { id: '1', name: 'Ethereum', chainNamespace: 'eip155', caipNetworkId: 'eip155:1', /* ... */ };
const solanaMainnet = { id: '5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp', name: 'Solana', chainNamespace: 'solana',  /* ... */ };

export const appKit = createAppKit({
  projectId: 'YOUR_PROJECT_ID',
  metadata: { /* ... dApp metadata ... */ },
  networks: [ethMainnet, solanaMainnet], // Define all supported networks
  adapters: [ // Provide an array of initialized adapters
    new EthersAdapter(),
    new SolanaAdapter()
  ],
  // ... other options detailed below
});

// This appKit instance is then passed to AppKitProvider
```

Below are the detailed configuration options you can pass to `createAppKit`:

## Core Configuration

### `projectId`

* **Type:** `String`
* **Required:** Yes
* **Description:** Your project ID from [Reown Dashboard](https://dashboard.reown.com/). This is essential for enabling WalletConnect functionality, which AppKit uses for connecting with a wide range of wallets.

```typescript theme={null}
{
  projectId: 'YOUR_PROJECT_ID'
}
```

### `metadata`

* **Type:** `Object`
* **Required:** Yes
* **Description:** Information about your decentralized application (dApp) that is displayed to users in wallet connection prompts and used for deep linking.
  * `name`: (String) The name of your dApp.
  * `description`: (String) A brief description of your dApp.
  * `url`: (String) The official URL of your dApp.
  * `icons`: (Array of Strings) URLs to icon images for your dApp.
  * `redirect`: (Object) Configuration for redirecting users back to your app after wallet interactions, especially for mobile wallets.
    * `native`: (String) Your app's custom URL scheme for deep linking (e.g., `'yourappscheme://'`).
    * `universal`: (String) Your app's universal link URL (e.g., `'https://yourdapp.com/connect'`).

```typescript theme={null}
createAppKit({
  //...
  metadata: {
    name: 'My Awesome dApp',
    description: 'Connecting you to the decentralized web!',
    url: 'https://myapp.com',
    icons: ['https://myapp.com/logo.png'],
    redirect: {
      native: 'mydappscheme://',
      universal: 'https://myapp.com/walletconnect' // Or your specific universal link path
    }
  }
})
```

### `networks`

* **Type:** `Array<AppKitNetwork>`
* **Required:** Yes
* **Description:** An array of network objects that your dApp supports. Each object must conform to the `AppKitNetwork` type, which can be imported from `@reown/appkit-react-native`.

  <Note>
    If `chainNamespace` (e.g., 'eip155', 'solana', 'bitcoin') is not provided for a network, it will default to `'eip155'`. If `caipNetworkId` is not provided, it will be constructed as `chainNamespace:id` (e.g., 'eip155:1', 'solana:mainnet').
    Ensure these fields are correctly set for proper adapter mapping, especially for non-EVM chains.
  </Note>

**Example Sources for Network Configurations:**

<Accordion title="Pre-exported by AppKit">
  For convenience, AppKit exports configurations for Solana and Bitcoin networks.

  ```typescript theme={null}
  import { solana, bitcoin } from '@reown/appkit-react-native';

  const configuredNetworks = [solana, bitcoin];
  ```

  *Example of pre-exported Solana network: [packages/appkit/src/networks/solana.ts](https://github.com/reown-com/appkit-react-native/blob/develop/packages/appkit/src/networks/solana.ts)*
</Accordion>

<Accordion title="Using viem/chains for EVM Networks">
  You can often use standard chain definitions from libraries like `viem` or `wagmi` directly, as they typically conform to a compatible structure.

  ```typescript theme={null}
  import { mainnet as viemMainnet, polygon as viemPolygon } from 'viem/chains';

  const configuredNetworks = [viemMainnet, viemPolygon];
  ```
</Accordion>

<Accordion title="Custom Network Definitions">
  You can always define network objects manually. This is necessary for non-EVM chains if not pre-exported, or for custom EVM chains.

  ```typescript theme={null}
  import type { AppKitNetwork } from '@reown/appkit-react-native';

  export const mainnet: AppKitNetwork = {
    id: 1,
    name: 'Ethereum',
    nativeCurrency: {name: 'Ether', symbol: 'ETH', decimals: 18},
    rpcUrls: {
      default: {http: ['https://eth.llamarpc.com']},
    },
    blockExplorers: {
      default: {name: 'Etherscan', url: 'https://etherscan.io'},
    },
    chainNamespace: 'eip155',
    caipNetworkId: 'eip155:1',
  };

  export const polygon: AppKitNetwork = {
    id: 137,
    name: 'Polygon',
    nativeCurrency: {name: 'POL', symbol: 'POL', decimals: 18},
    rpcUrls: {
      default: {http: ['https://polygon-rpc.com']},
    },
    blockExplorers: {
      default: {name: 'PolygonScan', url: 'https://polygonscan.com'},
    },
    chainNamespace: 'eip155',
    caipNetworkId: 'eip155:137',
  };

  export const solanaDevnet: AppKitNetwork = {
    id: 'EtWTRABZaYq6iMfeYKouRu166VU2xqa1',
    name: 'Solana Devnet',
    chainNamespace: 'solana',
    caipNetworkId: 'solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1',
    nativeCurrency: {name: 'Solana', symbol: 'SOL', decimals: 9},
    rpcUrls: {
      default: {http: ['https://rpc.walletconnect.org/v1']},
    },
    blockExplorers: {
      default: {name: 'Solscan', url: 'https://solscan.io'},
    },
    testnet: true,
  };

  const configuredNetworks = [mainnet, polygon, solanaDevnet];
  ```
</Accordion>

**Final Configuration Example:**

```typescript theme={null}
createAppKit({
  //...
  networks: configuredNetworks
})
```

### `adapters`

* **Type:** `Array<Adapter>`
* **Required:** Yes
* **Description:** An array of initialized chain adapter instances. Each adapter is responsible for handling a specific blockchain namespace (e.g., 'eip155' for EVM chains, 'solana' for Solana). AppKit will map the networks provided in the `networks` option to the appropriate adapter based on the namespace derived from the network's `id` and the namespaces supported by each adapter.

```typescript theme={null}
import { EthersAdapter } from '@reown/appkit-ethers-react-native';
import { SolanaAdapter } from '@reown/appkit-solana-react-native';
// import { BitcoinAdapter } from '@reown/appkit-bitcoin-react-native';

const projectId = 'YOUR_PROJECT_ID'; // Assuming projectId is defined

createAppKit({
  //...
  adapters: [
    new EthersAdapter(),
    new SolanaAdapter(),
    // new BitcoinAdapter()
  ]
})
```

### `storage`

* **Type:** `Storage`
* **Required:** Yes
* **Description:** A storage implementation that handles data persistence. AppKit provides a flexible storage interface that works with any storage solution you prefer.

The `Storage` interface, which can be imported from `@reown/appkit-react-native`, is defined as follows:

```typescript theme={null}
export interface Storage {
  /**
   * Returns all keys in storage.
   */
  getKeys(): Promise<string[]>;

  /**
   * Returns all key-value entries in storage.
   */
  getEntries<T = any>(): Promise<[string, T][]>;

  /**
   * Get an item from storage for a given key.
   * @param key The key to retrieve.
   */
  getItem<T = any>(key: string): Promise<T | undefined>;

  /**
   * Set an item in storage for a given key.
   * @param key The key to set.
   * @param value The value to set.
   */
  setItem<T = any>(key: string, value: T): Promise<void>;

  /**
   * Remove an item from storage for a given key.
   * @param key The key to remove.
   */
  removeItem(key: string): Promise<void>;
}
```

<AccordionGroup>
  <Accordion title="Example with react-native-mmkv">
    ```typescript theme={null}
      import { MMKV } from 'react-native-mmkv';
      import { safeJsonParse, safeJsonStringify } from '@walletconnect/safe-json';
      import type { Storage } from '@reown/appkit-react-native';

      const mmkv = new MMKV();

      const storage: Storage = {
        getKeys: async () => {
            return mmkv.getAllKeys();
        },
        getEntries: async <T = any>(): Promise<[string, T][]> => {
          function parseEntry(key: string): [string, any] {
            const value = mmkv.getString(key);
            return [key, safeJsonParse(value ?? '')];
          }

          const keys = mmkv.getAllKeys();
          return keys.map(parseEntry);
        },
        setItem: async <T = any>(key: string, value: T) => {
          return mmkv.set(key, safeJsonStringify(value));
        },
        getItem: async <T = any>(key: string): Promise<T | undefined> => {
          const item = mmkv.getString(key);
          if (typeof item === 'undefined' || item === null) {
            return undefined;
          }

          return safeJsonParse(item) as T;
        },
        removeItem: async (key: string) => {
          return mmkv.delete(key);
        },
      };

      createAppKit({
        //...
        storage
      })
    ```
  </Accordion>

  <Accordion title="Example with react-native-async-storage">
    ```typescript theme={null}
    import AsyncStorage from '@react-native-async-storage/async-storage';

    import { type Storage } from '@reown/appkit-react-native';
    import { safeJsonParse, safeJsonStringify } from '@walletconnect/safe-json';

    const storage: Storage = {
      getKeys: async () => {
        return await AsyncStorage.getAllKeys() as string[];
      },
      getEntries: async <T = any>(): Promise<[string, T][]> => {
        const keys = await AsyncStorage.getAllKeys();
        return await Promise.all(keys.map(async key => [
          key,
          safeJsonParse(await AsyncStorage.getItem(key) ?? '') as T,
        ]));
      },
      setItem: async <T = any>(key: string, value: T) => {
        await AsyncStorage.setItem(key, safeJsonStringify(value));
      },
      getItem: async <T = any>(key: string): Promise<T | undefined> => {
        const item = await AsyncStorage.getItem(key);
        if (typeof item === 'undefined' || item === null) {
          return undefined;
        }

        return safeJsonParse(item) as T;
      },
      removeItem: async (key: string) => {
        await AsyncStorage.removeItem(key);
      },
    };

    createAppKit({
      //...
      storage
    })
    ```
  </Accordion>
</AccordionGroup>

### `extraConnectors`

* **Type:** `Array<Connector>`
* **Required:** No
* **Description:** Additional wallet connectors that extend AppKit's connection capabilities beyond the standard WalletConnect protocol. This is useful for wallets that require custom connection methods, like Phantom Wallet and Coinbase.

```typescript theme={null}
import { PhantomConnector } from '@reown/appkit-solana-react-native';

createAppKit({
  //...
  extraConnectors: [
    new PhantomConnector({ cluster: 'mainnet-beta' }) // Or 'devnet', 'testnet'
  ]
})
```

### `defaultNetwork`

* **Type:** `AppKitNetwork` (Optional)
* **Description:** The network that AppKit should attempt to connect to by default, or highlight initially if no prior session exists. This object must be one of the networks defined in your `networks` array.

```typescript theme={null}
createAppKit({
  //...
  // Assuming ethereumMainnet is a valid AppKitNetwork object defined in your 'networks' array
  defaultNetwork: ethereumMainnet
})
```

## Modal & Wallet Display Customization

### `customWallets`

* **Type:** `Array<WalletEntry>` (Optional)
* **Description:** Allows you to add custom wallet entries to the connection modal. Each object in the array defines a wallet not available through WalletConnect's default registry. Refer to `WalletEntry` type for exact properties.

```typescript theme={null}
createAppKit({
  // ...
  customWallets: [
    {
      id: "myCustomWallet",
      name: "My Custom Wallet",
      homepage: "www.mycustomwallet.com", // Optional
      mobile_link: "mobile_link", // Optional - Deeplink or universal
      link_mode: "universal_link", // Optional - Universal link if the wallet supports link-mode
      desktop_link: "desktop_link", // Optional - Deeplink
      webapp_link: "webapp_link", // Optional
      app_store: "app_store", // Optional
      play_store: "play_store", // Optional
    },
  ]
})
```

### `featuredWalletIds`

* **Type:** `Array<String>` (Optional)
* **Description:** Select wallets that are going to be shown on the modal's main view. Array of wallet IDs defined will be prioritized (order is respected). These wallets will also show up first in `All Wallets` view. You can find the wallets ids in [WalletGuide](https://walletguide.walletconnect.network/).

```ts theme={null}
createAppKit({
  //...
  featuredWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369", // Rainbow
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0", // Trust
  ]
})
```

### `includeWalletIds`

* **Type:** `Array<String>` (Optional)
* **Description:** If provided, only wallets whose IDs are in this array will be shown in the modal. This effectively creates an allowlist, overriding the default WalletConnect registry listings.

```typescript theme={null}
createAppKit({
  //...
  includeWalletIds: [
    "c57ca95b47569778a828d19178114f2db125b25b778adf5cba72bd778e231769", // Example: MetaMask
    // ... only include these wallets
  ]
})
```

### `excludeWalletIds`

* **Type:** `Array<String>` (Optional)
* **Description:** An array of wallet IDs to be hidden from the modal. This allows you to remove specific wallets from the default WalletConnect registry listings.

```typescript theme={null}
createAppKit({
  //...
  excludeWalletIds: [
    "fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa", // Example: Coinbase Wallet (if you wish to exclude it)
  ]
})
```

## Theming & UI Customization

### `themeMode`

* **Type:** `'light' | 'dark'` (Optional)
* **Description:** Sets the initial theme for the AppKit modal. Defaults to the system theme or 'light' if system theme is unavailable.

```typescript theme={null}
createAppKit({
  //...
  themeMode: 'dark'
})
```

### `themeVariables`

* **Type:** `Object` (Optional)
* **Description:** Allows you to customize the accent color of the AppKit modal. Refer to the Theming documentation for details.

```typescript theme={null}
createAppKit({
  //...
  themeVariables: {
    'accent': '#4E88F7'
  }
})
```

### `networkImages` (Formerly `chainImages`)

* **Type:** `Record<string, string>` (Optional)
* **Description:** An object to provide custom image URLs for network icons in the modal. Keys should be network IDs (e.g., 'eip155:1', 'solana:mainnet').

```typescript theme={null}
createAppKit({
  //...
  networkImages: {
    'eip155:1': 'https://example.com/images/ethereum.png',
    'solana:mainnet': 'https://example.com/images/solana.png'
  }
})
```

## Token Balance Configuration

### `tokens`

* **Type:** `Record<string, { address: string }>` (Optional)
* **Description:** An object to configure specific tokens for which AppKit should display balances. The keys are CAIP-2 network IDs (e.g., 'eip155:1' for Ethereum Mainnet for a specific Solana network instance if required by ID structure). The value for each network ID is an object containing the token's contract `address` on that network.

```typescript theme={null}
createAppKit({
  //...
  tokens: {
    'eip155:1': { // Ethereum Mainnet
      address: '0xdAC17F958D2ee523a2206206994597C13D831ec7' // USDT on Ethereum
    },
    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': { // Solana Mainnet
      address: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v' // USDC on Solana
    }
    // Add other tokens for other configured networks as needed
  }
})
```

## Utility & Advanced Options

### `clipboardClient`

* **Type:** `Object`
* **Required:** No (but functionally required for copy features)
* **Description:** Allows you to provide your own clipboard implementation. **If this client is not provided, all UI elements within AppKit that offer a "copy to clipboard" functionality (e.g., for addresses, QR code URIs) will be hidden.** To enable copy features, you must supply this client.
  It requires an async `setString` method that takes a string value to be copied.

```typescript theme={null}
import * as Clipboard from 'expo-clipboard'; // or from '@react-native-clipboard/clipboard'

createAppKit({
  //...
  clipboardClient: {
    setString: async (value: string) => {
      await Clipboard.setStringAsync(value);
      // console.log('Copied to clipboard!');
    }
  }
})
```

### `enableAnalytics`

* **Type:** `boolean` (Optional)
* **Default:** `true`
* **Description:** Set to `true` to enable analytics and gather insights on user activity within your [Reown Cloud dashboard](https://cloud.reown.com).

```typescript theme={null}
createAppKit({
  //...
  enableAnalytics: true
})
```

### `debug`

* **Type:** `boolean` (Optional)
* **Default:** `false`
* **Description:** Set to `true` to enable debug mode. This may show additional console logs helpful for development and troubleshooting.

```typescript theme={null}
createAppKit({
  //...
  debug: true
})
```

### `logger`

* **Type:** `'silent' | 'fatal' | 'error' | 'warn' | 'info' | 'debug' | 'trace'` (Optional)
* **Default:** `'error'`
* **Description:** Controls the log level forwarded to `@walletconnect/universal-provider`. Useful for silencing or tuning WalletConnect core logs.

```typescript theme={null}
createAppKit({
  //...
  logger: 'silent'
})
```

### universalProviderConfigOverride

Lets you customize specific aspects of the provider's behavior.

```typescript theme={null}
createAppKit({
  //...
  universalProviderConfigOverride: {
    methods: { eip155: ['eth_sendTransaction', 'personal_sign'] },
    chains: { eip155: ['1', '137'] },
    events: { eip155: ['chainChanged', 'accountsChanged'] },
    rpcMap: { eip155:1: 'https://ethereum.publicnode.com' },
  },
});
```

You can override any of the following properties:

* `methods`: Custom RPC methods for each namespace
* `chains`: Supported chains for each namespace
* `events`: Events to subscribe to for each namespace
* `rpcMap`: Custom RPC URLs for specific chains

## Feature Flags

### `features`

* **Type:** `Object` (Optional)
* **Description:** An object to toggle additional AppKit features on or off.

  * `swaps`: (Boolean, Optional) Enable/disable the token swap feature. Default: `true`.
  * `onramp`: (Boolean, Optional) Enable/disable the onramp feature. Default: `true`.
  * `socials`: (Array of Strings or Boolean, Optional) Configure email and social login options. Provide an array like `["google", "x", "discord", "apple"]` to enable specific platforms. Set to `false` or an empty array `[]` to disable all social logins. Default: All available socials enabled.
  * `showWallets`: (Boolean, Optional) If social login is enabled, this controls whether wallet options are shown on the initial connect screen alongside social options. If `false`, a button will redirect to a separate screen for wallet options. Default: `true`.

```typescript theme={null}
createAppKit({
  //...
  features: {
    swaps: true,
    onramp: true,
    socials: ['email', 'google', 'x', 'discord', 'apple', 'facebook', 'github', 'farcaster'],
    showWallets: true
  }
})
```

*This list may not be exhaustive. Always refer to the arguments of the `createAppKit` function and associated type definitions in the source code for the most up-to-date and complete list of options and their structures.*


# Sign In With X
Source: https://docs.reown.com/appkit/react-native/core/siwx



## Introduction

The **Sign In With X** feature enables decentralized applications (Dapps) to authenticate users seamlessly across multiple blockchain networks, such as Ethereum, Polygon or Solana. This feature allows developers using our SDK to implement authentication by having users sign a unique string message with their blockchain wallets. The **Sign In With X** feature is designed in accordance with the [CAIP-122](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-122.md) standard, which establishes a chain-agnostic framework for blockchain-based authentication and authorization on off-chain services.

## Getting Started

**SIWX** works as a plugin system for AppKit and you are going to add the plugin in the AppKit configuration. There are some ways to implement the **SIWX** feature:

* Use Reown Authentication to manage the sessions in the Reown Dashboard
* Create a custom implementation to suit your specific requirements.

To initialize the **SIWX** feature, you need to add the `siwx` parameter to the `createAppKit` function.

### Reown Authentication

Reown Authentication is a predefined implementation of the SIWX configuration plugin that uses the Cloud service to create and manage SIWX messages and sessions. With Reown Authentication, you will be able to see and control the sessions of your users using the Reown [Dashboard](/cloud/reown-authentication).

Read more about the [Reown Authentication Implementation](./reown-authentication).

### Custom Implementation

`DefaultSIWX` is a scaffold implementation of the SIWX feature for quick custom integration. It offers pre-built components to get the feature running quickly with some custom adjustments.
Additionally, the expected \` parameters can be configured to allow customization of the feature to suit your specific requirements.

The defined interface must follow specific rules to make sure that AppKit can interact with it correctly. Read more about how to have your [Custom Implementation](./siwx-custom).

## SIWX Expected Behavior

* **SIWX** will prompt to get the user signature and verify his identity every time a connection happen;
* In case a SIWX session is already stored, the user will be automatically signed in and the prompt step will be skipped;
* If the user changes the connected network, **SIWX** will prompt to get the user signature and verify his identity again;
* If the user disconnects from the Dapp, **SIWX** will revoke the session and the user will need to sign in again.


# Theming
Source: https://docs.reown.com/appkit/react-native/core/theming



## ThemeMode

By default `themeMode` option will be set to user system settings 'light' or 'dark'. But you can override it like this:

```ts theme={null}
createAppKit({
  //...
  themeMode: "light",
});
```

## themeVariables

By default `themeVariables` are undefined. You can set them like this:

```ts theme={null}
createAppKit({
  //...
  themeVariables: {
    accent: "#00BB7F",
  },
});
```

The following list shows the theme variables you can override:

| Variable | Description                                 | Type     |
| -------- | ------------------------------------------- | -------- |
| `accent` | Color used for buttons, icons, labels, etc. | `string` |

To change the theme dynamically at runtime, see the [`useAppKitTheme` hook](/appkit/react-native/core/hooks#useappkittheme).


# On-Ramp
Source: https://docs.reown.com/appkit/react-native/transactions/onramp



AppKit’s On-Ramp feature lets your users easily buy crypto with fiat—right inside your React Native app. With support for 100+ cryptocurrencies and global payment options, it helps users start transacting quickly and securely across multiple chains.

## Configuration

The On-Ramp feature is enabled by default. To customize or disable it:

```typescript {4-6} theme={null}
createAppKit({
  projectId: 'YOUR_PROJECT_ID',
  // ... other config options
  features: {
    onramp: true, // Optional - true by default
  }
});
```

Set `onramp: false` to disable the feature.

## Usage

### Open the On-Ramp View

Use the `useAppKit` hook to trigger the On-Ramp view programmatically:

```typescript {2, 5} theme={null}
function OnRampButton() {
  const { open } = useAppKit();

  const handleOnRampPress = () => {
    open({ view: 'OnRamp' });
  };

  return (
    <Button
      title="Buy Crypto"
      onPress={handleOnRampPress}
    />
  );
}
```

### What Users Can Expect

1. When users tap “Buy Crypto”, they’re guided to a clean, intuitive interface.
2. They can:
   * Choose their local fiat currency
   * Pick the token they want to buy
   * Enter the desired amount
   * Select a payment method (credit card, bank transfer, etc.)
   * Review all fees and exchange rates transparently
3. After confirming, they’re securely redirected to the provider to complete the purchase.
4. Once done, the crypto lands in their wallet—automatically.


# Swaps
Source: https://docs.reown.com/appkit/react-native/transactions/swaps



Let users swap tokens seamlessly inside your React Native app using AppKit’s Swaps feature. With built-in provider support and real-time pricing, users can trade tokens across chains without leaving your app.

## Configuration

Swaps are enabled by default. You can enable or disable it explicitly like this:

```typescript {4-6} theme={null}
createAppKit({
  projectId: 'YOUR_PROJECT_ID',
  // ... other config options
  features: {
    swaps: true, // Optional - true by default
  }
});
```

Set `swaps: false` to turn off the feature.

## Usage

### Open the Swaps View

Use the `useAppKit` hook to launch the Swaps view:

```typescript {2, 5} theme={null}
function SwapButton() {
  const { open } = useAppKit();

  const handleSwapPress = () => {
    open({ view: 'Swap' });
  };

  return (
    <Button
      title="Swap Tokens"
      onPress={handleSwapPress}
    />
  );
}
```

### What Users Can Expect

1. Tapping “Swap Tokens” opens a dedicated swap interface.
2. Users can:
   * Select the token to swap from
   * Select the token to receive
   * Enter the amount
   * See an instant quote with:
     * Price impact
     * Network fee
     * Slippage tolerance
     * Provider fees
3. After confirming, the transaction is executed and tokens arrive directly in their wallet—no extra steps needed.


# Components
Source: https://docs.reown.com/appkit/react/core/components



AppKit provides pre-built React components that you can use to trigger the modal or display wallet information.

## React Components

```tsx theme={null}
import { 
  AppKitButton, 
  AppKitConnectButton, 
  AppKitAccountButton, 
  AppKitNetworkButton 
} from "@reown/appkit/react";

export default function MyApp() {
  return (
    <div>
      {/* Default button that handles the modal state */}
      <AppKitButton />
      
      {/* Button for connecting a wallet */}
      <AppKitConnectButton />
      
      {/* Button for account view */}
      <AppKitAccountButton />
      
      {/* Button for network selection */}
      <AppKitNetworkButton />
    </div>
  );
}
```

### Component Properties

All React components support the same properties as their HTML element counterparts:

* **AppKitButton**: `size`, `label`, `loadingLabel`, `disabled`, `balance`, `namespace`
* **AppKitConnectButton**: `size`, `label`, `loadingLabel`
* **AppKitAccountButton**: `disabled`, `balance`
* **AppKitNetworkButton**: `disabled`

## React Components

AppKit provides React-specific components that integrate seamlessly with your React application. These components automatically reflect the AppKit state and provide a more React-native experience.

### `<AppKitButton />` and `<AppKitNetworkButton />`

These React components provide the same functionality as the web components but with better React integration and TypeScript support.

```jsx theme={null}
import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function AppKitButtons() {
  return (
    <div>
      {/* Default button */}
      <AppKitButton />
      
      {/* Network selection button */}
      <AppKitNetworkButton />
      
      {/* Button with specific namespace */}
      <AppKitButton namespace="eip155" />
    </div>
  )
}
```

#### Props

Both components accept the following optional props:

| Prop        | Type     | Description                                                     |
| ----------- | -------- | --------------------------------------------------------------- |
| `namespace` | `string` | Specify the blockchain namespace (`eip155`, `solana`, `bip122`) |

### `<appkit-wallet-button  />`

<Frame>
  <img />
</Frame>

Using the wallet button components ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.
This component allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need to open the traditional modal.

Follow these steps to use the component:

1. Install the package:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-wallet-button
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-wallet-button
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-wallet-button
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-wallet-button
  ```
</CodeGroup>

2. Import the library in the project:

```tsx theme={null}
import "@reown/appkit-wallet-button/react";
```

3. Use the component in the project:

```tsx theme={null}
import { AppKitWalletButton } from "@reown/appkit-wallet-button/react";

export default function MyApp() {
  return <AppKitWalletButton wallet="metamask" />;
}
```

#### Multichain Support

You can specify a blockchain namespace to target specific chains:

```tsx theme={null}
<!-- Connect to Ethereum/EVM chains -->
<appkit-wallet-button wallet="metamask" namespace="eip155" />

<!-- Connect to Solana -->
<appkit-wallet-button wallet="phantom" namespace="solana" />

<!-- Connect to Bitcoin -->
<appkit-wallet-button wallet="leather" namespace="bip122" />
```

#### React Hook Integration

You can also use the `useAppKitWallet` hook for programmatic wallet connections with multichain support:

```tsx theme={null}
import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

export function WalletConnector() {
  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
    onError: err => {
      console.error('Connection error:', err)
    },
    onSuccess: data => {
      console.log('Connected successfully:', data)
    }
  })

  return (
    <>
      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
      <button onClick={() => connect('google')}>Connect to Google</button>
    </>
  )
}
```

#### Options for wallet property

| Type          | Options                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| QR Code       | walletConnect                                                                                                                                                                                                                                                                                                                                                                                                                         |
| Wallets       | metamask, trust, coinbase, rainbow, 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, tokenpocket, haha, ambire-wallet, bitpay, blade-wallet, brave, coinstats, kresus-superapp, plena-app, status, tomo-wallet, valora, and zengo-wallet |
| 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                 |


# Custom connectors
Source: https://docs.reown.com/appkit/react/core/custom-connectors



In AppKit, a 'connector' is the bridge between your app and a user's wallet. This page shows how to add custom connectors beyond the default ones, allowing your users to connect with additional wallet types and authentication methods.

<Tabs>
  <Tab title="Wagmi">
    If you already have Wagmi integrated into your application or would like more control over Wagmi's configuration, you can integrate AppKit on top of it.

    Adding custom connectors like WalletConnect and Coinbase is optional.

    By default, [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and WC connectors are provided out of the box.

    ```tsx theme={null}
    import { createAppKit } from '@reown/appkit/react'
    import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

    import { http, WagmiProvider, CreateConnectorFn } from 'wagmi'
    import { abstractTestnet } from '@reown/appkit/networks'
    // you need to add the abstract library in order to make it work
    import { abstractWalletConnector } from "@abstract-foundation/agw-react/connectors";

    import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

    const queryClient = new QueryClient()

    const projectId = 'YOUR_PROJECT_ID'

    const metadata = {
      //...
    }

    // create the custom connector (in this example Abastract)
    const connectors: CreateConnectorFn[] = []
    connectors.push(abstractWalletConnector())

    export const networks = [abstractTestnet]

    export const wagmiAdapter = new WagmiAdapter({
      connectors,
      projectId,
      networks
    })

    export const config = wagmiAdapter.wagmiConfig

    createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [sepolia]
    })

    export function ContextProvider({ children }) {
      return (
        <WagmiProvider config={config}>
          <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </WagmiProvider>
      )
    }
    ```

    Check our React Wagmi demo in [Github](https://github.com/reown-com/appkit-web-examples/)
  </Tab>
</Tabs>


# Headless
Source: https://docs.reown.com/appkit/react/core/headless



<Frame>
  <img alt="Descriptive alt text" />
</Frame>

<Note>
  Headless must be enabled via the dashboard under the **Customization** section. See the [dashboard configuration settings](/cloud/dashboard-configuration-settings#headless) for details.
</Note>

AppKit Headless allows developers to build a fully customizable "Connect" experience powered by AppKit's existing features without using the AppKit modal. Headless exposes wallet discovery, rendering WalletConnect QR codes, and social provider flows via simple hooks and utility functions.

## Installation

Headless requires AppKit to be configured with the `headless` flag. See the [installation](./installation) docs before getting started and make sure you're enabling headless as expected.

```tsx theme={null}
createAppKit({
  ...
  features: {
    headless: true
  }
})
```

## useAppKitWallets

The essential hook for accessing all types of wallets and methods to build your custom connection user interface.

<CodeGroup>
  ```tsx useAppKitWallets.tsx theme={null}
  const { wallets, wcWallets, isFetchingWallets, isFetchingWcUri, isInitialized, wcUri, wcError, connectingWallet, page, count, fetchWallets, connect, resetWcUri } =
    useAppKitWallets()
  ```
</CodeGroup>

### Returns

<ResponseField name="wallets" type="WalletItem[]">
  List of wallets for the initial connect view including WalletConnect wallets and injected wallets
  together. If the user doesn't have any injected wallets, it'll fill the list with the most ranked
  WalletConnect wallets.
</ResponseField>

<ResponseField name="wcWallets" type="WalletItem[]">
  List of WalletConnect wallets from Wallet Guide API. Useful to display all available WalletConnect
  wallets in a separate Search Wallets view.
</ResponseField>

<ResponseField name="isFetchingWallets" type="boolean">
  Boolean that indicates if WalletConnect wallets are being fetched.
</ResponseField>

<ResponseField name="isFetchingWcUri" type="boolean">
  Boolean that indicates if a WalletConnect URI is being fetched.
</ResponseField>

<ResponseField name="isInitialized" type="boolean">
  Boolean that indicates if the AppKit is initialized. It's useful to render a fallback UI when the
  AppKit initializes and detects all injected wallets.
</ResponseField>

<ResponseField name="wcUri" type="string | undefined">
  The current WalletConnect URI for QR code display. This is set when connecting to a WalletConnect
  wallet. Reset with resetWcUri().
</ResponseField>

<ResponseField name="wcError" type="boolean">
  Boolean that indicates if there was an error fetching the WalletConnect URI.
</ResponseField>

<ResponseField name="connectingWallet" type="WalletItem | undefined">
  The wallet currently being connected to. This is set when a connection is initiated and cleared
  when it completes or fails. For WalletConnect wallets, resetWcUri() should be called to clear the
  state.
</ResponseField>

<ResponseField name="page" type="number">
  The current page number of WalletConnect wallets.
</ResponseField>

<ResponseField name="count" type="number">
  The total number of available WalletConnect wallets based on the AppKit configurations and given
  parameters.
</ResponseField>

<ResponseField name="fetchWallets" type="(options?: FetchWalletsOptions) => Promise<void>">
  Function to fetch WalletConnect wallets from the explorer API. Allows you to list, search, and
  paginate through the wallets.

  ```typescript theme={null}
  interface FetchWalletsOptions {
    /** Page number to fetch (default: 1) */
    page?: number
    /** @deprecated Use `search` instead */
    query?: string
    /** Search query to filter wallets. When provided, switches to search mode. */
    search?: string
    /** Number of entries per page. Defaults to 40 for list mode, 100 for search mode. */
    entries?: number
    /** Filter wallets by badge type ('none' | 'certified') */
    badge?: 'none' | 'certified'
    /** Wallet IDs to include. Overrides the global includeWalletIds config when provided. */
    include?: string[]
    /** Wallet IDs to exclude. Overrides the default exclude list when provided. */
    exclude?: string[]
    /**
     * Include wallets that support WalletConnect Pay but are not v2-compatible.
     * By default these are filtered out. Enable for WalletConnect Pay surfaces.
     */
    includePayOnly?: boolean
    /** Sort mode. 'wcpay' bubbles WalletConnect Pay-supporting wallets to the top. */
    sort?: 'default' | 'wcpay'
  }
  ```
</ResponseField>

<ResponseField name="connect" type="(wallet: WalletItem, namespace?: ChainNamespace) => Promise<void>">
  Function to connect to a wallet. For WalletConnect wallets: initiates WC connection and returns
  the URI with the `wcUri` state. For injected connectors: triggers the extension/wallet directly.
</ResponseField>

<ResponseField name="resetWcUri" type="() => void">
  Function to reset the WC URI. Useful to keep the `connectingWallet` state in sync with the WC URI.
  Can be called when the QR code is closed.
</ResponseField>

# Examples

## Build a Connect UI

<Frame>
  <img alt="Descriptive alt text" />
</Frame>

The `useAppKitWallets` hook returns a list of injected and WalletConnect wallets that let you render directly in the connect page.

If you configure your AppKit as multi-chain, we suggest rendering a namespace selection component where users should select which namespace to connect when using browser extensions. This could be achieved with the `connectors` array of the `WalletItem`.

If a user selects a WalletConnect wallet, you can show the QR code to the users and let them scan it with their preferred wallets. To handle the QR flows, you can use the `isFetchingWcUri`, `wcUri`, and `resetWcUri` props from the `useAppKitWallets` hook.

<CodeGroup>
  ```tsx ConnectView.tsx theme={null}
  import React, { useState } from 'react'
  import type { WalletItem } from '@reown/appkit'
  import type { ChainNamespace } from '@reown/appkit/networks'
  import { useAppKitWallets } from '@reown/appkit/react'
  import { NamespaceSelectionDialog } from './NamespaceDialog'
  import { WalletConnectQRDialog } from './WalletConnectQRDialog'

  function ConnectView() {
    const { wallets, connect } = useAppKitWallets()
    const [selectedWallet, setSelectedWallet] = useState<WalletItem | null>(null)

    async function handleConnect(wallet: WalletItem, namespace?: ChainNamespace) {
      await connect(wallet, namespace)
        .then(() => {
          toast({ title: 'Connected', status: 'success' })
        })
        .catch(() => {
          toast({ title: 'Connection declined', status: 'error' })
        })
    }

    return (
      <>
        {wallets.map(wallet => (
          <WalletListItem
            key={wallet.id}
            wallet={wallet}
            onConnect={() => {
              if (wallet.connectors.length > 1) {
                setSelectedWallet(wallet)
              } else {
                handleConnect(wallet, wallet.connectors[0]?.chain)
              }
            }}
          />
        ))}
        <NamespaceSelectionDialog
          wallet={selectedWallet}
          onSelect={handleConnect}
          onClose={() => setSelectedWallet(null)}
        />
        <WalletConnectQRDialog />
      </>
    )
  }
  ```

  ```tsx WalletListItem.tsx theme={null}
  export function WalletListItem({ wallet, onConnect }) {
    const { connectingWallet } = useAppKitWallets()

    return (
      <button onClick={onConnect}>
        <img url={wallet.imageUrl} />
        <span>{wallet.name}</span>
        {wallet.connectors.map(item => {
          return <img {item.chainImageUrl} alt={item.chain} />
        })}
        {connectingWallet?.id === wallet.id ? "connecting..." : null}
      </button>
    )
  }
  ```

  ```tsx NamespaceDialog.tsx theme={null}
  import { ChevronRightIcon } from 'lucide-react'
  import Image from 'next/image'

  import type { WalletItem } from '@reown/appkit'
  import type { ChainNamespace } from '@reown/appkit/networks'

  import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle
  } from '@/components/ui/dialog'
  import { Item, ItemActions, ItemContent, ItemMedia, ItemTitle } from '@/components/ui/item'

  interface NamespaceSelectionDialogProps {
    wallet: WalletItem | null
    onSelect?: (wallet: WalletItem, namespace: ChainNamespace) => void
    onClose?: () => void
  }

  const CHAIN_NAME_MAP: Record<string, string> = {
    eip155: 'EVM Networks',
    solana: 'Solana',
    polkadot: 'Polkadot',
    bip122: 'Bitcoin',
    cosmos: 'Cosmos',
    sui: 'Sui',
    stacks: 'Stacks',
    ton: 'TON'
  }

  export function NamespaceSelectionDialog({
    wallet,
    onSelect,
    onClose
  }: NamespaceSelectionDialogProps) {
    if (!wallet) return null

    return (
      <Dialog open={!!wallet} onOpenChange={open => !open && onClose?.()}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Connect to {wallet.name}</DialogTitle>
            <DialogDescription>
              {wallet.name} supports multiple chains. Select a chain you want to connect to.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-2">
            {wallet.connectors.map(connector => (
              <Item key={connector.chain} onClick={() => onSelect?.(wallet, connector.chain)}>
                {connector.chainImageUrl && (
                  <ItemMedia className="rounded-md overflow-hidden w-8 h-8">
                    <Image
                      src={connector.chainImageUrl}
                      alt={connector.chain}
                      width={32}
                      height={32}
                    />
                  </ItemMedia>
                )}
                <ItemContent>
                  <ItemTitle>{CHAIN_NAME_MAP[connector.chain] || connector.chain}</ItemTitle>
                </ItemContent>
                <ItemActions>
                  <ChevronRightIcon className="size-4" />
                </ItemActions>
              </Item>
            ))}
          </div>
        </DialogContent>
      </Dialog>
    )
  }
  ```

  ```tsx WalletConnectQRDialog.tsx theme={null}
  import QRCode from 'react-qr-code'
  import Image from 'next/image'
  import { Loader2Icon } from 'lucide-react'

  import { useAppKitWallets } from '@reown/appkit/react'

  import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle
  } from '@/components/ui/dialog'

  export function WalletConnectQRDialog() {
    const { wcUri, connectingWallet, isFetchingWcUri, resetWcUri } = useAppKitWallets()

    if (!connectingWallet || connectingWallet.isInjected) {
      return null
    }

    return (
      <Dialog
        open={Boolean(wcUri)}
        onOpenChange={open => {
          if (!open) {
            resetWcUri()
          }
        }}
      >
        <DialogContent>
          <DialogHeader>
            <div className="flex items-center gap-3">
              <Image
                src={connectingWallet.imageUrl}
                alt={connectingWallet.name}
                width={40}
                height={40}
                className="rounded-full"
              />
              <DialogTitle>Connect to {connectingWallet.name}</DialogTitle>
            </div>
            <DialogDescription>
              Scan the QR code with {connectingWallet.name} to connect to your app.
            </DialogDescription>
          </DialogHeader>
          <div className="flex flex-col items-center justify-center p-6">
            {isFetchingWcUri ? (
              <Loader2Icon className="animate-spin size-8" />
            ) : (
              <QRCode
                value={wcUri}
                size={256}
                style={{ height: 'auto', maxWidth: '100%', width: 'auto' }}
              />
            )}
          </div>
        </DialogContent>
      </Dialog>
    )
  }
  ```
</CodeGroup>

## Search and Connect to WalletConnect Wallets

<Frame>
  <img alt="Descriptive alt text" />
</Frame>

WalletConnect supports 500+ wallets. You can let users search for their own wallets to connect to your app.

<CodeGroup>
  ```tsx AllWalletsView.tsx theme={null}
  import React, { useState, useEffect } from 'react'
  import { useAppKitWallets } from '@reown/appkit/react'

  function AllWalletsView() {
    const { wcWallets, isFetchingWcUri, isFetchingWallets, fetchWallets, connect, page } =
      useAppKitWallets()
    const [inputValue, setInputValue] = useState('')
    const searchQuery = useDebounceValue(inputValue, 500)

    useEffect(() => {
      fetchWallets?.()
    }, [])

    useEffect(() => {
      if (searchQuery.length > 0) {
        fetchWallets?.({ search: searchQuery })
      } else {
        fetchWallets?.()
      }
    }, [searchQuery])

    function handleLoadMore() {
      if (searchQuery.length > 0) {
        fetchWallets?.({ page: page + 1, search: searchQuery })
      } else {
        fetchWallets?.({ page: page + 1 })
      }
    }

    return (
      <>
        <input
          type="text"
          placeholder="Search wallets..."
          value={inputValue}
          onChange={e => setInputValue(e.target.value)}
        />
        {isFetchingWallets && <div>Loading wallets...</div>}
        {wcWallets.map(wallet => {
          return <WalletListItem key={wallet.id} wallet={wallet} onConnect={connect} />
        })}
        <button onClick={handleLoadMore} disabled={isFetchingWallets}>
          Load More
        </button>
      </>
    )
  }
  ```
</CodeGroup>

## Demo

<Columns>
  <Card title="Headless Playground" icon="cubes" href="https://appkit-headless.vercel.app">
    You can check our demo app to play around with an example Headless implementation
  </Card>

  <Card title="Source code" icon="github" href="https://github.com/reown-com/appkit/tree/main/examples/next-appkit-headless">
    See the source code of the example Headless implementation.
  </Card>
</Columns>


# Hooks
Source: https://docs.reown.com/appkit/react/core/hooks



Hooks are React functions that provide access to wallet connection features, modal controls, blockchain interactions, and wallet event subscriptions. They enable you to manage wallet connections, handle user authentication, interact with smart contracts, and respond to wallet events in your application.

## Hook Ecosystem

AppKit provides a comprehensive set of React hooks that work together to provide a complete wallet connection and blockchain interaction experience. These hooks can be categorized into several functional groups:

* **Connection Hooks**: Manage wallet connections and user authentication (`useAppKit`, `useAppKitAccount`, `useAppKitProvider`, `useDisconnect`)
* **Network Hooks**: Handle blockchain network selection and information (`useAppKitNetwork`)
* **UI Control Hooks**: Control the modal and UI elements (`useAppKitState`, `useAppKitTheme`)
* **Data Access Hooks**: Access wallet and blockchain data (`useAppKitBalance`, `useWalletInfo`)
* **Event Hooks**: Subscribe to wallet and connection events (`useAppKitEvents`)
* **Payment Hooks**: Handle crypto payments and exchange integrations (`usePay`, `useAvailableExchanges`, `usePayUrlActions`, `useExchangeBuyStatus`)
* **Multi-Wallet Hooks**: Manage multiple wallet connections (`useAppKitConnections`, `useAppKitConnection`)
* **Authentication Hooks**: Handle authentication and user management (`useAppKitUpdateEmail`, `useAppKitSIWX`)
* **Solana-Specific Hooks**: Solana blockchain interactions (`useAppKitConnection` from Solana adapter)

The diagram below illustrates how these hooks relate to each other and to the core AppKit functionality:

```mermaid theme={null}
graph TD
  AppKit[AppKit Core] --> ConnHooks[Connection Hooks]
  AppKit --> NetworkHooks[Network Hooks]
  AppKit --> UIHooks[UI Control Hooks]
  AppKit --> DataHooks[Data Access Hooks]
  AppKit --> EventHooks[Event Hooks]
  AppKit --> PaymentHooks[Payment Hooks]
  AppKit --> MultiWalletHooks[Multi-Wallet Hooks]
  AppKit --> AuthHooks[Authentication Hooks]
  AppKit --> SolanaHooks[Solana-Specific Hooks]
  
  ConnHooks --> useAppKit
  ConnHooks --> useAppKitAccount
  ConnHooks --> useAppKitProvider
  ConnHooks --> useDisconnect
  ConnHooks --> useAppKitWallet
  
  NetworkHooks --> useAppKitNetwork
  
  UIHooks --> useAppKitState
  UIHooks --> useAppKitTheme
  
  DataHooks --> useWalletInfo
  DataHooks --> useAppKitBalance
  
  EventHooks --> useAppKitEvents
  
  PaymentHooks --> usePay
  PaymentHooks --> useAvailableExchanges
  PaymentHooks --> usePayUrlActions
  PaymentHooks --> useExchangeBuyStatus
  
  MultiWalletHooks --> useAppKitConnections
  MultiWalletHooks --> useAppKitConnection
  
  AuthHooks --> useAppKitUpdateEmail
  AuthHooks --> useAppKitSIWX
  
  SolanaHooks --> useAppKitConnectionSolana[useAppKitConnection]
  
  useAppKit -.-> useAppKitAccount
  useAppKitAccount -.-> useAppKitBalance
  useAppKitNetwork -.-> useAppKitBalance
  useAppKitWallet -.-> useAppKitAccount
  usePay -.-> useAvailableExchanges
  usePayUrlActions -.-> useExchangeBuyStatus
```

These hooks provide a modular way to integrate wallet functionality into your application, allowing you to use only the features you need.

## useAppKit

The primary hook for controlling the modal's visibility and behavior. Use this hook when you need to programmatically open or close the modal, or when you want to show specific views like the connection screen or account details.

```ts theme={null}
import { useAppKit } from "@reown/appkit/react";

export default function Component() {
  const { open, close } = useAppKit();
}
```

### Use Cases

* Opening the modal when a user clicks a "Connect Wallet" button
* Closing the modal after a successful connection
* Opening specific views of the modal (e.g., account view, connect view)
* Handling custom wallet connection flows

### Returns

* `open`: Function to open the modal
* `close`: Function to close the modal

### Parameters

You can also select the modal's view when calling the `open` function

```ts theme={null} theme={null} theme={null}
open({ view: "Account" });

// to connect and show multi wallets view
open({ view: "Connect" });

// to connect and show only solana wallets
open({ view: "Connect", namespace: "solana" });

// to connect and show only bitcoin wallets
open({ view: "Connect", namespace: "bip122" });

// to connect and show only ethereum wallets
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
open({ view: 'WalletSend' })
```

**Available namespaces for the Connect view:**

| Namespace | Description                        |
| --------- | ---------------------------------- |
| solana    | For connecting to Solana wallets   |
| bip122    | For connecting to Bitcoin wallets  |
| eip155    | For connecting to Ethereum wallets |

**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                                                                                                                                       |
| WalletSend      | Token sending interface that allows users to send tokens to another address                                                                             |
| Swap            | Swap main view                                                                                                                                          |
| ProfileWallets  | View for managing connected wallets in the user profile                                                                                                 |

## useAppKitAccount

The essential hook for accessing wallet connection state and user information. Use this hook whenever you need to know if a user is connected, get their wallet address, or access their embedded wallet details.

```ts theme={null}
import { useAppKitAccount } from "@reown/appkit/react";

const { address, isConnected, caipAddress, status, embeddedWalletInfo } =
  useAppKitAccount();
```

### Use Cases

* Displaying the connected wallet address in your UI
* Checking if a user is connected before showing certain features
* Getting user information for embedded wallets
* Handling multi-chain scenarios where you need account info for specific chains

<Note>
  Related hooks: [useAppKitWallet](#useappkitwallet), [useDisconnect](#usedisconnect)
</Note>

Hook for accessing account data and connection status for each namespace when working in a multi-chain environment.

```ts theme={null}
import { useAppKitAccount } from "@reown/appkit/react";

const eip155Account = useAppKitAccount({ namespace: "eip155" }); // for EVM chains
const solanaAccount = useAppKitAccount({ namespace: "solana" });
const bip122Account = useAppKitAccount({ namespace: "bip122" }); // for bitcoin
```

### Returns

* `allAccounts`: A list of connected accounts. Each account includes the `address`, `type`, and `namespace`. Accounts also include `caipAddress` (CAIP-10 format) and `chainId` when network information is available.
* `address`: The current account address
* `caipAddress`: The current account address in CAIP format
* `isConnected`: Boolean that indicates if the user is connected
* `status`: The current connection status
* `embeddedWalletInfo`: The current embedded wallet information

```typescript theme={null}
type EmbeddedWalletInfo {
  user: {
    email?: string | null | undefined
    username?: string | null | undefined
  },
  accountType: 'eoa' | 'smartAccount',
  authProvider: 'google' | 'apple' | 'facebook' | 'x' | 'discord' | 'farcaster' | 'github' | 'email',
  isSmartAccountDeployed: boolean
}

type ConnectionStatus = 'connected' | 'disconnected' | 'connecting' | 'reconnecting'

type Account = {
  namespace: ChainNamespace
  address: string
  chainId?: string | number
  caipAddress?: `${string}:${string}:${string}`
  type: string
  publicKey?: string // Available for Bitcoin (bip122) accounts
}

type UseAppKitAccountReturnType = {
  isConnected: boolean
  allAccounts: Account[]
  status?: ConnectionStatus
  address?: string
  caipAddress?: `${string}:${string}`
  embeddedWalletInfo?: EmbeddedWalletInfo
}
```

### Getting Bitcoin Public Keys

When working with Bitcoin accounts, you can extract public keys from the connected accounts:

```tsx theme={null}
import { useAppKitAccount } from "@reown/appkit/react";

function BitcoinComponent() {
  const { allAccounts } = useAppKitAccount({ chainNamespace: 'bip122' });
  const publicKeys = allAccounts.map(acc => acc.publicKey);
  
  return (
    <div>
      {publicKeys.map((key, index) => (
        <div key={index}>Public Key: {key}</div>
      ))}
    </div>
  );
}
```

This is particularly useful when you need to access Bitcoin public keys for transaction signing or address derivation.

## useAppKitWallet

<Frame>
  <img />
</Frame>

The direct wallet connection hook that enables connectivity to specific wallets without opening the modal. Use this hook when you want to provide direct wallet buttons, create a customized wallet selection interface, or implement social login options.

Using the wallet button hooks ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.
This hook allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need to open the traditional modal.
Execute this command to install the library for use it:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-wallet-button
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-wallet-button
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-wallet-button
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-wallet-button
  ```
</CodeGroup>

Then you have to import the hook in your project:

```tsx theme={null}
import { useAppKitWallet } from "@reown/appkit-wallet-button/react";
```

And finally, you can use the hook in your project:

```tsx theme={null}
const { isReady, isPending, connect } = useAppKitWallet({
    namespace: 'eip155', // Optional: specify chain namespace
    onSuccess(parsedCaipAddress) {
      // Access the parsed CAIP address object
      // See: https://github.com/reown-com/appkit/blob/main/packages/common/src/utils/ParseUtil.ts#L3-L7
      // ...
    },
    onError(error) {
      // ...
    }
  })

...

// Connect to WalletConnect
<Button onClick={() => connect("walletConnect")} />
```

#### Options for the connect parameter

AppKit supports more than 40 of the top wallets globally ([see full list](https://github.com/reown-com/appkit/blob/main/packages/wallet-button/src/utils/ConstantsUtil.ts#L11-L55)), WalletConnect, social logins, and email authentication:

| Type          | Options                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| QR Code       | walletConnect                                                                                                                                                                                                                                                                                                                                                                                                                         |
| Wallets       | metamask, trust, coinbase, rainbow, 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, tokenpocket, haha, ambire-wallet, bitpay, blade-wallet, brave, coinstats, kresus-superapp, plena-app, status, tomo-wallet, valora, and zengo-wallet |
| Social logins | google, github, apple, facebook, x, discord and farcaster                                                                                                                                                                                                                                                                                                                                                                             |
| Email         | email                                                                                                                                                                                                                                                                                                                                                                                                                                 |

#### Enhanced Multichain Examples

The `useAppKitWallet` hook now supports enhanced multichain functionality with the namespace prop:

```tsx theme={null}
import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

// Multiple wallet connections for different chains
export function MultichainWalletConnector() {
  // Ethereum/EVM connection
  const { connect: connectEVM } = useAppKitWallet({
    namespace: 'eip155',
    onSuccess: (address) => console.log('Connected to EVM:', address)
  })

  // Solana connection
  const { connect: connectSolana } = useAppKitWallet({
    namespace: 'solana',
    onSuccess: (address) => console.log('Connected to Solana:', address)
  })

  // Bitcoin connection
  const { connect: connectBitcoin } = useAppKitWallet({
    namespace: 'bip122',
    onSuccess: (address) => console.log('Connected to Bitcoin:', address)
  })

  return (
    <div>
      <button onClick={() => connectEVM('metamask')}>
        Connect MetaMask (EVM)
      </button>
      <button onClick={() => connectSolana('phantom')}>
        Connect Phantom (Solana)
      </button>
      <button onClick={() => connectBitcoin('leather')}>
        Connect Leather (Bitcoin)
      </button>
    </div>
  )
}
```

#### Use Cases

`useAppKitWallet` enables:

1. **Direct Wallet Integration**
   * Direct connection to specific wallets (e.g., MetaMask, Coinbase)
   * Streamlined connection flow without modal

2. **Social Authentication**
   * Social login options (Google, GitHub, etc.)
   * Email-based authentication

3. **Custom Wallet Selection**
   * Branded wallet selection interface
   * Custom styling and filtering options

4. **Network-Specific Access**
   * Chain-specific wallet options
   * Conditional wallet availability

5. **Enhanced UX**
   * Loading states and error handling
   * Custom notifications
   * Responsive connection states

6. **Multichain Support**
   * Connect to specific blockchain namespaces
   * Target wallets for specific chains (EVM, Solana, Bitcoin)

#### Multichain Examples

#### Integration with React Components

The `useAppKitWallet` hook works seamlessly with the new React components:

```tsx theme={null}
import { useAppKitWallet } from '@reown/appkit-wallet-button/react'
import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function WalletInterface() {
  const { isReady, isPending, connect } = useAppKitWallet({
    namespace: 'eip155',
    onSuccess: (data) => {
      console.log('Wallet connected:', data)
    }
  })

  return (
    <div>
      {/* React components for UI */}
      <AppKitButton />
      <AppKitNetworkButton />
      
      {/* Programmatic wallet connections */}
      <button 
        onClick={() => connect('metamask')}
        disabled={!isReady || isPending}
      >
        {isPending ? 'Connecting...' : 'Connect MetaMask'}
      </button>
    </div>
  )
}

// Usage
<Button onClick={() => connectEVM("metamask")}>Connect MetaMask (EVM)</Button>
<Button onClick={() => connectSolana("phantom")}>Connect Phantom (Solana)</Button>
<Button onClick={() => connectBitcoin("leather")}>Connect Leather (Bitcoin)</Button>
```

#### Parameters

* `namespace` (optional): The blockchain namespace to target. Supported values:
  * `'eip155'` - Ethereum and EVM-compatible chains
  * `'solana'` - Solana blockchain
  * `'bip122'` - Bitcoin blockchain
  * If not specified, uses the default namespace from your AppKit configuration

## useAppKitNetwork

The network management hook that provides access to chain information and network switching capabilities. Use this hook when you need to display the current network, switch between networks, or validate network compatibility.

```ts theme={null}
import { useAppKitNetwork } from "@reown/appkit/react";

export default Component(){
  const { caipNetwork, caipNetworkId, chainId, switchNetwork } = useAppKitNetwork()
}
```

### Use Cases

* Displaying the current network/chain in your UI
* Switching networks when a user selects a different chain
* Validating if a user is on the correct network for your dApp
* Handling network-specific features or contracts

<Note>
  Related hooks: [useAppKitBalance](#useappkitbalance), [useWalletInfo](#usewalletinfo)
</Note>

### Returns

* `caipNetwork`: The current network object
* `caipNetworkId`: The current network id in CAIP format
* `chainId`: The current chain id
* `switchNetwork`: Function to switch the network. Accepts a `caipNetwork` object as argument.

<Note>
  See how to import or create a networks
  [here](/appkit/react/core/custom-networks).
</Note>

## useAppKitBalance

The balance management hook that provides functions to fetch the native token balance of the connected wallet. Use this hook when you need to display the user's balance, check if they have sufficient funds for a transaction, or track balance changes.

```ts theme={null}
import { useAppKitBalance } from "@reown/appkit/react";

function BalanceDisplay() {
  const { fetchBalance } = useAppKitBalance();
  const [balance, setBalance] = useState();
  const { isConnected } = useAppKitAccount();
  
  useEffect(() => {
    if (isConnected) {
      fetchBalance().then(setBalance);
    }
  }, [isConnected, fetchBalance]);

  return (
    <div>
      {balance && (
        <p>Balance: {balance.data?.formatted} {balance.data?.symbol}</p>
      )}
    </div>
  );
}
```

### Use Cases

* Displaying the user's wallet balance in your UI
* Checking if a user has sufficient funds before initiating a transaction
* Monitoring balance changes after transactions
* Implementing balance-based features or UIs

<Note>
  Related hooks: [useAppKitAccount](#useappkitaccount), [useAppKitNetwork](#useappkitnetwork)
</Note>

### Returns

* `fetchBalance`: Async function that returns the current balance of the connected wallet
  ```ts theme={null}
  type BalanceResult = {
    data?: {
      formatted: string;
      symbol: string;
    };
    error: string | null;
    isSuccess: boolean;
    isError: boolean;
  }
  ```

## useAppKitState

The state management hook that provides real-time access to the modal's current state. Use this hook when you need to react to modal state changes or synchronize your UI with the modal's status.

```ts theme={null}
import { useAppKitState } from "@reown/appkit/react";

const { 
  initialized, 
  loading, 
  open, 
  selectedNetworkId, 
  activeChain 
} = useAppKitState();
```

### Use Cases

* Syncing your UI with the modal's open/closed state
* Tracking which network the user has selected
* Creating custom UI elements that respond to modal state changes
* Implementing custom loading states based on modal state
* Checking if AppKit has been fully initialized before rendering components
* Displaying chain-specific UI based on the active blockchain namespace

### Returns

* `initialized`: Boolean that indicates if AppKit has been initialized. This sets to true when all controllers, adapters and internal state is ready
* `loading`: Boolean that indicates if AppKit is loading
* `open`: Boolean that indicates if the modal is open
* `selectedNetworkId`: The current chain id selected by the user in CAIP-2 format
* `activeChain`: The active chain namespace (e.g., 'eip155', 'solana', 'bip122')
* `multiWallet`: Boolean that indicates if multi-wallet functionality is enabled (requires Pro or Enterprise plan)

### Example Usage

```tsx theme={null}
import { useAppKitState } from "@reown/appkit/react";

function AppStatus() {
  const { 
    initialized, 
    loading, 
    open, 
    selectedNetworkId, 
    activeChain,
    multiWallet 
  } = useAppKitState();

  if (!initialized) {
    return <div>Initializing AppKit...</div>;
  }

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <p>Modal is {open ? 'open' : 'closed'}</p>
      <p>Selected Network: {selectedNetworkId}</p>
      <p>Active Chain: {activeChain}</p>
      {multiWallet && <p>Multi-wallet mode is enabled</p>}
    </div>
  );
}
```

## useAppKitTheme

The theming hook that controls the visual appearance of the modal. Use this hook when you need to customize the modal's colors, implement dark/light mode, or match the modal's appearance with your application's theme.

```ts theme={null}
import { useAppKitTheme } from "@reown/appkit/react";
const { themeMode, themeVariables, setThemeMode, setThemeVariables } =
  useAppKitTheme();

setThemeMode("dark");

setThemeVariables({
  "--apkt-color-mix": "#00BB7F",
  "--apkt-color-mix-strength": 40,
});
```

### Use Cases

* Implementing dark/light mode in your dApp
* Customizing the modal's appearance to match your brand
* Creating theme-specific UI elements
* Syncing the modal's theme with your app's theme

## useAppKitEvents

Subscribes to modal, wallet, and transaction events emitted by AppKit. Useful for analytics, telemetry, custom notifications, or reacting to specific user actions.

```ts theme={null}
import { useAppKitEvents } from "@reown/appkit/react";

const events = useAppKitEvents();
```

The hook returns the latest event object. Each time a new event is emitted, the component re-renders with the new value:

```ts theme={null}
{
  timestamp: number
  data: {
    type: 'track' | 'error'
    event: string        // the event name
    properties?: object  // event-specific payload
  }
}
```

### Use Cases

* Tracking user interactions with the modal
* Implementing analytics for wallet connections
* Creating custom notifications for connection events
* Handling specific wallet events in your application

<Card title="Full events reference" icon="list" href="/appkit/features/events">
  See every available event, its trigger condition, and the properties payload.
</Card>

## useDisconnect

The session management hook that handles wallet disconnection. Use this hook when implementing logout functionality or when you need to clean up resources after a user disconnects their wallet.

```ts theme={null}
import { useDisconnect } from "@reown/appkit/react";

const { disconnect } = useDisconnect();

// Disconnect from all namespaces
await disconnect();

// Disconnect from specific namespace
await disconnect({ namespace: 'eip155' }); // Disconnect from Ethereum
await disconnect({ namespace: 'solana' }); // Disconnect from Solana  
await disconnect({ namespace: 'bip122' }); // Disconnect from Bitcoin
```

### Parameters

* `namespace` (optional): The specific chain namespace to disconnect from. If not provided, disconnects from all connected namespaces.

### Use Cases

* Implementing a "Disconnect Wallet" button
* Handling logout flows in your application
* Cleaning up resources when a user disconnects
* Resetting application state after disconnection
* Disconnecting from specific chains in multi-chain applications

## useWalletInfo

The wallet information hook that provides details about the connected wallet. Use this hook when you need to display wallet-specific information, show wallet branding, or implement wallet-specific features.

```tsx theme={null}
import { useWalletInfo } from '@reown/appkit/react'

function WalletDisplay() {
  const { walletInfo } = useWalletInfo();
  
  return (
    <div className="wallet-info">
      {walletInfo?.name && (
        <>
          <img src={walletInfo.icon} alt={walletInfo.name} />
          <span>{walletInfo.name}</span>
        </>
      )}
    </div>
  );
}
```

### Use Cases

* Displaying wallet-specific information in your UI
* Implementing wallet-specific features
* Showing wallet icons or branding
* Handling wallet-specific behaviors

## useAppKitProvider

Hook that returns the `walletProvider` and the `WalletProviderType` for interacting with the connected wallet across different blockchain adapters.

```ts theme={null}
import { useAppKitProvider } from "@reown/appkit/react";
import type { Provider } from "@reown/appkit/react";

const { walletProvider } = useAppKitProvider<Provider>("eip155");
```

### Use Cases

* Accessing the wallet provider for direct blockchain interactions
* Signing transactions and messages with the connected wallet
* Integrating with blockchain-specific libraries (ethers, solana web3, etc.)
* Building custom wallet interactions across different chains

### Adapter Examples

<Tabs>
  <Tab title="EVM (eip155)">
    ```tsx theme={null}
    import { useAppKitProvider } from "@reown/appkit/react";
    import type { Provider } from "@reown/appkit/react";

    const { walletProvider } = useAppKitProvider<Provider>("eip155");
    ```
  </Tab>

  <Tab title="Solana">
    ```tsx theme={null}
    import { useAppKitProvider } from "@reown/appkit/react";
    import type { Provider } from "@reown/appkit-adapter-solana/react";

    const { walletProvider } = useAppKitProvider<Provider>("solana");
    ```
  </Tab>

  <Tab title="Bitcoin (bip122)">
    ```tsx theme={null}
    import { useAppKitProvider } from "@reown/appkit/react";
    import type { BitcoinConnector } from "@reown/appkit-adapter-bitcoin";

    const { walletProvider } = useAppKitProvider<BitcoinConnector>("bip122");
    ```
  </Tab>
</Tabs>

<Note>
  Related hooks: [useAppKitAccount](#useappkitaccount), [useAppKitNetwork](#useappkitnetwork)
</Note>

## useAppKitConnections

Hook that manages multiple wallet connections and provides access to all connected wallets. This hook enables multi-wallet functionality, allowing users to connect and manage multiple wallets simultaneously within your application.

<Note>
  Multi-wallet functionality must be enabled in your AppKit configuration. This feature requires a Pro or Enterprise plan and must be activated in your Reown Cloud dashboard.
</Note>

```ts theme={null}
import { useAppKitConnections } from "@reown/appkit/react";

function WalletManager() {
  const { connections, recentConnections } = useAppKitConnections();
  
  return (
    <div>
      <h3>Active Connections ({connections.length})</h3>
      {connections.map((connection) => (
        <div key={connection.connectorId}>
          <img src={connection.icon} alt={connection.name} />
          <span>{connection.name}</span>
          {connection.accounts.map((account) => (
            <div key={account.address}>{account.address}</div>
          ))}
        </div>
      ))}
      
      <h3>Recent Connections</h3>
      {recentConnections.map((connection) => (
        <div key={connection.connectorId}>
          <span>{connection.name}</span>
        </div>
      ))}
    </div>
  );
}
```

### Use Cases

* Managing multiple wallet connections simultaneously
* Building multi-wallet dashboards or portfolio views
* Implementing wallet comparison features
* Creating advanced wallet management interfaces
* Displaying wallet connection history

### Parameters

* `namespace` (optional): The blockchain namespace to filter connections. Supported values:
  * `'eip155'` - Ethereum and EVM-compatible chains
  * `'solana'` - Solana blockchain
  * `'bip122'` - Bitcoin blockchain
  * If not specified, uses the currently active namespace

### Returns

* `connections`: Array of currently connected wallet connections with the following structure:
  ```typescript theme={null}
  type Connection = {
    name?: string;                    // Wallet name (e.g., "MetaMask")
    icon?: string;                    // Wallet icon URL
    networkIcon?: string;             // Network icon URL
    connectorId: string;              // Unique connector identifier
    accounts: Array<{                 // Connected accounts
      address: string;                // Account address
      type?: string;                  // Account type (e.g., "eoa", "smartAccount")
      publicKey?: string;             // Public key (for Bitcoin)
      caipAddress?: string;           // CAIP-10 formatted address (e.g., "eip155:1:0x...")
    }>;
    caipNetwork?: CaipNetwork;        // Network information
    auth?: {                          // Authentication info (for social logins)
      name: string | undefined;
      username: string | undefined;
    };
  }
  ```

* `recentConnections`: Array of recently disconnected wallet connections (same structure as `connections`)

### Example: Multi-Chain Wallet Manager

```tsx theme={null}
import { useAppKitConnections } from "@reown/appkit/react";

function MultiChainWalletManager() {
  // Get connections for different chains
  const evmConnections = useAppKitConnections('eip155');
  const solanaConnections = useAppKitConnections('solana');
  const bitcoinConnections = useAppKitConnections('bip122');
  
  return (
    <div>
      <section>
        <h3>EVM Wallets ({evmConnections.connections.length})</h3>
        {evmConnections.connections.map((conn) => (
          <WalletCard key={conn.connectorId} connection={conn} />
        ))}
      </section>
      
      <section>
        <h3>Solana Wallets ({solanaConnections.connections.length})</h3>
        {solanaConnections.connections.map((conn) => (
          <WalletCard key={conn.connectorId} connection={conn} />
        ))}
      </section>
      
      <section>
        <h3>Bitcoin Wallets ({bitcoinConnections.connections.length})</h3>
        {bitcoinConnections.connections.map((conn) => (
          <WalletCard key={conn.connectorId} connection={conn} />
        ))}
      </section>
    </div>
  );
}
```

<Note>
  Related hooks: [useAppKitConnection](#useappkitconnection), [useAppKitAccount](#useappkitaccount), [useAppKitState](#useappkitstate)
</Note>

## useAppKitConnection

Hook that manages the active wallet connection and provides connection switching capabilities. This hook enables you to work with the currently active connection, switch between multiple connected wallets, and delete wallet connections from the recent list.

<Note>
  Multi-wallet functionality must be enabled in your AppKit configuration. This feature requires a Pro or Enterprise plan and must be activated in your Reown Cloud dashboard.
</Note>

```ts theme={null}
import { useAppKitConnection } from "@reown/appkit/react";

function ConnectionManager() {
  const { 
    connection, 
    isPending, 
    switchConnection, 
    deleteConnection 
  } = useAppKitConnection({
    namespace: 'eip155',
    onSuccess({ address, namespace, hasSwitchedAccount, hasSwitchedWallet, hasDeletedWallet }) {
      if (hasDeletedWallet) {
        console.log('Wallet deleted');
      } else if (hasSwitchedWallet) {
        console.log('Switched to wallet:', address);
      } else if (hasSwitchedAccount) {
        console.log('Switched to account:', address);
      }
    },
    onError(error) {
      console.error('Connection error:', error);
    }
  });
  
  return (
    <div>
      {connection && (
        <div>
          <h3>Active Connection</h3>
          <p>Wallet: {connection.name}</p>
          <p>Address: {connection.accounts[0]?.address}</p>
        </div>
      )}
    </div>
  );
}
```

### Use Cases

* Switching between multiple connected wallets
* Accessing the currently active wallet connection
* Building connection management interfaces
* Implementing wallet-specific features based on the active connection
* Managing wallet connection history
* Handling connection state changes with callbacks

### Parameters

The hook accepts an optional configuration object with the following properties:

* `namespace` (optional): The blockchain namespace to target. Supported values:
  * `'eip155'` - Ethereum and EVM-compatible chains
  * `'solana'` - Solana blockchain
  * `'bip122'` - Bitcoin blockchain
  * If not specified, uses the currently active namespace

* `onSuccess` (optional): Callback function called when a connection operation succeeds
  ```typescript theme={null}
  onSuccess?: (params: {
    address: string;              // The address that was switched to or deleted
    namespace: ChainNamespace;    // The blockchain namespace
    hasSwitchedAccount: boolean;  // True if switched to different account in same wallet
    hasSwitchedWallet: boolean;   // True if switched to different wallet
    hasDeletedWallet: boolean;    // True if a wallet connection was deleted
  }) => void;
  ```

* `onError` (optional): Callback function called when a connection operation fails
  ```typescript theme={null}
  onError?: (error: Error) => void;
  ```

### Returns

* `connection`: The currently active wallet connection (same structure as in [useAppKitConnections](#useappkitconnections))
  ```typescript theme={null}
  type Connection = {
    name?: string;
    icon?: string;
    networkIcon?: string;
    connectorId: string;
    accounts: Array<{
      address: string;
      type?: string;
      publicKey?: string;
    }>;
    caipNetwork?: CaipNetwork;
    auth?: {
      name: string | undefined;
      username: string | undefined;
    };
  }
  ```

* `isPending`: Boolean indicating if a connection operation is in progress

* `switchConnection`: Function to switch to a different connected wallet or account
  ```typescript theme={null}
  switchConnection: (params: {
    connection: Connection;  // The connection to switch to
    address?: string;        // Optional: specific account address to switch to
  }) => Promise<void>;
  ```

* `deleteConnection`: Function to remove a wallet connection from the recent connections list
  ```typescript theme={null}
  deleteConnection: (params: {
    address: string;      // Account address to delete
    connectorId: string;  // Connector ID of the wallet to delete
  }) => void;
  ```

### Example: Complete Connection Manager

```tsx theme={null}
import { useAppKitConnection, useAppKitConnections } from "@reown/appkit/react";
import { useDisconnect } from "@reown/appkit/react";

function WalletSwitcher() {
  const { connections, recentConnections } = useAppKitConnections();
  const { 
    connection: activeConnection, 
    isPending, 
    switchConnection, 
    deleteConnection 
  } = useAppKitConnection({
    onSuccess({ hasSwitchedWallet, hasDeletedWallet }) {
      if (hasDeletedWallet) {
        console.log('Wallet removed from history');
      } else if (hasSwitchedWallet) {
        console.log('Successfully switched wallet');
      }
    },
    onError(error) {
      console.error('Error:', error.message);
    }
  });
  const { disconnect } = useDisconnect();
  
  const handleSwitch = (connection, address) => {
    switchConnection({ connection, address });
  };
  
  const handleDelete = (address, connectorId) => {
    deleteConnection({ address, connectorId });
  };
  
  const handleDisconnect = (connectorId) => {
    disconnect({ id: connectorId });
  };
  
  return (
    <div>
      <h3>Active Wallet</h3>
      {activeConnection && (
        <div className={isPending ? 'loading' : ''}>
          <img src={activeConnection.icon} alt={activeConnection.name} />
          <span>{activeConnection.name}</span>
          {activeConnection.accounts.map((account) => (
            <div key={account.address}>
              <span>{account.address}</span>
              {activeConnection.accounts.length > 1 && (
                <button onClick={() => handleSwitch(activeConnection, account.address)}>
                  Switch to this account
                </button>
              )}
            </div>
          ))}
          <button onClick={() => handleDisconnect(activeConnection.connectorId)}>
            Disconnect
          </button>
        </div>
      )}
      
      <h3>Other Connected Wallets</h3>
      {connections
        .filter(conn => conn.connectorId !== activeConnection?.connectorId)
        .map((connection) => (
          <div key={connection.connectorId}>
            <img src={connection.icon} alt={connection.name} />
            <span>{connection.name}</span>
            <button 
              onClick={() => handleSwitch(connection, connection.accounts[0]?.address)}
              disabled={isPending}
            >
              Switch to this wallet
            </button>
            <button onClick={() => handleDisconnect(connection.connectorId)}>
              Disconnect
            </button>
          </div>
        ))}
      
      <h3>Recent Wallets</h3>
      {recentConnections.map((connection) => (
        <div key={connection.connectorId}>
          <span>{connection.name}</span>
          {connection.accounts.map((account) => (
            <div key={account.address}>
              <span>{account.address}</span>
              <button 
                onClick={() => handleDelete(account.address, connection.connectorId)}
              >
                Remove from history
              </button>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}
```

### Multi-Account Switching

When a wallet has multiple accounts, you can switch between them:

```tsx theme={null}
import { useAppKitConnection } from "@reown/appkit/react";

function AccountSwitcher() {
  const { connection, switchConnection } = useAppKitConnection({
    onSuccess({ hasSwitchedAccount, address }) {
      if (hasSwitchedAccount) {
        console.log('Switched to account:', address);
      }
    }
  });
  
  if (!connection) return null;
  
  return (
    <div>
      <h3>Accounts in {connection.name}</h3>
      {connection.accounts.map((account) => (
        <button
          key={account.address}
          onClick={() => switchConnection({ 
            connection, 
            address: account.address 
          })}
        >
          {account.address}
        </button>
      ))}
    </div>
  );
}
```

<Note>
  Related hooks: [useAppKitConnections](#useappkitconnections), [useAppKitAccount](#useappkitaccount), [useDisconnect](#usedisconnect)
</Note>

## usePay

Hook that manages payment modal interactions and handles crypto payment flows. Use this hook when implementing payment features with exchange integrations.

```ts theme={null}
import { usePay } from "@reown/appkit-pay/react";

const { pay, isLoading, error } = usePay({
  onSuccess: (result) => console.log('Payment successful:', result),
  onError: (error) => console.error('Payment failed:', error)
});
```

### Use Cases

* Implementing crypto payment flows in your application
* Handling payment success and error states
* Integrating with centralized exchanges for payments
* Building custom payment interfaces

### Parameters

* `onSuccess`: Optional callback function called when payment succeeds
* `onError`: Optional callback function called when payment fails

### Returns

* `pay`: Function to initiate a payment with specified parameters
* `isLoading`: Boolean indicating if a payment is in progress
* `error`: Error object if payment fails

<Note>
  Related hooks: [useAvailableExchanges](#useavailableexchanges), [usePayUrlActions](#usepayurlactions)
</Note>

## useAvailableExchanges

Hook that fetches and manages the state for available exchanges. Use this hook when you need to display available payment options or filter exchanges based on criteria.

```ts theme={null}
import { useAvailableExchanges } from "@reown/appkit-pay/react";

const { data, isLoading, error, fetch } = useAvailableExchanges({
  isFetchOnInit: true,
  asset: 'ETH',
  amount: 100,
  network: 'eip155:1'
});
```

### Use Cases

* Displaying available exchanges to users
* Filtering exchanges based on asset or network
* Building custom exchange selection interfaces
* Implementing exchange comparison features

### Parameters

* `isFetchOnInit`: Whether to fetch exchanges on hook initialization
* `asset`: Filter exchanges by specific asset
* `amount`: Filter exchanges by minimum amount
* `network`: Filter exchanges by network support

### Returns

* `data`: Array of available exchanges
* `isLoading`: Boolean indicating if exchanges are being fetched
* `error`: Error object if fetching fails
* `fetch`: Function to manually refetch exchanges

<Note>
  Related hooks: [usePay](#usepay), [usePayUrlActions](#usepayurlactions)
</Note>

## usePayUrlActions

Hook that provides functions to interact with specific exchange URLs, returning the sessionId needed for status tracking. Use this hook when implementing custom exchange flows.

```ts theme={null}
import { usePayUrlActions } from "@reown/appkit-pay/react";

const { getUrl, openUrl } = usePayUrlActions();

// Get exchange URL
const { url, sessionId } = await getUrl('binance', {
  asset: 'ETH',
  amount: 0.1,
  recipient: '0x...'
});

// Open exchange URL in new tab
const { url, sessionId } = await openUrl('coinbase', {
  asset: 'USDC',
  amount: 100,
  recipient: '0x...'
}, true);
```

### Use Cases

* Building custom exchange integration flows
* Implementing exchange URL generation
* Creating custom payment interfaces
* Tracking exchange sessions for status monitoring

### Returns

* `getUrl`: Function that returns exchange URL and session ID
* `openUrl`: Function that opens exchange URL and returns session data

<Note>
  Related hooks: [useExchangeBuyStatus](#useexchangebuystatus), [useAvailableExchanges](#useavailableexchanges)
</Note>

## useExchangeBuyStatus

Hook that fetches and polls for the status of a headless payment transaction using exchangeId and sessionId. Use this hook to track payment progress and handle completion.

```ts theme={null}
import { useExchangeBuyStatus } from "@reown/appkit-pay/react";

const { data, isLoading, error, refetch } = useExchangeBuyStatus({
  exchangeId: 'binance',
  sessionId: 'session-123',
  pollingInterval: 5000,
  isEnabled: true,
  onSuccess: (status) => console.log('Payment completed:', status),
  onError: (error) => console.error('Payment failed:', error)
});
```

### Use Cases

* Tracking payment transaction status
* Implementing payment progress indicators
* Handling payment completion and failure states
* Building real-time payment monitoring

### Parameters

* `exchangeId`: The exchange identifier
* `sessionId`: The session ID from payment URL actions
* `pollingInterval`: How often to check status (in milliseconds)
* `isEnabled`: Whether to enable status polling
* `onSuccess`: Callback for successful payment completion
* `onError`: Callback for payment errors

### Returns

* `data`: Current payment status data
* `isLoading`: Boolean indicating if status is being fetched
* `error`: Error object if status fetching fails
* `refetch`: Function to manually refetch status

<Note>
  Related hooks: [usePayUrlActions](#usepayurlactions), [usePay](#usepay)
</Note>

## useAppKitUpdateEmail

Hook that updates user email address with success and error handling. Use this hook when implementing email update functionality for user accounts.

```ts theme={null}
import { useAppKitUpdateEmail } from "@reown/appkit/react";

const { data, error, isPending, isError, isSuccess, updateEmail } = useAppKitUpdateEmail({
  onSuccess: (data) => console.log('Email updated:', data.email),
  onError: (error) => console.error('Update failed:', error)
});
```

### Use Cases

* Implementing email update functionality
* Building user profile management interfaces
* Handling email verification flows
* Creating account settings pages

### Parameters

* `onSuccess`: Optional callback function called when email update succeeds
* `onError`: Optional callback function called when email update fails

### Returns

* `data`: Updated email data object
* `error`: Error object if update fails
* `isPending`: Boolean indicating if update is in progress
* `isError`: Boolean indicating if there was an error
* `isSuccess`: Boolean indicating if update was successful
* `updateEmail`: Function to trigger email update

<Note>
  Related hooks: [useAppKitAccount](#useappkitaccount), [useAppKitWallet](#useappkitwallet)
</Note>

## useAppKitSIWX

Hook that provides access to Sign In With X (SIWX) configuration and state. Use this hook when implementing custom authentication flows with various blockchain protocols.

```ts theme={null}
import { useAppKitSIWX } from "@reown/appkit/react";

const siwxConfig = useAppKitSIWX();

if (siwxConfig) {
  console.log('SIWX enabled with config:', siwxConfig);
}
```

### Use Cases

* Implementing custom Sign In With X flows
* Accessing SIWX configuration for custom authentication
* Building protocol-specific authentication interfaces
* Handling multi-protocol sign-in scenarios

### Returns

* `siwxConfig`: The current SIWX configuration object, or undefined if not configured

<Note>
  Related hooks: [useAppKitAccount](#useappkitaccount), [useAppKitUpdateEmail](#useappkitupdateemail)
</Note>

## useAppKitConnection (Solana)

Solana-specific hook that provides access to the Solana connection instance for blockchain interactions. Use this hook when building Solana-specific features.

```ts theme={null}
import { useAppKitConnection } from "@reown/appkit-adapter-solana/react";

const { connection } = useAppKitConnection();

if (connection) {
  // Use connection for Solana blockchain interactions
  const balance = await connection.getBalance(publicKey);
}
```

### Use Cases

* Accessing Solana connection for blockchain interactions
* Building Solana-specific transaction flows
* Implementing Solana program interactions
* Creating Solana wallet features

### Returns

* `connection`: The Solana connection instance, or undefined if not connected

<Note>
  This is the Solana-specific version of useAppKitConnection. For general connection management, see [useAppKitConnection](#useappkitconnection).
</Note>

## Ethereum/Solana Library

<Tabs>
  <Tab title="Wagmi">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/react";

    function Components() {
      const { address, caipAddress, isConnected } = useAppKitAccount();

      //...
    }
    ```

    ### useSignMessage

    Hook for signing messages with connected account.

    ```tsx theme={null} theme={null} theme={null}
    import { useSignMessage } from "wagmi";

    function App() {
      const { signMessage } = useSignMessage();

      return (
        <button onClick={() => signMessage({ message: "hello world" })}>
          Sign message
        </button>
      );
    }
    ```

    <Card title="Learn More" href="https://wagmi.sh/react/api/hooks/useSignMessage" />
  </Tab>

  <Tab title="Ethers">
    ### switchNetwork

    ```tsx theme={null} theme={null} theme={null}
    import { createAppKit } from "@reown/appkit/react";
    import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";

    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata: metadata,
      features: {
        analytics: true,
      },
    });

    modal.switchNetwork(polygon);
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import { BrowserProvider } from "ethers";
    import { useAppKitProvider } from "@reown/appkit/react";

    function Components() {
      const { walletProvider } = useAppKitProvider("eip155");

      async function onSignMessage() {
        const provider = new BrowserProvider(walletProvider);
        const signer = await provider.getSigner();
        const signature = await signer?.signMessage("Hello AppKit Ethers");
        console.log(signature);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    ### getError

    ```ts theme={null} theme={null} theme={null}
    function Components() {
      const error = modal.getError();
      //...
    }
    ```

    <Card title="Learn More About Ethers" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>

  <Tab title="Ethers v5">
    ### switchNetwork

    ```tsx theme={null} theme={null} theme={null}
    import { createAppKit } from "@reown/appkit/react";
    import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";

    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata: metadata,
      features: {
        analytics: true,
      },
    });

    modal.switchNetwork(polygon);
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import {
      useAppKitAccount,
      useAppKitProvider,
      useAppKitNetwork,
    } from "@reown/appkit/react";
    import { ethers } from "ethers";
    import { useAppKitProvider } from "@reown/appkit/react";

    function Components() {
      const { walletProvider } = useAppKitProvider("eip155");
      const { address } = useAppKitAccount();
      const { chainId } = useAppKitNetwork();

      async function onSignMessage() {
        const provider = new ethers.providers.Web3Provider(walletProvider, chainId);
        const signer = provider.getSigner(address);
        const signature = await signer?.signMessage("Hello AppKit Ethers");
        console.log(signature);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    ### getError

    ```ts theme={null} theme={null} theme={null}
    function Components() {
      const error = modal.getError();
      //...
    }
    ```

    <Card title="Learn More About Ethers" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>

  <Tab title="Solana">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/react";

    function Components() {
      const { address, caipAddress, isConnected } = useAppKitAccount();

      //...
    }
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount, useAppKitProvider } from "@reown/appkit/react";
    import type { Provider } from "@reown/appkit-adapter-solana";

    function SignMessage() {
      // 0. Get account and provider
      const { address } = useAppKitAccount();
      const { walletProvider } = useAppKitProvider<Provider>("solana");

      // 1. Create a function to sign a message
      async function onSignMessage() {
        try {
          if (!walletProvider || !address) {
            throw Error("user is disconnected");
          }

          // 2. Encode message and sign it
          const encodedMessage = new TextEncoder().encode("Hello from AppKit");
          const signature = await walletProvider.signMessage(encodedMessage);

          console.log(signature);
        } catch (err) {
          // Handle Error Here
        }
      }

      // 3. Create a button to trigger the function
      return <button onClick={onSignMessage}>Sign Message</button>;
    }
    ```

    ## useAppKitConnection

    Hook that returns the connection object. More info about [Connection Class](https://solana-labs.github.io/solana-web3.js/classes/Connection.html)

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitConnection } from '@reown/appkit-adapter-solana/react'

    ...

    const { connection } = useAppKitConnection()
    ```
  </Tab>
</Tabs>


# Installation
Source: https://docs.reown.com/appkit/react/core/installation



AppKit provides seamless integration with multiple blockchain ecosystems. It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum,
[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON, TRON and other networks.

## Installation

Try installing AppKit Skills to get AI-assisted guidance. Your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.

## Custom Installation

<Warning>
  If you are setting up your React app, please **do not use** `npx create-react-app`, as it has been
  deprecated. Using it may cause dependency issues. Instead, please use
  [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to create your React app.
  You can set it up by running `npm create vite@latest`.
</Warning>

<Tabs>
  <Tab title="Wagmi">
    <Warning>
      AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.
    </Warning>

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @tanstack/react-query
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @tanstack/react-query
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @tanstack/react-query
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem @tanstack/react-query
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers v5">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Solana">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-solana
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Bitcoin">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
      ```
    </CodeGroup>
  </Tab>

  <Tab title="TON">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ton
      ```
    </CodeGroup>
  </Tab>

  <Tab title="TRON">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-tron
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Others networks (AppKit Core)">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Cloud Configuration

Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

## Implementation

AppKit providers two different approaches on React to initialize it.

<Tabs>
  <Tab title="AppKitProvider">
    Use `AppKitProvider` React component for easy integration in React applications. This component wraps your app and provides the AppKit context to all child components.

    ```tsx theme={null}
    import { AppKitProvider } from '@reown/appkit/react'

    function App() {
      return (
        <AppKitProvider
          projectId="YOUR_PROJECT_ID"
          networks={
            [
              /* Your Networks */
            ]
          }
        >
          {/* Your App */}
        </AppKitProvider>
      )
    }
    ```
  </Tab>

  <Tab title="createAppKit">
    Use `createAppKit` method from `@reown/appkit/react` to initialize AppKit instance and call it on the root of your application with desired parameters depending on your use case.

    ```tsx theme={null}
    import { createAppKit } from '@reown/appkit/react'

    createAppKit({
      networks: [
        /* Your networks */
      ],
      adapters: [
        /* Your adapters */
      ],
      ...appKitProps
    })

    function App() {
      return <>{children}</>
    }
    ```
  </Tab>
</Tabs>

### Adapter Configuration

<Tabs>
  <Tab title="Wagmi">
    <Card title="wagmi Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-wagmi">
      Check the React wagmi example
    </Card>

    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](../../../../cloud/blockchain-api) as a [transport](https://wagmi.sh/core/api/createConfig#transports)

    On top of your app set up the following configuration, making sure that all functions are called **outside** any React component to avoid unwanted rerenders.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { createAppKit } from '@reown/appkit/react'

    import { WagmiProvider } from 'wagmi'
    import { arbitrum, mainnet } from '@reown/appkit/networks'
    import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
    import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

    // 0. Setup queryClient
    const queryClient = new QueryClient()

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

    // 2. Create a metadata object - optional
    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. Set the networks
    const networks = [mainnet, arbitrum]

    // 4. Create Wagmi Adapter
    const wagmiAdapter = new WagmiAdapter({
      networks,
      projectId,
      ssr: true
    })

    // 5. Create modal
    createAppKit({
      adapters: [wagmiAdapter],
      networks,
      projectId,
      metadata,
      features: {
        analytics: true // Optional - defaults to your Cloud configuration
      }
    })

    export function AppKitProvider({ children }) {
      return (
        <WagmiProvider config={wagmiAdapter.wagmiConfig}>
          <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </WagmiProvider>
      )
    }
    ```

    ## Importing networks

    Reown AppKit use [Viem](https://viem.sh/) 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.

    ```js {2} theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { createAppKit } from '@reown/appkit'
    import { mainnet, arbitrum, base, scroll, polygon } from '@reown/appkit/networks'
    ```

    <Note>
      Looking to add a custom network? Check out the [custom networks](/appkit/react/core/custom-networks) section.
    </Note>
  </Tab>

  <Tab title="Ethers v5">
    <Card title="Ethers v5 Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-ethers5">
      Check the React ethers v5 example
    </Card>

    On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { createAppKit } from "@reown/appkit/react";
    import { Ethers5Adapter } from "@reown/appkit-adapter-ethers5";
    import { mainnet, arbitrum } from "@reown/appkit/networks";

    // 1. Get projectId
    const projectId = "YOUR_PROJECT_ID";

    // 2. Create a metadata object - optional
    const metadata = {
      name: "My Website",
      description: "My Website description",
      url: "https://mywebsite.com", // origin must match your domain & subdomain
      icons: ["https://avatars.mywebsite.com/"],
    };

    // 3. Create the AppKit instance
    createAppKit({
      adapters: [new Ethers5Adapter()],
      metadata: metadata,
      networks: [mainnet, arbitrum],
      projectId,
      features: {
        analytics: true, // Optional - defaults to your Cloud configuration
      },
    });

    export default function App() {
      return <YourApp />; //make sure you have configured the <appkit-button> inside
    }
    ```

    <Warning>
      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.
    </Warning>
  </Tab>

  <Tab title="Ethers">
    <Card title="Ethers Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-ethers">
      Check the React ethers example
    </Card>

    On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { createAppKit } from "@reown/appkit/react";
    import { EthersAdapter } from "@reown/appkit-adapter-ethers";
    import { arbitrum, mainnet } from "@reown/appkit/networks";

    // 1. Get projectId
    const projectId = "YOUR_PROJECT_ID";

    // 2. Set the networks
    const networks = [arbitrum, mainnet];

    // 3. Create a metadata object - optional
    const metadata = {
      name: "My Website",
      description: "My Website description",
      url: "https://mywebsite.com", // origin must match your domain & subdomain
      icons: ["https://avatars.mywebsite.com/"],
    };

    // 4. Create a AppKit instance
    createAppKit({
      adapters: [new EthersAdapter()],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true, // Optional - defaults to your Cloud configuration
      },
    });

    export default function App() {
      return <YourApp />; // Configure the <appkit-button> or a similar button inside
    }
    ```

    <Warning>
      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.
    </Warning>
  </Tab>

  <Tab title="Solana">
    <Warning>
      MetaMask does not currently support WalletConnect connections on Solana. The MetaMask team is working on adding this feature. In the meantime, we recommend using other wallets that support Solana. You can find the complete list of supported wallets on [WalletGuide](https://walletguide.walletconnect.network/).
    </Warning>

    <Card title="Solana Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-solana">
      Check the React Solana example
    </Card>

    AppKit Solana provides a set of React components and hooks to easily connect Solana wallets with your application.

    On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // App.tsx
    import { createAppKit } from "@reown/appkit/react";
    import { SolanaAdapter } from "@reown/appkit-adapter-solana/react";
    import { solana, solanaTestnet, solanaDevnet } from "@reown/appkit/networks";

    // 0. Set up Solana Adapter
    const solanaWeb3JsAdapter = new SolanaAdapter();

    // 1. Get projectId from https://dashboard.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
      },
    });

    export default function App() {
      return <YourApp />;
    }
    ```
  </Tab>

  <Tab title="Bitcoin">
    <Card title="Bitcoin Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-bitcoin">
      Check the React Bitcoin example
    </Card>

    AppKit Bitcoin provides a set of React components and hooks to easily connect Bitcoin wallets with your application.

    On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // App.tsx
    import { createAppKit } from '@reown/appkit/react'
    import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
    import { bitcoin, bitcoinTestnet, bitcoinSignet } from '@reown/appkit/networks'

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

    // 2. Set the networks
    const networks = [bitcoin, bitcoinTestnet, bitcoinSignet]

    // 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
    createAppKit({
      adapters: [bitcoinAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true // Optional - defaults to your Dashboard configuration,
        email: false,
        socials: []
      }
    })

    export default function App() {
      return <YourApp />
    }
    ```

    ## Bitcoin Provider Interface

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    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

    <Tabs>
      <Tab title="SignMessageParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          export type SignMessageParams = {
            /**
             * The message to be signed
             */
            message: string
            /**
             * The address to sign the message with
             */
            address: string
          }
        ```
      </Tab>

      <Tab title="SendTransferParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          export type SendTransferParams = {
            /**
             * The amount to be sent in satoshis
             */
            amount: string
            /**
             * The address to send the transfer to
             */
            recipient: string
          }
        ```
      </Tab>

      <Tab title="SignPSBTParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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

        }

        ```
      </Tab>
    </Tabs>

    ### Responses

    <Tabs>
      <Tab title="AccountAddress">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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'
          }
        ```
      </Tab>

      <Tab title="SignPSBTResponse">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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
          }
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="TON">
    AppKit TON provides a set of React components and hooks to easily connect TON wallets with your application.

    On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // App.tsx
    import { createAppKit } from '@reown/appkit/react'
    import { TonAdapter } from '@reown/appkit-adapter-ton'
    import { ton, tonTestnet } from '@reown/appkit/networks'

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

    // 2. Set the networks
    const networks = [ton, tonTestnet]

    // 3. Set up TON Adapter
    const tonAdapter = new TonAdapter({
      projectId
    })

    // 4. Create a metadata object - optional
    const metadata = {
      name: 'AppKit',
      description: 'AppKit TON Example',
      url: 'https://example.com', // origin must match your domain & subdomain
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // 5. Create modal
    createAppKit({
      adapters: [tonAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true // Optional - defaults to your Dashboard configuration,
        email: false,
        socials: []
      }
    })

    export default function App() {
      return <YourApp />
    }
    ```
  </Tab>

  <Tab title="TRON">
    AppKit TRON provides a set of React components and hooks to easily connect TRON wallets with your application.

    On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // App.tsx
    import { createAppKit } from '@reown/appkit/react'
    import { TronAdapter } from '@reown/appkit-adapter-tron'
    import { tronMainnet } from '@reown/appkit/networks'

    // Import wallet adapters you want to support
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'

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

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

    // 3. Set up TRON Adapter with wallet adapters
    const tronAdapter = new TronAdapter({
      walletAdapters: [
        new TronLinkAdapter({
          openUrlWhenWalletNotFound: false,
          checkTimeout: 3000
        })
      ]
    })

    // 4. Create a metadata object - optional
    const metadata = {
      name: 'AppKit',
      description: 'AppKit TRON Example',
      url: 'https://example.com', // origin must match your domain & subdomain
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // 5. Create modal
    createAppKit({
      adapters: [tronAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true, // Optional - defaults to your Dashboard configuration
        email: false,
        socials: []
      }
    })

    export default function App() {
      return <YourApp />
    }
    ```

    ## Install Wallet Adapters

    TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size.

    <Tabs>
      <Tab title="TronLink">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-tronlink
          ```
        </CodeGroup>
      </Tab>

      <Tab title="MetaMask">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-metamask-tron
          ```
        </CodeGroup>
      </Tab>

      <Tab title="Trust Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-trust
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-trust
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-trust
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-trust
          ```
        </CodeGroup>
      </Tab>

      <Tab title="OKX Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-okxwallet
          ```
        </CodeGroup>
      </Tab>

      <Tab title="BitKeep">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-bitkeep
          ```
        </CodeGroup>
      </Tab>

      <Tab title="Binance Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-binance
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-binance
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-binance
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-binance
          ```
        </CodeGroup>
      </Tab>
    </Tabs>

    <Note>
      For a complete list of available TRON wallet adapters, visit the [official wallet adapter documentation](https://walletadapter.org/docs/guide/wallet-reference.html).
    </Note>

    ### Using Multiple Wallet Adapters

    After installing your desired wallet adapters, import and add them to the `walletAdapters` array when creating the TRON adapter:

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'
    import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron'
    import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust'
    import { OkxWalletAdapter } from '@tronweb3/tronwallet-adapter-okxwallet'

    const tronAdapter = new TronAdapter({
      walletAdapters: [
        new TronLinkAdapter({
          openUrlWhenWalletNotFound: false,
          checkTimeout: 3000
        }),
        new MetaMaskAdapter(),
        new TrustAdapter(),
        new OkxWalletAdapter({
          openUrlWhenWalletNotFound: false
        })
      ]
    })
    ```
  </Tab>

  <Tab title="Others networks (AppKit Core)">
    <Card title="AppKit Core Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-core-universal-connector">
      Check the React AppKit Core example for Sui
    </Card>

    For a quick integration of Appkit Core you can use the `UniversalConnector` class. Which simplifies the integration of Appkit Core by providing a single interface for all the blockchain protocols.

    You can configure the Universal Connector with the networks you want to support.
    For more information, please visit [RPC Reference](https://docs.reown.com/advanced/multichain/rpc-reference/cosmos-rpc) section from our docs.

    We recommend creating a config file to establish a singleton instance for the Universal Connector:

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import type { AppKitNetwork } from '@reown/appkit/networks'
    import type { CustomCaipNetwork } from '@reown/appkit-common'
    import { UniversalConnector } from '@reown/appkit-universal-connector'

    // Get projectId from https://dashboard.reown.com
    export const projectId = import.meta.env.VITE_PROJECT_ID || "b56e18d47c72ab683b10814fe9495694" // this is a public projectId only to use on localhost

    if (!projectId) {
      throw new Error('Project ID is not defined')
    }

    // you can configure your own network
    const suiMainnet: CustomCaipNetwork<'sui'> = {
      id: 784,
      chainNamespace: 'sui' as const,
      caipNetworkId: 'sui:mainnet',
      name: 'Sui',
      nativeCurrency: { name: 'SUI', symbol: 'SUI', decimals: 9 },
      rpcUrls: { default: { http: ['https://fullnode.mainnet.sui.io:443'] } }
    }


    export async function getUniversalConnector() {
      const universalConnector = await UniversalConnector.init({
        projectId,
        metadata: {
          name: 'Universal Connector',
          description: 'Universal Connector',
          url: 'https://appkit.reown.com',
          icons: ['https://appkit.reown.com/icon.png']
        },
        networks: [
          {
            methods: ['sui_signPersonalMessage'],
            chains: [suiMainnet as CustomCaipNetwork],
            events: [],
            namespace: 'sui'
          }
        ]
      })

      return universalConnector
    }
    ```

    In de App.tsx file you can add :

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { useState, useEffect } from 'react'
    import { getUniversalConnector } from './config' // previous config file
    import { UniversalConnector } from '@reown/appkit-universal-connector'

    export function App() {
      const [universalConnector, setUniversalConnector] = useState<UniversalConnector>()
      const [session, setSession] = useState<any>()

      
      // Initialize the Universal Connector on component mount
      useEffect(() => {
        getUniversalConnector().then(setUniversalConnector)
      }, [])

      // Set the session state in case it changes
      useEffect(() => {
        setSession(universalConnector?.provider.session)
      }, [universalConnector?.provider.session])
    ```
  </Tab>
</Tabs>

## Trigger the modal

<Tabs>
  <Tab title="AppKit">
    To open AppKit you can use our [**React components**](/appkit/react/core/components) or build your own button with AppKit [**hooks**](/appkit/react/core/hooks#useAppKit).

    <CodeGroup>
      ```tsx ConnectButton.tsx theme={null}
      import { AppKitButton } from '@reown/appkit/react'

      export default function ConnectButton() {
        return <AppKitButton />
      }
      ```

      ```tsx ConnectButtonWithHooks.tsx theme={null}
      import { useAppKit } from '@reown/appkit/react'

      export default function ConnectButton() {
        const { open } = useAppKit()

        return (
          <>
            <button onClick={() => open()}>Open Connect Modal</button>
            <button onClick={() => open({ view: 'Networks' })}>Open Network Modal</button>
          </>
        )
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="AppKit Core">
    To open AppKit Core you need to call the `connect` function from the Universal Connector.

    ```tsx theme={null}
    // get the session from the universal connector
    const handleConnect = async () => {
      if (!universalConnector) {
        return
      }

      const { session: providerSession } = await universalConnector.connect()
      setSession(providerSession)
    }

    // disconnect the universal connector
    const handleDisconnect = async () => {
      if (!universalConnector) {
        return
      }
      await universalConnector.disconnect()
      setSession(null)
    }

    ...

    return (
      <div>
        <button onClick={handleConnect}>Open AppKit Core</button>
        <button onClick={handleDisconnect}>Disconnect</button>
      </div>
    )
    ```
  </Tab>
</Tabs>

## Smart Contract Interaction

<Tabs>
  <Tab title="Wagmi">
    [Wagmi hooks](https://wagmi.sh/react/api/hooks/useReadContract) can help us interact with wallets and smart contracts:

    ```tsx theme={null}
    import { useReadContract } from 'wagmi'
    import { USDTAbi } from '../abi/USDTAbi'

    const USDTAddress = '0x...'

    function App() {
      const result = useReadContract({
        abi: USDTAbi,
        address: USDTAddress,
        functionName: 'totalSupply'
      })
    }
    ```

    Read more about Wagmi hooks for smart contract interaction [here](https://wagmi.sh/react/hooks/useReadContract).
  </Tab>

  <Tab title="Ethers">
    [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:

    ```tsx theme={null}
    import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/react'
    import { BrowserProvider, Contract, formatUnits } from 'ethers'

    const USDTAddress = '0x617f3112bf5397D0467D315cC709EF968D9ba546'

    // The ERC-20 Contract ABI, which is a common contract interface
    // for tokens (this is the Human-Readable ABI format)
    const USDTAbi = [
      'function name() view returns (string)',
      'function symbol() view returns (string)',
      'function balanceOf(address) view returns (uint)',
      'function transfer(address to, uint amount)',
      'event Transfer(address indexed from, address indexed to, uint amount)'
    ]

    function Components() {
      const { address, isConnected } = useAppKitAccount()
      const { walletProvider } = useAppKitProvider('eip155')

      async function getBalance() {
        if (!isConnected) throw Error('User disconnected')

        const ethersProvider = new BrowserProvider(walletProvider)
        const signer = await ethersProvider.getSigner()
        // The Contract object
        const USDTContract = new Contract(USDTAddress, USDTAbi, signer)
        const USDTBalance = await USDTContract.balanceOf(address)

        console.log(formatUnits(USDTBalance, 18))
      }

      return <button onClick={getBalance}>Get User Balance</button>
    }
    ```
  </Tab>

  <Tab title="Solana">
    [@Solana/web3.js](https://solana.com/docs/clients/javascript) 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](https://appkit-lab.reown.com/appkit/?name=solana).

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import {
      SystemProgram,
      PublicKey,
      Keypair,
      Transaction,
      TransactionInstruction,
      LAMPORTS_PER_SOL
    } from '@solana/web3.js'
    import { useAppKitAccount, useAppKitProvider } from '@reown/appkit/react'
    import { useAppKitConnection, type Provider } from '@reown/appkit-adapter-solana/react'

    function deserializeCounterAccount(data?: Buffer): { count: number } {
      if (data?.byteLength !== 8) {
        throw Error('Need exactly 8 bytes to deserialize counter')
      }

      return {
        count: Number(data[0])
      }
    }

    const { address } = useAppKitAccount()
    const { connection } = useAppKitConnection()
    const { walletProvider } = useAppKitProvider<Provider>('solana')

    async function onIncrementCounter() {
      const PROGRAM_ID = new PublicKey('Cb5aXEgXptKqHHWLifvXu5BeAuVLjojQ5ypq6CfQj1hy')

      const counterKeypair = Keypair.generate()
      const counter = counterKeypair.publicKey

      const balance = await connection.getBalance(walletProvider.publicKey)
      if (balance < LAMPORTS_PER_SOL / 100) {
        throw Error('Not enough SOL in wallet')
      }

      const COUNTER_ACCOUNT_SIZE = 8
      const allocIx: TransactionInstruction = SystemProgram.createAccount({
        fromPubkey: walletProvider.publicKey,
        newAccountPubkey: counter,
        lamports: await connection.getMinimumBalanceForRentExemption(COUNTER_ACCOUNT_SIZE),
        space: COUNTER_ACCOUNT_SIZE,
        programId: PROGRAM_ID
      })

      const incrementIx: TransactionInstruction = new TransactionInstruction({
        programId: PROGRAM_ID,
        keys: [
          {
            pubkey: counter,
            isSigner: false,
            isWritable: true
          }
        ],
        data: Buffer.from([0x0])
      })

      const tx = new Transaction().add(allocIx).add(incrementIx)

      tx.feePayer = walletProvider.publicKey
      tx.recentBlockhash = (await connection.getLatestBlockhash('confirmed')).blockhash

      await walletProvider.signAndSendTransaction(tx, [counterKeypair])

      const counterAccountInfo = await connection.getAccountInfo(counter, {
        commitment: 'confirmed'
      })

      if (!counterAccountInfo) {
        throw new Error('Expected counter account to have been created')
      }

      const counterAccount = deserializeCounterAccount(counterAccountInfo?.data)

      if (counterAccount.count !== 1) {
        throw new Error('Expected count to have been 1')
      }

      console.log(`[alloc+increment] count is: ${counterAccount.count}`);
    }
    ```
  </Tab>
</Tabs>

## Video Tutorial

<div>
  <iframe title="YouTube video player" />
</div>

## Alternative Installation

If you are starting from scratch, you can use the following methods to set up your project with Reown AppKit.

<AccordionGroup>
  <Accordion title="AppKit Skills">
    AppKit Skills provide AI-powered assistance for building with Reown AppKit. Once installed, your AI coding assistant can help you set up, build, and debug your AppKit integration.

    To install AppKit Skills, run the following command in your terminal:

    ```bash theme={null}
    npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
    ```

    After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.
  </Accordion>

  <Accordion title="AppKit CLI">
    Reown offers a dedicated CLI to set up a minimal version of AppKit in the easiest and quickest way possible.

    To do this, please run the command below.

    ```bash theme={null}
    npx @reown/appkit-cli
    ```

    After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:

    1. **Project Name**: Enter the name for your project.
    2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
    3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).

    After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.

    To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.

    **Refer to [this section](#cloud-configuration) for more information.**
  </Accordion>
</AccordionGroup>


# Options
Source: https://docs.reown.com/appkit/react/core/options



The following options can be passed to the `createAppKit` function:

```ts theme={null}
createAppKit({ adapters, projectId, networks, ...options });
```

## networks

Array of networks that can be chosen from the `@reown/appkit/networks` library. This library retrieves the list of EVM networks from Viem and also includes the Solana networks.

```ts theme={null}
import { mainnet, solana } from "@reown/appkit/networks";

createAppKit({
  // ...
  networks: [mainnet, solana],
});
```

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

## metadata

Metadata for your AppKit. The `name`, `description`, `icons`, and `url` are used at certain places like the wallet connection, sign message, etc screens. If not provided, they will be fetched from the metadata of your website's document object.

```ts theme={null}
createAppKit({
  // ...
  metadata: {
    name: "My App",
    description: "My App Description",
    icons: ["https://myapp.com/icon.png"],
    url: "https://myapp.com",
  },
});
```

This information will primarily be used in modals when signing a transaction or message using [Embedded wallets (Smart Accounts)](/appkit/features/smart-accounts), or when verifying ownership with [SIWE/SIWX](/appkit/authentication/siwx/default) using any wallet.

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

<AccordionGroup>
  <Accordion title="The icon can be an encoded image">
    ```typescript theme={null}
    const icon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
    createAppKit({
      // ...
      metadata: {
        // ...
        icons: [icon]
      }
    })
    ```
  </Accordion>
</AccordionGroup>

## defaultNetwork

Desired network for the initial connection as default:

<Tabs>
  <Tab title="Wagmi">
    ```ts theme={null}
    import { mainnet } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts theme={null}
    const mainnet = {
      chainId: 1,
      name: "Ethereum",
      currency: "ETH",
      explorerUrl: "https://etherscan.io",
      rpcUrl: "https://cloudflare-eth.com",
    };

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Solana">
    ```ts theme={null}
    import { solana } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: solana,
    });
    ```
  </Tab>
</Tabs>

## defaultAccountTypes

It allows you to configure the default account selected for the specified networks in AppKit. For example, if you want your EVM networks to use an EOA account by default, you can configure it as shown in the code below.

```ts theme={null}
createAppKit({
  //...
  defaultAccountTypes: { eip155: "eoa" },
});
```

Here are all the options you have for each network identifier or networks. Network identifier or networks available are `eip155` for EVM chains, `solana` for Solana, `bip122` for Bitcoin, and `polkadot` for Polkadot.

```ts theme={null}
type DefaultAccountTypes = {
  eip155: "eoa" | "smartAccount";
  solana: "eoa";
  bip122: "payment" | "ordinal" | "stx";
  polkadot: "eoa";
};
```

## featuredWalletIds

Select wallets that are going to be shown on the modal's main view. Default wallets are MetaMask and Trust Wallet.
Array of wallet ids defined will be prioritized (order is respected).
These wallets will also show up first in `All Wallets` view.
You can find the wallets IDs in [Wallets List](/cloud/wallets/wallet-list) or in [WalletGuide](https://walletguide.walletconnect.network/)

```ts theme={null}
createAppKit({
  //...
  featuredWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

## chainImages

Add or override the modal's network images.

```ts theme={null}
createAppKit({
  // ...
  chainImages: {
    1: "https://my.images.com/eth.png",
  },
});
```

## connectorImages

<Tabs>
  <Tab title="Wagmi">
    Set or override the images of any [connector](https://wagmi.sh/core/connectors/injected). AppKit supports two types of connector identification:

    * **EIP6963 wallets** (announced wallets): Use RDNS format like `'io.metamask'`, `'io.coinbase'`, `'app.phantom'`
    * **Other wallets**: Use normal connector IDs like `walletConnect`, `injected`, `appKitAuth`

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'io.metamask': "https://images.mydapp.com/metamask.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
        injected: "https://images.mydapp.com/browser-wallet.png",
      },
    });
    ```
  </Tab>

  <Tab title="Ethers">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>

  <Tab title="Solana">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'app.phantom': "https://images.mydapp.com/phantom.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>
</Tabs>

## enableWallets

Enable or disable injected wallets and WalletConnect. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWallets: false,
});
```

## enableNetworkSwitch

Enables or disables the network switching functionality in the modal. The default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableNetworkSwitch: false,
});
```

## enableReconnect

Enable or disable automatic reconnection on initialization and page load. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableReconnect: false,
});
```

## enableMobileFullScreen

Enable or disable fullscreen rendering of AppKit Core on mobile devices. Default is `false`.

```ts theme={null}
createAppKit({
  //...
  enableMobileFullScreen: true,
});
```

## debug

Enable or disable debug mode in your AppKit. This is useful if you want to see UI alerts when debugging. Default is `false`.

```ts theme={null}
debug: true;
```

## enableWalletGuide

Enable or disable the wallet guide text: `Haven't got a wallet? Get started`, is useful for people that don't have a wallet yet. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWalletGuide: false,
});
```

## termsConditionsUrl

You can add an url for the *terms and conditions* link.

```ts theme={null}
createAppKit({
  //...
  termsConditionsUrl: "https://www.mytermsandconditions.com",
});
```

## privacyPolicyUrl

A URL for the *privacy policy* link.

```ts theme={null}
createAppKit({
  //...
  privacyPolicyUrl: "https://www.myprivacypolicy.com",
});
```

## features

Allows you to toggle (enable or disable) additional features provided by AppKit. Features such as analytics, email and social logins, On-ramp, swaps, etc., can be enabled using this parameter.

### analytics

Enable analytics to get more insights on your users activity within your [Reown Dashboard](https://dashboard.reown.com)

```ts theme={null}
createAppKit({
  //...
  features: {
    analytics: true,
  },
});
```

<Card title="Learn More" href="/cloud/analytics" />

### swaps

Enable or disable the swap feature in your AppKit. [Swaps](/appkit/react/transactions/swaps) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    swaps: true,
  },
});
```

### onramp

Enable or disable the onramp feature in your AppKit. [Onramp](/appkit/react/transactions/onramp) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    onramp: true,
  },
});
```

### connectMethodsOrder

Order of the connection methods in the modal. The default order is `['wallet', 'email', 'social']`.

<Frame>
  <img />
</Frame>

```ts theme={null}
createAppKit({
  //...
  features: {
    connectMethodsOrder: ["social", "email", "wallet"],
  },
});
```

### legalCheckbox

Enable or disable the terms of service and/or privacy policy checkbox.

```ts theme={null}
createAppKit({
  //...
  features: {
    legalCheckbox: true,
  },
});
```

<Frame>
  <img />
</Frame>

## customWallets

Adds custom wallets to the modal. `customWallets` is an array of objects, where each object contains specific information of a custom wallet.

```ts theme={null}
createAppKit({
  //...
  customWallets: [
    {
      id: "myCustomWallet",
      name: "My Custom Wallet",
      homepage: "www.mycustomwallet.com", // Optional
      image_url: "my_custom_wallet_image", // Optional
      mobile_link: "mobile_link", // Optional - Deeplink or universal
      desktop_link: "desktop_link", // Optional - Deeplink
      webapp_link: "webapp_link", // Optional
      app_store: "app_store", // Optional
      play_store: "play_store", // Optional
    },
  ],
});
```

## AllWallets

<Warning>
  If the "All Wallets" button is removed on mobile, all the mobile wallets that were not added on the main view of the modal **won't** be able to connect to your website via WalletConnect protocol.
</Warning>

The `allWallets` parameter allows you to add or remove the "All Wallets" button on the modal.

| Value         | Description                                              |
| ------------- | -------------------------------------------------------- |
| `SHOW`        | Shows the "All Wallets" button on AppKit.                |
| `HIDE`        | Removes the "All Wallets" button from AppKit.            |
| `ONLY_MOBILE` | Shows the "All Wallets" button on AppKit only on mobile. |

```ts theme={null}
createAppKit({
  //...
  allWallets: "ONLY_MOBILE",
});
```

## includeWalletIds & excludeWalletIds

<Warning>
  Wallets that are either not included or excluded **won't** be able to connect to your website on mobile via WalletConnect protocol.
</Warning>

### includeWalletIds

Override default recommended wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be shown (order is respected).
Unlike `featuredWalletIds`, these wallets will be the **only** ones shown in `All Wallets` view and as recommended wallets.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  includeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### excludeWalletIds

Exclude wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be excluded. All other wallets will be shown in respective places.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  excludeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### Coinbase Smart Wallet

The Coinbase connector now includes a new flag to customize the Smart Wallet behavior.

The `preference` (or `coinbasePreference`) flag accepts one of the following string values:

* `eoaOnly`: Uses EOA Browser Extension or Mobile Coinbase Wallet.
* `smartWalletOnly`: Displays Smart Wallet popup.
* `all` (default): Supports both `eoaOnly` and `smartWalletOnly` based on context.

<Tabs>
  <Tab title="Wagmi">
    AppKit can be configured in **two** different ways: **Default** or **Custom**

    Select your preferred configuration mode below:

    Learn more about the Coinbase connector in the [Wagmi documentation](https://wagmi.sh/react/api/connectors/coinbaseWallet#preference).

    <CodeGroup>
      ```ts Default {4} theme={null}
      createAppKit({
        //...
        enableCoinbase: true, // true by default
        coinbasePreference: "smartWalletOnly",
      });
      ```

      ```ts Custom {8} theme={null}
      import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";

      const adapter = new WagmiAdapter({
        //...
        connectors: [
          coinbaseWallet({
            //...
            preference: "smartWalletOnly",
          }),
          projectId,
          networks,
        ],
      });

      export const config = wagmiAdapter.wagmiConfig;
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    ```ts {4} theme={null}
    createAppKit({
      //...
      enableCoinbase: true, // true by default
      coinbasePreference: "smartWalletOnly",
    });
    ```
  </Tab>
</Tabs>

## customRpcUrls

This function allows you to add custom RPC URLs to override the default network RPC URLs for native RPC calls. This is useful when you want to use your own RPC endpoints instead of the defaults.

```ts theme={null}
type CustomRpcUrl = {
  url: string
  config?: HttpTransportConfig // Optional transport configuration
}

type CustomRpcUrlMap = Record<CaipNetworkId, CustomRpcUrl[]>

createAppKit({
  //...
  customRpcUrls: {
    'eip155:1': [
      {
        url: 'https://your-custom-mainnet-url.com',
        config: {
          // Optional HTTP transport configuration
        }
      }
    ],
    'eip155:137': [
      {
        url: 'https://your-custom-polygon-url.com'
      }
    ]
  }
})
```

If you are using the Wagmi adapter, you need to pass the same `customRpcUrls` configuration to both the `WagmiAdapter` and `createAppKit`.

```ts theme={null}
const customRpcUrls: CustomRpcUrlMap = {
  'eip155:1': [{ url: 'https://your-custom-mainnet-url.com' }],
  'eip155:137': [{ url: 'https://your-custom-polygon-url.com' }]
}

const wagmiAdapter = new WagmiAdapter({
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})

const modal = createAppKit({
  adapters: [...],
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})
```

<Note>
  When using the Wagmi adapter, you don't need to configure [`transports`](https://wagmi.sh/core/api/createConfig#transports) separately. The WagmiAdapter will automatically configure them based on your `customRpcUrls`.

  However, if you use both `customRpcUrls` and Wagmi's `transports` property, be aware that `transports` will take precedence and override any conflicting RPC URLs defined in `customRpcUrls`.

  ```ts theme={null}
  const wagmiAdapter = new WagmiAdapter({
    //...
    customRpcUrls: {
      'eip155:1': [{ url: 'https://custom-rpc-1.com' }] // This will be overridden
    },
    transports: {
      [mainnet.id]: http('https://transport-rpc-1.com') // This takes precedence
    }
  })
  ```
</Note>

## universalProviderConfigOverride

Lets you customize specific aspects of the provider's behavior.

```ts theme={null}
createAppKit({
  //...
  universalProviderConfigOverride: {
    methods: { eip155: ['eth_sendTransaction', 'personal_sign'] },
    chains: { eip155: ['1', '137'] },
    events: { eip155: ['chainChanged', 'accountsChanged'] },
    rpcMap: { eip155:1: 'https://ethereum.publicnode.com' },
    defaultChain: 'eip155:1'
  },
});
```

You can override any of the following properties:

* `methods`: Custom RPC methods for each namespace
* `chains`: Supported chains for each namespace
* `events`: Events to subscribe to for each namespace
* `rpcMap`: Custom RPC URLs for specific chains
* `defaultChain`: The default chain to connect to

## allowUnsupportedChain

Allow users to switch to an unsupported chain. This parameter prevents the switch network dialog when a user connects to a network not listed under the `networks` attribute.

```ts theme={null}
createAppKit({
  //...
  allowUnsupportedChain: true,
});
```


# Sign In With Ethereum
Source: https://docs.reown.com/appkit/react/core/siwe



<Warning>
  **SIWE is being migrated to SIWX.** We recommend using [SIWX (Sign In With X)](/appkit/authentication/siwx/default) for new implementations as it provides multichain authentication support. For existing SIWE implementations, see the [migration guide](/appkit/authentication/siwx/default#migrating-from-siwe-to-siwx).
</Warning>

AppKit provides a simple solution for integrating with "Sign In With Ethereum" (SIWE), a new form of authentication that enables users to control their digital identity with their Ethereum account.
SIWE is a standard also known as [EIP-4361](https://docs.login.xyz/general-information/siwe-overview/eip-4361).

## One-Click Auth

**One-Click Auth** represents a key advancement within WalletConnect v2, streamlining the user authentication process in AppKit by enabling them to seamlessly connect with a wallet and sign a SIWE message with just one click.

It supports both [EIP-1271](https://eips.ethereum.org/EIPS/eip-1271), the standard for signature validation in smart accounts, and [EIP-6492](https://eips.ethereum.org/EIPS/eip-6492), which enables signature validation for smart accounts (contracts) that are not yet deployed, allowing messages to be signed without requiring prior deployment.

Connecting a wallet, proving control of an address with an off-chain signature, authorizing specific actions. These are the kinds of authorizations that can be encoded as ["ReCaps"](https://eips.ethereum.org/EIPS/eip-5573). ReCaps are permissions for a specific website or dapp that can be compactly encoded as a long string in the message you sign and translated by any wallet into a straight-forward one-sentence summary.
reown uses permissions expressed as ReCaps to enable a One-Click Authentication.

## Installation

<Tabs>
  <Tab title="One-Click Auth">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit-siwe siwe viem
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit-siwe siwe viem
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit-siwe siwe viem
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit-siwe siwe viem
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Legacy">
    <Warning>For a better UX we recommend using One-Click Auth.</Warning>

    Install the AppKit SIWE package, additionally we also recommend installing [siwe](https://docs.login.xyz/) which will abstract a lot of the required logic.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit-siwe siwe
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit-siwe siwe
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit-siwe siwe
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit-siwe siwe
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Configure your SIWE Client

<Card title="React SIWE Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-siwe-server-example">
  Check the client/server React example
</Card>

<Tabs>
  <Tab title="One-Click Auth">
    <Note>
      If you are not using our library on the server-side, please normalize the address with eip-55 in the createMessage function. You can check our example for that Functionality.
    </Note>

    ```ts theme={null}
    import { SiweMessage } from "siwe";
    import {
      type SIWESession,
      type SIWEVerifyMessageArgs,
      type SIWECreateMessageArgs,
      createSIWEConfig,
      formatMessage,
    } from "@reown/appkit-siwe";

    const BASE_URL = "http://localhost:8080";

    /* Function that returns the user's session - this should come from your SIWE backend */
    async function getSession() {
      const res = await fetch(BASE_URL + "/session", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
      });
      if (!res.ok) {
        throw new Error("Network response was not ok");
      }

      const data = await res.json();

      const isValidData =
        typeof data === "object" &&
        typeof data.address === "string" &&
        typeof data.chainId === "number";

      return isValidData ? (data as SIWESession) : null;
    }

    /* Use your SIWE server to verify if the message and the signature are valid */
    const verifyMessage = async ({ message, signature }: SIWEVerifyMessageArgs) => {
      try {
        const response = await fetch(BASE_URL + "/verify", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          mode: "cors",
          body: JSON.stringify({ message, signature }),
          credentials: "include",
        });

        if (!response.ok) {
          return false;
        }

        const result = await response.json();
        return result === true;
      } catch (error) {
        return false;
      }
    };

    // Check the full example for signOut and getNonce functions ...

    /* Create a SIWE configuration object */
    export const siweConfig = createSIWEConfig({
      getMessageParams: async () => ({
        domain: window.location.host,
        uri: window.location.origin,
        chains: [1, 2020],
        statement: "Please sign with your account",
      }),
      createMessage: ({ address, ...args }: SIWECreateMessageArgs) =>
        formatMessage(args, address),

      getNonce: async () => {
        //This is only an example, substitute it with your actual nonce getter.
        const nonce = "YOUR_NONCE_GETTER";
        if (!nonce) {
          throw new Error("Failed to get nonce!");
        }
        return nonce;
      },
      getSession,
      verifyMessage,
      signOut: async () => {
        //Example
        // Implement your Sign out function
      },
    });
    ```

    ## Server Side

    Setting up a backend server using Express for a web application that interacts with the Siwe protocol.

    ### Routes:

    * GET '/nonce': Generates and returns a nonce (single-use random number).
    * POST '/verify': Uses the Siwe protocol to verify the message, requiring a signature (the one you are going to approve throw the UX) and a nonce stored in the session.
    * GET '/session': Retrieves the stored Siwe object from the session.
    * GET '/signout': Clears the session.

    ```ts theme={null}
    import cors from "cors";
    import express from "express";
    import Session from "express-session";
    import { generateNonce } from "siwe";
    import {
      /*verifySignature,*/
      getAddressFromMessage,
      getChainIdFromMessage,
    } from "@reown/appkit-siwe";
    import { createPublicClient, http } from "viem";

    const app = express();

    const projectId = "YOUR_PROJECT_ID";

    // configure cors and sessions
    app.use(
      cors({
        origin: "http://localhost:5173", // frontend URL
        credentials: true,
      })
    );
    app.use(express.json());
    app.use(
      Session({
        name: "siwe-quickstart",
        secret: "siwe-quickstart-secret",
        resave: true,
        saveUninitialized: true,
        cookie: { secure: false, sameSite: true },
      })
    );

    app.get("/nonce", function (_, res) {
      res.setHeader("Content-Type", "text/plain");
      res.send(generateNonce());
    });

    // verify the message
    app.post("/verify", async (req, res) => {
      try {
        if (!req.body.message) {
          return res.status(400).json({ error: "SiweMessage is undefined" });
        }

        // save the session with the address and chainId (SIWESession)
        req.session.siwe = { address, chainId };
        req.session.save(() => res.status(200).send(true));

        const message = req.body.message;
        const signature = req.body.signature;
        const address = getAddressFromMessage(message);
        let chainId = getChainIdFromMessage(message);

        // for the moment, the verifySignature is not working with social logins and emails  with non deployed smart accounts
        // for this reason we recommend using the viem to verify the signature
        const publicClient = createPublicClient({
          transport: http(
            `https://rpc.walletconnect.org/v1/?chainId=${chainId}&projectId=${projectId}`
          ),
        });
        const isValid = await publicClient.verifyMessage({
          message,
          address,
          signature,
        });
        if (!isValid) {
          // throw an error if the signature is invalid
          throw new Error("Invalid signature");
        }
        if (chainId.includes(":")) {
          chainId = chainId.split(":")[1];
        }

        // Convert chainId to a number
        chainId = Number(chainId);

        if (isNaN(chainId)) {
          throw new Error("Invalid chainId");
        }

        // save the session with the address and chainId (SIWESession)
        req.session.siwe = { address, chainId };
        req.session.save(() => res.status(200).send(true));
      } catch (e) {
        // clean the session
        req.session.siwe = null;
        req.session.nonce = null;
        req.session.save(() => res.status(500).json({ message: e.message }));
      }
    });

    /// ... check the github repository for the others endpoints

    // get the session
    app.get("/session", (req, res) => {
      res.setHeader("Content-Type", "application/json");
      res.send(req.session.siwe);
    });
    ```

    Check the github full example to see the full flow working: [siwe-quickstart](https://github.com/WalletConnect/web-examples/tree/main/dapps/appkit-siwe/react/)

    ### `verifySignature`

    Verify a SIWE signature.

    ```ts theme={null}
    import { createPublicClient, http } from "viem";

    const publicClient = createPublicClient({
      transport: http(
        `https://rpc.walletconnect.org/v1/?chainId=${chainId}&projectId=${projectId}`
      ),
    });
    const isValid = await publicClient.verifyMessage({
      message,
      address: address as `0x${string}`,
      signature: signature as `0x${string}`,
    });

    // The verifySignature is not working with social logins and emails with non deployed smart accounts
    // for this reason we recommend using the viem to verify the signature
    // import { verifySignature } from '@reown/appkit-siwe'
    // const isValid = await verifySignature({ address, message, signature, chainId, projectId })
    ```
  </Tab>

  <Tab title="Legacy">
    With help of the [siwe package](https://docs.login.xyz/sign-in-with-ethereum/quickstart-guide/implement-the-frontend) we will create the required configuration for AppKit.

    <Info>
      The nonce and verification process will be implemented in your backend. [Read more.](https://docs.login.xyz/sign-in-with-ethereum/quickstart-guide/implement-the-backend)
    </Info>

    ```ts theme={null}
    import { SiweMessage } from 'siwe'
    import type { SIWECreateMessageArgs, SIWEVerifyMessageArgs } from '@reown/appkit-siwe'

    /* Function that creates a SIWE message */
    function createMessage({ nonce, address, chainId }: SIWECreateMessageArgs){
      const message = new SiweMessage({
        version: '1',
        domain: window.location.host,
        uri: window.location.origin,
        address,
        chainId,
        nonce,
        statement: 'Sign in With Ethereum.'
      })

      return message.prepareMessage()
    }

    /* Function that returns the user's session */
    async function getSession(){
      //...
    }

    /* Use your SIWE server to verify if the message and the signature are valid */
    async function verifyMessage({ message, signature }: SIWEVerifyMessageArgs){
      try {
        const isValid = await validateMessage({ message, signature })

        return isValid
      } catch (error) {
        return false
      }
    },

    /* Create a SIWE configuration object */
    export const siweConfig = createSIWEConfig({
      createMessage,
      getNonce: async () => { //This is only an example, substitute it with your actual nonce getter.
        const nonce = "YOUR_NONCE_GETTER"
        if (!nonce) {
          throw new Error('Failed to get nonce!')
        }
        return nonce
      },
      getSession,
      verifyMessage,
      signOut: async () => { //Example
        // Implement your Sign out function
      }
    })
    ```
  </Tab>
</Tabs>

## Initialize AppKit with your `siweConfig`

Add the `siweConfig` to your createAppKit parameters

```ts theme={null}
// Pass your siweConfig inside the createAppKit() function
const modal = createAppKit({
  adapters: [wagmiAdapter], //or your Ethers adapter
  projectId,
  networks: [mainnet, arbitrum],
  defaultNetwork: mainnet,
  features: {
    analytics: true, // Optional - defaults to your Cloud configuration
  },
  siweConfig: siweConfig, // pass your siweConfig
});
```

## SIWE Config Parameters

<Tabs>
  <Tab title="One-Click Auth">
    #### getMessageParams `() => Promise<{ domain: string, uri: string, chains: number[], statement: string }>`

    Parameters to create the SIWE message internally.

    #### getNonce `() => Promise<string>`

    The getNonce method functions as a safeguard against spoofing, akin to a CSRF token. The siwe package provides a generateNonce() helper, or you can utilize an existing CSRF token from your backend if available.

    #### createMessage `(args: SIWECreateMessageArgs) => string`

    The official siwe package offers a straightforward method for generating an EIP-4361-compatible message, which can subsequently be authenticated using the same package. The nonce parameter is derived from your getNonce endpoint, while the address and chainId variables are sourced from the presently connected wallet.

    #### verifyMessage `(args: SIWEVerifyMessageArgs) => Promise<boolean>`

    The function to ensure the message is valid, has not been tampered with, and has been appropriately signed by the wallet address.

    #### getSession `() => Promise<SIWESession | null>`

    The backend session should store the associated address and chainId and return it via the `getSession` method.

    #### signOut `() => Promise<boolean>`

    The users session can be destroyed calling `signOut`.

    #### onSignIn `(session?: SIWESession) => void`

    Callback when user signs in (Optional).

    #### onSignOut `() => void`

    Callback when user signs out (Optional).

    #### signOutOnDisconnect `boolean`

    * defaults to `true`

    Whether or not to sign out when the user disconnects their wallet (Optional).
  </Tab>

  <Tab title="Legacy">
    #### getNonce `() => Promise<string>`

    The getNonce method functions as a safeguard against spoofing, akin to a CSRF token. The siwe package provides a generateNonce() helper, or you can utilize an existing CSRF token from your backend if available.

    #### createMessage `(args: SIWECreateMessageArgs) => string`

    The official siwe package offers a straightforward method for generating an EIP-4361-compatible message, which can subsequently be authenticated using the same package. The nonce parameter is derived from your getNonce endpoint, while the address and chainId variables are sourced from the presently connected wallet.

    #### verifyMessage `(args: SIWEVerifyMessageArgs) => Promise<boolean>`

    The `verifyMessage` method should lean on the siwe package's new

    ```js theme={null}
    SiweMessage(message).validate(signature);
    ```

    to ensure the message is valid, has not been tampered with, and has been appropriately signed by the wallet address.

    #### getSession `() => Promise<SIWESession | null>`

    The backend session should store the associated address and chainId and return it via the `getSession` method.

    #### signOut `() => Promise<boolean>`

    The users session can be destroyed calling `signOut`.

    #### onSignIn `(session?: SIWESession) => void`

    Callback when user signs in (Optional).

    #### onSignOut `() => void`

    Callback when user signs out (Optional).

    #### signOutOnDisconnect `boolean`

    * defaults to `true`

    Whether or not to sign out when the user disconnects their wallet (Optional).
  </Tab>
</Tabs>


# Sign In With X
Source: https://docs.reown.com/appkit/react/core/siwx



## Introduction

The **Sign In With X** feature enables decentralized applications (Dapps) to authenticate users seamlessly across multiple blockchain networks, such as Ethereum, Polygon or Solana. This feature allows developers using our SDK to implement authentication by having users sign a unique string message with their blockchain wallets. The **Sign In With X** feature is designed in accordance with the [CAIP-122](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-122.md) standard, which establishes a chain-agnostic framework for blockchain-based authentication and authorization on off-chain services.

<Frame>
  <img />
</Frame>

<br />

<Card title="Try Demo" href="https://appkit-lab.reown.com/appkit/?name=siwx-default" />

<br />

## Getting Started

**SIWX** works as a plugin system for AppKit and you are going to add the plugin in the AppKit configuration. There are some ways to implement the **SIWX** feature:

* Use Reown Authentication to manage the sessions in the Reown Dashboard
* Use the `DefaultSIWX` class provided by AppKit
* Create a custom implementation to suit your specific requirements.

To initialize the **SIWX** feature, you need to add the `siwx` parameter to the `createAppKit` function.

### Reown Authentication

Reown Authentication is a predefined implementation of the SIWX configuration plugin that uses the Cloud service to create and manage SIWX messages and sessions. With Reown Authentication, you will be able to see and control the sessions of your users using the Reown [Dashboard](/cloud/reown-authentication).

Read more about the [Reown Authentication Implementation](./reown-authentication).

### Custom Implementation

`DefaultSIWX` is a scaffold implementation of the SIWX feature for quick custom integration. It offers pre-built components to get the feature running quickly with some custom adjustments.
Additionally, the expected \` parameters can be configured to allow customization of the feature to suit your specific requirements.

The defined interface must follow specific rules to make sure that AppKit can interact with it correctly. Read more about how to have your [Custom Implementation](./siwx-custom).

## SIWX Expected Behavior

* **SIWX** will prompt to get the user signature and verify his identity every time a connection happen;
* In case a SIWX session is already stored, the user will be automatically signed in and the prompt step will be skipped;
* If the user changes the connected network, **SIWX** will prompt to get the user signature and verify his identity again;
* If the user disconnects from the Dapp, **SIWX** will revoke the session and the user will need to sign in again.

## Migrating from SIWE to SIWX

If you are currently already using **SIWE** from `@reown/appkit-siwe`, after AppKit version 1.5.0, you will be migrated into **SIWX**. The migration process is automatic and your `siweConfig` from `createAppKit` function will be mapped internally.

<Warning>
  It is important to note that if you cannot use `siweConfig` and `siwx` at the same time, `createAppKit` will throw an error in case this happens.

  You may replace `siweConfig` with your own `siwx` configuration manually if you would like to do so.
</Warning>


# Email & Socials
Source: https://docs.reown.com/appkit/react/core/socials



To allow users to authenticate using their email or social accounts, you need to configure the `features` parameter in the `createAppKit` function.

<Tabs>
  <Tab title="Wagmi">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```

    <Note>
      AppKit with ethers v5 does not support the `auth` parameter and social logins. If you're using ethers v5, please consider upgrading to ethers v6 following this [ethers migration guide](https://docs.ethers.org/v6/migrating/) and [AppKit Docs](https://docs.walletconnect.com/appkit/overview)
    </Note>
  </Tab>

  <Tab title="Solana">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [solanaWeb3JsAdapter],
      projectId,
      networks: [solana, solanaTestnet, solanaDevnet],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "discord",
          "farcaster",
          "github",
          "apple",
          "facebook",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>
</Tabs>

## Options

* ***email \[boolean]*** : This boolean defines whether you want to enable email login. Default `true`
* ***socials \[array]*** : This array contains the list of social platforms that you want to enable for user authentication. The platforms in the example include Google, X, GitHub, Discord, Apple, Facebook and Farcaster. The default value of `undefined` displays everything. Set it to `false` to disable this feature. You can also pass an empty array to disable it.
* ***emailShowWallets \[boolean]*** : This boolean defines whether you want to show the wallet options on the first connect screen. If this is false and `socials` are enabled, it will show a button that directs you to a new screen displaying the wallet options. Default `true`

## User flow

1. Users will be able to connect to you application by simply using an email address. AppKit will send to them a One Time Password (OTP) to copy and paste in the modal, which will help to
   verify the user's authenticity. This will create a non-custodial wallet for your user which will be available in any application that integrates AppKit and email login.

2. Eventually the user can optionally choose to move from a non-custodial wallet to a self-custodial one by pressing "Upgrade Wallet" on AppKit.
   This will open the *([WalletConnect secure website](https://secure.walletconnect.com/dashboard))* that will walk your user through the upgrading process.

## UI Variants

AppKit SDK offers multiple UI variants to customize the user experience for the authentication process.

By configuring the `emailShowWallets` option in the `features` parameter, you can control the initial connect screen behavior:

* **`emailShowWallets: true`**: When this option is enabled, the initial connect screen will display the available wallet options directly to the user. This allows users to choose their preferred wallet immediately.

<Frame>
  <img />
</Frame>

* **`emailShowWallets: false`**: If this option is disabled, the initial connect screen will show a button instead. When the user clicks this button, they will be directed to a new screen that lists all the available wallet options. This can help simplify the initial interface and reduce visual clutter.

<Frame>
  <img />
</Frame>

By configuring the `socials` option in the `features` parameter, you can control the amount of social providers you want to show on the connect screen:

* **`socials: ['google']`**: When you only set one social provider, it will give you a button with \`connect with provider.

<Frame>
  <img />
</Frame>

* **`socials: ['google', 'discord']`**: When you set 2 social provider, it will give you 2 buttons next to each other with the logo of the social provider

<Frame>
  <img />
</Frame>

* **` socials: ['google', 'x', 'discord', 'apple', 'github']`**: When you set more than 2 social providers, the first provider in the array will get a button with `connect with provider`. The other providers will get a button with the logo of the social provider next to each other.

<Frame>
  <img />
</Frame>

* **`socials: []` or `socials: false`**: When you want to disable social logins.

<Frame>
  <img />
</Frame>

* **` email: false`**: When you want to disable email login.

<Frame>
  <img />
</Frame>

By configuring the `allWallets` option inside the `createAppKit` function, you can control whether if and when you want to display all wallets.

* **`allWallets: 'HIDE'`**: When you do not want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'SHOW'`**: When you want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'ONLY_MOBILE'`**: When you want to display all wallets only on a mobile device.


# Theming
Source: https://docs.reown.com/appkit/react/core/theming



The theme for the AppKit integration in your dApp can be fully customized.

## ThemeMode

By default `themeMode` option will be set to user system settings 'light' or 'dark'. But you can override it like this:

```ts theme={null}
createAppKit({
  //...
  themeMode: "light",
});
```

## themeVariables

By default `themeVariables` are undefined. You can set them like this:

```ts theme={null}
createAppKit({
  //...
  themeVariables: {
    "--apkt-color-mix": "#00BB7F",
    "--apkt-color-mix-strength": 40,
  },
});
```

The following list shows the theme variables you can override:

| Variable                      | Description                                                   | Type     |
| ----------------------------- | ------------------------------------------------------------- | -------- |
| `--apkt-font-family`          | Base font family                                              | `string` |
| `--apkt-accent`               | Color used for buttons, icons, labels, etc.                   | `string` |
| `--apkt-color-mix`            | The color that blends in with the default colors              | `string` |
| `--apkt-color-mix-strength`   | The percentage on how much "--apkt-color-mix" should blend in | `number` |
| `--apkt-font-size-master`     | The base pixel size for fonts.                                | `string` |
| `--apkt-border-radius-master` | The base border radius in pixels.                             | `string` |
| `--apkt-z-index`              | The z-index of the modal.                                     | `number` |

## Wallet Buttons

Wallet buttons are components that allow users to connect their wallets to your dApp. They provide a simple and easy way to connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.
You can also call them directly using hooks. Please check the [components](/appkit/react/core/components#walletButtons) and [hooks](/appkit/react/core/hooks#useappkitwallet) documentation for more information.

<Frame>
  <img />
</Frame>

<br />

<br />

<Card title="Try Wallet Buttons" href="https://appkit-lab.reown.com/appkit/?name=wagmi" />


# Deposit with Exchange - React
Source: https://docs.reown.com/appkit/react/payments/deposit-with-exchange



<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Learn more in the WalletConnect Pay docs →](https://docs.walletconnect.com/payments/overview)
</Note>

**Deposit with Exchange** gives your users a seamless way to fund their connected wallets directly from centralized exchange accounts like Binance. Instead of forcing users to leave your app, log into their exchange, and manually handle withdrawals, you can offer a guided in-app flow that keeps them engaged and ready to transact.

## Quickstart

This feature will start working as soon as your team is on the allowed-list. Contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s) to get started.

<Warning>
  Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven't done so, please refer to the [Reown AppKit docs](/appkit/overview#quickstart).
</Warning>

Clicking on Fund your wallet will show the modal below:

<img alt="Funding your wallet with Deposit with Exchange" />

## Start Deposit with Exchange from a button

### Install the library

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-pay
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-pay
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-pay
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-pay
  ```
</CodeGroup>

### Usage

Import the `baseUSDC` asset, the `pay` function and the `useAppKitAccount` hook to get the address of the connected wallet.

```ts theme={null}

import { baseUSDC, pay } from '@reown/appkit-pay';
import { useAppKitAccount  } from '@reown/appkit/react'
```

Get the address of the connected wallet using the `useAppKitAccount` hook. You can also check if the user is connected using the `isConnected` boolean.

```ts theme={null}
const { address, isConnected } = useAppKitAccount()
```

In order to run the deposit, use the function `pay`. This function receives three values.

```ts theme={null}
// pay function returns a PaymentResult object
const result = await pay({ 
    recipient: address,
    amount: 0.0001,
    paymentAsset: baseUSDC
});

if (result.success) {
    console.log("Payment successful: "+ result.result);
} else {
    console.error("Payment error: "+ result.error);
}
```

## Supported Networks and Assets

Currently, Deposit with Exchange supports the following assets on the following networks:

**Asset -> Network**

**Binance**

* USDC -> Ethereum, Optimism, Arbitrum, Base, Polygon, Solana
* USDT -> Ethereum, Optimism, Arbitrum, Polygon, Solana
* Native Solana

For access to additional networks or assets, contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s).

## Assets Configuration

For the moment, AppKit Pay has pre-configured these assets:

* baseETH, baseSepoliaETH, and baseUSDC
* ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
* ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT

```ts theme={null}
import { baseETH } from '@reown/appkit-pay' 
```

For custom assets, you can create a paymentAsset object with all the information:

```ts theme={null}
// Configure the paymentAsset
const paymentAssetDetails = {
    network: 'eip155:8453', // Base Mainnet
    asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
    metadata: {
        name: 'Ethereum', // Or 'USD Coin'
        symbol: 'ETH',    // Or 'USDC'
        decimals: 18      // Or 6 for USDC
    }
};
```


# Pay with Self-Custodial Wallets - React
Source: https://docs.reown.com/appkit/react/payments/pay-with-self-custodial-wallets



<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Learn more in the WalletConnect Pay docs →](https://docs.walletconnect.com/payments/overview)
</Note>

**Pay with Self-Custodial Wallets** lets users pay with their self-custodial wallets like MetaMask, Trust, Ledger, and more directly in-app.

## Quickstart

Here you can find a simplified process to integrate AppKit Pay:

<Warning>
  Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven't done so, please refer to the [Reown AppKit docs](/appkit/overview#quickstart).
</Warning>

## Code Example

<Card title="AppKit Pay Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-wagmi-appkit-pay">
  Check the React example
</Card>

### Install the library

<Note>
  Projects currently using Reown AppKit, or planning to use it to build custom payment flows with self-custodial wallets, should use AppKit Pay for a streamlined integration and significantly improved user experience out of the box. AppKit Pay can be found in `@reown/appkit-pay` npm package.
</Note>

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-pay
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-pay
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-pay
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-pay
  ```
</CodeGroup>

There are two main ways to handle payments:

### `pay` - Full Payment Flow

This function handles the complete payment flow — it opens the payment UI *and* waits for the result (success, failure, cancel, timeout).

```ts theme={null}
import { baseSepoliaETH, pay} from '@reown/appkit-pay'
```

In order to run the payment, use the function `pay`. This function receives three values: `recipient`, `amount`, and `paymentAsset`.

```ts theme={null}
// pay function returns a PaymentResult object
const result = await pay({ 
    recipient: addressRecipient,
    amount: 0.0001,
    paymentAsset: baseSepoliaETH
});

if (result.success) {
    console.log("Payment successful: "+ result.result);
} else {
    console.error("Payment error: "+ result.error);
}
```

### `openPay` - Open Payment UI Only

This function opens or triggers the payment UI modal but doesn't return the result of the payment. Use the hook to handle the payment result.

```ts theme={null}
import { baseSepoliaETH, openPay} from '@reown/appkit-pay'
```

Call the hook to open the payment modal.

```tsx theme={null}
    const { open: openPay, isPending, isSuccess, data, error } = usePay({
      onSuccess: handleSuccess, 
      onError: handleError,
    });
```

Open the payment modal, but onSuccess/onError handles the actual payment result:

```tsx theme={null}
      await openPay({ 
        paymentAsset: baseSepoliaETH,
        recipient: address,
        amount: 1000000000000000000 // 1 ETH
      });
```

Handle the payment result in the onSuccess/onError callbacks:

```tsx theme={null}
    const handleSuccess = (data: PaymentResult) => {
      console.log("Payment successful:", data);
    };

    const handleError = (error: AppKitPayErrorMessage) => {
      console.error("Payment error:", error);
    };
```

Or handle the payment result in the UI by displaying the payment status:

```tsx theme={null}
    {isSuccess || isPending || error && (
          <section>
            <h2>Payment Status</h2>
          {isSuccess && (
            <p>Payment successful: {data}</p>
          )}
          {isPending && (
            <p>Payment pending: {data}</p>
          )}
          {error && (
            <p>Payment error: {error}</p>
          )}
          </section>
    )}
```

## Supported Networks and Assets

For a complete list of supported networks and assets, please refer to the [Networks and Assets Supported](/appkit/payments/pay-with-self-custodial-wallets#networks-and-assets-supported) section in our Pay with Self-Custodial Wallets documentation.

## Assets Configuration

For the moment, AppKit Pay has pre-configured these assets:

* baseETH, baseSepoliaETH, and baseUSDC
* ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
* ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT

```ts theme={null}
import { baseETH } from '@reown/appkit-pay' 
```

For custom assets, you can create a paymentAsset object with all the information:

```ts theme={null}
// Configure the paymentAsset
const paymentAssetDetails = {
    network: 'eip155:8453', // Base Mainnet
    asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
    metadata: {
        name: 'Ethereum', // Or 'USD Coin'
        symbol: 'ETH',    // Or 'USDC'
        decimals: 18      // Or 6 for USDC
    }
};
```

## Prerequisites

### Enable Payments Feature in Dashboard

The "Payments" feature **must be enabled** in the [Reown Dashboard](https://dashboard.reown.com) before you can use AppKit Pay, even for local testing.

1. Go to your project in the Reown Dashboard
2. Navigate to the Payments section
3. Enable the Payments feature for your projectId

## Test locally

In order to test locally use localhost and port 3000. This is the only port available for local testing.

Add the following to your package.json file in order to run the development server on port 3000:

```json theme={null}
"scripts": {
    "dev": "vite --port 3000",
},
```

## Hooks

All the hooks must be imported from `@reown/appkit-pay/react`. For example:

```tsx theme={null}
import { useAvailableExchanges } from '@reown/appkit-pay/react';
```

### useAvailableExchanges

<Warning>
  The Pay with Exchange feature has been deprecated. The following exchange-related hooks are retained for backward compatibility only. For more details, see the [Payments FAQs](/appkit/payments/overview#payments-faqs).
</Warning>

Fetches and manages the state for available exchanges.

`useAvailableExchanges(options?: { isFetchOnInit?: boolean } & GetExchangesParams): UseAvailableExchangesReturn`

* `options`: Control initial fetch behavior.
* `returns`: `{ data, isLoading, error, fetch }`

`type GetExchangesParams= {
  page?: number
  asset?: string
  amount?: number | string
  network?: CaipNetworkId
}`

### usePayUrlActions

<Warning>
  The Pay with Exchange feature has been deprecated. This hook is retained for backward compatibility only. For more details, see the [Payments FAQs](/appkit/payments/overview#payments-faqs).
</Warning>

Provides functions (getUrl, openUrl) to interact with specific exchange URLs, returning the sessionId needed for status tracking.

`usePayUrlActions(): { getUrl, openUrl }`

* `getUrl(exchangeId, params): Promise<PayUrlResponse>`
* `openUrl(exchangeId, params, openInNewTab?): Promise<PayUrlResponse>` (Returns `{ url, sessionId }`)

### useExchangeBuyStatus

<Warning>
  The Pay with Exchange feature has been deprecated. This hook is retained for backward compatibility only. For more details, see the [Payments FAQs](/appkit/payments/overview#payments-faqs).
</Warning>

Fetches and polls for the status of a headless payment transaction using exchangeId and sessionId.

`useExchangeBuyStatus(params: UseExchangeBuyStatusParameters): UseExchangeBuyStatusReturn`

* `params`: `{ exchangeId, sessionId, pollingInterval?, isEnabled?, onSuccess?, onError? }`
* `returns`: `{ data, isLoading, error, refetch }`


# On-Ramp
Source: https://docs.reown.com/appkit/react/transactions/onramp



AppKit seamlessly incorporates Coinbase Pay, enabling users to sign in to their Coinbase accounts and utilize fiat payment methods for purchasing cryptocurrencies.

<Note>
  On-Ramp is supported in the latest version of AppKit. If you are using an older version, make sure you upgrade.
</Note>

## Integration

The On-Ramp feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `onramp` flag to `false` in the configuration of the `createAppKit` function.

<Note>
  On-Ramp is now available on **Solana**. The configuration for On-Ramp on both EVM and Solana is the same. Please refer to the code snippet below.
</Note>

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    onramp: false // Optional - true by default
  }
})
```

## On-Ramp API

You can programmatically open the On-Ramp modal.

```
const { open } = useAppKit()

open({ view: 'OnRampProviders' })
```


# Swaps
Source: https://docs.reown.com/appkit/react/transactions/swaps



The Swap feature allows users to exchange one cryptocurrency for another directly within the AppKit modal.
This feature is designed to provide a seamless and efficient swapping experience, leveraging our collaboration with [1inch](https://1inch.io/) as the swap provider.

## Availability

* **Requirement**: The Swap feature is available only to users who log in via email or social login. This is consistent with other wallet features such as sending tokens.
* **Transaction Fee**: Reown charges a 0.85% transaction fee on all swaps.
* **Supported Tokens**: The tokens available for swapping are limited to those supported by 1Inch. Note that the availability of tokens may vary depending on the network.
* **Network Availability**: The Swap feature is not available on Sepolia or other testnets at this time.

## How to Use

1. **Connect**: Ensure you are logged in via email or social login.
2. **Access Swap**: Navigate to the Swap feature within the account view.
3. **Select Tokens**: Choose the tokens you wish to swap from the available options.
4. **Type amount**: Enter your desired swap values. You can use the Max button to swap your all tokens or enter any specific number.
5. **See swap details**: Once you type amount value. You'll see the available quote details as received amount, network fee, maximum slippage, or price impact.
6. **Confirm Swap**: Review the swap details, including the transaction fee, and confirm the swap.

## Integration

The Swaps feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `swaps` flag to `false` in the configuration of the `createAppKit` function.

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    swaps: false // Optional - true by default
  }
})
```

## Setting Default Tokens

You can programmatically open the Swap view with pre-selected tokens and amounts using the `open` function from the [`useAppKit`](/appkit/react/core/hooks#useappkit) hook. This allows you to customize the default swap experience for your users.

```ts theme={null}
import { useAppKit } from '@reown/appkit/react'

function Component() {
  const { open } = useAppKit()

  const openSwapWithDefaults = () => {
    open({
      view: 'Swap',
      arguments: {
        amount: '100',      // Optional: pre-fill the swap amount
        fromToken: 'USDC',  // Optional: set the token to swap from
        toToken: 'ETH'      // Optional: set the token to swap to
      }
    })
  }

  return <button onClick={openSwapWithDefaults}>Swap USDC to ETH</button>
}
```

### Parameters

* `amount` (optional): Pre-fill the amount to swap
* `fromToken` (optional): Set the default token to swap from (e.g., 'USDC', 'ETH', 'DAI')
* `toToken` (optional): Set the default token to swap to (e.g., 'ETH', 'USDC', 'USDT')

This is particularly useful when you want to guide users to swap specific tokens or create custom swap buttons for different token pairs in your application.


# How to Interact with EVM Smart Contracts using AppKit and React
Source: https://docs.reown.com/appkit/recipes/EVM-smart-contract-interaction



In this recipe, you will learn how to:

* Read data from a smart contract
* Write data to a smart contract

This guide takes approximately 20 minutes to complete.

Let’s dive in!

## Prerequisites

* A fundamental understanding of JavaScript and React.
* A minimal installation of AppKit in React.
* Obtain a new project Id on Reown Dashboard at [https://dashboard.reown.com](https://dashboard.reown.com)

## Final project

<Card title="Appkit Wagmi Example with smart contract interactions" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-wagmi">
  Download the full project to try it directly on your computer.
</Card>

<Card title="Appkit Ethers Example with smart contract interactions" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-ethers">
  Download the full project to try it directly on your computer.
</Card>

## Try the demo in Sepolia Testnet

* [Ethers Example](https://appkit-web-examples-react-ethers.reown.com/)
* [Wagmi Example](https://appkit-web-examples-react-wagmi.reown.com/)

## Requirements

In order to interact with a smart contract you will need to have one deployed in a EVM-compatible blockchain. There are several tools to help you deploy a smart contract:

* [Remix IDE](https://remix.ethereum.org/)
* [Foundry](https://getfoundry.sh/)
* [Truffle](https://www.trufflesuite.com/)
* [Hardhat](https://hardhat.org/)

We have already deployed a simple smart contract (0xEe6D291CC60d7CeD6627fA4cd8506912245c8cA4) in Sepolia Testnet for you to use. Once you compile the smart contract, you get the ABI.
The ABI is a set of rules that define how the contract's functions can be called and how data is sent and received.

To interact with the smart contract, you need to have some tokens to pay for gas fees when writing to the contract. You can get them from this [faucet](https://cloud.google.com/application/web3/faucet/ethereum/sepolia), but you can also look for other options on the web.
It's also good to know that reading from a smart contract is free.

For both SDKs, you need to declare the contract address and ABI.

```jsx theme={null}
const storageSC = "0xEe6D291CC60d7CeD6627fA4cd8506912245c8cA4";

const storageABI = [
  {
    inputs: [],
    name: "retrieve",
    outputs: [
      {
        internalType: "uint256",
        name: "",
        type: "uint256",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [
      {
        internalType: "uint256",
        name: "num",
        type: "uint256",
      },
    ],
    name: "store",
    outputs: [],
    stateMutability: "nonpayable",
    type: "function",
  },
];
```

### Start building with Wagmi

1. Start by importing the hooks to read and write.

```jsx theme={null}
import { useReadContract, useWriteContract } from "wagmi";
```

2. Call the hooks.

```jsx theme={null}
const { writeContract, isSuccess } = useWriteContract();
const readContract = useReadContract({
  address: storageSC,
  abi: storageABI,
  functionName: "retrieve",
  query: {
    enabled: false, // disable the query in onload
  },
});
```

3. Generate the actions:

```jsx theme={null}
// Call the function to read the smart contract and print on console
const handleReadSmartContract = async () => {
  const { data } = await readContract.refetch();
  console.log("data: ", data);
};

// Write to the smart contract and check if the transaction is successful with useEffect
const handleWriteSmartContract = () => {
  writeContract({
    address: storageSC,
    abi: storageABI,
    functionName: "store",
    args: [123n],
  });
};

// useEffect to print the success message when the contract is written
useEffect(() => {
  if (isSuccess) {
    console.log("contract write success");
  }
}, [isSuccess]);
```

### Start building with Ethers

1. Start by importing the libraries needed to interact:

```jsx theme={null}
import { useAppKitProvider } from "@reown/appkit/react";
import { Contract, BrowserProvider } from "ethers";
import type { Provider } from "@reown/appkit/react";
```

2. Call the AppKit Provider hook:

```jsx theme={null}
const { walletProvider } = useAppKitProvider<Provider>("eip155");
```

3. Generate the actions calling the functions:

```jsx theme={null}
// get the data from the smart contract and print on console
const handleReadSmartContract = async () => {
  const ethersProvider = new BrowserProvider(walletProvider);
  const signer = await ethersProvider.getSigner();
  const contract = new Contract(storageSC, storageABI, signer);
  const data = await contract.retrieve();
  console.log("data: ", data);
};

// write to the smart contract and print on console
const handleWriteSmartContract = async () => {
  const ethersProvider = new BrowserProvider(walletProvider);
  const signer = await ethersProvider.getSigner();
  const contract = new Contract(storageSC, storageABI, signer);
  const data = await contract.store(1n);
  console.log("data: ", data);
};
```

## Conclusion

By following this guide, you've learned how to integrate Reown AppKit with Wagmi or Ethers to interact with a smart contract.
With very few lines of code you can read and write to a smart contract.

Keep exploring AppKit to enhance your dApp's functionality and user experience!


# How to Sign Messages, get the balance and send transactions on Bitcoin using AppKit
Source: https://docs.reown.com/appkit/recipes/bitcoin-send-transaction



Learn how to use Reown AppKit for essential wallet functionalities such as signing messages, getting the balance and sending transactions.

***

In this recipe, you will learn how to:

* Sign a message using a connected wallet.
* Send a transaction to the Bitcoin blockchain.
* Get the balance from an Address.
* Get the Public Key.

This guide will take approximately 20 minutes to complete.

Let's dive in!

## Prerequisites

* A fundamental understanding of JavaScript and React.
* A minimal installation of AppKit in React.
* Obtain a new project Id on Reown Dashboard at [https://dashboard.reown.com](https://dashboard.reown.com)

## Final project

<Card title="Appkit Example for Interacting with the Bitcoin Blockchain" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-bitcoin">
  Clone this Github repo to try it out locally.
</Card>

## AppKit Minimal Installation

You can start a small project following the guidelines from our [installation React docs using Bitcoin](https://docs.reown.com/appkit/react/core/installation?platform=bitcoin)

## Start building

In this guide we are going to use AppKit to make the calls to the Bitcoin blockchain and interact with the wallet.

1. Start by importing the `useAppKitProvider` and `useAppKitAccount` hooks.

```js theme={null}
import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/react";
import type { BitcoinConnector } from "@reown/appkit-adapter-bitcoin";
```

2. Extract the `walletProvider` function from the `useAppKitProvider` hook. This function allows you to prompt the connected wallet to sign a specific message. Also, we are using `useAppKitAccount` to get the address and isConnected as explained before.

```js theme={null}
// Get the wallet provider with the AppKit hook
const { walletProvider } = useAppKitProvider<BitcoinConnector>("bip122");

// AppKit hook to get the address and check if the user is connected
const { allAccounts, address, isConnected } = useAppKitAccount();
```

### Sign a message

In order to raise the modal to sign a message with your wallet continue with the following steps:

3. Create a function to prompt the modal for signing the message.

```js theme={null}
// function to sign a message
const handleSignMsg = async () => {
  // raise the modal to sign the message
  const signature = await walletProvider.signMessage({
    address,
    message: "Hello Reown AppKit!",
  });

  // Print the signed message in console
  console.log(signature);
};
```

4. Finally, to call the function:

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={handleSignMsg}>Sign Message</button>
    </div>
  )
);
```

### Send a transaction in Bitcoin

3. Create a function to raise the modal to send the transaction

```js theme={null}
// function to send a TX
const handleSendTx = () => {
    const signature = await walletProvider.sendTransfer({
        recipient: recipientAddress,
        amount: "1000" // amount in satoshis
      })

    // print the Transaction Signature in console
    console.log(signature);
}
```

4. Finally, to call the function:

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={handleSendTx}>Send Transaction</button>
    </div>
  )
);
```

### Get Balance

3. Create the function to get the balance

```js theme={null}


const handleGetBalance = () => {
    const isTestnet = true; // change to false if you want to get the balance on mainnet

    // get all the utxos from the address
    const response = await fetch(
        `https://mempool.space${isTestnet ? '/testnet' : ''}/api/address/${address}/utxo`
    );
    const data = await response.json();

    // get the utxos - the list of unspent transactions that the sender has
    const utxos = await getUTXOs(address, isTestnet)
    // return the sum of the utxos ... The balance of the sender
    const balance = utxos.reduce((sum, utxo) => sum + utxo.value, 0)

    // print the balance in console
    console.log(balance);
}

// Get the utxos ... List of unspent transactions that the sender has
const getUTXOs = async (address: string, isTestnet: boolean = false): Promise<UTXO[]> => {
    const response = await fetch(
        `https://mempool.space${isTestnet ? '/testnet' : ''}/api/address/${address}/utxo`
    )
    return await response.json();
}

// Type of the UTXO ... List of unspent transactions that the sender has
type UTXO = {
    txid: string
    vout: number
    value: number
    status: {
        confirmed: boolean
        block_height: number
        block_hash: string
        block_time: number
    }
}
```

4. Finally, to call the function:

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={handleGetBalance}>Get Balance</button>
    </div>
  )
);
```

### Get the Public Key

3. Create the function to get the public key

```js theme={null}
const handleGetPublicKey = async () => {
  // get the public key from the account
  const bip122Account = allAccounts?.find((a) => a.address === address);
  let publicKey = bip122Account?.publicKey || "";

  // print the public key in console
  console.log(publicKey);
};
```

4. Finally, to call the function:

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={handleGetPublicKey}>Get Public Key</button>
    </div>
  )
);
```

## Conclusion

By following this guide, you've learned how to integrate Reown AppKit and Bitcoin into your React application to perform essential wallet operations.
You can now sign messages, get the balance, get the public key and send transactions in the Bitcoin blockchain.

Keep exploring AppKit to enhance your dApp functionality and user experience!


# How to Sign Messages, Send Transactions, and Get Balance in EVM using AppKit with Ethers
Source: https://docs.reown.com/appkit/recipes/ethers-send-transaction



Learn how to use Reown AppKit for essential wallet functionalities such as signing messages, sending transactions, and retrieving wallet balances.

***

In this recipe, you will learn how to:

* Retrieve the balance of the connected wallet
* Sign a message using a connected wallet
* Send a transaction to the EVM blockchain

This guide takes approximately 20 minutes to complete.

Let’s dive in!

<Frame>
  <img alt="" />
</Frame>

## Prerequisites

* A fundamental understanding of JavaScript and React.
* A minimal installation of AppKit in React.
* Obtain a new project Id on Reown Dashboard at [https://dashboard.reown.com](https://dashboard.reown.com)

## Final project

<Card title="Appkit Ethers Example with blockchain interactions" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-ethers">
  Download the full project to try it directly on your computer.
</Card>

## AppKit Minimal Installation

You can start a small project following the guidelines from our [installation React docs using Ethers](https://docs.reown.com/appkit/react/core/installation?platform=ethers)

## Start building

In this guide we are going to use the library [Ethers](https://docs.ethers.org/v6/) to make calls to the blockchain and to interact with the wallet.

To get the balance, sign a message and send a transaction follow the same steps in each operation:

1. Start by importing the BrowserProvider object, some AppKit hooks to get the account information, chain id and the Provider.

```jsx theme={null}
import {
  useAppKitAccount,
  useAppKitProvider,
  useAppKitNetworkCore,
  type Provider,
} from "@reown/appkit/react";
import {
  BrowserProvider,
  JsonRpcSigner,
  formatEther,
  parseUnits,
} from "ethers";
```

2. Use the `useAppKitAccount` hook to retrieve the user's address and check if they are connected. The `useAppKitNetworkCore` hook to get the chain id and the `useAppKitProvider` hook to get the wallet provider.

```jsx theme={null}
// AppKit hook to get the address and check if the user is connected
const { address, isConnected } = useAppKitAccount();
// AppKit hook to get the chain id
const { chainId } = useAppKitNetworkCore();
// AppKit hook to get the wallet provider
const { walletProvider } = useAppKitProvider<Provider>("eip155");
```

### Get Balance

Fetching a user's balance is straightforward using the `BrowserProvider` object from ethers.

3. Create a function to fetch and display (in console) the balance when triggered

```jsx theme={null}
// function to get the balance
const handleGetBalance = async () => {
  const provider = new BrowserProvider(walletProvider, chainId);
  const balance = await provider.getBalance(address);
  const eth = formatEther(balance);
  console.log(`${eth} ETH`);
};
```

4. Finally, to call the function you can show the button in a component when `isConnected` is `true`

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={getBalance}>Get Balance</button>
    </div>
  )
);
```

### Sign a message

To raise the modal to sign a message with your wallet. You can follow with these steps:

3. Generate the function to raise the modal to sign the message

```jsx theme={null}
// function to sing a msg
const handleSignMsg = async () => {
  // create the provider and signer
  const provider = new BrowserProvider(walletProvider, chainId);
  const signer = new JsonRpcSigner(provider, address);
  // sign the message
  const signature = await signer?.signMessage("Hello Reown AppKit!");
  // log the signature
  console.log(signature);
};
```

4. Finally, to call the function:

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={handleSignMsg}>Sign Message</button>
    </div>
  )
);
```

### Send a transaction in EVM

In order to raise the modal to sign and send a transaction with your wallet. You can follow with these steps:

3. Create the test transaction

```jsx theme={null}
// test transaction
const TEST_TX = {
  to: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045" as Address, // vitalik address
  value: parseUnits('0.0001', 'gwei')
}
```

4. Generate the function to raise the modal to send the transaction

```jsx theme={null}
// function to send a TX
const handleSendTx = async () => {
  // create the provider and signer
  const provider = new BrowserProvider(walletProvider, chainId);
  const signer = new JsonRpcSigner(provider, address);

  // send the transaction
  const tx = await signer.sendTransaction(TEST_TX);
  // log the transaction
  console.log(tx);
};
```

4. Finally, to invoke the function:

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={handleSendTx}>Send Transaction</button>
    </div>
  )
);
```

## Conclusion

By following this guide, you've learned how to integrate Reown AppKit and Ethers in your React application to perform essential wallet operations.
You can now fetch wallet balances, sign messages, and send transactions seamlessly in an EVM-compatible blockchain environment.

Keep exploring AppKit to enhance your dApp's functionality and user experience!


# How to Sign Messages, Send Transactions, and Get Balance on Solana using AppKit
Source: https://docs.reown.com/appkit/recipes/solana-send-transaction



Learn how to use Reown AppKit for essential wallet functionalities such as signing messages, sending transactions, and retrieving wallet balances.

***

In this recipe, you will learn how to:

* Retrieve the balance of the connected wallet.
* Sign a message using a connected wallet.
* Send a transaction to the Solana blockchain.

This guide takes approximately 20 minutes to complete.

Let's dive in!

<Frame>
  <img alt="" />
</Frame>

## Prerequisites

* A fundamental understanding of JavaScript and React.
* A minimal installation of AppKit in React.
* Obtain a new project Id on Reown Dashboard at [https://dashboard.reown.com](https://dashboard.reown.com)

## Final project

<Card title="Appkit Example for Interacting with the Solana Blockchain" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-solana">
  Clone this Github repo to try it out locally.
</Card>

## AppKit Minimal Installation

You can start a small project following the guidelines from our [installation React docs using Solana](https://docs.reown.com/appkit/react/core/installation?platform=solana)

## Start building

In this guide, we are going to use the library [@solana/web3.js](https://solana.com/docs/clients/javascript-reference) to make the calls to the Solana blockchain and to interact with the wallet.

First, install the required dependency:

<CodeGroup>
  ```bash npm theme={null}
  npm install @solana/web3.js
  ```

  ```bash yarn theme={null}
  yarn add @solana/web3.js
  ```

  ```bash pnpm theme={null}
  pnpm add @solana/web3.js
  ```

  ```bash bun theme={null}
  bun add @solana/web3.js
  ```
</CodeGroup>

### Get Balance

Fetching a user's balance is straightforward using the Connection object from Solana.

1. Start by importing the `useAppKitConnection` hook from the solana Adapter, the `useAppKitAccount` AppKit hook to get the account information and `PublicKey` from the solana/web3 library.

```js theme={null}
import { useAppKitConnection } from "@reown/appkit-adapter-solana/react";
import { useAppKitAccount } from "@reown/appkit/react";
import { PublicKey, LAMPORTS_PER_SOL } from "@solana/web3.js";
```

2. Use the hooks to retrieve the connection Solana object, the user's address and check if they are connected.

```js theme={null}
const { connection } = useAppKitConnection();
const { isConnected, address } = useAppKitAccount();
```

3. Create a function to fetch and display (in console) the balance when triggered

```js theme={null}
// function to get the balance
const handleGetBalance = async () => {
  const wallet = new PublicKey(address);
  const balance = await connection?.getBalance(wallet); // get the amount in LAMPORTS

  console.log(`${balance / LAMPORTS_PER_SOL} SOL`);
};
```

4. Finally, in order to call the function you can show the button in a component when `isConnected` is `true`

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={getBalance}>Get Balance</button>
    </div>
  )
);
```

### Sign a message

In order to raise the modal to sign a message with your wallet. You can follow these steps:

1. Start by importing the `useAppKitProvider` hook.

```js theme={null}
import { useAppKitProvider } from "@reown/appkit/react";
import type { Provider } from "@reown/appkit-adapter-solana/react";
```

2. Extract the `walletProvider` function from the `useAppKitProvider` hook. This function allows you to prompt the connected wallet to sign a specific message. Also the `useAppKitAccount` AppKit hook to get the address and isConnected as explain before.

```js theme={null}
// Get the wallet provider with the AppKit hook
const { walletProvider } = useAppKitProvider<Provider>("solana");

// AppKit hook to get the address and check if the user is connected
const { address, isConnected } = useAppKitAccount();
```

3. Create a function to prompt the modal for signing the message.

```js theme={null}
// function to sign a msg
const handleSignMsg = async () => {
  // message to sign
  const encodedMessage = new TextEncoder().encode("Hello Reown AppKit!");

  // Raise the modal
  const sig = await walletProvider.signMessage(encodedMessage);

  // Print the signed message in hexadecimal format
  console.log(Buffer.from(sig).toString("hex"));
};
```

4. Finally, in order to call the function:

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={handleSignMsg}>Sign Message</button>
    </div>
  )
);
```

### Send a transaction in Solana

In order to raise the modal to sign and send a transaction with your wallet. It's a bit more complex, but you can follow these steps:

1. Start by importing very similar packages from the previous examples and also the Transaction and SystemProgram object from solana/web3.js library.

```js theme={null}
import { useAppKitConnection } from "@reown/appkit-adapter-solana/react";
import { PublicKey, Transaction, SystemProgram } from "@solana/web3.js";
import { useAppKitAccount, useAppKitProvider } from "@reown/appkit/react";
import type { Provider } from "@reown/appkit-adapter-solana/react";
```

2. Use the `useAppKitAccount`, useAppKitConnection and useAppKitProvider AppKit hooks to get the connection object, the walletProvider and the address from the user.

```js theme={null}
const { isConnected, address } = useAppKitAccount();
const { connection } = useAppKitConnection();
const { walletProvider } = useAppKitProvider<Provider>("solana");
```

3. Create the function to raise the modal to send the transaction

```js theme={null}
// function to send a TX
const handleSendTx = () => {
    const latestBlockhash = await connection.getLatestBlockhash();

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

    // raise the modal
    const signature = await walletProvider.sendTransaction(transaction, connection)

    // print the Transaction Signature
    console.log(signature);
}
```

4. Finally, in order to call the function:

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={handleSendTx}>Send Transaction</button>
    </div>
  )
);
```

## Conclusion

By following this guide, you've learned how to integrate Reown AppKit and Solana into your React application to perform essential wallet operations.
You can now fetch wallet balances, sign messages, and send transactions in the Solana blockchain.

Keep exploring AppKit to enhance your dApp's functionality and user experience!


# How to Configure AppKit with Virtual TestNets?
Source: https://docs.reown.com/appkit/recipes/tenderly-virtual-testnets

Learn how to use Reown AppKit to enable wallet connections and interact with Tenderly Virtual Testnets.

Learn how to use Reown AppKit to enable wallet connections and interact with [Tenderly](https://tenderly.co/) Virtual Testnets. With AppKit, you can provide seamless wallet connections, including email and social logins, on-ramp functionality, smart accounts, one-click authentication, and wallet notifications, all designed to deliver an exceptional user experience. With Tenderly's Virtual TestNets, you can replicate real networks for various stages of your Web3 app development.

## Setup

This guide assumes you have already installed and configured Reown AppKit. If you haven't please follow the [installation guide](/appkit/overview).

For this tutorial, we'll be using Next.js, though you can use any other framework compatible with AppKit.

### Create a Virtual TestNet using Tenderly

Navigate to [Tenderly Dashboard](https://dashboard.tenderly.co/explorer) and login. If you don't have an account already, then please sign up.

Now, navigate to "**Virtual TestNets**" on the dashboard.

<Frame>
  <img alt="Virtual TestNets dashboard" />
</Frame>

Click on **"Create Virtual TestNet."** Next, you'll be prompted to select the parent network. For simplicity, select **"Sepolia"** as the parent network, though you can choose any network you prefer.

Now, enter a name for your Virtual TestNet. Under **"Chain ID,"** select **"Custom"** and enter a unique chain ID, like **"73571,"** to avoid conflicts with the existing Sepolia chain. Set **"Public Explorer"** to **"On"** and **"Smart Contract Visibility"** to **"Full."**

<Frame>
  <img alt="Create Virtual TestNet configuration" />
</Frame>

Now, click on **"Create"** to set up the Virtual TestNet. You will see that your Virtual TestNet has been created, and you can find the RPC and other relevant information for it. Please copy the `HTTPS` URL under "**Public**" as this will be your Virtual TestNet's RPC URL.

<Frame>
  <img alt="Virtual TestNet RPC URL" />
</Frame>

## Build the App

Before we build the app, let's first configure our `.env` file. On the root level of your code directory, create a new file named `.env`.

Open that file and create a new variable `NEXT_PUBLIC_PROJECT_ID`. You will assign the project Id that you copied in the previous step to this environment variable that you just created. You need to do the same for `TENDERLY_VIRTUAL_TESTNET_RPC`. This is what it will look like:

```jsx title=".env" theme={null}
NEXT_PUBLIC_PROJECT_ID = <YOUR_PROJECT_ID_HERE>
TENDERLY_VIRTUAL_TESTNET_RPC = <YOUR_TENDERLY_VIRTUAL_TESTNET_RPC_URL>
```

<Note>
  Please make sure you follow best practices when working with secret keys and other sensitive information. Environment variables that start with `NEXT_PUBLIC` will be exposed by your app, which can be misused by bad actors.
</Note>

### Configure Tenderly Virtual TestNet with AppKit

In order to set up Tenderly's Virtual TestNet with AppKit, you need to first configure your Tenderly Virtual TestNet as a custom chain.

Inside your `/app` directory, create a new file named `tenderly.config.ts`. Now, paste the code snippet shared below inside the code file, i.e., `app/tenderly.config.ts`.

```tsx title="app/tenderly.config.ts" theme={null}
import { defineChain } from "@reown/appkit/networks";

export const vTestnet = defineChain({
  id: 73571, // Add this to match the chain Id you set for your Virtual TestNet
  caipNetworkId: "eip155:73571",
  chainNamespace: "eip155",
  name: "Virtual Sepolia",
  nativeCurrency: { name: "vSepolia", symbol: "vETH", decimals: 18 },
  rpcUrls: {
    default: {
      http: [process.env.TENDERLY_VIRTUAL_TESTNET_RPC!],
    },
  },
  blockExplorers: {
    default: {
      name: "Tenderly Explorer",
      url: "https://dashboard.tenderly.co/explorer/vnet/6a6910ba-5831-4758-9d89-1f8e3169433f", // replace with your Virtual TestNet's explorer URL
    },
  },
  contracts: {
    ensRegistry: {
      address: "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e",
    },
    ensUniversalResolver: {
      address: "0xE4Acdd618deED4e6d2f03b9bf62dc6118FC9A4da",
      blockCreated: 16773775,
    },
    multicall3: {
      address: "0xca11bde05977b3631167028862be2a173976ca11",
      blockCreated: 14353601,
    },
  },
});
```

1. `id` — set this to the chain Id that you passed while creating the Virtual TestNet on Tenderly.
2. `url` — set this with your Virtual TestNet's explorer URL. You can find this URL within your Virtual TestNet's configuration on Tenderly Dashboard.

<Frame>
  <img alt="Tenderly explorer URL" />
</Frame>

Now, in your `config/index.tsx` file, import `vTestnet` from `app/tenderly.config.ts`. You'll also need to configure transports within the `WagmiAdapter` function. Refer to the code snippet below.

```tsx title="config/index.tsx" theme={null}
import { cookieStorage, createStorage, http } from "@wagmi/core";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { mainnet, arbitrum } from "@reown/appkit/networks";
import { vTestnet } from "@/app/tenderly.config";

// Get projectId from https://dashboard.reown.com
export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;

if (!projectId) {
  throw new Error("Project ID is not defined");
}

export const networks = [mainnet, arbitrum, vTestnet];

// Set up the Wagmi Adapter (Config)
export const wagmiAdapter = new WagmiAdapter({
  storage: createStorage({
    storage: cookieStorage,
  }),
  ssr: true,
  transports: {
    [vTestnet.id]: http(process.env.TENDERLY_VIRTUAL_TESTNET_RPC!),
  },
  networks,
  projectId,
});

export const config = wagmiAdapter.wagmiConfig;
```

Now, inside your `context/index.tsx` file, you also need to import `vTestnet` and pass it as one of the supported networks within the `createAppKit` function, as shown below.

```tsx title="context/index.tsx" theme={null}
"use client";

import { wagmiAdapter, projectId } from "@/config";
import { createAppKit } from "@reown/appkit/react";
import { mainnet, arbitrum } from "@reown/appkit/networks";
import { vTestnet } from "@/app/tenderly.config";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import React, { type ReactNode } from "react";
import { cookieToInitialState, WagmiProvider, type Config } from "wagmi";

// Set up queryClient
const queryClient = new QueryClient();

if (!projectId) {
  throw new Error("Project ID is not defined");
}

// Set up metadata
const metadata = {
  name: "appkit-example",
  description: "AppKit Example - EVM",
  url: "https://exampleapp.com", // origin must match your domain & subdomain
  icons: ["https://avatars.githubusercontent.com/u/37784886"],
};

// Create the modal
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum, vTestnet],
  metadata: metadata,
  features: {
    analytics: true, // Optional - defaults to your Cloud configuration
  },
});

function ContextProvider({
  children,
  cookies,
}: {
  children: ReactNode;
  cookies: string | null;
}) {
  const initialState = cookieToInitialState(
    wagmiAdapter.wagmiConfig as Config,
    cookies
  );

  return (
    <WagmiProvider
      config={wagmiAdapter.wagmiConfig as Config}
      initialState={initialState}
    >
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}

export default ContextProvider;
```

You can now run the app and test it out. In order to do so, run the command given below.

```bash theme={null}
npm run dev
```

> If you are using alternative package managers, you can try either of these commands — `yarn dev`, `pnpm dev`, or `bun dev`.

## Conclusion

And that's it! You have now learned how to create a simple app using AppKit and configure it with [Tenderly](https://tenderly.co/) Virtual TestNets.

<Card title="Tenderly Virtual TestNets Example" icon="github" href="https://github.com/rohit-710/appkit-tenderly-vTestnet">
  View the complete code repository here.
</Card>


# Travel Rule using AppKit
Source: https://docs.reown.com/appkit/recipes/travel-rule



## What is the Travel Rule?

The Travel Rule is a regulatory requirement designed to enhance transparency in financial transactions by mandating the exchange of specific information about both senders and recipients.
Initially applied to traditional wire transfers, this rule has been extended to the cryptocurrency sector, especially affecting Virtual Asset Service Providers (VASPs) under guidelines set by the Financial Action Task Force (FATF).

## Travel Rule in Cryptocurrency

In 2019, and updated in 2021, the FATF established standards for Virtual Asset Service Providers (VASPs) to follow similar protocols as traditional financial institutions. For crypto transactions, the suggested threshold is approximately EUR 1K.

### Authentication Scenario

SIWX (Sign In With Solana, EVM or Bitcoin) is a two-step authentication process:

1. **Connect Wallet**: First, the user connects their self-custodial wallet.

2. **Sign Message**: After connecting, the user signs a message with their wallet to prove ownership of the account. This signature cryptographically proves that they control the private keys.

Here's a practical example:

* John wants to transfer funds from his PortugalEx account to his non-custodial wallet
* PortugalEx implements AppKit in their withdrawal page to enable wallet connections
* When John initiates the withdrawal:
  1. He connects his self-custodial wallet through AppKit's interface
  2. AppKit prompts him to sign a message with the connected wallet
  3. Only after successful signature verification does PortugalEx allow the transfer
* This SIWX flow ensures John truly owns and controls the destination wallet before permitting withdrawals

## Installing and Implementing SIWX

## Prerequisites

Before implementing SIWX for Travel Rule compliance, ensure you have:

* AppKit installed and configured in your project following the [AppKit Next installation guide](https://docs.reown.com/appkit/next/core/installation)
* A project ID from [Reown Dashboard](https://dashboard.reown.com)

## Example Implementation

<Card title="Travel Rule SIWX Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/nextjs/next-siwx-multichain">
  Check out this example implementation of Travel Rule compliance using SIWX with multichain
</Card>

### Installation

Install the AppKit SIWX package:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-siwx
  ```

  ```bash yarn theme={null}
  yarn add @reown/appkit-siwx
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-siwx
  ```

  ```bash bun theme={null}
  bun add @reown/appkit-siwx
  ```
</CodeGroup>

### Usage

Once you have AppKit set up in your dApp, you can easily enable SIWX by adding the default implementation with the following configuration:

```ts {2, 8} theme={null}
import { createAppKit } from '@reown/appkit'
import { ReownAuthentication } from '@reown/appkit-siwx'

const appkit = createAppKit({
  projectId,
  networks,
  metadata,
  siwx: new ReownAuthentication() // add this line to enable SIWX
  
})
```

## Conclusion

By implementing SIWX for Travel Rule compliance, you have:

* Enhanced your platform's security by verifying wallet ownership before transfers
* Simplified the user experience while maintaining regulatory compliance
* Implemented a robust solution that works across multiple blockchain networks

This implementation helps meet Travel Rule requirements while providing a seamless experience for your users. The SIWX verification acts as a critical safeguard, ensuring that only verified wallet owners can send funds.

For more advanced customization options, refer to our [SIWX documentation](/appkit/authentication/siwx/default)


# Troubleshooting
Source: https://docs.reown.com/appkit/recipes/troubleshooting



You can find some of our troubleshooting guides below when using AppKit. If you encounter another issue, you report us [new issue on GitHub](https://github.com/reown-com/appkit/issues).

## In-app Browser Deeplink Detection

If you have a use case where you need to open AppKit Web SDK inside your mobile app's in-app browser, you need to handle deep links and Universal Links properly. By default, mobile operating systems restrict how these links work in in-app browsers.

To enable wallet connections via deep links, you must explicitly configure your in-app browser to intercept and handle these links. The code examples below show how to properly handle deep links for popular wallet apps like MetaMask and Trust Wallet across different mobile platforms and frameworks.

<Tabs>
  <Tab title="React Native">
    ```jsx theme={null}
    import React from 'react'
    import { Linking } from 'react-native'
    import { WebView } from 'react-native-webview'

    export default function MyWebView() {
      return (
        <WebView
          source={{ uri: 'https://yourdomain.com' }}
          onShouldStartLoadWithRequest={({ url }) => {
            if (url.startsWith('metamask://') || url.startsWith('trust://')) {
              Linking.openURL(url).catch(console.warn)
              return false
            }
            return true
          }}
        />
      )
    }
    ```
  </Tab>

  <Tab title="iOS/Swift (WKWebView)">
    ```swift theme={null}
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction,
                decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        if let url = navigationAction.request.url {
            let scheme = url.scheme ?? ""
            if scheme == "metamask" || scheme == "trust" {
                UIApplication.shared.open(url, options: [:], completionHandler: nil)
                decisionHandler(.cancel)
                return
            }
        }
        decisionHandler(.allow)
    }
    ```
  </Tab>

  <Tab title="iOS/Objective-C (WKWebView)">
    ```objective-c theme={null}
    - (void)webView:(WKWebView *)webView
      decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
      decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {

        NSURL *url = navigationAction.request.URL;
        NSString *scheme = url.scheme;
        if ([scheme isEqualToString:@"metamask"] || [scheme isEqualToString:@"trust"]) {
            [[UIApplication sharedApplication] openURL:url options:@{} completionHandler:nil];
            decisionHandler(WKNavigationActionPolicyCancel);
            return;
        }

        decisionHandler(WKNavigationActionPolicyAllow);
    }
    ```
  </Tab>

  <Tab title="Android/Kotlin (WebViewClient)">
    ```kotlin theme={null}
    webView.webViewClient = object : WebViewClient() {
        override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
            val url = request?.url.toString()
            val scheme = request?.url?.scheme ?: ""

            if (scheme == "metamask" || scheme == "trust") {
                try {
                    val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
                    view?.context?.startActivity(intent)
                } catch (e: Exception) {
                    Log.e("WebView", "Cannot open $scheme link", e)
                }
                return true
            }

            return false // let WebView handle the rest
        }
    }
    ```
  </Tab>

  <Tab title="Android/Java (WebViewClient)">
    ```java theme={null}
    webView.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            Uri uri = request.getUrl();
            String scheme = uri.getScheme();

            if ("metamask".equals(scheme) || "trust".equals(scheme)) {
                try {
                    Intent intent = new Intent(Intent.ACTION_VIEW, uri);
                    view.getContext().startActivity(intent);
                } catch (Exception e) {
                    Log.e("WebView", "Cannot open scheme: " + scheme, e);
                }
                return true;
            }

            return false;
        }
    });
    ```
  </Tab>

  <Tab title="Flutter (webview_flutter)">
    ```dart theme={null}
    import 'package:flutter/material.dart';
    import 'package:webview_flutter/webview_flutter.dart';
    import 'package:url_launcher/url_launcher.dart';

    class WebViewPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: WebView(
            initialUrl: 'https://yourdomain.com',
            navigationDelegate: (NavigationRequest request) {
              final uri = Uri.parse(request.url);
              if (uri.scheme == 'metamask' || uri.scheme == 'trust') {
                launchUrl(uri);
                return NavigationDecision.prevent;
              }
              return NavigationDecision.navigate;
            },
            javascriptMode: JavascriptMode.unrestricted,
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

## Why are the "Connect wallet" and "Network" buttons greyed out?

This can happen if your device is unable to reach the [WalletConnect relay service](https://relay.walletconnect.org).

If you see an error like:

```bash theme={null}
SocketException: Failed host lookup: 'relay.walletconnect.org' (OS Error: No address associated with hostname, errno = 7)
```

It usually means your connection is blocked by your VPN or network.

### Common causes and steps to resolve:

1. **VPN or Firewall settings**
   * Some VPNs may block access to the relay service.
   * If you are using a VPN (e.g., Windscribe), try:
     * Switching the VPN protocol to **WStunnel**.
     * Turning **off the Firewall toggle** in your VPN settings.

2. **Network restrictions**
   * If you’re on a restricted network (e.g., public Wi-Fi, corporate network, or in a restricted country), the relay service may be blocked.
   * Try switching to a different ISP or network.

3. **Connectivity issues**
   * Confirm that you can reach `relay.walletconnect.org`.
   * A 100% packet loss when pinging may indicate the service is blocked on your network.


# Universal Connector to use WalletConnect QR Code
Source: https://docs.reown.com/appkit/recipes/universal-connector



If you are planning to build a dApp that connects client wallets using WalletConnect QR in a chain-agnostic environment, the best way is to use our Universal Connector, which simplifies the integration process, provides flexibility across multiple networks, and ensures a consistent user experience.

In this recipe, you will learn how to:

* Use Universal Connector to connect a wallet using WalletConnect QR Code
* Configure supported networks for your dApp
* Manage session state for connected wallets

This guide takes approximately 20 minutes to complete.

Let’s dive in!

<img alt="WalletConnect QR Code" />

## Prerequisites

* A fundamental understanding of JavaScript and React.
* Obtain a new project Id on Reown Dashboard at [https://dashboard.reown.com](https://dashboard.reown.com)

## Final project

<Card title="WalletConnect SDK with QR Code" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-core-universal-connector">
  Download the full project to try it directly on your computer using Universal Connector.
</Card>

## Try the demo

* [Universal Connector Example](https://react-core-universal-connector.vercel.app/)

## Installation

In order to set up the project, you need to install the following packages:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit @reown/appkit-universal-connector @reown/appkit-common
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common
  ```

  ```bash Bun theme={null}
  bun add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common
  ```
</CodeGroup>

## Start building with Universal Connector

You can configure with the networks you want to support. For more information, please visit [RPC Reference](https://docs.reown.com/advanced/multichain/rpc-reference/cosmos-rpc) section from our docs.
We recommend creating a **config file** to establish a singleton instance for the `Universal Connector`:

```tsx theme={null}
import type { AppKitNetwork } from '@reown/appkit/networks'
import type { CustomCaipNetwork } from '@reown/appkit-common'
import { UniversalConnector } from '@reown/appkit-universal-connector'

// Get projectId from https://dashboard.reown.com
export const projectId = import.meta.env.VITE_PROJECT_ID || "b56e18d47c72ab683b10814fe9495694" // this is a public projectId only to use on localhost

if (!projectId) {
  throw new Error('Project ID is not defined')
}

// Example: configure Sui mainnet
const suiMainnet: CustomCaipNetwork<'sui'> = {
  id: 784,
  chainNamespace: 'sui' as const,
  caipNetworkId: 'sui:mainnet',
  name: 'Sui',
  nativeCurrency: { name: 'SUI', symbol: 'SUI', decimals: 9 },
  rpcUrls: { default: { http: ['https://fullnode.mainnet.sui.io:443'] } }
}

export async function getUniversalConnector() {
  const universalConnector = await UniversalConnector.init({
    projectId,
    metadata: {
      name: 'Universal Connector',
      description: 'Universal Connector',
      url: 'https://appkit.reown.com',
      icons: ['https://appkit.reown.com/icon.png']
    },
    networks: [
      {
        methods: ['sui_signPersonalMessage'],
        chains: [suiMainnet as CustomCaipNetwork],
        events: [],
        namespace: 'sui'
      }
    ]
  })

  return universalConnector
}
```

As you can see, we are importing the `UniversalConnector` class from the `@reown/appkit-universal-connector` package. Then you can use
the projectId that you can get from the [Reown Dashboard](https://dashboard.reown.com/). After that you can configure the networks you want to support.
The method `init` receives the projectId, the metadata and the networks you want to support.

In the App.tsx file you can add :

```tsx theme={null}
import { useState, useEffect } from 'react'
import { getUniversalConnector } from './config' // previous config file
import { UniversalConnector } from '@reown/appkit-universal-connector'

export function App() {
  const [universalConnector, setUniversalConnector] = useState<UniversalConnector>()
  const [session, setSession] = useState<any>()

  
  // Initialize the Universal Connector on component mount
  useEffect(() => {
    getUniversalConnector().then(setUniversalConnector)
  }, [])

  // Set the session state in case it changes
  useEffect(() => {
    setSession(universalConnector?.provider.session)
  }, [universalConnector?.provider.session])
```

This ensures:

The Universal Connector is initialized when the component mounts.
The session state updates whenever the connected wallet session changes.
With this setup, you’re now ready to build wallet connections in a chain-agnostic way using WalletConnect QR codes.

## Connect a Wallet

The following function initializes the connection and stores the session:

```tsx theme={null}
    const handleConnect = async () => {
      if (!universalConnector) {
        return
      }
  
      const { session: providerSession } = await universalConnector.connect()
      setSession(providerSession)
    };
```

Once the wallet is connected, the session information (such as accounts and namespaces) will be available in your app.
You can then use this session to perform actions like signing messages or sending transactions.

## Sign a Message

Once your wallet is connected, you can also use the Universal Connector to sign messages. This is useful for authentication or verifying ownership of an address.

Here’s an example of how to sign a personal message on Sui:

```tsx theme={null}
// Function to sign a message on Sui
const handleSignSUIMsg = async () => {
  if (!universalConnector) {
    return
  }

  const message = "Hello Reown AppKit!" // message to sign
  try {
    const account = session?.namespaces['sui']?.accounts[0]
    if (!account) {
      throw new Error('No account found')
    }

    const result = await universalConnector.request(
      {
        method: 'sui_signPersonalMessage',
        params: [message]
      },
      'sui:mainnet'
    )
    // eslint-disable-next-line no-console
    console.log('>> Sui Sign Message result', result)
  } catch (error) {
    // eslint-disable-next-line no-console
    console.error('>> Sui Sign Message error', error)
  }
}
```

You can trigger this function with a simple button:

```tsx theme={null}
<button onClick={handleSignSUIMsg}>
  Sign Message
</button>
```

This will prompt the connected wallet to sign the message "Hello Reown AppKit!" and log the result in the console.

## Disconnect a Wallet

It’s important to give users the option to disconnect their wallet from your dApp.
This clears the active session and ensures the wallet is no longer linked until the user chooses to reconnect.

Here’s a simple function to handle disconnection:

```tsx theme={null}
const handleDisconnect = async () => {
  if (!universalConnector) {
    return
  }
  await universalConnector.disconnect()
  setSession(null)
}
```

When called, this will terminate the session and reset the state in your app.
You can bind it to a “Disconnect” button in your UI to make it accessible to users.


# How to Sign Messages, Send Transactions, and Get Balance in EVM using AppKit with Wagmi
Source: https://docs.reown.com/appkit/recipes/wagmi-send-transaction



Learn how to use Reown AppKit for essential wallet functionalities such as signing messages, sending transactions, and retrieving wallet balances.

***

In this recipe, you will learn how to:

* Retrieve the balance of the connected wallet.
* Sign a message using a connected wallet.
* Send a transaction to the EVM blockchain.

This guide takes approximately 20 minutes to complete.

Let’s dive in!

<Frame>
  <img alt="" />
</Frame>

## Prerequisites

* A fundamental understanding of JavaScript and React.
* A minimal installation of AppKit in React.
* Obtain a new project Id on Reown Dashboard at [https://dashboard.reown.com](https://dashboard.reown.com)

## Final project

<Card title="Appkit wagmi Example with blockchain interactions" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-wagmi">
  Download the full project to try it directly on your computer.
</Card>

## AppKit Minimal Installation

You can start a small project following the guidelines from our [installation React docs using Wagmi](https://docs.reown.com/appkit/react/core/installation?platform=wagmi)

## Start building

In this guide we are going to use the library [Wagmi](https://wagmi.sh/) to make the calls to the blockchain and to interact with the wallet.

### Get Balance

Fetching a user's balance is straightforward using the `useBalance` hook from wagmi.

1. Start by importing the useBalance hook, the AppKit hook to get the account information and the Address type.

```jsx theme={null}
import { useBalance } from "wagmi";
import { useAppKitAccount } from "@reown/appkit/react";
import { type Address } from "viem";
```

2. Use the `useAppKitAccount` hook to retrieve the user's address and check if they are connected. Also call the `useBalance` hook.

```jsx theme={null}
// AppKit hook to get the address and check if the user is connected
const { address, isConnected } = useAppKitAccount()

// Call the useBalance hook with the user's address to prepare for fetching the balance.
const { refetch } = useBalance({
    address: address as Address
});

```

3. Create a function to fetch and display (in console) the balance when triggered

```jsx theme={null}
// function to get the balance
const handleGetBalance = async () => {
  const balance = await refetch();
  console.log(
    `${balance?.data?.value.toString()} ${balance?.data?.symbol.toString()}`
  );
};
```

4. Finally, in order to call the function you can show the button in a component when `isConnected` is `true`

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={getBalance}>Get Balance</button>
    </div>
  )
);
```

### Sign a message

In order to raise the modal to sign a message with your wallet. You can follow these steps:

1. Start by importing the `useSignMessage` hook.

```jsx theme={null}
import { useSignMessage } from "wagmi";
```

2. Extract the `signMessageAsync` function from the `useSignMessage` hook. This function allows you to prompt the connected wallet to sign a specific message. Also get the address and isConnected as explain before.

```jsx theme={null}
// Wagmi hook to sign a message
const { signMessageAsync } = useSignMessage();

// AppKit hook to get the address and check if the user is connected
const { address, isConnected } = useAppKitAccount();
```

3. Generate the function to raise the modal to sign the message

```jsx theme={null}
// function to sing a msg
const handleSignMsg = async () => {
    // message to sign
    const msg = "Hello Reown AppKit!"
    const sig = await signMessageAsync({ message: msg, account: address as Address });
}
```

4. Finally, in order to call the function:

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={handleSignMsg}>Sign Message</button>
    </div>
  )
);
```

### Send a transaction in EVM

In order to raise the modal to sign and send a transaction with your wallet. You can follow these steps:

1. Start by importing `useEstimateGas` and `useSendTransaction` hooks.

```jsx theme={null}
import { useEstimateGas, useSendTransaction } from "wagmi";
import { parseGwei, type Address } from "viem";
```

2. Use the `useEstimateGas` hook to calculate the gas required for the transaction, then proceed to send the transaction and get the user's connection status with the provided hooks.

```jsx theme={null}

// test transaction
const TEST_TX = {
  to: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045" as Address, // vitalik address
  value: parseGwei('0.0001')
}

 // Wagmi hook to estimate gas
const { data: gas } = useEstimateGas({...TEST_TX});

// Wagmi hook to send a transaction
const { data: hash, sendTransaction, } = useSendTransaction();

// AppKit hook to check if the user is connected
const { isConnected } = useAppKitAccount()
```

3. Generate the function to raise the modal to send the transaction

```jsx theme={null}
// function to send a TX
const handleSendTx = () => {
  try {
    sendTransaction({
      ...TEST_TX,
      gas, // Add the gas to the transaction
    });
  } catch (err) {
    console.log("Error sending transaction:", err);
  }
};
```

4. Finally, in order to call the function:

```jsx theme={null}
return (
  isConnected && (
    <div>
      <button onClick={handleSendTx}>Send Transaction</button>
    </div>
  )
);
```

## Conclusion

By following this guide, you’ve learned how to integrate Reown AppKit and Wagmi in your React application to perform essential wallet operations.
You can now fetch wallet balances, sign messages, and send transactions seamlessly in an EVM-compatible blockchain environment.

Keep exploring AppKit to enhance your dApp’s functionality and user experience!


# Actions
Source: https://docs.reown.com/appkit/svelte/core/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

```ts theme={null}
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

```ts theme={null}
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'
  }
})

// to open wallet send interface
appKit.open({ view: 'WalletSend' })
```

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.                                                                                                                                        |
| `WalletSend`      | Token sending interface that allows users to send tokens to another address.                                                                              |
| `Swap`            | Swap main view.                                                                                                                                           |
| `ProfileWallets`  | View for managing connected wallets in the user profile.                                                                                                  |

## Disconnect

```ts theme={null}
appKit.adapter?.connectionControllerClient?.disconnect();
```

## WalletInfo

Metadata information from the connected wallet

```ts theme={null}
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:

```ts theme={null}
// 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);
```

## Wallet Buttons

<Frame>
  <img />
</Frame>

Using the wallet button functions ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.
This allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need to open the traditional modal.

Follow these steps to use wallet buttons:

1. Install the package:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-wallet-button
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-wallet-button
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-wallet-button
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-wallet-button
  ```
</CodeGroup>

2. Import and use in your Svelte project:

```html theme={null}
<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>
```

<Note>
  Make sure to call wallet button methods after `createAppKit` has been initialized.
</Note>

### Multichain Support

You can specify a blockchain namespace to target specific chains:

```javascript theme={null}
<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>
```

#### Options for wallet property

| Type          | Options                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| QR Code       | `walletConnect`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| Wallets       | `metamask`, `trust`, `coinbase`, `rainbow`, `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`, `tokenpocket`, `haha`, `ambire-wallet`, `bitpay`, `blade-wallet`, `brave`, `coinstats`, `kresus-superapp`, `plena-app`, `status`, `tomo-wallet`, `valora`, and `zengo-wallet` |
| 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                 |

## Ethereum Library

<Tabs>
  <Tab title="Wagmi">
    You can use [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) to interact with wallets and smart contracts:

    ```ts theme={null}
    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](https://wagmi.sh/core/actions/readContract).
  </Tab>

  <Tab title="Ethers">
    [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:

    ```ts theme={null}
    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)
    }
    ```
  </Tab>
</Tabs>

## Modal State

Get the current value of the modal's state

```ts theme={null}
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.

```ts theme={null}
const appKit = createAppKit({ wagmiConfig, projectId });

appKit.subscribeState((newState) => console.log(newState));
```

## ThemeMode

Set the `themeMode` after creating the modal

```ts theme={null}
const appKit = createAppKit({ wagmiConfig, projectId });

appKit.setThemeMode("dark");
```

Get the current `themeMode` value by calling the `getThemeMode` function

```ts theme={null}
const appKit = createAppKit({ wagmiConfig, projectId });

const themeMode = appKit.getThemeMode();
```

## themeVariables

Set the `themeVariables` after creating the modal

```ts theme={null}
const appKit = createAppKit({ wagmiConfig, projectId })

appKit.setThemeVariables({ ... })
```

Get the current `themeVariables` value by calling the `getThemeVariables` function

```ts theme={null}
const appKit = createAppKit({ wagmiConfig, projectId });

const themeMode = appKit.getThemeVariables();
```

## Subscribe to theme changes

```ts theme={null}
const unsubscribe = appKit.subscribeTheme((newTheme) => console.log(newTheme));
```

## Track modal events

```ts theme={null}
appKit.getEvent(); // get last event
appKit.subscribeEvents((event) => console.log(event)); // subscribe to events
```


# Components
Source: https://docs.reown.com/appkit/svelte/core/components



AppKit provides pre-built UI components that you can use to trigger the modal or display wallet information.

## React Components

For React and Next.js applications, you can use React components instead of HTML elements:

```tsx theme={null}
import { 
  AppKitButton, 
  AppKitConnectButton, 
  AppKitAccountButton, 
  AppKitNetworkButton 
} from "@reown/appkit/react";

export default function MyApp() {
  return (
    <div>
      <AppKitButton />
      <AppKitConnectButton />
      <AppKitAccountButton />
      <AppKitNetworkButton />
    </div>
  );
}
```

## HTML Elements

AppKit's [web components](https://www.webcomponents.org/) are custom and reusable HTML tags. They will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

<Note>
  Web components are global html elements that don't require importing.
</Note>

### List of optional properties for AppKit web components

### `<appkit-button />`

| Variable       | Description                                                                                            | Type                               |
| -------------- | ------------------------------------------------------------------------------------------------------ | ---------------------------------- |
| `disabled`     | Enable or disable the button.                                                                          | `boolean`                          |
| `balance`      | Show or hide the user's balance.                                                                       | `'show'   \| 'hide'`               |
| `size`         | Default size for the button.                                                                           | `'md'     \| 'sm'`                 |
| `label`        | The text shown in the button.                                                                          | `string`                           |
| `loadingLabel` | The text shown in the button when the modal is open.                                                   | `string`                           |
| `namespace`    | Option to show specific namespace account info. Note: `eip155` is for EVM and `bip122` is for Bitcoin. | `'eip155' \| 'solana' \| 'bip122'` |

### `<appkit-account-button />`

| Variable   | Description                      | Type                 |
| ---------- | -------------------------------- | -------------------- |
| `disabled` | Enable or disable the button.    | `boolean`            |
| `balance`  | Show or hide the user's balance. | `'show'   \| 'hide'` |

### `<appkit-connect-button />`

| Variable       | Description                                          | Type              |
| -------------- | ---------------------------------------------------- | ----------------- |
| `size`         | Default size for the button.                         | `'md'    \| 'sm'` |
| `label`        | The text shown in the button.                        | `string`          |
| `loadingLabel` | The text shown in the button when the modal is open. | `string`          |

### `<appkit-network-button />`

| Variable   | Description                   | Type      |
| ---------- | ----------------------------- | --------- |
| `disabled` | Enable or disable the button. | `boolean` |


# Custom Connectors
Source: https://docs.reown.com/appkit/svelte/core/custom-connectors



Custom connectors allow you to integrate wallets that are not natively supported by AppKit.

## Adding Custom Connectors

You can add custom connectors to your AppKit configuration:

```ts theme={null}
import { createAppKit } from '@reown/appkit'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { mainnet, arbitrum } from '@reown/appkit/networks'

const wagmiAdapter = new WagmiAdapter({
  networks: [mainnet, arbitrum],
  projectId
})

const appKit = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
  connectors: [
    // Add your custom connectors here
  ]
})
```

For more information on creating custom connectors, refer to the [Wagmi documentation](https://wagmi.sh/core/connectors/custom).


# Installation
Source: https://docs.reown.com/appkit/svelte/core/installation



# Svelte

AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, Bitcoin, TON and TRON.
Choose one of these to get started.

<Note>
  We recommend using [SvelteKit v5](https://kit.svelte.dev/) to get started with AppKit Svelte.
</Note>

## Installation

Try installing AppKit Skills to get AI-assisted guidance. Your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.

<Tabs>
  <Tab title="Wagmi">
    <Warning>
      AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.
    </Warning>

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Solana">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-solana
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Bitcoin">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
      ```
    </CodeGroup>
  </Tab>

  <Tab title="TON">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ton
      ```
    </CodeGroup>
  </Tab>

  <Tab title="TRON">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-tron
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Cloud Configuration

Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

## Implementation

<Tabs>
  <Tab title="Wagmi">
    <Card title="Svelte Wagmi Example" icon="github" href="https://github.com/reown-com/appkit/tree/main/examples/sveltekit-wagmi">
      Check the Svelte Wagmi example
    </Card>

    For this example, we'll be using **Wagmi** and **Viem**.

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains and WagmiAdapter from `@reown/appkit-adapter-wagmi`.

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // lib/appkit.ts
    import { browser } from '$app/environment'
    import { createAppKit } from '@reown/appkit'
    import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    import { arbitrum, mainnet } from '@reown/appkit/networks'

    // Only initialize in browser environment
    let appKit: ReturnType<typeof createAppKit> | undefined = undefined

    if (browser) {
      const projectId = import.meta.env.VITE_PROJECT_ID
      if (!projectId) {
        throw new Error('VITE_PROJECT_ID is not set')
      }

      const networks = [arbitrum, mainnet]

      // Create adapter
      const wagmiAdapter = new WagmiAdapter({
        networks,
        projectId
      })

      // Initialize AppKit
      appKit = createAppKit({
        adapters: [wagmiAdapter],
        networks: [arbitrum, mainnet],
        defaultNetwork: arbitrum,
        projectId,
        metadata: {
          name: 'SvelteKit Example',
          description: 'SvelteKit Example using Wagmi adapter',
          url: 'https://reown.com/appkit',
          icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
        }
      })
    }

    export { appKit }
    ```

    <Note>
      Make sure to set your `VITE_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `browser` check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit's SSR compatibility.
    </Note>

    Then import this configuration in your app layout to ensure AppKit is initialized:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <!-- src/routes/+layout.svelte -->
    <script>
      import '$lib/appkit';
    </script>
    ```
  </Tab>

  <Tab title="Ethers">
    <Card title="Svelte Ethers Example" icon="github" href="https://github.com/reown-com/appkit/tree/main/examples/sveltekit-ethers">
      Check the Svelte Ethers example
    </Card>

    For this example, we'll be using **Ethers**.

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains and EthersAdapter from `@reown/appkit-adapter-ethers`.

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // lib/appkit.ts
    import { browser } from '$app/environment'
    import { createAppKit } from '@reown/appkit'
    import { EthersAdapter } from '@reown/appkit-adapter-ethers'
    import { arbitrum, mainnet } from '@reown/appkit/networks'

    // Only initialize in browser environment
    let appKit: ReturnType<typeof createAppKit> | undefined = undefined

    if (browser) {
      const projectId = import.meta.env.VITE_PROJECT_ID
      if (!projectId) {
        throw new Error('VITE_PROJECT_ID is not set')
      }

      const networks = [arbitrum, mainnet]

      // Create adapter
      const ethersAdapter = new EthersAdapter()

      // Initialize AppKit
      appKit = createAppKit({
        adapters: [ethersAdapter],
        networks: [arbitrum, mainnet],
        defaultNetwork: arbitrum,
        projectId,
        metadata: {
          name: 'SvelteKit Example',
          description: 'SvelteKit Example using Ethers adapter',
          url: 'https://reown.com/appkit',
          icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
        }
      })
    }

    export { appKit }
    ```

    <Note>
      Make sure to set your `VITE_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `browser` check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit's SSR compatibility.
    </Note>
  </Tab>

  <Tab title="Solana">
    <Warning>
      MetaMask does not currently support WalletConnect connections on Solana. The MetaMask team is working on adding this feature. In the meantime, we recommend using other wallets that support Solana. You can find the complete list of supported wallets on [WalletGuide](https://walletguide.walletconnect.network/).
    </Warning>

    For this example, we'll be using **Solana**.

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains and SolanaAdapter from `@reown/appkit-adapter-solana`.

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // lib/appkit.ts
    import { browser } from '$app/environment'
    import { createAppKit } from '@reown/appkit'
    import { SolanaAdapter } from '@reown/appkit-adapter-solana'
    import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/networks'

    // Only initialize in browser environment
    let appKit: ReturnType<typeof createAppKit> | undefined = undefined

    if (browser) {
      const projectId = import.meta.env.VITE_PROJECT_ID
      if (!projectId) {
        throw new Error('VITE_PROJECT_ID is not set')
      }

      const networks = [solana, solanaTestnet, solanaDevnet]

      // Create adapter
      const solanaAdapter = new SolanaAdapter()

      // Initialize AppKit
      appKit = createAppKit({
        adapters: [solanaAdapter],
        networks: [solana, solanaTestnet, solanaDevnet],
        defaultNetwork: solana,
        projectId,
        metadata: {
          name: 'SvelteKit Example',
          description: 'SvelteKit Example using Solana adapter',
          url: 'https://reown.com/appkit',
          icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
        }
      })
    }

    export { appKit }
    ```

    <Note>
      Make sure to set your `VITE_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `browser` check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit's SSR compatibility.
    </Note>
  </Tab>

  <Tab title="Bitcoin">
    For this example, we'll be using **Bitcoin**.

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains and BitcoinAdapter from `@reown/appkit-adapter-bitcoin`.

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // lib/appkit.ts
    import { browser } from '$app/environment'
    import { createAppKit } from '@reown/appkit'
    import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
    import { bitcoin, bitcoinTestnet, bitcoinSignet } from '@reown/appkit/networks'

    // Only initialize in browser environment
    let appKit: ReturnType<typeof createAppKit> | undefined = undefined

    if (browser) {
      const projectId = import.meta.env.VITE_PROJECT_ID
      if (!projectId) {
        throw new Error('VITE_PROJECT_ID is not set')
      }

      const networks = [bitcoin, bitcoinTestnet, bitcoinSignet]

      // Create adapter
      const bitcoinAdapter = new BitcoinAdapter()

      // Initialize AppKit
      appKit = createAppKit({
        adapters: [bitcoinAdapter],
        networks: [bitcoin, bitcoinTestnet, bitcoinSignet],
        defaultNetwork: bitcoin,
        projectId,
        metadata: {
          name: 'SvelteKit Example',
          description: 'SvelteKit Example using Bitcoin adapter',
          url: 'https://reown.com/appkit',
          icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
        }
      })
    }

    export { appKit }
    ```

    <Note>
      Make sure to set your `VITE_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `browser` check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit's SSR compatibility.
    </Note>
  </Tab>

  <Tab title="TON">
    For this example, we'll be using **TON**.

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains and TonAdapter from `@reown/appkit-adapter-ton`.

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // lib/appkit.ts
    import { browser } from '$app/environment'
    import { createAppKit } from '@reown/appkit'
    import { TonAdapter } from '@reown/appkit-adapter-ton'
    import { ton, tonTestnet } from '@reown/appkit/networks'

    // Only initialize in browser environment
    let appKit: ReturnType<typeof createAppKit> | undefined = undefined

    if (browser) {
      const projectId = import.meta.env.VITE_PROJECT_ID
      if (!projectId) {
        throw new Error('VITE_PROJECT_ID is not set')
      }

      const networks = [ton, tonTestnet]

      // Create adapter
      const tonAdapter = new TonAdapter()

      // Initialize AppKit
      appKit = createAppKit({
        adapters: [tonAdapter],
        networks: [ton, tonTestnet],
        defaultNetwork: ton,
        projectId,
        metadata: {
          name: 'SvelteKit Example',
          description: 'SvelteKit Example using TON adapter',
          url: 'https://reown.com/appkit',
          icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
        }
      })
    }

    export { appKit }
    ```

    <Note>
      Make sure to set your `VITE_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `browser` check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit's SSR compatibility.
    </Note>
  </Tab>

  <Tab title="TRON">
    For this example, we'll be using **TRON**.

    Start by importing `createAppKit` from `@reown/appkit` and the necessary chains and TronAdapter from `@reown/appkit-adapter-tron`.

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    // lib/appkit.ts
    import { browser } from '$app/environment'
    import { createAppKit } from '@reown/appkit'
    import { TronAdapter } from '@reown/appkit-adapter-tron'
    import { tronMainnet } from '@reown/appkit/networks'

    // Import wallet adapters you want to support
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'

    // Only initialize in browser environment
    let appKit: ReturnType<typeof createAppKit> | undefined = undefined

    if (browser) {
      const projectId = import.meta.env.VITE_PROJECT_ID
      if (!projectId) {
        throw new Error('VITE_PROJECT_ID is not set')
      }

      const networks = [tronMainnet]

      // Create adapter with wallet adapters
      const tronAdapter = new TronAdapter({
        walletAdapters: [
          new TronLinkAdapter({
            openUrlWhenWalletNotFound: false,
            checkTimeout: 3000
          })
        ]
      })

      // Initialize AppKit
      appKit = createAppKit({
        adapters: [tronAdapter],
        networks,
        defaultNetwork: tronMainnet,
        projectId,
        metadata: {
          name: 'SvelteKit Example',
          description: 'SvelteKit Example using TRON adapter',
          url: 'https://reown.com/appkit',
          icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
        }
      })
    }

    export { appKit }
    ```

    <Note>
      Make sure to set your `VITE_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `browser` check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit's SSR compatibility.
    </Note>

    ## Install Wallet Adapters

    TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size.

    <Tabs>
      <Tab title="TronLink">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-tronlink
          ```
        </CodeGroup>
      </Tab>

      <Tab title="MetaMask">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-metamask-tron
          ```
        </CodeGroup>
      </Tab>

      <Tab title="Trust Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-trust
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-trust
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-trust
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-trust
          ```
        </CodeGroup>
      </Tab>

      <Tab title="OKX Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-okxwallet
          ```
        </CodeGroup>
      </Tab>

      <Tab title="BitKeep">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-bitkeep
          ```
        </CodeGroup>
      </Tab>

      <Tab title="Binance Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-binance
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-binance
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-binance
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-binance
          ```
        </CodeGroup>
      </Tab>
    </Tabs>

    <Note>
      For a complete list of available TRON wallet adapters, visit the [official wallet adapter documentation](https://walletadapter.org/docs/guide/wallet-reference.html).
    </Note>

    ### Using Multiple Wallet Adapters

    After installing your desired wallet adapters, import and add them to the `walletAdapters` array when creating the TRON adapter:

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'
    import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron'
    import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust'
    import { OkxWalletAdapter } from '@tronweb3/tronwallet-adapter-okxwallet'

    const tronAdapter = new TronAdapter({
      walletAdapters: [
        new TronLinkAdapter({
          openUrlWhenWalletNotFound: false,
          checkTimeout: 3000
        }),
        new MetaMaskAdapter(),
        new TrustAdapter(),
        new OkxWalletAdapter({
          openUrlWhenWalletNotFound: false
        })
      ]
    })
    ```
  </Tab>
</Tabs>

## Trigger the modal

The recommended way to trigger the modal in Svelte is to use the `<appkit-button />` web component. After setting up AppKit in your application, you can simply use the button component anywhere in your Svelte templates:

```javascript theme={null}
<script lang="ts">
  // Import your AppKit configuration to ensure it's initialized
  import '$lib/appkit';
</script>

<main>
  <h1>Svelte + AppKit Integration</h1>

  <div class="card">
    <appkit-button />
  </div>
</main>
```

The `<appkit-button />` is a web component that's automatically registered when AppKit is initialized. No additional imports are required.

### Alternative approaches

You can also trigger the modal programmatically using the AppKit instance:

```javascript theme={null}
<script lang="ts">
  import { appKit } from '$lib/appkit';

  function openModal() {
    appKit?.open();
  }

  function openConnectModal() {
    appKit?.open({ view: 'Connect' });
  }

  function openAccountModal() {
    appKit?.open({ view: 'Account' });
  }
</script>

<button on:click={openModal}>Open Modal</button>
<button on:click={openConnectModal}>Connect Wallet</button>
<button on:click={openAccountModal}>View Account</button>
```

Or use other AppKit web components:

```javascript theme={null}
<appkit-connect-button />
<appkit-account-button />
<appkit-network-button />
```

<Tabs>
  <Tab title="Wagmi">
    The recommended way to trigger the modal is using the `initializeAppKit` function and web components:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script lang="ts">
      import { initializeAppKit } from './lib/stores/appkit';

      // Initialize AppKit with your project ID
      initializeAppKit('YOUR_PROJECT_ID');
    </script>

    <main>
      <appkit-button />
    </main>
    ```

    You can also trigger the modal programmatically by calling the `open` method from AppKit instance:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <!-- +page.svelte -->
    <script>
      import { appKit } from '$lib/appkit'
      
      function openModal() {
        appKit?.open()
      }
    </script>

    <button on:click={openModal}>Open Modal</button>
    ```

    You can select the modal's view when calling the `open` function:

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script>
      import { appKit } from '$lib/appkit'
      
      function openConnectModal() {
        appKit?.open({ view: 'Connect' })
      }
      
      function openAccountModal() {
        appKit?.open({ view: 'Account' })
      }
    </script>

    <button on:click={openConnectModal}>Connect Wallet</button>
    <button on:click={openAccountModal}>View Account</button>
    ```
  </Tab>

  <Tab title="Ethers">
    You can trigger the modal by calling the `open` method from AppKit instance.

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <!-- +page.svelte -->
    <script>
      import { appKit } from '$lib/appkit'
      
      function openModal() {
        appKit?.open()
      }
    </script>

    <button on:click={openModal}>Open Modal</button>
    ```

    You can also select the modal's view when calling the `open` function.

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script>
      import { appKit } from '$lib/appkit'
      
      function openConnectModal() {
        appKit?.open({ view: 'Connect' })
      }
      
      function openAccountModal() {
        appKit?.open({ view: 'Account' })
      }
    </script>

    <button on:click={openConnectModal}>Connect Wallet</button>
    <button on:click={openAccountModal}>View Account</button>
    ```
  </Tab>

  <Tab title="Solana">
    You can trigger the modal by calling the `open` method from AppKit instance.

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <!-- +page.svelte -->
    <script>
      import { appKit } from '$lib/appkit'
      
      function openModal() {
        appKit?.open()
      }
    </script>

    <button on:click={openModal}>Open Modal</button>
    ```

    You can also select the modal's view when calling the `open` function.

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script>
      import { appKit } from '$lib/appkit'
      
      function openConnectModal() {
        appKit?.open({ view: 'Connect' })
      }
      
      function openAccountModal() {
        appKit?.open({ view: 'Account' })
      }
    </script>

    <button on:click={openConnectModal}>Connect Wallet</button>
    <button on:click={openAccountModal}>View Account</button>
    ```
  </Tab>

  <Tab title="Bitcoin">
    You can trigger the modal by calling the `open` method from AppKit instance.

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <!-- +page.svelte -->
    <script>
      import { appKit } from '$lib/appkit'
      
      function openModal() {
        appKit?.open()
      }
    </script>

    <button on:click={openModal}>Open Modal</button>
    ```

    You can also select the modal's view when calling the `open` function.

    ```javascript theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script>
      import { appKit } from '$lib/appkit'
      
      function openConnectModal() {
        appKit?.open({ view: 'Connect' })
      }
      
      function openAccountModal() {
        appKit?.open({ view: 'Account' })
      }
    </script>

    <button on:click={openConnectModal}>Connect Wallet</button>
    <button on:click={openAccountModal}>View Account</button>
    ```
  </Tab>

  <Tab title="TON">
    To open AppKit you can use our [**web component**](/appkit/svelte/core/components) or build your own button with AppKit [**actions**](/appkit/svelte/core/actions#open-and-close-the-modal).
    In this example we are going to use the `<appkit-button>` component.

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

    ```svelte theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script lang="ts">
      // Import your AppKit configuration to ensure it's initialized
      import '$lib/appkit';
    </script>

    <main>
      <h1>Svelte + AppKit Integration</h1>
      
      <div class="card">
        <appkit-button />
      </div>
    </main>
    ```
  </Tab>

  <Tab title="TRON">
    To open AppKit you can use our [**web component**](/appkit/svelte/core/components) or build your own button with AppKit [**actions**](/appkit/svelte/core/actions#open-and-close-the-modal).
    In this example we are going to use the `<appkit-button>` component.

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

    ```svelte theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script lang="ts">
      // Import your AppKit configuration to ensure it's initialized
      import '$lib/appkit';
    </script>

    <main>
      <h1>Svelte + AppKit Integration</h1>
      
      <div class="card">
        <appkit-button />
      </div>
    </main>
    ```
  </Tab>
</Tabs>

## Blockchain Interaction

<Tabs>
  <Tab title="Wagmi">
    You need to install @wagmi/core to interact with smart contracts:

    <CodeGroup>
      ```bash npm theme={null}
      npm install @wagmi/core
      ```

      ```bash Yarn theme={null}
      yarn add @wagmi/core
      ```

      ```bash Bun theme={null}
      bun a @wagmi/core
      ```

      ```bash pnpm theme={null}
      pnpm add @wagmi/core
      ```
    </CodeGroup>

    [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) can help us interact with wallets and smart contracts:

    For this use case, we need to import the `wagmiConfig` from our AppKit WagmiAdapter configuration.

    ```ts theme={null}
    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](https://wagmi.sh/core/actions/readContract).
  </Tab>

  <Tab title="Ethers">
    [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:

    ```ts theme={null}
    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)
    }
    ```
  </Tab>
</Tabs>

## AppKit Skills

AppKit Skills provide AI-powered assistance for building with Reown AppKit. Once installed, your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.


# Options
Source: https://docs.reown.com/appkit/svelte/core/options



The following options can be passed to the `createAppKit` function:

```ts theme={null}
createAppKit({ adapters, projectId, networks, ...options });
```

## networks

Array of networks that can be chosen from the `@reown/appkit/networks` library. This library retrieves the list of EVM networks from Viem and also includes the Solana networks.

```ts theme={null}
import { mainnet, solana } from "@reown/appkit/networks";

createAppKit({
  // ...
  networks: [mainnet, solana],
});
```

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

## metadata

Metadata for your AppKit. The `name`, `description`, `icons`, and `url` are used at certain places like the wallet connection, sign message, etc screens. If not provided, they will be fetched from the metadata of your website's document object.

```ts theme={null}
createAppKit({
  // ...
  metadata: {
    name: "My App",
    description: "My App Description",
    icons: ["https://myapp.com/icon.png"],
    url: "https://myapp.com",
  },
});
```

This information will primarily be used in modals when signing a transaction or message using [Embedded wallets (Smart Accounts)](/appkit/features/smart-accounts), or when verifying ownership with [SIWE/SIWX](/appkit/authentication/siwx/default) using any wallet.

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

<AccordionGroup>
  <Accordion title="The icon can be an encoded image">
    ```typescript theme={null}
    const icon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
    createAppKit({
      // ...
      metadata: {
        // ...
        icons: [icon]
      }
    })
    ```
  </Accordion>
</AccordionGroup>

## defaultNetwork

Desired network for the initial connection as default:

<Tabs>
  <Tab title="Wagmi">
    ```ts theme={null}
    import { mainnet } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts theme={null}
    const mainnet = {
      chainId: 1,
      name: "Ethereum",
      currency: "ETH",
      explorerUrl: "https://etherscan.io",
      rpcUrl: "https://cloudflare-eth.com",
    };

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Solana">
    ```ts theme={null}
    import { solana } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: solana,
    });
    ```
  </Tab>
</Tabs>

## defaultAccountTypes

It allows you to configure the default account selected for the specified networks in AppKit. For example, if you want your EVM networks to use an EOA account by default, you can configure it as shown in the code below.

```ts theme={null}
createAppKit({
  //...
  defaultAccountTypes: { eip155: "eoa" },
});
```

Here are all the options you have for each network identifier or networks. Network identifier or networks available are `eip155` for EVM chains, `solana` for Solana, `bip122` for Bitcoin, and `polkadot` for Polkadot.

```ts theme={null}
type DefaultAccountTypes = {
  eip155: "eoa" | "smartAccount";
  solana: "eoa";
  bip122: "payment" | "ordinal" | "stx";
  polkadot: "eoa";
};
```

## featuredWalletIds

Select wallets that are going to be shown on the modal's main view. Default wallets are MetaMask and Trust Wallet.
Array of wallet ids defined will be prioritized (order is respected).
These wallets will also show up first in `All Wallets` view.
You can find the wallets IDs in [Wallets List](/cloud/wallets/wallet-list) or in [WalletGuide](https://walletguide.walletconnect.network/)

```ts theme={null}
createAppKit({
  //...
  featuredWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

## chainImages

Add or override the modal's network images.

```ts theme={null}
createAppKit({
  // ...
  chainImages: {
    1: "https://my.images.com/eth.png",
  },
});
```

## connectorImages

<Tabs>
  <Tab title="Wagmi">
    Set or override the images of any [connector](https://wagmi.sh/core/connectors/injected). AppKit supports two types of connector identification:

    * **EIP6963 wallets** (announced wallets): Use RDNS format like `'io.metamask'`, `'io.coinbase'`, `'app.phantom'`
    * **Other wallets**: Use normal connector IDs like `walletConnect`, `injected`, `appKitAuth`

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'io.metamask': "https://images.mydapp.com/metamask.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
        injected: "https://images.mydapp.com/browser-wallet.png",
      },
    });
    ```
  </Tab>

  <Tab title="Ethers">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>

  <Tab title="Solana">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'app.phantom': "https://images.mydapp.com/phantom.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>
</Tabs>

## enableWallets

Enable or disable injected wallets and WalletConnect. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWallets: false,
});
```

## enableNetworkSwitch

Enables or disables the network switching functionality in the modal. The default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableNetworkSwitch: false,
});
```

## enableReconnect

Enable or disable automatic reconnection on initialization and page load. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableReconnect: false,
});
```

## enableMobileFullScreen

Enable or disable fullscreen rendering of AppKit Core on mobile devices. Default is `false`.

```ts theme={null}
createAppKit({
  //...
  enableMobileFullScreen: true,
});
```

## debug

Enable or disable debug mode in your AppKit. This is useful if you want to see UI alerts when debugging. Default is `false`.

```ts theme={null}
debug: true;
```

## enableWalletGuide

Enable or disable the wallet guide text: `Haven't got a wallet? Get started`, is useful for people that don't have a wallet yet. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWalletGuide: false,
});
```

## termsConditionsUrl

You can add an url for the *terms and conditions* link.

```ts theme={null}
createAppKit({
  //...
  termsConditionsUrl: "https://www.mytermsandconditions.com",
});
```

## privacyPolicyUrl

A URL for the *privacy policy* link.

```ts theme={null}
createAppKit({
  //...
  privacyPolicyUrl: "https://www.myprivacypolicy.com",
});
```

## features

Allows you to toggle (enable or disable) additional features provided by AppKit. Features such as analytics, email and social logins, On-ramp, swaps, etc., can be enabled using this parameter.

### analytics

Enable analytics to get more insights on your users activity within your [Reown Dashboard](https://dashboard.reown.com)

```ts theme={null}
createAppKit({
  //...
  features: {
    analytics: true,
  },
});
```

<Card title="Learn More" href="/cloud/analytics" />

### swaps

Enable or disable the swap feature in your AppKit. [Swaps](/appkit/react/transactions/swaps) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    swaps: true,
  },
});
```

### onramp

Enable or disable the onramp feature in your AppKit. [Onramp](/appkit/react/transactions/onramp) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    onramp: true,
  },
});
```

### connectMethodsOrder

Order of the connection methods in the modal. The default order is `['wallet', 'email', 'social']`.

<Frame>
  <img />
</Frame>

```ts theme={null}
createAppKit({
  //...
  features: {
    connectMethodsOrder: ["social", "email", "wallet"],
  },
});
```

### legalCheckbox

Enable or disable the terms of service and/or privacy policy checkbox.

```ts theme={null}
createAppKit({
  //...
  features: {
    legalCheckbox: true,
  },
});
```

<Frame>
  <img />
</Frame>

## customWallets

Adds custom wallets to the modal. `customWallets` is an array of objects, where each object contains specific information of a custom wallet.

```ts theme={null}
createAppKit({
  //...
  customWallets: [
    {
      id: "myCustomWallet",
      name: "My Custom Wallet",
      homepage: "www.mycustomwallet.com", // Optional
      image_url: "my_custom_wallet_image", // Optional
      mobile_link: "mobile_link", // Optional - Deeplink or universal
      desktop_link: "desktop_link", // Optional - Deeplink
      webapp_link: "webapp_link", // Optional
      app_store: "app_store", // Optional
      play_store: "play_store", // Optional
    },
  ],
});
```

## AllWallets

<Warning>
  If the "All Wallets" button is removed on mobile, all the mobile wallets that were not added on the main view of the modal **won't** be able to connect to your website via WalletConnect protocol.
</Warning>

The `allWallets` parameter allows you to add or remove the "All Wallets" button on the modal.

| Value         | Description                                              |
| ------------- | -------------------------------------------------------- |
| `SHOW`        | Shows the "All Wallets" button on AppKit.                |
| `HIDE`        | Removes the "All Wallets" button from AppKit.            |
| `ONLY_MOBILE` | Shows the "All Wallets" button on AppKit only on mobile. |

```ts theme={null}
createAppKit({
  //...
  allWallets: "ONLY_MOBILE",
});
```

## includeWalletIds & excludeWalletIds

<Warning>
  Wallets that are either not included or excluded **won't** be able to connect to your website on mobile via WalletConnect protocol.
</Warning>

### includeWalletIds

Override default recommended wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be shown (order is respected).
Unlike `featuredWalletIds`, these wallets will be the **only** ones shown in `All Wallets` view and as recommended wallets.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  includeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### excludeWalletIds

Exclude wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be excluded. All other wallets will be shown in respective places.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  excludeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### Coinbase Smart Wallet

The Coinbase connector now includes a new flag to customize the Smart Wallet behavior.

The `preference` (or `coinbasePreference`) flag accepts one of the following string values:

* `eoaOnly`: Uses EOA Browser Extension or Mobile Coinbase Wallet.
* `smartWalletOnly`: Displays Smart Wallet popup.
* `all` (default): Supports both `eoaOnly` and `smartWalletOnly` based on context.

<Tabs>
  <Tab title="Wagmi">
    AppKit can be configured in **two** different ways: **Default** or **Custom**

    Select your preferred configuration mode below:

    Learn more about the Coinbase connector in the [Wagmi documentation](https://wagmi.sh/react/api/connectors/coinbaseWallet#preference).

    <CodeGroup>
      ```ts Default {4} theme={null}
      createAppKit({
        //...
        enableCoinbase: true, // true by default
        coinbasePreference: "smartWalletOnly",
      });
      ```

      ```ts Custom {8} theme={null}
      import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";

      const adapter = new WagmiAdapter({
        //...
        connectors: [
          coinbaseWallet({
            //...
            preference: "smartWalletOnly",
          }),
          projectId,
          networks,
        ],
      });

      export const config = wagmiAdapter.wagmiConfig;
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    ```ts {4} theme={null}
    createAppKit({
      //...
      enableCoinbase: true, // true by default
      coinbasePreference: "smartWalletOnly",
    });
    ```
  </Tab>
</Tabs>

## customRpcUrls

This function allows you to add custom RPC URLs to override the default network RPC URLs for native RPC calls. This is useful when you want to use your own RPC endpoints instead of the defaults.

```ts theme={null}
type CustomRpcUrl = {
  url: string
  config?: HttpTransportConfig // Optional transport configuration
}

type CustomRpcUrlMap = Record<CaipNetworkId, CustomRpcUrl[]>

createAppKit({
  //...
  customRpcUrls: {
    'eip155:1': [
      {
        url: 'https://your-custom-mainnet-url.com',
        config: {
          // Optional HTTP transport configuration
        }
      }
    ],
    'eip155:137': [
      {
        url: 'https://your-custom-polygon-url.com'
      }
    ]
  }
})
```

If you are using the Wagmi adapter, you need to pass the same `customRpcUrls` configuration to both the `WagmiAdapter` and `createAppKit`.

```ts theme={null}
const customRpcUrls: CustomRpcUrlMap = {
  'eip155:1': [{ url: 'https://your-custom-mainnet-url.com' }],
  'eip155:137': [{ url: 'https://your-custom-polygon-url.com' }]
}

const wagmiAdapter = new WagmiAdapter({
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})

const modal = createAppKit({
  adapters: [...],
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})
```

<Note>
  When using the Wagmi adapter, you don't need to configure [`transports`](https://wagmi.sh/core/api/createConfig#transports) separately. The WagmiAdapter will automatically configure them based on your `customRpcUrls`.

  However, if you use both `customRpcUrls` and Wagmi's `transports` property, be aware that `transports` will take precedence and override any conflicting RPC URLs defined in `customRpcUrls`.

  ```ts theme={null}
  const wagmiAdapter = new WagmiAdapter({
    //...
    customRpcUrls: {
      'eip155:1': [{ url: 'https://custom-rpc-1.com' }] // This will be overridden
    },
    transports: {
      [mainnet.id]: http('https://transport-rpc-1.com') // This takes precedence
    }
  })
  ```
</Note>

## universalProviderConfigOverride

Lets you customize specific aspects of the provider's behavior.

```ts theme={null}
createAppKit({
  //...
  universalProviderConfigOverride: {
    methods: { eip155: ['eth_sendTransaction', 'personal_sign'] },
    chains: { eip155: ['1', '137'] },
    events: { eip155: ['chainChanged', 'accountsChanged'] },
    rpcMap: { eip155:1: 'https://ethereum.publicnode.com' },
    defaultChain: 'eip155:1'
  },
});
```

You can override any of the following properties:

* `methods`: Custom RPC methods for each namespace
* `chains`: Supported chains for each namespace
* `events`: Events to subscribe to for each namespace
* `rpcMap`: Custom RPC URLs for specific chains
* `defaultChain`: The default chain to connect to

## allowUnsupportedChain

Allow users to switch to an unsupported chain. This parameter prevents the switch network dialog when a user connects to a network not listed under the `networks` attribute.

```ts theme={null}
createAppKit({
  //...
  allowUnsupportedChain: true,
});
```


# Email & Socials
Source: https://docs.reown.com/appkit/svelte/core/socials



To allow users to authenticate using their email or social accounts, you need to configure the `features` parameter in the `createAppKit` function.

<Tabs>
  <Tab title="Wagmi">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```

    <Note>
      AppKit with ethers v5 does not support the `auth` parameter and social logins. If you're using ethers v5, please consider upgrading to ethers v6 following this [ethers migration guide](https://docs.ethers.org/v6/migrating/) and [AppKit Docs](https://docs.walletconnect.com/appkit/overview)
    </Note>
  </Tab>

  <Tab title="Solana">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [solanaWeb3JsAdapter],
      projectId,
      networks: [solana, solanaTestnet, solanaDevnet],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "discord",
          "farcaster",
          "github",
          "apple",
          "facebook",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>
</Tabs>

## Options

* ***email \[boolean]*** : This boolean defines whether you want to enable email login. Default `true`
* ***socials \[array]*** : This array contains the list of social platforms that you want to enable for user authentication. The platforms in the example include Google, X, GitHub, Discord, Apple, Facebook and Farcaster. The default value of `undefined` displays everything. Set it to `false` to disable this feature. You can also pass an empty array to disable it.
* ***emailShowWallets \[boolean]*** : This boolean defines whether you want to show the wallet options on the first connect screen. If this is false and `socials` are enabled, it will show a button that directs you to a new screen displaying the wallet options. Default `true`

## User flow

1. Users will be able to connect to you application by simply using an email address. AppKit will send to them a One Time Password (OTP) to copy and paste in the modal, which will help to
   verify the user's authenticity. This will create a non-custodial wallet for your user which will be available in any application that integrates AppKit and email login.

2. Eventually the user can optionally choose to move from a non-custodial wallet to a self-custodial one by pressing "Upgrade Wallet" on AppKit.
   This will open the *([WalletConnect secure website](https://secure.walletconnect.com/dashboard))* that will walk your user through the upgrading process.

## UI Variants

AppKit SDK offers multiple UI variants to customize the user experience for the authentication process.

By configuring the `emailShowWallets` option in the `features` parameter, you can control the initial connect screen behavior:

* **`emailShowWallets: true`**: When this option is enabled, the initial connect screen will display the available wallet options directly to the user. This allows users to choose their preferred wallet immediately.

<Frame>
  <img />
</Frame>

* **`emailShowWallets: false`**: If this option is disabled, the initial connect screen will show a button instead. When the user clicks this button, they will be directed to a new screen that lists all the available wallet options. This can help simplify the initial interface and reduce visual clutter.

<Frame>
  <img />
</Frame>

By configuring the `socials` option in the `features` parameter, you can control the amount of social providers you want to show on the connect screen:

* **`socials: ['google']`**: When you only set one social provider, it will give you a button with \`connect with provider.

<Frame>
  <img />
</Frame>

* **`socials: ['google', 'discord']`**: When you set 2 social provider, it will give you 2 buttons next to each other with the logo of the social provider

<Frame>
  <img />
</Frame>

* **` socials: ['google', 'x', 'discord', 'apple', 'github']`**: When you set more than 2 social providers, the first provider in the array will get a button with `connect with provider`. The other providers will get a button with the logo of the social provider next to each other.

<Frame>
  <img />
</Frame>

* **`socials: []` or `socials: false`**: When you want to disable social logins.

<Frame>
  <img />
</Frame>

* **` email: false`**: When you want to disable email login.

<Frame>
  <img />
</Frame>

By configuring the `allWallets` option inside the `createAppKit` function, you can control whether if and when you want to display all wallets.

* **`allWallets: 'HIDE'`**: When you do not want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'SHOW'`**: When you want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'ONLY_MOBILE'`**: When you want to display all wallets only on a mobile device.


# Theming
Source: https://docs.reown.com/appkit/svelte/core/theming



The theme for the AppKit integration in your dApp can be fully customized.

## ThemeMode

By default `themeMode` option will be set to user system settings 'light' or 'dark'. But you can override it like this:

```ts theme={null}
createAppKit({
  //...
  themeMode: "light",
});
```

## themeVariables

By default `themeVariables` are undefined. You can set them like this:

```ts theme={null}
createAppKit({
  //...
  themeVariables: {
    "--apkt-color-mix": "#00BB7F",
    "--apkt-color-mix-strength": 40,
  },
});
```

The following list shows the theme variables you can override:

| Variable                      | Description                                                   | Type     |
| ----------------------------- | ------------------------------------------------------------- | -------- |
| `--apkt-font-family`          | Base font family                                              | `string` |
| `--apkt-accent`               | Color used for buttons, icons, labels, etc.                   | `string` |
| `--apkt-color-mix`            | The color that blends in with the default colors              | `string` |
| `--apkt-color-mix-strength`   | The percentage on how much "--apkt-color-mix" should blend in | `number` |
| `--apkt-font-size-master`     | The base pixel size for fonts.                                | `string` |
| `--apkt-border-radius-master` | The base border radius in pixels.                             | `string` |
| `--apkt-z-index`              | The z-index of the modal.                                     | `number` |


# On-Ramp
Source: https://docs.reown.com/appkit/svelte/transactions/onramp



AppKit seamlessly incorporates Coinbase Pay, enabling users to sign in to their Coinbase accounts and utilize fiat payment methods for purchasing cryptocurrencies.

<Note>
  On-Ramp is supported in the latest version of AppKit. If you are using an older version, make sure you upgrade.
</Note>

## Integration

The On-Ramp feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `onramp` flag to `false` in the configuration of the `createAppKit` function.

<Note>
  On-Ramp is now available on **Solana**. The configuration for On-Ramp on both EVM and Solana is the same. Please refer to the code snippet below.
</Note>

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    onramp: false // Optional - true by default
  }
})
```

## On-Ramp API

You can programmatically open the On-Ramp modal.

```ts theme={null}
appKit.open({ view: 'OnRampProviders' })
```


# Swaps
Source: https://docs.reown.com/appkit/svelte/transactions/swaps



The Swap feature allows users to exchange one cryptocurrency for another directly within the AppKit modal.
This feature is designed to provide a seamless and efficient swapping experience, leveraging our collaboration with [1inch](https://1inch.io/) as the swap provider.

## Availability

* **Requirement**: The Swap feature is available only to users who log in via email or social login. This is consistent with other wallet features such as sending tokens.
* **Transaction Fee**: Reown charges a 0.85% transaction fee on all swaps.
* **Supported Tokens**: The tokens available for swapping are limited to those supported by 1Inch. Note that the availability of tokens may vary depending on the network.
* **Network Availability**: The Swap feature is not available on Sepolia or other testnets at this time.

## How to Use

1. **Connect**: Ensure you are logged in via email or social login.
2. **Access Swap**: Navigate to the Swap feature within the account view.
3. **Select Tokens**: Choose the tokens you wish to swap from the available options.
4. **Type amount**: Enter your desired swap values. You can use the Max button to swap your all tokens or enter any specific number.
5. **See swap details**: Once you type amount value. You'll see the available quote details as received amount, network fee, maximum slippage, or price impact.
6. **Confirm Swap**: Review the swap details, including the transaction fee, and confirm the swap.

## Integration

The Swaps feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `swaps` flag to `false` in the configuration of the `createAppKit` function.

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    swaps: false // Optional - true by default
  }
})
```

## Setting Default Tokens

You can programmatically open the Swap view with pre-selected tokens and amounts using the `open` function from the [`useAppKit`](/appkit/react/core/hooks#useappkit) hook. This allows you to customize the default swap experience for your users.

```ts theme={null}
import { useAppKit } from '@reown/appkit/react'

function Component() {
  const { open } = useAppKit()

  const openSwapWithDefaults = () => {
    open({
      view: 'Swap',
      arguments: {
        amount: '100',      // Optional: pre-fill the swap amount
        fromToken: 'USDC',  // Optional: set the token to swap from
        toToken: 'ETH'      // Optional: set the token to swap to
      }
    })
  }

  return <button onClick={openSwapWithDefaults}>Swap USDC to ETH</button>
}
```

### Parameters

* `amount` (optional): Pre-fill the amount to swap
* `fromToken` (optional): Set the default token to swap from (e.g., 'USDC', 'ETH', 'DAI')
* `toToken` (optional): Set the default token to swap to (e.g., 'ETH', 'USDC', 'USDT')

This is particularly useful when you want to guide users to swap specific tokens or create custom swap buttons for different token pairs in your application.

## Swaps API

You can programmatically open the Swaps modal.

```ts theme={null}
appKit.open({ view: 'Swap' })
```


# Actions
Source: https://docs.reown.com/appkit/unity/core/actions



## Modal Actions

### Open Modal

```csharp theme={null}
// Open default view
AppKit.OpenModal();

// Open network selection view
AppKit.OpenModal(ViewType.NetworkSearch);

// Open account view
AppKit.OpenModal(ViewType.Account);
```

### Close Modal

```csharp theme={null}
AppKit.CloseModal();
```

## Chain Actions

### Set active chain

Note: The chain must be added to the list of [supported chains in the AppKit configuration](https://docs.reown.com/appkit/unity/core/options#supported-chains).

```csharp theme={null}
Chain newChain = ChainConstants.Chains.Ethereum;
await AppKit.NetworkController.ChangeActiveChainAsync(newChain);
```

### Get active chain

```csharp theme={null}
Chain activeChain = AppKit.NetworkController.ActiveChain;
```

## Account Actions

### Get active account

```csharp theme={null}
// Get active account in CAIP-10 format
Account account = AppKit.Account;

// e.g. '0x12345...' on EVM chains or 'H3Q...' on Solana
Debug.Log(account.Address);

// e.g. 'eip155:1' or 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'
Debug.Log(account.ChainId);

// e.g. 'eip155:1:0x12345...' or 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:H3Q...'
Debug.Log(account.AccountId);
```

### Direct Wallet Connection

Connect directly to a specific wallet on native platforms, bypassing the modal UI.
To enable direct connections, the wallet must be configured with [default wallet detection](/appkit/unity/core/options#enable-installed-wallet-detection).

```csharp theme={null}
// Connect directly to MetaMask, bypassing the modal UI
// On desktop, this opens a QR code with the MetaMask logo; some wallets will have a web wallet option too.
// Wallet ID from https://walletguide.walletconnect.network
await AppKit.ConnectAsync("c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96");

// Also works with unlisted wallets
await AppKit.ConnectAsync(new Wallet
{
    Name = "React Native Wallet",
    ImageUrl = "https://github.com/reown-com/reown-dotnet/blob/develop/media/wallet-rn.png?raw=true",
    MobileLink = "rn-web3wallet://"
});
```

### Direct Social Login Connection

Connect directly to a social login provider (e.g. Google, Apple, X) without requiring the user to pick a provider in the modal UI.

```csharp theme={null}
// Connect directly to Google and await the connection
await SocialLogin.Google.ConnectAsync();

// Or simply open the provider without awaiting the connection
SocialLogin.Google.Open();
```

### Disconnect

```csharp theme={null}
await AppKit.DisconnectAsync();
```

## EVM Actions

### Get Balance

Get the native token balance for an address.

```csharp theme={null}
BigInteger balance = await AppKit.Evm.GetBalanceAsync("0x123...");
```

### Sign Message

Sign a message with the active account's private key.

```csharp theme={null}
// Sign a string message
string signature = await AppKit.Evm.SignMessageAsync("Hello World");

// Sign raw bytes
byte[] rawMessage = System.Text.Encoding.UTF8.GetBytes("Hello World");
string signature = await AppKit.Evm.SignMessageAsync(rawMessage);

// Sign with specific address (optional)
string signature = await AppKit.Evm.SignMessageAsync("Hello World", "0x123...");
```

### Sign Typed Data

Sign typed data following EIP-712 standard.

```csharp theme={null}
string typedData = "{ /* Your EIP-712 typed data structure */ }";
string signature = await AppKit.Evm.SignTypedDataAsync(typedData);
```

### Verify Message Signature

Verify if a message was signed by a specific address.

```csharp theme={null}
// Basic verification
bool isValid = await AppKit.Evm.VerifyMessageSignatureAsync(
    "0x123...", // address
    "Hello World", // original message
    "0xabc..." // signature
);

// Using parameters object
var verifyMessageParams = new VerifyMessageSignatureParams
{
    Address = "0x123...",
    Message = "Hello World",
    Signature = "0xabc..."
};
bool isValid = await AppKit.Evm.VerifyMessageSignatureAsync(verifyMessageParams);
```

### Verify Typed Data Signature

Verify if typed data was signed by a specific address.

```csharp theme={null}
// Basic verification
bool isValid = await AppKit.Evm.VerifyTypedDataSignatureAsync(
    "0x123...", // address
    "{ /* Your typed data */ }", // original typed data
    "0xabc..." // signature
);

// Using parameters object
var verifyTypedDataParams = new VerifyTypedDataSignatureParams
{
    Address = "0x123...",
    Data = "{ /* Your typed data */ }",
    Signature = "0xabc..."
};
bool isValid = await AppKit.Evm.VerifyTypedDataSignatureAsync(verifyTypedDataParams);
```

### Read Contract

Read data from a smart contract (no gas required).

> **Note:** Both JSON and human-readable ABI formats are supported. Human-readable ABI is more concise but JSON ABI may offer better performance.

```csharp theme={null}
// Using JSON ABI
string jsonAbi = "[ /* Your contract ABI */ ]";
string tokenSymbol = await AppKit.Evm.ReadContractAsync<string>(
    "0x123...", // contract address
    jsonAbi,
    "symbol" // method name
);

// Using human-readable ABI
string humanReadableAbi = "function symbol() view returns (string)";
string tokenSymbol = await AppKit.Evm.ReadContractAsync<string>(
    "0x123...", // contract address
    humanReadableAbi,
    "symbol" // method name
);

// With arguments
string balance = await AppKit.Evm.ReadContractAsync<string>(
    "0x123...", // contract address
    jsonAbi,
    "balanceOf", // method name
    new object[] { "0x456..." } // arguments
);

// Using parameters object
var readContractParams = new ReadContractParams
{
    ContractAddress = "0x123...",
    ContractAbi = jsonAbi,
    MethodName = "balanceOf",
    Arguments = new object[] { "0x456..." }
};
string balance = await AppKit.Evm.ReadContractAsync<string>(readContractParams);

```

### Write Contract

Write data to a smart contract (requires gas).

> **Note:** Both JSON and human-readable ABI formats are supported.

```csharp theme={null}
string contractAbi = "[ /* Your contract ABI */ ]";
// Or use human-readable ABI: "function transfer(address to, uint256 amount) returns (bool)"

// Basic write
string txHash = await AppKit.Evm.WriteContractAsync(
    "0x123...", // contract address
    contractAbi,
    "transfer", // method name
    "0x456...", // recipient
    1000 // amount
);

// Write with custom gas
string txHash = await AppKit.Evm.WriteContractAsync(
    "0x123...", // contract address
    contractAbi,
    "transfer", // method name
    gas: 100000, // custom gas limit
    "0x456...", // recipient
    1000 // amount
);

// Write with value and gas
string txHash = await AppKit.Evm.WriteContractAsync(
    "0x123...", // contract address
    contractAbi,
    "stake", // method name
    value: 1000000000000000000, // 1 ETH in wei
    gas: 100000,
    true // other arguments
);

// Using parameters object
var writeContractParams = new WriteContractParams
{
    ContractAddress = "0x123...",
    ContractAbi = contractAbi,
    MethodName = "transfer",
    Value = 0, // optional value in wei
    Gas = 100000, // optional gas limit
    Arguments = new object[] { "0x456...", 1000 }
};
string txHash = await AppKit.Evm.WriteContractAsync(writeContractParams);
```

### Send Transaction

Send a native token transaction.

```csharp theme={null}
// Basic transaction
string txHash = await AppKit.Evm.SendTransactionAsync(
    "0x123...", // recipient address
    1000000000000000000, // 1 ETH in wei
    "0x" // optional data
);

// Using parameters object
var transactionParams = new SendTransactionParams
{
    AddressTo = "0x123...",
    Value = 1000000000000000000, // 1 ETH in wei
    Data = "0x" // optional data
};
string txHash = await AppKit.Evm.SendTransactionAsync(transactionParams);
```

### Send Raw Transaction

Send a pre-signed transaction.

```csharp theme={null}
string txHash = await AppKit.Evm.SendRawTransactionAsync(
    "0x123..." // signed transaction data
);
```

### Estimate Gas

Estimate gas required for a transaction.

```csharp theme={null}
// Estimate for native token transfer
BigInteger gasLimit = await AppKit.Evm.EstimateGasAsync(
    "0x123...", // recipient address
    1000000000000000000 // 1 ETH in wei
);

// Using parameters object for native transfer
var transferParams = new SendTransactionParams
{
    AddressTo = "0x123...",
    Value = 1000000000000000000, // 1 ETH in wei
    Data = "0x" // optional data
};
BigInteger gasLimit = await AppKit.Evm.EstimateGasAsync(transferParams);

// Estimate for contract interaction
string contractAbi = "[ /* Your contract ABI */ ]";
BigInteger gasLimit = await AppKit.Evm.EstimateGasAsync(
    "0x123...", // contract address
    contractAbi,
    "transfer", // method name
    0, // value in wei
    "0x456...", // method arguments
    1000
);

// Using parameters object for contract interaction
var contractGasParams = new WriteContractParams
{
    ContractAddress = "0x123...",
    ContractAbi = contractAbi,
    MethodName = "transfer",
    Value = 0, // optional value in wei
    Arguments = new object[] { "0x456...", 1000 }
};
BigInteger gasLimit = await AppKit.Evm.EstimateGasAsync(contractGasParams);
```

### Get Gas Price

Get the current gas price in wei.

```csharp theme={null}
BigInteger gasPrice = await AppKit.Evm.GetGasPriceAsync();
```

### Get Transaction Receipt

Get the receipt for a transaction by its hash. This method polls the blockchain until the transaction is confirmed or times out.

```csharp theme={null}
// Basic usage - get receipt for a transaction
TransactionReceipt receipt = await AppKit.Evm.GetTransactionReceiptAsync("0x123...");

Debug.Log($"Transaction Hash: {receipt.TransactionHash}");
Debug.Log($"Block Hash: {receipt.BlockHash}");
Debug.Log($"Status: {(receipt.StatusSuccessful ? "Success" : "Failed")}");
Debug.Log($"Gas Used: {receipt.GasUsed}");

// With custom timeout (default is 3 minutes)
TransactionReceipt receipt = await AppKit.Evm.GetTransactionReceiptAsync(
    "0x123...", // transaction hash
    TimeSpan.FromSeconds(120) // custom timeout
);

// With custom timeout and polling interval (default polling is 12 seconds)
TransactionReceipt receipt = await AppKit.Evm.GetTransactionReceiptAsync(
    "0x123...", // transaction hash
    TimeSpan.FromSeconds(120), // custom timeout
    TimeSpan.FromMilliseconds(500) // poll every 500ms
);

// With cancellation token for manual cancellation
using var cts = new CancellationTokenSource();
TransactionReceipt receipt = await AppKit.Evm.GetTransactionReceiptAsync(
    "0x123...", // transaction hash
    TimeSpan.FromMinutes(3), // timeout
    TimeSpan.FromSeconds(12), // polling interval
    cts.Token // cancellation token
);
```

### RPC Request

Make a direct RPC request to the blockchain node.

```csharp theme={null}
// Get the latest block number
BigInteger blockNumber = await AppKit.Evm.RpcRequestAsync<BigInteger>("eth_blockNumber");

// Get transaction by hash
var transaction = await AppKit.Evm.RpcRequestAsync<object>("eth_getTransactionByHash", "0x123...");

// Call a custom method with multiple parameters
var result = await AppKit.Evm.RpcRequestAsync<object>("custom_method", param1, param2);
```

## Solana Actions

### Get Balance

Get the native token balance (in lamports) for a public key.

```csharp theme={null}
// Get balance for specific public key
BigInteger lamports = await AppKit.Solana.GetBalanceAsync("H3Q...");

// Or omit to use the active account's public key
BigInteger lamportsActive = await AppKit.Solana.GetBalanceAsync();
```

### Sign Message

Sign a message with the active Solana account's private key. Returns the signature as a base58 string.

```csharp theme={null}
// Sign a UTF-8 string
string signatureBase58 = await AppKit.Solana.SignMessageAsync("Hello Solana");

// Sign raw bytes
byte[] rawMessage = System.Text.Encoding.UTF8.GetBytes("Hello Solana");
string signatureBase58 = await AppKit.Solana.SignMessageAsync(rawMessage);

// Sign with a specific public key (optional)
string signatureBase58 = await AppKit.Solana.SignMessageAsync("Hello Solana", "H3Q...");
```

### Verify Message Signature

Verify if a message was signed by a specific Solana public key.

```csharp theme={null}
bool isValid = await AppKit.Solana.VerifyMessageSignatureAsync(
    "Hello Solana", // original message
    signatureBase58, // base58 signature
    "H3Q...pubkey..." // public key (optional, defaults to active)
);
```

### Sign Transaction

Sign a serialized transaction. Input should be the transaction encoded as base64. Returns the signature and the optional (re)serialized transaction.

```csharp theme={null}
// base64-encoded serialized transaction
string txBase64 = "AQAB...==";

SignTransactionResponse res = await AppKit.Solana.SignTransactionAsync(txBase64);

// Use results
UnityEngine.Debug.Log(res.Signature); // base58 signature
UnityEngine.Debug.Log(res.TransactionBase64); // signed tx (base64)
```

### Sign All Transactions

Sign multiple serialized transactions at once. Inputs should be base64-encoded serialized transactions.

```csharp theme={null}
string[] txsBase64 = new[] { "AQAB...==", "BQAC...==" };
SignAllTransactionsResponse res = await AppKit.Solana.SignAllTransactionsAsync(txsBase64);

// Access signed transactions
foreach (var signed in res.TransactionsBase58)
{
    UnityEngine.Debug.Log(signed); // signed transaction (base58)
}
```

### RPC Request

Make a direct Solana JSON-RPC request.

```csharp theme={null}
// Get current slot
long slot = await AppKit.Solana.RpcRequestAsync<long>("getSlot");

// Get balance via RPC (raw response object)
var balanceResponse = await AppKit.Solana.RpcRequestAsync<GetBalanceResponse>("getBalance", "H3Q...");

// Call a method with multiple parameters
var accountInfo = await AppKit.Solana.RpcRequestAsync<object>(
    "getAccountInfo",
    "H3Q...pubkey...",
    new { encoding = "jsonParsed" }
);
```


# Customization
Source: https://docs.reown.com/appkit/unity/core/customization



The AppKit uses Unity's [UI Toolkit](https://docs.unity3d.com/Manual/UIElements.html) system.
By following this guide,you can customize the AppKit to match your game's style, even if you have minimal or no prior
knowledge of UI Toolkit.

<Frame>
  <img alt="unity-appkit-customization" />
</Frame>

## Theming

The AppKit relies heavily on [Unity Style Sheet (USS) variables](https://docs.unity3d.com/Manual/UIE-USS-variables.html)
for easy customization of various UI aspects, such as colors, spacing, border radius, and more.

### Preparation

The first step in theming the AppKit is to create a custom panel settings asset, followed by a custom theme file.
Then, link them to the AppKit.

1. In Unity Editor, right-click in the Project window and select **Create -> UI Toolkit -> Panel Settings Asset**.
2. Right-click again in the Project window and select **Create -> UI Toolkit -> TSS Theme File**.
3. Select the newly created Panel Settings Asset, and in the Inspector window, assign the newly created TSS Theme File
   to the `Theme Style Sheet` field.
4. In the same Inspector window, set `Reference DPI` to 160. This is the recommended DPI for the AppKit, but feel free
   to adjust it to your needs.

<Frame>
  <img alt="unity-appkit-custom-theme" />
</Frame>

5. Open the TSS Theme File with your code editor and change the first line to:

```css theme={null}
@import url("/Packages/com.reown.appkit.unity/UI Toolkit/AppKit Base Theme.tss");
```

6. Under `Reown AppKit` prefab instance in your scene or prefab find `Modal` child object and assign the
   newly created `Panel Settings Asset` to the `Panel Settings` field of `UI Document` component.

<Frame>
  <img alt="unity-appkit-panel-settings" />
</Frame>

Everything is set up, now you can start customizing the AppKit to match your game's style.

### Overriding Variables

To override a variable, simply add it to your TSS Theme File and assign a new value to it.
The example below changes the accent color to a shade of orange and the modal border color to a shade of gray.

```css theme={null}
@import url("/Packages/com.reown.appkit.unity/UI Toolkit/AppKit Base Theme.tss");

* {
    --ro-color-accent-100: rgb(156, 81, 65);

    --ro-accent-glass-090: rgba(156, 81, 65, 0.9);
    --ro-accent-glass-080: rgba(156, 81, 65, 0.8);
    --ro-accent-glass-020: rgba(156, 81, 65, 0.2);
    --ro-accent-glass-015: rgba(156, 81, 65, 0.15);
    --ro-accent-glass-010: rgba(156, 81, 65, 0.1);
    --ro-accent-glass-005: rgba(156, 81, 65, 0.05);
    --ro-accent-glass-002: rgba(156, 81, 65, 0.02);
}

Modal {
    --ro-modal-border-color: #9a9085;
    --ro-modal-border-width: 3px;
}
```

You can find the list of all available variables in the [AppKit Base Theme](https://github.com/reown-com/reown-dotnet/blob/main/src/Reown.AppKit.Unity/UI%20Toolkit/AppKit%20Base%20Theme.tss)
file.

<Note>
  If you find that a variable is missing, please [open a GitHub issue](https://github.com/reown-com/reown-dotnet/issues).
  We will be happy to add it for you.
</Note>

### Custom Fonts

To override the default font, you need to add a custom font to your project and reference it in the TSS Theme File.

```css theme={null}
@import url("/Packages/com.reown.appkit.unity/UI Toolkit/AppKit Base Theme.tss");

* {
    -unity-font-definition: resource("Custom Fonts/Comic Sans SDF Regular");
}
```

From the point of font asset management, the TextCore engine is very similar to TextMesh Pro. Please refer to
the [UI Toolkit documentation](https://docs.unity3d.com/Manual/UIE-get-started-with-text.html) for more information.

## Advanced Customization

The AppKit follows the MVP (Model-View-Presenter) architecture, allowing you to customize the UI and behavior by
replacing the default views and presenters with your own. Views load UXML layout files from the Resources folder and
configure bindings. Presenters handle the business logic and communicate with the views. In some cases, presenters can
build views dynamically and pass them to another view. Below are two examples showing how to customize both static
UXML-based views and dynamic views.

### Dynamic View Customization

The Account view has a list of buttons at the bottom. At the moment of writing, there are only two buttons in the list:
`Network` and `Disconnect`. Because in the future this list will include more buttons, some of which will depend
on project configuration, the list is built dynamically inside of `AccountPresenter`. In this example we will be
adding a custom button that opens OpenSea profile page of connected account.

Let's create a custom presenter and override the method that creates the bottom buttons list.

```csharp theme={null}
public class CustomAccountPresenter : AccountPresenter
{
    public CustomAccountPresenter(RouterController router, VisualElement parent) : base(router, parent)
    {
    }

    protected override void CreateButtons(VisualElement buttonsListView)
    {
        base.CreateButtons(buttonsListView);
    }
}
```

Let's copy the button creation code from the base presenter and modify it to create an OpenSea button.

```csharp theme={null}
private void CreateOpenSeaButton(VisualElement buttonsListView)
{
    var openSeaIcon = Resources.Load<Sprite>("OpenSea Logo");
    var openSeaButton = new ListItem(
        "OpenSea",
        openSeaIcon,
        OnOpenSeaButtonClick,
        iconType: ListItem.IconType.Circle,
        iconStyle: ListItem.IconStyle.Accent);

    Buttons.Add(openSeaButton);
    buttonsListView.Add(openSeaButton);
}

private void OnOpenSeaButtonClick()
{
    var address = AppKit.AccountController.Address;
    var url = $"https://opensea.io/{address}";
    Application.OpenURL(url);
}
```

Now we need to call `CreateOpenSeaButton` method from `CreateButtons` method. The final presenter should look like this:

```csharp theme={null}
public class CustomAccountPresenter : AccountPresenter
{
    public CustomAccountPresenter(RouterController router, VisualElement parent) : base(router, parent)
    {
    }

    protected override void CreateButtons(VisualElement buttonsListView)
    {
        CreateOpenSeaButton(buttonsListView);

        base.CreateButtons(buttonsListView);
    }

    private void CreateOpenSeaButton(VisualElement buttonsListView)
    {
        var openSeaIcon = Resources.Load<Sprite>("OpenSea Logo");
        var openSeaButton = new ListItem(
            "OpenSea",
            openSeaIcon,
            OnOpenSeaButtonClick,
            iconType: ListItem.IconType.Circle,
            iconStyle: ListItem.IconStyle.Accent);

        Buttons.Add(openSeaButton);
        buttonsListView.Add(openSeaButton);
    }

    private void OnOpenSeaButtonClick()
    {
        var address = AppKit.AccountController.Address;
        var url = $"https://opensea.io/{address}";
        Application.OpenURL(url);
    }
}
```

The last step is to replace the default presenter with the custom one.

All screens in the AppKit modal (e.g. Account, Wallet Search, QR Code, etc.) are called `modal view`. The class that
is responsible for storing, hiding, and showing the modal views is `RouterController`. To replace a modal view implementation
with a custom one, you need to create a custom presenter and pass it to the `RegisterModalView` method of `RouterController`.

```csharp theme={null}
// Get a reference to ModalController and cast it to ModalControllerUtk.
// ModalControllerUtk is used by UI Toolkit version of the AppKit.
// It's used on all platforms except WebGL.
var modalController = (ModalControllerUtk)AppKit.ModalController;
if (modalController != null)
{
    // Get RouterController
    var routerController = modalController.RouterController;

    // Create an instance of the custom presenter and register it as a `Account` modal view.
    var customAccountPresenter = new CustomAccountPresenter(routerController, routerController.RootVisualElement);
    routerController.RegisterModalView(ViewType.Account, customAccountPresenter);
}
```

You can register modal views at any point in the game lifecycle. The `RouterController` will dispose of the previous
presenter and replace it with the new one.

If you find that some parts of the presenter can't be customized, please [open a GitHub issue](https://github.com/reown-com/reown-dotnet/issues).

### Static View Customization

All core views in the AppKit accept optional path to the UXML layout file in the constructor.

Let's extend the `CustomAccountPresenter` class we made in the previous example to use a custom UXML layout file.
To do so, override `CreateViewInstance` method and return a new instance of `AccountView` with a custom UXML layout path.

```csharp theme={null}
protected override AccountView CreateViewInstance()
{
    return new AccountView("UI/CustomAccountView");
}
```

Make sure to link original or custom USS file from your UXML layout file.

## Example

You can find a complete example of the customization in the [Customization](https://github.com/reown-com/reown-dotnet/tree/main/playground/Reown.Customization.Unity)
example project.


# Events
Source: https://docs.reown.com/appkit/unity/core/events



AppKit Unity provides a comprehensive event system that allows you to respond to various state changes in your application. All events are automatically dispatched on Unity's main thread, making them safe to use for UI updates and GameObject manipulation.

## AppKit Events

```csharp theme={null}
// Invoked after successful initialization of AppKit
AppKit.Initialized += (sender, eventArgs) => {
    Debug.Log("AppKit initialized successfully");
};

// Invoked after successful connection of an account
AppKit.AccountConnected += (sender, eventArgs) => {
    Account activeAccount = eventArgs.Account;
    Debug.Log($"Account connected: {activeAccount.Address}");
    
    // Access all connected accounts
    foreach (var account in eventArgs.Accounts)
    {
        Debug.Log($"Available account: {account.Address} on {account.ChainId}");
    }
};

// Invoked after successful disconnection of an account
AppKit.AccountDisconnected += (sender, eventArgs) => {
    Debug.Log("Account disconnected");
};

// Invoked after account has changed
// This happens when the wallet updates a session or the user changes the active account
AppKit.AccountChanged += (sender, eventArgs) => {
    Account newAccount = eventArgs.Account;
    Debug.Log($"Account changed to: {newAccount.Address}");
};

// Invoked after active chain has changed
AppKit.ChainChanged += (sender, eventArgs) => {
    Chain previousChain = eventArgs.PreviousChain;
    Chain newChain = eventArgs.NewChain;
    
    Debug.Log($"Chain changed from {previousChain?.Name} to {newChain?.Name}");
    Debug.Log($"New chain ID: {newChain?.ChainId}");
};
```

## Event Arguments

### InitializeEventArgs

Empty event arguments indicating successful initialization.

### AccountConnectedEventArgs

* `Account Account` - The currently active connected account
* `IEnumerable<Account> Accounts` - All connected accounts
* `Func<Task<Account>> GetAccountAsync` - (Deprecated) Use Account property instead
* `Func<Task<Account[]>> GetAccountsAsync` - (Deprecated) Use Accounts property instead

### AccountDisconnectedEventArgs

Empty event arguments indicating account disconnection.

### AccountChangedEventArgs

* `Account Account` - The new active account

### ChainChangedEventArgs

* `Chain PreviousChain` - The previously active chain (can be null)
* `Chain NewChain` - The newly active chain

## Common Use Cases

### Updating UI on Account Changes

```csharp theme={null}
public class AccountDisplay : MonoBehaviour
{
    [SerializeField] private Text accountText;
    [SerializeField] private Text chainText;

    private void OnEnable()
    {
        AppKit.AccountConnected += UpdateAccountDisplay;
        AppKit.AccountChanged += UpdateAccountDisplay;
        AppKit.ChainChanged += UpdateChainDisplay;
        AppKit.AccountDisconnected += ClearDisplay;
    }

    private void OnDisable()
    {
        AppKit.AccountConnected -= UpdateAccountDisplay;
        AppKit.AccountChanged -= UpdateAccountDisplay;
        AppKit.ChainChanged -= UpdateChainDisplay;
        AppKit.AccountDisconnected -= ClearDisplay;
    }

    private void UpdateAccountDisplay(object sender, Connector.AccountConnectedEventArgs e)
    {
        accountText.text = $"Account: {e.Account.Address}";
    }

    private void UpdateChainDisplay(object sender, NetworkController.ChainChangedEventArgs e)
    {
        chainText.text = $"Chain: {e.NewChain?.Name ?? "Unknown"}";
    }

    private void ClearDisplay(object sender, Connector.AccountDisconnectedEventArgs e)
    {
        accountText.text = "No account connected";
        chainText.text = "No chain selected";
    }
}
```

### Handling Connection State

```csharp theme={null}
public class ConnectionManager : MonoBehaviour
{
    [SerializeField] private Button connectButton;
    [SerializeField] private Button disconnectButton;

    private void OnEnable()
    {
        AppKit.AccountConnected += OnAccountConnected;
        AppKit.AccountDisconnected += OnAccountDisconnected;
        
        // Set initial state
        UpdateButtonStates();
    }

    private void OnDisable()
    {
        AppKit.AccountConnected -= OnAccountConnected;
        AppKit.AccountDisconnected -= OnAccountDisconnected;
    }

    private void OnAccountConnected(object sender, Connector.AccountConnectedEventArgs e)
    {
        UpdateButtonStates();
        Debug.Log("Wallet connected successfully!");
    }

    private void OnAccountDisconnected(object sender, Connector.AccountDisconnectedEventArgs e)
    {
        UpdateButtonStates();
        Debug.Log("Wallet disconnected");
    }

    private void UpdateButtonStates()
    {
        bool isConnected = AppKit.IsAccountConnected;
        connectButton.gameObject.SetActive(!isConnected);
        disconnectButton.gameObject.SetActive(isConnected);
    }
}
```


# Unity
Source: https://docs.reown.com/appkit/unity/core/installation



With AppKit, you can easily let people interact with multiple EVM and Solana compatible wallets and blockchains directly from your Unity game.

## Install

Let's get started by installing the AppKit package!

### Prerequisites

* Unity 2022.3 or above
* IL2CPP code stripping level: Minimal (or lower)
* Target platform: Android, iOS, Windows, macOS, WebGL
* Gamma color space
  * If you need Linear color space, please [open a GitHub issue](https://github.com/reown-com/reown-dotnet/issues)

### AppKit Package

<Tabs>
  <Tab title="OpenUPM CLI">
    To install AppKit package via OpenUPM, you need to have [Node.js](https://nodejs.org/en/) and [openupm-cli](https://openupm.com/docs/getting-started.html#installing-openupm-cli) installed. Once you have them installed, you can run the following commands:

    ```bash theme={null}
    openupm add com.reown.appkit.unity
    ```
  </Tab>

  <Tab title="Package Manager with OpenUPM">
    1. Open `Advanced Project Settings` from the gear ⚙ menu located at the top right of the Package Manager’s toolbar
    2. Add a new scoped registry with the following details:
       * Name: `OpenUPM`
       * URL: `https://package.openupm.com`
       * Scope(s): `com.reown` and `com.nethereum`
    3. Press plus ➕ and then `Save` buttons
    4. In the Package Manager windows open the add ➕ menu from the toolbar
    5. Select `Add package by name...`
    6. Enter the names of the following packages one by one:
       * `com.nethereum.unity`
       * `com.reown.core`
       * `com.reown.core.crypto`
       * `com.reown.core.common`
       * `com.reown.core.network`
       * `com.reown.core.storage`
       * `com.reown.sign`
       * `com.reown.sign.unity`
       * `com.reown.sign.nethereum`
       * `com.reown.sign.nethereum.unity`
       * `com.reown.appkit.unity`
       * `com.reown.unity.dependencies`
    7. Press `Add` button
  </Tab>
</Tabs>

<Note>
  If you encounter errors related to the `com.unity.vectorgraphics` package after installing AppKit,
  please install it manually from the Package Manager. Click the plus ➕ button in the Package
  Manager window, then select the `Add package by name...` option and enter
  `com.unity.vectorgraphics`.
</Note>

## Configure

The minimum configuration required is filling in a `Project ID` and `Metadata` fields inside of `AppKitConfig`.

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

```csharp theme={null}
await AppKit.InitializeAsync(
    new AppKitConfig(
        projectId: "YOUR PROJECT ID",
        new Metadata(
            name: "My Game",
            description: "Short description
            url: "https://example.com",
            iconUrl: "https://example.com/logo.png"
        )
    )
);
```

* **projectId**: The project ID is a unique identifier for your project.
  * If you don't have a Project ID, you can create one at [Reown Dashboard](https://dashboard.reown.com).).
* **name**: The project name is a human-readable name for your project.
* **description**: The project description is a human-readable description for your project.
* **url**: The project URL
* **iconUrl**: Icon of the project.

## Implement

1. Add `Reown AppKit` prefab from `Packages/Reown.AppKit.Unity/Prefabs` to your scene.
2. Initialize AppKit from your script

```csharp theme={null}
public async void Start()
{
    var config = new AppKitConfig(...);
    await AppKit.InitializeAsync(config);
}
```

3. Connect account

```csharp theme={null}
public async Task ResumeSession()
{
    // Try to resume account connection from the last session
    var resumed = await AppKit.ConnectorController.TryResumeSessionAsync();

    if (resumed)
    {
        // Continue to the game
        MyAccountConnectedHandler();
    }
    else
    {
        // Connect account
        AppKit.AccountConnected += (_, e) => MyAccountConnectedHandler();
        AppKit.OpenModal();
    }
}
```

> Optional: Using Solana Unity SDK? You can keep using `Solana.Unity.SDK`'s `Web3` and route all signing through AppKit with our adapter. See the adapter section in [Usage](/appkit/unity/core/usage#appkit-with-solana-unity-sdk).

## Examples and Test dApps

* [Unity AppKit Example in Github](https://github.com/reown-com/reown-dotnet/tree/main/sample/)
* [A WebGL sample](https://appkit-unity.reown.com/)
* [Android Build (Firebase)](https://appdistribution.firebase.dev/i/093025eda71719e2)
* [iOS Build (Testflight)](https://testflight.apple.com/join/MPkPYk43)

## Getting Support 🙋

Reown is committed to delivering the best developer experience.

If you have any questions, feature requests, or bug reports, feel free to open an issue on [GitHub](https://github.com/reown-com/reown-dotnet/issues)!


# Options
Source: https://docs.reown.com/appkit/unity/core/options



### Featured wallets

Select wallets that are going to be shown on the modal's main view. Array of wallet IDs defined will be prioritized (order is respected). These wallets will also show up first in `All Wallets` view. You can find the wallet IDs in [WalletGuide](https://walletguide.walletconnect.network/).

```csharp theme={null}
await AppKit.InitializeAsync(new AppKitConfig
{
    featuredWalletIds = new []
    {
        "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369", // Rainbow
        "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0", // Trust
    }
});
```

### Explorer included wallets

Allows to set included wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/). You can define a list of wallets ids you'd like to prioritize (order is respected). You can get these ids from the explorer link mentioned before by clicking on a copy icon of your desired wallet card.

```csharp theme={null}
await AppKit.InitializeAsync(new AppKitConfig
{
    includedWalletIds = new []
    {
        "c57ca95...74e97267d96",
    }
});
```

### Explorer excluded wallets

Allows to set excluded wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/). You can get these ids from the explorer link mentioned before by clicking on a copy icon of your desired wallet card.

```csharp theme={null}
await AppKit.InitializeAsync(new AppKitConfig
{
    excludedWalletIds = new []
    {
        "c57ca95...74e97267d96",
    }
});
```

### Supported Chains

Allows to set supported chains for the application. Can use predefined chain constants from `ChainConstants.Chains` or custom `Chain` objects.

```csharp theme={null}
await AppKit.InitializeAsync(new AppKitConfig
{
    supportedChains = new[]
    {
        ChainConstants.Chains.Ethereum,
        ChainConstants.Chains.Polygon,
        ChainConstants.Chains.Ronin,

        new Chain(ChainConstants.Namespaces.Evm,
            chainReference: "713715",
            name: "Sei Devnet",
            nativeCurrency: new Currency("Sei", "SEI", 18),
            blockExplorer: new BlockExplorer("Seitrace", "https://seitrace.com"),
            rpcUrl: "https://evm-rpc-arctic-1.sei-apis.com",
            isTestnet: true,
            imageUrl: $"https://imagedelivery.net/_aTEfDRm7z3tKgu9JhfeKA/692ed6ba-e569-459a-556a-776476829e00/md"
        )
    }
});
```

### Enable Installed Wallet Detection

To enable AppKit to detect wallets installed on mobile devices, you need to make specific changes to the native side of the project.

<Tabs>
  <Tab title="Android">
    1. In Unity [override Android Manifest](https://docs.unity3d.com/Manual/overriding-android-manifest.html).
    2. Add your `<queries>...</queries>` schemes outside of `<application />` scope in the manifest file.
    3. Refer to [Android Specs](https://developer.android.com/guide/topics/manifest/queries-element) for more information.

    Example:

    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android">

        <queries>
            <package android:name="io.metamask"/>
            <package android:name="com.wallet.crypto.trustapp"/>
            <package android:name="com.skymavis.genesis"/>
            <package android:name="io.gnosis.safe"/>
            <package android:name="me.rainbow"/>
            <!-- Add other wallet schemes names here -->
        </queries>

        <application>
            ...
        </application>
    </manifest>
    ```

    More wallet package names can be found in [our sample AndroidManifest.xml](https://github.com/WalletConnect/WalletConnectUnity/blob/project/modal-sample/Assets/Plugins/Android/AndroidManifest.xml).
  </Tab>

  <Tab title="iOS">
    Wallet detection may produce inaccurate results on iOS Simulator. It is recommended to test on a real device.

    1. Make an iOS build.
    2. In the generated Xcode project, find `Info.plist` file and open it with a external editor (i.e. not Xcode).
    3. Locate or create `<key>LSApplicationQueriesSchemes</key>` section.
    4. Add the desired wallet schemes as string entries within the `<array>`. These schemes represent the wallets you want to detect.

    Example:

    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
        <dict>
            ...

            <key>LSApplicationQueriesSchemes</key>
            <array>
                <string>metamask</string>
                <string>trust</string>
                <string>safe</string>
                <string>roninwallet</string>
                <string>rainbow</string>
                <string>uniswap</string>
                <string>zerion</string>
                <string>imtokenv2</string>
                <string>spot</string>
                <string>omni</string>
                <string>dfw</string>
                <string>tpoutside</string>
                <string>robinhood-wallet</string>
            </array>

            ...
        </dict>
    </plist>
    ```
  </Tab>
</Tabs>

### Fullscreen in WebGL

The default `unityInstance.SetFullscreen(1)` method enables fullscreen for the canvas node by pushing
it to the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer).
This causes the modal to be rendered behind the canvas, making it invisible to the user when fullscreen is enabled.

To fix this, AppKit creates a container around the canvas node and appends the modal UI to it.
By requesting fullscreen on the container, the modal will always be rendered on top of the canvas.

```javascript theme={null}
// Use this instead of unityInstance.SetFullscreen(1) to enable full screen
document.querySelector('#canvas-container').requestFullscreen();
```

### Redirect from Wallet to App

After a connection or request approval, most wallets attempt to redirect back to the app.
To ensure reliability, particularly on iOS, it is recommended to register a custom URL scheme and provide it to AppKit.

* [Register URL Scheme for Android](https://docs.unity3d.com/6000.0/Documentation/Manual/deep-linking-android.html)
* [Register URL Scheme for iOS](https://docs.unity3d.com/6000.0/Documentation/Manual/deep-linking-ios.html)

```csharp theme={null}
// AppKit configuration
var appKitConfig = new AppKitConfig
{
    projectId = "884a........2cc",
    metadata = new Metadata(
        "My app",
        "My app",
        "https://example.com",
        "https://..../appkit-icon.png",
        new RedirectData
        {
            // Used by native wallets to redirect back to the app after approving requests
            Native = "my-url-schema://"
        }
    ),
};


await AppKit.InitializeAsync(
    appKitConfig
);
```


# Sign-In With Ethereum
Source: https://docs.reown.com/appkit/unity/core/siwe



AppKit provides a simple solution for integrating with "Sign-In With Ethereum" (SIWE), a new form of authentication that
enables users to control their digital identity with their Ethereum account.
SIWE is a standard also known as [EIP-4361](https://docs.login.xyz/general-information/siwe-overview/eip-4361).

<Frame>
  <img alt="unity-appkit-siwe" />
</Frame>

## One-Click Auth

*One-Click Auth* represents a key advancement within WalletConnect v2, streamlining the user authentication process in
AppKit by enabling them to seamlessly connect with a wallet and sign a SIWE message with just one click.

Connecting a wallet, proving control of an address with an off-chain signature, authorizing specific actions.
These are the kinds of authorizations that can be encoded as ["ReCaps"](https://eips.ethereum.org/EIPS/eip-5573). ReCaps are permissions for a specific website
or dapp that can be compactly encoded as a long string in the message you sign and translated by any wallet into a
straight-forward one-sentence summary.
WalletConnect uses permissions expressed as ReCaps to enable a One-Click Authentication.

<Note>
  One-Click Auth and Sign-In With Ethereum are currently not supported on WebGL.
</Note>

## Local Address Verification

When connecting wallets to applications using the WalletConnect protocol, the wallet supplies a list of accounts.
However, there is a potential risk that the wallet could provide an address the user does not control.
To mitigate this account spoofing risk, the standard practice is to require the user to sign a message with
the provided address and then verify the signature.

The Sign-In With Ethereum (SIWE) feature in AppKit can facilitate this verification process,
enabling the application to confirm the user's Ethereum address even the app doesn't have a backend.

### 0. Create basic SIWE configuration

```csharp theme={null}
// Create SIWE configuration
var siweConfig = new SiweConfig
{
    // The properties from `SiweMessageParams` be used to generate SIWE message.
    // There're no strict rules on what Domain and Uri parameters have to be on native platforms.
    // In this example we use website domain and app URL scheme.
    GetMessageParams = () => new SiweMessageParams
    {
        Domain = "mywebsite.com",
        Uri = "my-app://"
    },
    // By setting this to false, we disable a requirement to sign a new SIWE message
    // every time the active chain changes in AppKit or wallet.
    SignOutOnChainChange = false
};

// Subscribe to SIWE events
siweConfig.SignInSuccess += _ => Debug.Log("Address verified successfully!");
siweConfig.SignOutSuccess += () => Debug.Log("Address verification canceled or wallet disconnected.");
```

### 1. Initialize AppKit with your `SiweConfig`

Add the SIWE configuration to `AppKitConfig`

```csharp {17} theme={null}
var appKitConfig = new AppKitConfig
{
    // Project ID from https://dashboard.reown.com/
    projectId = "MY_PROJECT_ID",
    metadata = new Metadata(
        "App Name",
        "App Description",
        "https://reown.com",
        "https://raw.githubusercontent.com/reown-com/reown-dotnet/main/media/appkit-icon.png",
        new RedirectData
        {
            // Used by native wallets to redirect back to the app after approving requests
            Native = "my-app://"
        }
    ),
    // Assign the SIWE configuration created above. Can be null if SIWE is not used.
    siweConfig = siweConfig
};
```

With this configuration, AppKit will enforce address verification and invoke the `SignInSuccess` delegate when the
user successfully verifies the address.

## Sign-In With Ethereum with Backend

To use 1-CA + SIWE at full extend, a backend for communication is required. This backend will be used to generate a nonce,
verify messages and handle sessions. You can read more about SIWE backend implementation at [here](https://docs.login.xyz/sign-in-with-ethereum/quickstart-guide/implement-the-backend).

### 0. Create SIWE configuration

```csharp theme={null}
var siweConfig = new SiweConfig
{
    GetNonce = async () =>
    {
        // The getNonce method functions as a safeguard against spoofing,
        // akin to a CSRF token.
        return await yourApi.getNonce();
    },
    // The properties from `SiweMessageParams` be used to generate SIWE message.
    // There's no strict rules on what Domain and Uri parameters have to be
    // on native platforms.
    // In this example we use website domain and app URL scheme.
    GetMessageParams = () =>
    {
        // Returns parameters that are used to create the SIWE message internally.
        return new SiweMessageParams
        {
            Domain = "mywebsite.com",
            Uri = "my-app://",
            // The custom statement that will be prepended to the SIWE message.
            // Optional.
            Statement = "My custom statement."
        };
    },
    CreateMessage = (createMessageArgs) =>
    {
        // Generates an EIP-4361-compatible message.
        // You can use our provided SiweUtils.FormatMessage
        // method (default behaviour if delegate is null) or implement your own.
        return SiweUtils.FormatMessage(createMessageArgs);
    },
    VerifyMessage = async (verifyMessageArgs) =>
    {
        // Ensures the message is valid, has not been tampered with,
        // and has been appropriately signed by the wallet address.
        try {
            var json = JsonConvert.SerializeObject(verifyMessageArgs);
            var isValidMessage = await yourApi.verifyMessage(json);
            return isValidMessage;
        } catch (Exception) {
            return false;
        }
    },
    GetSession = async (getSessionArgs) =>
    {
        // Called after VerifyMessage() succeeds
        // The backend session should store the associated address and chainId
        // and return it via the `getSession` method.
        var session = await yourApi.getSession();
        return new SiweSession
        {
            EthAddress = session.address,
            EthChainIds = session.ChainIdArray,
        };
    },
    SignOut = async () =>
    {
        // Called when the wallet disconnects if SignOutOnWalletDisconnect is true,
        // and/or when the account changes if SignOutOnAccountChange is true,
        // and/or when the network changes if SignOutOnChainChange is true.
        await yourApi.signOut();
    },
    SignOutOnAccountChange = true,
    SignOutOnChainChange = true,
    SignOutOnWalletDisconnect = true,
};

// Called after SiweConfig.GetSession() succeeds
siweConfig.SignInSuccess += _ => Debug.Log("[Dapp] SIWE Sign In Success!");

// Called after SiweConfig.SignOut() succeeds
siweConfig.SignOutSuccess += () => Debug.Log("[Dapp] SIWE Sign Out Success!");
```

### 1. Initialize AppKit with your `SiweConfig`

Add the SIWE configuration to `AppKitConfig`

```csharp {17} theme={null}
var appKitConfig = new AppKitConfig
{
    // Project ID from https://dashboard.reown.com/
    projectId = "MY_PROJECT_ID",
    metadata = new Metadata(
        "App Name",
        "App Description",
        "https://reown.com",
        "https://raw.githubusercontent.com/reown-com/reown-dotnet/main/media/appkit-icon.png",
        new RedirectData
        {
            // Used by native wallets to redirect back to the app after approving requests
            Native = "my-app://"
        }
    ),
    // Assign the SIWE configuration created above. Can be null if SIWE is not used.
    siweConfig = siweConfig
};
```


# Email & Social Wallets
Source: https://docs.reown.com/appkit/unity/core/socials



AppKit enables passwordless Web3 onboarding and authentication, allowing your users interact with your application by creating a non-custodial wallet with just their emails or social accounts.

<Note>
  Email login option is currently only available on WebGL. We're working on adding support for other platforms.
</Note>

## User flow

1. Users will be able to connect to you application by simply using an email address. AppKit will send to them a One Time Password (OTP) to copy and paste in the modal, which will help to
   verify the user's authenticity. This will create a non-custodial wallet for your user which will be available in any application that integrates AppKit and email login.
   Alternatively, users can connect using social accounts.

2. Eventually the user can optionally choose to move from a non-custodial wallet to a self-custodial one by pressing "Upgrade Wallet" on AppKit (currently only visible on WebGL).
   This will open the *([WalletConnect secure website](https://secure.walletconnect.com/dashboard))* that will walk your user through the upgrading process.

## Integration

Email and Social login options are enabled by default. You can disable them or modify the list of social platforms by setting the `enableEmail` and `socials` parameters in the `AppKitConfig` object.

```csharp theme={null}
var appKitConfig = new AppKitConfig
{
    // ... //
    enableEmail = true,
    socials = new[]
    {
        SocialLogin.Google,
        SocialLogin.X,
        SocialLogin.Apple,
    }
};
```

### Options

* **enableEmail**: This boolean defines whether you want to enable email login. Defaults to `true`.
* **socials**: This array contains the list of social platforms that you want to enable for user authentication. Set it to `null` or empty array to disable social login.

## UI Variants

AppKit SDK offers multiple UI variants to customize the user experience for the authentication process. Note, that the UI can be slightly different depending on the platform.

By configuring the `socials` option in the `AppKitConfig` object, you can control the amount of social providers you want to show on the connect screen:

* **`socials: new[] { SocialLogin.Google }`**: When you only set one social provider, it will give you a button with `connect with provider`.

  <Frame>
    <img />
  </Frame>

* **`socials: new[] { SocialLogin.Google, SocialLogin.Discord }`**: When you set 2 social providers, it will give you 2 buttons next to each other with the logo of the social provider

  <Frame>
    <img />
  </Frame>

* **`socials: new[] {SocialLogin.Google, SocialLogin.X, SocialLogin.Discord, SocialLogin.Apple, SocialLogin.Github}`**: When you set more than 2 social providers, the first provider in the array will get a button with `connect with provider`. The other providers will get a button with the logo of the social provider next to each other.

  <Frame>
    <img />
  </Frame>

* **`socials: Array.Empty<SocialLogin>()` or `socials: null`**: When you want to disable social logins.

  <Frame>
    <img />
  </Frame>

## Actions

AppKit provides methods to initiate social login connections programmatically, allowing you to build custom UI elements that trigger the authentication flow.

```csharp theme={null}
// Async-await approach
await SocialLogin.Google.ConnectAsync();

// You can also pass a CancellationToken to the method to cancel the connection
await SocialLogin.Google.ConnectAsync(cancellationToken: myCancellationToken);


// Event-based approach
AppKit.AccountConnected += (_, args) => {
    // Handle the event
    // Also triggered when user connects an external wallet
};
SocialLogin.Google.Open();
```


# Usage
Source: https://docs.reown.com/appkit/unity/core/usage



After you have installed and configured AppKit,
you can start using it to interact with the wallet provider and blockchain.

## EVM

AppKit comes with the [Nethereum](https://nethereum.com/) and [Wagmi](https://wagmi.sh/) integration out of the box.

To interact with EVM chains use `AppKit.Evm` (see [Actions](/appkit/unity/core/actions#evm-actions) for more details). Internally, AppKit will use Wagmi on WebGL or Nethereum on other platforms.
Nethereum is already preconfigured with RPC URL and interceptor that will route the requests between the wallet provider and RPC node.

### Sending Ether

To send ether, you can use the `SendTransactionAsync` method of the `Web3.Eth` class.

```csharp theme={null}
const string toAddress = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";
BigInteger amount = Web3.Convert.ToWei(0.001);
string result = await AppKit.Evm.SendTransactionAsync(toAddress, amount);

Debug.Log("Transaction hash: " + result);
```

This type of transaction uses the default amount of Gas 21000. Gas price is determined by the wallet provider.

### Reading Blockchain State

#### Get Ether Balance

```csharp theme={null}
Account account = await AppKit.GetAccountAsync();
BigInteger balance = await AppKit.Evm.GetBalanceAsync(account.Address);

Debug.Log($"Balance: {Web3.Convert.FromWei(balance.Value)} ETH");
```

### Smart Contract Interaction

Use `ReadContractAsync` and `WriteContractAsync` methods of `AppKit.Evm` to interact with smart contracts.
To read or write a smart contract function, you need to provide the contract address, ABI, method name, and arguments.

#### Get ERC20 Token Balance

To get the balance of an ERC20 token, you need to know the contract address, ERC20 standard contract ABI, and the owner address.
This operation doesn't involve state change on the blockchain, so it's a read-only action that doesn't require a transaction.

```csharp theme={null}
const string contractAddress = "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984";
const string ownerAddress = "0x3D30B1aB88D487B0F3061F40De76845Bec3F1e94";
const string abi = "..."; // ABI of the ERC20 token contract

var evm = AppKit.Evm;
var balance = await evm.ReadContractAsync<BigInteger>(contractAddress, abi, "balanceOf", new object[]
{
    ownerAddress
});
var decimals = await evm.ReadContractAsync<BigInteger>(contractAddress, abi, "decimals");

var finalBalance = tokenBalance / BigInteger.Pow(10, tokenDecimal);
```

#### Send ERC20 Token

To send an ERC20 token, you need to know the contract address, ERC20 standard contract ABI, recipient address, and the amount of tokens to send.
This operation requires a transaction and gas fees because it changes the state of the blockchain. User will need to confirm the transaction in the wallet.

```csharp theme={null}
const string contractAddress = "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984";
const string recipientAddress = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";
const string abi = "..."; // ABI of the ERC20 token contract

BigInteger amount = 1;

// Arguments for the transfer method. The order of the arguments must match the order in the method signature.
// Method signature: `function transfer(address _to, uint256 _value) public returns (bool success)`
var arguments = new object[]
{
    recipientAddress,
    amount
};

// Estimate gas amount
var gasAmount = await AppKit.Evm.EstimateGasAsync(contractAddress, abi, "transfer", arguments: arguments);

// Send transaction
var result = await AppKit.Evm.WriteContractAsync(contractAddress, abi, "transfer", gasAmount, arguments);
```

#### Usage with Solidity Structs

To use Solidity structs when interacting with smart contracts on native platforms, you need to define them as C# classes and mark them with the function encoding attributes from Nethereum.
This is not required on WebGL platforms.

```csharp theme={null}
using Nethereum.ABI.FunctionEncoding.Attributes;

[Serializable]
public class ClaimCondition
{
    [Parameter("uint256", "startTimestamp", 1)]
    public BigInteger StartTimestamp { get; set; }

    [Parameter("uint256", "quantityLimitPerWallet", 4)]
    public BigInteger QuantityLimitPerWallet { get; set; }

    [Parameter("bytes32", "merkleRoot", 5)]
    public string MerkleRoot { get; set; }

    [Parameter("uint256", "pricePerToken", 6)]
    public BigInteger PricePerToken { get; set; }

    [Parameter("address", "currency", 7)]
    public string Currency { get; set; }

    [Parameter("string", "metadata", 8)]
    public string Metadata { get; set; }
}
```

### Nethereum Integration

AppKit offers deep integration with [Nethereum](https://nethereum.com/) on native platforms, with limited support on WebGL.

If you need to use Nethereum directly, you can access a preconfigured `Web3` instance from AppKit:

```csharp theme={null}
var nethereumService = AppKit.Evm as NethereumEvmService;
var web3 = nethereumService.Web3;
```

This `Web3` instance is preconfigured with Reown's Blockchain API for the active chain and includes a request interceptor that routes requests between RPC node and the connected wallet (if needs signing).

Avoid caching this `Web3` instance, as it may be updated when the active chain is switched.

## Solana

AppKit supports Solana self-custodial wallets on iOS, Android, Windows, and macOS via WalletConnect protocol.
Support for WebGL and other login methods, including social login, is planned.

Out of the box, AppKit handles Solana-enabled wallet connection, Solana RPC, and message signing — no third-party packages required.

AppKit can also forward transactions to wallets for signing. If you need to build the transaction object, you'll want to use third-party client- or server-side tool. This part isn't included by default.

If you're using the [Solana Unity SDK](https://solana.unity-sdk.gg) from Magic Blocks, you can use our adapter package. It lets you keep using the same Solana Unity APIs,
with just a few extra lines of code to support AppKit-powered wallet connections.

Depending on your goals and project stage, you can choose the integration flow that fits best. Below is a brief description of each approach.

### Built-in Solana Actions

After completing [AppKit installation](/appkit/unity/core/installation), add Solana chain to your AppKit configuration and use `AppKit.Solana`.

For the full list of Solana-specific methods, see the [Solana Actions documentation](/appkit/unity/core/actions#solana-actions)

```csharp theme={null}
// Create AppKit config object
var config = new AppKitConfig
{
    // Your project ID from https://dashboard.reown.com
    projectId = "YOUR PROJECT ID",
    metadata = new Metadata(
        "Solana Basic",
        "Basic Solana example",
        "https://reown.com",
        "https://raw.githubusercontent.com/reown-com/reown-dotnet/refs/heads/develop/sample/Reown.AppKit.Unity/Assets/Textures/appkit-icon-unity.png"
    ),
    supportedChains = new[]
    {
        ChainConstants.Chains.Solana,
        ChainConstants.Chains.SolanaDevNet,
    }
};
// Initialize AppKit with config
await AppKit.InitializeAsync(config);

// Try to resume wallet session
var resumed = await AppKit.ConnectorController.TryResumeSessionAsync();

if (!resumed)
{
    // Use `AppKit.OpenModal()` and wait for `AppKit.AccountConnected` event
    // For the sake of example, the code below assumes that there's a wallet connected
}

// Sign a mesage with connected wallet
const string message = "Hello, Solana!";
var sig = await AppKit.Solana.SignMessageAsync(message);
Debug.Log($"Signature: {sig}");

// Validate the signature
var isValid = await AppKit.Solana.VerifyMessageSignatureAsync(message, sig);
Debug.Log($"Is signature valid: {isValid}");

// AppKit.Solana includes some methods that don't require signing action in the wallet
BigInteger balance = await AppKit.Solana.GetBalanceAsync();

// You can also make any RPC calls with our Solana RPC, e.g.:
long slot = await AppKit.Solana.RpcRequestAsync<long>("getSlot");
```

You can refer to [Reown.SolanaCore.Unity](https://github.com/reown-com/reown-dotnet/tree/develop/playground/Reown.SolanaCore.Unity) playground project for complete example.

### AppKit with Solana Unity SDK

Reown provides an optional `Reown.AppKit.Solana.Unity` adapter package that connects Reown AppKit to the Solana Unity SDK.
It provides an AppKit-backed `WalletBase` so you can keep using `Web3` instance from `Solana.Unity.SDK` while all signing and session management go through AppKit.

#### What this adapter does

* Installs an AppKit-powered wallet (`AppKitWalletBase`) and wires it into `Web3` via `web3.WalletBase`.
* Hooks AppKit events (`AccountConnected`, `AccountChanged`) to keep `Web3.Account` in sync.
* Proxies signing to AppKit:
  * Transactions: `AppKit.Solana.SignTransactionAsync`, `SignAllTransactionsAsync`
  * Messages: `AppKit.Solana.SignMessageAsync`

#### Requirements

* `Solana.Unity-SDK` in your Unity project (`https://github.com/magicblock-labs/Solana.Unity-SDK`).
* Reown AppKit for Unity set up in your scene (follow the [Installation](/appkit/unity/core/installation)).

#### Installation

<Tabs>
  <Tab title="OpenUPM CLI">
    To install AppKit adapter for Solana Unity SDK via OpenUPM, you need to have [Node.js](https://nodejs.org/en/) and [openupm-cli](https://openupm.com/docs/getting-started.html#installing-openupm-cli) installed. Once you have them installed, you can run the following commands:

    ```bash theme={null}
    openupm add com.reown.appkit.solana.unity
    ```
  </Tab>

  <Tab title="Package Manager with OpenUPM">
    1. Open `Advanced Project Settings` from the gear ⚙ menu located at the top right of the Package Manager’s toolbar
    2. Add a new scoped registry with the following details:
       * Name: `OpenUPM`
       * URL: `https://package.openupm.com`
       * Scope(s): `com.reown`
    3. Press plus ➕ and then `Save` buttons
    4. In the Package Manager windows open the add ➕ menu from the toolbar
    5. Select `Add package by name...`
    6. Enter the package name:
       * `com.reown.appkit.solana.unity`
    7. Press `Add` button
  </Tab>
</Tabs>

#### Quick start

Initialize AppKit once on startup, then use the extension methods on `Web3`.

```csharp theme={null}
using Reown.AppKit.Unity;
using Reown.Sign.Unity;
using Solana.Unity.SDK;
using UnityEngine;

public class Bootstrap : MonoBehaviour
{
    [SerializeField] private Web3 web3;

    private async void Start()
    {
        var config = new AppKitConfig
        {
            projectId = "YOUR_PROJECT_ID",
            metadata = new Metadata(
                name: "My Solana Game",
                description: "Solana + AppKit",
                url: "https://example.com",
                iconUrl: "https://example.com/icon.png",
                new RedirectData { Native = "mygame://" }
            ),
            supportedChains = new[]
            {
                ChainConstants.Chains.Solana,
                ChainConstants.Chains.SolanaDevNet,
            }
        };

        await AppKit.InitializeAsync(config);
    }
}
```

For full setup (prefab, logging, Android/iOS/WebGL notes), see the [AppKit docs](/appkit/unity/core/installation).

#### Using the extension methods

The adapter adds extension methods to `Web3`.

##### Try to resume an AppKit session

```csharp theme={null}
var (resumed, account) = await web3.TryResumeAppKitSession();
Debug.Log($"Resumed: {resumed}, Address: {account?.PublicKey}");
```

##### Login with AppKit (default AppKit modal UI)

```csharp theme={null}
var account = await web3.LoginAppKit();
Debug.Log($"Connected: {account.PublicKey}");
```

##### Login with a specific wallet

```csharp theme={null}
// Connect directly to a specific wallet:
// Pass a wallet id from walletguide.walletconnect.network
var account = await web3.LoginAppKit(walletId: "0ef262ca2a56b88d179c93a21383fee4e135bd7bc6680e5c2356ff8e38301037");
```

#### After login: keep using Solana.Unity SDK

Once you call `LoginAppKit` (or a session resume succeeds), the adapter sets `web3.WalletBase = AppKitWalletBase`. From that point:

* Existing `Web3` calls keep working.
* Any required signatures are requested through AppKit.
* You can also use all existing AppKit APIs, e.g. methods from `AppKit.Solana`

Example:

```csharp theme={null}
// Sign a message with Web3
var bytes = System.Text.Encoding.UTF8.GetBytes("Hello Reown AppKit!");
var signature = await Web3.Wallet.SignMessage(bytes);
```

#### Notes

* If `Web3.customRpc` is not set, the adapter will use the RPC provider provided by Reown.
* We provide a modified Solana Unity SDK sample project that demonstrates AppKit integration. See it [here](https://github.com/reown-com/reown-dotnet/tree/develop/playground/Reown.SolanaSdk.Unity). Note: the upstream sample has a few known issues, unrelated to AppKit, that we left as‑is.


# Components
Source: https://docs.reown.com/appkit/vue/core/components



# Web Components

AppKit provides pre-built UI components that you can use to trigger the modal or display wallet information.

## React Components

For React and Next.js applications, you can use React components instead of HTML elements:

```tsx theme={null}
import { 
  AppKitButton, 
  AppKitConnectButton, 
  AppKitAccountButton, 
  AppKitNetworkButton 
} from "@reown/appkit/react";

export default function MyApp() {
  return (
    <div>
      <AppKitButton />
      <AppKitConnectButton />
      <AppKitAccountButton />
      <AppKitNetworkButton />
    </div>
  );
}
```

## HTML Elements

AppKit's [web components](https://www.webcomponents.org/) are custom and reusable HTML tags. They will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

<Note>
  Web components are global html elements that don't require importing.
</Note>

### List of optional properties for AppKit web components

### `<appkit-button />`

| Variable       | Description                                                                                            | Type                               |
| -------------- | ------------------------------------------------------------------------------------------------------ | ---------------------------------- |
| `disabled`     | Enable or disable the button.                                                                          | `boolean`                          |
| `balance`      | Show or hide the user's balance.                                                                       | `'show'   \| 'hide'`               |
| `size`         | Default size for the button.                                                                           | `'md'     \| 'sm'`                 |
| `label`        | The text shown in the button.                                                                          | `string`                           |
| `loadingLabel` | The text shown in the button when the modal is open.                                                   | `string`                           |
| `namespace`    | Option to show specific namespace account info. Note: `eip155` is for EVM and `bip122` is for Bitcoin. | `'eip155' \| 'solana' \| 'bip122'` |

### `<appkit-account-button />`

| Variable   | Description                      | Type                 |
| ---------- | -------------------------------- | -------------------- |
| `disabled` | Enable or disable the button.    | `boolean`            |
| `balance`  | Show or hide the user's balance. | `'show'   \| 'hide'` |

### `<appkit-connect-button />`

| Variable       | Description                                          | Type              |
| -------------- | ---------------------------------------------------- | ----------------- |
| `size`         | Default size for the button.                         | `'md'    \| 'sm'` |
| `label`        | The text shown in the button.                        | `string`          |
| `loadingLabel` | The text shown in the button when the modal is open. | `string`          |

### `<appkit-network-button />`

| Variable   | Description                   | Type      |
| ---------- | ----------------------------- | --------- |
| `disabled` | Enable or disable the button. | `boolean` |


# Composables
Source: https://docs.reown.com/appkit/vue/core/composables



Composables are functions that will help you control the modal, subscribe to wallet events and interact with them and smart contracts.

## Composable Ecosystem

AppKit provides a comprehensive set of Vue composables that work together to provide a complete wallet connection and blockchain interaction experience. These composables can be categorized into several functional groups:

* **Connection Composables**: Manage wallet connections and user authentication (`useAppKit`, `useAppKitAccount`, `useAppKitProvider`, `useDisconnect`)
* **Network Composables**: Handle blockchain network selection and information (`useAppKitNetwork`)
* **UI Control Composables**: Control the modal and UI elements (`useAppKitState`, `useAppKitTheme`)
* **Data Access Composables**: Access wallet and blockchain data (`useWalletInfo`)
* **Event Composables**: Subscribe to wallet and connection events (`useAppKitEvents`)
* **Payment Composables**: Handle crypto payments and exchange integrations (`usePay`, `useAvailableExchanges`, `usePayUrlActions`, `useExchangeBuyStatus`)
* **Multi-Wallet Composables**: Manage multiple wallet connections (`useAppKitConnections`, `useAppKitConnection`)
* **Authentication Composables**: Handle authentication and user management (`useAppKitUpdateEmail`, `useAppKitSIWX`)
* **Solana-Specific Composables**: Solana blockchain interactions (`useAppKitConnection` from Solana adapter)

The diagram below illustrates how these composables relate to each other and to the core AppKit functionality:

```mermaid theme={null}
graph TB
  AppKit[AppKit Core]
  
  ConnComposables[Connection Composables]
  NetworkComposables[Network Composables]
  UIComposables[UI Composables]
  DataComposables[Data Composables]
  EventComposables[Event Composables]
  PaymentComposables[Payment Composables]
  MultiWalletComposables[Multi-Wallet Composables]
  AuthComposables[Authentication Composables]
  SolanaComposables[Solana Composables]
  
  AppKit --> ConnComposables
  AppKit --> NetworkComposables
  AppKit --> UIComposables
  AppKit --> DataComposables
  AppKit --> EventComposables
  AppKit --> PaymentComposables
  AppKit --> MultiWalletComposables
  AppKit --> AuthComposables
  AppKit --> SolanaComposables
  
  ConnComposables --> useAppKit
  ConnComposables --> useAppKitAccount
  ConnComposables --> useAppKitProvider
  ConnComposables --> useDisconnect
  
  NetworkComposables --> useAppKitNetwork
  
  UIComposables --> useAppKitState
  UIComposables --> useAppKitTheme
  
  DataComposables --> useWalletInfo
  
  EventComposables --> useAppKitEvents
  
  PaymentComposables --> usePay
  PaymentComposables --> useAvailableExchanges
  PaymentComposables --> usePayUrlActions
  PaymentComposables --> useExchangeBuyStatus
  
  MultiWalletComposables --> useAppKitConnections
  MultiWalletComposables --> useAppKitConnection
  
  AuthComposables --> useAppKitUpdateEmail
  AuthComposables --> useAppKitSIWX
  
  SolanaComposables --> useAppKitConnectionSolana[useAppKitConnection]
```

This modular approach allows you to use only the composables you need for your specific use case, whether you're building a simple wallet connection interface or a complex multi-chain application with payment capabilities.

## useAppKit

Composable function for controlling the modal.

```ts theme={null}
import { useAppKit } from "@reown/appkit/vue";

export default function Component() {
  const { open, close } = useAppKit();
}
```

### Returns

* `open`: Function to open the modal
* `close`: Function to close the modal

### Parameters

You can also select the modal's view when calling the `open` function

```ts theme={null} theme={null} theme={null}
open({ view: "Account" });

// to connect and show multi wallets view
open({ view: "Connect" });

// to connect and show only solana wallets
open({ view: "Connect", namespace: "solana" });

// to connect and show only bitcoin wallets
open({ view: "Connect", namespace: "bip122" });

// to connect and show only ethereum wallets
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
open({ view: 'WalletSend' })
```

List of views you can select

<Table />

## useAppKitAccount

Composable function for accessing account data and connection status.

```ts theme={null}
import { useAppKitAccount } from "@reown/appkit/vue";

const accountData = useAppKitAccount();
```

Composable function for accessing account data and connection status for each namespace when working in a multi-chain environment.

```ts theme={null}
import { useAppKitAccount } from "@reown/appkit/vue";

const eip155Account = useAppKitAccount({ namespace: "eip155" }); // for EVM chains
const solanaAccount = useAppKitAccount({ namespace: "solana" });
const bip122Account = useAppKitAccount({ namespace: "bip122" }); // for bitcoin
```

### Returns

* `accountData.value.allAccounts`: A list of connected accounts. Each account includes the `address`, `type`, and `namespace`. Accounts also include `caipAddress` (CAIP-10 format) and `chainId` when network information is available.
* `accountData.value.address`: The current account address
* `accountData.value.caipAddress`: The current account address in CAIP format
* `accountData.value.isConnected`: Boolean that indicates if the user is connected
* `accountData.value.status`: The current connection status

### Getting Bitcoin Public Keys

When working with Bitcoin accounts, you can extract public keys from the connected accounts:

```vue theme={null}
<template>
  <div>
    <div v-for="(key, index) in publicKeys" :key="index">
      Public Key: {{ key }}
    </div>
  </div>
</template>

<script setup>
import { useAppKitAccount } from "@reown/appkit/vue";
import { computed } from 'vue';

const { allAccounts } = useAppKitAccount({ chainNamespace: 'bip122' });
const publicKeys = computed(() => allAccounts.value.map(acc => acc.publicKey));
</script>
```

This is particularly useful when you need to access Bitcoin public keys for transaction signing or address derivation.

## useAppKitNetwork

Composable function for accessing network data and methods.

```ts theme={null}
import { useAppKitNetwork } from "@reown/appkit/vue";

export default Component(){
  const networkData = useAppKitNetwork()
}
```

### Returns

* `networkData.caipNetwork`: The current network object
* `networkData.caipNetworkId`: The current network id in CAIP format
* `networkData.chainId`: The current chain id
* `networkData.switchNetwork`: Function to switch the network. Accepts a `caipNetwork` object as argument.

### switchNetwork Usage

```ts theme={null}
import { polygon } from '@reown/appkit/networks'

...

networkData.switchNetwork(polygon)
```

<Note>
  See how to import or create a networks
  [here](/appkit/vue/core/custom-networks).
</Note>

## useAppKitState

Composable function for getting the current value of the modal's state.

```ts theme={null}
import { useAppKitState } from "@reown/appkit/vue";

const stateData = useAppKitState();
```

### Returns

* `stateData.initialized`: Boolean that indicates if AppKit has been initialized. This sets to true when all controllers, adapters and internal state is ready
* `stateData.loading`: Boolean that indicates if AppKit is loading
* `stateData.open`: Boolean that indicates if the modal is open
* `stateData.selectedNetworkId`: The current chain id selected by the user in CAIP-2 format
* `stateData.activeChain`: The active chain namespace (e.g., 'eip155', 'solana', 'bip122')

### Example Usage

```vue theme={null}
<template>
  <div>
    <div v-if="!stateData.initialized">Initializing AppKit...</div>
    <div v-else-if="stateData.loading">Loading...</div>
    <div v-else>
      <p>Modal is {{ stateData.open ? 'open' : 'closed' }}</p>
      <p>Selected Network: {{ stateData.selectedNetworkId }}</p>
      <p>Active Chain: {{ stateData.activeChain }}</p>
    </div>
  </div>
</template>

<script setup>
import { useAppKitState } from "@reown/appkit/vue";

const stateData = useAppKitState();
</script>
```

## useAppKitTheme

Composable function for controlling the modal's theme.

```ts theme={null}
import { useAppKitTheme } from "@reown/appkit/vue";
const themeAction = useAppKitTheme();
// or
// const { setThemeMode, setThemeVariables } = useAppKitTheme()
```

### Returns

* `themeAction.themeMode`: Get theme Mode.
* `themeAction.themeVariables`: Get theme variables.
* `themeAction.setThemeMode`: Set theme Mode. Accepts a string as parameter ('dark' | 'light')
* `themeAction.setThemeVariables`: Set theme variables. Check the example usage.

### Example Usage

```ts theme={null}
setThemeMode("dark");

setThemeVariables({
  "--apkt-color-mix": "#00BB7F",
  "--apkt-color-mix-strength": 40,
});
```

## useAppKitEvents

Subscribes to modal, wallet, and transaction events emitted by AppKit. Useful for analytics, telemetry, custom notifications, or reacting to specific user actions.

```ts theme={null}
import { useAppKitEvents } from "@reown/appkit/vue";

const events = useAppKitEvents();
```

The composable returns the latest event object. Each time a new event is emitted, the component re-renders with the new value:

```ts theme={null}
{
  timestamp: number
  data: {
    type: 'track' | 'error'
    event: string        // the event name
    properties?: object  // event-specific payload
  }
}
```

### Returns

* `events.timestamp`: Get the timestamp of the event
* `events.data.event`: Get the event name string
* `events.data.properties`: Get event-specific payload

<Card title="Full events reference" icon="list" href="/appkit/features/events">
  See every available event, its trigger condition, and the properties payload.
</Card>

## useDisconnect

Composable function for disconnecting the session.

```ts theme={null}
import { useDisconnect } from "@reown/appkit/vue";

const { disconnect } = useDisconnect();

// Disconnect from all namespaces
await disconnect();

// Disconnect from specific namespace
await disconnect({ namespace: 'eip155' }); // Disconnect from Ethereum
await disconnect({ namespace: 'solana' }); // Disconnect from Solana
await disconnect({ namespace: 'bip122' }); // Disconnect from Bitcoin
```

### Parameters

* `namespace` (optional): The specific chain namespace to disconnect from. If not provided, disconnects from all connected namespaces.

### Use Cases

* Implementing a "Disconnect Wallet" button
* Handling logout flows in your application
* Cleaning up resources when a user disconnects
* Resetting application state after disconnection
* Disconnecting from specific chains in multi-chain applications

## useWalletInfo

Composable function for accessing wallet information.

```ts theme={null}
import { useWalletInfo } from '@reown/appkit/vue'


export default Component(){
  const { walletInfo } = useWalletInfo()
}
```

## useAppKitProvider

Composable function that returns the `walletProvider` and the `WalletProviderType` for interacting with the connected wallet across different blockchain adapters.

```ts theme={null}
import { useAppKitProvider } from "@reown/appkit/vue";
import type { Provider } from "@reown/appkit/vue";

const { walletProvider } = useAppKitProvider<Provider>("eip155");
```

### Use Cases

* Direct wallet interactions (signing messages, sending transactions)
* Access to wallet-specific methods and properties
* Integration with blockchain libraries (Ethers, Wagmi, Solana Web3.js)

### Examples

<Tabs>
  <Tab title="EVM (eip155)">
    ```tsx theme={null}
    import { useAppKitProvider } from "@reown/appkit/vue";
    import type { Provider } from "@reown/appkit/vue";

    const { walletProvider } = useAppKitProvider<Provider>("eip155");
    ```
  </Tab>

  <Tab title="Solana">
    ```tsx theme={null}
    import { useAppKitProvider } from "@reown/appkit/vue";
    import type { Provider } from "@reown/appkit-adapter-solana/vue";

    const { walletProvider } = useAppKitProvider<Provider>("solana");
    ```
  </Tab>

  <Tab title="Bitcoin (bip122)">
    ```tsx theme={null}
    import { useAppKitProvider } from "@reown/appkit/vue";
    import type { BitcoinConnector } from "@reown/appkit-adapter-bitcoin";

    const { walletProvider } = useAppKitProvider<BitcoinConnector>("bip122");
    ```
  </Tab>
</Tabs>

### Returns

* `walletProvider`: The wallet provider instance for the specified chain namespace
* `walletProviderType`: The type of wallet provider currently connected

## useAppKitConnections

Composable function that manages multiple wallet connections and provides access to all connected wallets. Use this composable when building applications that support multiple simultaneous wallet connections.

```ts theme={null}
import { useAppKitConnections } from "@reown/appkit/vue";

export default function Component() {
  const { connections, disconnect } = useAppKitConnections();
}
```

### Use Cases

* Managing multiple wallet connections simultaneously
* Building multi-wallet dashboards or portfolio views
* Implementing wallet comparison features
* Creating advanced wallet management interfaces

### Returns

* `connections`: Reactive reference to array of all connected wallet connections
* `disconnect`: Function to disconnect a specific wallet connection

<Note>
  Related composables: [useAppKitConnection](#useappkitconnection), [useAppKitAccount](#useappkitaccount)
</Note>

## useAppKitConnection

Composable function that manages the active wallet connection and provides connection switching capabilities. Use this composable when you need to work with the currently active connection or switch between multiple connections.

```ts theme={null}
import { useAppKitConnection } from "@reown/appkit/vue";

export default function Component() {
  const { connection, switchConnection } = useAppKitConnection();
}
```

### Use Cases

* Switching between multiple connected wallets
* Accessing the currently active wallet connection
* Building connection management interfaces
* Implementing wallet-specific features based on the active connection

### Returns

* `connection`: Reactive reference to the currently active wallet connection
* `switchConnection`: Function to switch to a different connected wallet

<Note>
  Related composables: [useAppKitConnections](#useappkitconnections), [useAppKitAccount](#useappkitaccount)
</Note>

## usePay

Composable function that manages payment modal interactions and handles crypto payment flows. Use this composable when implementing payment features with exchange integrations.

```ts theme={null}
import { usePay } from "@reown/appkit-pay/vue";

export default function Component() {
  const { pay, isLoading, error } = usePay({
    onSuccess: (result) => console.log('Payment successful:', result),
    onError: (error) => console.error('Payment failed:', error)
  });
}
```

### Use Cases

* Implementing crypto payment flows in your application
* Handling payment success and error states
* Integrating with centralized exchanges for payments
* Building custom payment interfaces

### Parameters

* `onSuccess`: Optional callback function called when payment succeeds
* `onError`: Optional callback function called when payment fails

### Returns

* `pay`: Function to initiate a payment with specified parameters
* `isLoading`: Reactive reference to boolean indicating if a payment is in progress
* `error`: Reactive reference to error object if payment fails

<Note>
  Related composables: [useAvailableExchanges](#useavailableexchanges), [usePayUrlActions](#usepayurlactions)
</Note>

## useAvailableExchanges

Composable function that fetches and manages the state for available exchanges. Use this composable when you need to display available payment options or filter exchanges based on criteria.

```ts theme={null}
import { useAvailableExchanges } from "@reown/appkit-pay/vue";

export default function Component() {
  const { data, isLoading, error, fetch } = useAvailableExchanges({
    isFetchOnInit: true,
    asset: 'ETH',
    amount: 100,
    network: 'eip155:1'
  });
}
```

### Use Cases

* Displaying available exchanges to users
* Filtering exchanges based on asset or network
* Building custom exchange selection interfaces
* Implementing exchange comparison features

### Parameters

* `isFetchOnInit`: Whether to fetch exchanges on composable initialization
* `asset`: Filter exchanges by specific asset
* `amount`: Filter exchanges by minimum amount
* `network`: Filter exchanges by network support

### Returns

* `data`: Reactive reference to array of available exchanges
* `isLoading`: Reactive reference to boolean indicating if exchanges are being fetched
* `error`: Reactive reference to error object if fetching fails
* `fetch`: Function to manually refetch exchanges

<Note>
  Related composables: [usePay](#usepay), [usePayUrlActions](#usepayurlactions)
</Note>

## usePayUrlActions

Composable function that provides functions to interact with specific exchange URLs, returning the sessionId needed for status tracking. Use this composable when implementing custom exchange flows.

```ts theme={null}
import { usePayUrlActions } from "@reown/appkit-pay/vue";

export default function Component() {
  const { getUrl, openUrl } = usePayUrlActions();

  // Get exchange URL
  const handleGetUrl = async () => {
    const { url, sessionId } = await getUrl('binance', {
      asset: 'ETH',
      amount: 0.1,
      recipient: '0x...'
    });
  };

  // Open exchange URL in new tab
  const handleOpenUrl = async () => {
    const { url, sessionId } = await openUrl('coinbase', {
      asset: 'USDC',
      amount: 100,
      recipient: '0x...'
    }, true);
  };
}
```

### Use Cases

* Building custom exchange integration flows
* Implementing exchange URL generation
* Creating custom payment interfaces
* Tracking exchange sessions for status monitoring

### Returns

* `getUrl`: Function that returns exchange URL and session ID
* `openUrl`: Function that opens exchange URL and returns session data

<Note>
  Related composables: [useExchangeBuyStatus](#useexchangebuystatus), [useAvailableExchanges](#useavailableexchanges)
</Note>

## useExchangeBuyStatus

Composable function that fetches and polls for the status of a headless payment transaction using exchangeId and sessionId. Use this composable to track payment progress and handle completion.

```ts theme={null}
import { useExchangeBuyStatus } from "@reown/appkit-pay/vue";

export default function Component() {
  const { data, isLoading, error, refetch } = useExchangeBuyStatus({
    exchangeId: 'binance',
    sessionId: 'session-123',
    pollingInterval: 5000,
    isEnabled: true,
    onSuccess: (status) => console.log('Payment completed:', status),
    onError: (error) => console.error('Payment failed:', error)
  });
}
```

### Use Cases

* Tracking payment transaction status
* Implementing payment progress indicators
* Handling payment completion and failure states
* Building real-time payment monitoring

### Parameters

* `exchangeId`: The exchange identifier
* `sessionId`: The session ID from payment URL actions
* `pollingInterval`: How often to check status (in milliseconds)
* `isEnabled`: Whether to enable status polling
* `onSuccess`: Callback for successful payment completion
* `onError`: Callback for payment errors

### Returns

* `data`: Reactive reference to current payment status data
* `isLoading`: Reactive reference to boolean indicating if status is being fetched
* `error`: Reactive reference to error object if status fetching fails
* `refetch`: Function to manually refetch status

<Note>
  Related composables: [usePayUrlActions](#usepayurlactions), [usePay](#usepay)
</Note>

## useAppKitUpdateEmail

Composable function that updates user email address with success and error handling. Use this composable when implementing email update functionality for user accounts.

```ts theme={null}
import { useAppKitUpdateEmail } from "@reown/appkit/vue";

export default function Component() {
  const { data, error, isPending, isError, isSuccess, updateEmail } = useAppKitUpdateEmail({
    onSuccess: (data) => console.log('Email updated:', data.email),
    onError: (error) => console.error('Update failed:', error)
  });
}
```

### Use Cases

* Implementing email update functionality
* Building user profile management interfaces
* Handling email verification flows
* Creating account settings pages

### Parameters

* `onSuccess`: Optional callback function called when email update succeeds
* `onError`: Optional callback function called when email update fails

### Returns

* `data`: Reactive reference to updated email data object
* `error`: Reactive reference to error object if update fails
* `isPending`: Reactive reference to boolean indicating if update is in progress
* `isError`: Reactive reference to boolean indicating if there was an error
* `isSuccess`: Reactive reference to boolean indicating if update was successful
* `updateEmail`: Function to trigger email update

<Note>
  Related composables: [useAppKitAccount](#useappkitaccount), [useWalletInfo](#usewalletinfo)
</Note>

## useAppKitSIWX

Composable function that provides access to Sign In With X (SIWX) configuration and state. Use this composable when implementing custom authentication flows with various blockchain protocols.

```ts theme={null}
import { useAppKitSIWX } from "@reown/appkit/vue";

export default function Component() {
  const siwxConfig = useAppKitSIWX();

  if (siwxConfig.value) {
    console.log('SIWX enabled with config:', siwxConfig.value);
  }
}
```

### Use Cases

* Implementing custom Sign In With X flows
* Accessing SIWX configuration for custom authentication
* Building protocol-specific authentication interfaces
* Handling multi-protocol sign-in scenarios

### Returns

* `siwxConfig`: Reactive reference to the current SIWX configuration object, or undefined if not configured

<Note>
  Related composables: [useAppKitAccount](#useappkitaccount), [useAppKitUpdateEmail](#useappkitupdateemail)
</Note>

## useAppKitConnection (Solana)

Solana-specific composable function that provides access to the Solana connection instance for blockchain interactions. Use this composable when building Solana-specific features.

```ts theme={null}
import { useAppKitConnection } from "@reown/appkit-adapter-solana/vue";

export default function Component() {
  const { connection } = useAppKitConnection();

  const getBalance = async (publicKey) => {
    if (connection.value) {
      // Use connection for Solana blockchain interactions
      const balance = await connection.value.getBalance(publicKey);
      return balance;
    }
  };
}
```

### Use Cases

* Accessing Solana connection for blockchain interactions
* Building Solana-specific transaction flows
* Implementing Solana program interactions
* Creating Solana wallet features

### Returns

* `connection`: Reactive reference to the Solana connection instance, or undefined if not connected

<Note>
  This is the Solana-specific version of useAppKitConnection. For general connection management, see [useAppKitConnection](#useappkitconnection).
</Note>

## Ethereum/Solana Library

<Tabs>
  <Tab title="Wagmi">
    You can use [Wagmi actions](https://wagmi.sh/core/actions/getAccount) to sign messages, interact with smart contracts, and much more.

    ### getAccount

    Action for accessing account data and connection status.

    ```tsx theme={null} theme={null} theme={null}
    import { getAccount } from "@wagmi/core";

    const account = getAccount();
    ```

    ### signMessage

    Action for signing messages with connected account.

    ```ts theme={null} theme={null} theme={null}
    import { signMessage } from "@wagmi/core";

    const signature = await signMessage({
      message: "gm wagmi frens",
    });
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitProvider } from "@reown/appkit/vue";
    import type { Provider } from "@reown/appkit/vue";

    function Components() {
      const { walletProvider } = useAppKitProvider<Provider>("eip155");

      async function onSignMessage() {
        console.log(walletProvider);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    <Card title="Learn More" href="https://wagmi.sh/core/actions/readContract" />
  </Tab>

  <Tab title="Ethers">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/vue";

    const { address, status, isConnected } = useAppKitAccount();
    ```

    ### switchNetwork

    ```tsx theme={null} theme={null} theme={null}
    import { createAppKit } from "@reown/appkit/vue";
    import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";

    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata: metadata,
      features: {
        analytics: true,
      },
    });

    modal.switchNetwork(polygon);
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import { BrowserProvider } from "ethers";
    import { useAppKitProvider } from "@reown/appkit/vue";

    function Components() {
      const { walletProvider } = useAppKitProvider("eip155");

      async function onSignMessage() {
        const provider = new BrowserProvider(walletProvider);
        const signer = await provider.getSigner();
        const signature = await signer?.signMessage("Hello AppKit Ethers");
        console.log(signature);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    ### getError

    ```ts theme={null} theme={null} theme={null}
    function Components() {
      const error = modal.getError();
      //...
    }
    ```

    <Card title="Learn More About Ethers" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>

  <Tab title="Ethers v5">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/vue";

    const { address, status, isConnected } = useAppKitAccount();
    ```

    ### switchNetwork

    ```tsx theme={null} theme={null} theme={null}
    import { createAppKit } from "@reown/appkit/vue";
    import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";

    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata: metadata,
      features: {
        analytics: true,
      },
    });

    modal.switchNetwork(polygon);
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import {
      useAppKitAccount,
      useAppKitProvider,
      useAppKitNetwork,
    } from "@reown/appkit/vue";
    import { ethers } from "ethers";
    import { useAppKitProvider } from "@reown/appkit/vue";

    function Components() {
      const { walletProvider } = useAppKitProvider("eip155");
      const { address } = useAppKitAccount();
      const { chainId } = useAppKitNetwork();

      async function onSignMessage() {
        const provider = new ethers.providers.Web3Provider(walletProvider, chainId);
        const signer = provider.getSigner(address);
        const signature = await signer?.signMessage("Hello AppKit Ethers");
        console.log(signature);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    ### getError

    ```ts theme={null} theme={null} theme={null}
    function Components() {
      const error = modal.getError();
      //...
    }
    ```

    <Card title="Learn More About Ethers" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>

  <Tab title="Solana">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/vue";

    function Components() {
      const { address, caipAddress, isConnected } = useAppKitAccount();

      //...
    }
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount, useAppKitProvider } from "@reown/appkit/vue";
    import type { Provider } from "@reown/appkit-adapter-solana";

    function SignMessage() {
      // 0. Get account and provider
      const { address } = useAppKitAccount();
      const { walletProvider } = useAppKitProvider<Provider>("solana");

      // 1. Create a function to sign a message
      async function onSignMessage() {
        try {
          if (!walletProvider || !address) {
            throw Error("user is disconnected");
          }

          // 2. Encode message and sign it
          const encodedMessage = new TextEncoder().encode("Hello from AppKit");
          const signature = await walletProvider.signMessage(encodedMessage);

          console.log(signature);
        } catch (err) {
          // Handle Error Here
        }
      }

      // 3. Create a button to trigger the function
      return <button onClick={onSignMessage}>Sign Message</button>;
    }
    ```

    ## useAppKitConnection

    Hook that returns the connection object. More info about [Connection Class](https://solana-labs.github.io/solana-web3.js/classes/Connection.html)

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitConnection } from '@reown/appkit-adapter-solana/vue'

    ...

    const { connection } = useAppKitConnection()
    ```
  </Tab>

  <Tab title="Bitcoin">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/vue";

    const { address, status, isConnected } = useAppKitAccount();
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitProvider } from "@reown/appkit/vue";
    import type { BitcoinConnector } from "@reown/appkit-adapter-bitcoin";

    function Components() {
      const { walletProvider } = useAppKitProvider<BitcoinConnector>("bip122");

      async function onSignMessage() {
        if (!walletProvider) {
          throw Error("user is disconnected");
        }

        const signature = await walletProvider.signMessage("Hello from AppKit");
        console.log(signature);
      }

      return <button onClick={() => onSignMessage()}>Sign Message</button>;
    }
    ```

    <Card title="Learn More About Bitcoin" href="https://developer.bitcoin.org/" />
  </Tab>
</Tabs>


# Custom connectors
Source: https://docs.reown.com/appkit/vue/core/custom-connectors



In AppKit, a 'connector' is the bridge between your app and a user's wallet. This page shows how to add custom connectors beyond the default ones, allowing your users to connect with additional wallet types and authentication methods.

<Tabs>
  <Tab title="Wagmi">
    If you already have Wagmi integrated into your application or would like more control over Wagmi's configuration, you can integrate AppKit on top of it.

    Adding custom connectors like WalletConnect and Coinbase is optional.

    By default, [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and WC connectors are provided out of the box.

    ```ts theme={null}
    import { createAppKit } from '@reown/appkit/vue'
    import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

    import { http, WagmiProvider, CreateConnectorFn } from 'wagmi'
    import { abstractTestnet } from '@reown/appkit/networks'
    // you need to add the abstract library in order to make it work
    import { abstractWalletConnector } from "@abstract-foundation/agw-react/connectors";

    const projectId = 'YOUR_PROJECT_ID'

    const metadata = {
      //....
    }

    // create the custom connector (in this example Abastract)
    const connectors: CreateConnectorFn[] = []
    connectors.push(abstractWalletConnector())

    const export networks = [abstractTestnet]

    export const wagmiAdapter = new WagmiAdapter({
      connectors,
      projectId,
      networks
    })

    export const config = wagmiAdapter.wagmiConfig

    createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks
    })
    ```

    Check our Vue Wagmi demo in [Github](https://github.com/reown-com/appkit-web-examples/)
  </Tab>
</Tabs>


# Installation
Source: https://docs.reown.com/appkit/vue/core/installation



## Introduction

AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, Bitcoin, TON and TRON.
Choose one of these to get started.

## Installation

Try installing AppKit Skills to get AI-assisted guidance. Your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.

## Custom Installation

<Tabs>
  <Tab title="Wagmi">
    <Warning>
      AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.
    </Warning>

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers v5">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Solana">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-solana
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Bitcoin">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
      ```
    </CodeGroup>
  </Tab>

  <Tab title="TON">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ton
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ton
      ```
    </CodeGroup>
  </Tab>

  <Tab title="TRON">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-tron
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-tron
      ```
    </CodeGroup>
  </Tab>
</Tabs>

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

## Cloud Configuration

Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtain a new project ID.

## Implementation

<Tabs>
  <Tab title="Wagmi">
    <Card title="wagmi Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/vue/vue-wagmi">
      Check the Vue wagmi example
    </Card>

    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](../../../../cloud/blockchain-api) as a [transport](https://wagmi.sh/core/api/createConfig#transports)

    <Note>
      If you're using Nuxt, you can set wagmi's `ssr` option to true and call the `reconnect` function after your application mounts.
    </Note>

    In your `App.vue` file set up the following configuration

    ```html theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script lang="ts" setup>
      import { createAppKit } from '@reown/appkit/vue'
      import { arbitrum, mainnet, type AppKitNetwork } from '@reown/appkit/networks'
      import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

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

      // 2. Create a metadata object
      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. Set the networks
      const networks: [AppKitNetwork, ...AppKitNetwork[]] = [mainnet, polygon, base]

      // 4. Create Wagmi Adapter
      const wagmiAdapter = new WagmiAdapter({
        networks,
        projectId
      })

      // 5. Create the modal
      const modal = createAppKit({
        adapters: [wagmiAdapter],
        networks,
        projectId,
        metadata,
        features: {
          analytics: true // Optional - defaults to your Cloud configuration
        }
      })
    </script>

    <template> // Rest of your app ... </template>
    ```

    ## Importing networks

    Reown AppKit use [Viem](https://viem.sh/) 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.

    ```js {2} theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { createAppKit } from '@reown/appkit/vue'
    import { mainnet, arbitrum, base, scroll, polygon } from '@reown/appkit/networks'
    ```

    <Note>
      Looking to add a custom network? Check out the [custom networks](/appkit/vue/core/custom-networks) section.
    </Note>
  </Tab>

  <Tab title="Ethers v5">
    In your `App.vue` file set up the following configuration.

    ```html theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script setup lang="ts">
      import { createAppKit, useAppKit } from "@reown/appkit/vue";
      import { Ethers5Adapter } from "@reown/appkit-adapter-ethers5";
      import { mainnet, arbitrum } from "@reown/appkit/networks";

      // 1. Get projectId at https://dashboard.reown.com
      const projectId = "YOUR_PROJECT_ID";

      function getBlockchainApiRpcUrl(chainId) {
        return `https://rpc.walletconnect.org/v1/?chainId=eip155:${chainId}&projectId=${projectId}`;
      }

      // 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
      createAppKit({
        adapters: [new Ethers5Adapter()],
        networks: [mainnet, arbitrum],
        projectId,
        features: {
          analytics: true, // Optional - defaults to your Cloud configuration
        },
      });

      // 4. Use modal composable
      const modal = useAppKit();
    </script>

    <template> // Rest of your app ... </template>
    ```

    <Warning>
      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.
    </Warning>
  </Tab>

  <Tab title="Ethers">
    <Card title="ethers Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/vue/vue-ethers">
      Check the Vue ethers example
    </Card>

    In your `App.vue` file set up the following configuration.

    ```html theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script setup lang="ts">
      import { createAppKit, useAppKit } from "@reown/appkit/vue";
      import { EthersAdapter } from "@reown/appkit-adapter-ethers";
      import { mainnet, arbitrum } from "@reown/appkit/networks";

      // 1. Get projectId from https://dashboard.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
      createAppKit({
        adapters: [new EthersAdapter()],
        networks: [mainnet, arbitrum],
        metadata,
        projectId,
        features: {
          analytics: true, // Optional - defaults to your Cloud configuration
        },
      });

      // 4. Use modal composable
      const modal = useAppKit();
    </script>

    <template> // Rest of your app ... </template>
    ```

    <Warning>
      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.
    </Warning>
  </Tab>

  <Tab title="Solana">
    <Warning>
      MetaMask does not currently support WalletConnect connections on Solana. The MetaMask team is working on adding this feature. In the meantime, we recommend using other wallets that support Solana. You can find the complete list of supported wallets on [WalletGuide](https://walletguide.walletconnect.network/).
    </Warning>

    <Card title="Solana Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/vue/vue-solana">
      Check the Vue Solana example
    </Card>

    In your `App.vue` file set up the following configuration.

    ```html theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script setup lang="ts">
      import { createAppKit, useAppKit } from "@reown/appkit-solana/vue";
      import { SolanaAdapter } from "@reown/appkit-adapter-solana/vue";
      import { solana, solanaTestnet, solanaDevnet } from "@reown/appkit/networks";

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

      // 2. Set up metadata
      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. Set up Solana Adapter
      const solanaWeb3JsAdapter = new SolanaAdapter();

      // 4. Create modal
      createAppKit({
        adapters: [solanaWeb3JsAdapter],
        metadata,
        networks: [solana, solanaTestnet, solanaDevnet],
        projectId
      });
    </script>

    <template> // Rest of your app ... </template>
    ```

    <Warning>
      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.
    </Warning>
  </Tab>

  <Tab title="Bitcoin">
    <Card title="Bitcoin Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/vue/vue-bitcoin">
      Check the Vue Bitcoin example
    </Card>

    AppKit Bitcoin provides a set of React components and hooks to easily connect Bitcoin wallets with your application.

    On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

    In your `App.vue` file set up the following configuration.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script setup lang="ts">

    import { createAppKit } from '@reown/appkit/react'
    import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
    import { bitcoin, bitcoinTestnet, bitcoinSignet } from '@reown/appkit/networks'

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

    // 2. Set the networks
    const networks = [bitcoin, bitcoinTestnet, bitcoinSignet]

    // 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
    createAppKit({
      adapters: [bitcoinAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true // Optional - defaults to your Cloud configuration,
        email: false,
        socials: []
      }
    })
    </script>

    <template> // Rest of your app ... </template>
    ```

    ## Bitcoin Provider Interface

    ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    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

    <Tabs>
      <Tab title="SignMessageParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          export type SignMessageParams = {
            /**
             * The message to be signed
             */
            message: string
            /**
             * The address to sign the message with
             */
            address: string
          }
        ```
      </Tab>

      <Tab title="SendTransferParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          export type SendTransferParams = {
            /**
             * The amount to be sent in satoshis
             */
            amount: string
            /**
             * The address to send the transfer to
             */
            recipient: string
          }
        ```
      </Tab>

      <Tab title="SignPSBTParams">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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

        }

        ```
      </Tab>
    </Tabs>

    ### Responses

    <Tabs>
      <Tab title="AccountAddress">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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'
          }
        ```
      </Tab>

      <Tab title="SignPSBTResponse">
        ```ts theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          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
          }
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="TON">
    <Card title="TON Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/vue/vue-ton">
      Check the Vue TON example
    </Card>

    AppKit TON provides a set of Vue components and composables to easily connect TON wallets with your application.

    On top of your app set up the following configuration, making sure that all functions are called outside any Vue component to avoid unwanted rerenders.

    In your `App.vue` file set up the following configuration.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script setup lang="ts">

    import { createAppKit } from '@reown/appkit/vue'
    import { TonAdapter } from '@reown/appkit-adapter-ton'
    import { ton, tonTestnet } from '@reown/appkit/networks'

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

    // 2. Set the networks
    const networks = [ton, tonTestnet]

    // 3. Set up TON Adapter
    const tonAdapter = new TonAdapter({
      projectId
    })

    // 4. Create a metadata object - optional
    const metadata = {
      name: 'AppKit',
      description: 'AppKit TON Example',
      url: 'https://example.com', // origin must match your domain & subdomain
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // 5. Create modal
    createAppKit({
      adapters: [tonAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true // Optional - defaults to your Cloud configuration,
        email: false,
        socials: []
      }
    })
    </script>

    <template> // Rest of your app ... </template>
    ```
  </Tab>

  <Tab title="TRON">
    AppKit TRON provides a set of Vue components and composables to easily connect TRON wallets with your application.

    On top of your app set up the following configuration, making sure that all functions are called outside any Vue component to avoid unwanted rerenders.

    In your `App.vue` file set up the following configuration.

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    <script setup lang="ts">

    import { createAppKit } from '@reown/appkit/vue'
    import { TronAdapter } from '@reown/appkit-adapter-tron'
    import { tronMainnet } from '@reown/appkit/networks'

    // Import wallet adapters you want to support
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'

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

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

    // 3. Set up TRON Adapter with wallet adapters
    const tronAdapter = new TronAdapter({
      walletAdapters: [
        new TronLinkAdapter({
          openUrlWhenWalletNotFound: false,
          checkTimeout: 3000
        })
      ]
    })

    // 4. Create a metadata object - optional
    const metadata = {
      name: 'AppKit',
      description: 'AppKit TRON Example',
      url: 'https://example.com', // origin must match your domain & subdomain
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    // 5. Create modal
    createAppKit({
      adapters: [tronAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true, // Optional - defaults to your Cloud configuration
        email: false,
        socials: []
      }
    })
    </script>

    <template> // Rest of your app ... </template>
    ```

    ## Install Wallet Adapters

    TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size.

    <Tabs>
      <Tab title="TronLink">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-tronlink
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-tronlink
          ```
        </CodeGroup>
      </Tab>

      <Tab title="MetaMask">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-metamask-tron
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-metamask-tron
          ```
        </CodeGroup>
      </Tab>

      <Tab title="Trust Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-trust
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-trust
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-trust
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-trust
          ```
        </CodeGroup>
      </Tab>

      <Tab title="OKX Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-okxwallet
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-okxwallet
          ```
        </CodeGroup>
      </Tab>

      <Tab title="BitKeep">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-bitkeep
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-bitkeep
          ```
        </CodeGroup>
      </Tab>

      <Tab title="Binance Wallet">
        <CodeGroup>
          ```bash npm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          npm install @tronweb3/tronwallet-adapter-binance
          ```

          ```bash Yarn theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          yarn add @tronweb3/tronwallet-adapter-binance
          ```

          ```bash Bun theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          bun add @tronweb3/tronwallet-adapter-binance
          ```

          ```bash pnpm theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
          pnpm add @tronweb3/tronwallet-adapter-binance
          ```
        </CodeGroup>
      </Tab>
    </Tabs>

    <Note>
      For a complete list of available TRON wallet adapters, visit the [official wallet adapter documentation](https://walletadapter.org/docs/guide/wallet-reference.html).
    </Note>

    ### Using Multiple Wallet Adapters

    After installing your desired wallet adapters, import and add them to the `walletAdapters` array when creating the TRON adapter:

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'
    import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron'
    import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust'
    import { OkxWalletAdapter } from '@tronweb3/tronwallet-adapter-okxwallet'

    const tronAdapter = new TronAdapter({
      walletAdapters: [
        new TronLinkAdapter({
          openUrlWhenWalletNotFound: false,
          checkTimeout: 3000
        }),
        new MetaMaskAdapter(),
        new TrustAdapter(),
        new OkxWalletAdapter({
          openUrlWhenWalletNotFound: false
        })
      ]
    })
    ```
  </Tab>
</Tabs>

## Trigger the modal

<Tabs>
  <Tab title="AppKit">
    To open AppKit you can use our [**web components**](/appkit/vue/core/components) or build your own button with AppKit [**composables**](/appkit/vue/core/composables#useAppKit).

    <CodeGroup>
      ```vue ConnectButton.vue theme={null}
      <template>
        <appkit-button />
      </template>
      ```

      ```vue ConnectButtonWithComposables.vue theme={null}
      <script setup lang="ts">
      import { useAppKit } from '@reown/appkit/vue'

      const { open } = useAppKit()
      </script>

      <template>
        <button @click="open()">Open Connect Modal</button>
        <button @click="open({ view: 'Networks' })">Open Network Modal</button>
      </template>
      ```
    </CodeGroup>
  </Tab>

  <Tab title="AppKit Core">
    To open AppKit Core you need to call the `connect` function from the Universal Connector.

    ```vue theme={null}
    <script setup lang="ts">
    import { ref } from 'vue'

    let session = ref(null)

    async function handleConnect() {
      // universalConnector is the universal connector instance from the implementation section
      if (!universalConnector) {
        return
      }

      const { session: providerSession } = await universalConnector.connect()
      session.value = providerSession
    }

    async function handleDisconnect() {
      if (!universalConnector) {
        return
      }
      await universalConnector.disconnect()
      session.value = null
    }
    </script>

    <template>
      <div>
        <button @click="handleConnect">Open AppKit Core</button>
        <button @click="handleDisconnect">Disconnect</button>
      </div>
    </template>
    ```
  </Tab>
</Tabs>

## Smart Contract Interaction

<Tabs>
  <Tab title="Wagmi">
    [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) can help us interact with wallets and smart contracts:

    ```html theme={null}
    <script setup lang="ts">
      import { readContract } from '@wagmi/core'
      import { USDTAbi } from '../abi/USDTAbi'

      const USDTAddress = '0x...'

      const data = readContract({
        abi: USDTAbi,
        address: USDTAddress,
        functionName: 'symbol'
      })
    </script>
    ```

    Read more about Wagmi actions for smart contract interaction [here](https://wagmi.sh/core/actions/readContract).
  </Tab>

  <Tab title="Ethers">
    [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:

    ```html theme={null}
    <script setup lang="ts">
      import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/vue'
      import { BrowserProvider, Contract, formatUnits } from 'ethers'

      const USDTAddress = '0x617f3112bf5397D0467D315cC709EF968D9ba546'

      // The ERC-20 Contract ABI, which is a common contract interface
      // for tokens (this is the Human-Readable ABI format)
      const USDTAbi = [
        'function name() view returns (string)',
        'function symbol() view returns (string)',
        'function balanceOf(address) view returns (uint)',
        'function transfer(address to, uint amount)',
        'event Transfer(address indexed from, address indexed to, uint amount)'
      ]

      function Components() {
        const { address, isConnected } = useAppKitAccount()
        const { walletProvider } = useAppKitProvider('eip155')

        async function getBalance() {
          if (!isConnected) throw Error('User disconnected')

          const ethersProvider = new BrowserProvider(walletProvider)
          const signer = await ethersProvider.getSigner()
          // The Contract object
          const USDTContract = new Contract(USDTAddress, USDTAbi, signer)
          const USDTBalance = await USDTContract.balanceOf(address)

          console.log(formatUnits(USDTBalance, 18))
        }
        return <button onClick={getBalance}>Get User Balance</button>
      }
    </script>
    ```
  </Tab>

  <Tab title="Solana">
    [@Solana/web3.js](https://solana.com/docs/clients/javascript) 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](https://appkit-lab.reown.com/appkit/?name=solana).

    ```tsx theme={null} theme={null} theme={null} theme={null} theme={null} theme={null}
    import { ref } from 'vue';
    import {
      SystemProgram,
      PublicKey,
      Keypair,
      Transaction,
      TransactionInstruction,
      LAMPORTS_PER_SOL
    } from '@solana/web3.js';
    import { useAppKitAccount, useAppKitProvider } from '@reown/appkit/vue'
    import { useAppKitConnection, type Provider } from '@reown/appkit-adapter-solana/vue'

    export default {
      setup() {
        const counterMessage = ref('');
        const { address } = useAppKitAccount();
        const { connection } = useAppKitConnection()
        const { walletProvider } = useAppKitProvider<Provider>('solana')

        function deserializeCounterAccount(data) {
          if (data?.byteLength !== 8) {
            throw Error('Need exactly 8 bytes to deserialize counter');
          }

          return {
            count: Number(data[0])
          };
        }

        async function onIncrementCounter() {
          try {
            const PROGRAM_ID = new PublicKey('Cb5aXEgXptKqHHWLifvXu5BeAuVLjojQ5ypq6CfQj1hy');

            const counterKeypair = Keypair.generate();
            const counter = counterKeypair.publicKey;

            const balance = await connection.getBalance(walletProvider.publicKey);
            if (balance < LAMPORTS_PER_SOL / 100) {
              throw Error('Not enough SOL in wallet');
            }

            const COUNTER_ACCOUNT_SIZE = 8;
            const allocIx = SystemProgram.createAccount({
              fromPubkey: walletProvider.publicKey,
              newAccountPubkey: counter,
              lamports: await connection.getMinimumBalanceForRentExemption(COUNTER_ACCOUNT_SIZE),
              space: COUNTER_ACCOUNT_SIZE,
              programId: PROGRAM_ID
            });

            const incrementIx = new TransactionInstruction({
              programId: PROGRAM_ID,
              keys: [
                {
                  pubkey: counter,
                  isSigner: false,
                  isWritable: true
                }
              ],
              data: Buffer.from([0x0])
            });

            const tx = new Transaction().add(allocIx).add(incrementIx);

            tx.feePayer = walletProvider.publicKey;
            tx.recentBlockhash = (await connection.getLatestBlockhash('confirmed')).blockhash;

            await walletProvider.signAndSendTransaction(tx, [counterKeypair]);

            const counterAccountInfo = await connection.getAccountInfo(counter, {
              commitment: 'confirmed'
            });

            if (!counterAccountInfo) {
              throw new Error('Expected counter account to have been created');
            }

            const counterAccount = deserializeCounterAccount(counterAccountInfo?.data);

            if (counterAccount.count !== 1) {
              throw new Error('Expected count to have been 1');
            }

            counterMessage.value = `[alloc+increment] count is: ${counterAccount.count}`;
          } catch (error) {
            console.error(error);
            counterMessage.value = `Error: ${error.message}`;
          }
        }

        return {
          onIncrementCounter,
          counterMessage
        };
      }
    };
    ```
  </Tab>
</Tabs>

## Alternative Installation

If you are starting from scratch, you can use the following methods to set up your project with Reown AppKit.

<AccordionGroup>
  <Accordion title="AppKit Skills">
    AppKit Skills provide AI-powered assistance for building with Reown AppKit. Once installed, your AI coding assistant can help you set up, build, and debug your AppKit integration.

    To install AppKit Skills, run the following command in your terminal:

    ```bash theme={null}
    npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
    ```

    After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.
  </Accordion>

  <Accordion title="AppKit CLI">
    Reown offers a dedicated CLI to set up a minimal version of AppKit in the easiest and quickest way possible.

    To do this, please run the command below.

    ```bash theme={null}
    npx @reown/appkit-cli
    ```

    After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:

    1. **Project Name**: Enter the name for your project.
    2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
    3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana).

    After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`.

    To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly.

    **Refer to [this section](#cloud-configuration) for more information.**
  </Accordion>
</AccordionGroup>


# Options
Source: https://docs.reown.com/appkit/vue/core/options



# Options

The following options can be passed to the `createAppKit` function:

```ts theme={null}
createAppKit({ adapters, projectId, networks, ...options });
```

## networks

Array of networks that can be chosen from the `@reown/appkit/networks` library. This library retrieves the list of EVM networks from Viem and also includes the Solana networks.

```ts theme={null}
import { mainnet, solana } from "@reown/appkit/networks";

createAppKit({
  // ...
  networks: [mainnet, solana],
});
```

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

## metadata

Metadata for your AppKit. The `name`, `description`, `icons`, and `url` are used at certain places like the wallet connection, sign message, etc screens. If not provided, they will be fetched from the metadata of your website's document object.

```ts theme={null}
createAppKit({
  // ...
  metadata: {
    name: "My App",
    description: "My App Description",
    icons: ["https://myapp.com/icon.png"],
    url: "https://myapp.com",
  },
});
```

This information will primarily be used in modals when signing a transaction or message using [Embedded wallets (Smart Accounts)](/appkit/features/smart-accounts), or when verifying ownership with [SIWE/SIWX](/appkit/authentication/siwx/default) using any wallet.

For custom networks, refer to this [doc page](/appkit/react/core/custom-networks).

<AccordionGroup>
  <Accordion title="The icon can be an encoded image">
    ```typescript theme={null}
    const icon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
    createAppKit({
      // ...
      metadata: {
        // ...
        icons: [icon]
      }
    })
    ```
  </Accordion>
</AccordionGroup>

## defaultNetwork

Desired network for the initial connection as default:

<Tabs>
  <Tab title="Wagmi">
    ```ts theme={null}
    import { mainnet } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts theme={null}
    const mainnet = {
      chainId: 1,
      name: "Ethereum",
      currency: "ETH",
      explorerUrl: "https://etherscan.io",
      rpcUrl: "https://cloudflare-eth.com",
    };

    createAppKit({
      //...
      defaultNetwork: mainnet,
    });
    ```
  </Tab>

  <Tab title="Solana">
    ```ts theme={null}
    import { solana } from "@reown/appkit/networks";

    createAppKit({
      //...
      defaultNetwork: solana,
    });
    ```
  </Tab>
</Tabs>

## defaultAccountTypes

It allows you to configure the default account selected for the specified networks in AppKit. For example, if you want your EVM networks to use an EOA account by default, you can configure it as shown in the code below.

```ts theme={null}
createAppKit({
  //...
  defaultAccountTypes: { eip155: "eoa" },
});
```

Here are all the options you have for each network identifier or networks. Network identifier or networks available are `eip155` for EVM chains, `solana` for Solana, `bip122` for Bitcoin, and `polkadot` for Polkadot.

```ts theme={null}
type DefaultAccountTypes = {
  eip155: "eoa" | "smartAccount";
  solana: "eoa";
  bip122: "payment" | "ordinal" | "stx";
  polkadot: "eoa";
};
```

## featuredWalletIds

Select wallets that are going to be shown on the modal's main view. Default wallets are MetaMask and Trust Wallet.
Array of wallet ids defined will be prioritized (order is respected).
These wallets will also show up first in `All Wallets` view.
You can find the wallets IDs in [Wallets List](/cloud/wallets/wallet-list) or in [WalletGuide](https://walletguide.walletconnect.network/)

```ts theme={null}
createAppKit({
  //...
  featuredWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

## chainImages

Add or override the modal's network images.

```ts theme={null}
createAppKit({
  // ...
  chainImages: {
    1: "https://my.images.com/eth.png",
  },
});
```

## connectorImages

<Tabs>
  <Tab title="Wagmi">
    Set or override the images of any [connector](https://wagmi.sh/core/connectors/injected). AppKit supports two types of connector identification:

    * **EIP6963 wallets** (announced wallets): Use RDNS format like `'io.metamask'`, `'io.coinbase'`, `'app.phantom'`
    * **Other wallets**: Use normal connector IDs like `walletConnect`, `injected`, `appKitAuth`

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'io.metamask': "https://images.mydapp.com/metamask.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
        injected: "https://images.mydapp.com/browser-wallet.png",
      },
    });
    ```
  </Tab>

  <Tab title="Ethers">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>

  <Tab title="Solana">
    Set or override the images of any connector.

    ```ts theme={null}
    createAppKit({
      connectorImages: {
        // EIP6963 wallets (announced wallets use RDNS)
        'io.coinbase': "https://images.mydapp.com/coinbase.png",
        'app.phantom': "https://images.mydapp.com/phantom.png",
        // Other wallets (use normal connector IDs)
        walletConnect: "https://images.mydapp.com/walletconnect.png",
      },
    });
    ```
  </Tab>
</Tabs>

## enableWallets

Enable or disable injected wallets and WalletConnect. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWallets: false,
});
```

## enableNetworkSwitch

Enables or disables the network switching functionality in the modal. The default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableNetworkSwitch: false,
});
```

## enableReconnect

Enable or disable automatic reconnection on initialization and page load. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableReconnect: false,
});
```

## enableMobileFullScreen

Enable or disable fullscreen rendering of AppKit Core on mobile devices. Default is `false`.

```ts theme={null}
createAppKit({
  //...
  enableMobileFullScreen: true,
});
```

## debug

Enable or disable debug mode in your AppKit. This is useful if you want to see UI alerts when debugging. Default is `false`.

```ts theme={null}
debug: true;
```

## enableWalletGuide

Enable or disable the wallet guide text: `Haven't got a wallet? Get started`, is useful for people that don't have a wallet yet. Default is `true`.

```ts theme={null}
createAppKit({
  //...
  enableWalletGuide: false,
});
```

## termsConditionsUrl

You can add an url for the *terms and conditions* link.

```ts theme={null}
createAppKit({
  //...
  termsConditionsUrl: "https://www.mytermsandconditions.com",
});
```

## privacyPolicyUrl

A URL for the *privacy policy* link.

```ts theme={null}
createAppKit({
  //...
  privacyPolicyUrl: "https://www.myprivacypolicy.com",
});
```

## features

Allows you to toggle (enable or disable) additional features provided by AppKit. Features such as analytics, email and social logins, On-ramp, swaps, etc., can be enabled using this parameter.

### analytics

Enable analytics to get more insights on your users activity within your [Reown Dashboard](https://dashboard.reown.com)

```ts theme={null}
createAppKit({
  //...
  features: {
    analytics: true,
  },
});
```

<Card title="Learn More" href="/cloud/analytics" />

### swaps

Enable or disable the swap feature in your AppKit. [Swaps](/appkit/react/transactions/swaps) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    swaps: true,
  },
});
```

### onramp

Enable or disable the onramp feature in your AppKit. [Onramp](/appkit/react/transactions/onramp) feature is enabled by default.

```ts theme={null}
createAppKit({
  //...
  features: {
    onramp: true,
  },
});
```

### connectMethodsOrder

Order of the connection methods in the modal. The default order is `['wallet', 'email', 'social']`.

<Frame>
  <img />
</Frame>

```ts theme={null}
createAppKit({
  //...
  features: {
    connectMethodsOrder: ["social", "email", "wallet"],
  },
});
```

### legalCheckbox

Enable or disable the terms of service and/or privacy policy checkbox.

```ts theme={null}
createAppKit({
  //...
  features: {
    legalCheckbox: true,
  },
});
```

<Frame>
  <img />
</Frame>

## customWallets

Adds custom wallets to the modal. `customWallets` is an array of objects, where each object contains specific information of a custom wallet.

```ts theme={null}
createAppKit({
  //...
  customWallets: [
    {
      id: "myCustomWallet",
      name: "My Custom Wallet",
      homepage: "www.mycustomwallet.com", // Optional
      image_url: "my_custom_wallet_image", // Optional
      mobile_link: "mobile_link", // Optional - Deeplink or universal
      desktop_link: "desktop_link", // Optional - Deeplink
      webapp_link: "webapp_link", // Optional
      app_store: "app_store", // Optional
      play_store: "play_store", // Optional
    },
  ],
});
```

## AllWallets

<Warning>
  If the "All Wallets" button is removed on mobile, all the mobile wallets that were not added on the main view of the modal **won't** be able to connect to your website via WalletConnect protocol.
</Warning>

The `allWallets` parameter allows you to add or remove the "All Wallets" button on the modal.

| Value         | Description                                              |
| ------------- | -------------------------------------------------------- |
| `SHOW`        | Shows the "All Wallets" button on AppKit.                |
| `HIDE`        | Removes the "All Wallets" button from AppKit.            |
| `ONLY_MOBILE` | Shows the "All Wallets" button on AppKit only on mobile. |

```ts theme={null}
createAppKit({
  //...
  allWallets: "ONLY_MOBILE",
});
```

## includeWalletIds & excludeWalletIds

<Warning>
  Wallets that are either not included or excluded **won't** be able to connect to your website on mobile via WalletConnect protocol.
</Warning>

### includeWalletIds

Override default recommended wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be shown (order is respected).
Unlike `featuredWalletIds`, these wallets will be the **only** ones shown in `All Wallets` view and as recommended wallets.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  includeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### excludeWalletIds

Exclude wallets that are fetched from [WalletGuide](https://walletguide.walletconnect.network/).
Array of wallet ids defined will be excluded. All other wallets will be shown in respective places.
You can find the wallets IDs in our [Wallets List](/cloud/wallets/wallet-list).

```ts theme={null}
createAppKit({
  //...
  excludeWalletIds: [
    "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
    "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
  ],
});
```

### Coinbase Smart Wallet

The Coinbase connector now includes a new flag to customize the Smart Wallet behavior.

The `preference` (or `coinbasePreference`) flag accepts one of the following string values:

* `eoaOnly`: Uses EOA Browser Extension or Mobile Coinbase Wallet.
* `smartWalletOnly`: Displays Smart Wallet popup.
* `all` (default): Supports both `eoaOnly` and `smartWalletOnly` based on context.

<Tabs>
  <Tab title="Wagmi">
    AppKit can be configured in **two** different ways: **Default** or **Custom**

    Select your preferred configuration mode below:

    Learn more about the Coinbase connector in the [Wagmi documentation](https://wagmi.sh/react/api/connectors/coinbaseWallet#preference).

    <CodeGroup>
      ```ts Default {4} theme={null}
      createAppKit({
        //...
        enableCoinbase: true, // true by default
        coinbasePreference: "smartWalletOnly",
      });
      ```

      ```ts Custom {8} theme={null}
      import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";

      const adapter = new WagmiAdapter({
        //...
        connectors: [
          coinbaseWallet({
            //...
            preference: "smartWalletOnly",
          }),
          projectId,
          networks,
        ],
      });

      export const config = wagmiAdapter.wagmiConfig;
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    ```ts {4} theme={null}
    createAppKit({
      //...
      enableCoinbase: true, // true by default
      coinbasePreference: "smartWalletOnly",
    });
    ```
  </Tab>
</Tabs>

## customRpcUrls

This function allows you to add custom RPC URLs to override the default network RPC URLs for native RPC calls. This is useful when you want to use your own RPC endpoints instead of the defaults.

```ts theme={null}
type CustomRpcUrl = {
  url: string
  config?: HttpTransportConfig // Optional transport configuration
}

type CustomRpcUrlMap = Record<CaipNetworkId, CustomRpcUrl[]>

createAppKit({
  //...
  customRpcUrls: {
    'eip155:1': [
      {
        url: 'https://your-custom-mainnet-url.com',
        config: {
          // Optional HTTP transport configuration
        }
      }
    ],
    'eip155:137': [
      {
        url: 'https://your-custom-polygon-url.com'
      }
    ]
  }
})
```

If you are using the Wagmi adapter, you need to pass the same `customRpcUrls` configuration to both the `WagmiAdapter` and `createAppKit`.

```ts theme={null}
const customRpcUrls: CustomRpcUrlMap = {
  'eip155:1': [{ url: 'https://your-custom-mainnet-url.com' }],
  'eip155:137': [{ url: 'https://your-custom-polygon-url.com' }]
}

const wagmiAdapter = new WagmiAdapter({
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})

const modal = createAppKit({
  adapters: [...],
  networks: [...],
  projectId: "project-id",
  customRpcUrls
})
```

<Note>
  When using the Wagmi adapter, you don't need to configure [`transports`](https://wagmi.sh/core/api/createConfig#transports) separately. The WagmiAdapter will automatically configure them based on your `customRpcUrls`.

  However, if you use both `customRpcUrls` and Wagmi's `transports` property, be aware that `transports` will take precedence and override any conflicting RPC URLs defined in `customRpcUrls`.

  ```ts theme={null}
  const wagmiAdapter = new WagmiAdapter({
    //...
    customRpcUrls: {
      'eip155:1': [{ url: 'https://custom-rpc-1.com' }] // This will be overridden
    },
    transports: {
      [mainnet.id]: http('https://transport-rpc-1.com') // This takes precedence
    }
  })
  ```
</Note>

## universalProviderConfigOverride

Lets you customize specific aspects of the provider's behavior.

```ts theme={null}
createAppKit({
  //...
  universalProviderConfigOverride: {
    methods: { eip155: ['eth_sendTransaction', 'personal_sign'] },
    chains: { eip155: ['1', '137'] },
    events: { eip155: ['chainChanged', 'accountsChanged'] },
    rpcMap: { eip155:1: 'https://ethereum.publicnode.com' },
    defaultChain: 'eip155:1'
  },
});
```

You can override any of the following properties:

* `methods`: Custom RPC methods for each namespace
* `chains`: Supported chains for each namespace
* `events`: Events to subscribe to for each namespace
* `rpcMap`: Custom RPC URLs for specific chains
* `defaultChain`: The default chain to connect to

## allowUnsupportedChain

Allow users to switch to an unsupported chain. This parameter prevents the switch network dialog when a user connects to a network not listed under the `networks` attribute.

```ts theme={null}
createAppKit({
  //...
  allowUnsupportedChain: true,
});
```


# Sign In With Ethereum
Source: https://docs.reown.com/appkit/vue/core/siwe



<Warning>
  **SIWE is being migrated to SIWX.** We recommend using [SIWX (Sign In With X)](/appkit/authentication/siwx/default) for new implementations as it provides multichain authentication support. For existing SIWE implementations, see the [migration guide](/appkit/authentication/siwx/default#migrating-from-siwe-to-siwx).
</Warning>

AppKit provides a simple solution for integrating with "Sign In With Ethereum" (SIWE), a new form of authentication that enables users to control their digital identity with their Ethereum account.
SIWE is a standard also known as [EIP-4361](https://docs.login.xyz/general-information/siwe-overview/eip-4361).

## One-Click Auth

**One-Click Auth** represents a key advancement within WalletConnect v2, streamlining the user authentication process in AppKit by enabling them to seamlessly connect with a wallet and sign a SIWE message with just one click.

Connecting a wallet, proving control of an address with an off-chain signature, authorizing specific actions. These are the kinds of authorizations that can be encoded as ["ReCaps"](https://eips.ethereum.org/EIPS/eip-5573). ReCaps are permissions for a specific website or dapp that can be compactly encoded as a long string in the message you sign and translated by any wallet into a straight-forward one-sentence summary.
WalletConnect uses permissions expressed as ReCaps to enable a One-Click Authentication.

## Installation

<Tabs>
  <Tab title="One-Click Auth">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit-siwe siwe
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit-siwe siwe
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit-siwe siwe
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit-siwe siwe
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Legacy">
    <Warning>For a better UX we recommend using One-Click Auth.</Warning>

    Install the AppKit SIWE package, additionally we also recommend installing [siwe](https://docs.login.xyz/) which will abstract a lot of the required logic.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit-siwe siwe
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit-siwe siwe
      ```

      ```bash Bun theme={null}
      bun a @reown/appkit-siwe siwe
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit-siwe siwe
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Configure your SIWE Client

<Tabs>
  <Tab title="One-Click Auth">
    <Note>
      If you are not using our library on the server-side, please normalize the address with eip-55 in the createMessage function. You can check our example for that Functionality.
    </Note>

    ```ts theme={null}
    import { SiweMessage } from "siwe";
    import {
      type SIWESession,
      type SIWEVerifyMessageArgs,
      type SIWECreateMessageArgs,
      createSIWEConfig,
      formatMessage,
    } from "@reown/appkit-siwe";

    const BASE_URL = "http://localhost:8080";

    /* Function that returns the user's session - this should come from your SIWE backend */
    async function getSession() {
      const res = await fetch(BASE_URL + "/session", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
      });
      if (!res.ok) {
        throw new Error("Network response was not ok");
      }

      const data = await res.json();

      const isValidData =
        typeof data === "object" &&
        typeof data.address === "string" &&
        typeof data.chainId === "number";

      return isValidData ? (data as SIWESession) : null;
    }

    /* Use your SIWE server to verify if the message and the signature are valid */
    const verifyMessage = async ({ message, signature }: SIWEVerifyMessageArgs) => {
      try {
        const response = await fetch(BASE_URL + "/verify", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          mode: "cors",
          body: JSON.stringify({ message, signature }),
          credentials: "include",
        });

        if (!response.ok) {
          return false;
        }

        const result = await response.json();
        return result === true;
      } catch (error) {
        return false;
      }
    };

    // Check the full example for signOut and getNonce functions ...

    /* Create a SIWE configuration object */
    export const siweConfig = createSIWEConfig({
      getMessageParams: async () => ({
        domain: window.location.host,
        uri: window.location.origin,
        chains: [1, 2020],
        statement: "Please sign with your account",
      }),
      createMessage: ({ address, ...args }: SIWECreateMessageArgs) =>
        formatMessage(args, address),

      getNonce: async () => {
        //This is only an example, substitute it with your actual nonce getter.
        const nonce = "YOUR_NONCE_GETTER";
        if (!nonce) {
          throw new Error("Failed to get nonce!");
        }
        return nonce;
      },
      getSession,
      verifyMessage,
      signOut: async () => {
        //Example
        // Implement your Sign out function
      },
    });
    ```

    ## Server Side

    Setting up a backend server using Express for a web application that interacts with the Siwe protocol.

    ### Routes:

    * GET '/nonce': Generates and returns a nonce (single-use random number).
    * POST '/verify': Uses the Siwe protocol to verify the message, requiring a signature (the one you are going to approve throw the UX) and a nonce stored in the session.
    * GET '/session': Retrieves the stored Siwe object from the session.
    * GET '/signout': Clears the session.

    ```ts theme={null}
    import cors from "cors";
    import express from "express";
    import Session from "express-session";
    import { generateNonce } from "siwe";
    import {
      /*verifySignature,*/
      getAddressFromMessage,
      getChainIdFromMessage,
    } from "@reown/appkit-siwe";
    import { createPublicClient, http } from "viem";

    const app = express();

    const projectId = "YOUR_PROJECT_ID";

    // configure cors and sessions
    app.use(
      cors({
        origin: "http://localhost:5173", // frontend URL
        credentials: true,
      })
    );
    app.use(express.json());
    app.use(
      Session({
        name: "siwe-quickstart",
        secret: "siwe-quickstart-secret",
        resave: true,
        saveUninitialized: true,
        cookie: { secure: false, sameSite: true },
      })
    );

    app.get("/nonce", function (_, res) {
      res.setHeader("Content-Type", "text/plain");
      res.send(generateNonce());
    });

    // verify the message
    app.post("/verify", async (req, res) => {
      try {
        if (!req.body.message) {
          return res.status(400).json({ error: "SiweMessage is undefined" });
        }

        // save the session with the address and chainId (SIWESession)
        req.session.siwe = { address, chainId };
        req.session.save(() => res.status(200).send(true));

        const message = req.body.message;
        const signature = req.body.signature;
        const address = getAddressFromMessage(message);
        let chainId = getChainIdFromMessage(message);

        // for the moment, the verifySignature is not working with social logins and emails  with non deployed smart accounts
        // for this reason we recommend using the viem to verify the signature
        const publicClient = createPublicClient({
          transport: http(
            `https://rpc.walletconnect.org/v1/?chainId=${chainId}&projectId=${projectId}`
          ),
        });
        const isValid = await publicClient.verifyMessage({
          message,
          address,
          signature,
        });
        if (!isValid) {
          // throw an error if the signature is invalid
          throw new Error("Invalid signature");
        }
        if (chainId.includes(":")) {
          chainId = chainId.split(":")[1];
        }

        // Convert chainId to a number
        chainId = Number(chainId);

        if (isNaN(chainId)) {
          throw new Error("Invalid chainId");
        }

        // save the session with the address and chainId (SIWESession)
        req.session.siwe = { address, chainId };
        req.session.save(() => res.status(200).send(true));
      } catch (e) {
        // clean the session
        req.session.siwe = null;
        req.session.nonce = null;
        req.session.save(() => res.status(500).json({ message: e.message }));
      }
    });

    /// ... check the github repository for the others endpoints

    // get the session
    app.get("/session", (req, res) => {
      res.setHeader("Content-Type", "application/json");
      res.send(req.session.siwe);
    });
    ```

    Check the github full example to see the full flow working: [siwe-quickstart](https://github.com/WalletConnect/web-examples/tree/main/dapps/appkit-siwe/react/)

    ### `verifySignature`

    Verify a SIWE signature.

    ```ts theme={null}
    import { createPublicClient, http } from "viem";

    const publicClient = createPublicClient({
      transport: http(
        `https://rpc.walletconnect.org/v1/?chainId=${chainId}&projectId=${projectId}`
      ),
    });
    const isValid = await publicClient.verifyMessage({
      message,
      address: address as `0x${string}`,
      signature: signature as `0x${string}`,
    });

    // The verifySignature is not working with social logins and emails with non deployed smart accounts
    // for this reason we recommend using the viem to verify the signature
    // import { verifySignature } from '@reown/appkit-siwe'
    // const isValid = await verifySignature({ address, message, signature, chainId, projectId })
    ```
  </Tab>

  <Tab title="Legacy">
    With help of the [siwe package](https://docs.login.xyz/sign-in-with-ethereum/quickstart-guide/implement-the-frontend) we will create the required configuration for AppKit.

    <Info>
      The nonce and verification process will be implemented in your backend. [Read more.](https://docs.login.xyz/sign-in-with-ethereum/quickstart-guide/implement-the-backend)
    </Info>

    ```ts theme={null}
    import { SiweMessage } from 'siwe'
    import type { SIWECreateMessageArgs, SIWEVerifyMessageArgs } from '@reown/appkit-siwe'

    /* Function that creates a SIWE message */
    function createMessage({ nonce, address, chainId }: SIWECreateMessageArgs){
      const message = new SiweMessage({
        version: '1',
        domain: window.location.host,
        uri: window.location.origin,
        address,
        chainId,
        nonce,
        statement: 'Sign in With Ethereum.'
      })

      return message.prepareMessage()
    }

    /* Function that returns the user's session */
    async function getSession(){
      //...
    }

    /* Use your SIWE server to verify if the message and the signature are valid */
    async function verifyMessage({ message, signature }: SIWEVerifyMessageArgs){
      try {
        const isValid = await validateMessage({ message, signature })

        return isValid
      } catch (error) {
        return false
      }
    },

    /* Create a SIWE configuration object */
    export const siweConfig = createSIWEConfig({
      createMessage,
      getNonce: async () => { //This is only an example, substitute it with your actual nonce getter.
        const nonce = "YOUR_NONCE_GETTER"
        if (!nonce) {
          throw new Error('Failed to get nonce!')
        }
        return nonce
      },
      getSession,
      verifyMessage,
      signOut: async () => { //Example
        // Implement your Sign out function
      }
    })
    ```
  </Tab>
</Tabs>

## Initialize AppKit with your `siweConfig`

```ts theme={null}
// Pass your siweConfig inside the createAppKit() function
const modal = createAppKit({
  adapters: [wagmiAdapter], //or your Ethers adapter
  projectId,
  networks: [mainnet, arbitrum],
  defaultNetwork: mainnet,
  features: {
    analytics: true, // Optional - defaults to your Cloud configuration
  },
  siweConfig: siweConfig, // pass your siweConfig
});
```

## SIWE Config Parameters

<Tabs>
  <Tab title="One-Click Auth">
    #### getMessageParams `() => Promise<{ domain: string, uri: string, chains: number[], statement: string }>`

    Parameters to create the SIWE message internally.

    #### getNonce `() => Promise<string>`

    The getNonce method functions as a safeguard against spoofing, akin to a CSRF token. The siwe package provides a generateNonce() helper, or you can utilize an existing CSRF token from your backend if available.

    #### createMessage `(args: SIWECreateMessageArgs) => string`

    The official siwe package offers a straightforward method for generating an EIP-4361-compatible message, which can subsequently be authenticated using the same package. The nonce parameter is derived from your getNonce endpoint, while the address and chainId variables are sourced from the presently connected wallet.

    #### verifyMessage `(args: SIWEVerifyMessageArgs) => Promise<boolean>`

    The function to ensure the message is valid, has not been tampered with, and has been appropriately signed by the wallet address.

    #### getSession `() => Promise<SIWESession | null>`

    The backend session should store the associated address and chainId and return it via the `getSession` method.

    #### signOut `() => Promise<boolean>`

    The users session can be destroyed calling `signOut`.

    #### onSignIn `(session?: SIWESession) => void`

    Callback when user signs in (Optional).

    #### onSignOut `() => void`

    Callback when user signs out (Optional).

    #### signOutOnDisconnect `boolean`

    * defaults to `true`

    Whether or not to sign out when the user disconnects their wallet (Optional).
  </Tab>

  <Tab title="Legacy">
    #### getNonce `() => Promise<string>`

    The getNonce method functions as a safeguard against spoofing, akin to a CSRF token. The siwe package provides a generateNonce() helper, or you can utilize an existing CSRF token from your backend if available.

    #### createMessage `(args: SIWECreateMessageArgs) => string`

    The official siwe package offers a straightforward method for generating an EIP-4361-compatible message, which can subsequently be authenticated using the same package. The nonce parameter is derived from your getNonce endpoint, while the address and chainId variables are sourced from the presently connected wallet.

    #### verifyMessage `(args: SIWEVerifyMessageArgs) => Promise<boolean>`

    The `verifyMessage` method should lean on the siwe package's new

    ```js theme={null}
    SiweMessage(message).validate(signature);
    ```

    to ensure the message is valid, has not been tampered with, and has been appropriately signed by the wallet address.

    #### getSession `() => Promise<SIWESession | null>`

    The backend session should store the associated address and chainId and return it via the `getSession` method.

    #### signOut `() => Promise<boolean>`

    The users session can be destroyed calling `signOut`.

    #### onSignIn `(session?: SIWESession) => void`

    Callback when user signs in (Optional).

    #### onSignOut `() => void`

    Callback when user signs out (Optional).

    #### signOutOnDisconnect `boolean`

    * defaults to `true`

    Whether or not to sign out when the user disconnects their wallet (Optional).
  </Tab>
</Tabs>


# SIWX
Source: https://docs.reown.com/appkit/vue/core/siwx



# Sign In With X

## Introduction

The **Sign In With X** feature enables decentralized applications (Dapps) to authenticate users seamlessly across multiple blockchain networks, such as Ethereum, Polygon or Solana. This feature allows developers using our SDK to implement authentication by having users sign a unique string message with their blockchain wallets. The **Sign In With X** feature is designed in accordance with the [CAIP-122](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-122.md) standard, which establishes a chain-agnostic framework for blockchain-based authentication and authorization on off-chain services.

<Frame>
  <img />
</Frame>

<br />

<Card title="Try Demo" href="https://appkit-lab.reown.com/appkit/?name=siwx-default" />

<br />

## Getting Started

**SIWX** works as a plugin system for AppKit and you are going to add the plugin in the AppKit configuration. There are some ways to implement the **SIWX** feature:

* Use Reown Authentication to manage the sessions in the Reown Dashboard
* Use the `DefaultSIWX` class provided by AppKit
* Create a custom implementation to suit your specific requirements.

To initialize the **SIWX** feature, you need to add the `siwx` parameter to the `createAppKit` function.

### Reown Authentication

Reown Authentication is a predefined implementation of the SIWX configuration plugin that uses the Cloud service to create and manage SIWX messages and sessions. With Reown Authentication, you will be able to see and control the sessions of your users using the Reown [Dashboard](/cloud/reown-authentication).

Read more about the [Reown Authentication Implementation](./reown-authentication).

### Custom Implementation

`DefaultSIWX` is a scaffold implementation of the SIWX feature for quick custom integration. It offers pre-built components to get the feature running quickly with some custom adjustments.
Additionally, the expected \` parameters can be configured to allow customization of the feature to suit your specific requirements.

The defined interface must follow specific rules to make sure that AppKit can interact with it correctly. Read more about how to have your [Custom Implementation](./siwx-custom).

## SIWX Expected Behavior

* **SIWX** will prompt to get the user signature and verify his identity every time a connection happen;
* In case a SIWX session is already stored, the user will be automatically signed in and the prompt step will be skipped;
* If the user changes the connected network, **SIWX** will prompt to get the user signature and verify his identity again;
* If the user disconnects from the Dapp, **SIWX** will revoke the session and the user will need to sign in again.

## Migrating from SIWE to SIWX

If you are currently already using **SIWE** from `@reown/appkit-siwe`, after AppKit version 1.5.0, you will be migrated into **SIWX**. The migration process is automatic and your `siweConfig` from `createAppKit` function will be mapped internally.

<Warning>
  It is important to note that if you cannot use `siweConfig` and `siwx` at the same time, `createAppKit` will throw an error in case this happens.

  You may replace `siweConfig` with your own `siwx` configuration manually if you would like to do so.
</Warning>


# Email & Socials
Source: https://docs.reown.com/appkit/vue/core/socials



To allow users to authenticate using their email or social accounts, you need to configure the `features` parameter in the `createAppKit` function.

<Tabs>
  <Tab title="Wagmi">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>

  <Tab title="Ethers">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "github",
          "discord",
          "apple",
          "facebook",
          "farcaster",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```

    <Note>
      AppKit with ethers v5 does not support the `auth` parameter and social logins. If you're using ethers v5, please consider upgrading to ethers v6 following this [ethers migration guide](https://docs.ethers.org/v6/migrating/) and [AppKit Docs](https://docs.walletconnect.com/appkit/overview)
    </Note>
  </Tab>

  <Tab title="Solana">
    ```ts {6-20} theme={null}
    const modal = createAppKit({
      adapters: [solanaWeb3JsAdapter],
      projectId,
      networks: [solana, solanaTestnet, solanaDevnet],
      metadata,
      features: {
        email: true, // default to true
        socials: [
          "google",
          "x",
          "discord",
          "farcaster",
          "github",
          "apple",
          "facebook",
        ],
        emailShowWallets: true, // default to true
      },
      allWallets: "SHOW", // default to SHOW
    });
    ```
  </Tab>
</Tabs>

## Options

* ***email \[boolean]*** : This boolean defines whether you want to enable email login. Default `true`
* ***socials \[array]*** : This array contains the list of social platforms that you want to enable for user authentication. The platforms in the example include Google, X, GitHub, Discord, Apple, Facebook and Farcaster. The default value of `undefined` displays everything. Set it to `false` to disable this feature. You can also pass an empty array to disable it.
* ***emailShowWallets \[boolean]*** : This boolean defines whether you want to show the wallet options on the first connect screen. If this is false and `socials` are enabled, it will show a button that directs you to a new screen displaying the wallet options. Default `true`

## User flow

1. Users will be able to connect to you application by simply using an email address. AppKit will send to them a One Time Password (OTP) to copy and paste in the modal, which will help to
   verify the user's authenticity. This will create a non-custodial wallet for your user which will be available in any application that integrates AppKit and email login.

2. Eventually the user can optionally choose to move from a non-custodial wallet to a self-custodial one by pressing "Upgrade Wallet" on AppKit.
   This will open the *([WalletConnect secure website](https://secure.walletconnect.com/dashboard))* that will walk your user through the upgrading process.

## UI Variants

AppKit SDK offers multiple UI variants to customize the user experience for the authentication process.

By configuring the `emailShowWallets` option in the `features` parameter, you can control the initial connect screen behavior:

* **`emailShowWallets: true`**: When this option is enabled, the initial connect screen will display the available wallet options directly to the user. This allows users to choose their preferred wallet immediately.

<Frame>
  <img />
</Frame>

* **`emailShowWallets: false`**: If this option is disabled, the initial connect screen will show a button instead. When the user clicks this button, they will be directed to a new screen that lists all the available wallet options. This can help simplify the initial interface and reduce visual clutter.

<Frame>
  <img />
</Frame>

By configuring the `socials` option in the `features` parameter, you can control the amount of social providers you want to show on the connect screen:

* **`socials: ['google']`**: When you only set one social provider, it will give you a button with \`connect with provider.

<Frame>
  <img />
</Frame>

* **`socials: ['google', 'discord']`**: When you set 2 social provider, it will give you 2 buttons next to each other with the logo of the social provider

<Frame>
  <img />
</Frame>

* **` socials: ['google', 'x', 'discord', 'apple', 'github']`**: When you set more than 2 social providers, the first provider in the array will get a button with `connect with provider`. The other providers will get a button with the logo of the social provider next to each other.

<Frame>
  <img />
</Frame>

* **`socials: []` or `socials: false`**: When you want to disable social logins.

<Frame>
  <img />
</Frame>

* **` email: false`**: When you want to disable email login.

<Frame>
  <img />
</Frame>

By configuring the `allWallets` option inside the `createAppKit` function, you can control whether if and when you want to display all wallets.

* **`allWallets: 'HIDE'`**: When you do not want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'SHOW'`**: When you want to display all wallets.

<Frame>
  <img />
</Frame>

* **`allWallets: 'ONLY_MOBILE'`**: When you want to display all wallets only on a mobile device.


# Theming
Source: https://docs.reown.com/appkit/vue/core/theming



The theme for the AppKit integration in your dApp can be fully customized.

## ThemeMode

By default `themeMode` option will be set to user system settings 'light' or 'dark'. But you can override it like this:

```ts theme={null}
createAppKit({
  //...
  themeMode: "light",
});
```

## themeVariables

By default `themeVariables` are undefined. You can set them like this:

```ts theme={null}
createAppKit({
  //...
  themeVariables: {
    "--apkt-color-mix": "#00BB7F",
    "--apkt-color-mix-strength": 40,
  },
});
```

The following list shows the theme variables you can override:

| Variable                      | Description                                                   | Type     |
| ----------------------------- | ------------------------------------------------------------- | -------- |
| `--apkt-font-family`          | Base font family                                              | `string` |
| `--apkt-accent`               | Color used for buttons, icons, labels, etc.                   | `string` |
| `--apkt-color-mix`            | The color that blends in with the default colors              | `string` |
| `--apkt-color-mix-strength`   | The percentage on how much "--apkt-color-mix" should blend in | `number` |
| `--apkt-font-size-master`     | The base pixel size for fonts.                                | `string` |
| `--apkt-border-radius-master` | The base border radius in pixels.                             | `string` |
| `--apkt-z-index`              | The z-index of the modal.                                     | `number` |


# Wallet Buttons
Source: https://docs.reown.com/appkit/vue/core/wallet-buttons



<Frame>
  <img />
</Frame>

Using the wallet button composable ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.

Follow these steps to use the composable:

1. Install the package:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-wallet-button
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-wallet-button
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-wallet-button
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-wallet-button
  ```
</CodeGroup>

2. Import and use in your Vue component:

```javascript theme={null}
<template>
  <div>
    <button @click="() => appKitWalletButton.connect('metamask')" :disabled="!isReady">
      Connect to MetaMask
    </button>
    <button @click="() => appKitWalletButton.connect('walletConnect')" :disabled="!isReady">
      Open QR modal
    </button>
    <button @click="() => appKitWalletButton.connect('google')" :disabled="!isReady">
      Connect to Google
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

const appKitWalletButton = createAppKitWalletButton()
const isReady = ref(false)

onMounted(() => {
  isReady.value = appKitWalletButton.isReady()
})
</script>
```

<Note>
  Make sure to call wallet button methods after `createAppKit` has been initialized.
</Note>

#### Options for wallet property

| Type          | Options                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| QR Code       | `walletConnect`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| Wallets       | `metamask`, `trust`, `coinbase`, `rainbow`, `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`, `tokenpocket`, `haha`, `ambire-wallet`, `bitpay`, `blade-wallet`, `brave`, `coinstats`, `kresus-superapp`, `plena-app`, `status`, `tomo-wallet`, `valora`, and `zengo-wallet` |
| 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                 |

#### Enhanced Multichain Examples

The wallet button now supports enhanced multichain functionality with improved namespace targeting:

```javascript theme={null}
<template>
  <div>
    <button 
      v-for="wallet in wallets" 
      :key="`${wallet.wallet}-${wallet.namespace}`"
      @click="() => connectWallet(wallet.wallet, wallet.namespace)" 
      :disabled="!isReady"
    >
      {{ wallet.label }}
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

const appKitWalletButton = createAppKitWalletButton()
const isReady = ref(false)

const connectWallet = (wallet, namespace) => {
  const walletButton = createAppKitWalletButton({ namespace })
  walletButton.connect(wallet)
}

onMounted(() => {
  isReady.value = appKitWalletButton.isReady()
})
</script>
```


# Deposit with Exchange - Vue
Source: https://docs.reown.com/appkit/vue/payments/deposit-with-exchange



<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Learn more in the WalletConnect Pay docs →](https://docs.walletconnect.com/payments/overview)
</Note>

**Deposit with Exchange** gives your users a seamless way to fund their connected wallets directly from centralized exchange accounts like Binance. Instead of forcing users to leave your app, log into their exchange, and manually handle withdrawals, you can offer a guided in-app flow that keeps them engaged and ready to transact.

## Quickstart

This feature will start working as soon as your team is on the allowed-list. Contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s) to get started.

<Warning>
  Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven't done so, please refer to the [Reown AppKit docs](/appkit/overview#quickstart).
</Warning>

Clicking on Fund your wallet will show the modal below:

<img alt="Funding your wallet with Deposit with Exchange" />

## Start Deposit with Exchange from a button

### Install the library

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-pay
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-pay
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-pay
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-pay
  ```
</CodeGroup>

### Usage

Import the `baseUSDC` asset, the `pay` function and the `useAppKitAccount` hook to get the address of the connected wallet.

```ts theme={null}

import { baseUSDC, pay } from '@reown/appkit-pay';
import { useAppKitAccount  } from '@reown/appkit/react'
```

Get the address of the connected wallet using the `useAppKitAccount` hook. You can also check if the user is connected using the `isConnected` boolean.

```ts theme={null}
const { address, isConnected } = useAppKitAccount()
```

In order to run the deposit, use the function `pay`. This function receives three values.

```ts theme={null}
// pay function returns a PaymentResult object
const result = await pay({ 
    recipient: address,
    amount: 0.0001,
    paymentAsset: baseUSDC
});

if (result.success) {
    console.log("Payment successful: "+ result.result);
} else {
    console.error("Payment error: "+ result.error);
}
```

## Supported Networks and Assets

Currently, Deposit with Exchange supports the following assets on the following networks:

**Asset -> Network**

**Binance**

* USDC -> Ethereum, Optimism, Arbitrum, Base, Polygon, Solana
* USDT -> Ethereum, Optimism, Arbitrum, Polygon, Solana
* Native Solana

For access to additional networks or assets, contact us [via our form here](https://share.hsforms.com/1_oWa8QkwRXi6oR0nZ_SIxQnxw6s).

## Assets Configuration

For the moment, AppKit Pay has pre-configured these assets:

* baseETH, baseSepoliaETH, and baseUSDC
* ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
* ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT

```ts theme={null}
import { baseETH } from '@reown/appkit-pay' 
```

For custom assets, you can create a paymentAsset object with all the information:

```ts theme={null}
// Configure the paymentAsset
const paymentAssetDetails = {
    network: 'eip155:8453', // Base Mainnet
    asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
    metadata: {
        name: 'Ethereum', // Or 'USD Coin'
        symbol: 'ETH',    // Or 'USDC'
        decimals: 18      // Or 6 for USDC
    }
};
```


# Pay with Self-Custodial Wallets - Vue
Source: https://docs.reown.com/appkit/vue/payments/pay-with-self-custodial-wallets



<Note>
  If you're looking to enable crypto payments in your online or in-person business, check out WalletConnect Pay, our all-in-one payments solution. [Learn more in the WalletConnect Pay docs →](https://docs.walletconnect.com/payments/overview)
</Note>

**Pay with Self-Custodial Wallets** lets users pay with their self-custodial wallets like MetaMask, Trust, Ledger, and more directly in-app.

## Quickstart

Here you can find a simplified process to integrate AppKit Pay:

<Warning>
  Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven't done so, please refer to the [Reown AppKit docs](/appkit/overview#quickstart).
</Warning>

## Code Example

<Card title="AppKit Pay Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-wagmi-appkit-pay">
  Check the React example
</Card>

### Install the library

<Note>
  Projects currently using Reown AppKit, or planning to use it to build custom payment flows with self-custodial wallets, should use AppKit Pay for a streamlined integration and significantly improved user experience out of the box. AppKit Pay can be found in `@reown/appkit-pay` npm package.
</Note>

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-pay
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-pay
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-pay
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-pay
  ```
</CodeGroup>

There are two main ways to handle payments:

### `pay` - Full Payment Flow

This function handles the complete payment flow — it opens the payment UI *and* waits for the result (success, failure, cancel, timeout).

```ts theme={null}
import { baseSepoliaETH, pay} from '@reown/appkit-pay'
```

In order to run the payment, use the function `pay`. This function receives three values: `recipient`, `amount`, and `paymentAsset`.

```ts theme={null}
// pay function returns a PaymentResult object
const result = await pay({ 
    recipient: addressRecipient,
    amount: 0.0001,
    paymentAsset: baseSepoliaETH
});

if (result.success) {
    console.log("Payment successful: "+ result.result);
} else {
    console.error("Payment error: "+ result.error);
}
```

### `openPay` - Open Payment UI Only

This function opens or triggers the payment UI modal but doesn't return the result of the payment. Use the hook to handle the payment result.

```ts theme={null}
import { baseSepoliaETH, openPay} from '@reown/appkit-pay'
```

Call the hook to open the payment modal.

```tsx theme={null}
    const { open: openPay, isPending, isSuccess, data, error } = usePay({
      onSuccess: handleSuccess, 
      onError: handleError,
    });
```

Open the payment modal, but onSuccess/onError handles the actual payment result:

```tsx theme={null}
      await openPay({ 
        paymentAsset: baseSepoliaETH,
        recipient: address,
        amount: 1000000000000000000 // 1 ETH
      });
```

Handle the payment result in the onSuccess/onError callbacks:

```tsx theme={null}
    const handleSuccess = (data: PaymentResult) => {
      console.log("Payment successful:", data);
    };

    const handleError = (error: AppKitPayErrorMessage) => {
      console.error("Payment error:", error);
    };
```

Or handle the payment result in the UI by displaying the payment status:

```tsx theme={null}
    {isSuccess || isPending || error && (
          <section>
            <h2>Payment Status</h2>
          {isSuccess && (
            <p>Payment successful: {data}</p>
          )}
          {isPending && (
            <p>Payment pending: {data}</p>
          )}
          {error && (
            <p>Payment error: {error}</p>
          )}
          </section>
    )}
```

## Supported Networks and Assets

For a complete list of supported networks and assets, please refer to the [Networks and Assets Supported](/appkit/payments/pay-with-self-custodial-wallets#networks-and-assets-supported) section in our Pay with Self-Custodial Wallets documentation.

## Assets Configuration

For the moment, AppKit Pay has pre-configured these assets:

* baseETH, baseSepoliaETH, and baseUSDC
* ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
* ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT

```ts theme={null}
import { baseETH } from '@reown/appkit-pay' 
```

For custom assets, you can create a paymentAsset object with all the information:

```ts theme={null}
// Configure the paymentAsset
const paymentAssetDetails = {
    network: 'eip155:8453', // Base Mainnet
    asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
    metadata: {
        name: 'Ethereum', // Or 'USD Coin'
        symbol: 'ETH',    // Or 'USDC'
        decimals: 18      // Or 6 for USDC
    }
};
```

## Prerequisites

### Enable Payments Feature in Dashboard

The "Payments" feature **must be enabled** in the [Reown Dashboard](https://dashboard.reown.com) before you can use AppKit Pay, even for local testing.

1. Go to your project in the Reown Dashboard
2. Navigate to the Payments section
3. Enable the Payments feature for your projectId

## Test locally

In order to test locally use localhost and port 3000. This is the only port available for local testing.

Add the following to your package.json file in order to run the development server on port 3000:

```json theme={null}
"scripts": {
    "dev": "vite --port 3000",
},
```

## Hooks

All the hooks must be imported from `@reown/appkit-pay/react`. For example:

```tsx theme={null}
import { useAvailableExchanges } from '@reown/appkit-pay/react';
```

### useAvailableExchanges

<Warning>
  The Pay with Exchange feature has been deprecated. The following exchange-related hooks are retained for backward compatibility only. For more details, see the [Payments FAQs](/appkit/payments/overview#payments-faqs).
</Warning>

Fetches and manages the state for available exchanges.

`useAvailableExchanges(options?: { isFetchOnInit?: boolean } & GetExchangesParams): UseAvailableExchangesReturn`

* `options`: Control initial fetch behavior.
* `returns`: `{ data, isLoading, error, fetch }`

`type GetExchangesParams= {
  page?: number
  asset?: string
  amount?: number | string
  network?: CaipNetworkId
}`

### usePayUrlActions

<Warning>
  The Pay with Exchange feature has been deprecated. This hook is retained for backward compatibility only. For more details, see the [Payments FAQs](/appkit/payments/overview#payments-faqs).
</Warning>

Provides functions (getUrl, openUrl) to interact with specific exchange URLs, returning the sessionId needed for status tracking.

`usePayUrlActions(): { getUrl, openUrl }`

* `getUrl(exchangeId, params): Promise<PayUrlResponse>`
* `openUrl(exchangeId, params, openInNewTab?): Promise<PayUrlResponse>` (Returns `{ url, sessionId }`)

### useExchangeBuyStatus

<Warning>
  The Pay with Exchange feature has been deprecated. This hook is retained for backward compatibility only. For more details, see the [Payments FAQs](/appkit/payments/overview#payments-faqs).
</Warning>

Fetches and polls for the status of a headless payment transaction using exchangeId and sessionId.

`useExchangeBuyStatus(params: UseExchangeBuyStatusParameters): UseExchangeBuyStatusReturn`

* `params`: `{ exchangeId, sessionId, pollingInterval?, isEnabled?, onSuccess?, onError? }`
* `returns`: `{ data, isLoading, error, refetch }`


# On-Ramp
Source: https://docs.reown.com/appkit/vue/transactions/onramp



# On-Ramp

AppKit seamlessly incorporates Coinbase Pay, enabling users to sign in to their Coinbase accounts and utilize fiat payment methods for purchasing cryptocurrencies.

<Note>
  On-Ramp is supported in the latest version of AppKit. If you are using an older version, make sure you upgrade.
</Note>

## Integration

The On-Ramp feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `onramp` flag to `false` in the configuration of the `createAppKit` function.

<Note>
  On-Ramp is now available on **Solana**. The configuration for On-Ramp on both EVM and Solana is the same. Please refer to the code snippet below.
</Note>

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    onramp: false // Optional - true by default
  }
})
```

## On-Ramp API

You can programmatically open the On-Ramp modal.

```
const { open } = useAppKit()

open({ view: 'OnRampProviders' })
```


# Swaps
Source: https://docs.reown.com/appkit/vue/transactions/swaps



The Swap feature allows users to exchange one cryptocurrency for another directly within the AppKit modal.
This feature is designed to provide a seamless and efficient swapping experience, leveraging our collaboration with [1inch](https://1inch.io/) as the swap provider.

## Availability

* **Requirement**: The Swap feature is available only to users who log in via email or social login. This is consistent with other wallet features such as sending tokens.
* **Transaction Fee**: Reown charges a 0.85% transaction fee on all swaps.
* **Supported Tokens**: The tokens available for swapping are limited to those supported by 1Inch. Note that the availability of tokens may vary depending on the network.
* **Network Availability**: The Swap feature is not available on Sepolia or other testnets at this time.

## How to Use

1. **Connect**: Ensure you are logged in via email or social login.
2. **Access Swap**: Navigate to the Swap feature within the account view.
3. **Select Tokens**: Choose the tokens you wish to swap from the available options.
4. **Type amount**: Enter your desired swap values. You can use the Max button to swap your all tokens or enter any specific number.
5. **See swap details**: Once you type amount value. You'll see the available quote details as received amount, network fee, maximum slippage, or price impact.
6. **Confirm Swap**: Review the swap details, including the transaction fee, and confirm the swap.

## Integration

The Swaps feature is enabled by default, so no additional configuration is required.

If you prefer to disable it, set the `swaps` flag to `false` in the configuration of the `createAppKit` function.

```ts {7} theme={null}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    swaps: false // Optional - true by default
  }
})
```

## Setting Default Tokens

You can programmatically open the Swap view with pre-selected tokens and amounts using the `open` function from the [`useAppKit`](/appkit/react/core/hooks#useappkit) hook. This allows you to customize the default swap experience for your users.

```ts theme={null}
import { useAppKit } from '@reown/appkit/react'

function Component() {
  const { open } = useAppKit()

  const openSwapWithDefaults = () => {
    open({
      view: 'Swap',
      arguments: {
        amount: '100',      // Optional: pre-fill the swap amount
        fromToken: 'USDC',  // Optional: set the token to swap from
        toToken: 'ETH'      // Optional: set the token to swap to
      }
    })
  }

  return <button onClick={openSwapWithDefaults}>Swap USDC to ETH</button>
}
```

### Parameters

* `amount` (optional): Pre-fill the amount to swap
* `fromToken` (optional): Set the default token to swap from (e.g., 'USDC', 'ETH', 'DAI')
* `toToken` (optional): Set the default token to swap to (e.g., 'ETH', 'USDC', 'USDT')

This is particularly useful when you want to guide users to swap specific tokens or create custom swap buttons for different token pairs in your application.


# Analytics
Source: https://docs.reown.com/cloud/analytics



## What is the Reown Analytics feature?

<Frame>
  <img />
</Frame>

Reown offers in-depth analytics so you can track your project's progress. Explore your users' behavior, including their origin countries, wallet providers, hours most active and more. Or dive into the details about the total number and volume of swaps and onramps you've enabled. With Reown Analytics, you have the power to make data-driven decisions to take your app to the next level.

## How to find Reown Analytics

### See your project's analytics

To access Reown Analytics for your project, follow these simple steps:

1. Log in to the [Reown Dashboard](https://dashboard.reown.com/sign-in).
2. Click on your Project.
3. Click the **Analytics** tab.
4. Pick the Analytics page you would like to view: either **User Activity**, **Swaps** or **Onramps**.

The Analytics pages show in-depth insights into your app's performance.

### See your team's Usage

To track your RPC usage or total MAUs, follow these steps:

1. Log in to the [Reown Dashboard](https://dashboard.reown.com/sign-in).
2. Select the team you want to check in the top left hand corner.
3. Click on the **Usage** tab.

The Usage tab shows your team's total RPC calls and MAUs in the past 30 days, including any overage.

## Understanding Reown Project Analytics

### User Activity

Under the **User Activity** tab, you'll find in-depth data about your users and how they are interacting with your app.

#### Total Users

The total users chart shows you how many users you've served during a specific period.

On Starter and Pro, you have access to the 7 day history. On Enterprise, you have the full history of total users, filterable by Week, Month, Quarter, Year or All time.

#### Sessions vs Wallet Connection

The sessions vs wallet connection chart shows you how many times a session was started and how many of those sessions resulted in a wallet connection.

On Starter and Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time.

<Frame>
  <img />
</Frame>

#### Total Signatures

The total signatures chart shows you the number of transaction signatures your users have made in a given period.

On Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time. (Not available on Starter plans)

<Frame>
  <img />
</Frame>

#### Active Hours

The active hours chart shows you which hours of the day your users are most active. Available on Pro and Enterprise plans. (Not available on Starter plans)

<Frame>
  <img />
</Frame>

#### Operating Systems

The operating systems chart breaks down which operating systems your users access your app from. Available on Pro and Enterprise plans. (Not available on Starter plans)

<Frame>
  <img />
</Frame>

#### Networks

The Networks chart shows you the top networks your users access your app through.

On Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time. (Not available on Starter plans)

<Frame>
  <img />
</Frame>

#### Connection Methods

The Connection methods chart shows you how users log in to your app, either via browser, mobile or QR code.

Available on Pro and Enterprise plans. (Not available on Starter plans)

<Frame>
  <img />
</Frame>

#### Social Login Providers

The social logins chart shows you your users' top social or email login methods.

Available on Pro and Enterprise plans. (Not available on Starter plans)

<Frame>
  <img />
</Frame>

#### Wallet Providers

The Wallets chart shows you which wallet providers your users are connecting to your app with. Available on Pro and Enterprise plans. (Not available on Starter plans)

<Frame>
  <img />
</Frame>

#### Top Countries

The countries chart shows you where in the world your users are connecting to your app from.

On Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time. (Not available on Starter plans)

<Frame>
  <img />
</Frame>

#### User Net Worth

The user net worth chart shows valuable insights into your high value users, categorizing them by their onchain wealth. The data can be filtered by token holdings and network to surface which assets your highest value users hold and where.

Available on Enterprise plans. (Not available on Starter or Pro plans)

<Frame>
  <img />
</Frame>

#### Wallet Intelligence

Wallet Intelligence gives you valuable insights into each of your individual users' behavior, activity, authentication status, holdings and more.

Filter connected users by:

* **Country** – to gain deeper geographical insights
* **Net worth segment** – to identify and research your whales and high-value users
* **Authentication status** – to understand which method of authentication specific users choose

Plus, gain insights on each connected user including:

* Their token holdings
* The networks they hold tokens on
* The wallets they use to connect
* A blockchain explorer link for further insights

Available on Enterprise plans only. (Not available on Starter or Pro plans)

<Frame>
  <img />
</Frame>

#### App Co-usage

The App co-usage chart gives valuable insights into the other apps your audience uses.

Available on Enterprise plans. (Not available on Starter or Pro plans) **COMING SOON!**

### Swaps

Under the **Swaps** tab, you'll find information about how your users are swapping crypto in your app.

#### Total Swaps

The total swaps chart shows you the total number of swaps your app has facilitated in a given period.

On Starter and Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time.

<Frame>
  <img />
</Frame>

#### Swap Volume

The swap volume chart shows you the volume generated in your app via swaps for a given period.

On Starter and Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time.

<Frame>
  <img />
</Frame>

#### Swap Pairs

The swap pairs chart shows you the top cryptocurrencies users are swapping to and from in a given period.

On Starter and Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time.

<Frame>
  <img />
</Frame>

#### Swap Countries

The swap countries chart shows you the top countries your users are swapping from in a given period.

On Starter and Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time.

<Frame>
  <img />
</Frame>

### Onramp

Under the **Onramp** tab, you'll find information about how your users are buying crypto in your app.

#### Total Onramps

The total onramps chart shows you the total number of onramps your app has facilitated in a given period.

On Starter and Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time.

<Frame>
  <img />
</Frame>

#### Onramp Volume

The onramp volume chart shows you the volume generated in your app via onramps for a given period.

On Starter and Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time.

<Frame>
  <img />
</Frame>

#### Onramp Currencies

The onramp currencies chart shows you the top currencies your users are buying in a given period.

On Starter and Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time.

<Frame>
  <img />
</Frame>

#### Onramp Countries

The onramp countries chart shows you the top countries your users are buying crypto from in a given period.

On Starter and Pro, you have access to the 7 day history. On Enterprise, you have the full history, filterable by Week, Month, Quarter, Year or All time.

<Frame>
  <img />
</Frame>


# Dashboard Configuration Settings
Source: https://docs.reown.com/cloud/dashboard-configuration-settings



The Reown Dashboard's configuration page allows you to manage your project's settings and enabled features.

## Feature Toggles

Feature toggles allow you to turn specific features on and off. There are several feature toggles split into 4 categories:

* [Accounts & Authentication](#accounts-&-authentication)
* [Payments, Deposits & Swaps](#payments-deposits-&-swaps)
* [Tracking](#tracking)
* [Customization](#customization)

### Accounts & Authentication

#### Social & Email Logins

Enable non-crypto [logins via social accounts or email](/appkit/authentication/socials), including email, Google, X, Discord, Farcaster, Github, Apple & Facebook. Flip the toggle on, choose as many or as few as you like and press "Apply" to register your changes.

<Frame>
  <img />
</Frame>

#### Reown Authentication

Enable authentication via Sign in with Ethereum ([SIWE](/appkit/authentication/one-click-auth)) or multichain auth ([SIWX](/appkit/authentication/siwx/default)) so you can allow logins with 500+ crypto wallets via the WalletConnect network. Flip the toggle on and press "Apply" to register your changes.

<Frame>
  <img />
</Frame>

#### Multi Wallet

Turn on [Multi Wallet Linking](/appkit/features/multiwallet-linking) to allow your users to connect multiple wallets to your app in a single session. Flip on the toggle and press "Apply" to register the changes.

<Frame>
  <img />
</Frame>

### Payments, Deposits & Swaps

#### Onramp

Turn on the [onramp feature](/appkit/features/onramp) to allow your users to buy crypto with fiat currencies (such as Dollars or Euros) directly in app. Flip the toggle on, choose your provider, and press "Apply" to register the changes.

<Frame>
  <img />
</Frame>

#### Swaps

Turn on the [swap feature](/appkit/features/swaps) to allow your users to make crypto to crypto swaps (such as ETH to POL) directly in app. Flip the toggle on, choose your provider, and press "Apply" to register the changes.

<Frame>
  <img />
</Frame>

#### Deposit with Exchange

Turn on the [Deposit with Exchange](/appkit/payments/deposit-with-exchange) toggle to enable in-app wallet top-ups via exchange wallets. Flip the toggle on and press "Apply" to register your changes.

<Frame>
  <img />
</Frame>

#### Payments

Accept payments in your app, either from exchanges or wallets with the Payments toggle. This allows you to set a fee recipient address, which is the wallet address you'd like to receive funds raised from transaction fees, and a refund address, which is used to return funds if a payment fails. To enable it, turn the toggle on, enter a Fee recipient address and a refund address, then click "Apply" to register your changes.

<Frame>
  <img />
</Frame>

### Tracking

#### Event Tracking

Event tracking allows you to track user interactions inside the connect wallet modal. This includes data such as wallet providers, wallet addresses and more, which will be surfaced in your [Reown Dashboard's Analytics](/cloud/analytics) tab. Turn on the toggle and press "Apply" to register your changes.

<Frame>
  <img />
</Frame>

#### Activity

The activity toggle allows your users to see the history of their own transactions within your app. Turn on the toggle and press "Apply" to register your changes.

<Frame>
  <img />
</Frame>

### Customization

#### Headless

Enable Headless to completely customize the connect wallet modal instead of using Reown's pre-built UI. Turn on the toggle and press "Apply" to register your changes.

<Frame>
  <img />
</Frame>

#### Remove Reown Branding

Remove Reown Branding toggle allows you to disable the "UX by Reown" text displayed at the bottom of your modal. Turn on the toggle and press "Apply" to register your changes.

<Frame>
  <img />
</Frame>

## Other Configuration Settings

### Domain Verification

Domain verification lets you link your domain to your Reown project to ensure only your domain can access your project. To turn it on, scroll to the bottom half of the configuration page to find the "Domain" heading, then click the blue "+ Domain" button, type in or copy paste your domain in the input field and click "Allowlist" to register your changes.

<Frame>
  <img />
</Frame>

<Frame>
  <img />
</Frame>

### App ID

App ID lets you whitelist your iOS Bundle ID and Android Package Name to protect your project from impersonation. To turn it on, scroll to the bottom half of the configuration page to find the "App ID" heading, then click the blue "+ App ID" button, choose your platform (either Android or iOS), type in or copy paste your App ID in the input field and click "Add" to register your changes.

<Frame>
  <img />
</Frame>

<Frame>
  <img />
</Frame>

### Secret

Use the Secret section to securely generate and store API keys. Choose Dashboard API to generate a secret key that can programmatically manage projects and origin allowlists, or choose AppKit Auth API to generate a secret key that exposes your authenticated users that connect to your app via our hosted SIWX server. To turn it on, scroll to the bottom of the configuration page to find the "Secret" heading, then click the blue "+ Secret" button, name your secret, choose which API you want to generate a secret for and click "Add" to register your changes.

<Frame>
  <img />
</Frame>

<Frame>
  <img />
</Frame>


# System Status
Source: https://docs.reown.com/external-link-01