Air Money React UI Library

A comprehensive React UI library built with TypeScript, providing reusable components, hooks, and utilities for the Air Money application ecosystem. This library is designed for external developers to easily integrate Air Money's UI components into their applications.

📦 Installation

npm install @airmoney-degn/react-ui
# or
yarn add @airmoney-degn/react-ui
# or
pnpm add @airmoney-degn/react-ui

🚀 Quick Start

Basic Setup

import React from 'react';
import { AppProvider, Button, useApp } from '@airmoney-degn/react-ui';
import '@airmoney-degn/react-ui/style.css';

function App() {
  return (
    <AppProvider>
      <MyComponent />
    </AppProvider>
  );
}

function MyComponent() {
  const { setLog } = useApp();
  
  return (
    <Button 
      onClick={() => setLog('Button clicked!')}
      backgroundColor="#468DFF"
      textColor="white"
    >
      Click me
    </Button>
  );
}

export default App;

🎨 Components

UI Components

Button

A customizable button component with focus and active states.

import { Button } from '@airmoney-degn/react-ui';

<Button 
  backgroundColor="#468DFF"
  textColor="white"
  focused={true}
  active={false}
  onClick={() => console.log('Clicked')}
>
  Click me
</Button>

LoadingButton

Button with integrated loading state.

import { LoadingButton } from '@airmoney-degn/react-ui';

<LoadingButton 
  loading={isLoading}
  onClick={handleSubmit}
>
  Submit
</LoadingButton>

ErrorMessage

Display error messages with consistent styling.

import { ErrorMessage } from '@airmoney-degn/react-ui';

<ErrorMessage error={errorMessage} />

SimpleLoading

Loading indicator component.

import { SimpleLoading } from '@airmoney-degn/react-ui';

<SimpleLoading />

Input Components

NumberInput

Numeric input with cursor support.

import { NumberInput } from '@airmoney-degn/react-ui';

<NumberInput 
  cursorIndex={2}
  cursorActive={true}
>
  123.45
</NumberInput>

NumPad

Interactive numeric keypad.

import { NumPad } from '@airmoney-degn/react-ui';

<NumPad 
  value={inputValue}
  onChange={setInputValue}
  onError={(error) => console.error(error)}
  decimalPlaces={2}
/>

BlockSelector

Block-based selection component.

import { BlockSelector } from '@airmoney-degn/react-ui';

<BlockSelector 
  options={['Option 1', 'Option 2', 'Option 3']}
  value={selectedValue}
  onChange={setSelectedValue}
/>

CarouselSelector

Carousel-based selection with smooth animations.

import { CarouselSelector } from '@airmoney-degn/react-ui';

<CarouselSelector 
  options={items}
  value={selectedItem}
  onChange={setSelectedItem}
  loop={false}
/>

Display Components

Chart

Advanced charting component with candlestick and volume support.

import { Chart } from '@airmoney-degn/react-ui';

<Chart 
  candlestickData={chartData}
  volumeData={volumeData}
  intervalValue="1D"
  intervalName="1 Day"
  showVolumeChart={true}
  intervalFocused={true}
  intervalActive={false}
/>

ColoredValue

Value display with color coding for positive/negative values.

import { ColoredValue } from '@airmoney-degn/react-ui';

<ColoredValue 
  value={123.45}
  positiveColor="#14C784"
  negativeColor="#EA3943"
  zeroColor="#9E9E9E"
/>

CoinBadge

Cryptocurrency badge component.

import { CoinBadge } from '@airmoney-degn/react-ui';

<CoinBadge 
  symbol="BTC"
  name="Bitcoin"
  icon={<BitcoinIcon />}
/>

Keyboard Components

Keyboard

Full keyboard input component.

import { Keyboard } from '@airmoney-degn/react-ui';

<Keyboard 
  value={inputValue}
  onChange={setInputValue}
  onEnter={handleSubmit}
  disabled={false}
/>

KeyboardInput

Text input with keyboard integration.

import { KeyboardInput } from '@airmoney-degn/react-ui';

<KeyboardInput 
  value={textValue}
  onChange={setTextValue}
  placeholder="Enter text..."
/>

KeyboardMaskedInput

Masked input for sensitive data.

import { KeyboardMaskedInput } from '@airmoney-degn/react-ui';

<KeyboardMaskedInput 
  value={password}
  onChange={setPassword}
  showCharacters={false}
  placeholder="Enter password"
/>

Layout Components

Frame

Main container component.

import { Frame } from '@airmoney-degn/react-ui';

<Frame>
  <YourContent />
</Frame>

CenteredFlex

Flex container with centered content.

import { CenteredFlex } from '@airmoney-degn/react-ui';

<CenteredFlex>
  <div>Centered content</div>
</CenteredFlex>

Icons

The library includes a comprehensive set of icons:

import { Icons } from '@airmoney-degn/react-ui';

const {
  BitcoinIcon,
  EthereumIcon,
  SolanaIcon,
  USDCIcon,
  USDTIcon,
  AccountIcon,
  TradeIcon,
  StakeIcon,
  // ... and many more
} = Icons;

<BitcoinIcon />
<EthereumIcon />
<AccountIcon />

🎣 Hooks

Navigation Hooks

useCarousel

Carousel navigation hook with configurable behavior.

import { useCarousel } from '@airmoney-degn/react-ui';

const [value, controls] = useCarousel(['A', 'B', 'C'], {
  loop: false,        // Non-looping by default
  throttleMs: 100     // Throttle navigation
});

// Controls
controls.goNext();    // Go to next item
controls.goPrev();    // Go to previous item
controls.goTo(1);     // Go to specific index
controls.goToById('B'); // Go to item by ID (for object arrays)

useBack

Handle back navigation.

import { useBack } from '@airmoney-degn/react-ui';

const { goBack, canGoBack } = useBack();

if (canGoBack) {
  goBack();
}

Input Hooks

useDeviceButton

Handle device button interactions.

import { useDeviceButton } from '@airmoney-degn/react-ui';

const { setLeftButton, setRightButton, setBothButtons } = useDeviceButton();

// Set button with image and function
setLeftButton('button-image.png', () => {
  console.log('Left button pressed');
});

// Set button with multiple actions
setRightButton('button-image.png', [
  { keyAction: 'press', fn: () => console.log('Pressed') },
  { keyAction: 'longpressdown', fn: () => console.log('Long press down') }
]);

useKeyEventListener

Listen to keyboard events.

import { useKeyEventListener } from '@airmoney-degn/react-ui';

useKeyEventListener('Enter', () => {
  console.log('Enter key pressed');
});

State Management Hooks

usePairValue

Manage paired values (e.g., currency pairs).

import { usePairValue } from '@airmoney-degn/react-ui';

const { 
  value, 
  usdValue, 
  setValue, 
  setUsdValue 
} = usePairValue({
  defaultUsdValue: 100,
  exchangeRate: 0.000025
});

useNetworkStatus

Monitor network connectivity.

import { useNetworkStatus } from '@airmoney-degn/react-ui';

const { isOnline, isChecking } = useNetworkStatus();

useThrottle

Throttle function calls for performance.

import { useThrottle } from '@airmoney-degn/react-ui';

const throttledFunction = useThrottle(100); // 100ms throttle

const handleScroll = () => {
  throttledFunction(() => {
    console.log('Scroll event throttled');
  });
};

Utility Hooks

useLatestCallback

Ensure callback always has latest values.

import { useLatestCallback } from '@airmoney-degn/react-ui';

const latestCallback = useLatestCallback((value) => {
  console.log('Latest value:', value);
});

useScrollIntoView

Scroll element into view.

import { useScrollIntoView } from '@airmoney-degn/react-ui';

const scrollRef = useScrollIntoView();

<div ref={scrollRef}>This will scroll into view</div>

useFitText

Auto-adjusts font size so that text fits within its container.

import { useFitText } from '@airmoney-degn/react-ui';

const { fontSize, textRef } = useFitText({
  text: "This is a long text that needs to fit",
  minFontSize: 12,
  maxFontSize: 48
});

<div style={{ width: 200, height: 100 }}>
  <span 
    ref={textRef} 
    style={{ fontSize: `${fontSize}px` }}
  >
    {text}
  </span>
</div>

🛠️ Utilities

Formatter

Comprehensive formatting utilities.

import { 
  currency, 
  percentize, 
  round, 
  formatAddress,
  display 
} from '@airmoney-degn/react-ui';

// Currency formatting
currency(1234.56, { prefix: '$' }); // "$1,234.56"

// Percentage formatting
percentize(0.1234, 1); // 12.3

// Rounding
round(123.456, 2); // 123.46

// Address formatting
formatAddress('0x1234567890abcdef'); // "0x1234...cdef"

// Display with loading state
display(value, { 
  loading: isLoading,
  transform: (v) => `$${v}` 
});

Validation

Input validation utilities.

import { 
  isNumber, 
  isNumberLike, 
  toNumberOrZero,
  toNumberOrUndefined 
} from '@airmoney-degn/react-ui';

isNumber(123); // true
isNumberLike("123.45"); // true
toNumberOrZero("abc"); // 0
toNumberOrUndefined("123"); // 123

🎨 Styling

The library uses Tailwind CSS with a custom am- prefix to avoid conflicts. Import the CSS file:

import '@airmoney-degn/react-ui/style.css';

Custom CSS Variables

The library supports CSS custom properties for theming:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... more variables */
}

🔧 Configuration

AppProvider Setup

Wrap your app with the AppProvider for full functionality:

import { AppProvider, useApp } from '@airmoney-degn/react-ui';

function App() {
  return (
    <AppProvider>
      <YourApp />
    </AppProvider>
  );
}

function YourApp() {
  const { 
    logs, 
    setLog, 
    leftImage, 
    setLeftImage, 
    rightImage, 
    setRightImage,
    shift,
    setShift,
    keyEventManager 
  } = useApp();
  
  // Use the context values
  return <div>Your app content</div>;
}

TypeScript Support

The library is fully typed with TypeScript. All components, hooks, and utilities include comprehensive type definitions.

📱 Device Integration

This library is designed to work with Air Money's hardware devices. It includes:

• Device button handling
• Key event management
• Image display on device screens
• Hardware-specific interactions

🔄 Migration Guide

From v7 to v8

• Carousel behavior changed to non-looping by default
• Some deprecated hooks were removed
• Updated controller SDK integration

From v6 to v7

• Updated controller SDK to version 6.2.0
• Enhanced AppProvider with backToHome functionality
• Improved network status handling

📚 Examples

Complete Form Example

import React, { useState } from 'react';
import { 
  AppProvider, 
  Button, 
  NumberInput, 
  NumPad, 
  useCarousel,
  useApp 
} from '@airmoney-degn/react-ui';

function FormExample() {
  const [amount, setAmount] = useState('0');
  const [currency, setCurrency] = useState('USD');
  const { setLog } = useApp();
  
  const [selectedCurrency, controls] = useCarousel(
    ['USD', 'EUR', 'BTC', 'ETH'],
    { loop: false }
  );
  
  const handleSubmit = () => {
    setLog(`Submitted: ${amount} ${selectedCurrency}`);
  };
  
  return (
    <div>
      <NumberInput cursorIndex={amount.length}>
        {amount}
      </NumberInput>
      
      <NumPad 
        value={amount}
        onChange={setAmount}
        decimalPlaces={2}
      />
      
      <div>
        Currency: {selectedCurrency}
        <button onClick={controls.goNext}>Next</button>
        <button onClick={controls.goPrev}>Prev</button>
      </div>
      
      <Button onClick={handleSubmit}>
        Submit
      </Button>
    </div>
  );
}

function App() {
  return (
    <AppProvider>
      <FormExample />
    </AppProvider>
  );
}

Chart Example

import React from 'react';
import { Chart } from '@airmoney-degn/react-ui';

function ChartExample() {
  const candlestickData = [
    { time: '2023-01-01', open: 100, high: 110, low: 95, close: 105 },
    { time: '2023-01-02', open: 105, high: 115, low: 100, close: 110 },
    // ... more data
  ];
  
  const volumeData = [
    { time: '2023-01-01', value: 1000 },
    { time: '2023-01-02', value: 1200 },
    // ... more data
  ];
  
  return (
    <Chart 
      candlestickData={candlestickData}
      volumeData={volumeData}
      intervalValue="1D"
      intervalName="1 Day"
      showVolumeChart={true}
      intervalFocused={false}
      intervalActive={false}
    />
  );
}

🤝 Contributing

This library is maintained by the Air Money team. For issues and feature requests, please contact the development team.

📄 License

This project is proprietary and confidential. All rights reserved.

🔗 Related Packages

• @airmoney-degn/controller-sdk - Core SDK for Air Money devices
• @airmoney-degn/eslint-config - ESLint configuration
• @airmoney-degn/prettier-config - Prettier configuration

📞 Support

For technical support and questions, please contact the Air Money development team.