@zerohash-sdk/crypto-account-link-react 1.0.1

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/README.md

@@ -0,0 +1,124 @@
+# @zerohash-sdk/crypto-account-link-react
+
+A React SDK that enables frontend React applications to seamlessly integrate with the Connect Crypto Account Link product.
+
+Connect Crypto Account Link provides a secure, customizable flow for linking external crypto accounts (for deposits or payouts) directly within your application.
+
+## Requirements
+
+- React 18.0.0 or higher
+- React DOM 18.0.0 or higher
+
+## Installation
+
+```bash
+npm install @zerohash-sdk/crypto-account-link-react
+```
+
+## Getting Started
+
+### 1. Import the CryptoAccountLink Component
+
+```tsx
+import { CryptoAccountLink } from '@zerohash-sdk/crypto-account-link-react';
+```
+
+### 2. Add the CryptoAccountLink Component to Your App
+
+```tsx
+function App() {
+  const jwt = 'your-jwt-token'; // Obtain this from your backend
+
+  return (
+    <CryptoAccountLink
+      jwt={jwt}
+      env="prod" // or "cert" for testing
+      theme="auto" // 'auto' (default), 'light', or 'dark'
+    />
+  );
+}
+```
+
+### 3. Configure Event Callbacks (Optional)
+
+```tsx
+function App() {
+  const jwt = 'your-jwt-token';
+
+  return (
+    <CryptoAccountLink
+      jwt={jwt}
+      env="prod"
+      theme="auto"
+      isPayouts={false} // true for payouts/withdrawals, false for deposits
+      onCompleted={({ externalAccountId, address, nickname, asset, network }) => {
+        console.log('Account linked:', externalAccountId, address);
+      }}
+      onExternalAccountCreated={() => {
+        console.log('External account created');
+      }}
+      onError={({ errorCode, reason }) => {
+        console.log('Error:', errorCode, 'Reason:', reason);
+      }}
+      onClose={() => console.log('Widget closed')}
+      onEvent={({ type, data }) => console.log('Event:', type, data)}
+      onLoaded={() => console.log('Widget loaded and ready')}
+    />
+  );
+}
+```
+
+## Complete Example
+
+```tsx
+import React from 'react';
+import { CryptoAccountLink } from '@zerohash-sdk/crypto-account-link-react';
+
+function App() {
+  const jwt = 'your-jwt-token';
+
+  return (
+    <div className="App">
+      <h1>My App</h1>
+
+      <CryptoAccountLink
+        jwt={jwt}
+        env="prod"
+        theme="auto"
+        isPayouts={false}
+        onCompleted={({ externalAccountId, address, nickname, asset, network }) => {
+          console.log('Linked:', externalAccountId, address, nickname, asset, network);
+        }}
+        onExternalAccountCreated={() => console.log('External account created')}
+        onError={({ errorCode, reason }) => console.log('Error:', errorCode, reason)}
+        onClose={() => console.log('Widget closed')}
+        onEvent={({ type, data }) => console.log('Event type:', type, 'Event data:', data)}
+        onLoaded={() => console.log('Widget loaded and ready')}
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## API Reference
+
+### CryptoAccountLink Component Props
+
+| Prop                       | Type                                                                      | Required | Default  | Description                                                 |
+| -------------------------- | ------------------------------------------------------------------------- | -------- | -------- | ----------------------------------------------------------- |
+| `jwt`                      | `string`                                                                  | Yes      | -        | JWT token for authentication with Connect                   |
+| `env`                      | `"prod" \| "cert" \| "dev" \| "local"`                                    | No       | `"prod"` | Target environment                                          |
+| `theme`                    | `"auto" \| "light" \| "dark"`                                             | No       | `"auto"` | Theme mode for the interface                                |
+| `isPayouts`                | `boolean`                                                                 | No       | `false`  | Set to `true` for payouts/withdrawals, `false` for deposits |
+| `onCompleted`              | `({ externalAccountId?, address?, nickname?, asset?, network? }) => void` | No       | -        | Callback when account linking completes successfully        |
+| `onExternalAccountCreated` | `() => void`                                                              | No       | -        | Callback when an external account is created                |
+| `onError`                  | `({ errorCode, reason }) => void`                                         | No       | -        | Callback for error events                                   |
+| `onClose`                  | `() => void`                                                              | No       | -        | Callback when the widget is closed                          |
+| `onEvent`                  | `({ type, data }) => void`                                                | No       | -        | Callback for general events                                 |
+| `onLoaded`                 | `() => void`                                                              | No       | -        | Callback when the widget is loaded and ready                |
+
+## More Information & Support
+
+For comprehensive documentation or support about Connect, visit our [Documentation Page](https://docs.zerohash.com/).

package/dist/index.d.ts

@@ -0,0 +1,277 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Generic app event structure
+ * @template TType - Event type string
+ * @template TData - Event data payload
+ */
+declare type AppEvent<TType extends string = string, TData = Record<string, unknown>> = {
+    /** The type of event that occurred */
+    type: TType;
+    /** Data associated with the event */
+    data: TData;
+};
+
+/**
+ * A React wrapper component for the Connect Crypto Account Link product.
+ *
+ * @param props - Component properties
+ * @param jwt - JWT token for authentication (required)
+ * @param env - Target environment ("local" | "dev" | "cert" | "prod", defaults to "prod")
+ * @param theme - Theme mode ("auto" | "light" | "dark", defaults to "auto")
+ * @param isPayouts - Whether this is for payouts (withdrawals) or deposits (defaults to false)
+ * @param onCompleted - Callback invoked when the account link flow is successfully completed
+ * @param onError - Callback invoked when an error occurs
+ * @param onClose - Callback invoked when the user closes the widget
+ * @param onLoaded - Callback invoked when the widget has finished loading
+ * @param onExternalAccountCreated - Callback invoked when an external account is created
+ * @param onEvent - Callback invoked for general application events
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with production environment (default)
+ * <CryptoAccountLink jwt="your-jwt-token" />
+ *
+ * // Using cert environment for testing
+ * <CryptoAccountLink jwt="your-jwt-token" env="cert" />
+ *
+ * // Force dark theme
+ * <CryptoAccountLink jwt="your-jwt-token" theme="dark" />
+ *
+ * // For payouts/withdrawals
+ * <CryptoAccountLink jwt="your-jwt-token" isPayouts={true} />
+ *
+ * // With callback functions
+ * <CryptoAccountLink
+ *   jwt="your-jwt-token"
+ *   theme="auto"
+ *   onLoaded={() => console.log('Crypto account link loaded and ready')}
+ *   onCompleted={(data) => console.log('Account linked successfully', data)}
+ *   onClose={() => console.log('Crypto account link closed')}
+ *   onError={({ errorCode, reason }) => console.error('Error:', errorCode, reason)}
+ *   onEvent={(event) => console.log('Event:', event)}
+ *   onExternalAccountCreated={() => console.log('External account created')}
+ * />
+ * ```
+ *
+ * @returns React component that renders the Connect Crypto Account Link interface
+ */
+export declare const CryptoAccountLink: default_2.FC<CryptoAccountLinkProps>;
+
+declare interface CryptoAccountLinkCompletedData {
+    externalAccountId?: string;
+    address?: string;
+    nickname?: string;
+    asset?: string;
+    network?: string;
+}
+
+/**
+ * Crypto account link event structure
+ */
+declare type CryptoAccountLinkEvent = AppEvent<CryptoAccountLinkEventType>;
+
+/**
+ * Crypto account link event type literals
+ */
+declare type CryptoAccountLinkEventType = string;
+
+declare interface CryptoAccountLinkProps {
+    /**
+     * JWT token used for authentication with the Connect Crypto Account Link service.
+     * This token should be obtained from your backend and contain the necessary
+     * claims for user identification and authorization.
+     *
+     * @example "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+     */
+    jwt: string;
+    /**
+     * Target environment for the Connect Crypto Account Link service.
+     *
+     * @default "prod"
+     *
+     * Available environments:
+     * - `"local"` - Local development environment
+     * - `"dev"` - Development environment
+     * - `"cert"` - Certificate/staging environment for integration testing
+     * - `"prod"` - Live production environment for real applications
+     *
+     * @example
+     * ```tsx
+     * // Use production (default)
+     * <CryptoAccountLink jwt={token} />
+     *
+     * // Use cert for testing
+     * <CryptoAccountLink jwt={token} env="cert" />
+     * ```
+     */
+    env?: Environment;
+    /**
+     * Theme mode for the Connect Crypto Account Link interface.
+     *
+     * @default "auto"
+     *
+     * Available themes:
+     * - `"auto"` - Automatically detect system preference (light/dark mode)
+     * - `"light"` - Force light theme
+     * - `"dark"` - Force dark theme
+     *
+     * @example
+     * ```tsx
+     * // Auto-detect system preference (default)
+     * <CryptoAccountLink jwt={token} />
+     *
+     * // Force dark theme
+     * <CryptoAccountLink jwt={token} theme="dark" />
+     * ```
+     */
+    theme?: Theme;
+    /**
+     * Whether this is for payouts (withdrawals) or deposits.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * // For deposits (default)
+     * <CryptoAccountLink jwt={token} />
+     *
+     * // For payouts/withdrawals
+     * <CryptoAccountLink jwt={token} isPayouts={true} />
+     * ```
+     */
+    isPayouts?: boolean;
+    /**
+     * Callback invoked when the crypto account link flow is successfully completed.
+     *
+     * @param data - Details about the completed account link
+     *
+     * @example
+     * ```tsx
+     * <CryptoAccountLink
+     *   jwt={token}
+     *   onCompleted={(data) =>
+     *     console.log('Account linked successfully', data)
+     *   }
+     * />
+     * ```
+     */
+    onCompleted?: (data: CryptoAccountLinkCompletedData) => void;
+    /**
+     * Callback invoked when an error occurs during the crypto account link flow.
+     *
+     * @param error - Error details including error code and reason
+     *
+     * @example
+     * ```tsx
+     * <CryptoAccountLink
+     *   jwt={token}
+     *   onError={({ errorCode, reason }) =>
+     *     console.error('Crypto account link error:', errorCode, reason)
+     *   }
+     * />
+     * ```
+     */
+    onError?: (error: ErrorPayload) => void;
+    /**
+     * Callback invoked when the user closes the crypto account link widget.
+     *
+     * @example
+     * ```tsx
+     * <CryptoAccountLink
+     *   jwt={token}
+     *   onClose={() => setShowCryptoAccountLink(false)}
+     * />
+     * ```
+     */
+    onClose?: () => void;
+    /**
+     * Callback invoked when the crypto account link widget has finished loading and is ready.
+     *
+     * @example
+     * ```tsx
+     * <CryptoAccountLink
+     *   jwt={token}
+     *   onLoaded={() => setIsLoading(false)}
+     * />
+     * ```
+     */
+    onLoaded?: () => void;
+    /**
+     * Callback invoked when an external account is created.
+     *
+     * @example
+     * ```tsx
+     * <CryptoAccountLink
+     *   jwt={token}
+     *   onExternalAccountCreated={() => console.log('External account created')}
+     * />
+     * ```
+     */
+    onExternalAccountCreated?: () => void;
+    /**
+     * Callback invoked for general application events during the crypto account link flow.
+     *
+     * @param event - Event object containing the event type and associated data
+     *
+     * @example
+     * ```tsx
+     * <CryptoAccountLink
+     *   jwt={token}
+     *   onEvent={(event) => console.log('Crypto account link event:', event)}
+     * />
+     * ```
+     */
+    onEvent?: (event: CryptoAccountLinkEvent) => void;
+}
+
+/**
+ * Available environments for the Connect Crypto Account Link service.
+ *
+ * - `"local"` - Local development environment (http://localhost:4204)
+ * - `"dev"` - Development environment for early-stage testing
+ * - `"cert"` - Certificate/staging environment for integration testing
+ * - `"prod"` - Live production environment for real applications
+ */
+declare type Environment = 'local' | 'dev' | 'cert' | 'prod';
+
+/**
+ * Generic error codes for all Connect applications
+ */
+declare enum ErrorCode {
+    /** Network connectivity error */
+    NETWORK_ERROR = 'network_error',
+    /** Authentication or session expired error */
+    AUTH_ERROR = 'auth_error',
+    /** Resource not found error */
+    NOT_FOUND_ERROR = 'not_found_error',
+    /** Validation error from user input */
+    VALIDATION_ERROR = 'validation_error',
+    /** Server error (5xx) */
+    SERVER_ERROR = 'server_error',
+    /** Client error (4xx) */
+    CLIENT_ERROR = 'client_error',
+    /** Unknown or unexpected error */
+    UNKNOWN_ERROR = 'unknown_error',
+}
+
+/**
+ * Generic error payload structure for error callbacks
+ */
+declare type ErrorPayload = {
+    /** Error code indicating the type of error */
+    errorCode: ErrorCode;
+    /** Human-readable reason for the error */
+    reason: string;
+};
+
+/**
+ * Theme mode for the Connect Crypto Account Link interface.
+ *
+ * - `"auto"` - Automatically detect system preference (light/dark mode)
+ * - `"light"` - Force light theme
+ * - `"dark"` - Force dark theme
+ */
+declare type Theme = 'auto' | 'light' | 'dark';
+
+export { }

package/dist/index.js

@@ -0,0 +1,43 @@
+import k, { useRef as x, useEffect as a } from "react";
+const b = {
+  local: "http://localhost:5173/crypto-account-link-web/index.js",
+  dev: "https://connect-sdk.dev.0hash.com/crypto-account-link-web/index.js",
+  cert: "https://sdk.sandbox.connect.xyz/crypto-account-link-web/index.js",
+  prod: "https://sdk.connect.xyz/crypto-account-link-web/index.js"
+}, I = "zerohash-crypto-account-link-script", f = "zerohash-crypto-account-link", R = (o = "prod") => b[o], w = ({
+  jwt: o,
+  env: e = "prod",
+  theme: h,
+  isPayouts: y = !1,
+  onCompleted: r,
+  onError: n,
+  onClose: s,
+  onLoaded: i,
+  onExternalAccountCreated: p,
+  onEvent: d,
+  ...m
+}) => {
+  const l = x(null);
+  return a(() => {
+    const t = l.current;
+    t && (r && (t.onCompleted = r), n && (t.onError = n), s && (t.onClose = s), i && (t.onLoaded = i), p && (t.onExternalAccountCreated = p), d && (t.onEvent = d));
+  }, [r, n, s, i, p, d]), a(() => {
+    const t = R(e), u = `${I}-${e}`;
+    if (document.getElementById(u))
+      return;
+    const c = document.createElement("script");
+    c.id = u, c.src = t, c.type = "module", c.async = !0, c.onerror = () => {
+      console.error(`Failed to load the script for ${f} from ${e} environment.`);
+    }, document.head.appendChild(c);
+  }, [e]), k.createElement(f, {
+    ref: l,
+    jwt: o,
+    env: e,
+    theme: h,
+    "is-payouts": y,
+    ...m
+  });
+};
+export {
+  w as CryptoAccountLink
+};

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@zerohash-sdk/crypto-account-link-react",
+  "version": "1.0.1",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "nx": {
+    "name": "crypto-account-link-react"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/crypto-account-link-react';

package/src/lib/crypto-account-link-react.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes.
+ *
+ * Example:
+ * .container {
+ * }
+ */

package/src/lib/crypto-account-link-react.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { CryptoAccountLink } from './crypto-account-link-react';
+
+describe('CryptoAccountLink', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<CryptoAccountLink jwt="test-token" />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/src/lib/crypto-account-link-react.tsx

@@ -0,0 +1,339 @@
+/* eslint-disable @typescript-eslint/no-namespace */ import type {
+  CryptoAccountLinkCompletedData,
+  CryptoAccountLinkEvent,
+  ErrorPayload,
+} from '@zerohash/callbacks';
+import React, { useEffect, useRef } from 'react';
+
+const SCRIPT_URLS = {
+  local: 'http://localhost:5173/crypto-account-link-web/index.js',
+  dev: 'https://connect-sdk.dev.0hash.com/crypto-account-link-web/index.js',
+  cert: 'https://sdk.sandbox.connect.xyz/crypto-account-link-web/index.js',
+  prod: 'https://sdk.connect.xyz/crypto-account-link-web/index.js',
+} as const;
+
+const SCRIPT_ID = 'zerohash-crypto-account-link-script';
+const WEB_COMPONENT_TAG = 'zerohash-crypto-account-link';
+
+/**
+ * Available environments for the Connect Crypto Account Link service.
+ *
+ * - `"local"` - Local development environment (http://localhost:4204)
+ * - `"dev"` - Development environment for early-stage testing
+ * - `"cert"` - Certificate/staging environment for integration testing
+ * - `"prod"` - Live production environment for real applications
+ */
+type Environment = 'local' | 'dev' | 'cert' | 'prod';
+
+/**
+ * Theme mode for the Connect Crypto Account Link interface.
+ *
+ * - `"auto"` - Automatically detect system preference (light/dark mode)
+ * - `"light"` - Force light theme
+ * - `"dark"` - Force dark theme
+ */
+type Theme = 'auto' | 'light' | 'dark';
+
+const getScriptUrl = (env: Environment = 'prod'): string => {
+  return SCRIPT_URLS[env];
+};
+
+interface CryptoAccountLinkProps {
+  /**
+   * JWT token used for authentication with the Connect Crypto Account Link service.
+   * This token should be obtained from your backend and contain the necessary
+   * claims for user identification and authorization.
+   *
+   * @example "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+   */
+  jwt: string;
+
+  /**
+   * Target environment for the Connect Crypto Account Link service.
+   *
+   * @default "prod"
+   *
+   * Available environments:
+   * - `"local"` - Local development environment
+   * - `"dev"` - Development environment
+   * - `"cert"` - Certificate/staging environment for integration testing
+   * - `"prod"` - Live production environment for real applications
+   *
+   * @example
+   * ```tsx
+   * // Use production (default)
+   * <CryptoAccountLink jwt={token} />
+   *
+   * // Use cert for testing
+   * <CryptoAccountLink jwt={token} env="cert" />
+   * ```
+   */
+  env?: Environment;
+
+  /**
+   * Theme mode for the Connect Crypto Account Link interface.
+   *
+   * @default "auto"
+   *
+   * Available themes:
+   * - `"auto"` - Automatically detect system preference (light/dark mode)
+   * - `"light"` - Force light theme
+   * - `"dark"` - Force dark theme
+   *
+   * @example
+   * ```tsx
+   * // Auto-detect system preference (default)
+   * <CryptoAccountLink jwt={token} />
+   *
+   * // Force dark theme
+   * <CryptoAccountLink jwt={token} theme="dark" />
+   * ```
+   */
+  theme?: Theme;
+
+  /**
+   * Whether this is for payouts (withdrawals) or deposits.
+   *
+   * @default false
+   *
+   * @example
+   * ```tsx
+   * // For deposits (default)
+   * <CryptoAccountLink jwt={token} />
+   *
+   * // For payouts/withdrawals
+   * <CryptoAccountLink jwt={token} isPayouts={true} />
+   * ```
+   */
+  isPayouts?: boolean;
+
+  /**
+   * Callback invoked when the crypto account link flow is successfully completed.
+   *
+   * @param data - Details about the completed account link
+   *
+   * @example
+   * ```tsx
+   * <CryptoAccountLink
+   *   jwt={token}
+   *   onCompleted={(data) =>
+   *     console.log('Account linked successfully', data)
+   *   }
+   * />
+   * ```
+   */
+  onCompleted?: (data: CryptoAccountLinkCompletedData) => void;
+
+  /**
+   * Callback invoked when an error occurs during the crypto account link flow.
+   *
+   * @param error - Error details including error code and reason
+   *
+   * @example
+   * ```tsx
+   * <CryptoAccountLink
+   *   jwt={token}
+   *   onError={({ errorCode, reason }) =>
+   *     console.error('Crypto account link error:', errorCode, reason)
+   *   }
+   * />
+   * ```
+   */
+  onError?: (error: ErrorPayload) => void;
+
+  /**
+   * Callback invoked when the user closes the crypto account link widget.
+   *
+   * @example
+   * ```tsx
+   * <CryptoAccountLink
+   *   jwt={token}
+   *   onClose={() => setShowCryptoAccountLink(false)}
+   * />
+   * ```
+   */
+  onClose?: () => void;
+
+  /**
+   * Callback invoked when the crypto account link widget has finished loading and is ready.
+   *
+   * @example
+   * ```tsx
+   * <CryptoAccountLink
+   *   jwt={token}
+   *   onLoaded={() => setIsLoading(false)}
+   * />
+   * ```
+   */
+  onLoaded?: () => void;
+
+  /**
+   * Callback invoked when an external account is created.
+   *
+   * @example
+   * ```tsx
+   * <CryptoAccountLink
+   *   jwt={token}
+   *   onExternalAccountCreated={() => console.log('External account created')}
+   * />
+   * ```
+   */
+  onExternalAccountCreated?: () => void;
+
+  /**
+   * Callback invoked for general application events during the crypto account link flow.
+   *
+   * @param event - Event object containing the event type and associated data
+   *
+   * @example
+   * ```tsx
+   * <CryptoAccountLink
+   *   jwt={token}
+   *   onEvent={(event) => console.log('Crypto account link event:', event)}
+   * />
+   * ```
+   */
+  onEvent?: (event: CryptoAccountLinkEvent) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * Connect Crypto Account Link web component element
+       */
+      [WEB_COMPONENT_TAG]: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+        /**
+         * JWT token for authentication
+         */
+        jwt: string;
+        /**
+         * Target environment ("local" | "dev" | "cert" | "prod")
+         */
+        env?: Environment;
+        /**
+         * Theme mode ("auto" | "light" | "dark")
+         */
+        theme?: Theme;
+        /**
+         * Whether this is for payouts (withdrawals) or deposits
+         */
+        'is-payouts'?: boolean;
+      };
+    }
+  }
+}
+
+interface CryptoAccountLinkElement
+  extends HTMLElement,
+    Pick<
+      CryptoAccountLinkProps,
+      'onCompleted' | 'onError' | 'onClose' | 'onLoaded' | 'onEvent' | 'onExternalAccountCreated'
+    > {}
+
+/**
+ * A React wrapper component for the Connect Crypto Account Link product.
+ *
+ * @param props - Component properties
+ * @param jwt - JWT token for authentication (required)
+ * @param env - Target environment ("local" | "dev" | "cert" | "prod", defaults to "prod")
+ * @param theme - Theme mode ("auto" | "light" | "dark", defaults to "auto")
+ * @param isPayouts - Whether this is for payouts (withdrawals) or deposits (defaults to false)
+ * @param onCompleted - Callback invoked when the account link flow is successfully completed
+ * @param onError - Callback invoked when an error occurs
+ * @param onClose - Callback invoked when the user closes the widget
+ * @param onLoaded - Callback invoked when the widget has finished loading
+ * @param onExternalAccountCreated - Callback invoked when an external account is created
+ * @param onEvent - Callback invoked for general application events
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with production environment (default)
+ * <CryptoAccountLink jwt="your-jwt-token" />
+ *
+ * // Using cert environment for testing
+ * <CryptoAccountLink jwt="your-jwt-token" env="cert" />
+ *
+ * // Force dark theme
+ * <CryptoAccountLink jwt="your-jwt-token" theme="dark" />
+ *
+ * // For payouts/withdrawals
+ * <CryptoAccountLink jwt="your-jwt-token" isPayouts={true} />
+ *
+ * // With callback functions
+ * <CryptoAccountLink
+ *   jwt="your-jwt-token"
+ *   theme="auto"
+ *   onLoaded={() => console.log('Crypto account link loaded and ready')}
+ *   onCompleted={(data) => console.log('Account linked successfully', data)}
+ *   onClose={() => console.log('Crypto account link closed')}
+ *   onError={({ errorCode, reason }) => console.error('Error:', errorCode, reason)}
+ *   onEvent={(event) => console.log('Event:', event)}
+ *   onExternalAccountCreated={() => console.log('External account created')}
+ * />
+ * ```
+ *
+ * @returns React component that renders the Connect Crypto Account Link interface
+ */
+export const CryptoAccountLink: React.FC<CryptoAccountLinkProps> = ({
+  jwt,
+  env = 'prod',
+  theme,
+  isPayouts = false,
+  onCompleted,
+  onError,
+  onClose,
+  onLoaded,
+  onExternalAccountCreated,
+  onEvent,
+  ...rest
+}) => {
+  const ref = useRef<CryptoAccountLinkElement | null>(null);
+
+  // Set up callback functions on the web component element
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    if (onCompleted) element.onCompleted = onCompleted;
+    if (onError) element.onError = onError;
+    if (onClose) element.onClose = onClose;
+    if (onLoaded) element.onLoaded = onLoaded;
+    if (onExternalAccountCreated) element.onExternalAccountCreated = onExternalAccountCreated;
+    if (onEvent) element.onEvent = onEvent;
+  }, [onCompleted, onError, onClose, onLoaded, onExternalAccountCreated, onEvent]);
+
+  // Load connect script to render the web component.
+  useEffect(() => {
+    const scriptUrl = getScriptUrl(env);
+    const scriptId = `${SCRIPT_ID}-${env}`;
+
+    if (document.getElementById(scriptId)) {
+      return; // Script already loaded, do nothing.
+    }
+
+    const script = document.createElement('script');
+    script.id = scriptId;
+    script.src = scriptUrl;
+    script.type = 'module';
+    script.async = true;
+    script.onerror = () => {
+      console.error(`Failed to load the script for ${WEB_COMPONENT_TAG} from ${env} environment.`);
+    };
+
+    document.head.appendChild(script);
+
+    // Note: We don't return a cleanup function to remove the script.
+    // The script defines the custom element globally for the entire application,
+    // so it should remain even if all component instances are unmounted.
+  }, [env]); // Re-run if environment changes
+
+  return React.createElement(WEB_COMPONENT_TAG, {
+    ref,
+    jwt,
+    env,
+    theme,
+    'is-payouts': isPayouts,
+    ...rest,
+  });
+};

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,42 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": ["node", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts", "vite/client"],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
+  "references": [
+    {
+      "path": "../../../common/callbacks/tsconfig.lib.json"
+    }
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,30 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node", "vitest"],
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,58 @@
+/// <reference types='vitest' />
+import react from '@vitejs/plugin-react';
+import * as path from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../../node_modules/.vite/src/crypto-account-link/sdks/react',
+  plugins: [
+    react(),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+      rollupTypes: true, // Bundle all type dependencies
+      bundledPackages: ['@zerohash/callbacks'], // Explicitly bundle callbacks types
+    }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@zerohash-sdk/crypto-account-link-react',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+  test: {
+    name: '@zerohash-sdk/crypto-account-link-react',
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    },
+  },
+}));