@libertasinception/ui

React UI component kit — hooks for queries/transactions/subscriptions, wallet components, and white-label theming

Installation

npm install @libertasinception/ui

Quick Start

import {
  createHelixClientHook, createHelixQueryHook,
  createHelixTxHook, createHelixSubscriptionHook,
  createTheme,
} from "@libertasinception/ui";

const useHelix = createHelixClientHook({
  chainId: "n1a-security",
  rpcUrl: "https://rpc.libertasinception.com",
});
const useQuery = createHelixQueryHook(useHelix);
const useTx = createHelixTxHook(useHelix);
const useSub = createHelixSubscriptionHook(useHelix);

// White-label theme
const theme = createTheme({
  colors: { primary: "#FF6B2B", background: "#0F0F23", text: "#FFFFFF" },
  borderRadius: "12px",
  fontFamily: "'Inter', sans-serif",
});

Features

• React hooks: client, query, transaction, subscription
• Pre-built components: WalletButton, BalanceCard, TxForm, etc.
• White-label theme system with automatic contrast ratio validation
• Component registry for dynamic rendering
• TypeScript-first with full prop types

API Reference

Functions

• createHelixClientHook()
• createHelixQueryHook()
• createHelixTxHook()
• createHelixSubscriptionHook()
• createTheme()
• validateTheme()
• contrastRatio()
• getComponent()
• validateProps()

Types

• HelixClientConfig
• UseHelixClientResult
• UseHelixQueryResult
• UseHelixTxResult
• WalletButtonProps
• BalanceCardProps
• ComponentTheme

Dependencies

• @libertasinception/core
• zod

Requirements

• Node.js >= 18.0.0
• TypeScript >= 5.7 (recommended)

Links

• Documentation
• Guides
• Tutorials
• GitLab

License

MIT - see LICENSE for details.