@swapper-finance/sdk/iframe-app/README.md

JavaScript SDK form Swapper

# Swapper SDK Iframe App

This is a Vite-based React application that provides the Swapper SDK as an iframe for integration into other applications.

## Setup

1. Ensure the main Swapper SDK has been built (`pnpm build` in the root directory)
2. Navigate to the iframe-app directory
3. Install dependencies:
   ```bash
   npm install
   ```

## Local Development

1. Start the development server:
   ```bash
   npm run dev
   ```

2. The application will be available at [http://localhost:3001](http://localhost:3001)

## Building for Production

1. Build the application:
   ```bash
   npm run build
   ```

2. The production-ready files will be available in the `build` directory

## Deployment

The app is configured to be deployed to Firebase Hosting.

1. Authenticate with Firebase (only needed once):
   ```bash
   npx firebase login
   ```

2. Deploy to Firebase:
   ```bash
   npm run deploy
   ```

Alternatively, you can use the provided scripts:
- On Windows: `deploy.bat`
- On Linux/Mac: `deploy.sh`

## Using the Iframe

To integrate the Swapper SDK iframe into your application, add the following iframe to your HTML:

```html
<iframe 
  src="https://swapper-sdk-iframe.web.app" 
  width="100%" 
  height="500px" 
  frameborder="0"
  allow="clipboard-write; camera; microphone"
></iframe>
```

You can customize the width and height as needed for your application.

### Styling and Configuration

The Swapper SDK supports a **3-tier styling system** for comprehensive customization:

1. **Theme Mode** - Light/dark theme selection
2. **Brand Theme** - Primary and secondary brand colors
3. **Component Styles** - Granular control over individual elements

#### Quick Style Example

```javascript
// Apply your brand colors
const styles = {
  themeMode: 'light',
  brandTheme: {
    primaryColor: '#FF6B35',      // Your primary brand color
    secondaryColor: '#004E89'     // Your secondary brand color
  }
};

const stylesParam = encodeURIComponent(JSON.stringify(styles));
const iframeSrc = `https://swapper-sdk-iframe.web.app?integratorId=YOUR_ID&styles=${stylesParam}`;
```

```html
<iframe 
  src="https://swapper-sdk-iframe.web.app?integratorId=YOUR_ID&styles=%7B%22themeMode%22%3A%22light%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%23FF6B35%22%7D%7D" 
  width="100%" 
  height="500px" 
  frameborder="0"
></iframe>
```

### Passing Configuration Parameters

You can pass configuration to the iframe through URL parameters:

```html
<iframe 
  src="https://swapper-sdk-iframe.web.app?integratorId=YOUR_ID&dstChain=ethereum" 
  width="100%" 
  height="500px" 
  frameborder="0"
></iframe>
```

## Comprehensive Documentation

For detailed integration instructions, complete styling examples, and all available configuration options, see [USAGE.md](./USAGE.md).

The USAGE.md file includes:
- Complete styling system documentation with all 3 tiers
- All available component style properties
- Multiple integration examples
- Color format support
- PostMessage API usage
- Responsive design patterns

## CI/CD

The iframe app is automatically built and deployed on pushes to the `main` and `develop` branches via GitHub Actions using the separate workflow in `.github/workflows/iframe-deploy.yml`.