npm package: @mlabs-haskell/feesaswap-components
Description: React components for FeesaSwap integration
Author: MLabs
Latest version: 0.1.4

# @mlabs-haskell/feesaswap-components

React components for FeesaSwap integration

## Installation

```bash
npm install @mlabs-haskell/feesaswap-components
```

## Quick Start

**Step 1: Import the CSS styles**

Add this to your app's root file (e.g., `_app.tsx` in Next.js or `index.tsx` in Create React App):

```tsx
import '@mlabs-haskell/feesaswap-components/styles';
```

**Step 2: Use the component**

```tsx
import React from 'react';
import { FeesaSwap } from '@mlabs-haskell/feesaswap-components';

function MyDApp() {
  // Your dApp logic here that generates an unbalanced transaction.
  // This could be from your transaction builder, smart contract interaction, etc.
  const unbalancedTxCbor = buildMyTransaction();
  
  const handleTransactionSubmitted = (txId: string) => {
    console.log('Transaction submitted:', txId);
  };

  const handleError = (error: Error) => {
    console.error('FeesaSwap error:', error);
  };

  return (
    <div style={{ width: '600px' }}>
      {/* The user should have already connected their wallet before you
          display the FeesaSwap component */}
      <FeesaSwap
        network="mainnet"
        unbalancedTransaction={{ cbor: unbalancedTxCbor }}
        wallet="lace"
        onTransactionSubmitted={handleTransactionSubmitted}
        onError={handleError}
      />
    </div>
  );
}
```

## Component Props

### FeesaSwap

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `network` | `CardanoNetwork` | ✅ | "mainnet", "preprod", or "preview" |
| `unbalancedTransaction` | `UnbalancedTransaction` | ✅ | The unbalanced transaction CBOR from your dApp |
| `wallet` | `string` | ✅ | Wallet name string (e.g., "lace", "eternl", "vespr") |
| `apiBaseUrl` | `string` | ❌ | API server URL |
| `theme` | `FeesaSwapTheme` | ❌ | Custom theme configuration |
| `onTransactionSubmitted` | `(txId: string) => void` | ❌ | Callback when transaction is successfully submitted |
| `onError` | `(error: Error) => void` | ❌ | Error callback |
| `className` | `string` | ❌ | Additional CSS class names |

## Theming

### Customizing Styles

After importing the default styles with `import '@mlabs-haskell/feesaswap-components/styles'`, you can customize the appearance by overriding CSS variables or classes in your own CSS.

**Option 1: CSS Custom Properties (Recommended)**
```css
/* In your global CSS or component CSS */
:root {
  --fs-primary-color: #007bff;
  --fs-background-color: #ffffff;
  --fs-border-color: #e2e8f0;
  --fs-border-radius: 8px;
  --fs-text-color: #1a1a1a;
  --fs-font-family: system-ui, -apple-system, sans-serif;
  /* ... more variables */
}
```

**Option 2: Direct Class Overrides**
```css
/* Override specific component styles */
.feesaswap-component {
  background: #f8f9fa;
  border: 2px solid #dee2e6;
}

.fs-submit-button {
  background: #28a745;
  font-weight: bold;
}
```

### Theme Object

You can also pass a theme object as a prop:

```tsx
const customTheme = {
  primaryColor: '#ff6b35',
  backgroundColor: '#f8f9fa',
  borderRadius: '12px',
  fontFamily: 'Inter, sans-serif',
};

<FeesaSwap theme={customTheme} {...otherProps} />
```

### Dark Theme

Add the `fs-dark` class to enable dark theme:

```tsx
<div className="fs-dark">
  <FeesaSwap {...props} />
</div>
```

## Components

This package includes:

- **FeesaSwap**: Main component for fee payment integration
- **CurrencySelector**: Component for selecting fee payment assets

## SDK Integration

This components package depends on and integrates with [@mlabs-haskell/feesaswap-sdk](https://www.npmjs.com/package/@mlabs-haskell/feesaswap-sdk) for API communication. The SDK is automatically included as a dependency, but you could also use it directly in any project, including non-React projects.

## Peer Dependencies

This package requires React 16.8.0 or higher:

```json
{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0"
}
```

## Development

### Building

```bash
npm run build
```

### Type Checking

```bash
npm run type-check
```

## License

MIT