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.

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

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	defaultTheme
provider	Web3Provider to interact with blockchain	Web3Provider | undefined	undefined
poolAddress	Required. Address of pool to zap	Address	--
poolType	Required. Type of Pool, supported protocol	Enum	--
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	KyberSwap Aggregator Dex ID	--
excludedSources	List of liquidity sources that you want to exclude from your zap, separate by comma	KyberSwap Aggregator Dex ID	--
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	Web3Provider	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