npm package: @stochain/rn-crypto-components
Description: React Native crypto currency UI components
Author: Stochain
Latest version: 1.0.0

# @stochain/rn-crypto-components

React Native UI components for cryptocurrency applications.

## Installation

```bash
npm install @stochain/rn-crypto-components react-number-format
```

## Components

### LMCrypto

Display cryptocurrency values with formatting.

```tsx
import { LMCrypto } from '@stochain/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.

```tsx
import { LMFiat } from '@stochain/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.

```tsx
import { LMButton } from '@stochain/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.

```tsx
import { LMToast } from '@stochain/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

```tsx
import React from 'react';
import { View } from 'react-native';
import {
  LMCrypto,
  LMFiat,
  LMButton,
  LMToast
} from '@stochain/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