Registry / defi / kyberswap-zap-migration-widgets

kyberswap-zap-migration-widgets

library1.0.8jsnpmunverified

React component library for integrating KyberSwap Zap Protocol liquidity operations into dApps. Current stable version: 1.0.8. Provides pre-built UI for adding/increasing liquidity in PancakeSwap-style AMM pools with KyberSwap's aggregation and routing. Key differentiators: handles zap (single-token to LP), supports both new positions and existing position increase, configurable fee collection, and theming (dark/light). Requires React 16.8+ and web3 wallet connection. Ships TypeScript definitions.

defi

npm install kyberswap-zap-migration-widgets

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · KYBERSWAP-ZAP-MIGR

kyberswap-zap-migration-widgets

defijavascriptv1.0.8

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

LiquidityWidget

✓ import { LiquidityWidget } from '@kyberswap/pancake-liquidity-widgets'

✗ import LiquidityWidget from '@kyberswap/pancake-liquidity-widgets'

Named export, not default. The package has no default export.

theme types

✓ import type { Theme } from '@kyberswap/pancake-liquidity-widgets'

TypeScript types are available via the package; import types as needed.

full library

✓ import * as KyberWidgets from '@kyberswap/pancake-liquidity-widgets'

✗ const KyberWidgets = require('@kyberswap/pancake-liquidity-widgets')

Package is ESM; CommonJS require may not work in all environments.

Renders a liquidity widget for adding liquidity to a PancakeSwap pool on BSC (chainId 56), handling zap and position management.

import React from 'react'; import { LiquidityWidget } from '@kyberswap/pancake-liquidity-widgets'; import '@kyberswap/pancake-liquidity-widgets/dist/index.css'; function App() { const account = '0xYourWalletAddress'; const networkChainId = 56; const chainId = 56; const poolAddress = '0xPoolAddress'; return ( <LiquidityWidget source="MyDapp" account={account} networkChainId={networkChainId} chainId={chainId} poolAddress={poolAddress} theme="dark" onTxSubmit={(txHash) => console.log('TX:', txHash)} onConnectWallet={() => console.log('Connect wallet clicked')} onDismiss={() => console.log('Widget dismissed')} /> ); } export default App;

Debug

Known issues

gotchaThe `account` prop must be a valid Ethereum address string; passing an empty string or undefined may cause the widget to fail silently.

fix

Always provide a connected wallet address or use the `onConnectWallet` callback to prompt connection.

affects: >=1.0.0

gotchaFor adding liquidity into a new position, do not pass `positionId`. If `positionId` is provided, the widget assumes you are increasing an existing position.

fix

Omit `positionId` for new positions; include it only when increasing liquidity in an existing position.

affects: >=1.0.0

breakingThe `chainId` prop changed from optional to required in v1.0.0. Older version (pre-1.0.0) may have accepted undefined.

fix

Always provide a numeric `chainId` matching the network of the pool.

affects: >=1.0.0

deprecatedThe `initTickLower` and `initTickUpper` props are deprecated in favor of automatic tick range detection for new positions.

fix

Omit them unless you have a specific use case for custom ticks.

affects: >=1.0.0

gotchaIf `feeAddress` is not provided, no fee is charged. Setting `feePcm` without `feeAddress` has no effect.

fix

Provide both `feeAddress` and `feePcm` if you intend to collect fees.

affects: >=1.0.0

gotchaThe widget requires importing CSS separately: `import '@kyberswap/pancake-liquidity-widgets/dist/index.css'`. Without it, styling is broken.

fix

Import the CSS file in your application entry point.

affects: >=1.0.0

gotchaThe `onTxSubmit` callback returns a string (tx hash), not an object. Do not expect an event or receipt.

fix

Use the raw tx hash to track the transaction via your own provider.

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

The `account` prop is empty string or undefined; the widget tries to parse the address.

fix

Provide a valid Ethereum address for the `account` prop.

Uncaught (in promise) Error: Unsupported chainId

The `chainId` prop is not one of the supported networks (e.g., 56 for BSC, 1 for Ethereum).

fix

Use a valid chainId (e.g., 56 for BSC mainnet).

Cannot resolve module '@kyberswap/pancake-liquidity-widgets/dist/index.css'

CSS file path is incorrect or not imported.

fix

Use correct import path: `import '@kyberswap/pancake-liquidity-widgets/dist/index.css';`

Uncaught TypeError: Cannot destructure property 'provider' of ...

Web3 provider not connected or injected (e.g., MetaMask not installed).

fix

Ensure a web3 provider (e.g., MetaMask) is available and connected before rendering the widget.

Upgrade

Version history

1.0.8latest on npm

Audit

Dependencies

reactrequiredpeer dependency for React components

react-domrequiredpeer dependency for React DOM rendering

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/KyberNetwork/kyberswap-widgets ↗

packagekyberswap-zap-migration-widgets ↗

homepagehttps://github.com/KyberNetwork/kyberswap-widgets#readme ↗