Just a crazy idea to make presentation view a bit more fun! 😝

Stories:

As an audience member, I want to see different levels of emoji confetti depending on the amount I Zap the speaker

Suggestions for levels,
5000 sats - 9,999 sats 💜
10,000 sats - 49,999 sats 🔥
50,000 sats - 99,999 sats 🤯
100,000 sats - 1mil sats 🚀
1mil sats+ 🍆🤯🚀🔥💜

Not sure how you achieve this from a code perspective, but I was looking at this as an example: eg. https://confetti.js.org/more.html#customShapes

Add a help modal within the app. Ideally the modal would be scrollable to fit the content without filling the screen. Open to suggestions on how this can be better achieved from a UI perspective.

Content (in markdown):

### About

With Event Zapper, attendees at meetups or conferences can "Zap" the speakers (send micro Bitcoin "tips") through nostr, the decentralized social protocol. This way, the audience can show their appreciation whenever they feel inspired, entertained, or informed by the content.

[Learn more about nostr and zapping here.](https://nostr.how/)

---

### Event Setup

Paste each speaker's nostr public key (npub) in to the "Speaker's Public Key" field.  The speaker's profile picture and name will be automatically populated. To receive Zaps, the speaker must already have a Bitcoin/Lightning address added to their nostr profile.

If the speaker doesn't use nostr, you can toggle off "Has nostr profile" and manually specify a name and picture for them. Paste a nostr public key of the speaker's choosing in to the "Donation Public Key" field. Zaps will be redirected the donation profile instead.

---

### Presenting

Click "Present" to open the Presentation screen - this is what you will display to your audience. Speakers configured on during setup will be displayed here.

A QR code for each speaker will be generated and displayed alongside the speaker's nostr profile picture and name. 

Audience members can scan the QR code to open the speaker's nostr profile in their default nostr client. Zaps sent to the specified nostr profile will be displayed under the speaker in realtime! 

---

### Found a bug?

Report bugs to [the Event Zapper GitHub page.](https://github.com/owen1917/event-zapper/issues)

Currently, in presentation view the QR code is generated and displayed separately from the profile image, which takes up more space. It is possible to embed the image within the QR code, which could save some space (and show more zaps) while still allowing audience to easily scan the QR code.

Example:

The code to do this potentially already exists in another similar nostr project, see the following:

QR code with my nostr profile image embedded: https://zapvertising.vercel.app/qrcode/npub1am50jqjytzdtepftqfzf8grh2gs4wpt7d4t90zxc6z288wqazj5skdks29

Project: https://zapvertising.vercel.app

GitHub project: https://github.com/SamSamskies/zapvertising

After adding a speaker, retain the same field titles to keep things consistent (affects both variations of speakers - has nostr profile and has not)

Current: npub:
Expected: Speaker's public key (npub)

Current: donation npub:
Expected: Donation public key (npub)

• Rapidly paste npubs and click "Add speaker"
• Notice that profile name and picture are not populated
• Click "Present"
• Notice that profile name and picture are not populated on this screen either

Expected: Prevent user from adding speaker until profile is pulled OR continue populating a-sync after the user clicks "add speaker"

• Go to speaker setup page
• Populate the npub field
• Toggle "Has nostr profile" OFF
• Observe how some of the information (image, name) is still populated
• Populate the "donation npub" field
• Toggle "Has nostr profile" ON
• Add the speaker
• Speaker is added but displayed with both npub and donation nub

Expected: If "Has nostr profile" is toggled, clear speaker field contents to prevent weird edge cases

Expected: "⚡️X Sats Zapped" will remain in the bottom right corner of the presentation screen

Original idea was to have a way for new nostr users to onboard during presentation, this is just not realistic though so I think this should be removed so it's not cluttering up the display area.

Expecting the profile image to be round

Presently, the presentation view exclusively displays zaps of the "profile" type—specifically, those executed directly to the user's npub—excluding zaps directed at individual notes.

I've primarily conducted tests on iOS/Damus, where a Zap button is featured on the user's profile. Android/Amethyst also provides this option. However, the majority of other clients lack this functionality. Consequently, Event Zapper heavily depends on audience members utilizing specific clients for their zaps to appear in the presentation view - not ideal.

The proposed modification is to show ALL Zap types in the presentation view, encompassing both profile and individual note zaps. This ensures audience members can zap the speaker in their preferred manner, with the assurance that it will be visible in the presentation view.

As a user, I want the UI to pull in the profile image and name before I click "Add Speaker" so that I know I've entered the correct npub info

Context:
Nostr has the concept of Public, Private and Anonymous zaps:

Example (taken from Damus client on iOS):

Currently, Event Zapper is not showing Anonymous zaps in presentation view.

Expected: Anonymous zaps should be displayed in a similar way to Public zaps in presentation view, and counted towards the total number of Zaps shown in the UI.

Example of how it might look:

Zaps nip for reference: https://github.com/nostr-protocol/nips/blob/master/57.md

• Be on speaker setup screen
• Toggle "Has Nostr profile" to OFF
• Type anything in the "Speaker's name" field

Result:

Expected - "+" would remain in original position:

Current: Zaps will go to this address instead
Expected: Zaps will go to this profile instead

I think this terminology makes more sense as the audience is doing "profile zaps", and will be sent to the donation public key's corresponding "profile" when scanning the QR code.

Edge case. I'm not sure what the solution is for this (if any). Open to suggests on how the UI can react more gracefully to super long names

Some rough ideas on how a re-design might look.

Key changes are as follows:

• Choose a global dark theme that looks good for both speaker setup and presentation screens
• Clean-up speaker setup options
  • Simplify overall layout of setup screen
  • Remove ability for the user to customize the theme (lets just pick a solid theme that we know looks good!)
  • Remove ability to customize QR code size and image size. UI should be responsive to screen size for both speaker setup and presentation view
• Move relay settings to its own modal or section of the app

Relays will be monitored for incoming profile Zaps

Noticed the addition of "Please paste your npub above"

I feel like this might confuse users in to paste their own npub, as opposed the the person speaking. I feel like this is already covered by the field title "Speaker's public key (npub)"

• Setup multiple speakers as follows, configure them all with the name npub
  • 2 with "Has nostr profile" toggled on
  • 1 with "Has nostr profile" toggled off
• Click present
• Zap the profile of the specified npub
• Issue: Zaps only appear under the speaker configured with "Has nostr profile" toggled off
• Expected: All speakers are configured with the same npub, I should see the same zaps under all speakers

As an audience member, I want it to be obvious if the speaker is donating their zaps to someone else. That way, when I scan the QR and it opens someone else's profile I won't be surprised or confused.

I'm open to ideas, we could represent it in the area where the speaker image is shown, eg:

And/Or potentially just display the Zap cards a little differently, (ie. show both the zapper and the actual recipient of the zap on the card itself)

This is how it might look in presentation view:

Not sure I like the look of these changes #16 - what do you think @fjordskii ?

I think the profile image is super important to display as large as possible, and it doesn't seem like its feasible with it embedded within the QR code, without jepordzijng the usability of the QR.

In my opinion, we should revert to the previous layout.

Alternatively, the QR could be displayed next to the profile picture, to save space. Honestly, open to experimentation here!

Currently, it's not obvious that the custom image can be added. Adjust the image to show that the UI element can be clicked to add an image

Rough example:

Make "⚡️Event Zapper " page title dynamic on smaller screens (should not wrap to a second line and should be centred)

• Go to speaker setup screen
• Enter name and npub npub1am50jqjytzdtepftqfzf8grh2gs4wpt7d4t90zxc6z288wqazj5skdks29
• Click present

See error, looks like its having issues populating my avatar image:

Unhandled Runtime Error
Error: Invalid src prop [(https://owenl.net/nostr/nostr_avatar.jpg)](http://localhost:3000/(https://owenl.net/nostr/nostr_avatar.jpg)) on `next/image`, hostname "owenl.net" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Zaps can include content, such as text messages or images (which can be rendered by the client). (see https://zaplife.lol for a live example)

Stories:

• As an audience member, I want my zap to be displayed with a custom message or funny gif that I included when sending the zap

• As an event organizer, I want the option to hide Zap content in presentation view to prevent the potential for abusive content to be shown during the presentation

Presently, Event Zapper generates a QR code based on the speaker's npub. When scanning the QR code in presentation view, it opens the link nostr:[SPEAKERS NPUB]. The expected behavior is for this link to open in the user's default native client.

During my testing, primarily on iOS/Damus, this functions as anticipated, and the link opens in the Damus client, directing the user to the speaker's profile.

Subsequent testing reveals that this does not perform equally well with all clients:

• Android/Amethyst (most popular Android client): Opens the app but fails to open the user profile.
• Android/Current app: Does not open the app at all.
• iOS/Primal app: Does not open the app at all.

It is evident that these clients need to address this issue. However, relying on them to do so is not a viable solution.

The proposed resolution here is to generate a QR code that opens a jump link instead.https://njump.me/npub1am50jqjytzdtepftqfzf8grh2gs4wpt7d4t90zxc6z288wqazj5skdks29

.. from here, the audience member can decide how/with which client to view the speaker's nostr profile

Currently, the UI allows custom image to be set when user has "Has nostr profile" toggled on.

As an audience member it will get confusing when a user opens a profile to a different profile image. Speakers should be represented by their Nostr profile image and name, if they have "Has nostr profile" toggled on.

Add speaker fields should not persist data once the speaker is added

• Toggle "Has nostr profile" off
• Populate the name and donation npub field
• Add speaker
• Notice that the information is retained in the add speaker fields

Expected: Once the speaker is added, clear the fields ready for the next speaker to be added