WalletConnect

https://docs.walletconnect.network/
Admin
WalletConnect is a connectivity layer for the financial internet (Web3) that enables secure...
Tokens:77,678
Snippets:420
Trust Score:9.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Additional Dependencies for WalletKit

Source: https://docs.walletconnect.network/wallet-sdk/react-native/installation

Installs essential packages for async storage, network information, random value generation, and text encoding, which are required by WalletKit.

```sh
yarn add @react-native-async-storage/async-storage @react-native-community/netinfo react-native-get-random-values fast-text-encoding
```

--------------------------------

### Expo Additional Setup for WalletKit

Source: https://docs.walletconnect.network/wallet-sdk/react-native/installation

Installs the 'expo-application' package, which is an additional setup requirement for projects using Expo with WalletKit.

```sh
npx expo install expo-application
```

--------------------------------

### Install WalletConnect App SDK Packages (Bun)

Source: https://docs.walletconnect.network/app-sdk/next/installation

Installs the WalletConnect App SDK and ethers dependencies using the Bun package manager. Bun offers a fast alternative for JavaScript package installation.

```bash
bun add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
```

--------------------------------

### Install WalletKit and React Native Compat

Source: https://docs.walletconnect.network/wallet-sdk/react-native/installation

Installs the core WalletKit package and the WalletConnect React Native compatibility layer using Yarn.

```sh
yarn add @reown/walletkit @walletconnect/react-native-compat
```

--------------------------------

### Install WalletConnect App SDK Packages (pnpm)

Source: https://docs.walletconnect.network/app-sdk/next/installation

Installs the WalletConnect App SDK and ethers using pnpm. pnpm is known for its efficient disk space usage and fast installation times.

```bash
pnpm add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
```

--------------------------------

### Install WalletConnect App SDK Packages (npm)

Source: https://docs.walletconnect.network/app-sdk/next/installation

Installs the necessary WalletConnect App SDK packages and the ethers library using npm. This command ensures all required components for blockchain integration are available in your project.

```bash
npm install @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
```

--------------------------------

### Install WalletConnect App SDK Packages (Yarn)

Source: https://docs.walletconnect.network/app-sdk/next/installation

Installs the WalletConnect App SDK packages and ethers using Yarn. This is an alternative to npm for managing project dependencies.

```bash
yarn add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
```

--------------------------------

### Setup UniversalConnector in Main Application File (TypeScript)

Source: https://docs.walletconnect.network/app-sdk/javascript/installation

Sets up the UniversalConnector instance in the main JavaScript file by importing the `getUniversalConnector` function and calling it asynchronously. It also includes logic to retrieve an existing session if one is already established.

```typescript
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()
```

--------------------------------

### Interact with Smart Contracts using Ethers (React)

Source: https://docs.walletconnect.network/app-sdk/javascript/installation

Demonstrates smart contract interaction using the Ethers.js library within a React application. This example shows how to get a user's USDT balance. It requires Ethers.js and specific React hooks from '@reown/appkit/react'.

```tsx
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>;
}
```

--------------------------------

### Install Typescript Dev Dependencies for WalletKit

Source: https://docs.walletconnect.network/wallet-sdk/react-native/installation

Adds the '@walletconnect/jsonrpc-types' package as a development dependency for projects utilizing Typescript with WalletKit.

```sh
yarn add @walletconnect/jsonrpc-types --dev
```

--------------------------------

### Install WalletConnect SDK with Package Managers

Source: https://docs.walletconnect.network/wallet-sdk/web/installation

Installs the WalletConnect SDK and its utility libraries using npm, yarn, bun, or pnpm. Ensure you have one of these package managers installed. These commands add the necessary dependencies to your project's package file.

```bash
npm install @reown/walletkit @walletconnect/utils @walletconnect/core
```

```bash
yarn add @reown/walletkit @walletconnect/utils @walletconnect/core
```

```bash
bun add @reown/walletkit @walletconnect/utils @walletconnect/core
```

```bash
pnpm add @reown/walletkit @walletconnect/utils @walletconnect/core
```

--------------------------------

### Interact with Solana Smart Contracts using @solana/web3.js (React)

Source: https://docs.walletconnect.network/app-sdk/javascript/installation

Provides an example of interacting with smart contracts on the Solana blockchain using the `@solana/web3.js` library within a React context. This function demonstrates creating an account, incrementing a counter, and verifying the result. It requires `@solana/web3.js` and specific React hooks from '@reown/appkit/react'.

```tsx
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')
  }
}
```

--------------------------------

### Approve Session Using Required Namespaces in C#

Source: https://docs.walletconnect.network/wallet-sdk/c-sharp/usage

Shows how to automatically construct approved namespaces from the required namespaces provided in a session proposal. It includes an example of adding a specific account to the generated namespaces.

```csharp
sdk.SessionProposed += async (sender, @event) =>
{
    var proposal = @event.Proposal;
    var requiredNamespaces = proposal.RequiredNamespaces;
    var approvedNamespaces = new Namespaces(requiredNamespaces);
    approvedNamespaces["eip155"].WithAccount("eip155:1:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb");
};
```

--------------------------------

### Install WalletConnect App SDK Packages (npm, Yarn, Bun, pnpm)

Source: https://docs.walletconnect.network/app-sdk/javascript/installation

Installs the necessary WalletConnect App SDK packages and the ethers library for JavaScript applications. These commands are compatible with npm, Yarn, Bun, and pnpm package managers.

```bash
npm install @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
```

```bash
yarn add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
```

```bash
bun add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
```

```bash
pnpm add @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers
```

--------------------------------

### Initialize WalletKit Client in C#

Source: https://docs.walletconnect.network/wallet-sdk/c-sharp/usage

Initializes the WalletKit client by setting up a Core instance with project and app details, followed by defining wallet metadata and then initializing the WalletKitClient.

```csharp
var options = new CoreOptions()
{
    ProjectId = "...",
    Name = "my-app",
}

var core = new CoreClient(options);

var metadata = new Metadata()
{
    Description = "An example wallet to showcase Wallet SDK",
    Icons = new[] { "https://walletconnect.com/meta/favicon.ico" },
    Name = $"wallet-csharp-test",
    Url = "https://walletconnect.com",
};

var sdk = await WalletKitClient.Init(core, metadata, metadata.Name);
```

--------------------------------

### Initialize UniversalConnector for Blockchain Integration (TypeScript)

Source: https://docs.walletconnect.network/app-sdk/javascript/installation

Initializes the UniversalConnector with a project ID and metadata, configuring support for specific blockchain networks like Sui and Stacks. This setup allows for a unified interface to interact with different blockchain protocols, requiring environment variables for the project ID and defining network configurations.

```typescript
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
}
```

--------------------------------

### Install WalletConnect SDK with Cocoapods

Source: https://docs.walletconnect.network/wallet-sdk/ios/installation

This snippet shows how to add the WalletConnect SDK to your project using Cocoapods. It includes the basic pod installation command and an example for specifying a git repository and tag for a specific version.

```ruby
pod 'reown-swift'
```

```ruby
pod 'reown-swift', :git => 'https://github.com/reown-com/reown-swift.git', :tag => '1.0.0'
```

--------------------------------

### React Native Compatibility Polyfills

Source: https://docs.walletconnect.network/wallet-sdk/react-native/usage

Ensures proper React Native polyfills by installing and importing `@walletconnect/react-native-compat` before any other `@reown/*` dependencies. This is crucial for React Native environments.

```typescript
import "@walletconnect/react-native-compat";
// Other imports
```

--------------------------------

### Add jitpack.io Repository (Gradle)

Source: https://docs.walletconnect.network/wallet-sdk/android/installation

Adds the jitpack.io Maven repository to the root build.gradle.kts file. This repository is necessary to include third-party libraries like WalletKit.

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

--------------------------------

### Manage .NET Packages using CLI

Source: https://docs.walletconnect.network/wallet-sdk/upgrade/from-web3wallet-unity

This example demonstrates how to manage NuGet packages using the .NET CLI. It shows commands to remove the older WalletConnect.Web3Wallet package and add the new Reown.WalletKit package to your project.

```bash
# Remove the old package
dotnet remove package WalletConnect.Web3Wallet

# Add the new package
dotnet add package Reown.WalletKit
```

--------------------------------

### Interact with Smart Contracts using Wagmi Hooks (React)

Source: https://docs.walletconnect.network/app-sdk/javascript/installation

Utilizes Wagmi hooks to interact with wallets and smart contracts. This example demonstrates reading the total supply of a USDT contract. It requires the Wagmi library and ABI definitions.

```tsx
import { useReadContract } from "wagmi";
import { USDTAbi } from "../abi/USDTAbi";

const USDTAddress = "0x...";

function App() {
  const result = useReadContract({
    abi: USDTAbi,
    address: USDTAddress,
    functionName: "totalSupply",
  });
}
```

--------------------------------

### Include WalletKit Dependencies (Gradle)

Source: https://docs.walletconnect.network/wallet-sdk/android/installation

Adds the WalletKit core and SDK dependencies to the app's build.gradle.kts file. Ensure 'release_version' is replaced with the actual version number.

```gradle
implementation("com.reown:android-core:release_version")
implementation("com.reown:walletkit:release_version")
```

--------------------------------

### Calculate Stake Weight - Example

Source: https://docs.walletconnect.network/wct-staking

Demonstrates the calculation of stake weight using a specific example. It shows how staking 1000 WCT with a 40-week lock time results in a particular stakeweight value based on the provided formula.

```plaintext
Stakeweight = (1000 * 40) / 209 = 191.3
```

--------------------------------

### Initialize WalletKit Client with Core

Source: https://docs.walletconnect.network/wallet-sdk/react-native/usage

Initializes the WalletKit client by creating a Core instance with a project ID and then initializing WalletKit with app metadata. The `pair` function is used to establish a connection between the dapp and the wallet.

```javascript
import { Core } from "@walletconnect/core";
import { WalletKit } from "@reown/walletkit";

const core = new Core({
  projectId: process.env.PROJECT_ID,
});

const walletKit = await WalletKit.init({
  core, // <- pass the shared `core` instance
  metadata: {
    name: "Demo React Native Wallet",
    description: "Demo RN Wallet to interface with Dapps",
    url: "www.walletconnect.com",
    icons: ["https://your_wallet_icon.png"],
    redirect: {
      native: "yourwalletscheme://",
    },
  },
});
```

--------------------------------

### Update Imports: Web3Wallet to WalletKit

Source: https://docs.walletconnect.network/wallet-sdk/upgrade/from-web3wallet-android

This code example demonstrates how to update the import statements in your Android application code to reflect the migration from Web3Wallet to WalletKit. All package references starting with `com.walletconnect.android` or `com.walletconnect.web3.wallet` need to be changed to `com.reown.android` and `com.reown.walletkit` respectively.

```kotlin
import com.reown.android.*
import com.reown.walletkit.*
```

--------------------------------

### Interact with Solana Program using Solana/web3.js

Source: https://docs.walletconnect.network/app-sdk/vue/installation

This snippet demonstrates how to interact with a smart contract (program) on the Solana blockchain using the @solana/web3.js library. It includes creating an account, initializing a transaction, and sending it for signing and execution. Requires sufficient SOL in the wallet.

```tsx
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, {

```

--------------------------------

### Configure Universal Connector for WalletConnect (TypeScript/React)

Source: https://docs.walletconnect.network/app-sdk/next/installation

Sets up a singleton instance of the UniversalConnector from WalletConnect App SDK. It requires a projectId and defines custom network configurations, such as Sui Mainnet, for integration. This configuration is essential for initializing the connector and managing blockchain connections.

```tsx
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 const networks = [suiMainnet] as [AppKitNetwork, ...AppKitNetwork[]]

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
}
```

--------------------------------

### Pairing a WalletConnect Session URI in C#

Source: https://docs.walletconnect.network/wallet-sdk/c-sharp/usage

This C# code demonstrates how to pair an incoming session using a session's URI. Pairing allows the wallet to obtain the connection proposal for approval or denial.

```csharp
var uri = "...";
await sdk.Pair(uri);
```

--------------------------------

### Session Request Handling

Source: https://docs.walletconnect.network/wallet-sdk/best-practices

This section details how to respond to session requests initiated by a dapp and handle potential errors. It includes code examples for Web, React Native, iOS, and Android.

```APIDOC
## Respond to Session Request

### Description
This endpoint allows a wallet to respond to a session request sent by a dapp. It's crucial to display a loading indicator until Relay acknowledgement is received.

### Method
This is a client-side operation, not a direct HTTP endpoint. The `respondSessionRequest` function is called.

### Endpoint
N/A (Client-side function call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **params** (object) - Required - Parameters for responding to the session request. The exact structure depends on the SDK implementation.

### Request Example
```typescript
// Example for Web/React Native
await walletKit.respondSessionRequest(params);

// Example for iOS
WalletKit.instance.respond(requestId: request.id, signature: signature, from: account)

// Example for Android
WalletKit.respondSessionRequest(Wallet.Params.SessionRequestResponse, ...)
```

### Response
#### Success Response
- **UI Update**: Remove loading indicator.

#### Response Example
N/A (Client-side operation)

### Expected Errors
- **Invalid session**: Occurs if approving/rejecting on an expired session.
- **Session request expired**: Occurs if approving/rejecting an already expired request.
- **Timeout**: Occurs if Relay doesn't acknowledge session settle within 10 seconds.
```

--------------------------------

### Initialize and Manage WalletConnect Session (React)

Source: https://docs.walletconnect.network/app-sdk/next/installation

Initializes the Universal Connector on component mount and manages the session state in a React application. It includes effects to set the connector and update the session when it changes, providing the foundation for user interaction with WalletConnect.

```tsx
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])
```

--------------------------------

### Configure ProGuard Rules (Proguard)

Source: https://docs.walletconnect.network/wallet-sdk/android/installation

Specifies ProGuard rules to prevent minification issues with the WalletKit SDK and its dependencies like JNA and UniFFI. These rules ensure that necessary classes and members are preserved during the build process.

```proguard
-keepattributes *Annotation*

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

-keep class uniffi.** { *; }

# Preserve all public and protected fields and methods
-keepclassmembers class ** {
    public *;
    protected *;
}

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

--------------------------------

### Default EVM Methods and Events

Source: https://docs.walletconnect.network/wallet-sdk/react-native/usage

Lists the default Ethereum methods and events supported by the `@walletconnect/ethereum-provider`, WalletConnect's abstracted EVM SDK for applications.

```typescript
{
  //...
  methods: [
    "eth_accounts",
    "eth_requestAccounts",
    "eth_sendRawTransaction",
    "eth_sign",
    "eth_signTransaction",
    "eth_signTypedData",
    "eth_signTypedData_v3",
    "eth_signTypedData_v4",
    "eth_sendTransaction",
    "personal_sign",
    "wallet_switchEthereumChain",
    "wallet_addEthereumChain",
    "wallet_getPermissions",
    "wallet_requestPermissions",
    "wallet_registerOnboarding",
    "wallet_watchAsset",
    "wallet_scanQRCode",
    "wallet_sendCalls",
    "wallet_getCallsStatus",
    "wallet_showCallsStatus",
    "wallet_getCapabilities",
  ],
  events: [
    "chainChanged",
    "accountsChanged",
    "message",
    "disconnect",
    "connect",
  ]
}

```

--------------------------------

### Wallet Supports Multiple Namespaces

Source: https://docs.walletconnect.network/wallet-sdk/react-native/usage

Illustrates how to configure the `supportedNamespaces` object when a wallet supports multiple namespaces, such as 'eip155', 'cosmos', and 'near', for use with the `buildApprovedNamespaces` utility.

```javascript
// ------- namespaces builder util ------------ //
const approvedNamespaces = buildApprovedNamespaces({
    proposal: params,
    supportedNamespaces: {
        eip155: {...},
        cosmos: {...},
        near: {...}
    },
});
// ------- end namespaces builder util ------------ //

```

--------------------------------

### wallet_getCapabilities Response (JSON)

Source: https://docs.walletconnect.network/wallet-sdk/flutter/eip5792

Example JSON response from a wallet for the `wallet_getCapabilities` method, detailing supported capabilities organized by chain ID, following EIP-5792.

```json
{
  "id": 1,
  "jsonrpc": "2.0",
  "result": {
    "0x2105": {
      "atomic": {
        "status": "supported"
      }
    },
    "0x14A34": {
      "atomic": {
        "status": "unsupported"
      }
    }
  }
}
```

--------------------------------

### Add JITPack URL to Android build.gradle

Source: https://docs.walletconnect.network/wallet-sdk/flutter/installation

This snippet shows how to add the JITPack repository URL to your Android project's build.gradle file to support external libraries. Ensure this is included within the `allprojects` block.

```gradle
allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' } // <- add jipack url
    }
}
```

--------------------------------

### Approving a WalletConnect Session with Specific Namespaces in C#

Source: https://docs.walletconnect.network/wallet-sdk/c-sharp/usage

This C# code shows how a wallet can approve a session proposal by constructing approved Namespaces. It includes setting specific accounts for the 'eip155' namespace and is triggered by the `SessionProposed` event.

```csharp
sdk.SessionProposed += async (sender, @event) =>
{
    var proposal = @event.Proposal;
    var requiredNamespaces = proposal.RequiredNamespaces;
    var approvedNamespaces = new Namespaces(requiredNamespaces);
    approvedNamespaces["eip155"].WithAccount("eip155:1:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb");

    var sessionData = await sdk.ApproveSession(proposal.Id, approvedNamespaces);
    var sessionTopic = sessionData.Topic;
};
```

--------------------------------

### Supported EVM Methods and Events in @walletconnect/ethereum-provider

Source: https://docs.walletconnect.network/wallet-sdk/c-sharp/usage

This snippet lists the default supported Ethereum methods and events provided by the @walletconnect/ethereum-provider SDK. It is used by applications to interact with the Ethereum network through WalletConnect.

```typescript
{
  //...
  methods: [
    "eth_accounts",
    "eth_requestAccounts",
    "eth_sendRawTransaction",
    "eth_sign",
    "eth_signTransaction",
    "eth_signTypedData",
    "eth_signTypedData_v3",
    "eth_signTypedData_v4",
    "eth_sendTransaction",
    "personal_sign",
    "wallet_switchEthereumChain",
    "wallet_addEthereumChain",
    "wallet_getPermissions",
    "wallet_requestPermissions",
    "wallet_registerOnboarding",
    "wallet_watchAsset",
    "wallet_scanQRCode",
    "wallet_sendCalls",
    "wallet_getCallsStatus",
    "wallet_showCallsStatus",
    "wallet_getCapabilities",
  ],
  events: [
    "chainChanged",
    "accountsChanged",
    "message",
    "disconnect",
    "connect",
  ]
}
```

--------------------------------

### Trigger WalletConnect Modal with TypeScript/JavaScript

Source: https://docs.walletconnect.network/app-sdk/javascript/installation

This snippet demonstrates how to trigger the WalletConnect modal by calling the `connect` function from the `universalConnector`. It handles the connection process and extracts the user's address for SUI and Stacks blockchains from the returned session. This requires the `universalConnector` instance to be available.

```tsx
<script>
    let address = null
    let addressStacks = null
    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()
      // get the address from the session
      if (providerSession?.namespaces?.sui?.accounts?.[0]?.split(':')[2]) {
        address = providerSession?.namespaces?.sui?.accounts?.[0]?.split(':')[2]
      } else if (providerSession?.namespaces?.stacks?.accounts?.[0]?.split(':')[2]) {
        addressStacks = providerSession?.namespaces?.stacks?.accounts?.[0]?.split(':')[2]
      }
      // update the session
      session = providerSession;
    }

    document.getElementById('open-connect-modal').addEventListener('click', handleConnect);
</script>

<div> 
  <button id="open-connect-modal">Open AppKit Core</button>
</div>
```

--------------------------------

### Namespace Builder Utility Parameters

Source: https://docs.walletconnect.network/wallet-sdk/react-native/usage

Defines the parameters required by the Namespace Builder utility. It takes the session proposal and the wallet's supported namespaces (chains, methods, events, accounts) to construct ready-to-use namespace objects for WalletConnect sessions.

```typescript
// util params
{
  proposal: ProposalTypes.Struct; // the proposal received by ".on(\"session_proposal\")"
  supportedNamespaces: Record<
    string, // the supported namespace key e.g. eip155
    {
      chains: string[]; // your supported chains in CAIP-2 format e.g. ["eip155:1", "eip155:2", ...]
      methods: string[]; // your supported methods e.g. ["personal_sign", "eth_sendTransaction"]
      events: string[]; // your supported events e.g. ["chainChanged", "accountsChanged"]
      accounts: string[] // your user's accounts in CAIP-10 format e.g. ["eip155:1:0x453d506b1543dcA64f57Ce6e7Bb048466e85e228"]
    }
  >;
};

```

--------------------------------

### Rejecting a WalletConnect Session Proposal in C#

Source: https://docs.walletconnect.network/wallet-sdk/c-sharp/usage

This C# code demonstrates how a wallet can reject an incoming session proposal. The `RejectSession` method is called with the proposal details and a reason for rejection.

```csharp
sdk.SessionProposed += async (sender, @event) =>
{
    var proposal = @event.Proposal;
    await sdk.RejectSession(proposal, "User rejected");
};
```

--------------------------------

### Build Approved Namespaces for WalletConnect Session

Source: https://docs.walletconnect.network/wallet-sdk/react-native/usage

Demonstrates how to use the `buildApprovedNamespaces` utility from `@walletconnect/utils` to process a session proposal. It configures the wallet's supported chains, methods, events, and accounts for specific namespaces like 'eip155'.

```javascript
// import the builder util
import { WalletKit, WalletKitTypes } from '@reown/walletkit'
import { buildApprovedNamespaces, getSdkError } from '@walletconnect/utils'

async function onSessionProposal({ id, params }: WalletKitTypes.SessionProposal){
  try{
    // ------- namespaces builder util ------------ //
    const approvedNamespaces = buildApprovedNamespaces({
      proposal: params,
      supportedNamespaces: {
        eip155: {
          chains: ['eip155:1', 'eip155:137'],
          methods: ['eth_sendTransaction', 'personal_sign'],
          events: ['accountsChanged', 'chainChanged'],
          accounts: [
            'eip155:1:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb',
            'eip155:137:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb'
          ]
        }
      }
    })
    // ------- end namespaces builder util ------------ //

    const session = await walletKit.approveSession({
      id,
      namespaces: approvedNamespaces
    })
  }catch(error){
    // use the error.message to show toast/info-box letting the user know that the connection attempt was unsuccessful
   ....

    await walletKit.rejectSession({
      id: proposal.id,
      reason: getSdkError("USER_REJECTED")
    })
  }
}


walletKit.on('session_proposal', onSessionProposal)

```

--------------------------------

### Create Expo Wallet with Wallet SDK (Bash)

Source: https://docs.walletconnect.network/wallet-sdk/react-native/resources

This command initiates the creation of a new Expo project pre-configured with the Wallet SDK. It downloads an Expo template that includes the necessary Wallet SDK packages for React Native development. Ensure you have Node.js and npm/yarn installed.

```bash
npx create-wc-wallet-expo@latest newWallet
```

--------------------------------

### Approving a WalletConnect Session with Account Addresses in C#

Source: https://docs.walletconnect.network/wallet-sdk/c-sharp/usage

This C# code demonstrates approving a session proposal by providing an array of account addresses. The SDK automatically creates the approved Namespaces for the specified accounts, but it will not approve optional namespaces.

```csharp
sdk.SessionProposed += async (sender, @event) =>
{
    var proposal = @event.Proposal;

    var sessionData = await sdk.ApproveSession(proposal, new[] { "eip155:1:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb" });
    var sessionTopic = sessionData.Topic;
};
```

--------------------------------

### Isolate Core Instances for Testing (Custom Storage Prefix)

Source: https://docs.walletconnect.network/wallet-sdk/react-native/usage

Demonstrates how to create isolated Core instances for parallel testing scenarios by using a unique `customStoragePrefix`. This prevents interference between tests by ensuring each instance uses its own storage. Not recommended for production.

```javascript
const core = new Core({
  projectId: process.env.PROJECT_ID,
  customStoragePrefix: `test-${Date.now()}`, // Unique prefix for each test
});
```

--------------------------------

### Get ERC-20 Token Balance with Ethers

Source: https://docs.walletconnect.network/app-sdk/vue/installation

This snippet shows how to fetch an ERC-20 token balance for a user using the Ethers.js library. It involves creating a provider, getting a signer, instantiating a contract object, and calling the balanceOf function. The balance is returned as a formatted string.

```typescript
import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/vue";
import { BrowserProvider, Contract, formatUnits } from "ethers";

const USDTAddress = "0x617f3112bf5397D0467D315cC709EF968D9ba546";

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();
    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>;
}
```

--------------------------------

### Get Active Wallet Sessions

Source: https://docs.walletconnect.network/wallet-sdk/react-native/usage

Shows how to retrieve a list of all currently active sessions managed by the WalletKit instance using the `getActiveSessions` function.

```javascript
const activeSessions = walletKit.getActiveSessions();

```

--------------------------------

### Initialize WalletKit Client with Core Instance

Source: https://docs.walletconnect.network/wallet-sdk/web/usage

Initializes the WalletKit client by creating a Core instance with a project ID and then initializing WalletKit with the Core instance and application metadata. Ensure the `core` instance is shared globally for optimal resource usage, especially in React applications.

```javascript
import { Core } from "@walletconnect/core";
import { WalletKit } from "@reown/walletkit";

const core = new Core({
  projectId: process.env.PROJECT_ID,
});

const walletKit = await WalletKit.init({
  core, // <- pass the shared `core` instance
  metadata: {
    name: "Demo app",
    description: "Demo Client as Wallet/Peer",
    url: "https://reown.com/walletkit",
    icons: [],
  },
});
```

--------------------------------

### Build Namespaces for Session in C# (Constructor & Builder)

Source: https://docs.walletconnect.network/wallet-sdk/c-sharp/usage

Demonstrates two methods for building the Namespaces object required for session approval or proposal: directly using C# constructors and utilizing a fluent builder pattern. This object defines supported chains, accounts, methods, and events.

```csharp
var TestNamespaces = new Namespaces()
{
    {
        "eip155", new Namespace()
            {
                Accounts = new [] { "eip155:1:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb" },
                Chains = new []{ "eip155:1" },
                Methods = new[] { "eth_signTransaction" },
                Events = new[] { "chainChanged" }
            }
    },
};

var TestNamespaces = new Namespaces()
  .WithNamespace("eip155", new Namespace()
      .WithChain("eip155:1")
      .WithMethod("eth_signTransaction")
      .WithEvent("chainChanged")
      .WithAccount("eip155:1:0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb")
  );
```

--------------------------------

### Configure Universal Connector for WalletConnect (TypeScript)

Source: https://docs.walletconnect.network/app-sdk/vue/installation

Set up a singleton instance for the Universal Connector by defining custom network configurations for different blockchains like Sui and Stacks. This involves importing necessary types and classes, fetching the project ID, and initializing the connector with metadata and supported networks.

```typescript
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

if (!projectId) {
  throw new Error('Project ID is not defined')
}

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'] } }
}

const stacksMainnet: CustomCaipNetwork<'stacks'> = {
  id: 1,
  chainNamespace: 'stacks' as const,
  caipNetworkId: 'stacks:1',
  name: 'Stacks',
  nativeCurrency: { name: 'STX', symbol: 'STX', decimals: 6 },
  rpcUrls: { default: { http: ['https://stacks-node-mainnet.stacks.co'] } }
}

// for custom networks visit -> https://docs.reown.com/appkit/react/core/custom-networks
export const networks = [suiMainnet, stacksMainnet] as [AppKitNetwork, ...AppKitNetwork[]]

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'
      },
      {
        methods: ['stx_signMessage'],
        chains: [stacksMainnet as CustomCaipNetwork],
        events: ['stx_chainChanged'],
        namespace: 'stacks'
      }
    ]
  })

  return universalConnector
}
```

--------------------------------

### Mobile Linking Overview

Source: https://docs.walletconnect.network/wallet-sdk/best-practices

An introduction to Mobile Linking, explaining its purpose and benefits for improving user experience by redirecting between native wallet and application apps.

```APIDOC
## Mobile Linking

### Description
Mobile Linking utilizes the mobile device's native operating system to automatically redirect between a native wallet app and a native application. This streamlines the user experience by minimizing required user actions.

### Why use Mobile Linking?
Provides a seamless user experience through automatic redirection between native apps, reducing friction for the user.
```

--------------------------------

### Respond to WalletConnect Session Requests

Source: https://docs.walletconnect.network/wallet-sdk/react-native/usage

Listens for the 'session_request' event, which is triggered when a dapp needs the wallet to perform an action, like signing a transaction. This example shows how to extract the message, sign it using wallet.signMessage, and respond to the dapp with the signed message or an error.

```javascript
walletKit.on("session_request", async (event) => {
  const { topic, params, id } = event;
  const { request } = params;
  const requestParamsMessage = request.params[0];

  // convert `requestParamsMessage` by using a method like hexToUtf8
  const message = hexToUtf8(requestParamsMessage);

  // sign the message
  const signedMessage = await wallet.signMessage(message);

  const response = { id, result: signedMessage, jsonrpc: "2.0" };

  await walletKit.respondSessionRequest({ topic, response });
});
```

```javascript
const response = {
  id,
  jsonrpc: "2.0",
  error: {
    code: 5000,
    message: "User rejected.",
  },
};
```

--------------------------------

### Update WalletConnect Session in C#

Source: https://docs.walletconnect.network/wallet-sdk/c-sharp/usage

Provides an example of how to update an existing WalletConnect session by adding or removing namespaces. It demonstrates creating a `Namespaces` object and initiating the update using `walletClient.UpdateSession`. The `Acknowledged()` method is called to wait for the session update to be confirmed.

```csharp
var newNamespaces = new Namespaces(...);
var request = await walletClient.UpdateSession(sessionTopic, newNamespaces);
await request.Acknowledged();
```
Tokens:
Raw