Kyber Liquidity Widgets

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

Installation

Install the widgets library via npm or yarn.

yarn add @kyberswap/liquidity-widgets

npm i --save @kyberswap/liquidity-widgets

Usage

Example usage: https://github.com/KyberNetwork/kyberswap-widgets/blob/main/apps/liquidity-widgets-demo/src/App.tsx#L243

Params

Property | Description | Type | Default Value --- | --- | --- | --- | 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 poolType | supported protocol | PoolType | Required chainId | network of selected pool | number | Required connectedAccount | current network that user connected. if not connect, address should be undefined | { address?: string, chainId: number } | Required onClose | action when user close the widget | () => void | Required onConnectWallet | action to trigger connect wallet | () => void | Required onSwitchChain | action to trigger switch chain if network of the pool is different with network from connected account | () => void | Required onSubmitTx | trigger submit transaction (approval or zap). Should return the tx hash | (txData: {from: string, to: string, value: string, data: string, gasLimit: string}) => Promise | Required initDepositTokens | init tokens in to zap, list of address separate by "," | string | initAmounts | init amounts of tokens in, list of amount separate by "," | string | source | To identify the dapp that integrating with liquidity widget | string |

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 |