Kyber Pancake Liquidity Widgets

The @kyberswap/pancake-liquidity-widgets package provides a React component to add or increase liquidity into PancakeSwap pools using KyberSwap's Zap engine. It supports PancakeSwap V3 and Pancake Infinity CL variants with a small, configurable UI.

Exports: LiquidityWidget, PoolType.

Demo: https://pancake-liq-widget-demo.vercel.app/

Installation

Install with your preferred package manager.

pnpm add @kyberswap/pancake-liquidity-widgets

yarn add @kyberswap/pancake-liquidity-widgets

npm i --save @kyberswap/pancake-liquidity-widgets

Usage

Minimal example:

import {
  LiquidityWidget,
  PoolType,
} from "@kyberswap/pancake-liquidity-widgets";
import "@kyberswap/pancake-liquidity-widgets/dist/style.css";
import { useAccount, useChainId, useWalletClient } from "wagmi";

export default function Example() {
  const { address } = useAccount();
  const chainId = useChainId();
  const { data: walletClient } = useWalletClient();

  return (
    <div style={{ width: 840, height: 720 }}>
      <LiquidityWidget
        // Theme: 'dark' | 'light' or omit for default
        theme="dark"
        walletClient={walletClient}
        account={address as any}
        chainId={chainId}
        networkChainId={chainId}
        poolType={PoolType.DEX_PANCAKESWAPV3}
        poolAddress={"0xPoolAddress"}
        // Optional: to increase liquidity into an existing position
        positionId={"12345"}
        source="my-dapp"
        // Comma-separated token addresses and amounts
        initDepositTokens={""}
        initAmounts={""}
        onConnectWallet={() => {
          /* open your wallet modal */
        }}
        onAddTokens={(tokenAddresses: string) => {
          /* update initDepositTokens */
        }}
        onRemoveToken={(tokenAddress: string) => {
          /* remove from initDepositTokens */
        }}
        onAmountChange={(tokenAddress: string, amount: string) => {
          /* update initAmounts */
        }}
        onOpenTokenSelectModal={() => {
          /* open your token selector */
        }}
        onTxSubmit={(txHash?: string) => {
          /* optional tx hash callback */
        }}
        onDismiss={() => {
          /* close modal */
        }}
      />
    </div>
  );
}

For a more detailed example, refer to PancakeZapIn.tsx (demo).

Props

| Property | Description | Type | Required / Default | | ---------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ | | theme | Theme mode or theme object | 'dark' \| 'light' \| Theme | Optional | | walletClient | Wallet client (e.g. wagmi useWalletClient()) | WalletClient \| undefined | Required | | account | Connected account address | Address \| undefined | Required | | chainId | ChainId to route and add liquidity | number | Required | | networkChainId | Current network of user wallet (for mismatch detection) | number | Required | | poolType | Pancake pool type | PoolType | Required | | poolAddress | Pool address | string | Required | | positionId | Existing position to increase liquidity into | string | Optional | | source | Identifier for your integration | string | Required | | includedSources | Restrict liquidity sources (comma-separated) | string | Optional | | excludedSources | Exclude liquidity sources (comma-separated) | string | Optional | | initTickLower | Initial lower tick (new position) | number | Optional | | initTickUpper | Initial upper tick (new position) | number | Optional | | initDepositTokens | Initial deposit token addresses, separated by commas | string | Required | | initAmounts | Initial deposit token amounts, separated by commas | string | Required | | feeAddress | Fee receiver address | string | Optional | | feePcm | Fee in per cent mille. 1 = 0.001% (1 in 100,000). Ignored if no feeAddress | number | Optional | | onDismiss | Called when the widget is closed | () => void | Required | | onTxSubmit | Called when a tx was submitted (optional) | (txHash: string) => void | Optional | | onConnectWallet | Trigger your wallet connect flow | () => void | Required | | onAddTokens | Called when tokens are added (update initDepositTokens) | (tokenAddresses: string) => void | Required | | onRemoveToken | Called when a token is removed (update initDepositTokens/initAmounts) | (tokenAddress: string) => void | Required | | onAmountChange | Called when a token amount changes (update initAmounts) | (tokenAddress: string, amount: string) => void | Required | | onOpenTokenSelectModal | Open your token selection modal | () => void | Required | | farmContractAddresses | Additional farm contracts to detect deposit eligibility | string[] | Optional |

Notes:

• PoolType for Pancake variants is exported from this package. See constants for supported values.
• Included/Excluded sources use KyberSwap Aggregator DEX IDs. See: https://docs.kyberswap.com/kyberswap-solutions/kyberswap-aggregator/dex-ids

Styling

• You must import the stylesheet once in your app: @kyberswap/pancake-liquidity-widgets/dist/style.css.
• You can override the theme via the theme prop (CSS variables under the --pcs-lw-* namespace). A light theme is available via theme="light".