@unifold/ui-react 0.1.1

package/README.md

@@ -0,0 +1,121 @@
+# @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 {
+  createEOA,
+  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