| description |
|---|
Zap into a Liquidity Protocol With Minimal Code |
Installing the Liquidity Widget
To get started, install the widgets library using npm or Yarn.
{% embed url="https://www.npmjs.com/package/@kyberswap/liquidity-widgets" %}
npm:
npm i @kyberswap/widgets
Yarn:
yarn add @kyberswap/widgets
Embed the React component in your application with this piece of code:
import { LiquidityWidget } 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)",
}}
provider={ethersProvider}
chainId={56}
poolType={PoolType.DEX_PANCAKESWAPV3}
poolAddress="0x36696169c63e42cd08ce11f5deebbcebae652050"
onDismiss={() => {
console.log("Dismiss");
}}
source="zap-widget-demo"
/>| Property | Description | Type | Default Value |
|---|---|---|---|
| theme | Customize theme for Liquidity Widget | Theme | defaultTheme |
| provider | Web3Provider to interact with blockchain | Web3Provider | undefined | undefined |
| chainId | Required. A unique identifier that represents a blockchain network. | number | -- |
| poolAddress | Required. SmartContract address of pool | Address | -- |
| poolType | Required. Type of Pool | 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 |
| source | Required. To identify the dapp that integrating with liquidity 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 | -- |
| onDismiss | Callback function when click cancel or close widget | () => void | -- |
| onTxSubmit | Callback function when tx was submited | (txHash: string) => void | -- |