# @allior/wmake-donationalerts

Integration with [DonationAlerts](https://donationalerts.com/) to receive donation notifications via WebSocket.

## Installation

**npm:**

```bash
npm install @allior/wmake-donationalerts socket.io-client@2.5.0
```

**CDN (browser, IIFE):**

```html
<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.

```ts
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.

```tsx
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.

```tsx
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.

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

## Build and publish

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

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