Configure Widget

The Kana Widget streamlines user interactions by allowing the selection of default source and destination blockchain chains and supports custom RPC endpoints for efficient network communication.

The example below shows how to preconfigure default chains and RPC endpoints .

import { KanaWidget, AptosDexsFilter, BridgeOption, Chain, WidgetConfig, ModalType } 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: Defines the mode of the widget as SameChain, CrossChain, or Redeem.
  model: ModalType.SameChain,
  
   // 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} />;
};

The tokens option allows for filtering, prominently displaying selected tokens in the list.

import { KanaWidget, 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",
    tokens:{
        // Tokens configuration for Chain.Aptos
        [Chain.Aptos]:[
              // Example tokens for Chain.Aptos
                '0x1::aptos_coin::AptosCoin',
                '0x5e156f1207d0ebfa19a9eeff00d62a282278fb8719f4fab3a586a0a2c0fffbea::coin::T',
                '0xa2eda21a58856fda86451436513b867c97eecb4ba099da5775520e0f7492e852::coin::T',
                '0xf22bede237a07e121b56d91a491eb7bcdfd1f5907926a9e58338f964a01b17fa::asset::USDC',
                '0xf22bede237a07e121b56d91a491eb7bcdfd1f5907926a9e58338f964a01b17fa::asset::USDT',
                '0x73eb84966be67e4697fc5ae75173ca6c35089e802650f75422ab49a8729704ec::coin::DooDoo',
                '0xc26a8eda1c3ab69a157815183ddda88c89d6758ee491dd1647a70af2907ce074::coin::Chewy',
                '0x4def3d3dee27308886f0a3611dd161ce34f977a9a5de4e80b237225923492a2a::coin::T'
            ]
        },
};

export const WidgetPage = () => {
  return <KanaWidget config={widgetConfig} />;
};