Previsualizando tu PlatziPunk

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

Previsualizando tu PlatziPunk

Anibal Español

Estudiante

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

Estudiante

Excelente, gracias

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