Merge pull request #124 from P4-Games/feature/finish-album

Feature/finish album

public/locales/br/common.json

@@ -85,7 +85,9 @@
 
   "transfer_card_error": "Ocorreu um erro ao tentar transferir o cartão",
   "transfer_pack_error": "Ocorreu um erro ao tentar transferir o pacote",
-
+  "finish_album_error": "Ocorreu um erro ao tentar reivindicar o prêmio",
+  "finish_album_success": "Parabéns! Você completou o álbum. Você receberá seu prêmio em DAIs na sua carteira.",
+
   "rules_alpha_left_text_1": "Um minijogo temático com 60 cartas que completam 10 coleções temáticas diferentes, cada uma com 5 personagens e um álbum.",
   "rules_alpha_left_text_2": "O objetivo é completar um álbum com os 5 personagens correspondentes à coleção.",
   "rules_alpha_left_text_3": "Para jogar, é necessário conectar uma carteira à rede Polygon.",

public/locales/en/common.json

@@ -85,7 +85,9 @@
 
     "transfer_card_error": "There was an error trying to transfer the card",
     "transfer_pack_error": "There was an error trying to transfer one pack",
-
+    "finish_album_error": "An error occurred while trying to claim the prize",
+    "finish_album_success": "Congratulations! You completed the album. You will receive your prize in DAIs to your wallet.",
+
     "rules_alpha_left_text_1": "A thematic minigame with 60 cards that complete 10 different thematic collections, each with 5 characters and an album.",
     "rules_alpha_left_text_2": "The goal is to complete an album with the 5 characters corresponding to the collection.",
     "rules_alpha_left_text_3": "To play, it's necessary to connect a wallet to the Polygon network.",

public/locales/es/common.json

@@ -85,7 +85,9 @@
 
     "transfer_card_error": "Hubo un error al intentar transferir la carta",
     "transfer_pack_error": "Hubo un error al intentar transferir un pack",
-
+    "finish_album_error": "Ocurrió un error al intentar reclamar el premio",
+    "finish_album_success": "Felicitaciones! Completaste el álbum. Recibirás en tu wallet tu premio en DAIs.",
+
     "rules_alpha_left_text_1": "Un minijuego temático con 60 cartas que completan 10 colecciones temáticas diferentes con 5 personajes y un álbum cada uno.",
     "rules_alpha_left_text_2": "El objetivo es completar un álbum con los 5 personajes correspondientes a la colección.",
     "rules_alpha_left_text_3": "Para jugar es necesario conectar una billetera a la red de Polygon.",

src/sections/Gamma/GammaAlbumInventory.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import HTMLFlipBook from 'react-pageflip'
 import { FcCheckmark } from 'react-icons/fc'
-import gammaCardsPages from './gammaCardsPages'
 import { storageUrlGamma } from '../../config'
 import { useLayoutContext } from '../../hooks'
 import CustomImage from '../../components/customImage'
@@ -12,13 +11,18 @@ const GammaAlbumInventory = React.forwardRef((props, book) => {
   const { size } = useLayoutContext()
 
   const getStyle = (item, pageNumber) => {
+    return (paginationObj.user[item]?.quantity === 0 || !paginationObj.user[item]?.quantity) 
+    ? { filter: 'grayscale(1)' } 
+    : {} 
+
+    /*
     if (pageNumber === 1) {
       return (paginationObj.user[item]?.quantity == 0 || !paginationObj.user[item]?.quantity) 
         ? { filter: 'grayscale(1)' } 
         : {} 
     } else {
       return gammaCardsPages.user[item]?.quantity == 0 ? { filter: 'grayscale(1)' } : {}
-    }
+    }*/
   }
 
   const PageContent = ({ page, pageNumber}) => {
@@ -30,7 +34,7 @@ const GammaAlbumInventory = React.forwardRef((props, book) => {
 
     return (
       <div className={divWrapperClassName}>
-        {page.map((item, index) => (
+        {page && page.map((item, index) => (
           <div 
             onClick={() => { setCardInfo(true), setImageNumber(item) }}
             style={getStyle(item, pageNumber)} 

src/sections/Gamma/index.jsx

@@ -12,7 +12,7 @@ import GammaPack from './GammaPack'
 import { checkApproved } from '../../services/dai'
 import { fetchPackData } from '../../services/gamma'
 import { 
-  getCardsByUser, checkPacksByUser, 
+  getCardsByUser, checkPacksByUser, finishAlbum,
   verifyPackSigner, openPack, getPackPrice } from '../../services/gamma'
 import { CONTRACTS } from '../../config'
 import { showRules, closeRules } from '../../utils/rules'
@@ -38,14 +38,13 @@ const index = React.forwardRef(() => {
   const { mobile, startLoading, stopLoading } = useLayoutContext()
   const [paginationObj, setPaginationObj] = useState({})
   const [paginationObjKey, setPaginationObjKey] = useState(0);
-  const [ cardsQtty, setCardsQtty ] = useState(0)
+  const [cardsQtty, setCardsQtty] = useState(0)
 
-  const getCardsQtyy = (paginationObj) => {
+  const getCardsQtty = (paginationObj) => {
     let total = 0
 
     if(!paginationObj) return
     for (let key in paginationObj.user) {
-      console.log(key)
       if (paginationObj.user[key].quantity > 0) {
         total += 1;
       }
@@ -86,12 +85,14 @@ const index = React.forwardRef(() => {
 
   useEffect(() => {
     if (!paginationObj) return
-    setCardsQtty(getCardsQtyy(paginationObj))
+    setCardsQtty(getCardsQtty(paginationObj))
   }, [paginationObj]) 
 
+  /*
   useEffect(() => {
     console.log('gamma acc', walletAddress, wallets)
   }, [walletAddress, wallets]) 
+  */
 
   useEffect(() => {
     fetchInventory()
@@ -111,8 +112,26 @@ const index = React.forwardRef(() => {
     })
   }
 
-  const handleCompleteAlbum = async () => {  
-      console.log('handleCompleteAlbum')
+  const handleFinishAlbum = async () => {  
+    try {
+      startLoading()
+      const transaction = await gammaPacksContract.finishAlbum()
+      transaction.wait()
+      await fetchInventory()
+      setCardsQtty(getCardsQtty(paginationObj))
+      Swal.fire({
+        title: '',
+        text: t('finish_album_success'),
+        icon: 'success',
+        showConfirmButton: false,
+        timer: 5000
+      })
+      stopLoading()
+    } catch (ex) {
+      stopLoading()
+      console.error({ ex })
+      emitError(t('finish_album_error'))
+    }
   }
 
   const handleTransferPack = async () => {  
@@ -200,7 +219,7 @@ const index = React.forwardRef(() => {
           setLoaderPack(false)
           await checkNumberOfPacks()
           await fetchInventory()
-          setCardsQtty(getCardsQtyy(paginationObj))
+          setCardsQtty(getCardsQtty(paginationObj))
           return openedPack
         }
       }
@@ -375,7 +394,7 @@ const index = React.forwardRef(() => {
             }
             {gammaCardsContract && inventory && !cardInfo &&
             <GammaAlbumInventory
-              key={paginationObjKey}
+              dummyKey={paginationObjKey}
               paginationObj={paginationObj}
               setImageNumber={setImageNumber}
               setCardInfo={setCardInfo}/>
@@ -424,7 +443,7 @@ const index = React.forwardRef(() => {
                 <h3>{`${cardsQtty}/120`}</h3>
               </div>
               {cardsQtty===120 && <div
-                onClick={() => { handleCompleteAlbum() }}
+                onClick={() => { handleFinishAlbum() }}
                 className={cardsQtty===120 ? 'completeAlbum' : 'completeAlbum_disabled'}>
                 <h3>{t('reclamar_premio')}</h3>
               </div>}

src/services/gamma.js

@@ -67,6 +67,7 @@ export const getCardsByUser = async (cardsContract, walletAddress, pagination) =
     // console.log('cardsObj', cardsObj)
     if (cardsArr && cardsArr.length > 0) {
       for (let i = 0; i < cardsArr[0]?.length; i++) {
+        //console.log(cardsArr[1][i])
         cardsObj.user[cardsArr[0][i]].stamped = true
         cardsObj.user[cardsArr[0][i]].quantity = cardsArr[1][i]
       }
@@ -98,3 +99,13 @@ export const getPackPrice = async (cardsContract) => {
     throw e
   }
 }
+
+export const finishAlbum = async (cardsContract) => {
+  try {
+    await cardsContract.finishAlbum()
+    await openPackTx.wait()
+  } catch (e) {
+    console.error({ e })
+    throw e
+  }
+}