diff --git a/app/components/photo-gallery.gjs b/app/components/photo-gallery.gjs index f8283f7..4da2e5b 100644 --- a/app/components/photo-gallery.gjs +++ b/app/components/photo-gallery.gjs @@ -11,6 +11,7 @@ import or from 'ember-truth-helpers/helpers/or'; import config from 'marco/config/environment'; import DropdownMenu from './dropdown-menu'; import PhotoCarousel from './photo-carousel'; +import ZapPhotoModal from './zap-photo-modal'; import Icon from './icon'; import formatRelativeDate from '../helpers/format-relative-date'; @@ -40,6 +41,11 @@ const GalleryContent = ; @@ -114,6 +124,7 @@ export default class PhotoGallery extends Component { @service settings; @tracked currentPhoto = this.args.selectedPhoto || this.args.photos?.[0]; + @tracked zapModalOpen = false; get triggerIcon() { if (typeof window !== 'undefined' && window.innerWidth <= 768) { @@ -168,7 +179,8 @@ export default class PhotoGallery extends Component { e.target.closest('.thumbnail-strip-container') || e.target.closest('.carousel-nav-btn') || e.target.closest('.close-btn') || - e.target.closest('.photo-gallery-header') + e.target.closest('.photo-gallery-header') || + e.target.closest('.zap-photo-modal-overlay') ) { return; } @@ -224,6 +236,18 @@ export default class PhotoGallery extends Component { closeMenu(); } + @action + openZap(closeMenu, e) { + e?.stopPropagation(); + this.zapModalOpen = true; + if (closeMenu) closeMenu(); + } + + @action + closeZap() { + this.zapModalOpen = false; + } + deletePhotoTask = task(async (closeMenu) => { if ( !confirm( @@ -308,6 +332,9 @@ export default class PhotoGallery extends Component { @uploaderName={{this.uploaderName}} @photoDate={{this.photoDate}} @triggerIcon={{this.triggerIcon}} + @openZap={{this.openZap}} + @closeZap={{this.closeZap}} + @zapModalOpen={{this.zapModalOpen}} /> {{else}} {{#in-element this.destinationElement}} @@ -327,6 +354,9 @@ export default class PhotoGallery extends Component { @uploaderName={{this.uploaderName}} @photoDate={{this.photoDate}} @triggerIcon={{this.triggerIcon}} + @openZap={{this.openZap}} + @closeZap={{this.closeZap}} + @zapModalOpen={{this.zapModalOpen}} /> {{/in-element}} {{/if}} diff --git a/app/components/zap-photo-modal.gjs b/app/components/zap-photo-modal.gjs new file mode 100644 index 0000000..60ee74c --- /dev/null +++ b/app/components/zap-photo-modal.gjs @@ -0,0 +1,493 @@ +import Component from '@glimmer/component'; +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { on } from '@ember/modifier'; +import { service } from '@ember/service'; +import { task } from 'ember-concurrency'; +import { eq } from 'ember-truth-helpers'; +import qrCode from '../modifiers/qr-code'; +import Icon from './icon'; + +const SLIDER_MIN_SATS = 10; +const SLIDER_MAX_SATS = 100_000; +const SLIDER_STEPS = 200; + +function sliderToSats(position) { + const t = position / SLIDER_STEPS; + return Math.round( + Math.exp( + Math.log(SLIDER_MIN_SATS) + + (Math.log(SLIDER_MAX_SATS) - Math.log(SLIDER_MIN_SATS)) * t + ) + ); +} + +function satsToSlider(sats) { + return Math.round( + ((Math.log(sats) - Math.log(SLIDER_MIN_SATS)) / + (Math.log(SLIDER_MAX_SATS) - Math.log(SLIDER_MIN_SATS))) * + SLIDER_STEPS + ); +} + +const DEFAULT_SLIDER_POSITION = satsToSlider(1000); + +export default class ZapPhotoModal extends Component { + @service nostrZap; + @service nostrAuth; + @service nostrData; + @service toast; + + @tracked step = 'select-amount'; + @tracked sliderPosition = DEFAULT_SLIDER_POSITION; + @tracked message = ''; + @tracked error = null; + @tracked invoice = null; + @tracked lightningAddress = null; + @tracked lnurlEndpoint = null; + @tracked lnurlLoading = false; + @tracked lnurlError = null; + + sliderSteps = SLIDER_STEPS; + sliderTicks = ['10', '100', '1k', '10k', '100k']; + + constructor() { + super(...arguments); + this._loadLightningInfo(); + } + + get photo() { + return this.args.photo; + } + + get hasWebLN() { + return this.nostrZap.hasWebLN(); + } + + get effectiveAmount() { + return sliderToSats(this.sliderPosition); + } + + get amountMsats() { + return this.effectiveAmount * 1000; + } + + get formattedAmount() { + return this.effectiveAmount.toLocaleString(); + } + + get cannotZap() { + return !this.canZap; + } + + get canZap() { + if (!this.lnurlEndpoint) return false; + if (this.lnurlError) return false; + if (this.effectiveAmount <= 0) return false; + return ( + this.amountMsats >= this.lnurlEndpoint.minSendable && + this.amountMsats <= this.lnurlEndpoint.maxSendable + ); + } + + get minSats() { + return this.lnurlEndpoint + ? Math.ceil(this.lnurlEndpoint.minSendable / 1000) + : 1; + } + + get maxSats() { + return this.lnurlEndpoint + ? Math.floor(this.lnurlEndpoint.maxSendable / 1000) + : SLIDER_MAX_SATS; + } + + get lightningUri() { + return this.invoice ? `lightning:${this.invoice}` : ''; + } + + get parsedInvoice() { + if (!this.invoice) return null; + try { + return this.nostrZap.parseInvoice(this.invoice); + } catch { + return null; + } + } + async _loadLightningInfo() { + const pubkey = this.photo?.pubkey; + if (!pubkey) return; + + // Pre-warm the recipient relay cache so the zap request + // uses the recipient's NIP-65 inbox relays (where they'll + // see the zap receipt) instead of the sender's relays + this.nostrZap.loadRecipientRelays(pubkey).catch(() => {}); + + const address = this.nostrZap.getLightningAddress(pubkey); + if (!address) { + this.lnurlError = + 'This user has no lightning address set in their profile'; + return; + } + + this.lightningAddress = address; + this.lnurlLoading = true; + this.lnurlError = null; + + try { + this.lnurlEndpoint = await this.nostrZap.resolveLnurl(address); + } catch (err) { + this.lnurlError = + err instanceof Error ? err.message : 'Failed to fetch lightning info'; + } finally { + this.lnurlLoading = false; + } + } + @action + updateSlider(e) { + this.sliderPosition = Number(e.target.value); + } + + @action + updateMessage(e) { + this.message = e.target.value; + } + + @action + handleClose() { + if (this.args.onClose) { + this.args.onClose(); + } + } + + @action + resetAndClose() { + this.step = 'select-amount'; + this.error = null; + this.invoice = null; + this.handleClose(); + } + + @action + retry() { + this.step = 'select-amount'; + this.error = null; + } + + @action + showInvoice() { + this.step = 'awaiting-payment'; + this.error = null; + } + + @action + performZap() { + this.zapTask.perform(); + } + + @action + performWebLNPay() { + this.webLNPayTask.perform(); + } + + @action + copyInvoice() { + if (!this.invoice) return; + try { + navigator.clipboard.writeText(this.invoice); + this.toast.show('Invoice copied to clipboard'); + } catch { + // no-op + } + } + + @action + stopPropagation(e) { + e.stopPropagation(); + } + + zapTask = task(async () => { + if (!this.canZap) return; + + this.step = 'fetching-invoice'; + this.error = null; + + try { + const { invoice } = await this.nostrZap.zap( + this.photo, + this.amountMsats, + this.message + ); + this.invoice = invoice; + this.step = 'awaiting-payment'; + } catch (err) { + console.error('Zap failed:', err); + this.error = err instanceof Error ? err.message : 'Failed to create zap'; + this.step = 'error'; + } + }); + + webLNPayTask = task(async () => { + if (!this.invoice) return; + + this.step = 'paying-with-wallet'; + this.error = null; + + try { + await this.nostrZap.payWithWebln(this.invoice); + this.step = 'success'; + } catch (err) { + console.error('WebLN pay failed:', err); + this.error = + err instanceof Error ? err.message : 'Failed to pay with wallet'; + this.step = 'wallet-pay-error'; + } + }); + + +} diff --git a/app/services/nostr-zap.js b/app/services/nostr-zap.js new file mode 100644 index 0000000..a56a769 --- /dev/null +++ b/app/services/nostr-zap.js @@ -0,0 +1,211 @@ +import Service, { service } from '@ember/service'; +import { tracked } from '@glimmer/tracking'; +import { ZapRequestFactory } from 'applesauce-common/factories'; +import { + getInvoice, + parseBolt11, + parseLNURLOrAddress, +} from 'applesauce-common/helpers'; +import { getInboxes } from 'applesauce-core/helpers/mailboxes'; +import { firstValueFrom, timeout, catchError, of } from 'rxjs'; + +const DEFAULT_ZAP_RELAYS = [ + 'wss://relay.damus.io', + 'wss://nos.lol', + 'wss://relay.primal.net', +]; + +const DIRECTORY_RELAYS = [ + 'wss://relay.primal.net', + 'wss://nos.lol', + 'wss://relay.damus.io', +]; + +const RELAY_FETCH_TIMEOUT = 10_000; + +export default class NostrZapService extends Service { + @service nostrAuth; + @service nostrData; + @service nostrRelay; + + @tracked recipientRelays = null; + + getLightningAddress(pubkey) { + const profile = this.nostrData.getProfile(pubkey); + return profile?.lud16 || profile?.lud06 || null; + } + + async resolveLnurl(address) { + const url = parseLNURLOrAddress(address); + if (!url) throw new Error('Invalid lightning address or LNURL'); + + // eslint-disable-next-line warp-drive/no-external-request-patterns + const res = await fetch(url.toString()); + if (!res.ok) { + throw new Error(`Failed to fetch LNURL pay endpoint: ${res.statusText}`); + } + + const data = await res.json(); + if (!data.callback) { + throw new Error('Invalid LNURL pay endpoint: missing callback'); + } + if (!data.allowsNostr) { + throw new Error('This lightning address does not support Nostr zaps'); + } + + return { + callback: data.callback, + minSendable: data.minSendable ?? 1000, + maxSendable: data.maxSendable ?? 100_000_000_000, + allowsNostr: !!data.allowsNostr, + nostrPubkey: data.nostrPubkey, + }; + } + + async loadRecipientRelays(pubkey) { + if (!pubkey) return this._fallbackRelays(); + + // Check the store first — the event may already be cached + const fromStore = await this._getMailboxesFromStore(pubkey); + if (fromStore?.length) { + this.recipientRelays = fromStore; + return fromStore; + } + + // Fetch from network if not in the store + const fetched = await this._fetchMailboxesFromNetwork(pubkey); + if (fetched?.length) { + this.recipientRelays = fetched; + return fetched; + } + + // Fallback: sender's inbox relays + popular defaults + const fallback = this._fallbackRelays(); + this.recipientRelays = fallback; + return fallback; + } + + async _getMailboxesFromStore(pubkey) { + try { + const event = await firstValueFrom( + this.nostrData.store.replaceable(10002, pubkey).pipe( + timeout(500), + catchError(() => of(null)) + ) + ); + if (event) return getInboxes(event); + } catch { + // Event not in store yet + } + return null; + } + + async _fetchMailboxesFromNetwork(pubkey) { + const relays = this.nostrData.activeReadRelays?.length + ? this.nostrData.activeReadRelays + : DIRECTORY_RELAYS; + + try { + const event = await firstValueFrom( + this.nostrRelay.pool + .request(relays, [{ kinds: [10002], authors: [pubkey] }]) + .pipe( + timeout(RELAY_FETCH_TIMEOUT), + catchError(() => of(null)) + ) + ); + if (event) { + this.nostrData.store.add(event); + return getInboxes(event); + } + } catch { + // Network fetch failed + } + return null; + } + + _fallbackRelays() { + const senderRelays = this.nostrData.mailboxReadRelays || []; + return [...new Set([...senderRelays, ...DEFAULT_ZAP_RELAYS])].slice(0, 5); + } + + getZapRelays() { + if (this.recipientRelays?.length) { + return this.recipientRelays.slice(0, 5); + } + return this._fallbackRelays(); + } + + async createZapRequest(photo, amountMsats, message) { + const event = this.nostrData.store.getEvent(photo.eventId); + if (!event) { + throw new Error('Photo event not found in store'); + } + + const relays = this.getZapRelays(); + const signer = this.nostrAuth.signer; + if (!signer) { + throw new Error('Nostr signer not available. Please connect Nostr.'); + } + + return await ZapRequestFactory.event(event, amountMsats, relays) + .message(message || '') + .as(signer) + .sign(); + } + + async fetchInvoice(callbackUrl, zapRequest, amountMsats) { + const url = new URL(callbackUrl); + url.searchParams.set('amount', amountMsats.toString()); + url.searchParams.set('nostr', JSON.stringify(zapRequest)); + return await getInvoice(url); + } + + parseInvoice(invoice) { + return parseBolt11(invoice); + } + + hasWebLN() { + return typeof window !== 'undefined' && typeof window.webln !== 'undefined'; + } + + async payWithWebln(invoice) { + if (!this.hasWebLN()) throw new Error('WebLN not available'); + await window.webln.enable(); + return await window.webln.sendPayment(invoice); + } + + async zap(photo, amountMsats, message) { + const pubkey = photo?.pubkey; + if (!pubkey) throw new Error('Photo has no pubkey'); + + // Ensure recipient relays are loaded before building the zap request + if (!this.recipientRelays) { + await this.loadRecipientRelays(pubkey); + } + + const address = this.getLightningAddress(pubkey); + if (!address) { + throw new Error( + 'This user has no lightning address set in their profile' + ); + } + + const lnurl = await this.resolveLnurl(address); + + if (amountMsats < lnurl.minSendable || amountMsats > lnurl.maxSendable) { + throw new Error( + `Amount must be between ${lnurl.minSendable} and ${lnurl.maxSendable} millisats` + ); + } + + const zapRequest = await this.createZapRequest(photo, amountMsats, message); + const invoice = await this.fetchInvoice( + lnurl.callback, + zapRequest, + amountMsats + ); + + return { invoice, zapRequest }; + } +} diff --git a/app/styles/app.css b/app/styles/app.css index 47f243e..9db8693 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -2431,3 +2431,260 @@ button.create-place { padding: 2px 6px; border-radius: 10px; } + +/* Zap Photo Modal */ +.zap-photo-modal-overlay { + position: fixed; + inset: 0; + background: rgb(0 0 0 / 70%); + z-index: 10000; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; +} + +.zap-photo-modal { + background: white; + border-radius: 12px; + box-shadow: 0 8px 32px rgb(0 0 0 / 30%); + width: 100%; + max-width: 420px; + max-height: 90vh; + overflow-y: auto; + display: flex; + flex-direction: column; +} + +.zap-photo-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.25rem; + border-bottom: 1px solid var(--divider-color); +} + +.zap-photo-modal-header h3 { + margin: 0; +} + +.zap-modal-close { + background: none; + border: none; + padding: 0.25rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: #898989; +} + +.zap-modal-close:hover { + color: var(--body-text-color); +} + +.zap-modal-status { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid var(--divider-color); + min-height: 2.5rem; + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.zap-modal-loading { + font-size: 0.85rem; + color: #898989; +} + +.zap-modal-address { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.zap-modal-badge { + background: #f7b500; + color: white; + font-size: 0.7rem; + font-weight: 600; + padding: 2px 8px; + border-radius: 10px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.zap-modal-address-text { + font-family: monospace; + font-size: 0.8rem; + color: #555; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.zap-modal-error-msg { + color: var(--danger-color); + font-size: 0.85rem; + padding: 0.5rem 0.75rem; + background: rgb(234 67 53 / 8%); + border-radius: 4px; +} + +.zap-modal-body { + padding: 1.25rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.zap-modal-center { + align-items: center; + text-align: center; +} + +.zap-amount-display { + display: flex; + align-items: baseline; + justify-content: center; + gap: 0.4rem; +} + +.zap-amount-value { + font-size: 2rem; + font-weight: 700; + color: #f7b500; +} + +.zap-amount-unit { + font-size: 0.9rem; + color: #898989; +} + +.zap-slider { + width: 100%; + accent-color: #f7b500; + cursor: pointer; +} + +.zap-slider-ticks { + display: flex; + justify-content: space-between; + font-size: 0.7rem; + color: #aaa; + padding: 0 0.25rem; +} + +.zap-min-max { + font-size: 0.75rem; + color: #898989; + text-align: center; +} + +.zap-message-field { + display: flex; + flex-direction: column; + gap: 0.3rem; +} + +.zap-message-field label { + font-size: 0.8rem; + color: #898989; +} + +.zap-message-field textarea { + width: 100%; + border: 1px solid #ddd; + border-radius: 4px; + padding: 0.5rem; + font-family: inherit; + font-size: 0.9rem; + resize: vertical; +} + +.zap-message-field textarea:focus { + outline: none; + border-color: var(--link-color); +} + +.zap-modal-actions { + display: flex; + gap: 0.5rem; + justify-content: flex-end; +} + +.zap-modal-hint { + font-size: 0.8rem; + color: #898989; + text-align: center; +} + +.zap-spinner { + width: 32px; + height: 32px; + border: 3px solid #eee; + border-top-color: #f7b500; + border-radius: 50%; + animation: zap-spin 0.8s linear infinite; +} + +@keyframes zap-spin { + to { + transform: rotate(360deg); + } +} + +.zap-pay-prompt { + text-align: center; + font-size: 0.9rem; +} + +.zap-qr-container { + display: flex; + justify-content: center; +} + +.zap-qr-container canvas { + border-radius: 8px; + background: white; + padding: 8px; +} + +.zap-qr-container a { + display: block; +} + +.zap-webln-btn { + width: 100%; +} + +.zap-open-wallet-link { + width: 100%; + text-align: center; + text-decoration: none; +} + +.zap-invoice-details { + display: flex; + justify-content: center; + font-size: 0.8rem; +} + +.zap-success { + gap: 0.5rem; +} + +.zap-success-icon { + font-size: 3rem; +} + +.zap-success h4 { + margin: 0; + font-size: 1.2rem; +} + +.zap-success p { + margin: 0; + font-size: 0.9rem; + color: #555; +} diff --git a/package.json b/package.json index e3de5c0..f0f73d5 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,7 @@ "dependencies": { "@noble/hashes": "^2.3.0", "@waysidemapping/pinhead": "^15.25.0", + "applesauce-common": "^6.2.0", "applesauce-core": "^6.2.0", "applesauce-loaders": "^6.2.0", "applesauce-relay": "^6.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0c5d0a5..9cd2991 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@waysidemapping/pinhead': specifier: ^15.25.0 version: 15.25.0 + applesauce-common: + specifier: ^6.2.0 + version: 6.2.0(supports-color@10.2.2)(typescript@5.9.3) applesauce-core: specifier: ^6.2.0 version: 6.2.0(supports-color@10.2.2)(typescript@5.9.3) @@ -2636,6 +2639,9 @@ packages: resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} engines: {node: '>= 8'} + applesauce-common@6.2.0: + resolution: {integrity: sha512-meXbDCdqA1LKy1tr04BW7wMfnBBkHetLv+wlXYjAj5iR4Sji5KMxLFdAjUe6cSvrxrk9LxFcP+0P9BcZQxjpaA==} + applesauce-core@6.2.0: resolution: {integrity: sha512-O6AlVyzqcuIhTOIuexm6UWmx7mRIa2D98gJP7K7vFGf90YdtvSH78AsKQWZXJ0Pk/K14at+9zkwfCkFr7ghgNw==} @@ -4733,6 +4739,9 @@ packages: lie@3.1.1: resolution: {integrity: sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==} + light-bolt11-decoder@3.2.0: + resolution: {integrity: sha512-3QEofgiBOP4Ehs9BI+RkZdXZNtSys0nsJ6fyGeSiAGCBsMwHGUDS/JQlY/sTnWs91A2Nh0S9XXfA8Sy9g6QpuQ==} + lightningcss-android-arm64@1.33.0: resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==} engines: {node: '>= 12.0.0'} @@ -9348,6 +9357,18 @@ snapshots: normalize-path: 3.0.0 picomatch: 2.3.1 + applesauce-common@6.2.0(supports-color@10.2.2)(typescript@5.9.3): + dependencies: + '@scure/base': 2.2.0 + applesauce-core: 6.2.0(supports-color@10.2.2)(typescript@5.9.3) + hash-sum: 2.0.0 + light-bolt11-decoder: 3.2.0 + nanoid: 5.1.9 + rxjs: 7.8.2 + transitivePeerDependencies: + - supports-color + - typescript + applesauce-core@6.2.0(supports-color@10.2.2)(typescript@5.9.3): dependencies: debug: 4.4.3(supports-color@10.2.2) @@ -11974,6 +11995,10 @@ snapshots: dependencies: immediate: 3.0.6 + light-bolt11-decoder@3.2.0: + dependencies: + '@scure/base': 1.1.1 + lightningcss-android-arm64@1.33.0: optional: true diff --git a/tests/helpers/mock-nostr.js b/tests/helpers/mock-nostr.js index 322f00b..4066d02 100644 --- a/tests/helpers/mock-nostr.js +++ b/tests/helpers/mock-nostr.js @@ -100,10 +100,76 @@ export class MockNostrRelayService extends Service { } } +export class MockNostrZapService extends Service { + @tracked _lightningAddress = 'user@example.com'; + @tracked _endpoint = { + callback: 'https://example.com/callback', + minSendable: 1000, + maxSendable: 100_000_000, + allowsNostr: true, + nostrPubkey: 'c'.repeat(64), + }; + @tracked _webLNAvailable = false; + @tracked _zapResult = { + invoice: 'lnbc1u1pjtestinvoice1234567890', + zapRequest: { id: 'zap-req-1' }, + }; + @tracked _parsedInvoice = { + amount: 1_000_000, + expiry: 9_999_999_999, + description: 'test zap', + }; + + @tracked recipientRelays = null; + + getLightningAddress() { + return this._lightningAddress; + } + + async resolveLnurl() { + if (!this._endpoint.allowsNostr) { + throw new Error('This lightning address does not support Nostr zaps'); + } + return this._endpoint; + } + + async loadRecipientRelays() { + this.recipientRelays = ['wss://relay.test']; + return this.recipientRelays; + } + + getZapRelays() { + return ( + this.recipientRelays || [ + 'wss://relay.damus.io', + 'wss://nos.lol', + 'wss://relay.primal.net', + ] + ); + } + + hasWebLN() { + return this._webLNAvailable; + } + + async zap() { + return this._zapResult; + } + + parseInvoice() { + return this._parsedInvoice; + } + + async payWithWebln() { + return {}; + } +} + export function setupNostrMocks(hooks) { hooks.beforeEach(function () { this.owner.register('service:nostrAuth', MockNostrAuthService); this.owner.register('service:nostrData', MockNostrDataService); this.owner.register('service:nostrRelay', MockNostrRelayService); + this.owner.register('service:nostrZap', MockNostrZapService); }); } diff --git a/tests/integration/components/photo-gallery-test.gjs b/tests/integration/components/photo-gallery-test.gjs index 5e607af..28e904e 100644 --- a/tests/integration/components/photo-gallery-test.gjs +++ b/tests/integration/components/photo-gallery-test.gjs @@ -478,4 +478,62 @@ module('Integration | Component | photo-gallery', function (hooks) { .dom('.photo-gallery-uploader-name') .hasText('Bob', 'falls back to display_name when displayName is missing'); }); + + test('it shows Zap this photo in the dropdown', async function (assert) { + this.nostrAuth.pubkey = USER_A; + this.selectedPhoto = this.photos[0]; + + await render( + + ); + + await click('.dropdown-trigger-btn'); + + let zapBtn; + document.querySelectorAll('.dropdown-item').forEach((item) => { + if (item.textContent.includes('Zap this photo')) { + zapBtn = item; + } + }); + + assert.ok(zapBtn, 'Zap this photo dropdown item exists'); + }); + + test('it opens zap modal when Zap this photo is clicked', async function (assert) { + this.nostrAuth.pubkey = USER_A; + this.selectedPhoto = this.photos[0]; + + await render( + + ); + + await click('.dropdown-trigger-btn'); + + let zapBtn; + document.querySelectorAll('.dropdown-item').forEach((item) => { + if (item.textContent.includes('Zap this photo')) { + zapBtn = item; + } + }); + + await click(zapBtn); + + assert.dom('.zap-photo-modal').exists('zap modal is rendered'); + }); }); diff --git a/tests/integration/components/zap-photo-modal-test.gjs b/tests/integration/components/zap-photo-modal-test.gjs new file mode 100644 index 0000000..8b0f16d --- /dev/null +++ b/tests/integration/components/zap-photo-modal-test.gjs @@ -0,0 +1,259 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'marco/tests/helpers'; +import { render, click, fillIn, waitFor } from '@ember/test-helpers'; +import Service from '@ember/service'; +import ZapPhotoModal from 'marco/components/zap-photo-modal'; +import { setupNostrMocks } from 'marco/tests/helpers/mock-nostr'; +import sinon from 'sinon'; + +const USER_A = 'a'.repeat(64); + +class MockToastService extends Service { + show() {} +} + +module('Integration | Component | zap-photo-modal', function (hooks) { + setupRenderingTest(hooks); + setupNostrMocks(hooks); + + hooks.beforeEach(function () { + this.owner.register('service:toast', MockToastService); + + this.nostrZap = this.owner.lookup('service:nostrZap'); + this.toast = this.owner.lookup('service:toast'); + + this.photo = { + eventId: 'event1', + pubkey: USER_A, + url: 'https://example.com/photo.jpg', + }; + }); + + hooks.afterEach(function () { + sinon.restore(); + }); + + test('it renders the amount slider when lightning address is available', async function (assert) { + await render( + + ); + + assert.dom('.zap-slider').exists('slider is rendered'); + assert.dom('.zap-amount-value').exists('amount is displayed'); + assert + .dom('.zap-modal-address-text') + .hasText('user@example.com', 'lightning address is shown'); + assert.dom('.zap-modal-badge').hasText('Lightning', 'badge is shown'); + }); + + test('it shows error when user has no lightning address', async function (assert) { + this.nostrZap._lightningAddress = null; + + await render( + + ); + + assert + .dom('.zap-modal-error-msg') + .exists('error message is shown when no lightning address'); + assert + .dom('.zap-modal-actions .btn-primary') + .isDisabled('zap button is disabled when no address'); + }); + + test('it shows error when LNURL does not support Nostr zaps', async function (assert) { + this.nostrZap._endpoint = { + ...this.nostrZap._endpoint, + allowsNostr: false, + }; + + await render( + + ); + + assert + .dom('.zap-modal-error-msg') + .exists('error shown when allowsNostr is false'); + assert + .dom('.zap-modal-actions .btn-primary') + .isDisabled('zap button is disabled'); + }); + + test('it performs zap flow when Zap button is clicked', async function (assert) { + const zapSpy = sinon.spy(this.nostrZap, 'zap'); + let closed = false; + this.handleClose = () => { + closed = true; + }; + + await render( + + ); + + assert + .dom('.zap-modal-actions .btn-primary') + .isNotDisabled('zap button is enabled when endpoint is valid'); + + await click('.zap-modal-actions .btn-primary'); + + assert.ok(zapSpy.calledOnce, 'nostrZap.zap was called'); + assert.deepEqual( + zapSpy.firstCall.args[0], + this.photo, + 'zap was called with the photo' + ); + assert.strictEqual( + zapSpy.firstCall.args[1], + 1_000_000, + 'zap amount is 1000 sats in millisats' + ); + + await waitFor('.zap-qr-container'); + + assert.dom('.zap-qr-container').exists('QR code is shown'); + assert.dom('.zap-pay-prompt').exists('payment prompt is shown'); + assert.notOk(closed, 'modal was not closed by clicking the Zap button'); + }); + + test('it passes the message to the zap call', async function (assert) { + const zapSpy = sinon.spy(this.nostrZap, 'zap'); + + await render( + + ); + + await fillIn('.zap-message-field textarea', 'Great photo!'); + + await click('.zap-modal-actions .btn-primary'); + + assert.ok(zapSpy.calledOnce, 'nostrZap.zap was called'); + assert.strictEqual( + zapSpy.firstCall.args[2], + 'Great photo!', + 'message is passed to zap' + ); + }); + + test('it shows WebLN button when available', async function (assert) { + this.nostrZap._webLNAvailable = true; + + await render( + + ); + + await click('.zap-modal-actions .btn-primary'); + await waitFor('.zap-webln-btn'); + + assert.dom('.zap-webln-btn').exists('WebLN button is shown when available'); + }); + + test('it shows success after WebLN payment', async function (assert) { + this.nostrZap._webLNAvailable = true; + + await render( + + ); + + await click('.zap-modal-actions .btn-primary'); + await waitFor('.zap-webln-btn'); + await click('.zap-webln-btn'); + + await waitFor('.zap-success'); + + assert.dom('.zap-success').exists('success state is shown'); + assert.dom('.zap-success h4').hasText('Zap Sent!', 'success title'); + }); + + test('it calls onClose when close button is clicked', async function (assert) { + let closed = false; + this.handleClose = () => { + closed = true; + }; + + await render( + + ); + + await click('.zap-modal-close'); + + assert.ok(closed, 'onClose was called'); + }); + + test('it calls onClose when Cancel button is clicked', async function (assert) { + let closed = false; + this.handleClose = () => { + closed = true; + }; + + await render( + + ); + + await click('.zap-modal-actions .btn-outline'); + + assert.ok(closed, 'onClose was called from Cancel button'); + }); + + test('it does not close when clicking inside the modal body', async function (assert) { + let closed = false; + this.handleClose = () => { + closed = true; + }; + + await render( + + ); + + await click('.zap-photo-modal'); + + assert.notOk(closed, 'onClose was not called when clicking inside modal'); + }); + + test('it does not close when clicking the overlay background', async function (assert) { + let closed = false; + this.handleClose = () => { + closed = true; + }; + + await render( + + ); + + await click('.zap-photo-modal-overlay'); + + assert.notOk(closed, 'onClose was not called when clicking overlay'); + }); +});