@allior/wmake-donationalerts

Integration with DonationAlerts to receive donation notifications via WebSocket.

Installation

npm:

npm install @allior/wmake-donationalerts [email protected]

CDN (browser, IIFE):

<script src="https://cdn.jsdelivr.net/npm/@allior/wmake-donationalerts/dist/root/index.iife.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script>

Socket.io is loaded separately — it is required for the socket to work.

Usage

Class DonationAlertsSocket

Create an instance of DonationAlertsSocket with an access token and subscribe to events.

import {
  DonationAlertsSocket,
  type Donation,
} from "@allior/wmake-donationalerts";

const socket = new DonationAlertsSocket("YOUR_ACCESS_TOKEN");

socket.onConnect(() => {
  console.log("Connected to DonationAlerts");
});

socket.onDonation((donation: Donation) => {
  console.log("Donation:", donation.amountMain, donation.currency, donation.id);
});

socket.onError(() => {
  console.error("Connection error");
});

socket.onDisconnect(() => {
  console.log("Disconnected");
});

// Disconnect manually
socket.disconnect();

Type Donation

• id — donation identifier (duplicate protection guaranteed)
• alertType — alert type (usually "1")
• amount — amount
• amountMain — amount in the account's main currency
• currency — currency (RUB, USD, etc.)
• billingSystem — billing system

React: hook useDonationAlerts

Hook for managing connection and receiving donation events.

Automatic connection

Provide a token in the hook parameters, and it will automatically establish a connection when mounted and disconnect when unmounted.

import { useDonationAlerts } from "@allior/wmake-donationalerts/react";

function App() {
  const { isConnected } = useDonationAlerts({
    token: "YOUR_ACCESS_TOKEN",
    onDonation: (donation) => {
      console.log("New donation!", donation);
    }
  });

  return <div>Status: {isConnected ? "Connected" : "Disconnected"}</div>;
}

Manual control

Useful if the token is fetched asynchronously or if you need to manage the connection manually.

import { useDonationAlerts } from "@allior/wmake-donationalerts/react";

function App() {
  const { isConnected, connect, disconnect } = useDonationAlerts();

  return (
    <div>
      <p>Status: {isConnected ? "Connected" : "Disconnected"}</p>
      <button onClick={() => connect("TOKEN")}>Connect</button>
      <button onClick={() => disconnect()}>Disconnect</button>
    </div>
  );
}

Event handling

In addition to the onDonation callback, the hook still dispatches an onDonation event (CustomEvent) on the window object for backward compatibility.

window.addEventListener("onDonation", (e) => {
  console.log("Global notification:", e.detail);
});

Build and publish

bun run build   # build dist + types
bun run clean   # clean dist

bun run build runs automatically before publishing to npm (prepublishOnly).