Getting started

Install

npm install @hot-labs/kit react react-dom

yarn add @hot-labs/kit react react-dom

React 18 or 19 is a peer dependency: the kit renders its popups with React even when your app does not use it. The package is ESM only ("type": "module") and needs Node.js 20.10 or newer for tooling and server use.

Bundler setup

Some chain SDKs the kit depends on use Node built-ins (Buffer and friends), so the browser bundle needs polyfills.

Vite

npm install -D vite-plugin-node-polyfills @vitejs/plugin-react

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [nodePolyfills(), react()],
});

webpack / Next.js

Provide Buffer and process (for example with buffer and process/browser through webpack.ProvidePlugin), and load the kit only on the client:

"use client";
import { useEffect, useState } from "react";

export function useKit() {
  const [kit, setKit] = useState<import("@hot-labs/kit").HotKit>();
  useEffect(() => {
    void import("./kit").then((m) => setKit(m.kit)); // ./kit creates the HotKit once
  }, []);
  return kit;
}

Create the kit

Create one HotKit per app, at module level, and reuse it everywhere.

kit.ts

import { HotKit } from "@hot-labs/kit";
import { defaultConnectors } from "@hot-labs/kit/defaults";

export const kit = new HotKit({
  connectors: defaultConnectors,
  walletConnect: {
    projectId: "<your Reown project id>", // https://dashboard.reown.com
    metadata: {
      name: "My App",
      description: "My App",
      url: window.location.origin,
      icons: [`${window.location.origin}/icon.png`],
    },
  },
});

defaultConnectors covers EVM, NEAR, Solana, TON, Stellar, TRON, Sui, Aptos, Starknet, XRP and UTXO chains. Each chain’s code is a separate chunk loaded on demand: see Connectors.

Connect and react to wallets

await kit.connect(); // opens the wallet picker

kit.onConnect(({ wallet }) => console.log("connected", wallet.type, wallet.address));
kit.onDisconnect(({ wallet }) => console.log("disconnected", wallet.type));

HotKit is a MobX store: kit.wallets, kit.priorityWallet, kit.evm, kit.near and the balances are observable. In React, wrap the components that read them in observer from mobx-react-lite:

import { observer } from "mobx-react-lite";
import { kit } from "./kit";

export const Wallets = observer(() => (
  <ul>
    {kit.wallets.map((w) => (
      <li key={w.type}>{w.address}</li>
    ))}
  </ul>
));

Open the built-in UI

kit.openProfile(); // balances, activity, disconnect
kit.openBridge(); // swap / bridge between chains
kit.openDepositFlow(); // deposit into the balance account

See UI for presentation, theming and customization.

Server side

On Node.js import the headless parts only: @hot-labs/kit/core and the chain entry point you sign with. They do not touch window and pull no React code.

import { Intents, OmniToken } from "@hot-labs/kit/core";
import { NearWallet } from "@hot-labs/kit/near";

const wallet = NearWallet.fromPrivateKey(privateKeyBytes, "my-account.near");

await Intents.builder(wallet)
  .give(OmniToken.USDT, 1)
  .take(OmniToken.USDC, 1)
  .execute();

Overview

Guides