@chain1/rn-crypto-components

React Native UI components for cryptocurrency applications.

Installation

npm install @chain1/rn-crypto-components react-number-format

Components

LMCrypto

Display cryptocurrency values with formatting.

import { LMCrypto } from '@chain1/rn-crypto-components';

<LMCrypto value={1.23456} symbol="BNB" decimalScale={3} />
// Output: 1.235 BNB

Props:

• value (number | string): The crypto value
• symbol (string, optional): Currency symbol (default: 'BNB')
• decimalScale (number, optional): Decimal places (default: 3)
• style (TextStyle, optional): Custom text style

LMFiat

Display fiat currency values with conversion.

import { LMFiat } from '@chain1/rn-crypto-components';

<LMFiat value={1} rate={300} symbol="USD" decimalScale={2} />
// Output: 300.00 USD

Props:

• value (number | string): The base value
• symbol (string, optional): Fiat symbol (default: 'USD')
• rate (number, optional): Conversion rate (default: 1)
• decimalScale (number, optional): Decimal places (default: 2)
• style (TextStyle, optional): Custom text style

LMButton

Customizable button component with variants.

import { LMButton } from '@chain1/rn-crypto-components';

<LMButton
  label="Swap"
  variant="primary"
  onPress={() => console.log('pressed')}
/>

Props:

• label (string): Button text
• variant ('primary' | 'secondary' | 'outline', optional): Button style
• style (ViewStyle, optional): Custom container style
• labelStyle (TextStyle, optional): Custom text style
• All TouchableOpacity props

Variants:

• primary: Yellow background (#F0B90B)
• secondary: Dark background (#3C3C3C)
• outline: Transparent with border

LMToast

Toast and alert utilities.

import { LMToast } from '@chain1/rn-crypto-components';

// Success toast
LMToast.success({
  title: 'Success',
  text: 'Transaction completed',
  callback: () => console.log('dismissed')
});

// Error toast
LMToast.error({
  title: 'Error',
  text: 'Transaction failed'
});

// Confirmation dialog
LMToast.confirm({
  title: 'Confirm',
  message: 'Are you sure?',
  confirmText: 'Yes',
  cancelText: 'No',
  callback: () => console.log('confirmed')
});

Methods:

• success(data): Show success message
• error(data): Show error message
• popupSuccess(data): Show success popup
• popupError(data): Show error popup
• confirm(data): Show confirmation dialog

Example

import React from 'react';
import { View } from 'react-native';
import {
  LMCrypto,
  LMFiat,
  LMButton,
  LMToast
} from '@chain1/rn-crypto-components';

const WalletScreen = () => {
  const handleSwap = () => {
    LMToast.confirm({
      title: 'Confirm Swap',
      message: 'Swap 1 BNB for 300 USDT?',
      callback: () => {
        // Execute swap
        LMToast.success({
          title: 'Swap Complete',
          text: 'Successfully swapped'
        });
      }
    });
  };

  return (
    <View>
      <LMCrypto value={1.234567} symbol="BNB" />
      <LMFiat value={1.234567} rate={300} symbol="USD" />
      <LMButton label="Swap" variant="primary" onPress={handleSwap} />
    </View>
  );
};

License

MIT