@unifold/ui-react

@unifold/connect

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

Installation

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

Quick Start

Wrap your app with the UnifoldProvider:

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:

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:

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:

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

Development

# Install dependencies
pnpm install

# Build the SDK
pnpm build

# Watch mode
pnpm dev

License

MIT