🔌 Connect TOGL

A plug-and-play React component to integrate TOGL extension support in your app. It enables fingerprint-based authentication, websocket messaging, and fund request management with your TOGL extension.

🚀 Features

• Detects client fingerprint and favicon
• Initializes TOGL connection via postMessage
• Handles WebSocket communication with TOGL backend
• Responds to fund approval/rejection events
• Provides customizable "Connect TOGL" button UI

📦 Installation

🧠 Install
npm install connect-togl
       OR
yarn add connect-togl    

🧠 Usage
import { ConnectToglButton } from "connect-togl";

<ConnectToglButton
  apikey={"YOUR_TOG_API_KEY"}
  companyId={"YOUR_COMPANY_ID"}
  onFundApprove={(message) => {
    console.log("✅ Fund Approved:", message);
  }}
  onFundReject={(message) => {
    console.warn("❌ Fund Rejected:", message);
  }}
/>

🧪 Props

| Prop | Type | Required | Description | | --------------- | ----------------------- | -------- | -------------------------------------- | | apikey | string | ✅ | TOGL API key | | companyId | string | ✅ | Your company ID provided by TOGL | | style | React.CSSProperties | ❌ | Optional custom styles for the button | | onFundApprove | (msg: string) => void | ✅ | Callback when fund request is approved | | onFundReject | (msg: string) => void | ✅ | Callback when fund request is rejected |

🧠 RequestFund Usage

import { RequestFund } from "connect-togl";

const amount = 500;

const res = await RequestFund(amount);

if (res.success) {
  console.log("🎉 Funds requested:", res.data);
} else {
  console.error("🚫 Fund request failed:", res.error || res.status);
}

📥 Parameters

| Name | Type | Required | Description | | ------------- | -------- | -------- | ---------------------------------------- | | amount | number | ✅ | Amount of funds to request |