@mlabs-haskell/feesaswap-components

React components for FeesaSwap integration

Installation

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):

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

Step 2: Use the component

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)

/* 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

/* 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:

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:

<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 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:

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

Development

Building

npm run build

Type Checking

npm run type-check

License

MIT