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

Feature/transfer card 4
P4-Games · Nov 14, 2023 · 8794c0d · 8794c0d
2 parents 0c248fd + 1fc5025
commit 8794c0d
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 121 deletions.
diff --git a/public/locales/br/common.json b/public/locales/br/common.json
@@ -81,6 +81,8 @@
 
   "mint_error": "Ocorreu um erro ao tentar cunhar uma estatueta",
 
+  "transfer_card_error": "Ocorreu um erro ao tentar transferir o cartão",
+
   "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.",

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -81,6 +81,8 @@
 
     "mint_error": "There was an error trying to mint a figurine",
 
+    "transfer_card_error": "There was an error trying to transfer the card",
+
     "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.",

diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -81,6 +81,8 @@
 
     "mint_error": "Hubo un error al intentar mintear una figurita",
 
+    "transfer_card_error": "Hubo un error al intentar transferir la carta",
+
     "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.",

diff --git a/src/sections/Alpha/AlphaCards.jsx b/src/sections/Alpha/AlphaCards.jsx
@@ -22,7 +22,7 @@ import {useTranslation} from 'next-i18next'
 import { useWeb3Context } from '../../hooks'
 import { useLayoutContext } from '../../hooks'
 
-
+import { checkInputAddress } from '../../utils/addresses'
 
 const vidas = [
   vida0.src,
@@ -249,27 +249,7 @@ const AlphaCards = ({ alphaMidButton }) => {
     const albumData = await alphaContract.cards(tokenId)
     return albumData
   }
-
-
-  const checkInputAddress = () => {
-    const hexa = '0123456789abcdefABCDEF'
-    if (
-      receiverAccount.length !== 42 ||
-      receiverAccount[0] !== '0' ||
-      receiverAccount[1] !== 'x'
-    ) {
-      setTransferError(t('direccion_destino_error'))
-      return false
-    }
-    for (let i = 2; i < receiverAccount.length; i++) {
-      if (!hexa.includes(receiverAccount[i])) {
-        setTransferError(t('direccion_destino_error'))
-        return false
-      }
-    }
-    return true
-  }
-
+
   const showCards = (address, seasonName) => {
     try {
       checkPacks()
@@ -488,6 +468,8 @@ const AlphaCards = ({ alphaMidButton }) => {
         setReceiverAccount('')
         stopLoading()
         emitSuccess(t('carta_enviada'))
+      } else {
+        setTransferError(t('direccion_destino_error'))
       }
     } catch (e) {
       console.error({ e })

diff --git a/src/sections/Gamma/GammaAlbum.jsx b/src/sections/Gamma/GammaAlbum.jsx
@@ -7,16 +7,14 @@ import { useLayoutContext } from '../../hooks'
 const GammaInventory = React.forwardRef((_, book) => {
   const { size } = useLayoutContext()
 
-  const PageContext = (index, item, ) => {
-    return (
+  const PageContext = (index, item, ) => (
       <div style={{ background: 'none' }} key={index} className='grid-item'>
         {pagination.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>}
       </div>
     )
-  }
 
   return (
     <HTMLFlipBook

diff --git a/src/sections/Gamma/InfoCard.jsx b/src/sections/Gamma/InfoCard.jsx
@@ -11,6 +11,7 @@ import { useWeb3Context } from '../../hooks'
 import { storageUrlGamma, openSeaUrlGamma } from '../../config'
 import { hasCard } from '../../services/contracts/gamma'
 import { useLayoutContext } from '../../hooks'
+import { checkInputAddress } from '../../utils/addresses'
 
 const InfoCard = React.forwardRef((props, book) => {
   const { imageNumber } = props
@@ -135,93 +136,53 @@ const InfoCard = React.forwardRef((props, book) => {
   }
 
   const handleTransferClick = async () => {
-    Swal.fire({
-      text: `${t('wallet_destinatario')}`,
-      html: `<h5>${t('wallet_destinatario')}</h5><input type="text" id="quiero" class="swal2-input" placeholder=${t('wallet').toLowerCase()} pattern="[0-9,]+" >`,
-      showDenyButton: false,
-      showCancelButton: true,
-      confirmButtonText: `${t('trasnferir')}`,
-      confirmButtonColor: '#005EA3',
-      color: 'black',
-      background: 'white',
-      customClass: {
-        image: 'cardalertimg',
-        input: 'alertinput'
-        // container: 'cardcontainer',
-        // confirmButton: 'alertbuttonvender',
-        // cancelButton: 'alertcancelbutton',
-      }
-    }).then((result) => {
-      /* Read more about isConfirmed, isDenied below */
+    try {
+      const result = await Swal.fire({
+        text: `${t('wallet_destinatario')}`,
+        input: 'text',
+        inputAttributes: {
+          min: 43,
+          max: 43
+        },
+        inputValidator: (value) => {
+          if (!checkInputAddress(value))
+            return `${t('direccion_destino_error')}`
+        },
+        showDenyButton: false,
+        showCancelButton: true,
+        confirmButtonText: `${t('trasnferir')}`,
+        confirmButtonColor: '#005EA3',
+        color: 'black',
+        background: 'white',
+        customClass: {
+          image: 'cardalertimg',
+          input: 'alertinput'
+        }
+      })
+
       if (result.isConfirmed) {
-        // const input = Swal.getPopup().querySelector('#quiero')
-        // setWantedCards(input.value)
+        startLoading()
+        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
         })
-        //     Swal.fire({
-        //         text: 'Publicar?',
-        //         showCancelButton: true,
-        //         confirmButtonText: 'Confirmar publicacion',
-        //         showLoaderOnConfirm: true,
-        //         preConfirm: (login) => {
-        //           return fetch(`//api.github.com/users/${login}`)
-        //             .then(response => {
-        //               if (!response.ok) {
-        //                 throw new Error(response.statusText)
-        //               }
-        //               return response.json()
-        //             })
-        //             .catch(error => {
-        //               Swal.showValidationMessage(
-        //                 `Request failed: ${error}`
-        //               )
-        //             })
-        //         },
-        //         allowOutsideClick: () => !Swal.isLoading()
-        //       }).then((result) => {
-        //         if (result.isConfirmed) {
-        //           Swal.fire({
-        //             text: `El precio elegido es ${result.value.login}`,
-        //             imageUrl:`${storageUrlGamma}/T1/${props.imageNumber}.png`,
-        //             color:`whitesmoke`,
-        //             backdrop:"#0000009e",
-        //             customClass: {
-        //                 image: 'cardalertimg',
-        //                 input: 'alertinput',
-        //                 // container: 'cardcontainer',
-        //                 popup: 'cardcontainer',
-        //                 confirmButton: 'alertbuttonvender',
-        //                 cancelButton: 'alertcancelbutton',
-        //             },
-        //           })
-        //         }
-        //       })
-        // } else if (result.isDenied) {
-        //     Swal.fire({
-        //         text: `Selecciona la carta que te gustaria intercambiar por la tuya`,
-        //         // imageUrl:`${storageUrlGamma}/T1/${props.imageNumber}.png`,
-        //         color:`black`,
-        //         backdrop:"#0000009e",
-        //         customClass: {
-        //             image: 'cardalertimg',
-        //             input: 'alertinput',
-        //             // container: 'cardcontainer',
-        //             popup: 'cardspopup',
-        //             confirmButton: 'okbutton',
-        //             cancelButton: 'alertcancelbutton',
-        //         },
-        //       })
       }
-    })
-    /*
-    const modal = document.getElementsByClassName('gamma_transfer_modal')[0]
-    modal.setAttribute('class', 'alpha_transfer_modal')
-    */
+      /*
+      const modal = document.getElementsByClassName('gamma_transfer_modal')[0]
+      modal.setAttribute('class', 'alpha_transfer_modal')
+      */
+    } catch (ex) {
+      stopLoading()
+      console.error({ ex })
+      emitError(t('transfer_card_error'))
+    }
   }
 
   const handleTransferModalClick = async () => {
@@ -241,7 +202,8 @@ const InfoCard = React.forwardRef((props, book) => {
           ${t('aqui')}
         </a>`,
         icon: 'success',
-        showConfirmButton: true
+        showConfirmButton: true,
+        timer: 3000
       })
       return transaction
     } catch (ex) {
@@ -251,51 +213,42 @@ const InfoCard = React.forwardRef((props, book) => {
     }
   }
 
-  const OfferButton = () => {
-    return (
+  const OfferButton = () => (
       <div className= {userHasCard ? 'option' : 'option_disabled' }
       onClick={() => handleOfferClick()}
     >
         {t('ofertas')}
       </div>
     )
-  }
 
-  const MintButton = () => {
-    return (
+  const MintButton = () => (
       <div
         className= {userHasCard ? 'option' : 'option_disabled' }
         onClick={() => handleMintClick()}
       >
         {t('mintear')}
       </div>
     )
-  }
 
-  const PublishButton = () => {
-    return (
+  const PublishButton = () => (
       <div
         className= {userHasCard ? 'option' : 'option_disabled' }
         onClick={() => handlePublishClick()}
       >
         {t('publicar')}
       </div>
     )
-  }
 
-  const TransferButton = () => {
-    return (
+  const TransferButton = () => (
       <div
         className= {userHasCard ? 'option' : 'option_disabled' }
         onClick={() => handleTransferClick()}
       >
         {t('transferir')}
       </div>
     )
-  }
 
-  const TrasnferModal = () => {
-    return (
+  const TrasnferModal = () => (
       <div className='gamma_transfer_modal gamma_display_none'>
         <button
           className='gamma_transfer_modal_close gamma_modal_close'
@@ -338,7 +291,6 @@ const InfoCard = React.forwardRef((props, book) => {
         {/*<span className='gamma_transfer_error'>{transferError}</span>*/}
       </div>
     )
-  }
 
   return (
     <HTMLFlipBook

diff --git a/src/sections/Gamma/index.jsx b/src/sections/Gamma/index.jsx
@@ -21,7 +21,6 @@ import { useWeb3Context } from '../../hooks'
 import { useLayoutContext } from '../../hooks'
 import pagination from '../../utils/placeholders'
 
-
 const index = React.forwardRef(() => {
   const {t} = useTranslation()
   const [openPackCardsNumbers, setOpenPackCardsNumbers] = useState([])
@@ -181,7 +180,7 @@ const index = React.forwardRef(() => {
       input: 'number',
       inputAttributes: {
         min: 1,
-        max: 10,
+        max: 10
       },
       inputValidator: (value) => {
         if (value < 1 || value > 10) {

diff --git a/src/utils/addresses.js b/src/utils/addresses.js
@@ -0,0 +1,17 @@
+export const checkInputAddress = (address) => {
+  const hexa = '0123456789abcdefABCDEF'
+  if (
+    address.length !== 42 ||
+    address[0] !== '0' ||
+    address[1] !== 'x'
+  ) {
+    return false
+  }
+  for (let i = 2; i < address.length; i++) {
+    if (!hexa.includes(address[i])) {
+      return false
+    }
+  }
+  return true
+}
+