Vanilla JS / HTML

The widget can be used without React by using the vanilla JS API. Three functions are available: mount, unmount, and open.

ESM Import

<link rel="stylesheet" href="node_modules/@silentswap/widget/dist/silentswap-widget.css" />
 
<div id="swap-container"></div>
 
<script type="module">
  import { mount } from '@silentswap/widget';
 
  mount('#swap-container', {
    config: {
      walletConnectProjectId: 'YOUR_PROJECT_ID',
      environment: 'MAINNET',
    },
    theme: {
      primaryColor: '#F0B90B',
    },
  });
</script>

CDN / IIFE

If you're not using a bundler, load the IIFE build directly. The SilentSwap global is available on window.

<link rel="stylesheet" href="https://unpkg.com/@silentswap/widget/dist/silentswap-widget.css" />
<script src="https://unpkg.com/@silentswap/widget/dist/silentswap-widget.iife.js"></script>
 
<div id="swap"></div>
 
<script>
  SilentSwap.mount('#swap', {
    config: { walletConnectProjectId: 'YOUR_PROJECT_ID' },
  });
</script>

API Reference

mount(target, options)

Mount the widget into a DOM element. Returns a cleanup function.

function mount(
  target: string | Element,  // CSS selector or DOM element
  options: {
    config: SilentSwapWidgetConfig;
    theme?: WidgetTheme;
  }
): () => void;  // Call to unmount

Example:

const cleanup = SilentSwap.mount('#swap', {
  config: { walletConnectProjectId: '...' },
});
 
// Later, to remove the widget:
cleanup();

unmount(target)

Remove a previously mounted widget by its selector or element.

function unmount(target: string | Element): void;

Example:

SilentSwap.unmount('#swap');

open(options)

Open the widget as a floating modal overlay. Returns a handle with a close() method.

function open(options: {
  config: SilentSwapWidgetConfig;
  theme?: WidgetTheme;
}): { close: () => void };

Example:

const modal = SilentSwap.open({
  config: {
    walletConnectProjectId: 'YOUR_PROJECT_ID',
    environment: 'MAINNET',
  },
});
 
// Close programmatically after 60 seconds
setTimeout(() => modal.close(), 60000);

Vue / Svelte / Angular

Since the vanilla API mounts into any DOM element, it works with any framework. Mount after the target element is in the DOM and clean up on unmount.

Vue 3 example:

<template>
  <div ref="widgetRef" />
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { mount, unmount } from '@silentswap/widget';
import '@silentswap/widget/style.css';
 
const widgetRef = ref(null);
 
onMounted(() => {
  mount(widgetRef.value, {
    config: {
      walletConnectProjectId: 'YOUR_PROJECT_ID',
      environment: 'MAINNET',
    },
  });
});
 
onUnmounted(() => {
  unmount(widgetRef.value);
});
</script>