Skip to content

Vue Integration Overview

SilentSwap provides Vue 3 composables for integrating private Silent Swap functionality into your Vue applications. The Vue package focuses on the core Silent Swap operations with reactive state management.

Available Composables

The Vue package provides composables for both Simple Bridge and Silent Swap operations:

Simple Bridge

  • getQuote - Get optimized bridge quotes from multiple providers (Relay.link, deBridge)
  • getTransaction - Execute bridge transactions with automatic chain switching

Silent Swap (Private)

  • getSilentSwapClient - Initialize and manage the SilentSwap client instance
  • getSilentSwapAuth - Authentication utility functions (SIWE message creation, EIP-712 documents)
  • getSilentSwapOrders - Manage orders, quotes, and authentication with reactive state

Installation

pnpm add @silentswap/vue @silentswap/sdk

Quick Start

Simple Bridge Example

<script setup lang="ts">
import { getQuote, getTransaction } from '@silentswap/vue';
import { useAccount, useWalletClient } from 'wagmi';
 
const { address, connector } = useAccount();
const { data: walletClient } = useWalletClient();
 
const { getQuote: getBridgeQuote, isLoading: quoteLoading } = getQuote({ address });
const {
  executeTransaction,
  getStatus,
  isLoading: txLoading,
  currentStep,
} = getTransaction({
  address: address!,
  walletClient: walletClient as any,
  connector,
});
 
const handleBridge = async () => {
  const quote = await getBridgeQuote(
    1, // Ethereum
    '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC
    '1000000', // 1 USDC
    43114, // Avalanche
    '0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E' // USDC.e
  );
  
  if (quote) {
    await executeTransaction(quote);
  }
};
</script>
 
<template>
  <div>
    <button @click="handleBridge" :disabled="quoteLoading || txLoading">
      Bridge Assets
    </button>
    <div v-if="currentStep">{{ currentStep }}</div>
  </div>
</template>

Silent Swap Setup

<script setup lang="ts">
import { ref } from 'vue';
import { getSilentSwapClient, getSilentSwapOrders, getSilentSwapAuth } from '@silentswap/vue';
import { ENVIRONMENT } from '@silentswap/sdk';
 
// Initialize client
const { client } = getSilentSwapClient({
  config: {
    environment: ENVIRONMENT.MAINNET,
    baseUrl: 'https://api.silentswap.com',
  },
});
 
// Get orders composable with reactive state
const {
  isLoading,
  error,
  getNonce,
  authenticate,
  getQuote,
  createOrder,
} = getSilentSwapOrders({ client });
 
// Get auth utilities
const {
  createSignInMessage,
  createEip712DocForOrder,
  createEip712DocForWalletGeneration,
} = getSilentSwapAuth();
</script>
 
<template>
  <div>
    <div v-if="isLoading">Loading...</div>
    <div v-if="error">Error: {{ error.message }}</div>
    <!-- Your UI here -->
  </div>
</template>

Authentication Flow

<script setup lang="ts">
import { ref } from 'vue';
import { getSilentSwapClient, getSilentSwapOrders, getSilentSwapAuth } from '@silentswap/vue';
import { useAccount, useSignMessage } from 'wagmi';
 
const { address } = useAccount();
const { signMessageAsync } = useSignMessage();
 
const { client } = getSilentSwapClient({ config: { /* ... */ } });
const { getNonce, authenticate } = getSilentSwapOrders({ client });
const { createSignInMessage } = getSilentSwapAuth();
 
const handleSignIn = async () => {
  // Get nonce
  const nonceResponse = await getNonce(address.value!);
  if (!nonceResponse) return;
 
  // Create SIWE message
  const message = createSignInMessage(
    address.value!,
    nonceResponse.nonce,
    'example.com'
  );
 
  // Sign message
  const signature = await signMessageAsync({ message });
 
  // Authenticate
  const authResult = await authenticate({
    siwe: {
      message,
      signature: signature as `0x${string}`,
    },
  });
 
  if (authResult) {
    console.log('Authenticated:', authResult.address);
  }
};
</script>

Key Differences from React

The Vue package is more focused and provides:

  • Lower-level API - Direct access to client methods with reactive wrappers
  • Reactive State - Uses Vue's reactivity system (ref, computed)
  • Composable Pattern - Follows Vue 3 Composition API conventions
  • Utility Functions - Auth utilities are separate from state management

For a higher-level API similar to React hooks, you can build your own composables on top of these primitives.

Next Steps

Simple Bridge

Silent Swap