# @unifold/connect

Unifold Connect SDK - Deposit and onramp components for React applications.

## Installation

```bash
pnpm add @unifold/connect
# or
npm install @unifold/connect
# or
yarn add @unifold/connect
```

## Quick Start

Wrap your app with the `UnifoldProvider`:

```tsx
import { UnifoldProvider } from "@unifold/connect";

function App() {
  return (
    <UnifoldProvider
      config={{
        publishableKey: "your_publishable_key",
        apiUrl: "https://api.unifold.com", // optional
        appName: "Your App Name",
      }}
    >
      <YourApp />
    </UnifoldProvider>
  );
}
```

## Usage

Use the `useUnifold` hook to trigger the deposit modal:

```tsx
import { useUnifold } from "@unifold/connect";

function DepositButton() {
  const { beginDeposit } = useUnifold();

  const handleDeposit = () => {
    beginDeposit({
      userId: "user_123",
      modalTitle: "Deposit USDC",
      destinationChainId: "137", // Polygon
      destinationTokenAddress: "0x2791bca1f2de4661ed88a30c99a7a9449aa84174", // USDC on Polygon
      onSuccess: ({ message }) => {
        console.log("Deposit successful!", message);
      },
      onError: ({ message }) => {
        console.error("Deposit failed:", message);
      },
    });
  };

  return <button onClick={handleDeposit}>Deposit</button>;
}
```

## Components

The SDK includes the following components that can also be used directly:

- `DepositModal` - The main deposit modal
- `TransferCrypto` - Crypto transfer component with QR code
- `BuyWithCard` - Card payment component with onramp providers
- `CurrencyModal` - Currency selection modal
- `StyledQRCode` - Styled QR code component

## API

The SDK exports all API functions for direct use:

```tsx
import {
  createDepositAddress,
  queryExecutions,
  getSupportedDepositTokens,
  getMeldQuotes,
  createMeldSession,
  getFiatCurrencies,
} from "@unifold/connect";
```

## Styling

The SDK uses Tailwind CSS for styling. Make sure to include the SDK's components in your Tailwind config:

```js
// tailwind.config.js
module.exports = {
  content: [
    // ... your paths
    "./node_modules/@unifold/connect/dist/**/*.{js,mjs}",
  ],
  // ... rest of your config
};
```

## Development

```bash
# Install dependencies
pnpm install

# Build the SDK
pnpm build

# Watch mode
pnpm dev
```

## License

MIT
