Previsualizando tu PlatziPunk

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

Duvan Andrés Villadiego Hoyos

student•

Aqui mi solucion para el reto

const [availablePunks, setAvailablePunks] = useState(""); 
...
 const getPlatziPunksData = useCallback(async () => {
    if (platziPunks) {
      const totalSupply = await platziPunks.methods.totalSupply().call();
      ...
      const maxSupply = await platziPunks.methods.maxSupply().call();
      ...
      setAvailablePunks(maxSupply - totalSupply); 
    }
  }, [platziPunks, account]);

return (
 ...
 <Text color={"green.600"}>
   Punks disponibles : {availablePunks}
 </Text>
 ...
)

Con eso ya tengo en el state selfsPunks la cantidad de PlatziPunks disponibles para mintear.

Anibal Español

student•

Resolviendo el reto: Añadiendo una nueva variable de estado que refleje la cantidad de Platzi Punks disponibles para mintear:

const [platziPunksStock, setPlatziPunksStock] = useState();

Calculando los PlatziPunks restantes:

  const getPlatziPunksData = useCallback(async () => {
    if (platziPunks) {
      const totalSupply = await platziPunks.methods.totalSupply().call();
	//  inicio cálculo de Platzi punks restantes	
      const maxSupply = await platziPunks.methods.maxSupply().call();
      setPlatziPunksStock(maxSupply - totalSupply)
	//  fin cálculo de Platzi punks restantes	
      const dnaPreview = await platziPunks.methods
        .deterministicPseudoRandomDNA(totalSupply, account)
        .call();
      const image = await platziPunks.methods.imageByDNA(dnaPreview).call();
      setImageSrc(image);
    }
  }, [platziPunks, account]);

Modificando el botón de Obtén tu Punk para que se muestre deshabilitado si se agotó la existencia (también podría hacerse un renderizado condicional):

<Button
            rounded={"full"}
            size={"lg"}
            fontWeight={"normal"}
            px={6}
            colorScheme={"green"}
            bg={"green.400"}
            _hover={{ bg: "green.500" }}
            disabled={platziPunksStock === 0} //Anteriormente ---> !platziPunks
          >
            Obtén tu punk
          </Button>

Añadiendo el mensaje con los platzi Punks restantes:

<Text>
          {platziPunksStock > 0
            ? `Quedan ${platziPunksStock} Platzi Punks por mintear!`
            : `Se agotaron los Platzi Punks :(`
          }
        </Text>

Christian Felipe Martinez Castaño

student•

Excelente, gracias

Alejandro Chavez

student•

¿Como se llama la extensión que da esos warnings en el código de JavaScript?

Freddy Junior De Jesus Campos Monasterio

student•

Unhandled Rejection (Error): invalid BigNumber value (argument="value", value="[object Object]", code=INVALID_ARGUMENT, version=bignumber/5.5.0)

Obtengo ese error cuando se es llamada la funcion de PseudoRandomDNA, es dado porque el numero que devuelve la funcion es muy grande pero no he logrado solucionarlo. Alguna recomendacion?

Nilson Diaz

student•

Hey ! podrias manejarlo como un BigInt

const dna = BigInt(PseudoRandomDNA);

Te dejo estos links para que puedas ver mas -> Using JavaScript BigInt to Represent Large Numbers -> Documentacion BigInt

Bárbaro Javier Valmaseda Vázquez

student•

Por aca mi codigo del reto

  const [availablePlatziPunks, setAvailablePlatziPunks] = useState();

 const getPlatziPunksData = useCallback(async () => {
    if (platziPunks) {
      const totalSupply = await platziPunks.methods.totalSupply().call();
      const maxSupply = await platziPunks.methods.maxSupply().call();
      const dnaPreview = await platziPunks.methods
        .deterministicPseudoRandomDNA(totalSupply, account)
        .call();
      const image = await await platziPunks.methods
        .imageByDNA(dnaPreview)
        .call();
      setImageSrc(image);
      setAvailablePlatziPunks(maxSupply - totalSupply);
    }
  }, [platziPunks, account]);

Luego modifico el boton obtner

disabled={!platziPunks || availablePlatziPunks === 0}

y por ultimo agrego un badge para mostrar la cantidad disponible.

<Badge mt={2}>
	? `Quedan ${availablePlatziPunks} Platzi Punks!`
                : `Se agotaron los Platzi Punks :(`}
</Badge>

Luca Cristian Manea

student•

Tengo un problema con el metodo imageByDNA el editor no lo reconoce como un metodo y al correr la app en el servidor tambien marca error en consola, revise el archivo PlatziPunksArtifact y efectivamente el metodo existe y el nombre es el correcto alguien mas tiene un problema similar?

Axel Nicolas Montenegro

student•

me sale este error no se como corregirlo Unhandled Rejection (TypeError): platziPunks.methods.totalSupply is not a function

Oscar Daniel Elias Sanchez

student•

Hola!,

Revisa los nombres de los métodos de tu contrato, el error dice que platziPunks.methods.totalSupply no es una función, es decir que en tu contrato seguro le pusiste un nombre diferente...Saludos.

Previsualizando tu 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

Detalle de PlatziPunk

Transfiriendo un PlatziPunk a otra cuenta

Filtrando los PlatziPunks por cuenta

Despliegue de la aplicación

InterPlanetary File System

Usando IPFS e Infura para subir contenido no censurable

Despliegue de PlatziPunks en IPFS

Despliegue de Aplicaciones en Fleek usando IPFS y ENS

Ethereum Name Service

Registrando nuestro ENS y vinculando a PlatziPunks

Sigue desarrollando

Recapitulación de lo aprendido con el proyecto PlatziPunks