0.0.4 • Published 9 months ago
@kanalabs/kana-widget-v2 v0.0.4
Installation
Kana Widget is available as a npm package.
npm:
npm install @kanalabs/kana-widget-v2
yarn:
yarn add @kanalabs/kana-widget-v2
pnpm:
pnpm add @kanalabs/kana-widget-v2
Getting Started with Kana Widget
Here is an example of a basic app using Kana Widget:
import { KanaWidget, WidgetConfig } from "@kanalabs/kana-widget-v2";
export const WidgetPage = () => {
const widgetConfig: WidgetConfig = {
// Required: The unique SDK key provided by the developer. This key is essential for the widget to function properly.
// If you haven't received a key yet, please contact the development team to obtain one.
sdkKey: "Your dApp/company SDK key",
};
return (
<KanaWidget config={widgetConfig} />
);
};
Configure Widget
This is the example with all the available configurations:
import { KanaWidget, AptosDexsFilter, BridgeOption, Chain, WidgetConfig } from "@kanalabs/kana-widget-v2";
const widgetConfig: WidgetConfig = {
// Required: The unique SDK key provided by the development team. This key is essential for the widget to function properly.
// If you haven't received a key yet, please contact the development team to obtain one.
sdkKey: "Your dApp/company SDK key",
//Optional: The name of your dApp or company using this widget.
integrator:"Your dApp/company name",
//Optional: Configures the blockchain chains that will be used as source and target for transactions.
chains: {
sourceChain: [Chain.Aptos, Chain.Solana, Chain.Ethereum],
targetChain: [Chain.Aptos, Chain.Solana, Chain.Ethereum],
},
//Optional: Configuration for decentralized exchanges (DEXs) to be used within the widget,
// categorized by blockchain.
dexs: {
aptos: [AptosDexsFilter.Pontem], // List of DEXs to be used on the Aptos blockchain.
},
//Optional: Configuration for bridges that are supported by the widget for cross-chain transactions.
bridges: [BridgeOption.CCTP, BridgeOption.Wormhole], // List of bridge options.
//Optional: Determines whether a guided tour or walkthrough is available for users of the widget.
// Set to 'false' to disable the tour.
tour: false,
// Optional: Configure custom blockchain network providers if you wish to use your own instead of default settings.
Provider: {
aptosProvider: `https://aptos-mainnet.nodereal.io/v1/${NODEREAL_KEY}/v1`,
solanaProvider: `https://greatest-frequent-owl.solana-mainnet.quiknode.pro/${SOLANA_QUICKNODE_KEY}`,
polygonProvider: `https://polygon-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
binanceProvider: `https://bsc-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
ethereumProvider: `https://eth-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
arbitrumProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/arbitrum-nitro/`,
avalancheProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/avalanche-c/ext/bc/C/rpc`,
zkSyncProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/zksync`,
suiProvider: "https://sui-mainnet-rpc.nodereal.io",
},
};
export const WidgetPage = () => {
return <KanaWidget config={widgetConfig} />;
};
Troubleshooting
If you are facing any issue like
BREAKING CHANGE: webpack<5 used to include polyfills for node.js core modules by default.
Please add custom webpack settings to config-overrides.js. For further details regarding custom webpack settings refer here.
Documentation
0.0.4
9 months ago
0.0.3-beta.0
9 months ago
0.0.2-beta.7
10 months ago
0.0.2-beta.8
10 months ago
0.0.3
10 months ago
0.0.2-beta.3
11 months ago
0.0.2-beta.4
10 months ago
0.0.2-beta.5
10 months ago
0.0.2-beta.6
10 months ago
0.0.2-beta.0
11 months ago
0.0.2-beta.1
11 months ago
0.0.2-beta.2
11 months ago
0.0.2
11 months ago
0.0.1
11 months ago