Registry /
defi / kane6-zap-migration-widgets
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.
default import
✓ import KyberLiquidityWidget from '@kyberswap/pancake-liquidity-widgets'
✗ const KyberLiquidityWidget = require('@kyberswap/pancake-liquidity-widgets')
ESM-only; no default export documented — likely named export
ZapWidget
✓ import { ZapWidget } from '@kyberswap/pancake-liquidity-widgets'
✗ import ZapWidget from '@kyberswap/pancake-liquidity-widgets'
Named export per package structure; default import not available
types
✓ import type { ZapWidgetProps } from '@kyberswap/pancake-liquidity-widgets'
✗ import { ZapWidgetProps } from '@kyberswap/pancake-liquidity-widgets'
Type-only imports should use `import type` to avoid bundling issues with TypeScript
Basic integration of ZapWidget for adding liquidity to a PancakeSwap pool on BSC mainnet.
import React from 'react';
import { ZapWidget } from '@kyberswap/pancake-liquidity-widgets';
const App = () => {
const chainId = 56; // BSC mainnet
const poolAddress = '0x...'; // PancakeSwap pool address
const account = '0xYourWallet';
const onConnectWallet = () => console.log('Connect wallet');
const onTxSubmit = (txHash: string) => console.log(txHash);
const onDismiss = () => console.log('Widget dismissed');
return (
<ZapWidget
source="my-dapp"
account={account}
networkChainId={chainId}
chainId={chainId}
poolAddress={poolAddress}
theme="dark"
onDismiss={onDismiss}
onTxSubmit={onTxSubmit}
onConnectWallet={onConnectWallet}
/>
);
};
export default App;
Errors
Common errors & fixes
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
React version < 16.8 or mismatched React versions between package and app.
fixEnsure React and React DOM are version 16.8+ and only one copy is installed.
Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
`account` prop is undefined or not a string.
fixProvide a valid address string or empty string: `account={account || ''}` FetchError: 405 Method Not Allowed for 'https://api.kyberswap.com/...'
Missing or incorrect networkChainId/chainId causing request to wrong endpoint.
fixUse a valid chain ID (e.g., 56 for BSC) and ensure networkChainId matches.
Audit
Dependencies
reactrequiredPeer dependency; UI components
react-domrequiredPeer dependency; DOM rendering