@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

npm install @zerohash-sdk/crypto-account-link-react

Getting Started

1. Import the CryptoAccountLink Component

import { CryptoAccountLink } from '@zerohash-sdk/crypto-account-link-react';

2. Add the CryptoAccountLink Component to Your App

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)

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

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.