1.1.11 • Published 5 months ago
kane1-liquidity-widgets v1.1.11
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 |