From 40657d292306800b813f40a305249c6e634f7746 Mon Sep 17 00:00:00 2001 From: Yusuke Ohashi Date: Mon, 9 Mar 2026 19:20:14 +0900 Subject: [PATCH 1/2] feat: add NIP-57 zap composer for posts and profiles - add zap overlay flow with LNURL fetch, invoice validation, QR rendering, and WebLN support - wire zap actions into event cards, profile pages, app setup, and shared types - add qrcode dependency and update HTML shell for the zap modal UI --- package-lock.json | 317 ++++++++++++ package.json | 2 + src/app/app-routes.ts | 2 + src/app/app.ts | 21 +- src/common/event-render.ts | 37 +- src/common/zap.ts | 715 +++++++++++++++++++++++++++ src/features/profile/profile.ts | 49 ++ src/index.html | 58 +++ types/nostr.ts | 1 + yarn.lock | 821 +++++++++++++++----------------- 10 files changed, 1571 insertions(+), 452 deletions(-) create mode 100644 src/common/zap.ts diff --git a/package-lock.json b/package-lock.json index 86accb8..1530d3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,12 +10,14 @@ "dependencies": { "emoji-dictionary": "^1.0.12", "nostr-tools": "^2.23.0", + "qrcode": "^1.5.4", "rx-nostr": "^3.6.2", "rxjs": "^7.8.2" }, "devDependencies": { "@biomejs/biome": "^2.3.15", "@types/node": "^25.0.9", + "@types/qrcode": "^1.5.6", "autoprefixer": "^10.4.23", "postcss": "^8.5.6", "tailwindcss": "^3.4.19", @@ -1160,6 +1162,40 @@ "undici-types": "~7.16.0" } }, + "node_modules/@types/qrcode": { + "version": "1.5.6", + "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz", + "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/any-promise": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", @@ -1295,6 +1331,15 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/camelcase-css": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", @@ -1364,6 +1409,35 @@ "node": ">= 6" } }, + "node_modules/cliui": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", + "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", + "license": "ISC", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^6.2.0" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "license": "MIT" + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -1387,6 +1461,15 @@ "node": ">=4" } }, + "node_modules/decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -1394,6 +1477,12 @@ "dev": true, "license": "Apache-2.0" }, + "node_modules/dijkstrajs": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz", + "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==", + "license": "MIT" + }, "node_modules/dlv": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", @@ -1450,6 +1539,12 @@ "emoji-name-map": "^1.0.0" } }, + "node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "license": "MIT" + }, "node_modules/emoji-unicode-map": { "version": "1.1.12", "resolved": "https://registry.npmjs.org/emoji-unicode-map/-/emoji-unicode-map-1.1.12.tgz", @@ -1571,6 +1666,19 @@ "node": ">=8" } }, + "node_modules/find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "license": "MIT", + "dependencies": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/fraction.js": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz", @@ -1610,6 +1718,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "license": "ISC", + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, "node_modules/glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", @@ -1675,6 +1792,15 @@ "node": ">=0.10.0" } }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/is-glob": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", @@ -1734,6 +1860,18 @@ "dev": true, "license": "MIT" }, + "node_modules/locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "license": "MIT", + "dependencies": { + "p-locate": "^4.1.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/map-o": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/map-o/-/map-o-2.0.11.tgz", @@ -1870,6 +2008,51 @@ "node": ">= 6" } }, + "node_modules/p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "license": "MIT", + "dependencies": { + "p-try": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "license": "MIT", + "dependencies": { + "p-limit": "^2.2.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -1917,6 +2100,15 @@ "node": ">= 6" } }, + "node_modules/pngjs": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz", + "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==", + "license": "MIT", + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/postcss": { "version": "8.5.6", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", @@ -2080,6 +2272,23 @@ "dev": true, "license": "MIT" }, + "node_modules/qrcode": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz", + "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==", + "license": "MIT", + "dependencies": { + "dijkstrajs": "^1.0.1", + "pngjs": "^5.0.0", + "yargs": "^15.3.1" + }, + "bin": { + "qrcode": "bin/qrcode" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -2124,6 +2333,21 @@ "node": ">=8.10.0" } }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/require-main-filename": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", + "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", + "license": "ISC" + }, "node_modules/resolve": { "version": "1.22.11", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz", @@ -2244,6 +2468,12 @@ "tslib": "^2.1.0" } }, + "node_modules/set-blocking": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", + "license": "ISC" + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -2254,6 +2484,32 @@ "node": ">=0.10.0" } }, + "node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/sucrase": { "version": "3.35.1", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz", @@ -2589,6 +2845,67 @@ "funding": { "url": "https://github.com/sponsors/jonschlinkert" } + }, + "node_modules/which-module": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz", + "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==", + "license": "ISC" + }, + "node_modules/wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/y18n": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", + "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==", + "license": "ISC" + }, + "node_modules/yargs": { + "version": "15.4.1", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", + "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", + "license": "MIT", + "dependencies": { + "cliui": "^6.0.0", + "decamelize": "^1.2.0", + "find-up": "^4.1.0", + "get-caller-file": "^2.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^2.0.0", + "set-blocking": "^2.0.0", + "string-width": "^4.2.0", + "which-module": "^2.0.0", + "y18n": "^4.0.0", + "yargs-parser": "^18.1.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/yargs-parser": { + "version": "18.1.3", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", + "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", + "license": "ISC", + "dependencies": { + "camelcase": "^5.0.0", + "decamelize": "^1.2.0" + }, + "engines": { + "node": ">=6" + } } } } diff --git a/package.json b/package.json index 678819f..ad37ec5 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "devDependencies": { "@biomejs/biome": "^2.3.15", "@types/node": "^25.0.9", + "@types/qrcode": "^1.5.6", "autoprefixer": "^10.4.23", "postcss": "^8.5.6", "tailwindcss": "^3.4.19", @@ -25,6 +26,7 @@ "dependencies": { "emoji-dictionary": "^1.0.12", "nostr-tools": "^2.23.0", + "qrcode": "^1.5.4", "rx-nostr": "^3.6.2", "rxjs": "^7.8.2" } diff --git a/src/app/app-routes.ts b/src/app/app-routes.ts index 6c9922d..9bc3b19 100644 --- a/src/app/app-routes.ts +++ b/src/app/app-routes.ts @@ -27,6 +27,7 @@ import { fetchProfile, renderProfile, setupProfileEditor, + setupProfileZapButton, } from '../features/profile/profile.js'; import { loadEvents } from '../features/profile/profile-events.js'; import { loadReactionsPage } from '../features/reactions/reactions-page.js'; @@ -826,6 +827,7 @@ async function startAppCore( if (profileSection) { if (!isRouteActive()) return; // Guard before DOM update renderProfile(pubkeyHex, npub, appState.profile, profileSection); + setupProfileZapButton(pubkeyHex, npub, appState.profile, profileSection); setupProfileEditor(pubkeyHex, npub, appState.profile, profileSection, { getRelays: (): string[] => appState.relays, publishEvent: publishEventToRelays, diff --git a/src/app/app.ts b/src/app/app.ts index d8e4d97..ac0ab75 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -15,12 +15,19 @@ import { registerServiceWorker, startPeriodicSync, } from '../common/sync/service-worker-manager.js'; +import { setupZapOverlay } from '../common/zap.js'; import { loadGlobalTimeline } from '../features/global/global-timeline.js'; import { loadUserHomeTimeline } from '../features/home/home-loader.js'; import { loadHomeTimeline } from '../features/home/home-timeline.js'; import { clearNotifications } from '../features/notifications/notifications.js'; import { publishEventToRelays } from '../features/profile/follow.js'; import { recordRelayFailure } from '../features/relays/relays.js'; +import { + configureRouteDependencies, + handleRoute, + loadGlobalPage, + loadHomePage, +} from './app-routes.js'; import { appState, composeButton, @@ -36,12 +43,6 @@ import { seenEventIds, syncRelays, } from './app-state.js'; -import { - configureRouteDependencies, - handleRoute, - loadGlobalPage, - loadHomePage, -} from './app-routes.js'; function showNewEventsNotification(_timelineType: string, count: number): void { // Remove existing notification if any @@ -334,7 +335,8 @@ function showNewPostsNotification(count: number): void { appState.untilTimestamp = Math.floor(Date.now() / 1000); appState.newestEventTimestamp = appState.untilTimestamp; - const followedPubkeys = appState.cachedHomeTimeline?.followedPubkeys || []; + const followedPubkeys = + appState.cachedHomeTimeline?.followedPubkeys || []; if (followedPubkeys.length > 0 && output) { const isRouteActive = createRouteGuard(); await loadHomeTimeline( @@ -471,6 +473,11 @@ document.addEventListener('DOMContentLoaded', (): void => { }, }); + setupZapOverlay({ + getSessionPrivateKey, + getRelays: (): string[] => appState.relays, + }); + document.addEventListener('click', (event: MouseEvent): void => { if ( event.defaultPrevented || diff --git a/src/common/event-render.ts b/src/common/event-render.ts index 5ae08ef..62a0472 100644 --- a/src/common/event-render.ts +++ b/src/common/event-render.ts @@ -26,6 +26,7 @@ import { } from './events-queries.js'; import { createRelayWebSocket } from './relay-socket.js'; import { getSessionPrivateKey } from './session.js'; +import { openZapComposer } from './zap.js'; const REFERENCED_EVENT_CACHE_LIMIT: number = 1000; const REFERENCED_EVENT_NULL_CACHE_LIMIT: number = 2000; @@ -589,8 +590,8 @@ function filterRelaysToUserList( return normalizedUserRelays; } const userRelaySet: Set = new Set(normalizedUserRelays); - return normalizeRelayList(candidateRelays).filter((relayUrl: string): boolean => - userRelaySet.has(relayUrl), + return normalizeRelayList(candidateRelays).filter( + (relayUrl: string): boolean => userRelaySet.has(relayUrl), ); } @@ -1023,6 +1024,7 @@ export function renderEvent( storedPubkey && storedPubkey === event.pubkey, ); const isLoggedIn: boolean = Boolean(storedPubkey); + const canZapTarget: boolean = Boolean(profile?.lud16 || profile?.lud06); const actionBtnBase: string = 'event-action-btn inline-flex items-center justify-center p-1 rounded transition-colors'; const actionBtnDisabled: string = 'opacity-60 cursor-not-allowed'; @@ -1046,6 +1048,13 @@ export function renderEvent( ? `${actionBtnBase} react-event-btn text-rose-600 hover:text-rose-800 hover:bg-rose-50` : `${actionBtnBase} react-event-btn text-gray-400 hover:text-gray-500 ${actionBtnDisabled}`; + const zapButtonTitle: string = canZapTarget + ? 'Zap via Lightning' + : 'Zap unavailable'; + const zapButtonClasses: string = canZapTarget + ? `${actionBtnBase} zap-event-btn text-emerald-600 hover:text-emerald-800 hover:bg-emerald-50` + : `${actionBtnBase} zap-event-btn text-gray-400 hover:text-gray-500 ${actionBtnDisabled}`; + const deleteButtonTitle: string = 'Delete post'; const deleteButtonClasses: string = `${actionBtnBase} delete-event-btn text-red-600 hover:text-red-800 hover:bg-red-50`; @@ -1068,6 +1077,13 @@ export function renderEvent( + ${ + canZapTarget + ? `` + : '' + } ${ canDeletePost ? ` + `; + + const trigger: HTMLButtonElement | null = profileSection.querySelector( + '#profile-zap-trigger', + ); + if (!trigger) { + return; + } + + trigger.addEventListener('click', (): void => { + openZapComposer({ + targetType: 'profile', + recipientPubkey: pubkey, + recipientName: getDisplayName(npub, profile), + recipientProfile: profile, + }); + }); +} + export function setupProfileEditor( pubkey: PubkeyHex, npub: Npub, @@ -734,6 +782,7 @@ export function setupProfileEditor( await cacheResolvedProfile(pubkey, nextProfile, true); options.onProfileUpdated?.(nextProfile); renderProfile(pubkey, npub, nextProfile, profileSection); + setupProfileZapButton(pubkey, npub, nextProfile, profileSection); setupProfileEditor(pubkey, npub, nextProfile, profileSection, options); } catch (error: unknown) { console.error('[Profile] Failed to publish metadata:', error); diff --git a/src/index.html b/src/index.html index 6d1a0f8..88d6378 100644 --- a/src/index.html +++ b/src/index.html @@ -179,6 +179,64 @@

Reply to Post

+