Herald Exchange Onramp-Offramp SDK Widget

Herald Exchange Onramp-Offramp SDK Widget is a simple component for React applications.

Installation

You can install Herald Exchange Onramp-Offramp SDK Widget via npm:

npm install herald-exchange-sdk
# or
yarn add herald-exchange-sdk

Usage

To use widget in your React application, follow these steps:

import WidgetComponent from "herald-exchange-sdk";

Initialize the widget:

To Generate API Key Please Visit : Herald Exchange.
Supported Token Types : ["USDT", "USDC", "ETH", "BNB", "MATIC", "SOL", "TRX"]

<WidgetComponent
  apiKey={YOUR_API_KEY}
  clientReferenceID={YOUR_CLIENT_REFERENCE_ID}
  redirectUrl={REDIRECT_URL}
  buyParameters={{ from_amount: "25", token_type: "USDC" }}
  sellParameters={{
    from_amount: "25",
    from_currency: "USDT",
    to_currency: "USD",
  }}
  defaultTab="sell"
  mode="development"
/>

Note:

• In development mode, the widget operates on testnet and runs in a sandbox environment.
• Transactions are simulated based on the fromAmount value:
  • 100 → Success
  • 200 → Failure
  • Any other value → Initiated
• In development mode, when you'll be manually entering a transaction hash, ensure the hash is valid, and that the amount and currency match the transaction. If they don’t, the simulation will fail.
• In production mode, the widget uses mainnet to process real transactions.
• ⚠️ Ensure your application is deployed in a production environment when going live to enable accurate transaction tracking and wallet interactions.

🔧 Props

apiKey (required)

• Type: string

• Description: A unique API key generated via the Herald Exchange App.

• This key is used to authenticate and authorize the widget.

• Example: 4bb06e2fdbfb8e392a0ab49e4d9819ae072dcef82d79af7893625a5ff1416f

mode (optional)

• Type: string

• Allowed Values: "development" | "production"

• Default: "development"

• Description: Specifies the environment in which the widget runs.

  • "development" is used for testing and debugging purposes.

  • "production" should be used in live environments for optimized performance.

clientReferenceID (required)

• Type: string

• Description: A unique identifier (UUID) generated via the Herald Exchange App, used to associate a transaction with a specific user or session.

• Helps track user activity and transaction flow.

• Example: 34edd6d6-eb12-422f-bd0e-63c5733527

redirectUrl (optional)

• Type: string

• Description: The URL to which the user will be redirected after completing the transaction.

• A callback will be made to this URL along with the transaction result or status as query parameters or payload (depending on the integration).

• Example: https://yourapp.com/transaction-complete

buyParameters (required)

• Type:

{
  from_amount: string;
  token_type: string;
}

• Description: Defines the default configuration for the buy flow.

  • from_amount: A string representing the default amount to be displayed in the input field (e.g., "25").

  • token_type: The token that should be selected by default for purchase (e.g., "USDC").

⚠️ If the passed token_type is not active, the widget will automatically fall back to the first activated token.

sellParameters (required)

• Type:

{
  from_amount: string;
  from_currency: string;
  to_currency: string;
}

• Description: Defines the default configuration for the sell flow.

  • from_amount: A string representing the default amount to sell (e.g., "25").

  • from_currency: The token the user wants to sell (e.g., "USDT").

  • to_currency: The currency the user wants to receive (e.g., "USD").

⚠️ If the selected currencies are not available or not active, the widget will default to the first available currency pair.

defaultTab (optional)

• Type: "buy" | "sell"

• Description: Sets the default selected tab when the widget loads.

  • Use "buy" to default to the buy flow.

  • Use "sell" to default to the sell flow.

• Example: "sell"

License

This project is licensed under the MIT License - see the LICENSE file for details.