Merge pull request #253 from P4-Games/develop

Deploy #20231215

next-i18next.config.js

@@ -1,5 +1,3 @@
-// const path = require('path')
-
 module.exports = {
   i18n: {
     defaultLocale: 'es',

package.json

@@ -38,18 +38,20 @@
     "@web3modal/ethereum": "^2.0.0-beta.8",
     "@web3modal/react": "^2.0.0-beta.8",
     "axios": "1.6.0",
+    "book-flip": "^1.0.0",
     "dotenv": "^16.3.1",
     "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "ethers": "^5.7.2",
     "framer-motion": "^9.0.2",
     "gsap": "^3.11.4",
     "jimp": "^0.22.8",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.43",
     "mongodb": "^5.5.0",
     "nes.css": "^2.3.0",
     "next": "13.0.1",
     "next-i18next": "^15.0.0",
-    "book-flip": "^1.0.0",
     "prettier": "^3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",

public/locales/br/common.json

@@ -149,5 +149,17 @@
   "account_send_dai_title": "Transferência de token",
   "quantity": "Cantidad",
   "quantity_invalid": "Cantidad Inválida.",
-  "account_send_dai_error": "Ocorreu um erro ao tentar transferir tokens."  
+  "account_send_dai_error": "Ocorreu um erro ao tentar transferir tokens.",
+
+  "notification_title": "Notificações",
+  "notification_no_messages": "Você não tem mensagens",
+  "notification_view_all": "Ver tudo",
+  "notification_read": "Mensagem lida",
+  "notification_deleted": "Mensagem excluída",
+  "notification_all_read": "Mensagens lidas",
+  "notification_all_deleted": "Mensagens excluídas",
+  "notification_received_card": "Você recebeu a carta {CARD} de {WALLET}.",
+  "notification_sent_card": "Você enviou a carta {CARD} para {WALLET}.",
+  "notification_pack_transfer": "Você recebeu o pacote {PACK} de {WALLET}.",
+  "notification_exchange": "Você recebeu o cartão {CARD_RECEIVED} de {WALLET} em troca do cartão {CARD_SENT}."
 }

public/locales/en/common.json

@@ -149,5 +149,18 @@
     "account_send_dai_title": "Token Transfer",
     "quantity": "Quantity",
     "quantity_invalid": "Invalid Quantity.",
-    "account_send_dai_error": "There was an error trying to transfer tokens."
+    "account_send_dai_error": "There was an error trying to transfer tokens.",
+
+    "notification_title": "Notifications",
+    "notification_no_messages": "No Messages",
+    "notification_view_all": "View All",
+    "notification_read": "Message Read",
+    "notification_deleted": "Message Deleted",
+    "notification_all_read": "Messages read",
+    "notification_all_deleted": "Deleted messages",
+    "notification_received_card": "You received the letter {CARD} from {WALLET}.",
+    "notification_sent_card": "You sent the letter {CARD} to {WALLET}.",
+    "notification_pack_transfer": "You received the pack {PACK} from {WALLET}.",
+    "notification_exchange": "You received the card {CARD_RECEIVED} from {WALLET} in exchange for the card {CARD_SENT}."
+
 }

public/locales/es/common.json

@@ -150,5 +150,17 @@
     "account_send_dai_title": "Transferencia de Tokens",
     "quantity": "Cantidad",
     "quantity_invalid": "Cantidad Inválida.",
-    "account_send_dai_error": "Ocurrió un error al intentar transferir tokens."
+    "account_send_dai_error": "Ocurrió un error al intentar transferir tokens.",
+
+    "notification_title": "Notificaciones",
+    "notification_no_messages": "No tienes mensajes",
+    "notification_view_all": "Ver todo",
+    "notification_read": "Mensaje leído",
+    "notification_deleted": "Mensaje eliminado",
+    "notification_all_read": "Mensajes leídos",
+    "notification_all_deleted": "Mensajes eliminados",
+    "notification_received_card": "Has recibido la carta {CARD} de {WALLET}.",
+    "notification_sent_card": "Enviaste la carta {CARD} a {WALLET}.",
+    "notification_pack_transfer": "Recibiste el pack {PACK} de {WALLET}.",
+    "notification_exchange": "Recibiste la carta {CARD_RECEIVED} de {WALLET} a cambio de la carta {CARD_SENT}."
 }

src/components/FlipBook/FlipBook.jsx

@@ -12,7 +12,7 @@ const FlipBook = (props) => {
     mainClassName = 'hero__top__album',
     disableFlipByClick = true
   } = props
-  const { windowSize, bookRef } = useLayoutContext()
+  const { windowSize, bookRef, turnPrevPage } = useLayoutContext()
   const [isClassesReplaced, setIsClassesReplaced] = useState(false)
 
   const CloseButton = () => (
@@ -33,57 +33,69 @@ const FlipBook = (props) => {
   }, [])
 
   return (
-    <div className='hero__top'>
-      <div className={mainClassName}>
-        <HTMLFlipBook
-          id='Book'
-          size='stretch'
-          width={360}
-          height={500}
-          minWidth={300}
-          maxWidth={800}
-          minHeight={350}
-          maxHeight={600}
-          swipeDistance={30}
-          showPageCorners={true}
-          autoSize={true}
-          startPage={startPage}
-          ref={bookRef}
-          usePortrait={windowSize.size}
-          drawShadow={false}
-          disableFlipByClick={disableFlipByClick}
-          className='hero__top__album__book'
-        >
-          {pages.map((content, index) => (
-            <div
-              key={`page-${index}`}
-              className={
-                index % 2 === 0
-                  ? isClassesReplaced
-                    ? 'hero__top__album__book__page'
+    <React.Fragment>
+      <div className='hero__top'>
+        <div className={mainClassName}>
+          {/* just a hack to allow click-left in book required by flip-book issue */}
+          <div
+            onClick={() => turnPrevPage()}
+            className='hero__top__album__book__button__top__hook'
+          />
+          <HTMLFlipBook
+            id='Book'
+            size='stretch'
+            width={360}
+            height={500}
+            minWidth={300}
+            maxWidth={800}
+            minHeight={350}
+            maxHeight={600}
+            swipeDistance={30}
+            showPageCorners={true}
+            autoSize={true}
+            startPage={startPage}
+            ref={bookRef}
+            usePortrait={windowSize.size}
+            drawShadow={false}
+            disableFlipByClick={disableFlipByClick}
+            className='hero__top__album__book'
+          >
+            {pages.map((content, index) => (
+              <div
+                key={`page-${index}`}
+                className={
+                  index % 2 === 0
+                    ? isClassesReplaced
+                      ? 'hero__top__album__book__page'
+                      : ''
+                    : isClassesReplaced
+                    ? 'hero__top__album__book__page0'
                     : ''
-                  : isClassesReplaced
-                  ? 'hero__top__album__book__page0'
-                  : ''
-              }
-              data-density='hard'
-              number={index + 1}
-            >
-              <div className='hero__top__album__book__page__page-content'>
-                {index % 2 === 0 ? (
-                  <React.Fragment>{content}</React.Fragment>
-                ) : (
-                  <React.Fragment>
-                    {showClose && <CloseButton />}
-                    {content}
-                  </React.Fragment>
-                )}
+                }
+                data-density='hard'
+                number={index + 1}
+              >
+                <div className='hero__top__album__book__page__page-content'>
+                  {index % 2 === 0 ? (
+                    <React.Fragment>{content}</React.Fragment>
+                  ) : (
+                    <React.Fragment>
+                      {showClose && <CloseButton />}
+                      {content}
+                    </React.Fragment>
+                  )}
+                </div>
               </div>
-            </div>
-          ))}
-        </HTMLFlipBook>
+            ))}
+          </HTMLFlipBook>
+          {/* just a hack to allow click-left in book required by flip-book issue */}
+          <div
+            onClick={() => turnPrevPage()}
+            className='hero__top__album__book__button__bottom__hook'
+          />
+        </div>
       </div>
-    </div>
+    </React.Fragment>
   )
 }
 

src/components/Navbar/AccountInfo.jsx

@@ -12,6 +12,7 @@ import { NETWORK, CONTRACTS } from '../../config'
 import { getBalance, getTokenName, transfer } from '../../services/dai'
 import { emitError, emitInfo, emitSuccess } from '../../utils/alert'
 import { checkInputAddress, checkFloatValue1GTValue2 } from '../../utils/InputValidators'
+import { getAccountAddressText } from '../../utils/stringUtils'
 
 const AccountInfo = ({ showAccountInfo, setShowAccountInfo }) => {
   const { t } = useTranslation()
@@ -33,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
@@ -63,16 +64,6 @@ const AccountInfo = ({ showAccountInfo, setShowAccountInfo }) => {
     fetchBalance()
   }, [showAccountInfo, walletBalance, walletAddress, validNetwork]) //eslint-disable-line react-hooks/exhaustive-deps
 
-  const getAccountAddressText = () => {
-    if (walletAddress <= 15) {
-      return walletAddress
-    } else {
-      const firstPart = walletAddress.substring(0, 7)
-      const lastPart = walletAddress.substring(walletAddress.length - 5)
-      return `${firstPart}...${lastPart}`
-    }
-  }
-
   function copyToClipboard(text) {
     navigator.clipboard.writeText(text)
   }
@@ -216,7 +207,7 @@ const AccountInfo = ({ showAccountInfo, setShowAccountInfo }) => {
           </span>
         )}
         <p className='account__info__account__link' onClick={handleCopy}>
-          {getAccountAddressText()}
+          {getAccountAddressText(walletAddress)}
         </p>
       </div>
       <div className='account__info__icon__container'>

src/components/Navbar/Navbar.jsx

@@ -7,8 +7,9 @@ import { useRouter } from 'next/router'
 import Whitepaper from './Whitepaper.jsx'
 import NofTown from './NofTown.jsx'
 import AccountInfo from './AccountInfo.jsx'
+import NotificationInfo from './NotificationInfo.jsx'
 import LanguageSelection from '../LanguageSelection'
-import { useLayoutContext } from '../../hooks'
+import { useLayoutContext, useWeb3Context, useNotificationContext } from '../../hooks'
 
 function Navbar() {
   const { t } = useTranslation()
@@ -18,7 +19,14 @@ function Navbar() {
   const router = useRouter()
   const isHomePage = router.pathname === '/'
   const [showAccountInfo, setShowAccountInfo] = useState(false)
+  const [showNotificationInfo, setShowNotificationInfo] = useState(false)
+  const [notificationsNbr, setNotificationsNbr] = useState(0)
+  const [notificationsNbrClass, setNotificationsNbrClass] = useState('notification__badge__1')
+  const { notifications, getNotificationsByUser } = useNotificationContext()
+  const { walletAddress } = useWeb3Context()
+
   const accountRef = useRef(null)
+  const notificationRef = useRef(null)
 
   const handleAudioClick = () => {
     setClick(!click)
@@ -29,6 +37,10 @@ function Navbar() {
     }
   }
 
+  const handleNotificationClick = () => {
+    setShowNotificationInfo(!showNotificationInfo)
+  }
+
   const handleAccountClick = () => {
     setShowAccountInfo(!showAccountInfo)
   }
@@ -37,8 +49,22 @@ function Navbar() {
     if (accountRef.current && !accountRef.current.contains(event.target)) {
       setShowAccountInfo(false)
     }
+    if (notificationRef.current && !notificationRef.current.contains(event.target)) {
+      setShowNotificationInfo(false)
+    }
   }
 
+  useEffect(() => {
+    const notif = getNotificationsByUser(walletAddress) || []
+    const unreadNotifications = notif.filter((notification) => !notification.read)
+    setNotificationsNbr(unreadNotifications.length)
+    setNotificationsNbrClass(
+      unreadNotifications.length > 9 ? 'notification__badge__2' : 'notification__badge__1'
+    )
+    // setNotificationsNbr(20)
+    // setNotificationsNbrClass(20 > 9 ? 'notification__badge__2' : 'notification__badge__1')
+  }, [notifications, walletAddress]) //eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside)
     return () => {
@@ -76,8 +102,17 @@ function Navbar() {
     </div>
   )
 
+  const ButtonNotification = () => (
+    <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>
   )
@@ -98,6 +133,13 @@ function Navbar() {
         <div className='navbar__right'>
           <ButtonAudio />
           <LanguageSelection />
+          <div ref={notificationRef} className='navbar__right__account'>
+            <ButtonNotification onClick={handleNotificationClick} />
+            <NotificationInfo
+              showNotificationInfo={showNotificationInfo}
+              setShowNotificationInfo={setShowNotificationInfo}
+            />
+          </div>
           <div ref={accountRef} className='navbar__right__account'>
             <ButtonAccount onClick={handleAccountClick} />
             <AccountInfo