Integrating The KyberSwap Liquidity Widget

The @kyberswap/liquidity-widgets package is an npm package of React components used to provide subsets of the Zap Protocol functionality in a small and configurable user interface element.

Demo: https://kyberswap.com/earn

Installing the Liquidity Widget

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

npm:

npm i @kyberswap/widgets

Yarn:

yarn add @kyberswap/widgets

Adding the Liquidity widget to your app

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

import "@kyberswap/liquidity-widgets/dist/style.css";
import { LiquidityWidget, PoolType } from "@kyberswap/liquidity-widgets";

<LiquidityWidget
  theme={{
    text: "#FFFFFF",
    subText: "#B6AECF",
    icons: "#a9a9a9",
    layer1: "#27262C",
    dialog: "#27262C",
    layer2: "#363046",
    stroke: "#363046",
    chartRange: "#5DC5D2",
    chartArea: "#457F89",
    accent: "#5DC5D2",
    warning: "#F4B452",
    error: "#FF5353",
    success: "#189470",
    fontFamily: "Kanit, Sans-serif",
    borderRadius: "20px",
    buttonRadius: "16px",
    boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.04)",
  }}
  poolType={PoolType.DEX_UNISWAP_V4_FAIRFLOW}
  poolAddress="0x1508630c3e36bf8b524db0fc321565bef8aece8bc1c706ed7ac9a88b9657a6c0"
  chainId={1}
  connectedAccount={{
    address: "0xa6c883E2dde82FbED20e025BD717a6B7F34f5E6E", 
    chainId: 56
  }}
  onClose={() => {
    console.log("Close Widget");
  }}
  onConnectWallet={() => {
    // trigger your connect wallet here
  }}
  onSwitchChain={() => {
    // handle change network if connectedAccount.chainId != chainId
  }}
  onSubmitTx={(txData: {from: string, to: string, value: string, data: string, gasLimit: string}}) => {
    // Submit your transaction to wallet 
  }}
  source="zap-widget-demo"
/>

Liquidity Widget Props

Property
Description
Type
Default Value

theme

Customize theme for Liquidity Widget

Theme

provider

Web3Provider to interact with blockchain

Web3Provider | undefined

undefined

poolAddress

Required. Address of pool to zap

Address

--

poolType

Required. Type of Pool, supported protocol

--

positionId

Optional, in case “Increasing Liquidity into an existing position”, pass the position id. The position should belong to the poolAddress. Otherwise, it considers as “Adding Liquidity into a new position”

String | undefined

undefined

chainId

Required. Network of selected pool.

number

--

connectedAccount

Required. The current network that user connected. If not connected, the address should be undefined

{ address?: string, chainId: number }

--

source

Required. To identify the dapp that integrates with the iquidity widget

string

--

feeAddress

Optional, Wallet Address if you want to charge zap fee

Address

--

feePcm

fee percentage in per cent mille (0.001% or 1 in 100,000). Ignored if feeAddress is empty. From 0 to 100,000 inclusively. Example: 1 for 0.001%.

number

--

includedSources

List of liquidty sources you want to includes from your zap, separate by comma

--

excludedSources

List of liquidity sources that you want to exclude from your zap, separate by comma

--

onClose

Callback function when click cancel or close widget

() => void

--

onConnectWallet

action to trigger connect wallet

() => void

onSwitchChain

action to trigger switch chain if network of the pool is different with network from connected account

() => void

onSubmitTx

trigger submit transaction (approval or zap). Should return the tx hash

(txData: {from: string, to: string, value: string, data: string, gasLimit: string}) => Promise

onTxSubmit

Callback function when tx was submited

(txHash: string) => void

--

Migrate from version 0.0.16 to 1.x.x

Deprecated

Property
Description
Type
Default Value

provider

Web3Provider to interact with blockchain

undefined

onTxSubmit

Callback function when tx was submitted

(txHash: string) => void

New

Property
Description
Type
Default Value

connectedAccount

Info of current account that user connect to your website

{ address?: string, chainId: number }

onTxSubmit

Function that trigger tx

(txData: {from: string, to: string, value: string, data: string, gasLimit: string}) => Promise

Last updated

Was this helpful?