open-index/open-npm huggingface dataset:
npm package: @segmento/core
Description: Segmento API client — shared across SDK packages
Latest version: 0.4.0

# @segmento/core

API client and utilities for the [Segmento](https://segmento.tech) SDK. Handles project token validation, lead submission, and referral code extraction.

## Installation

```bash
npm install @segmento/core
```

## Usage

### Initialise the client

Call once at page load. The instance is stored globally and picked up automatically by `@segmento/waitlist-ui`.

```ts
import { SegmentoClient } from "@segmento/core";

SegmentoClient.init("your_project_token");
```

If you need a reference to the instance:

```ts
const client = SegmentoClient.init("your_project_token");
console.log(client.projectId);   // decoded from token
console.log(client.projectName); // decoded from token
```

### Submit a lead

`project_id` is injected automatically from the token.

```ts
const client = SegmentoClient.getInstance();

await client.submitLead({
  email: "user@example.com",
  telegram: "@handle",
  referral_code: getReferralCode() ?? "",
});
```

### Read referral code from the URL

Reads the `?ref=` query parameter by default.

```ts
import { getReferralCode } from "@segmento/core";

const code = getReferralCode();       // ?ref=
const code = getReferralCode("invite"); // ?invite=
```

### Generate a project token

Intended for use in your backend or dashboard when issuing tokens to SDK users.

```ts
import { encodeToken } from "@segmento/core";

const token = encodeToken("my-project-id", "My Project");
```

## API

| Export | Description |
|---|---|
| `SegmentoClient.init(token, options?)` | Decode token, create client, store globally |
| `SegmentoClient.getInstance()` | Return the globally stored instance, or null |
| `client.submitLead(request)` | POST lead to the Segmento API |
| `client.projectId` | Decoded project ID |
| `client.projectName` | Decoded project name |
| `getReferralCode(param?)` | Read referral code from URL |
| `encodeToken(pid, name)` | Generate a project token |
| `decodeToken(token)` | Decode and validate a token |
npm package: @segmento/lead
Description: Solana wallet signing and referral code generation for Segmento
Latest version: 0.3.0

# @segmento/lead

Solana wallet signing for the [Segmento](https://segmento.tech) SDK. Prompts the user to sign a waitlist message and returns a verifiable payload.

## Installation

```bash
npm install @segmento/lead
```

## Usage

```ts
import { signMessage, getSignMessage } from "@segmento/lead";

// Sign with the connected wallet
const payload = await signMessage(wallet, "My Project");

console.log(payload.address);   // base58 wallet address
console.log(payload.message);   // the message that was signed
console.log(payload.signature); // base58-encoded signature
console.log(payload.ts);        // Unix timestamp (ms)
```

The signed message follows the format:

```
I am signing up to the {projectName} waitlist. By signing this message I confirm
that I have read and agree to the Terms and Conditions: {tc_url}
```

## Wallet adapter

Pass any object that implements:

```ts
interface WalletAdapter {
  publicKey: { toBase58(): string } | null;
  signMessage(message: Uint8Array): Promise<Uint8Array>;
}
```

Compatible with `@solana/wallet-adapter-base` and the Phantom `window.solana` provider:

```ts
const wallet = {
  publicKey: { toBase58: () => phantomResp.publicKey.toBase58() },
  signMessage: (bytes) => phantom.signMessage(bytes, "utf8").then(r => r.signature),
};
```

## API

| Export | Description |
|---|---|
| `signMessage(wallet, projectName)` | Sign the waitlist message, returns `SolanaWalletPayload` |
| `getSignMessage(projectName)` | Get the message string without signing |

## Types

```ts
interface SolanaWalletPayload {
  address:   string; // base58 wallet address
  message:   string; // message that was signed
  signature: string; // base58-encoded signature
  ts:        number; // Unix timestamp in ms
}
```
npm package: @segmento/ui
Description: Segmento referral modal — pure HTML/CSS/JS with shadow DOM
Latest version: 0.4.0

# @segmento/ui

Drop-in referral modal for the [Segmento](https://segmento.tech) SDK. A shadow-DOM custom element that handles wallet connect, message signing, and lead submission — no framework required.

## Installation

```bash
npm install @segmento/ui @segmento/core @segmento/lead
```

## Usage

```ts
import { SegmentoClient } from "@segmento/core";
import { defineSegmentoModal, SegmentoModal } from "@segmento/ui";

// Register the custom element and set required fields
defineSegmentoModal({
  emailRequired:    true,
  walletRequired:   true,
  telegramRequired: false,
});

// Initialise the client with your project token
const client = SegmentoClient.init("your_project_token");

// Create the modal
const modal = new SegmentoModal({
  client,
  onConnectWallet: async () => {
    // Return any object with publicKey.toBase58() and signMessage(bytes)
    const resp = await window.solana.connect();
    return {
      publicKey: { toBase58: () => resp.publicKey.toBase58() },
      signMessage: (bytes) => window.solana.signMessage(bytes, "utf8").then(r => r.signature),
    };
  },
  onSuccess: () => console.log("Lead submitted!"),
  onClose:   () => console.log("Modal closed"),
});

// Open on demand
document.getElementById("join-btn").addEventListener("click", () => modal.open());
```

## Configuration

### `defineSegmentoModal(config?)`

Sets defaults applied to every modal instance. Call once at app startup.

| Option | Type | Default | Description |
|---|---|---|---|
| `emailRequired` | `boolean` | `false` | Email must be filled before submitting |
| `telegramRequired` | `boolean` | `false` | Telegram handle must be filled |
| `walletRequired` | `boolean` | `false` | Wallet must be connected and signed |

### `new SegmentoModal(options)`

Per-instance options (extend `RequiredFieldsConfig`):

| Option | Type | Required | Description |
|---|---|---|---|
| `client` | `SegmentoClient` | Yes | Initialised Segmento client |
| `onConnectWallet` | `() => Promise<WalletAdapter>` | Yes | Called when user clicks "Connect Wallet" |
| `title` | `string` | No | Modal heading (default: `"Join the referral program"`) |
| `onSuccess` | `() => void` | No | Called after successful submission |
| `onClose` | `() => void` | No | Called when modal is dismissed |

### Theming

All colors are CSS strings and optional.

| Option | Default | Description |
|---|---|---|
| `bgColor` | `#0f172b` | Modal background |
| `primaryColor` | `#5ee9b5` | Submit button, focus rings |
| `secondaryColor` | `#f472b6` | Success states, signed wallet button |
| `textColor` | `#f1f5f9` | Headings and input values |
| `labelColor` | `#94a3b8` | Field labels and muted text |

```ts
defineSegmentoModal({
  bgColor:      "#18181b",
  primaryColor: "#6366f1",
});
```

## Referral codes

The modal automatically reads `?ref=` from the current URL and includes it in the submission. No extra setup needed.

## Browser support

Uses native `<dialog>` (top layer) and shadow DOM. Works in all modern browsers.
npm package: @segmento/waitlist-ui
Description: Segmento waitlist modal — pure HTML/CSS/JS with shadow DOM
Latest version: 0.5.0

# @segmento/waitlist-ui

Drop-in referral modal for the [Segmento](https://segmento.tech) SDK. A shadow-DOM custom element that handles wallet connect, message signing, and lead submission — no framework required.

## Installation

```bash
npm install @segmento/waitlist-ui @segmento/core @segmento/lead
```

## Usage

```ts
import { SegmentoClient } from "@segmento/core";
import { defineSegmentoModal, SegmentoModal } from "@segmento/waitlist-ui";

// Initialise once — stored globally, no need to pass it to the modal
SegmentoClient.init("your_project_token");

// Register the custom element and set required fields
defineSegmentoModal({
  emailRequired:    true,
  walletRequired:   true,
  telegramRequired: false,
});

// Create the modal — client is resolved automatically from the global instance
const modal = new SegmentoModal({
  onSuccess: () => console.log("Lead submitted!"),
  onClose:   () => console.log("Modal closed"),
});

// Open on demand
document.getElementById("join-btn").addEventListener("click", () => modal.open());
```

## Configuration

### `defineSegmentoModal(config?)`

Sets defaults applied to every modal instance. Call once at app startup.

| Option | Type | Default | Description |
|---|---|---|---|
| `emailRequired` | `boolean` | `false` | Email must be filled before submitting |
| `telegramRequired` | `boolean` | `false` | Telegram handle must be filled |
| `walletRequired` | `boolean` | `false` | Wallet must be connected and signed |

### `new SegmentoModal(options)`

Per-instance options (extend `RequiredFieldsConfig`):

| Option | Type | Required | Description |
|---|---|---|---|
| `client` | `SegmentoClient` | No | Client instance. Defaults to the global set by `SegmentoClient.init()` |
| `onConnectWallet` | `() => Promise<WalletAdapter>` | No | Custom wallet connection. Defaults to `window.solana` |
| `title` | `string` | No | Modal heading (default: `"Join the waitlist"`) |
| `onSuccess` | `() => void` | No | Called after successful submission |
| `onClose` | `() => void` | No | Called when modal is dismissed |

### Theming

All colors are CSS strings and optional.

| Option | Default | Description |
|---|---|---|
| `bgColor` | `#0c1117` | Modal background |
| `primaryColor` | `#5ee9b5` | Submit button, focus rings, wallet button |
| `secondaryColor` | `#5ee9b5` | Success states, signed wallet button |
| `textColor` | `#f0f6fc` | Headings and input values |
| `labelColor` | `#6b7f99` | Field labels and muted text |

```ts
defineSegmentoModal({
  bgColor:      "#18181b",
  primaryColor: "#6366f1",
});
```

## Referral codes

The modal automatically reads `?ref=` from the current URL and includes it in the submission. No extra setup needed.

## Browser support

Uses native `<dialog>` (top layer) and shadow DOM. Works in all modern browsers.