Customizing The KyberSwap Widget

Endlessly Customizable

Overview

Below you’ll find a few examples showing how you can customize the widget theme to match the look and feel of your dApp. All of them can be integrated using the following code snippet where you can set your theme:

import { Widget } from "@kyberswap/widgets";

const theme: Theme = {
  // Check out the theme examples below
}

<Widget
  client="yourCompanyNameHere"
  theme={theme}
  tokenList={[]}
  provider={ethersProvider}
  defaultTokenOut={defaultTokenOut[chainId]}
/>

Customizing the title

Integrators are free to set their own widget title using ReactNode or just a string value.

  import { Widget } from "@kyberswap/widgets";

  <Widget
    title={
      <div>Custom Title</div>
    }
  />

Customizing the width

Widget has a fixed height of 360px and a default width of 360px. You cannot modify the height of the widget. You can modify the width up to a minimum width of 300px.

You can customize the width by passing a valid CSS number or width to the widget's width holder.

  import { Widget } from "@kyberswap/widgets";

  <Widget
    width={360}
  />

Customizing the fees

The KyberSwap Widget makes it easy to configure a transaction facilitation fee by passing additional parameters to the widget. Information about parameters you can refer to KyberSwap Aggregator APIs.

import { Widget } from "@kyberswap/widgets";

<Widget  feeSetting={
    feeAmount: 100,
    feeReceiver: "0xDcFCD5dD752492b95ac8C1964C83F992e7e39FA9",
    chargeFeeBy: "currency_in",
    isInBps: true,
} />

Customizing the themes

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

All attributes below are color codes, except buttonRadius (number), borderRadius (number between 0 and 1), and fontFamily (string).

You can check out examples of the swap widget, and the Figma file if you want to mock it up first!

Widget

Properties	Prop Type	Example	Description
primary	string	#F1FFEE	primary background color of swap form
secondary	string	#F1FFEE	secondary background color of swap form
dialog	string	#F1FFEE	color of dialog
borderRadius	string	30px	border-radius of swap form and swap button (same border-radius)
buttonRadius	string	5px	border-radius of swap button
stroke	string	#F1FFEE	color of the stroke
interactive	string	#F1FFEE	color of interactive button(Swap icon and token picker)
accent	string	#F1FFEE	swap button and link color
success	string	#F1FFEE	success color
warning	string	#F1FFEE	warning color
error	string	#F1FFEE	error color
text	string	#F1FFEE	primary text color
subtext	string	#F1FFEE	secondary text color
fontFamily	string	Roboto	font-family of Swap form

Customizing the Trade Route

The KyberSwap Widget can be configured to also return the trade route by setting the enableRoute parameter to true.

Moreover, you can also specify the list of DEXs which trades via the widget will be routed to using the enableDexes parameter. The full list of DEX IDs can be found here.

Customizing the Token Lists

import { Widget } from "@kyberswap/widgets";

// You can also pass a list of tokens as JSON, as long as the format is correct
const MY_TOKEN_LIST = [
    {
    "name": "KNC",
    "address": "0x1C954E8fe737F99f68Fa1CCda3e51ebDB291948C",
    "symbol": "KNC",
    "decimals": 18,
    "chainId": 1,
    "logoURI": "https://s2.coinmarketcap.com/static/img/coins/64x64/9444.png"
  },
    {
    "name": "Tether USD",
    "address": "0xdAC17F958D2ee523a2206206994597C13D831ec7",
    "symbol": "USDT",
    "decimals": 6,
    "chainId": 1,
    "logoURI": "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xdAC17F958D2ee523a2206206994597C13D831ec7/logo.png"
  },
  {
    "name": "USD Coin",
    "address": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
    "symbol": "USDC",
    "decimals": 6,
    "chainId": 1,
    "logoURI": "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
  },
]

<Widget
    theme={theme}
    tokenList={MY_TOKEN_LIST}
    provider={ethersProvider}
    defaultTokenOut={defaultTokenOut[chainId]}
/>