Getting Started with the Widget

This guide walks you through the steps to embed the swap widget in your website in 2 minutes — whether your site is already a decentralized application (dApp) or not.

With the swap widget, your users can swap your token or any ink ERC-20 tokens on Superswap without leaving your site!

Installing the Widgets Library

To get started, install the widgets library using npm or Yarn.

npm install --save @superswap-ink/widget

Adding the Widget to Your App

Next, embed the React component in your application.

import { SwapWidget } from '@superswap-ink/widget'
import '@superswap-ink/widget/dist/style.css'

function App() {
  <div>
    <SwapWidget />
  </div>
}

Customizing the Widget

You can set optional parameters to tailor the appearance and functionality of the widget to fit your dApp.

| Param | Type | Default | | ------------- | --------- | --------- | | width | number | 480 | | inputToken | string | NATIVE | | outputToken | string | undefiend | | amount | string | undefiend | | darkMode | bool | undefined | | slippage | number | 0.5 | | hideBridge | bool | undefined |

import { SwapWidget } from '@superswap-ink/widget'
import '@superswap-ink/widget/dist/style.css'

function App() {
  <div>
    <SwapWidget
      width={500}
      inputToken={"NATIVE"}
      outputToken={"0xD642B49d10cc6e1BC1c6945725667c35e0875f22"}
      amount={"100"}
      slippage={10}
      darkMode={true}
    />
  </div>
}