@zerohash-sdk/fund-withdrawals-react 0.2.0 → 0.2.2

package/README.md

@@ -1,7 +1,78 @@
 # @zerohash-sdk/fund-withdrawals-react
 
-This library was generated with [Nx](https://nx.dev).
+A React SDK for embedding the Zerohash Fund Withdrawals flow into web applications. Lets users withdraw assets from their Fund account to an external destination.
 
-## Running unit tests
+## Requirements
 
-Run `nx test @zerohash-sdk/fund-withdrawals-react` to execute the unit tests via [Vitest](https://vitest.dev/).
+- React 18.0.0 or higher
+- React DOM 18.0.0 or higher
+
+## Installation
+
+```bash
+npm install @zerohash-sdk/fund-withdrawals-react
+```
+
+## Getting Started
+
+### 1. Import the FundWithdrawals component
+
+```tsx
+import { FundWithdrawals } from '@zerohash-sdk/fund-withdrawals-react';
+```
+
+### 2. Add it to your app
+
+```tsx
+function App() {
+  const jwt = 'your-jwt-token';
+
+  return (
+    <FundWithdrawals
+      jwt={jwt}
+      env="prod"
+      theme="auto"
+      isPayouts={false}
+    />
+  );
+}
+```
+
+### 3. Configure event callbacks (optional)
+
+```tsx
+<FundWithdrawals
+  jwt={jwt}
+  env="prod"
+  theme="auto"
+  onCompleted={({ externalAccountId, assetSymbol, amount }) => {
+    console.log(`Withdrew ${amount} ${assetSymbol} to ${externalAccountId}`);
+  }}
+  onError={({ errorCode, reason }) => console.error(errorCode, reason)}
+  onClose={() => console.log('Widget closed')}
+  onEvent={(event) => console.log('Event:', event)}
+  onLoaded={() => console.log('Widget ready')}
+/>
+```
+
+## API Reference
+
+### FundWithdrawals 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`  | When true, renders the Payouts flow instead of the standard Fund Withdrawals flow. |
+| `onCompleted` | `({ externalAccountId, assetSymbol, amount }) => void` | No       | -        | Callback when the withdrawal is successfully initiated                             |
+| `onError`     | `({ errorCode, reason }) => void`                      | No       | -        | Callback for error events                                                          |
+| `onClose`     | `() => void`                                           | No       | -        | Callback when the widget is closed                                                 |
+| `onEvent`     | `(event) => void`                                      | No       | -        | Callback for general events                                                        |
+| `onLoaded`    | `() => void`                                           | No       | -        | Callback when the widget is loaded and ready                                       |
+
+`onCompleted` payload shape: `{ externalAccountId: string; assetSymbol: string; amount: string }`.
+
+## More Information & Support
+
+For comprehensive documentation, visit the [Zerohash Documentation Page](https://docs.zerohash.com/).

package/dist/index.js

@@ -4,36 +4,36 @@ const b = {
   dev: "https://connect-sdk.dev.0hash.com/fund-withdrawals-web/index.js",
   cert: "https://sdk.sandbox.connect.xyz/fund-withdrawals-web/index.js",
   prod: "https://sdk.connect.xyz/fund-withdrawals-web/index.js"
-}, y = "zerohash-fund-withdrawals-script", u = "zerohash-fund-withdrawals", I = (s = "prod") => b[s], j = ({
-  jwt: s,
+}, y = "zerohash-fund-withdrawals-script", p = "zerohash-fund-withdrawals", I = (c = "prod") => b[c], j = ({
+  jwt: c,
   env: r = "prod",
-  theme: p,
-  isPayouts: c = !1,
-  onCompleted: n,
-  onError: d,
+  theme: s,
+  isPayouts: n = !1,
+  onCompleted: d,
+  onError: i,
   onClose: o,
-  onLoaded: i,
-  onEvent: a,
+  onLoaded: a,
+  onEvent: l,
   ...w
 }) => {
-  const l = x(null);
+  const f = x(null);
   return h(() => {
-    const t = l.current;
-    t && (t.isPayouts = c, n && (t.onCompleted = n), d && (t.onError = d), o && (t.onClose = o), i && (t.onLoaded = i), a && (t.onEvent = a));
-  }, [c, n, d, o, i, a]), h(() => {
-    const t = I(r), f = `${y}-${r}`;
-    if (document.getElementById(f))
+    const t = f.current;
+    t && (t.isPayouts = n, s !== void 0 && (t.theme = s), d && (t.onCompleted = d), i && (t.onError = i), o && (t.onClose = o), a && (t.onLoaded = a), l && (t.onEvent = l));
+  }, [n, s, d, i, o, a, l]), h(() => {
+    const t = I(r), u = `${y}-${r}`;
+    if (document.getElementById(u))
       return;
     const e = document.createElement("script");
-    e.id = f, e.src = t, e.type = "module", e.async = !0, e.onerror = () => {
-      console.error(`Failed to load the script for ${u} from ${r} environment.`);
+    e.id = u, e.src = t, e.type = "module", e.async = !0, e.onerror = () => {
+      console.error(`Failed to load the script for ${p} from ${r} environment.`);
     }, document.head.appendChild(e);
-  }, [r]), m.createElement(u, {
-    ref: l,
-    jwt: s,
+  }, [r]), m.createElement(p, {
+    ref: f,
+    jwt: c,
     env: r,
-    theme: p,
-    "is-payouts": c ? "true" : "false",
+    theme: s,
+    "is-payouts": n ? "true" : "false",
     ...w
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerohash-sdk/fund-withdrawals-react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",