React Webhook Integration Component

A React component for integrating TradingView webhooks with trading platforms. This component provides a user interface for generating webhook URLs and JSON payloads that can be used to connect TradingView alerts with trading accounts.

Features

• Generate and manage webhook URLs with configurable expiry periods
• Create custom order JSON payloads
• Support for both custom orders and basket orders
• Real-time URL and JSON copying functionality
• Built-in validation and error handling
• Responsive design with mobile support
• Integration with trading platforms

Installation

npm install trading-webhook-component

Dependencies

This component requires the following peer dependencies:

{
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0",
  "moment": "^2.29.0",
  "react-outside-click-handler": "^1.3.0"
}

Usage

import { Webhook } from 'trading-webhook-component';

function App() {
  return (
    <Webhook 
      closeWebHookModal={() => {}} 
      platform="5PTRADE"
      style={{ width: '800px' }} 
    />
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | closeWebHookModal | function | No | Callback function to close the webhook modal | | style | CSSProperties | No | Custom styles to apply to the component | | platform | "5PTRADE" | "Derivative360" | Yes | Trading platform identifier |

Component Structure

The component consists of three main sections:

1. URL Generation

   • Generate webhook URLs with customizable validity periods
   • Copy URL functionality
   • URL expiry tracking

2. JSON Object Generation

   • Custom order configuration
   • Basket order selection
   • Order type selection (Market/Limit)
   • Transaction type selection (Buy/Sell)
   • Product type selection (Delivery/Intraday)

3. Educational Resources

   • Links to documentation
   • Video tutorials
   • Quick start guides

API Integration

The component expects the following API endpoints to be available:

getWebHookDetails(clientCode: string): Promise<WebHookResponse>
getWebHookToken(validity: number, clientCode: string): Promise<TokenResponse>
getBaskets(clientCode: string): Promise<BasketResponse>

Types

type WebhookProps = {
  closeWebHookModal?: () => void;
  style?: CSSProperties;
  platform: "5PTRADE" | "Derivative360";
};

type OrderDataType = {
  RequestType: string;
  PlaceOrderReqList: SingleOrderDataType[] | BasketOrderType[];
};

type SingleOrderDataType = {
  transactionType: string;
  orderType: string;
  quantity: number;
  price: string;
  exchange: string;
  Symbol: string;
  productType: string;
};

Styling

The component uses SCSS modules for styling. You can override the default styles by providing your own style:

style={{ height: "800px" }}

Error Handling

The component includes built-in error handling for:

• Failed API requests
• Invalid URL generation
• Basket loading errors
• Invalid order parameters