@zktx.io/wormhole-kit

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 {
  IUnsignedTx,
  WhProvider,
  WhTransferModal,
} from '@zktx.io/wormhole-kit';

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

  const handleUnsignedTxs = async (unsignedTxs: IUnsignedTx[]): Promise<void> => {
    // To execute transactions,
    // send the unsigned transaction to the wallet.
  };

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

WhProvider Props

• network: Mainnet, Testnet, and Devnet.
• chains: Algorand, Aptos, EVMs, Solana, and Sui.
• config: If needed, you can customize the default configuration to, for example, support a different RPC endpoint. link
• mode: Switch appearance between light, and dark modes.

WhTransferModal Props

• chain: The name of the connected chain.
• address: The address of the connected wallet.
• token: The address (identifier) of the token.
• trigger: The button that opens the modal.
• handleUnsignedTxs: The unsigned transactions is formatted for wallet use and forwarded.

WhRedeemModal Props

• chain: The name of the connected chain.
• address: The address of the connected wallet.
• trigger: The button that opens the modal.
• handleUnsignedTxs: The unsigned transactions is formatted for wallet use and forwarded.