@zktx.io/wormhole-kit

@zktx.io/wormhole-kit

@zktx.io/wormhole-kit is a React library that enables instant integration of Wormhole into your dapp.

Getting started

Get started with @zktx.io/wormhole-kit and learn by developer docs

Installation

npm install @zktx.io/wormhole-kit
yarn add @zktx.io/wormhole-kit

If you want to customize the UI, you can simply use the core package.

npm install @zktx.io/wormhole-kit-core
yarn add @zktx.io/wormhole-kit-core

Usage

Instantiate a WhProvider component and start showing Whormhole Transfer Button

import { useState } from 'react';
import {
  WhProvider,
  WhTransferModal,
} from '@zktx.io/wormhole-kit';

const App = () => {
  const [address, setAddress] = useState<string | undefined>(undefined);

  const handleUnsignedTx = async (unsignedTx: string): Promise<void> => {
    // Signs the transaction through the wallet and executes it.
  };

  return (
    <WhProvider
      network="Testnet"
      chains={['Aptos', 'Celo', 'Polygon', 'Sui']}
      config={{
        chains: {
          Ethereum: {
            rpc: 'https://eth-goerli.public.blastapi.io',
          },
          Polygon: {
            rpc: 'https://polygon-mumbai.api.onfinality.io/public',
          },
        },
      }}
      theme="dark"
    >
      <button
        onClick= {() => setOpen(true)}
      >
        Transfer
      </button>
      <WhTransferModal
        chain="Sui"
        address={address}
        handleUnsignedTx={handleUnsignedTx}
        open={open}
        setOpen={setOpen}
      />
    </ WhProvider>
  )
}

WhProvider Props

• network: Mainnet, Testnet, and Devnet.
• chains: Algorand, Aptos, EVMs, Solana,andSui.
• config: If needed, you can customize the default configuration to, for example, support a different RPC endpoint. link
• theme: Switch appearance between inherit, light, and dark modes. link
• accentColor: Accent color is the most dominant color in your theme link

WhTransferButton Props

• chain: The name of the connected chain.
• address: The address of the connected wallet.
• handleUnsignedTx: The unsigned transaction is formatted for wallet use and forwarded.

WhRedeemButton Props

• chain: The name of the connected chain.
• address: The address of the connected wallet.
• handleUnsignedTx: The unsigned transaction is formatted for wallet use and forwarded.