@zerohash-sdk/fiat-account-link-react 1.1.0

package/README.md

@@ -0,0 +1,116 @@
+# @zerohash-sdk/fiat-account-link-react
+
+A React SDK that enables frontend React applications to seamlessly integrate with the Connect Fiat Account Link product.
+
+Connect Fiat Account Link provides a secure, customizable flow for linking external bank accounts directly within your application.
+
+## Requirements
+
+- React 18.0.0 or higher
+- React DOM 18.0.0 or higher
+
+## Installation
+
+```bash
+npm install @zerohash-sdk/fiat-account-link-react
+```
+
+## Getting Started
+
+### 1. Import the FiatAccountLink Component
+
+```tsx
+import { FiatAccountLink } from '@zerohash-sdk/fiat-account-link-react';
+```
+
+### 2. Add the FiatAccountLink Component to Your App
+
+```tsx
+function App() {
+  const jwt = 'your-jwt-token'; // Obtain this from your backend
+
+  return (
+    <FiatAccountLink
+      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 (
+    <FiatAccountLink
+      jwt={jwt}
+      env="prod"
+      theme="auto"
+      onCompleted={({ externalAccountId, institutionName }) => {
+        console.log('Account linked:', externalAccountId, institutionName);
+      }}
+      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 { FiatAccountLink } from '@zerohash-sdk/fiat-account-link-react';
+
+function App() {
+  const jwt = 'your-jwt-token';
+
+  return (
+    <div className="App">
+      <h1>My App</h1>
+
+      <FiatAccountLink
+        jwt={jwt}
+        env="prod"
+        theme="auto"
+        onCompleted={({ externalAccountId, institutionName }) => {
+          console.log('Linked:', externalAccountId, institutionName);
+        }}
+        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
+
+### FiatAccountLink 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                         |
+| `onCompleted` | `({ externalAccountId, institutionName }) => void` | No       | -        | Callback when account linking completes successfully |
+| `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,90 @@
+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;
+};
+
+/**
+ * Available environments for the Connect Fiat Account Link service.
+ */
+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;
+};
+
+/**
+ * A React wrapper component for the Connect Fiat Account Link product.
+ */
+export declare const FiatAccountLink: default_2.FC<FiatAccountLinkProps>;
+
+declare type FiatAccountLinkCompletedData = {
+    /** The external account ID returned after successful linking */
+    externalAccountId: string;
+    /** The name of the institution linked */
+    institutionName: string;
+};
+
+declare type FiatAccountLinkEvent = AppEvent<FiatAccountLinkEventType>;
+
+declare type FiatAccountLinkEventType = string;
+
+declare interface FiatAccountLinkProps {
+    /** JWT token used for authentication */
+    jwt: string;
+    /** Target environment. Defaults to "prod" */
+    env?: Environment;
+    /** Theme mode. Defaults to "auto" */
+    theme?: Theme;
+    /** Called when the account is successfully linked */
+    onCompleted?: (data: FiatAccountLinkCompletedData) => void;
+    /** Called when an error occurs */
+    onError?: (error: ErrorPayload) => void;
+    /** Called when the user closes the widget */
+    onClose?: () => void;
+    /** Called when the widget has finished loading */
+    onLoaded?: () => void;
+    /** Called for general application events */
+    onEvent?: (event: FiatAccountLinkEvent) => void;
+}
+
+/**
+ * Theme mode for the Connect Fiat Account Link interface.
+ */
+declare type Theme = 'auto' | 'light' | 'dark';
+
+export { }

package/dist/index.js

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

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@zerohash-sdk/fiat-account-link-react",
+  "version": "1.1.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "nx": {
+    "name": "fiat-account-link-react"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  }
+}