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

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

Integrating The KyberSwap Widget

iFrame Alternative

Last modified 1mo ago