Merge pull request #249 from P4-Games/fix/notifications-20231213

Fix/notifications 20231213
P4-Games · Dec 14, 2023 · 1bb2dd5 · 1bb2dd5
2 parents 96bae1c + 0f365ed
commit 1bb2dd5
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 109 deletions.
diff --git a/src/components/Navbar/AccountInfo.jsx b/src/components/Navbar/AccountInfo.jsx
@@ -34,7 +34,7 @@ const AccountInfo = ({ showAccountInfo, setShowAccountInfo }) => {
 
   useEffect(() => {
     setValidNetwork(isValidNetwork())
-  }, [showAccountInfo, chainId])
+  }, [showAccountInfo, chainId]) //eslint-disable-line react-hooks/exhaustive-deps
 
   const fetchTokenName = async () => {
     if (!walletAddress || !daiContract || !validNetwork) return

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -63,7 +63,7 @@ function Navbar() {
     )
     // setNotificationsNbr(20)
     // setNotificationsNbrClass(20 > 9 ? 'notification__badge__2' : 'notification__badge__1')
-  }, [notifications, walletAddress])
+  }, [notifications, walletAddress]) //eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside)
@@ -103,14 +103,16 @@ function Navbar() {
   )
 
   const ButtonNotification = () => (
-    <div onClick={() => handleNotificationClick()} className='navbar__right__coin'>
-      <Image src={'/images/notifications/message2.png'} alt='coin' height='60' width='60' />
-      {notificationsNbr > 0 && <div className={notificationsNbrClass}>{notificationsNbr}</div>}
-    </div>
+    <React.Fragment>
+      <div onClick={() => handleNotificationClick()} className='navbar__right__notif'>
+        {notificationsNbr > 0 && <div className={notificationsNbrClass}>{notificationsNbr}</div>}
+        <Image src={'/images/notifications/message2.png'} alt='coin' height='60' width='60' />
+      </div>
+    </React.Fragment>
   )
 
   const ButtonAccount = () => (
-    <div onClick={() => handleAccountClick()} className='navbar__right__coin'>
+    <div onClick={() => handleAccountClick()} className='navbar__right__account'>
       <Image src={'/images/navbar/logo-coin.png'} alt='coin' height='60' width='60' />
     </div>
   )

diff --git a/src/components/Navbar/NotificationInfo.jsx b/src/components/Navbar/NotificationInfo.jsx
@@ -1,13 +1,14 @@
-import React, { useState, useEffect, useContext } from 'react'
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
 import { useTranslation } from 'next-i18next'
 import moment from 'moment'
 import { VscMailRead } from 'react-icons/vsc'
 import { IoMailUnreadOutline } from 'react-icons/io5'
 import { RiDeleteBin2Line } from 'react-icons/ri'
 
-import { useWeb3Context, useNotificationContext } from '../../hooks'
+import { useWeb3Context, useNotificationContext, useSettingsContext } from '../../hooks'
 
-const NotificationInfo = ({ showNotificationInfo, setShowNotificationInfo }) => {
+const NotificationInfo = ({ showNotificationInfo }) => {
   const { t } = useTranslation()
   const {
     notifications,
@@ -18,22 +19,28 @@ const NotificationInfo = ({ showNotificationInfo, setShowNotificationInfo }) =>
     deleteAllNotifications
   } = useNotificationContext()
   const { walletAddress } = useWeb3Context()
+
   const [updatedNotifications, setUpdatedNotifications] = useState([])
   const [actionText, setActionText] = useState('')
   const [actionTextVisible, setActionTextVisible] = useState(false)
   const [actionTextPosition, setActionTextPosition] = useState(0)
+  const { languageSetted } = useSettingsContext()
 
   useEffect(() => {
     setUpdatedNotifications(getNotificationsByUser(walletAddress))
-  }, [showNotificationInfo, notifications, walletAddress])
+  }, [showNotificationInfo, notifications, walletAddress, languageSetted]) //eslint-disable-line react-hooks/exhaustive-deps
 
-  const formatNotificationDate = (date) => moment(date).fromNow()
+  const formatNotificationDate = (date) => {
+    moment.locale(languageSetted)
+    return moment(date).fromNow()
+  }
 
-  const translateNotificationMessage = (message, data) => {
+  const translateNotificationMessage = (message, data, short = true) => {
     let newMessage = t(message)
     data.forEach((element) => {
       const regex = new RegExp(`\\{${element.item}\\}`, 'g')
-      newMessage = newMessage.replaceAll(regex, element.valueShort)
+      if (short) newMessage = newMessage.replaceAll(regex, element.valueShort)
+      else newMessage = newMessage.replaceAll(regex, element.value)
     })
     return newMessage
   }
@@ -45,6 +52,16 @@ const NotificationInfo = ({ showNotificationInfo, setShowNotificationInfo }) =>
     return updatedNotifications.some((notification) => !notification.read)
   }
 
+  const handleCopy = (notification, event) => {
+    navigator.clipboard.writeText(notification)
+    setActionText(t('account_text_copied'))
+    setActionTextPosition(event.clientY - 70)
+    setActionTextVisible(true)
+    setTimeout(() => {
+      setActionTextVisible(false)
+    }, 1500)
+  }
+
   const handleRead = (notification, event) => {
     readNotification(notification.id)
     setActionText(t('notification_read'))
@@ -124,8 +141,16 @@ const NotificationInfo = ({ showNotificationInfo, setShowNotificationInfo }) =>
     <React.Fragment>
       <div className='notification__info__icon__and__link'>
         <div className='notification__info__link__container'>
-          <p className='notification__info__notification__message'>
-            {translateNotificationMessage(notification.message, notification.data)}
+          <p
+            className='notification__info__notification__message'
+            onClick={(event) => {
+              handleCopy(
+                translateNotificationMessage(notification.message, notification.data, false),
+                event
+              )
+            }}
+          >
+            {translateNotificationMessage(notification.message, notification.data, true)}
           </p>
           {actionTextVisible && (
             <span className='notification__info__action__text' style={{ top: actionTextPosition }}>
@@ -181,6 +206,10 @@ const NotificationInfo = ({ showNotificationInfo, setShowNotificationInfo }) =>
     </React.Fragment>
   )
 
+  NotificationMessage.propTypes = {
+    notification: PropTypes.object
+  }
+
   return (
     <div className={`notification__info ${showNotificationInfo ? 'active' : ''}`}>
       <React.Fragment>
@@ -198,4 +227,8 @@ const NotificationInfo = ({ showNotificationInfo, setShowNotificationInfo }) =>
   )
 }
 
+NotificationInfo.propTypes = {
+  showNotificationInfo: PropTypes.func
+}
+
 export default NotificationInfo
diff --git a/src/context/NotificationContext.js b/src/context/NotificationContext.js
@@ -1,4 +1,5 @@
 import { createContext, useState, useEffect, useContext } from 'react'
+import PropTypes from 'prop-types'
 import { v4 as uuidv4 } from 'uuid'
 import { Web3Context } from './Web3Context'
 
@@ -18,7 +19,7 @@ export const NotificationProvider = ({ children }) => {
   useEffect(() => {
     const filteredNotifications = getNotificationsByUser(walletAddress)
     setNotifications(filteredNotifications)
-  }, [walletAddress])
+  }, [walletAddress]) //eslint-disable-line react-hooks/exhaustive-deps
 
   const addNotification = (user, message, data) => {
     const date = new Date().toLocaleString()
@@ -64,6 +65,10 @@ export const NotificationProvider = ({ children }) => {
     setNotifications(updatedNotifs)
   }
 
+  NotificationProvider.propTypes = {
+    children: PropTypes.node.isRequired
+  }
+
   return (
     <NotificationContext.Provider
       value={{

diff --git a/src/context/SettingsContext.js b/src/context/SettingsContext.js
@@ -1,8 +1,12 @@
 import PropTypes from 'prop-types'
-import { createContext } from 'react'
+import { createContext, useEffect } from 'react'
 import { useLocalStorage } from '../hooks'
 import getLanguagePresets, { languagePresets } from '../utils/getLanguagePresets'
 import { defaultSettings } from '../config'
+import moment from 'moment'
+import spanishLocalization from 'moment/locale/es'
+import englishLocalization from 'moment/locale/en-gb'
+import portugueseLocalization from 'moment/locale/pt-br'
 
 // ----------------------------------------------------------------------
 
@@ -25,6 +29,12 @@ function SettingsProvider({ children }) {
     ...defaultSettings
   })
 
+  useEffect(() => {
+    moment.updateLocale('es', spanishLocalization)
+    moment.updateLocale('en-gb', englishLocalization)
+    moment.updateLocale('pt-br', portugueseLocalization)
+  }, [])
+
   const onToggleLanguageSetted = (newLng = 'es') => {
     const getUrl = window.location
     const urlEN = getUrl.pathname.includes('/en/') || getUrl.pathname.includes('/en')
@@ -45,6 +55,10 @@ function SettingsProvider({ children }) {
         languageSetted: newLng
       })
 
+      if (newLng === 'en') moment.locale('en-gb')
+      else if (newLng === 'br') moment.locale('pt-br')
+      else moment.locale(newLng)
+
       const getUrl = window.location
       const pathName = getUrl.pathname
         .replace('/en', '/')
@@ -69,6 +83,7 @@ function SettingsProvider({ children }) {
     <SettingsContext.Provider
       value={{
         ...settings,
+        moment,
         onToggleLanguageSetted,
         //setUrlLanguage,
         // language

diff --git a/src/context/Web3Context.js b/src/context/Web3Context.js
@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types'
 import { useState, useEffect, createContext, useContext } from 'react'
+import PropTypes from 'prop-types'
 import { ethers } from 'ethers'
 import Web3Modal from 'web3modal'
 

diff --git a/src/pages/api/match.js b/src/pages/api/match.js
@@ -30,7 +30,7 @@ export default async function handler(req, res) {
     const u1NotInU2 = getNotPresentCards(u1Cards, u2Cards)
     const u2NotInU1 = getNotPresentCards(u2Cards, u1Cards)
 
-    const match = Object.keys(u1NotInU2).length > 0 || Object.keys(u2NotInU1).length > 0;
+    const match = Object.keys(u1NotInU2).length > 0 || Object.keys(u2NotInU1).length > 0
 
     res.setHeader('Content-Type', 'application/json')
     res.status(200).json({

diff --git a/src/sections/Gamma/GammaMain.jsx b/src/sections/Gamma/GammaMain.jsx
@@ -25,7 +25,6 @@ import {
 
 import { useWeb3Context } from '../../hooks'
 import { useLayoutContext } from '../../hooks'
-import GammaCardOffers from './GammaCardOffers'
 
 const GammaMain = () => {
   const { t } = useTranslation()
@@ -97,24 +96,6 @@ const GammaMain = () => {
     }
   }
 
-  /*
-  useEffect(() => {
-    if (!gammaCardsContract || !gammaPacksContract || !GammaCardOffers) return
-    gammaPacksContract.on('PacksPurchase', (returnValue, theEvent) => {
-      for (let i = 0; i < theEvent.length; i++) {
-        const pack_number = ethers.BigNumber.from(theEvent[i]).toNumber()
-        console.log('PacksPurchase', returnValue, pack_number)
-      }
-    })
-
-    gammaCardsContract.on('ExchangeCardOffer', (p1, p2, p3, p4) => {
-      console.log('ExchangeCardOffer:', { p1, p2, p3, p4 })
-    })
-
-    // event ExchangeCardOffer(address from, address to, uint8 cardNumberFrom, uint8 cardNumberTo);
-  }, [gammaPacksContract]) //eslint-disable-line react-hooks/exhaustive-deps
-  */
-
   useEffect(() => {
     setCardsQtty(getCardsQtty(paginationObj))
   }, [paginationObj]) //eslint-disable-line react-hooks/exhaustive-deps
@@ -187,41 +168,45 @@ const GammaMain = () => {
     }
   }, [walletAddress, gammaPacksContract, numberOfPacks, inventory, cardInfoOpened]) //eslint-disable-line react-hooks/exhaustive-deps
 
-  const handleFinishAlbum = useCallback(async () => {
-    try {
-      if (cardsQtty < 120) {
-        emitInfo(t('finish_album_no_qtty'), 100000)
-        return
-      }
+  const handleFinishAlbum = useCallback(
+    async () => {
+      try {
+        if (cardsQtty < 120) {
+          emitInfo(t('finish_album_no_qtty'), 100000)
+          return
+        }
 
-      if (albums120Qtty < 1) {
-        emitInfo(t('finish_album_no_album'), 100000)
-        return
-      }
+        if (albums120Qtty < 1) {
+          emitInfo(t('finish_album_no_album'), 100000)
+          return
+        }
 
-      startLoading()
-      const result = await finishAlbum(gammaCardsContract, daiContract, walletAddress)
-      if (result) {
-        await updateUserData()
-        emitSuccess(t('finish_album_success'))
-      } else {
-        emitWarning(t('finish_album_warning'), 8000, '', false)
+        startLoading()
+        const result = await finishAlbum(gammaCardsContract, daiContract, walletAddress)
+        if (result) {
+          await updateUserData()
+          emitSuccess(t('finish_album_success'))
+        } else {
+          emitWarning(t('finish_album_warning'), 8000, '', false)
+        }
+        stopLoading()
+      } catch (ex) {
+        stopLoading()
+        console.error({ ex })
+        emitError(t('finish_album_error'))
       }
-      stopLoading()
-    } catch (ex) {
-      stopLoading()
-      console.error({ ex })
-      emitError(t('finish_album_error'))
-    }
-  }, [
+    },
+    // prettier-ignore
+    [ //eslint-disable-line react-hooks/exhaustive-deps
     walletAddress,
     gammaPacksContract,
     paginationObj,
     inventory,
     cardInfoOpened,
     cardsQtty,
     albums120Qtty
-  ]) //eslint-disable-line react-hooks/exhaustive-deps
+  ]
+  )
 
   const handleTransferPack = useCallback(async () => {
     try {

diff --git a/src/styles/_navbar-notification.scss b/src/styles/_navbar-notification.scss
@@ -9,15 +9,16 @@
   display: none;
   font-family: 'Press Start 2P', 'Share Tech Mono', 'Share Tech', sans-serif;
   font-size: 0.9em !important;
-  max-width: 400px;
+  max-width: 450px;
 
   @include mobile {
     right: 5px;
     left: 5px;
   }
 }
 
-.notification__info.active {
+.notification__info.active,
+.notification__info:hover {
   display: block;
 }
 
@@ -151,37 +152,3 @@
   font-size: 8px;
   color: #888;
 }
-
-.notification__badge__1 {
-  position: absolute;
-  top: 10px;
-  right: 90px;
-  background-color: #3896ee;
-  color: white;
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 9px;
-  font-weight: bold;
-  z-index: 1;
-  @media (max-width: 768px) {
-    right: 45px;
-    width: 23px;
-    height: 23px;
-    font-size: 8px;
-  }
-}
-
-.notification__badge__2 {
-  @extend .notification__badge__1;
-  right: 85px;
-  width: 30px;
-  height: 30px;
-  @media (max-width: 768px) {
-    width: 25px;
-    height: 25px;
-  }
-}