Initia Frontend Kit Skill

This skill provides the necessary context to build frontends that integrate with Initia. It identifies the correct React hooks and provider patterns used in the @initia/interwovenkit-react library.

Provider Setup

To use the Initia Frontend Kit, you need to set up several providers in your React application. The main provider is InterwovenKitProvider.

Provider Structure

import { PrivyProvider } from "@privy-io/react-auth";
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { InterwovenKitProvider, PRIVY_APP_ID, TESTNET } from "@initia/interwovenkit-react";

const Providers = ({ children }) => {
  return (
    <PrivyProvider appId={PRIVY_APP_ID}>
      <QueryClientProvider client={queryClient}>
        <WagmiProvider config={wagmiConfig}>
          <InterwovenKitProvider
            {...(isTestnet ? TESTNET : {})}
            theme="dark"
          >
            {children}
          </InterwovenKitProvider>
        </WagmiProvider>
      </QueryClientProvider>
    </PrivyProvider>
  );
};

Key Providers and Libraries

• InterwovenKitProvider: The core provider from @initia/interwovenkit-react. It manages the connection to the Initia network and provides the context for the hooks.
• PrivyProvider: From @privy-io/react-auth, used for authentication and wallet management.
• WagmiProvider: A provider for interacting with Ethereum.
• QueryClientProvider: From @tanstack/react-query, used for data fetching, caching, and mutations.

Core Hooks

The primary hook for interacting with the Initia Frontend Kit is useInterwovenKit.

useInterwovenKit

This hook provides access to the user's wallet, connection status, and functions for interacting with the Initia network.

Properties:

• address: string: The user's wallet address.
• initiaAddress: string: The user's Initia address.
• username: string: The user's username.
• openWallet: () => void: A function to open the wallet UI.
• openConnect: () => void: A function to open the connection UI.
• requestTxBlock: (tx) => Promise<result>: A function to request a transaction, which opens a modal for user confirmation.
• submitTxBlock: (tx) => Promise<result>: A function to sign and submit a transaction directly, without a modal.
• estimateGas: (tx) => Promise<number>: A function to estimate the gas required for a transaction.

Usage Examples

Wallet Connection

import { useInterwovenKit } from "@initia/interwovenkit-react";
import { truncate } from "@initia/utils";

const Connection = () => {
  const { address, username, openWallet, openConnect } = useInterwovenKit();

  if (!address) {
    return <button onClick={openConnect}>Connect</button>;
  }

  return <button onClick={openWallet}>{truncate(username ?? address)}</button>;
};

Sending a Transaction

import { useMutation } from "@tanstack/react-query";
import { useInterwovenKit } from "@initia/interwovenkit-react";
import { MsgSend } from "cosmjs-types/cosmos/bank/v1beta1/tx";

const Send = () => {
  const { initiaAddress, requestTxBlock } = useInterwovenKit();

  const { mutate } = useMutation({
    mutationFn: async ({ recipient, amount, denom, memo }) => {
      const messages = [
        {
          typeUrl: "/cosmos.bank.v1beta1.MsgSend",
          value: MsgSend.fromPartial({
            fromAddress: initiaAddress,
            toAddress: recipient,
            amount: [{ amount, denom }],
          }),
        },
      ];
      
      const { transactionHash } = await requestTxBlock({ messages, memo });
      return transactionHash;
    },
  });

  // ... form handling ...
};