UI - HEX docs

The kit renders its own popups with React into a container it adds to document.body. You don’t mount anything.

Popups

await kit.connect(); // wallet picker
await kit.openProfile({ initialTab: "portfolio" }); // "portfolio" | "withdraw" | "pendings" | a custom tab id
await kit.openBridge({ setup: { from, to, amount: 10 } }); // resolves with the confirmed swap review
await kit.openDepositFlow({ token, initialDepositTab: "external" }); // "external" (QR / address) | "connected"

Bridge presets

openBridge({ setup }) takes a BridgeSetup:

Field	Purpose
`from`, `to`	Preselected tokens (`Token`)
`amount`, `type`	Preset amount, `"exactIn"` or `"exactOut"`
`readonlyAmount`	The user cannot change the amount
`sender`, `recipient`, `lockRecipient`	Preset sides; lock the recipient
`tokenFilter`	`{ from?, to? }`: which tokens each picker offers
`title`, `autoClose`, `mobileFullscreen`	Presentation
`onSuccess(review)`	Called once the swap completed

Popups open as a right-side sheet by default (full screen on phones). Switch to a centered modal globally or per call:

import { HotKit, withPresentation } from "@hot-labs/kit";

const kit = new HotKit({ ui: { presentation: "modal" } });
kit.setUIOptions({ presentation: "sheet" }); // later; process-wide

kit.openProfile({ presentation: "modal" }); // per call
withPresentation("modal", () => kit.router.openDepositFlow(kit)); // any router popup

A popup opened from inside a sheet stays in that sheet. Resolution order: the per-call option, a sheet on screen, the global default.

Theme

new HotKit({
  ui: {
    loadFont: true, // Golos Text from Google Fonts, or pass a stylesheet URL
    theme: {
      colorScheme: "light",
      fontFamily: "Inter, sans-serif",
      colors: { textPrimary: "#111", textSecondary: "#666" },
      buttons: { primary: "linear-gradient(90deg, #6a5cff, #b25cff)" },
      radii: { popup: 24, button: 12 },
      zIndex: { popup: 1000, toast: 1100 },
      safeArea: true,
      toast: { placement: "bottom-right" },
      vars: { "--surface-primary": "#fff" },
    },
  },
});

The theme is one <style> scoped to .hot-kit; applyTheme(theme) changes it later and compileTheme(theme) returns the CSS for server rendering. Without a theme nothing is injected and the kit keeps its built-in look.

Branding

kit.setBranding({ balanceName: "My App", balanceIcon: "https://my.app/icon.png" });

Renames the balance account in the UI (“My App balance”, “Deposit to My App”).

Balance account

By default deposits go to the HOT (NEAR Intents) balance of the priority wallet. balanceAccount changes that:

new HotKit({
  balanceAccount: {
    chains: [Network.Omni],
    recipient: (kit) => myAppRecipient(kit), // undefined: not available yet
    locked: true, // the user cannot pick another recipient
    authorize: (kit) => signIn(kit), // the "Authorize account" button of a blocked deposit
    reserved: (token, wallet) => openOrdersAmount(token, wallet), // shown as locked, not spendable
  },
});

Custom profile tabs

const remove = kit.registerProfileTab({
  id: "rewards",
  label: "Rewards",
  order: 25, // built-ins: Portfolio 10, balance 20, Activity 30
  badge: (kit) => rewards.count,
  render: ({ kit }) => <Rewards kit={kit} />,
});

kit.openProfile({ initialTab: "rewards" });

render and badge run inside a MobX observer, so they may read observables.

External links

Inside a webview or a mini app, pass openExternal: (url) => openInSystemBrowser(url) to HotKit so explorer links and wallet deeplinks open the right way.

Overview

Guides

UI

Popups

Bridge presets

Theme

Branding

Balance account

Custom profile tabs

External links

Popups

Bridge presets

Sheet or modal

Theme

Branding

Balance account

Custom profile tabs

External links