KyberSwap Docs
Search
K
Comment on page

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]}
/>