{"id":48368,"library":"kyberswap-zap-migration-widgets","title":"KyberSwap Zap Liquidity Widgets","description":"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.","status":"active","version":"1.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/KyberNetwork/kyberswap-widgets","tags":["javascript","zap","web3","liquidity","typescript"],"install":[{"cmd":"npm install kyberswap-zap-migration-widgets","lang":"bash","label":"npm"},{"cmd":"yarn add kyberswap-zap-migration-widgets","lang":"bash","label":"yarn"},{"cmd":"pnpm add kyberswap-zap-migration-widgets","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for React components","package":"react","optional":false},{"reason":"peer dependency for React DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"Named export, not default. The package has no default export.","wrong":"import LiquidityWidget from '@kyberswap/pancake-liquidity-widgets'","symbol":"LiquidityWidget","correct":"import { LiquidityWidget } from '@kyberswap/pancake-liquidity-widgets'"},{"note":"TypeScript types are available via the package; import types as needed.","wrong":"","symbol":"theme types","correct":"import type { Theme } from '@kyberswap/pancake-liquidity-widgets'"},{"note":"Package is ESM; CommonJS require may not work in all environments.","wrong":"const KyberWidgets = require('@kyberswap/pancake-liquidity-widgets')","symbol":"full library","correct":"import * as KyberWidgets from '@kyberswap/pancake-liquidity-widgets'"}],"quickstart":{"code":"import React from 'react';\nimport { LiquidityWidget } from '@kyberswap/pancake-liquidity-widgets';\nimport '@kyberswap/pancake-liquidity-widgets/dist/index.css';\n\nfunction App() {\n  const account = '0xYourWalletAddress';\n  const networkChainId = 56;\n  const chainId = 56;\n  const poolAddress = '0xPoolAddress';\n\n  return (\n    <LiquidityWidget\n      source=\"MyDapp\"\n      account={account}\n      networkChainId={networkChainId}\n      chainId={chainId}\n      poolAddress={poolAddress}\n      theme=\"dark\"\n      onTxSubmit={(txHash) => console.log('TX:', txHash)}\n      onConnectWallet={() => console.log('Connect wallet clicked')}\n      onDismiss={() => console.log('Widget dismissed')}\n    />\n  );\n}\n\nexport default App;","lang":"typescript","description":"Renders a liquidity widget for adding liquidity to a PancakeSwap pool on BSC (chainId 56), handling zap and position management."},"warnings":[{"fix":"Always provide a connected wallet address or use the `onConnectWallet` callback to prompt connection.","message":"The `account` prop must be a valid Ethereum address string; passing an empty string or undefined may cause the widget to fail silently.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Omit `positionId` for new positions; include it only when increasing liquidity in an existing position.","message":"For adding liquidity into a new position, do not pass `positionId`. If `positionId` is provided, the widget assumes you are increasing an existing position.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always provide a numeric `chainId` matching the network of the pool.","message":"The `chainId` prop changed from optional to required in v1.0.0. Older version (pre-1.0.0) may have accepted undefined.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Omit them unless you have a specific use case for custom ticks.","message":"The `initTickLower` and `initTickUpper` props are deprecated in favor of automatic tick range detection for new positions.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Provide both `feeAddress` and `feePcm` if you intend to collect fees.","message":"If `feeAddress` is not provided, no fee is charged. Setting `feePcm` without `feeAddress` has no effect.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Import the CSS file in your application entry point.","message":"The widget requires importing CSS separately: `import '@kyberswap/pancake-liquidity-widgets/dist/index.css'`. Without it, styling is broken.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use the raw tx hash to track the transaction via your own provider.","message":"The `onTxSubmit` callback returns a string (tx hash), not an object. Do not expect an event or receipt.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.0.8':20 '16.8':66 'adding/increasing':27 'aggreg':38 'amm':33 'built':24 'collect':60 'compon':6 'configur':58 'connect':70 'current':17 'dapp':16 'dark/light':63 'definit':73 'differenti':42 'exist':55 'fee':59 'handl':43 'increas':57 'integr':9 'javascript':74 'key':41 'kyberswap':1,10,36 'librari':7 'liquid':3,13,28,77 'lp':49 'new':52 'oper':14 'pancakeswap':31 'pancakeswap-styl':30 'pool':34 'posit':53,56 'pre':23 'pre-built':22 'protocol':12 'provid':21 'react':5,65 'requir':64 'rout':40 'ship':71 'singl':46 'single-token':45 'stabl':18 'style':32 'support':50 'theme':62 'token':47 'typescript':72,78 'ui':25 'version':19 'wallet':69 'web3':68,76 'widget':4 'zap':2,11,44,75","created_at":"2026-06-07T16:56:17.943187+00:00","updated_at":"2026-06-07T16:56:17.943187+00:00","problems":[{"fix":"Provide a valid Ethereum address for the `account` prop.","cause":"The `account` prop is empty string or undefined; the widget tries to parse the address.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'map')"},{"fix":"Use a valid chainId (e.g., 56 for BSC mainnet).","cause":"The `chainId` prop is not one of the supported networks (e.g., 56 for BSC, 1 for Ethereum).","error":"Uncaught (in promise) Error: Unsupported chainId"},{"fix":"Use correct import path: `import '@kyberswap/pancake-liquidity-widgets/dist/index.css';`","cause":"CSS file path is incorrect or not imported.","error":"Cannot resolve module '@kyberswap/pancake-liquidity-widgets/dist/index.css'"},{"fix":"Ensure a web3 provider (e.g., MetaMask) is available and connected before rendering the widget.","cause":"Web3 provider not connected or injected (e.g., MetaMask not installed).","error":"Uncaught TypeError: Cannot destructure property 'provider' of ..."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/KyberNetwork/kyberswap-widgets#readme","github":"https://github.com/KyberNetwork/kyberswap-widgets","docs":null,"changelog":null,"pypi":null,"npm":"kyberswap-zap-migration-widgets","openapi_spec":null,"status_page":null,"smithery":null,"categories":["defi"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}