Reown AppKit Vue

https://docs.reown.com/appkit/vue
Admin
Reown AppKit Vue is a toolkit for integrating blockchain functionalities, including wallet...
Tokens:36,426
Snippets:365
Trust Score:9.2
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Bitcoin Dependencies

Source: https://docs.reown.com/appkit/vue/core/installation

Install the necessary packages for Bitcoin integration.

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

```bash
yarn add @reown/appkit @reown/appkit-adapter-bitcoin
```

```bash
bun add @reown/appkit @reown/appkit-adapter-bitcoin
```

```bash
pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
```

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

### Install AppKit Skills

Source: https://docs.reown.com/appkit/vue/core/installation

Use this command to install the AI-assisted coding agent for AppKit setup and troubleshooting.

```bash
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

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

### Install Binance Wallet Adapter

Source: https://docs.reown.com/appkit/vue/core/installation

Install the Binance wallet adapter package for TRON.

```bash
npm install @tronweb3/tronwallet-adapter-binance
```

```bash
yarn add @tronweb3/tronwallet-adapter-binance
```

```bash
bun add @tronweb3/tronwallet-adapter-binance
```

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

### Install BitKeep Adapter

Source: https://docs.reown.com/appkit/vue/core/installation

Install the BitKeep wallet adapter package for TRON.

```bash
npm install @tronweb3/tronwallet-adapter-bitkeep
```

```bash
yarn add @tronweb3/tronwallet-adapter-bitkeep
```

```bash
bun add @tronweb3/tronwallet-adapter-bitkeep
```

```bash
pnpm add @tronweb3/tronwallet-adapter-bitkeep
```

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

### Install OKX Wallet Adapter

Source: https://docs.reown.com/appkit/vue/core/installation

Install the OKX Wallet adapter package for TRON.

```bash
npm install @tronweb3/tronwallet-adapter-okxwallet
```

```bash
yarn add @tronweb3/tronwallet-adapter-okxwallet
```

```bash
bun add @tronweb3/tronwallet-adapter-okxwallet
```

```bash
pnpm add @tronweb3/tronwallet-adapter-okxwallet
```

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

### Install Solana Dependencies

Source: https://docs.reown.com/appkit/vue/core/installation

Install the necessary packages for Solana integration.

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

```bash
yarn add @reown/appkit @reown/appkit-adapter-solana
```

```bash
bun add @reown/appkit @reown/appkit-adapter-solana
```

```bash
pnpm add @reown/appkit @reown/appkit-adapter-solana
```

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

### Install MetaMask TRON Adapter

Source: https://docs.reown.com/appkit/vue/core/installation

Install the MetaMask TRON wallet adapter package.

```bash
npm install @tronweb3/tronwallet-adapter-metamask-tron
```

```bash
yarn add @tronweb3/tronwallet-adapter-metamask-tron
```

```bash
bun add @tronweb3/tronwallet-adapter-metamask-tron
```

```bash
pnpm add @tronweb3/tronwallet-adapter-metamask-tron
```

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

### Configure enableWalletGuide

Source: https://docs.reown.com/appkit/vue/core/options

Toggles the display of the wallet guide text for users without a wallet. Defaults to true.

```ts
createAppKit({
  //...
  enableWalletGuide: false,
});
```

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

### Install Reown Authentication package

Source: https://docs.reown.com/appkit/vue/core/reown-authentication

Install the required dependency using your preferred package manager.

```bash
npm install @reown/appkit-siwx
```

```bash
yarn add @reown/appkit-siwx
```

```bash
bun a @reown/appkit-siwx
```

```bash
pnpm add @reown/appkit-siwx
```

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

### Install @reown/appkit-pay

Source: https://docs.reown.com/appkit/vue/payments/deposit-with-exchange

Install the required package using your preferred package manager.

```bash
npm install @reown/appkit-pay
```

```bash
yarn add @reown/appkit-pay
```

```bash
bun a @reown/appkit-pay
```

```bash
pnpm add @reown/appkit-pay
```

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

### Install Trust Wallet Adapter

Source: https://docs.reown.com/appkit/vue/core/installation

Install the Trust Wallet adapter package for TRON.

```bash
npm install @tronweb3/tronwallet-adapter-trust
```

```bash
yarn add @tronweb3/tronwallet-adapter-trust
```

```bash
bun add @tronweb3/tronwallet-adapter-trust
```

```bash
pnpm add @tronweb3/tronwallet-adapter-trust
```

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

### Install TON Dependencies

Source: https://docs.reown.com/appkit/vue/core/installation

Install the necessary packages for TON integration.

```bash
npm install @reown/appkit @reown/appkit-adapter-ton
```

```bash
yarn add @reown/appkit @reown/appkit-adapter-ton
```

```bash
bun add @reown/appkit @reown/appkit-adapter-ton
```

```bash
pnpm add @reown/appkit @reown/appkit-adapter-ton
```

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

### Install TRON Dependencies

Source: https://docs.reown.com/appkit/vue/core/installation

Install the necessary packages for TRON integration.

```bash
npm install @reown/appkit @reown/appkit-adapter-tron
```

```bash
yarn add @reown/appkit @reown/appkit-adapter-tron
```

```bash
bun add @reown/appkit @reown/appkit-adapter-tron
```

```bash
pnpm add @reown/appkit @reown/appkit-adapter-tron
```

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

### Install Ethers Dependencies

Source: https://docs.reown.com/appkit/vue/core/installation

Install the necessary packages for Ethers integration.

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

```bash
yarn add @reown/appkit @reown/appkit-adapter-ethers ethers
```

```bash
bun add @reown/appkit @reown/appkit-adapter-ethers ethers
```

```bash
pnpm add @reown/appkit @reown/appkit-adapter-ethers ethers
```

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

### Install TronLink Adapter

Source: https://docs.reown.com/appkit/vue/core/installation

Install the TronLink wallet adapter package using your preferred package manager.

```bash
npm install @tronweb3/tronwallet-adapter-tronlink
```

```bash
yarn add @tronweb3/tronwallet-adapter-tronlink
```

```bash
bun add @tronweb3/tronwallet-adapter-tronlink
```

```bash
pnpm add @tronweb3/tronwallet-adapter-tronlink
```

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

### Install AppKit Wallet Button Package

Source: https://docs.reown.com/appkit/vue/core/wallet-buttons

Install the required package using your preferred package manager.

```bash
npm install @reown/appkit-wallet-button
```

```bash
yarn add @reown/appkit-wallet-button
```

```bash
bun a @reown/appkit-wallet-button
```

```bash
pnpm add @reown/appkit-wallet-button
```

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

### Install TRON wallet adapter

Source: https://docs.reown.com/appkit/vue/core/installation

Use pnpm to add the specific TRON wallet adapter package to your project.

```bash
pnpm add @tronweb3/tronwallet-adapter-binance
```

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

### Implement SIWXConfig

Source: https://docs.reown.com/appkit/vue/core/siwx-custom

Example implementation of the SIWXConfig interface for AppKit integration.

```typescript
import { createAppKit, type SIWXConfig } from '@reown/appkit'

const siwx: SIWXConfig = {
  createMessage: async (input) => {
    // Implement your logic to create a message
    return 'my message'
  }
  addSession: async (session) => {
    // Implement your logic to add a session
  },
  revokeSession: async (chainId, address) => {
    // Implement your logic to revoke a session
  },
  setSessions: async (sessions) => {
    // Implement your logic to set sessions
  },
  getSessions: async (chainId, address) => {
    // Implement your logic to get sessions
    return []
  },
  getRequired: () => {
    // Return whether the wallet should stay connected when user denies signature
    return false
  },
  signOutOnDisconnect: true // Whether to clear sessions when user disconnects
}

createAppKit({
  // ... your configuration
  siwx
})
```

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

### Install SIWE Dependencies

Source: https://docs.reown.com/appkit/vue/core/siwe

Install the required packages for SIWE integration using your preferred package manager.

```bash
npm install @reown/appkit-siwe siwe
```

```bash
yarn add @reown/appkit-siwe siwe
```

```bash
bun a @reown/appkit-siwe siwe
```

```bash
pnpm add @reown/appkit-siwe siwe
```

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

### Install Ethers v5 Dependencies

Source: https://docs.reown.com/appkit/vue/core/installation

Install the necessary packages for Ethers v5 integration.

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

```bash
yarn add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
```

```bash
bun add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
```

```bash
pnpm add @reown/appkit @reown/appkit-adapter-ethers5 ethers@5.7.2
```

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

### Install Wagmi Dependencies

Source: https://docs.reown.com/appkit/vue/core/installation

Install the necessary packages for Wagmi integration in a Vue project.

```bash
npm install @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem
```

```bash
yarn add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem
```

```bash
bun add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem
```

```bash
pnpm add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem
```

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

### Create SIWE Message (Legacy)

Source: https://docs.reown.com/appkit/vue/core/siwe

Example of creating a SIWE message using the legacy siwe package for AppKit configuration.

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

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

### Initialize AppKit

Source: https://docs.reown.com/appkit/vue/core/options

Basic structure for initializing AppKit with required adapters, project ID, and networks.

```ts
createAppKit({ adapters, projectId, networks, ...options });
```

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

### createAppKit

Source: https://docs.reown.com/appkit/vue/core/options

Initializes the AppKit instance with required adapters, project ID, networks, and optional metadata.

```APIDOC
## createAppKit(options)

### Description
Initializes the AppKit instance. This function is the entry point for configuring the library with necessary network support and application metadata.

### Parameters
- **adapters** (Array) - Required - The wallet adapters to be used by AppKit.
- **projectId** (string) - Required - The unique project identifier from the Reown dashboard.
- **networks** (Array) - Required - An array of network objects imported from @reown/appkit/networks.
- **metadata** (Object) - Optional - Application metadata including name, description, icons, and url used in wallet connection and signing screens.
```

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

### Initialize useAppKitTheme

Source: https://docs.reown.com/appkit/vue/core/composables

Initializes the theme controller to manage modal appearance and variables.

```ts
import { useAppKitTheme } from "@reown/appkit/vue";
const themeAction = useAppKitTheme();
// or
// const { setThemeMode, setThemeVariables } = useAppKitTheme()
```

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

### Initialize AppKit with SIWE

Source: https://docs.reown.com/appkit/vue/core/siwe

Passes the configured siweConfig into the createAppKit function.

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

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

### Import pre-configured assets

Source: https://docs.reown.com/appkit/vue/payments/deposit-with-exchange

Import pre-configured assets like baseETH from the library.

```ts
import { baseETH } from '@reown/appkit-pay'
```

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

### Get Error from AppKit

Source: https://docs.reown.com/appkit/vue/core/composables

Retrieves the current error state from the modal instance.

```ts
function Components() {
  const error = modal.getError();
  //...
}
```

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

### Run AppKit CLI

Source: https://docs.reown.com/appkit/vue/core/installation

Execute this command to launch the interactive CLI for scaffolding a minimal Reown AppKit project.

```bash
npx @reown/appkit-cli
```

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

### Initialize AppKit with Solana Adapter in Vue

Source: https://docs.reown.com/appkit/vue/core/installation

Configure the AppKit instance using the Solana adapter. Note that MetaMask does not currently support WalletConnect connections on Solana.

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

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

### Configure TON Adapter in Vue

Source: https://docs.reown.com/appkit/vue/core/installation

Setup configuration for the TON adapter in a Vue application, ensuring initialization occurs outside of component render cycles.

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

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

### Initialize Express Server for SIWE

Source: https://docs.reown.com/appkit/vue/core/siwe

Set up the basic Express server structure for handling SIWE authentication routes.

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

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

### Initialize useAppKit

Source: https://docs.reown.com/appkit/vue/core/composables

Import and initialize the useAppKit composable to access modal control functions.

```ts
import { useAppKit } from "@reown/appkit/vue";

export default function Component() {
  const { open, close } = useAppKit();
}
```

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

### open({ view: 'Swap', arguments })

Source: https://docs.reown.com/appkit/vue/transactions/swaps

Programmatically open the Swap view with pre-selected tokens and amounts using the open function from the useAppKit hook.

```APIDOC
## open({ view: 'Swap', arguments })

### Description
Opens the AppKit modal directly to the Swap view with optional pre-filled parameters.

### Parameters
- **view** (string) - Required - Must be set to 'Swap'.
- **arguments.amount** (string) - Optional - Pre-fill the amount to swap.
- **arguments.fromToken** (string) - Optional - Set the default token to swap from (e.g., 'USDC', 'ETH').
- **arguments.toToken** (string) - Optional - Set the default token to swap to (e.g., 'ETH', 'USDT').
```

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

### Initialize DefaultSIWX with Custom Components

Source: https://docs.reown.com/appkit/vue/core/siwx-custom

Configures the DefaultSIWX instance by providing specific implementations for the messenger, verifiers, and storage components.

```ts
import {
  DefaultSIWX,
  InformalMessenger,
  EIP155Verifier,
  SolanaVerifier,
  LocalStorage
} from '@reown/appkit-siwx'

const siwx = new DefaultSIWX({
  messenger: new InformalMessenger({
    domain: 'reown.com',
    uri: 'https://reown.com',
    getNonce: async () => Math.round(Math.random() * 10000).toString()
  }),
  verifiers: [new EIP155Verifier(), new SolanaVerifier()],
  storage: new LocalStorage({ key: '@appkit/siwx' })
})
```

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

### Create a Custom SIWXStorage

Source: https://docs.reown.com/appkit/vue/core/siwx-custom

Implement the SIWXStorage interface to define how verified sessions are added, retrieved, updated, and deleted.

```ts
import type { SIWXSession } from '@reown/appkit-core'
import type { SIWXStorage } from '@reown/appkit-siwx'

export class MyStorage implements SIWXStorage {
  add(session: SIWXSession): Promise<void> {
    // Implement your logic to add a session
  }

  set(sessions: SIWXSession[]): Promise<void> {
    // Implement your logic to set sessions
  }

  get(chainId: CaipNetworkId, address: string): Promise<SIWXSession[]> {
    // Implement your logic to get sessions
    return []
  }

  delete(chainId: string, address: string): Promise<void> {
    // Implement your logic to delete a session
  }
}
```

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

### Initialize AppKit with Ethers v5 Adapter

Source: https://docs.reown.com/appkit/vue/core/installation

Configure the AppKit modal using the Ethers v5 adapter. The metadata URL must match your domain for the Verify API to function correctly.

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

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

### Initialize AppKit with Bitcoin Adapter in Vue

Source: https://docs.reown.com/appkit/vue/core/installation

Configure the AppKit instance using the Bitcoin adapter. Ensure initialization occurs outside of component lifecycle methods to prevent unwanted rerenders.

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

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

### Execute transactions on Solana

Source: https://docs.reown.com/appkit/vue/core/installation

Shows how to create and sign transactions for a Solana program using the web3.js library.

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

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

### Configure AppKit for TRON

Source: https://docs.reown.com/appkit/vue/core/installation

Initialize AppKit with the TRON adapter and wallet configurations in your App.vue file. Ensure these calls occur outside of Vue components to prevent unnecessary rerenders.

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

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

### Configure DefaultSIWX in AppKit

Source: https://docs.reown.com/appkit/vue/core/siwx-custom

Import DefaultSIWX and include it in the createAppKit configuration to enable SIWX functionality.

```ts
import { createAppKit } from '@reown/appkit'
// Add the following code line
import { DefaultSIWX } from '@reown/appkit-siwx'

const appkit = createAppKit({
  projectId,
  networks,
  metadata,
  // Add the following code line
  siwx: new DefaultSIWX() // add this line to enable SIWX
})
```

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

### <appkit-connect-button />

Source: https://docs.reown.com/appkit/vue/core/components

A button component to initiate the wallet connection flow.

```APIDOC
## <appkit-connect-button />

### Description
A button component to initiate the wallet connection flow.

### Properties
- **size** ('md' | 'sm') - Optional - Default size for the button.
- **label** (string) - Optional - The text shown in the button.
- **loadingLabel** (string) - Optional - The text shown in the button when the modal is open.
```

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

### Initialize AppKit with Ethers Adapter in Vue

Source: https://docs.reown.com/appkit/vue/core/installation

Configure the AppKit instance using the Ethers adapter. Ensure the metadata URL matches your domain for proper Verify API functionality.

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

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

### Configuration Options

Source: https://docs.reown.com/appkit/vue/core/options

A collection of configuration properties used during the initialization of AppKit.

```APIDOC
## createAppKit Configuration

### enableWallets
- **Type**: boolean
- **Default**: true
- **Description**: Enable or disable injected wallets and WalletConnect.

### enableNetworkSwitch
- **Type**: boolean
- **Default**: true
- **Description**: Enables or disables the network switching functionality in the modal.

### enableReconnect
- **Type**: boolean
- **Default**: true
- **Description**: Enable or disable automatic reconnection on initialization and page load.

### enableMobileFullScreen
- **Type**: boolean
- **Default**: false
- **Description**: Enable or disable fullscreen rendering of AppKit Core on mobile devices.

### debug
- **Type**: boolean
- **Default**: false
- **Description**: Enable or disable debug mode in your AppKit.

### enableWalletGuide
- **Type**: boolean
- **Default**: true
- **Description**: Enable or disable the wallet guide text.

### termsConditionsUrl
- **Type**: string
- **Description**: URL for the terms and conditions link.

### privacyPolicyUrl
- **Type**: string
- **Description**: URL for the privacy policy link.
```

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

### createAppKit Theming Configuration

Source: https://docs.reown.com/appkit/vue/core/theming

Methods to customize the theme mode and CSS variables during AppKit initialization.

```APIDOC
## createAppKit Theming

### Description
Configure the visual theme of the AppKit modal by setting the theme mode and overriding CSS variables.

### Configuration Options
- **themeMode** (string) - Optional - Sets the theme mode to 'light' or 'dark'. Defaults to system settings.
- **themeVariables** (object) - Optional - A collection of CSS variables to override default styles.

### Supported Theme Variables
- **--apkt-font-family** (string) - Base font family
- **--apkt-accent** (string) - Color used for buttons, icons, labels, etc.
- **--apkt-color-mix** (string) - The color that blends in with the default colors
- **--apkt-color-mix-strength** (number) - The percentage on how much "--apkt-color-mix" should blend in
- **--apkt-font-size-master** (string) - The base pixel size for fonts
- **--apkt-border-radius-master** (string) - The base border radius in pixels
- **--apkt-z-index** (number) - The z-index of the modal

### Example
```ts
createAppKit({
  themeMode: "light",
  themeVariables: {
    "--apkt-color-mix": "#00BB7F",
    "--apkt-color-mix-strength": 40
  }
});
```
```

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

### open({ view: 'OnRampProviders' })

Source: https://docs.reown.com/appkit/vue/transactions/onramp

Programmatically open the On-Ramp modal to allow users to select providers and purchase cryptocurrency.

```APIDOC
## open({ view: 'OnRampProviders' })

### Description
Opens the On-Ramp modal programmatically using the useAppKit hook.

### Parameters
- **view** (string) - Required - Must be set to 'OnRampProviders' to trigger the On-Ramp interface.

### Usage Example
```ts
const { open } = useAppKit()

open({ view: 'OnRampProviders' })
```
```

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

### Configure Local Development Server

Source: https://docs.reown.com/appkit/vue/payments/pay-with-self-custodial-wallets

Updating package.json to ensure the development server runs on the required port 3000.

```json
"scripts": {
    "dev": "vite --port 3000",
},
```

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

### useAppKit()

Source: https://docs.reown.com/appkit/vue/core/composables

The useAppKit composable returns functions to control the modal state. The open function accepts an optional configuration object to specify the view and associated parameters.

```APIDOC
## useAppKit()

### Description
Returns an object containing `open` and `close` functions to manage the modal visibility and navigation.

### Returns
- **open** (Function) - Opens the modal. Accepts an optional object: `{ view?: string, namespace?: string, arguments?: object }`.
- **close** (Function) - Closes the modal.

### Supported Views
- **Connect**: Principal view for connection. Supports `namespace` (solana, bip122, eip155).
- **Account**: User profile view.
- **AllWallets**: List of all available wallets.
- **Networks**: List of available networks.
- **WhatIsANetwork**: Onboarding view.
- **WhatIsAWallet**: Onboarding view.
- **OnRampProviders**: On-Ramp main view.
- **WalletSend**: Token sending interface.
- **Swap**: Swap main view. Supports `arguments` (amount, fromToken, toToken).
- **ProfileWallets**: Manage connected wallets.

### Example
```ts
import { useAppKit } from "@reown/appkit/vue";

const { open, close } = useAppKit();

// Open specific view
open({ view: "Account" });

// Open swap with arguments
open({
  view: 'Swap',
  arguments: {
    amount: '321.123',
    fromToken: 'USDC',
    toToken: 'ETH'
  }
});
```
```

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

### Define and register a custom network

Source: https://docs.reown.com/appkit/vue/core/custom-networks

Use defineChain to create a network object and pass it to the createAppKit configuration along with optional chain images.

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

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

### Import Supported Networks

Source: https://docs.reown.com/appkit/vue/core/installation

Import specific EVM networks from the AppKit library to use within your configuration.

```js
import { createAppKit } from '@reown/appkit/vue'
import { mainnet, arbitrum, base, scroll, polygon } from '@reown/appkit/networks'
```

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

### Initialize useAppKitSIWX Composable

Source: https://docs.reown.com/appkit/vue/core/reown-authentication

Use the useAppKitSIWX composable to access Reown Authentication functionality within a Vue component.

```vue
<script setup>
import type { ReownAuthentication } from '@reown/appkit-siwx'
import { useAppKitSIWX } from '@reown/appkit-siwx/vue'

const siwx = useAppKitSIWX<ReownAuthentication>()
</script>
```

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

### createAppKit Configuration

Source: https://docs.reown.com/appkit/vue/core/options

The createAppKit function accepts various configuration parameters to customize the wallet modal and connection behavior.

```APIDOC
## createAppKit Configuration

### Description
Configures the AppKit modal with custom wallets, visibility settings, and connector preferences.

### Parameters
- **customWallets** (Array) - Optional - Adds custom wallets to the modal. Each object requires `id` and `name`, with optional `homepage`, `image_url`, `mobile_link`, `desktop_link`, `webapp_link`, `app_store`, and `play_store`.
- **allWallets** (String) - Optional - Controls the "All Wallets" button visibility. Values: `SHOW`, `HIDE`, `ONLY_MOBILE`.
- **includeWalletIds** (Array) - Optional - Overrides default recommended wallets with a specific list of wallet IDs.
- **excludeWalletIds** (Array) - Optional - Excludes specific wallet IDs from the default fetched list.
- **coinbasePreference** (String) - Optional - Sets Coinbase Smart Wallet behavior. Values: `eoaOnly`, `smartWalletOnly`, `all` (default).
```

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

### Configure multiple TRON wallet adapters

Source: https://docs.reown.com/appkit/vue/core/installation

Import and instantiate multiple wallet adapters within the TronAdapter configuration array.

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

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

### Access SIWX Configuration with useAppKitSIWX

Source: https://docs.reown.com/appkit/vue/core/composables

Use this composable to retrieve the current Sign In With X configuration for custom authentication flows.

```ts
import { useAppKitSIWX } from "@reown/appkit/vue";

export default function Component() {
  const siwxConfig = useAppKitSIWX();

  if (siwxConfig.value) {
    console.log('SIWX enabled with config:', siwxConfig.value);
  }
}
```

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

### Initialize Reown Authentication in AppKit

Source: https://docs.reown.com/appkit/vue/core/reown-authentication

Import and instantiate ReownAuthentication within the createAppKit configuration.

```typescript
import { createAppKit } from '@reown/appkit'
// Add the following code line
import { ReownAuthentication } from '@reown/appkit-siwx'

const appkit = createAppKit({
  projectId,
  networks,
  metadata,
  // Add the following code line
  siwx: new ReownAuthentication()
})
```

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

### useAppKitSIWX

Source: https://docs.reown.com/appkit/vue/core/composables

A composable function that provides access to the Sign In With X (SIWX) configuration and state.

```APIDOC
## useAppKitSIWX

### Description
Provides access to the current Sign In With X (SIWX) configuration, useful for implementing custom authentication flows.

### Returns
- **siwxConfig** (object) - Reactive reference to the current SIWX configuration object, or undefined if not configured.
```

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

### Initialize AppKit with Wagmi Adapter

Source: https://docs.reown.com/appkit/vue/core/installation

Configure the AppKit modal in a Vue component using the Wagmi adapter. Ensure the metadata URL matches your domain for proper verification.

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

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

### ReownAuthentication configuration parameters

Source: https://docs.reown.com/appkit/vue/core/reown-authentication

Available configuration options for customizing storage keys and authentication requirements.

```typescript
new ReownAuthentication({
  localAuthStorageKey?: string    // Default: '@appkit/siwx-auth-token'
  localNonceStorageKey?: string   // Default: '@appkit/siwx-nonce-token'
  required?: boolean              // Default: true
})
```

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

### Import openPay hook

Source: https://docs.reown.com/appkit/vue/payments/pay-with-self-custodial-wallets

Import the necessary assets and the openPay hook from the library.

```ts
import { baseSepoliaETH, openPay} from '@reown/appkit-pay'
```

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

### Manage multiple wallet connections with useAppKitConnections

Source: https://docs.reown.com/appkit/vue/core/composables

Use this composable to access and manage multiple simultaneous wallet connections in your application.

```ts
import { useAppKitConnections } from "@reown/appkit/vue";

export default function Component() {
  const { connections, disconnect } = useAppKitConnections();
}
```

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

### Interact with contracts using Ethers

Source: https://docs.reown.com/appkit/vue/core/installation

Demonstrates connecting to a provider and calling contract methods using the Ethers library.

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

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

### Initialize usePay hook

Source: https://docs.reown.com/appkit/vue/payments/pay-with-self-custodial-wallets

Initialize the usePay hook to manage payment state and callbacks.

```tsx
    const { open: openPay, isPending, isSuccess, data, error } = usePay({
      onSuccess: handleSuccess, 
      onError: handleError,
    });
```

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

### Configure Networks

Source: https://docs.reown.com/appkit/vue/core/options

Define supported networks using the @reown/appkit/networks library.

```ts
import { mainnet, solana } from "@reown/appkit/networks";

createAppKit({
  // ...
  networks: [mainnet, solana],
});
```

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

### Implement Multichain Wallet Buttons in Vue

Source: https://docs.reown.com/appkit/vue/core/wallet-buttons

Uses createAppKitWalletButton to connect specific wallets to defined namespaces. Ensure the component is mounted before checking readiness.

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

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

### Initialize useAppKitEvents

Source: https://docs.reown.com/appkit/vue/core/composables

Subscribes to AppKit events to track user actions or system states.

```ts
import { useAppKitEvents } from "@reown/appkit/vue";

const events = useAppKitEvents();
```

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

### Configure Metadata

Source: https://docs.reown.com/appkit/vue/core/options

Set application metadata used in wallet connection and signing screens.

```ts
createAppKit({
  // ...
  metadata: {
    name: "My App",
    description: "My App Description",
    icons: ["https://myapp.com/icon.png"],
    url: "https://myapp.com",
  },
});
```

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

### Execute deposit with pay function

Source: https://docs.reown.com/appkit/vue/payments/deposit-with-exchange

Initiate the deposit flow using the pay function and handle the resulting PaymentResult object.

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

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

### Open Swap View with Default Tokens

Source: https://docs.reown.com/appkit/vue/transactions/swaps

Use the open function from the useAppKit hook to programmatically trigger the swap modal with pre-filled tokens and amounts.

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

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

### useAppKitConnection (Solana)

Source: https://docs.reown.com/appkit/vue/core/composables

Provides access to the Solana connection instance for blockchain interactions.

```APIDOC
## useAppKitConnection (Solana)

### Description
Returns a reactive reference to the Solana connection instance for blockchain interactions.

### Returns
- **connection** (Ref) - Reactive reference to the Solana connection instance, or undefined if not connected.
```
Tokens:
Raw