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

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:54

Previsualizando tu PlatziPunk

Curso de Desarrollo Frontend de Aplicaciones Descentralizadas con Web3.Js

Clase 11 de 23

Clase 11 / 23

Anibal Español

Hace 5 años

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

Hace 4 años

Excelente, gracias

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

Previsualizando tu PlatziPunk

Progreso del curso

Introducción al desarrollo con Web3.js

Qué es Web3.js

Desarrollo frontend con Web3.js

Despliegue de la aplicación

Sigue desarrollando

Recursos

Recursos