The @kyberswap/pancake-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://pancake-liq-widget-demo.vercel.app/
Install the widgets library via npm or yarn.
yarn add @kyberswap/pancake-liquidity-widgets
npm i --save @kyberswap/pancake-liquidity-widgets
Example usage: https://github.com/KyberNetwork/kyberswap-widgets/blob/main/examples/pancake-demo/src/App.tsx#L116-L137
| Property | Description | Type | Default Value |
|---|---|---|---|
| source | To identify the dapp that integrating with liquidity widget | string | |
| account | Current connected wallet | string | "" |
| networkChainId | Current network chainId | number | Required |
| chainId | network of selected pool | number | Required |
| poolAddress | address of pool to zap | string | Required |
| 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” | number | undefined |
| initTickLower | init tick lower in case add liquidity into a new position | number | undefined |
| initTickUpper | init tick upper in case add liquidity into a new position | number | undefined |
| initDepositToken | init deposit token in. Use 0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE in case it's native token |
string | undefined |
| initAmount | init amount in | number | undefined |
| theme | matching with pancake theme. accept 'dark' or 'light' | string | dark |
| feeAddress | Wallet Address if you want to charge zap fee | string | undefined |
| 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 | undefined |
| includedSources | List of liquidty sources you want to include from your zap, separate by comma | KyberSwap Aggregator Dex Ids | |
| excludedSources | List of liquidty sources you want to exclude from your zap, separate by comma | KyberSwap Aggregator Dex Ids | |
| onDismiss | Callback function when click cancel or close widget | () => void | |
| onTxSubmit | Callback function when tx was submited | (txHash: string) => void | |
| onConnectWallet | function when user click connect wallet | () => void |