Merge pull request 'multiple zapping issues resolved for confirming and showing active states of zaps' (#36) from staging into master

Reviewed-on: #36

src/components/ModCard.tsx

@@ -80,6 +80,18 @@ export const ModCard = ({
               </svg>
               <p>420</p>
             </div>
+            <div className='cMMFootReactionsElement'>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                viewBox='-64 0 512 512'
+                width='1em'
+                height='1em'
+                fill='currentColor'
+              >
+                <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
+              </svg>
+              <p>420</p>
+            </div>
           </div>
         </div>
       </div>

src/components/Zap.tsx

@@ -120,6 +120,7 @@ type ZapQRProps = {
   handleClose: () => void
   handleQRExpiry: () => void
   setTotalZapAmount?: Dispatch<SetStateAction<number>>
+  setHasZapped?: Dispatch<SetStateAction<boolean>>
 }
 
 export const ZapQR = React.memo(
@@ -127,7 +128,8 @@ export const ZapQR = React.memo(
     paymentRequest,
     handleClose,
     handleQRExpiry,
-    setTotalZapAmount
+    setTotalZapAmount,
+    setHasZapped
   }: ZapQRProps) => {
     useDidMount(() => {
       ZapController.getInstance()
@@ -137,6 +139,7 @@ export const ZapQR = React.memo(
           if (setTotalZapAmount) {
             const amount = getZapAmount(zapReceipt)
             setTotalZapAmount((prev) => prev + amount)
+            if (setHasZapped) setHasZapped(true)
           }
         })
         .catch((err) => {
@@ -227,6 +230,8 @@ type ZapPopUpProps = {
   notCloseAfterZap?: boolean
   lastNode?: ReactNode
   setTotalZapAmount?: Dispatch<SetStateAction<number>>
+  setHasZapped?: Dispatch<SetStateAction<boolean>>
+
   handleClose: () => void
 }
 
@@ -239,6 +244,7 @@ export const ZapPopUp = ({
   lastNode,
   notCloseAfterZap,
   setTotalZapAmount,
+  setHasZapped,
   handleClose
 }: ZapPopUpProps) => {
   const [isLoading, setIsLoading] = useState(false)
@@ -337,6 +343,8 @@ export const ZapPopUp = ({
           toast.success(`Successfully sent ${amount} sats!`)
           if (setTotalZapAmount) {
             setTotalZapAmount((prev) => prev + amount)
+
+            if (setHasZapped) setHasZapped(true)
           }
 
           if (!notCloseAfterZap) {
@@ -357,7 +365,8 @@ export const ZapPopUp = ({
     notCloseAfterZap,
     handleClose,
     generatePaymentRequest,
-    setTotalZapAmount
+    setTotalZapAmount,
+    setHasZapped
   ])
 
   const handleQRExpiry = useCallback(() => {
@@ -438,6 +447,7 @@ export const ZapPopUp = ({
                       handleClose={handleQRClose}
                       handleQRExpiry={handleQRExpiry}
                       setTotalZapAmount={setTotalZapAmount}
+                      setHasZapped={setHasZapped}
                     />
                   )}
                   {lastNode}

src/controllers/metadata.ts

@@ -121,10 +121,10 @@ export class MetadataController {
   public findUserRelays = async (
     hexKey: string,
     userRelaysType: UserRelaysType = UserRelaysType.Both
-  ) => {
+  ): Promise<string[]> => {
     log(true, LogType.Info, `ℹ Finding user's relays`, hexKey, userRelaysType)
 
-    const ndkRelayListPromise = await getRelayListForUser(hexKey, this.ndk)
+    const ndkRelayListPromise = getRelayListForUser(hexKey, this.ndk)
 
     // Use Promise.race to either get the NDKRelayList instance or handle the timeout
     return await Promise.race([
@@ -132,11 +132,12 @@ export class MetadataController {
       timeout() // Custom timeout function that rejects after a specified time
     ])
       .then((ndkRelayList) => {
-        return ndkRelayList[userRelaysType]
+        if (ndkRelayList) return ndkRelayList[userRelaysType]
+        return [] // Return an empty array if ndkRelayList is undefined
       })
       .catch((err) => {
         log(true, LogType.Error, err)
-        return [] as string[] // Return an empty array if an error occurs
+        return [] // Return an empty array if an error occurs
       })
   }
 

src/controllers/relay.ts

@@ -1,4 +1,4 @@
-import { Event, Filter, kinds, Relay } from 'nostr-tools'
+import { Event, Filter, kinds, nip57, Relay } from 'nostr-tools'
 import {
   extractZapAmount,
   log,
@@ -600,29 +600,20 @@ export class RelayController {
     const processedEvents: string[] = [] // To keep track of processed events
 
     // Create a promise for each relay subscription
-    const subPromises = relays.map((relay) => {
+    const subscriptions = relays.map((relay) =>
-      return new Promise<void>((resolve) => {
+      relay.subscribe([filter], {
-        // Subscribe to the relay with the specified filter
+        // Handle incoming events
-        const sub = relay.subscribe([filter], {
+        onevent: (e) => {
-          // Handle incoming events
+          // Process event only if it hasn't been processed before
-          onevent: (e) => {
+          if (!processedEvents.includes(e.id)) {
-            // Process event only if it hasn't been processed before
+            processedEvents.push(e.id)
-            if (!processedEvents.includes(e.id)) {
+            eventHandler(e) // Call the event handler with the event
-              processedEvents.push(e.id)
-              eventHandler(e) // Call the event handler with the event
-            }
-          },
-          // Handle the End-Of-Stream (EOSE) message
-          oneose: () => {
-            sub.close() // Close the subscription
-            resolve() // Resolve the promise when EOSE is received
           }
-        })
+        }
       })
-    })
+    )
 
-    // Wait for all subscriptions to complete
+    return subscriptions
-    await Promise.allSettled(subPromises)
   }
 
   getTotalZapAmount = async (
@@ -638,53 +629,90 @@ export class RelayController {
       UserRelaysType.Read
     )
 
-    // add app relay to relays array
+    const appRelay = import.meta.env.VITE_APP_RELAY
-    relayUrls.push(import.meta.env.VITE_APP_RELAY)
+    if (!relayUrls.includes(appRelay)) {
-
+      relayUrls.push(appRelay)
-    // add admin relays to relays array
+    }
-    metadataController.adminRelays.forEach((url) => {
-      relayUrls.push(url)
-    })
 
     // Connect to all specified relays
     const relayPromises = relayUrls.map((relayUrl) =>
       this.connectRelay(relayUrl)
     )
-    await Promise.allSettled(relayPromises)
+
+    // Use Promise.allSettled to wait for all promises to settle
+    const results = await Promise.allSettled(relayPromises)
+
+    // Extract non-null values from fulfilled promises in a single pass
+    const relays = results.reduce<Relay[]>((acc, result) => {
+      if (result.status === 'fulfilled') {
+        const value = result.value
+        if (value) {
+          acc.push(value)
+        }
+      }
+      return acc
+    }, [])
 
     let accumulatedZapAmount = 0
     let hasZapped = false
 
     const eventIds = new Set<string>() // To keep track of event IDs and avoid duplicates
 
-    const filter: Filter = {
+    const filters: Filter[] = [
-      kinds: [kinds.Zap]
+      {
-    }
+        kinds: [kinds.Zap],
+        '#e': [eTag]
+      }
+    ]
 
     if (aTag) {
-      filter['#a'] = [aTag]
+      filters.push({
-    } else {
+        kinds: [kinds.Zap],
-      filter['#e'] = [eTag]
+        '#a': [aTag]
+      })
     }
 
     // Create a promise for each relay subscription
-    const subPromises = this.connectedRelays.map((relay) => {
+    const subPromises = relays.map((relay) => {
       return new Promise<void>((resolve) => {
         // Subscribe to the relay with the specified filter
-        const sub = relay.subscribe([filter], {
+        const sub = relay.subscribe(filters, {
           // Handle incoming events
           onevent: (e) => {
             // Add the event to the array if it's not a duplicate
             if (!eventIds.has(e.id)) {
               eventIds.add(e.id) // Record the event ID
-              const amount = extractZapAmount(e)
+
+              const zapRequestStr = e.tags.find(
+                (t) => t[0] === 'description'
+              )?.[1]
+              if (!zapRequestStr) return
+
+              const error = nip57.validateZapRequest(zapRequestStr)
+              if (error) return
+
+              let zapRequest: Event | null = null
+
+              try {
+                zapRequest = JSON.parse(zapRequestStr)
+              } catch (error) {
+                log(
+                  true,
+                  LogType.Error,
+                  'Error occurred in parsing zap request',
+                  error
+                )
+              }
+
+              if (!zapRequest) return
+
+              const amount = extractZapAmount(zapRequest)
               accumulatedZapAmount += amount
 
-              if (!hasZapped) {
+              if (amount > 0) {
-                hasZapped =
+                if (!hasZapped) {
-                  e.tags.findIndex(
+                  hasZapped = zapRequest.pubkey === currentLoggedInUser
-                    (tag) => tag[0] === 'P' && tag[1] === currentLoggedInUser
+                }
-                  ) > -1
               }
             }
           },

src/controllers/zap.ts

@@ -12,6 +12,7 @@ import {
 } from '../types'
 import { log, LogType, npubToHex } from '../utils'
 import { RelayController } from './relay'
+import { MetadataController, UserRelaysType } from './metadata'
 
 /**
  * Singleton class to manage zap related operations.
@@ -147,7 +148,7 @@ export class ZapController {
       const cleanup = () => {
         clearTimeout(timeout)
 
-        sub.close()
+        subscriptions.forEach((subscription) => subscription.close())
       }
 
       // Polling timeout
@@ -160,13 +161,11 @@ export class ZapController {
         pollingTimeout || 6 * 60 * 1000 // 6 minutes
       )
 
-      const relay = await RelayController.getInstance().connectRelay(
+      const relaysTag = zapRequest.tags.find((t) => t[0] === 'relays')
-        this.appRelay
+      if (!relaysTag)
-      )
+        throw new Error('Zap request does not contain relays tag.')
 
-      if (!relay) {
+      const relayUrls = relaysTag.slice(1)
-        return reject('Polling Zap Receipt: Could not connect to app relay!')
-      }
 
       // filter relay for event of kind 9735
       const filter: Filter = {
@@ -174,25 +173,27 @@ export class ZapController {
         since: created_at
       }
 
-      const sub = relay.subscribe([filter], {
+      const subscriptions =
-        // Handle incoming events
+        await RelayController.getInstance().subscribeForEvents(
-        onevent: async (event) => {
+          filter,
-          // get description tag of the event
+          relayUrls,
-          const description = event.tags.filter(
+          async (event) => {
-            (tag) => tag[0] === 'description'
+            // get description tag of the event
-          )[0]
+            const description = event.tags.filter(
+              (tag) => tag[0] === 'description'
+            )[0]
 
-          // compare description tag of the event with stringified zap request
+            // compare description tag of the event with stringified zap request
-          if (description[1] === zapRequestStringified) {
+            if (description[1] === zapRequestStringified) {
-            // validate zap receipt
+              // validate zap receipt
-            if (await this.validateZapReceipt(pr, event as ZapReceipt)) {
+              if (await this.validateZapReceipt(pr, event as ZapReceipt)) {
-              cleanup()
+                cleanup()
 
-              resolve(event as ZapReceipt)
+                resolve(event as ZapReceipt)
+              }
             }
           }
-        }
+        )
-      })
     })
   }
 
@@ -280,11 +281,21 @@ export class ZapController {
 
     if (!recipientHexKey) throw 'Invalid recipient pubKey.'
 
+    const metadataController = await MetadataController.getInstance()
+    const receiverReadRelays = await metadataController.findUserRelays(
+      recipientHexKey,
+      UserRelaysType.Read
+    )
+
+    if (!receiverReadRelays.includes(this.appRelay)) {
+      receiverReadRelays.push(this.appRelay)
+    }
+
     const zapRequest: ZapRequest = {
       kind: kinds.ZapRequest,
       content,
       tags: [
-        ['relays', `${this.appRelay}`],
+        ['relays', ...receiverReadRelays],
         ['amount', `${amount}`],
         ['p', recipientHexKey]
       ],

src/pages/home.tsx

@@ -48,7 +48,10 @@ export const HomePage = () => {
                 loop
               >
                 {LANDING_PAGE_DATA.featuredSlider.map((naddr) => (
-                  <SwiperSlide className='swiper-slide IBMSMSliderContainerWrapperSlider'>
+                  <SwiperSlide
+                    key={naddr}
+                    className='swiper-slide IBMSMSliderContainerWrapperSlider'
+                  >
                     <SlideContent naddr={naddr} />
                   </SwiperSlide>
                 ))}
@@ -65,7 +68,11 @@ export const HomePage = () => {
             </div>
             <div className='IBMSMList IBMSMListFeaturedAlt'>
               {LANDING_PAGE_DATA.featuredGames.map((game) => (
-                <GameCard title={game.title} imageUrl={game.imageUrl} />
+                <GameCard
+                  key={game.title}
+                  title={game.title}
+                  imageUrl={game.imageUrl}
+                />
               ))}
             </div>
             <div className='IBMSMAction'>

src/pages/mod/internal/comment/index.tsx

@@ -13,7 +13,7 @@ import {
   Filter as NostrEventFilter,
   UnsignedEvent
 } from 'nostr-tools'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { Dispatch, SetStateAction, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
@@ -58,6 +58,10 @@ export const Comments = ({ modDetails, setCommentCount }: Props) => {
     author: AuthorFilterEnum.All_Comments
   })
 
+  useEffect(() => {
+    setCommentCount(commentEvents.length)
+  }, [commentEvents, setCommentCount])
+
   const userState = useAppSelector((state) => state.user)
 
   useDidMount(async () => {
@@ -202,8 +206,6 @@ export const Comments = ({ modDetails, setCommentCount }: Props) => {
     return true
   }
 
-  setCommentCount(commentEvents.length)
-
   const comments = useMemo(() => {
     let filteredComments = commentEvents
     if (filterOptions.author === AuthorFilterEnum.Creator_Comments) {
@@ -588,6 +590,7 @@ const Zap = (props: Event) => {
           eventId={props.id}
           handleClose={() => setIsOpen(false)}
           setTotalZapAmount={setTotalZappedAmount}
+          setHasZapped={setHasZapped}
         />
       )}
     </>

src/pages/mod/internal/zap/index.tsx

@@ -74,6 +74,7 @@ export const Zap = ({ modDetails }: ZapProps) => {
           lastNode={<ZapSite />}
           notCloseAfterZap
           setTotalZapAmount={setTotalZappedAmount}
+          setHasZapped={setHasZapped}
         />
       )}
     </>

src/utils/nostr.ts

@@ -104,31 +104,13 @@ export const npubToHex = (pubKey: string): string | null => {
  * @returns The zap amount in the form of a number, converted from the extracted data, or 0 if the amount cannot be determined.
  */
 export const extractZapAmount = (event: Event): number => {
-  // Find the 'description' tag within the event's tags
+  // Find the 'amount' tag within the parsed description's tags
-  const description = event.tags.find(
+  const amountTag = event.tags.find(
-    (tag) => tag[0] === 'description' && typeof tag[1] === 'string'
+    (tag) => tag[0] === 'amount' && typeof tag[1] === 'string'
   )
 
-  // If the 'description' tag is found and it has a valid value
+  // If the 'amount' tag is found and it has a valid value, convert it to an integer and return
-  if (description && description[1]) {
+  if (amountTag && amountTag[1]) return parseInt(amountTag[1]) / 1000
-    try {
-      // Parse the description as JSON to get additional details
-      const parsedDescription: Event = JSON.parse(description[1])
-
-      // Find the 'amount' tag within the parsed description's tags
-      const amountTag = parsedDescription.tags.find(
-        (tag) => tag[0] === 'amount' && typeof tag[1] === 'string'
-      )
-
-      // If the 'amount' tag is found and it has a valid value, convert it to an integer and return
-      if (amountTag && amountTag[1]) return parseInt(amountTag[1]) / 1000
-    } catch (error) {
-      // Log an error message if JSON parsing fails
-      console.log(
-        `An error occurred while parsing description of zap event: ${error}`
-      )
-    }
-  }
 
   // Return 0 if the zap amount cannot be determined
   return 0