@zerohash-sdk/fund-react

A React SDK that enables frontend React applications to seamlessly integrate with the Connect Fund product.

Connect Fund provides a secure, customizable flow for funding accounts via crypto deposits directly within your application.

Requirements

• React 18.0.0 or higher
• React DOM 18.0.0 or higher

Installation

npm install @zerohash-sdk/fund-react

Getting Started

Follow these simple steps to integrate Connect Fund into your React application:

1. Import the Fund Component

import { Fund } from '@zerohash-sdk/fund-react';

2. Add the Fund Component to Your App

function App() {
  const jwt = 'your-jwt-token'; // Obtain this from your backend

  return (
    <Fund
      jwt={jwt}
      env="prod" // or "cert" for testing
      theme="auto" // 'auto' (default), 'light', or 'dark'
    />
  );
}

3. Configure Event Callbacks (Optional)

Listen to events from the Fund SDK to handle user interactions:

function App() {
  const jwt = 'your-jwt-token';

  const handleCompleted = ({ assetSymbol, amount, network, depositAddress }) => {
    console.log('Fund completed:', amount, assetSymbol, network, depositAddress);
  };

  const handleError = ({ errorCode, reason }) => {
    console.log('Fund error:', errorCode, 'Reason:', reason);
  };

  const handleClose = () => {
    console.log('Fund widget closed');
  };

  const handleEvent = ({ type, data }) => {
    console.log('Fund event:', type, 'Data:', data);
  };

  const handleLoaded = () => {
    console.log('Fund widget loaded and ready');
  };

  return (
    <Fund
      jwt={jwt}
      env="prod"
      theme="auto"
      onCompleted={handleCompleted}
      onError={handleError}
      onClose={handleClose}
      onEvent={handleEvent}
      onLoaded={handleLoaded}
    />
  );
}

Complete Example

Here's a full example of integrating Connect Fund into your React application:

import React from 'react';
import { Fund } from '@zerohash-sdk/fund-react';

function App() {
  // JWT token should be obtained from your backend
  const jwt = 'your-jwt-token';

  return (
    <div className="App">
      <h1>My Crypto App</h1>

      <Fund
        jwt={jwt}
        env="prod" // 'prod' (default), 'cert', 'dev', or 'local'
        theme="auto" // 'auto' (default), 'light', or 'dark'
        onCompleted={({ assetSymbol, amount, network, depositAddress }) => {
          console.log('Funded:', amount, assetSymbol, 'on', network);
          console.log('Deposit address:', depositAddress);
        }}
        onError={({ errorCode, reason }) => {
          console.log('Error:', errorCode, 'Reason:', reason);
        }}
        onClose={() => {
          console.log('Fund widget closed');
        }}
        onEvent={({ type, data }) => {
          console.log('Event type:', type, 'Event data:', data);
        }}
        onLoaded={() => {
          console.log('Fund widget loaded and ready');
        }}
      />
    </div>
  );
}

export default App;

API Reference

Fund 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 | | isPay | boolean | No | false | Run the SDK in Pay mode (see notes below) | | onCompleted | ({ assetSymbol, amount, network, depositAddress }) => void | No | - | Callback when the fund flow 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 |

Pay mode (isPay)

When isPay is true, the Fund SDK runs in Pay mode:

• Uses the pay-sdk app id and the app:internal:pay scope when calling trade-api.
• Signs the account_funding_pay terms agreement.

More Information & Support

For comprehensive documentation or support about Connect, visit our Documentation Page.