Merge pull request #109 from P4-Games/feature/transfer-card-4

completed gamma card transfer

src/components/Navbar/Navbar.jsx

@@ -81,14 +81,15 @@ function Navbar ({
                     if (cardInfo) {
                       setCardInfo(false)
                       setInventory(true)
-                    } else setInventory(true)
+                    } else { 
+                      setInventory(true)
+                    }
                   } else {
                     goToCollections(5)
                   }
                 }}
                 className='navbar__ul__li__contacto'
               >
-
                 {t ? t('collections') : midButton}
               </button>
             </LinkScroll>

src/sections/Alpha/AlphaCards.jsx

@@ -19,7 +19,7 @@ import vida4 from './images/vida4.png'
 import vida5 from './images/vida5.png'
 
 import {useTranslation} from 'next-i18next'
-import { useWeb3Context } from '../../hooks'
+import { useWeb3Context, walletAddress } from '../../hooks'
 import { useLayoutContext } from '../../hooks'
 
 import { checkInputAddress } from '../../utils/addresses'
@@ -453,7 +453,7 @@ const AlphaCards = ({ alphaMidButton }) => {
 
   async function transferToken () {
     try {
-      if (checkInputAddress(receiverAccount)) {
+      if (checkInputAddress(receiverAccount, walletAddress)) {
         setTransferError('')
         const transaction = await alphaContract[
           'safeTransferFrom(address,address,uint256)'

src/sections/Gamma/GammaAlbum.jsx → src/sections/Gamma/GammaAlbumEmpty.jsx

@@ -1,18 +1,18 @@
 import React from 'react'
 import HTMLFlipBook from 'react-pageflip'
-import pagination from '../../utils/placeholders'
+import gammaCardsPages from './gammaCardsPages'
 import { storageUrlGamma } from '../../config'
 import { useLayoutContext } from '../../hooks'
 
-const GammaInventory = React.forwardRef((_, book) => {
+const GammaAlbumEmpty = React.forwardRef((_, book) => {
   const { size } = useLayoutContext()
 
   const PageContext = (index, item, ) => (
       <div style={{ background: 'none' }} key={index} className='grid-item'>
-        {pagination.user[item]?.stamped
+        {gammaCardsPages.user[item]?.stamped
           ? <img src={`${storageUrlGamma}/T1/${item}.png`} alt='img' />
           : <img src='/gamma/Nofy.png' alt='img' />}
-        {!pagination.user[item]?.stamped && <div className='numbershirt'>{pagination.user[item]?.name}</div>}
+        {!gammaCardsPages.user[item]?.stamped && <div className='numbershirt'>{gammaCardsPages.user[item]?.name}</div>}
       </div>
     )
 
@@ -39,7 +39,7 @@ const GammaInventory = React.forwardRef((_, book) => {
       >
         <div className='hero__top__album__book__page__page-content'>
           <div className='grid-wrapper'>
-            {pagination.page1.map((item, index) => (
+            {gammaCardsPages.page1.map((item, index) => (
                 <PageContext key={index} item={item} index={index} />
               ))}
           </div>
@@ -51,7 +51,7 @@ const GammaInventory = React.forwardRef((_, book) => {
         number='2'
       >
         <div className='grid-wrapperright'>
-          {pagination.page2.map((item, index) => (
+          {gammaCardsPages.page2.map((item, index) => (
             <PageContext key={index} item={item} index={index} />
           ))}
         </div>
@@ -60,4 +60,4 @@ const GammaInventory = React.forwardRef((_, book) => {
   )
 })
 
-export default GammaInventory
+export default GammaAlbumEmpty

src/sections/Gamma/InventoryAlbum.jsx → src/sections/Gamma/GammaAlbumInventory.jsx

@@ -2,12 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import HTMLFlipBook from 'react-pageflip'
 import { FcCheckmark } from 'react-icons/fc'
-import pagination from '../../utils/placeholders'
+import gammaCardsPages from './gammaCardsPages'
 import { storageUrlGamma } from '../../config'
 import { useLayoutContext } from '../../hooks'
 
-const InventoryAlbum = React.forwardRef((props, book) => {
-  const { setImageNumber, setCardInfo, paginationObj } = props
+const GammaAlbumInventory = React.forwardRef((props, book) => {
+  const { paginationObj, setImageNumber, setCardInfo } = props
   const { size } = useLayoutContext()
 
   const getStyle = (item, pageNumber) => {
@@ -16,16 +16,14 @@ const InventoryAlbum = React.forwardRef((props, book) => {
         ? { filter: 'grayscale(1)' } 
         : {} 
     } else {
-      return pagination.user[item]?.quantity == 0 ? { filter: 'grayscale(1)' } : {}
+      return gammaCardsPages.user[item]?.quantity == 0 ? { filter: 'grayscale(1)' } : {}
     }
   }
 
   const PageContent = ({ page, pageNumber}) => {
-    let divMainClassName = 'hero__top__album__book__page'
     let divWrapperClassName = 'grid-wrapper'
 
     if (pageNumber % 2 === 0) { // par
-      divMainClassName = 'hero__top__album__book__page0'
       divWrapperClassName = 'grid-wrapperright'
     }
 
@@ -114,10 +112,10 @@ const InventoryAlbum = React.forwardRef((props, book) => {
       ) : null
 })
 
-InventoryAlbum.propTypes = {
+GammaAlbumInventory.propTypes = {
+  paginationObj: PropTypes.object,
   setImageNumber: PropTypes.func,
   setCardInfo: PropTypes.func
-
 }
 
-export default InventoryAlbum
+export default GammaAlbumInventory

src/sections/Gamma/InfoCard.jsx → src/sections/Gamma/GammaInfoCard.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
 import HTMLFlipBook from 'react-pageflip'
 import 'swiper/css'
 import 'swiper/css/effect-fade'
@@ -13,11 +14,11 @@ import { hasCard } from '../../services/contracts/gamma'
 import { useLayoutContext } from '../../hooks'
 import { checkInputAddress } from '../../utils/addresses'
 
-const InfoCard = React.forwardRef((props, book) => {
-  const { imageNumber } = props
+const GammaInfoCard = React.forwardRef((props, book) => {
+  const { imageNumber, handleFinishInfoCard } = props
   const {t} = useTranslation()
   const { size, startLoading, stopLoading } = useLayoutContext()
-  const { gammaCardsContract } = useWeb3Context()
+  const { gammaCardsContract,walletAddress } = useWeb3Context()
   const [ userHasCard, setUserHasCard ] = useState(false)
 
   function emitError (message) {
@@ -145,7 +146,7 @@ const InfoCard = React.forwardRef((props, book) => {
           max: 43
         },
         inputValidator: (value) => {
-          if (!checkInputAddress(value))
+          if (!checkInputAddress(value, walletAddress))
             return `${t('direccion_destino_error')}`
         },
         showDenyButton: false,
@@ -165,14 +166,15 @@ const InfoCard = React.forwardRef((props, book) => {
         console.log(result.value, imageNumber)
         const transaction = await gammaCardsContract.transferCard(result.value, imageNumber)
         transaction.wait()
-        stopLoading()
         Swal.fire({
           title: '',
           text: t('confirmado'),
           icon: 'success',
           showConfirmButton: false,
           timer: 1500
         })
+        stopLoading()
+        handleFinishInfoCard()
       }
       /*
       const modal = document.getElementsByClassName('gamma_transfer_modal')[0]
@@ -344,25 +346,15 @@ const InfoCard = React.forwardRef((props, book) => {
             <TrasnferModal/>
           </div>
         </div>
-        {/* {pagination.page2.map((item, index) => {
-                        return (
-                            <div style={pagination.fakeUser[item].quantity == 0 ? { filter: 'grayscale(1)' } : {}} key={index} className="grid-item">
-                                <img src={`${storageUrlGamma}/T1/${item}.png`} alt="img" />
-                                {pagination.fakeUser[item].stamped && <FcCheckmark />}
-                                <div className='number'>{pagination.fakeUser[item].name}</div>
-                                {pagination.fakeUser[item].quantity != 0 && pagination.fakeUser[item].quantity != 1
-                                    &&
-                                    <div className='quantity'>X:{pagination.fakeUser[item].quantity}</div>
-                                }
-                            </div>
-                        )
-                    })} */}
       </div>
     </HTMLFlipBook>
   )
 })
 
+GammaInfoCard.propTypes = {
+  imageNumber: PropTypes.number,
+  handleFinishInfoCard: PropTypes.func
+}
 
-
-export default InfoCard
+export default GammaInfoCard
 

src/utils/placeholders.js → src/sections/Gamma/gammaCardsPages.js

@@ -1,4 +1,4 @@
-const pagination = {
+const gammaCardPages = {
   page1: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
   page2: [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
   page3: [24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35],
@@ -13,11 +13,11 @@ const pagination = {
 }
 
 for (let i = 1; i < 121; i++) {
-  pagination.user[i] = {
+  gammaCardPages.user[i] = {
     name: i.toString(),
     stamped: false,
     quantity: 0
   }
 }
 
-export default pagination
+export default gammaCardPages

src/sections/Gamma/index.jsx

@@ -1,25 +1,25 @@
 import React, { useState, useEffect } from 'react'
 import Head from 'next/head'
 import { ethers } from 'ethers'
-import InfoCard from './InfoCard'
+import GammaInfoCard from './GammaInfoCard'
 import Swal from 'sweetalert2'
+import {useTranslation} from 'next-i18next'
 
 import Navbar from '../../components/Navbar'
 import Footer from '../../components/Footer'
-import InventoryAlbum from './InventoryAlbum'
-import GammaAlbum from './GammaAlbum'
+import GammaAlbumInventory from './GammaAlbumInventory'
+import GammaAlbumEmpty from './GammaAlbumEmpty'
 import GammaPack from './GammaPack'
+import { checkApproved } from '../../services/contracts/dai'
 import { fetchPackData } from '../../services/backend/gamma'
 import { 
   getCardsByUser, checkPacksByUser, 
   verifyPackSigner, openPack, getPackPrice } from '../../services/contracts/gamma'
 import { CONTRACTS } from '../../config'
 import { showRules, closeRules } from '../../utils/rules'
-import { checkApproved } from '../../services/contracts/dai'
-import {useTranslation} from 'next-i18next'
 import { useWeb3Context } from '../../hooks'
 import { useLayoutContext } from '../../hooks'
-import pagination from '../../utils/placeholders'
+import gammaCardsPages from './gammaCardsPages'
 
 const index = React.forwardRef(() => {
   const {t} = useTranslation()
@@ -37,6 +37,7 @@ const index = React.forwardRef(() => {
 
   const { mobile, startLoading, stopLoading } = useLayoutContext()
   const [paginationObj, setPaginationObj] = useState({})
+  const [paginationObjKey, setPaginationObjKey] = useState(0);
 
   const checkNumberOfPacks = async () => {
     try {
@@ -59,9 +60,10 @@ const index = React.forwardRef(() => {
 
   const fetchInventory = async () => {
     try {
-      // console.log('fetchInventory', walletAddress, gammaCardsContract)
-      const userCards = await getCardsByUser(gammaCardsContract, walletAddress, pagination)
+      const userCards = await getCardsByUser(gammaCardsContract, walletAddress, gammaCardsPages)
       setPaginationObj(userCards)
+      // actualiza la clave para forzar el renderizado de gammaAlbumInventory
+      setPaginationObjKey(paginationObjKey => paginationObjKey + 1);
     } catch (error) {
       console.error(error)
     }
@@ -74,7 +76,7 @@ const index = React.forwardRef(() => {
 
   useEffect(() => {
     fetchInventory()
-  }, [walletAddress, gammaCardsContract, pagination]) 
+  }, [walletAddress, gammaCardsContract, gammaCardsPages]) 
 
   useEffect(() => {
     checkNumberOfPacks()
@@ -205,6 +207,12 @@ const index = React.forwardRef(() => {
     }
   }
 
+
+  const handleFinishInfoCard = async () => {
+    setCardInfo(false)
+    await fetchInventory()
+  }
+
   return (
     <>
       {!walletAddress && <div className='alpha'>
@@ -295,16 +303,19 @@ const index = React.forwardRef(() => {
               : { backgroundImage: 'url(\'/gamma/GammaFondo.png\')' }}
             className='hero__top__album'
           >
-            {inventory && !cardInfo && gammaCardsContract && 
-            <InventoryAlbum
+            {gammaCardsContract && inventory && !cardInfo &&
+            <GammaAlbumInventory
+              key={paginationObjKey}
               paginationObj={paginationObj}
               setImageNumber={setImageNumber}
-              setCardInfo={setCardInfo}
-              cardInfo={cardInfo}/>
+              setCardInfo={setCardInfo}/>
             }
-            {!inventory && <GammaAlbum />}
-            {inventory && cardInfo && gammaCardsContract && 
-              <InfoCard imageNumber={imageNumber} />
+            {!inventory && <GammaAlbumEmpty />}
+            {gammaCardsContract && inventory && cardInfo &&
+              <GammaInfoCard 
+                imageNumber={imageNumber} 
+                handleFinishInfoCard={handleFinishInfoCard}
+              />
             }
           </div>
 

src/utils/addresses.js

@@ -1,9 +1,10 @@
-export const checkInputAddress = (address) => {
+export const checkInputAddress = (address, myOwnWallet) => {
   const hexa = '0123456789abcdefABCDEF'
   if (
     address.length !== 42 ||
     address[0] !== '0' ||
-    address[1] !== 'x'
+    address[1] !== 'x' ||
+    address.toLowerCase() === myOwnWallet.toLowerCase()
   ) {
     return false
   }