Previsualizando tu PlatziPunk

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.

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>

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>

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?

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