Integrating The KyberSwap Liquidity Widget

Zap into a Liquidity Protocol With Minimal Code

Installing the Liquidity Widget

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

npm: @kyberswap/liquidity-widgetsnpm

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 { LiquidityWidget } 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)",
  }}
  provider={ethersProvider}
  chainId={56}
  poolType={PoolType.DEX_PANCAKESWAPV3}
  poolAddress="0x36696169c63e42cd08ce11f5deebbcebae652050"
  onDismiss={() => {
    console.log("Dismiss");
  }}
  source="zap-widget-demo"
/>

Liquidity Widget Props

Property	Description	Type	Default Value
theme	Customize theme for Liquidity Widget	Theme	defaultTheme
provider	Web3Provider to interact with blockchain	Web3Provider | undefined	undefined
chainId	Required. A unique identifier that represents a blockchain network.	number	--
poolAddress	Required. SmartContract address of pool	Address	--
poolType	Required. Type of Pool	enum	DEX_UNISWAPV3 DEX_PANCAKESWAPV3
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
source	Required. To identify the dapp that integrating with liquidity 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	KyberSwap Aggregator Dex ID	--
excludedSources	List of liquidity sources that you want to exclude from your zap, separate by comma	KyberSwap Aggregator Dex ID	--
onDismiss	Callback function when click cancel or close widget	() => void	--
onTxSubmit	Callback function when tx was submited	(txHash: string) => void	--