Skip to content

feat(ui): add @biochain/key-utils and @biochain/key-ui packages - #213

Merged
Gaubee merged 4 commits into
mainfrom
feat/key-ui-library
Jan 11, 2026
Merged

Gaubee merged 4 commits into
mainfrom
feat/key-ui-library

Conversation

@Gaubee

@Gaubee Gaubee commented Jan 11, 2026

Copy link
Copy Markdown
Contributor

Summary

Introduce shared UI component library following Base-UI architecture for KeyApp and MiniApps.

New Packages

@biochain/key-utils

  • cn() - className merging (clsx + tailwind-merge)
  • formatAmount() - amount formatting with compact mode (K/M/B)
  • truncateAddress() - address truncation with presets (compact/standard/detailed)
  • measureText() - canvas text measurement
  • useCopyToClipboard() - clipboard hook

@biochain/key-ui

  • AddressDisplay - smart truncation + copy (with useAddressDisplay hook)
  • AmountDisplay - animated numbers + compact mode
  • AmountWithFiat - amount + fiat value display
  • TokenIcon - compound component (Root/Image/Fallback)
  • useRenderElement - unified rendering abstraction (Base-UI style)

Architecture

Follows Base-UI patterns:

  • Compound Components (TokenIcon.Root / TokenIcon.Image / TokenIcon.Fallback)
  • render prop for custom rendering
  • State-based className functions
  • namespace exports (AddressDisplay.Props, AddressDisplay.State)

Documentation

White-book updated:

  • docs/white-book/03-UI-Ref/06-KeyUI/00-Overview.md
  • docs/white-book/03-UI-Ref/06-KeyUI/01-AddressDisplay.md
  • docs/white-book/03-UI-Ref/06-KeyUI/02-AmountDisplay.md
  • docs/white-book/03-UI-Ref/06-KeyUI/03-TokenIcon.md

Next Steps

  • Migrate miniapps (forge/teleport) to use @biochain/key-ui components
  • Gradually migrate more components from KeyApp main app

Introduce shared UI component library following Base-UI architecture:

packages/key-utils:
- cn() - className merging (clsx + tailwind-merge)
- formatAmount() - amount formatting with compact mode
- truncateAddress() - address truncation with presets
- measureText() - canvas text measurement
- useCopyToClipboard() - clipboard hook

packages/key-ui:
- AddressDisplay - smart truncation + copy (with useAddressDisplay hook)
- AmountDisplay - animated numbers + compact mode
- AmountWithFiat - amount + fiat value display
- TokenIcon - compound component (Root/Image/Fallback)
- useRenderElement - unified rendering abstraction

White-book documentation added for all components.
Ensure key-utils is built before key-ui typecheck runs.
- Remove unused imports (formatNumberToString, KeyUIComponentProps)
- Fix aria-role: change 'text' to 'img'
- Fix eqeqeq: use !== instead of !=
- Replace 'any' types with 'unknown', 'object', or specific types
- Add eslint-disable comments for intentional exhaustive-deps violations
- Use English string for accessibility status
@Gaubee
Gaubee merged commit 3d6cf15 into main Jan 11, 2026
5 checks passed
@Gaubee
Gaubee deleted the feat/key-ui-library branch January 11, 2026 12:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant