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