@connect-xyz/withdraw-react

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

Connect Withdraw provides a secure way for end users to withdraw their funds. Learn more in the Connect Withdraw documentation.

Requirements

• React 18.0.0 or higher
• React DOM 18.0.0 or higher

Installation

npm install @connect-xyz/withdraw-react

Getting Started

Follow these simple steps to integrate Withdraw into your React application:

1. Import the Withdraw Component

import { Withdraw } from '@connect-xyz/withdraw-react';

2. Add the Withdraw Component to Your App

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

  return (
    <Withdraw
      jwt={jwt}
      env="production" // or "sandbox" for testing
    />
  );
}

3. Configure Event Callbacks (Optional)

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

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

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

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

  const handleWithdrawal = ({ data }) => {
    console.log('Withdrawal data:', data);
  };

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

  return (
    <Withdraw
      jwt={jwt}
      env="production"
      onError={handleError}
      onClose={handleClose}
      onWithdrawal={handleWithdrawal}
      onEvent={handleEvent}
    />
  );
}

For detailed information about callback events and their payloads, see the Connect SDKs Callbacks documentation.

Complete Example

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

import React from 'react';
import { Withdraw } from '@connect-xyz/withdraw-react';

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

  // Choose environment: "production" for live apps, "sandbox" for testing
  const environment = 'production';

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

      <Withdraw
        jwt={jwt}
        env={environment}
        onError={({ errorCode, reason }) => {
          console.log('Error:', errorCode, 'Reason:', reason);
        }}
        onClose={() => {
          console.log('Withdraw widget closed');
        }}
        onWithdrawal={({ data }) => {
          console.log('Withdrawal successful:', data);
        }}
        onEvent={({ type, data }) => {
          console.log('Event type:', type, 'Event data:', data);
        }}
      />
    </div>
  );
}

export default App;

API Reference

Withdraw Component Props

| Prop | Type | Required | Default | Description | | -------------- | --------------------------------- | -------- | -------------- | -------------------------------------------------- | | jwt | string | Yes | - | JWT token for authentication with Connect Withdraw | | env | "production" \| "sandbox" | No | "production" | Target environment | | theme | "auto" \| "light" \| "dark" | No | "auto" | Theme mode for the interface | | onError | ({ errorCode, reason }) => void | No | - | Callback for error events | | onClose | () => void | No | - | Callback when the widget is closed | | onWithdrawal | ({ data }) => void | No | - | Callback for withdrawal completed | | onEvent | ({ type, data }) => void | No | - | Callback for general events |

More Information & Support

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