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
poolAddress
Required. Address of pool to zap
Address
--
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
onTxSubmit
Callback function when tx was submitted
(txHash: string) => void
New
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?