@hivemindhq/core

Shared components, utilities, and types for Revel8 applications.

Overview

This package provides common functionality shared between:

• hivemind-explorer - Web application for exploring the Intuition knowledge graph
• intuition-extension - Browser extension for Intuition insights

Installation

# Using pnpm (recommended)
pnpm add @hivemindhq/core

# Using npm
npm install @hivemindhq/core

# For local development (link)
cd revel8-core && pnpm link
cd ../hivemind-explorer && pnpm link @hivemindhq/core

Usage

Utilities

import { cn, truncateId, ipfsToHttp, formatCompact } from '@hivemindhq/core'

// Merge Tailwind classes
cn('px-4 py-2', isActive && 'bg-blue-500')

// Truncate atom/triple IDs for display
truncateId('0x123456789098765432') // '12345'

// Convert IPFS URIs to HTTP
ipfsToHttp('ipfs://QmHash123') // 'https://ipfs.io/ipfs/QmHash123'

// Format large numbers
formatCompact(1500000) // '1.5M'

Components

// UI primitives
import { Button, Card, Tooltip } from '@hivemindhq/core'

// Display components
import { CryptoAmount, AtomIcon, IpfsImage } from '@hivemindhq/core'

CryptoAmount Component

A unified component for displaying cryptocurrency amounts with optional fiat conversion.

import { CryptoAmount, createCryptoAmountRateProps } from '@hivemindhq/core'

// Basic usage - crypto on top, fiat below
<CryptoAmount
  value="1500000000000000000"  // 1.5 tokens in wei
  symbol="TRUST"
  exchangeRate={0.42}          // 1 TRUST = $0.42
  currencyCode="usd"
/>
// Renders:
// 1.5 TRUST
// $0.63

// Inline variant
<CryptoAmount
  value="1500000000000000000"
  symbol="TRUST"
  exchangeRate={0.42}
  variant="inline"
/>
// Renders: 1.5 TRUST (~$0.63)

// Compact variant (for large amounts)
<CryptoAmount
  value="1500000000000000000000000"  // 1.5M tokens
  symbol="TRUST"
  variant="compact"
/>
// Renders: 1.5M TRUST

// Crypto-only (no fiat)
<CryptoAmount
  value="1500000000000000000"
  symbol="TRUST"
  variant="crypto-only"
/>
// Renders: 1.5 TRUST

// Hook wrapper pattern for your app:
function useCryptoAmountProps() {
  const { data } = useExchangeRates()
  const { selectedCurrency } = useCurrency()
  return createCryptoAmountRateProps(data?.rate, selectedCurrency)
}

// Then in components:
const rateProps = useCryptoAmountProps()
<CryptoAmount value={stake} symbol="TRUST" {...rateProps} />

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | value | string \| bigint | required | Raw amount in smallest unit (wei) | | symbol | string | required | Token symbol (e.g., 'TRUST') | | decimals | number | 18 | Token decimals | | exchangeRate | number \| null | - | Fiat conversion rate (hides fiat if missing) | | currencyCode | string | 'USD' | Fiat currency code for formatting | | variant | 'default' \| 'inline' \| 'crypto-only' \| 'compact' | 'default' | Display variant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Size variant | | maxSignificantDigits | number | 10 | Digits before truncation (shows tooltip) |

Tailwind Configuration

Extend the shared Tailwind config in your app:

// tailwind.config.js
const sharedConfig = require('@hivemindhq/core/tailwind.config')

module.exports = {
  presets: [sharedConfig],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@hivemindhq/core/dist/**/*.js',
  ],
  // Your app-specific extensions...
}

Development

# Install dependencies
pnpm install

# Build the package
pnpm build

# Watch mode for development
pnpm dev

# Type check
pnpm typecheck

Package Structure

revel8-core/
├── src/
│   ├── index.ts              # Main entry point
│   ├── components/
│   │   ├── ui/               # shadcn/ui primitives
│   │   │   └── index.ts
│   │   └── display/          # Intuition display components
│   │       └── index.ts
│   ├── utils/
│   │   ├── index.ts
│   │   ├── cn.ts             # Class name utility
│   │   └── formatting.ts     # Formatting helpers
│   └── types/
│       └── index.ts          # Shared TypeScript types
├── tailwind.config.js        # Shared Tailwind configuration
├── tsconfig.json
├── tsup.config.ts            # Build configuration
└── package.json

Exports

The package provides multiple entry points:

| Import Path | Contents | |-------------|----------| | @hivemindhq/core | Everything (utils, components, types) | | @hivemindhq/core/utils | Utility functions only | | @hivemindhq/core/components/ui | UI primitives | | @hivemindhq/core/components/display | Display components |

Peer Dependencies

This package requires the following peer dependencies:

| Package | Version | |---------|---------| | react | ^18.0.0 || ^19.0.0 | | react-dom | ^18.0.0 || ^19.0.0 | | tailwindcss | ^3.0.0 || ^4.0.0 (optional) |

Adding New Components

1. Create the component in the appropriate directory
2. Export it from the directory's index.ts
3. Rebuild the package: pnpm build
4. Update consuming apps to use the new component

Migration Checklist

When migrating a component from a consuming app:

• [ ] Copy component to src/components/
• [ ] Update imports to use relative paths (no @/ or ~/ aliases)
• [ ] Ensure it only depends on:
  • Other @hivemindhq/core exports
  • Peer dependencies (React, etc.)
  • Direct dependencies listed in package.json
• [ ] Add export to the appropriate barrel file
• [ ] Test in both consuming apps
• [ ] Remove original from consuming apps

License

ISC © Kylan Hurt