Integrating The KyberSwap Widget

Superior Rates With Minimal Code

Installing the Swap Widget

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

npm:​

npm i @kyberswap/widgets

https://www.npmjs.com/package/@kyberswap/widgetswww.npmjs.com

yarn:​

yarn add @kyberswap/widgets

Adding the Swap widget to your app

Note on integrations: clientID

In order to continuously improve the KyberSwap Widget, our widget implements a client field that enables us to understand how the widget swaps are being utilized. As a developer integrating with our widget, please add your clientID (i.e. company name) to the client field to enable us to serve you better. Refer below for example.

Embed the React component in your application with this piece of code:

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

<Widget
    client="yourCompanyNameHere"
    theme={theme}
    tokenList={[]}
    enableRoute = true
    enableDexes="kyberswap-elastic,uniswapv3,uniswap"
    provider={ethersProvider}
    defaultTokenOut={defaultTokenOut[chainId]}
    title={<div>Custom Title</div>}
/>

That's it! You should now see a fully functional swap widget on your site. You can easily customize the widget according to your application colors.

GitHub Repo

GitHub - KyberNetwork/kyberswap-widgetsGitHub