React Integration

The widget exports two React components: SilentSwapWidget for inline embedding and SilentSwapModal for a modal overlay.

Installation

npm install @silentswap/widget

SilentSwapWidget

Renders the swap interface inline within your layout.

import { SilentSwapWidget } from '@silentswap/widget';
import '@silentswap/widget/style.css';
 
function SwapPage() {
  return (
    <SilentSwapWidget
      config={{
        walletConnectProjectId: 'YOUR_PROJECT_ID',
        environment: 'MAINNET',
        integratorId: 'my-dapp',
      }}
      theme={{
        primaryColor: '#6366F1',
        backgroundColor: '#0F0F0F',
        borderRadius: 12,
      }}
      className="my-swap-widget"
      style={{ maxWidth: 480 }}
    />
  );
}

Props

Prop	Type	Description
`config`	`SilentSwapWidgetConfig`	Widget configuration (required)
`theme`	`WidgetTheme`	Theme overrides
`className`	`string`	CSS class name
`style`	`React.CSSProperties`	Inline styles

SilentSwapModal

Renders the swap interface inside a dialog overlay. Use trigger to provide a button that opens the modal, or control it programmatically with open / onOpenChange.

Trigger mode

import { SilentSwapModal } from '@silentswap/widget';
import '@silentswap/widget/style.css';
 
function App() {
  return (
    <SilentSwapModal
      config={{
        walletConnectProjectId: 'YOUR_PROJECT_ID',
        environment: 'MAINNET',
      }}
      trigger={<button>Open Swap</button>}
    />
  );
}

Controlled mode

import { useState } from 'react';
import { SilentSwapModal } from '@silentswap/widget';
import '@silentswap/widget/style.css';
 
function App() {
  const [open, setOpen] = useState(false);
 
  return (
    <>
      <button onClick={() => setOpen(true)}>Swap</button>
      <SilentSwapModal
        config={{
          walletConnectProjectId: 'YOUR_PROJECT_ID',
          environment: 'MAINNET',
        }}
        open={open}
        onOpenChange={setOpen}
      />
    </>
  );
}

Props

Prop	Type	Description
`config`	`SilentSwapWidgetConfig`	Widget configuration (required)
`theme`	`WidgetTheme`	Theme overrides
`trigger`	`ReactNode`	Element that opens the modal on click
`open`	`boolean`	Controlled open state
`onOpenChange`	`(open: boolean) => void`	Called when the modal opens or closes

Next.js

The widget uses browser-only APIs (wallet connections, window, DOM). In Next.js App Router, load it with dynamic import:

import dynamic from 'next/dynamic';
 
const SilentSwapWidget = dynamic(
  () => import('@silentswap/widget').then((m) => m.SilentSwapWidget),
  { ssr: false }
);
 
export default function Page() {
  return (
    <SilentSwapWidget
      config={{ walletConnectProjectId: 'YOUR_PROJECT_ID' }}
    />
  );
}

Don't forget to import the CSS in your layout or page:

import '@silentswap/widget/style.css';