Detalle de PlatziPunk

Clase 14 de 23 • Curso de Desarrollo Frontend de Aplicaciones Descentralizadas con Web3.Js

Contenido del curso

Introducción al desarrollo con Web3.js

1
Desarrollo Frontend de Apps Descentralizadas con Web3 y React JS
03:20 min
2
Desarrollo Frontend para Aplicaciones Descentralizadas con Web3JS y MetaMask
04:30 min

Qué es Web3.js

Desarrollo frontend con Web3.js

Despliegue de la aplicación

Sigue desarrollando

23
Recapitulación de lo aprendido con el proyecto PlatziPunks
03:42 min

Tomar examen

Comentarios

Wilfred Vásquez

student•

Para obtener los atributos del avatar hay un error. Inicialmente se está obteniendo cada valor pasando el tokenId como parámetro, cuando debería ser el dna. Para ello primero se debe resolver la promesa

const [
    tokenURI,
    dna,
    owner,
  ] = await Promise.all([
    platziPunks.methods.tokenURI(tokenId).call(),
    platziPunks.methods.tokenDNA(tokenId).call(),
    platziPunks.methods.ownerOf(tokenId).call(),
  ]);

y luego con el dna se obtiene los valores de loa atributos:

const [
    accessoriesType,
    clotheColor,
    clotheType,
    eyeType,
    eyeBrowType,
    facialHairColor,
    facialHairType,
    hairColor,
    hatColor,
    graphicType,
    mouthType,
    skinColor,
    topType,
  ] = await Promise.all([
    platziPunks.methods.getAccessoriesType(dna).call(),
    platziPunks.methods.getClotheColor(dna).call(),
    platziPunks.methods.getClotheType(dna).call(),
    platziPunks.methods.getEyeType(dna).call(),
    platziPunks.methods.getEyeBrowType(dna).call(),
    platziPunks.methods.getFacialHairColor(dna).call(),
    platziPunks.methods.getFacialHairType(dna).call(),
    platziPunks.methods.getHairColor(dna).call(),
    platziPunks.methods.getHatColor(dna).call(),
    platziPunks.methods.getGraphicType(dna).call(),
    platziPunks.methods.getMouthType(dna).call(),
    platziPunks.methods.getSkinColor(dna).call(),
    platziPunks.methods.getTopType(dna).call(),
  ])

Emilian Harastasan

student•

Bien visto, Kudos! Aun que a mi me da error al pasar el DNA a la funcion. Error: value out-of-bounds tendré que investigar un poco

Diego Camino Reinoso

student•

Noise!!!! buen catch !

Manuel Luis Vila

student•

Buenas, tengo un error de visualización: No routes matched location "/punks/1"

¿A qué se puede deber? Mi código es idéntico al del curso. Es posible que sea debido a la versión de React?

Gracias de antemano comunidad!

Jesus Marquez Martini

student•

lograste resolverlo?

Diego Barraza Villalobos

student•

Hola, la respuesta es que dada la nueva versión en el App.js debes agregar un "/" antes de los ":tokenId" Quedando así:

    <Route path="/punks/:tokenId" exact element={<Punk/>} />

Jesus M Cocaño Diaz

student•

Al momento de despegar el codigo del profe me da un index.js:71 Uncaught TypeError: Cannot convert undefined or null to object; The above error occurred in the <Punk> component; Uncaught (in promise) TypeError: Cannot convert undefined or null to object; VM4368:2 Uncaught ReferenceError: process is not defined

Ya revise todo el codigo y esta tan cual lo esta poniendo, :(

Wilfred Vásquez

student•

Para traer los atributos del avatar se pasa tokenId: platziPunks.methods.tokenDNA(tokenId).call()

No debería ser el dna?

Luis Berenguer

student•

Por lo que he visto el tokenDNA es un mapping del tipo... { 0: 10285...66821, 1: 123793...65892, ... } Por lo que cuando accedes a la posición tokenId (la llave) recibes el dna (el valor)

Diego Barraza Villalobos

student•

Hola, para que los que tengan error al momento de dar click en el Punk deben tener el código en App.js de esta manera:

<Route path="/punks/:tokenId" exact element={<Punk/>} />

Marcos Rissotto

student•

El punk llega undefined. Pegue el mismo código del repo y el otro método de todos los punks si funciona.

Por otro lado, no conviene en la gallery pasar el obj punk entero? solo pasamos el tokenId, pero creo que ya tenemos todos los datos.

Dejo mi código, quizás encuentren un error, renombre punk a allin:

// Singular const useAllinData = (tokenId = null) => { const [allin, setAllin] = useState({}); const [loading, setLoading] = useState(true); const allinNfts = useAllinNfts();

const update = useCallback(async () => { if (allinNfts && tokenId != null) { setLoading(true);

  const toSet = await getAllinData({ tokenId, allinNfts });
  console.log('toSet', toSet);
  setAllin(toSet);
  setLoading(false);
}

}, [allinNfts, tokenId]);

useEffect(() => { update(); console.log('update'); }, [update]);

return { loading, allin, update, }; };

Gracias por la ayuda. Saludos.

const [
    tokenURI,
    dna,
    owner,
  ] = await Promise.all([
    platziPunks.methods.tokenURI(tokenId).call(),
    platziPunks.methods.tokenDNA(tokenId).call(),
    platziPunks.methods.ownerOf(tokenId).call(),
  ]);

const [
    accessoriesType,
    clotheColor,
    clotheType,
    eyeType,
    eyeBrowType,
    facialHairColor,
    facialHairType,
    hairColor,
    hatColor,
    graphicType,
    mouthType,
    skinColor,
    topType,
  ] = await Promise.all([
    platziPunks.methods.getAccessoriesType(dna).call(),
    platziPunks.methods.getClotheColor(dna).call(),
    platziPunks.methods.getClotheType(dna).call(),
    platziPunks.methods.getEyeType(dna).call(),
    platziPunks.methods.getEyeBrowType(dna).call(),
    platziPunks.methods.getFacialHairColor(dna).call(),
    platziPunks.methods.getFacialHairType(dna).call(),
    platziPunks.methods.getHairColor(dna).call(),
    platziPunks.methods.getHatColor(dna).call(),
    platziPunks.methods.getGraphicType(dna).call(),
    platziPunks.methods.getMouthType(dna).call(),
    platziPunks.methods.getSkinColor(dna).call(),
    platziPunks.methods.getTopType(dna).call(),
  ])

Detalle de PlatziPunk

Introducción al desarrollo con Web3.js

Desarrollo Frontend de Apps Descentralizadas con Web3 y React JS

Desarrollo Frontend para Aplicaciones Descentralizadas con Web3JS y MetaMask

Qué es Web3.js

Comunicación Frontend-Backend en Aplicaciones Blockchain

Uso de Web3 para Interactuar con la Blockchain Ethereum

Construcción de Aplicaciones Web3 con React y MetaMask

Actualización sobre testnet en Ethereum

Desarrollo frontend con Web3.js

Administrando la conexión a Metamask

Configurando Web3-React

¿Qué es un ABI?

Instanciando el contrato de PlatziPunks

Previsualizando tu PlatziPunk

Habilitando el mint de PlatziPunks

Creando la galería de PlatziPunks