> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hex-api.app/llms.txt
> Use this file to discover all available pages before exploring further.

# UI

> The kit's popups: connect, profile, bridge and deposit; sheet or modal; theme, branding, balance account and custom profile tabs.

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

## Popups

```ts theme={null}
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 |

## Sheet or modal

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

```ts theme={null}
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

```ts theme={null}
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

```ts theme={null}
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:

```ts theme={null}
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

```tsx theme={null}
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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.