getSilentSwapClient

The getSilentSwapClient composable creates and manages a SilentSwap client instance. This client is required for all Silent Swap operations.

Import

import { getSilentSwapClient } from '@silentswap/vue';
import { ENVIRONMENT } from '@silentswap/sdk';

Basic Usage

<script setup lang="ts">
import { getSilentSwapClient } from '@silentswap/vue';
import { ENVIRONMENT } from '@silentswap/sdk';
 
const { client } = getSilentSwapClient({
  config: {
    environment: ENVIRONMENT.MAINNET,
    baseUrl: 'https://api.silentswap.com',
  },
});
</script>

API Reference

Options

interface GetSilentSwapClientOptions {
  config: SilentSwapClientConfig;
}
 
interface SilentSwapClientConfig {
  /** Environment (MAINNET, TESTNET, etc.) */
  environment: ENVIRONMENT;
  /** Base URL for the API (optional) */
  baseUrl?: string;
}

Return Value

interface GetSilentSwapClientReturn {
  /** SilentSwap client instance */
  client: SilentSwapClient;
}

Configuration

Environment Options

<script setup lang="ts">
import { getSilentSwapClient } from '@silentswap/vue';
import { ENVIRONMENT } from '@silentswap/sdk';
 
// Mainnet
const { client } = getSilentSwapClient({
  config: {
    environment: ENVIRONMENT.MAINNET,
    baseUrl: 'https://api.silentswap.com',
  },
});
 
// Testnet
const { client: testnetClient } = getSilentSwapClient({
  config: {
    environment: ENVIRONMENT.TESTNET,
    baseUrl: 'https://api-testnet.silentswap.com',
  },
});
</script>

Using Environment Variables

<script setup lang="ts">
import { getSilentSwapClient } from '@silentswap/vue';
import { ENVIRONMENT } from '@silentswap/sdk';
 
const { client } = getSilentSwapClient({
  config: {
    environment: ENVIRONMENT.MAINNET,
  },
});
</script>

Integration with Other Composables

The client instance is used by other composables:

<script setup lang="ts">
import { 
  getSilentSwapClient, 
  getSilentSwapOrders,
  getSilentSwapAuth 
} from '@silentswap/vue';
import { ENVIRONMENT } from '@silentswap/sdk';
 
// Initialize client
const { client } = getSilentSwapClient({
  config: {
    environment: ENVIRONMENT.MAINNET,
  },
});
 
// Use client in other composables
const {
  getNonce,
  authenticate,
  getQuote,
  createOrder,
} = getSilentSwapOrders({ client });
 
const {
  createSignInMessage,
  createEip712DocForOrder,
} = getSilentSwapAuth();
</script>

Reactivity

The client is created using Vue's computed, so it will be reactive to config changes:

<script setup lang="ts">
import { ref } from 'vue';
import { getSilentSwapClient } from '@silentswap/vue';
import { ENVIRONMENT } from '@silentswap/sdk';
 
const environment = ref(ENVIRONMENT.MAINNET);
 
const { client } = getSilentSwapClient({
  config: computed(() => ({
    environment: environment.value,
  })),
});
 
</script>

Best Practices

Initialize Once - Create the client at the component or app level
Type Safety - Use TypeScript for config type checking