nostr-components 0.2.0

package/dist/src/nostr-profile-badge/render.d.ts

@@ -0,0 +1,11 @@
+import { NDKUser, NDKUserProfile } from '@nostr-dev-kit/ndk';
+export interface RenderProfileBadgeOptions {
+    isLoading: boolean;
+    isError: boolean;
+    errorMessage?: string;
+    userProfile: NDKUserProfile | null;
+    ndkUser: NDKUser | null;
+    showNpub: boolean;
+    showFollow: boolean;
+}
+export declare function renderProfileBadge({ isLoading, isError, errorMessage, userProfile, ndkUser, showNpub, showFollow }: RenderProfileBadgeOptions): string;

package/dist/src/nostr-profile-badge/style.d.ts

@@ -0,0 +1 @@
+export declare function getProfileBadgeStyles(): string;

package/dist/src/nostr-zap/dialog-help-style.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Help dialog content styles for nostr-zap component
+ * Contains only content-specific styles (base dialog styles in DialogComponent)
+ */
+export declare const getHelpDialogStyles: () => string;

package/dist/src/nostr-zap/dialog-help.d.ts

@@ -0,0 +1,2 @@
+export declare const injectHelpDialogStyles: () => void;
+export declare const showHelpDialog: (theme?: "light" | "dark") => Promise<void>;

package/dist/src/nostr-zap/dialog-zap-style.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Dialog styles for nostr-zap component
+ * Extracted from dialog.ts for better organization
+ * Uses CSS variables from nostr-zap component for consistency
+ */
+export declare const getDialogStyles: (theme?: "light" | "dark") => string;

package/dist/src/nostr-zap/dialog-zap.d.ts

@@ -0,0 +1,31 @@
+import { DialogComponent } from '../base/dialog-component/dialog-component';
+interface WebLN {
+    enable: () => Promise<void>;
+    sendPayment: (invoice: string) => Promise<{
+        preimage: string;
+    }>;
+}
+declare global {
+    interface Window {
+        webln?: WebLN;
+    }
+}
+export interface OpenZapModalParams {
+    npub: string;
+    relays: string;
+    cachedDialogComponent?: DialogComponent | null;
+    buttonColor?: string;
+    theme?: 'light' | 'dark';
+    fixedAmount?: number;
+    defaultAmount?: number;
+    initialAmount?: number;
+    anon?: boolean;
+    url?: string;
+}
+export declare const injectCSS: (theme?: "light" | "dark") => void;
+/**
+ * Opens (or re-opens) the zap modal. Returns the DialogComponent so the caller
+ * can cache it between clicks.
+ */
+export declare function init(params: OpenZapModalParams): Promise<DialogComponent>;
+export {};

package/dist/src/nostr-zap/dialog-zappers-style.d.ts

@@ -0,0 +1 @@
+export declare function getZappersDialogStyles(theme?: 'light' | 'dark'): string;

package/dist/src/nostr-zap/dialog-zappers.d.ts

@@ -0,0 +1,25 @@
+import { DialogComponent } from '../base/dialog-component/dialog-component';
+import { ZapDetails } from './zap-utils';
+/**
+ * Modal dialog for displaying individual zap details (zappers).
+ *
+ * Shows a list of all zaps received by a user with:
+ * - Zap amount
+ * - Zap date (relative time)
+ * - Zap author's name
+ * - Zap author's profile picture
+ * - Clickable links to author profiles via njump.me
+ */
+export interface OpenZappersModalParams {
+    zapDetails: ZapDetails[];
+    theme?: 'light' | 'dark';
+}
+/**
+ * Inject zappers dialog content styles into document head
+ * Prevents duplicate injection by checking for existing styles
+ */
+export declare const injectZappersDialogStyles: (theme?: "light" | "dark") => void;
+/**
+ * Opens the zappers dialog showing individual zap details
+ */
+export declare function openZappersDialog(params: OpenZappersModalParams): Promise<DialogComponent>;

package/dist/src/nostr-zap/nostr-zap.d.ts

@@ -0,0 +1,45 @@
+import { NostrUserComponent } from '../base/user-component/nostr-user-component';
+import { NCStatus } from '../base/base-component/nostr-base-component';
+/**
+ * <nostr-zap>
+ * Attributes:
+ *   - npub | pubkey | nip05   (required) : Nostr user to zap
+ *   - relays          (optional) : comma-separated relay URLs
+ *   - theme           (optional) : "light" | "dark" (default light)
+ *   - text            (optional) : custom text (default "Zap")
+ *   - amount          (optional) : pre-defined zap amount in sats
+ *   - default-amount  (optional) : default zap amount in sats (default 21)
+ *   - url             (optional) : URL to send zap to (enables URL-based zaps)
+ *
+ *  TODO: Doesn't yet support dynamic updates of attributes.
+ */
+export default class NostrZap extends NostrUserComponent {
+    protected zapActionStatus: {
+        set: (s: NCStatus, e?: string) => void;
+        get: () => NCStatus;
+    };
+    protected zapListStatus: {
+        set: (s: NCStatus, e?: string) => void;
+        get: () => NCStatus;
+    };
+    private totalZapAmount;
+    private cachedZapDetails;
+    private cachedAmountDialog;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    /** Base class functions */
+    protected onStatusChange(_status: NCStatus): void;
+    protected onUserReady(_user: any, _profile: any): void;
+    /** Protected methods */
+    protected validateInputs(): boolean;
+    /** Private functions */
+    private handleZapClick;
+    private handleHelpClick;
+    private handleZappersClick;
+    private attachDelegatedListeners;
+    private updateZapCount;
+    protected renderContent(): void;
+}

package/dist/src/nostr-zap/render.d.ts

@@ -0,0 +1,9 @@
+import { IRenderOptions } from '../base/render-options';
+export interface RenderZapButtonOptions extends IRenderOptions {
+    isAmountLoading: boolean;
+    isSuccess: boolean;
+    buttonText: string;
+    totalZapAmount: number | null;
+    hasZaps?: boolean;
+}
+export declare function renderZapButton({ isLoading, isError, isSuccess, errorMessage, buttonText, totalZapAmount, isAmountLoading, hasZaps, }: RenderZapButtonOptions): string;

package/dist/src/nostr-zap/style.d.ts

@@ -0,0 +1 @@
+export declare function getZapButtonStyles(): string;

package/dist/src/nostr-zap/zap-utils.d.ts

@@ -0,0 +1,53 @@
+import { Filter, Event } from 'nostr-tools';
+export declare const getProfileMetadata: (authorId: string) => Promise<any>;
+export declare const getBatchedProfileMetadata: (authorIds: string[]) => Promise<{
+    id: string;
+    profile: any;
+}[]>;
+export declare const extractProfileMetadataContent: (profileMetadata: any) => any;
+export declare const getZapEndpoint: (profileMetadata: any) => Promise<string>;
+export declare const fetchInvoice: ({ zapEndpoint, amount, comment, authorId, nip19Target, normalizedRelays, anon, url, }: {
+    zapEndpoint: string;
+    amount: number;
+    comment?: string;
+    authorId: string;
+    nip19Target?: string;
+    normalizedRelays: string[];
+    anon?: boolean;
+    url?: string;
+}) => Promise<string>;
+export declare const isNip07ExtAvailable: () => boolean;
+export declare function resolveNip05(nip05Identifier: string): Promise<string | null>;
+declare module 'nostr-tools' {
+    interface SimplePool {
+        subscribe(relays: string[], filter: Filter, params: {
+            onevent: (event: Event) => void;
+            onclose?: () => void;
+            id?: string;
+            maxWait?: number;
+        }): {
+            close: () => void;
+        };
+    }
+}
+export interface ZapDetails {
+    amount: number;
+    date: Date;
+    authorPubkey: string;
+    comment?: string;
+}
+export interface ZapAmountResult {
+    totalAmount: number;
+    zapDetails: ZapDetails[];
+}
+export declare const fetchTotalZapAmount: ({ pubkey, relays, url, }: {
+    pubkey: string;
+    relays: string[];
+    url?: string;
+}) => Promise<ZapAmountResult>;
+export declare const listenForZapReceipt: ({ relays, receiversPubKey, invoice, onSuccess, }: {
+    relays: string[];
+    receiversPubKey: string;
+    invoice: string;
+    onSuccess: () => void;
+}) => () => void;

package/dist/themes/dark.css

@@ -0,0 +1,10 @@
+/* SPDX-License-Identifier: MIT */
+
+/* Dark Theme for Nostr Components */
+:root {
+  --nostrc-theme-bg: #1a1a1a;
+  --nostrc-theme-text-primary: #cccccc;
+  --nostrc-theme-text-secondary: #999999;
+  --nostrc-theme-border: #333333;
+  --nostrc-theme-hover-bg: #333333;
+}

package/dist/themes/light.css

@@ -0,0 +1,10 @@
+/* SPDX-License-Identifier: MIT */
+
+/* Light Theme for Nostr Components */
+:root {
+  --nostrc-theme-bg: #ffffff;
+  --nostrc-theme-text-primary: #333333;
+  --nostrc-theme-text-secondary: #666666;
+  --nostrc-theme-border: #e0e0e0;
+  --nostrc-theme-hover-bg: rgba(0, 0, 0, 0.05);
+}

package/dist/themes.css

@@ -0,0 +1,52 @@
+/* SPDX-License-Identifier: MIT */
+
+/*
+ * Nostr Components Theme Classes
+ * ==============================
+ * 
+ * Apply themes to individual components using data-theme attributes:
+ * 
+ * <div data-theme="dark">
+ *   <nostr-profile-badge npub="npub123..."></nostr-profile-badge>
+ * </div>
+ * 
+ * <div data-theme="ocean-glass">
+ *   <nostr-follow-button pubkey="pk456..."></nostr-follow-button>
+ * </div>
+ */
+
+/* Light Theme */
+[data-theme="light"],
+:host([data-theme="light"]) {
+  --nostrc-theme-bg: #ffffff;
+  --nostrc-theme-text-primary: #333333;
+  --nostrc-theme-text-secondary: #666666;
+  --nostrc-theme-border: #e0e0e0;
+  --nostrc-theme-hover-bg: rgba(0, 0, 0, 0.05);
+}
+
+.theme-light {
+  --nostrc-theme-bg: #ffffff;
+  --nostrc-theme-text-primary: #333333;
+  --nostrc-theme-text-secondary: #666666;
+  --nostrc-theme-border: #e0e0e0;
+  --nostrc-theme-hover-bg: rgba(0, 0, 0, 0.05);
+}
+
+/* Dark Theme */
+[data-theme="dark"],
+:host([data-theme="dark"]) {
+  --nostrc-theme-bg: #1a1a1a;
+  --nostrc-theme-text-primary: #cccccc;
+  --nostrc-theme-text-secondary: #999999;
+  --nostrc-theme-border: #333333;
+  --nostrc-theme-hover-bg: #333333;
+}
+
+.theme-dark {
+  --nostrc-theme-bg: #1a1a1a;
+  --nostrc-theme-text-primary: #cccccc;
+  --nostrc-theme-text-secondary: #999999;
+  --nostrc-theme-border: #333333;
+  --nostrc-theme-hover-bg: #333333;
+}

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/dist/vite.config.esm.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/dist/vite.config.umd.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "nostr-components",
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Embed Nostr anywhere on the internet, a Zap Button for every webpage",
+  "keywords": [
+    "nostr",
+    "web-components",
+    "lightning",
+    "zap",
+    "decentralized",
+    "social-network",
+    "nostr-profile",
+    "nostr-post",
+    "nostr-zap"
+  ],
+  "author": "saiy2k",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/saiy2k/nostr-components.git"
+  },
+  "homepage": "https://nostr-components.web.app",
+  "bugs": {
+    "url": "https://github.com/saiy2k/nostr-components/issues"
+  },
+  "main": "./dist/nostr-components.umd.js",
+  "module": "./dist/nostr-components.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/nostr-components.es.js",
+      "require": "./dist/nostr-components.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./themes": {
+      "import": "./dist/themes.css",
+      "default": "./dist/themes.css"
+    },
+    "./themes/dark": {
+      "import": "./dist/themes/dark.css",
+      "default": "./dist/themes/dark.css"
+    },
+    "./themes/light": {
+      "import": "./dist/themes/light.css",
+      "default": "./dist/themes/light.css"
+    },
+    "./components/*": "./dist/components/*.es.js"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build:esm": "vite build --config vite.config.esm.ts",
+    "build:umd": "vite build --config vite.config.umd.ts",
+    "build:themes": "node scripts/build-themes.js",
+    "build": "npm run build:esm && npm run build:umd && npm run build:themes",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "cross-env STORYBOOK_ENV=production storybook build && npm run build:themes",
+    "wp-build": "npm run build:esm && npm run build:themes && npm run wp-copy",
+    "wp-copy": "node scripts/wp-copy.js"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-docs": "^9.1.8",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/web-components-vite": "^9.1.8",
+    "@types/glidejs__glide": "^3.6.6",
+    "@types/htmlparser2": "^3.10.7",
+    "@types/node": "^22.15.21",
+    "cross-env": "^7.0.3",
+    "esbuild": "0.23.1",
+    "htmlparser2": "^10.0.0",
+    "lit": "^3.3.1",
+    "prettier": "^3.5.3",
+    "storybook": "^9.1.8",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "dependencies": {
+    "@glidejs/glide": "^3.7.1",
+    "@nostr-dev-kit/ndk": "^2.10.0",
+    "@types/dompurify": "^3.0.5",
+    "@types/qrcode": "^1.5.5",
+    "dompurify": "^3.2.6",
+    "light-bolt11-decoder": "^3.2.0",
+    "nostr-tools": "^2.7.2",
+    "qrcode": "^1.5.4"
+  }
+}