Skip to content

Creación de NFT y casos de uso en Web3 (parte III)

Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Creación de NFT y casos de uso en Web3 (parte III)

En la parte II de esta serie, programamos un Smart Contract cumpliendo con el estándar ERC721, o NFT y lo subimos a la Blockchain Gnosis/Chiado. En esta última entrega vamos a ver cómo asignarlo a una cuenta de wallet (minting), añadirle metadatos, y usarlo como llave de acceso a una aplicación Web3.

Imagen del NFT
Imagen del NFT

Creación de una tarea para hacer el minting

Para asignar un NFT a una cuenta, tenemos que invocar al método safeMint del Smart Contract, y pasarle como parámetros la cuenta del wallet de destino y los metadatos del NFT. Podríamos hacer esta invocación de varias formas, pero vamos a hacerlo utilizando las tasks de Hardhat. Una task es una función javascript asíncrona, que sirve para automatizar tareas que vamos a realizar frecuentemente. Para implementar la task tenemos que modificar el fichero hardhat.config.js que creamos en el post anterior. Quedaría así:

/** @type import('hardhat/config').HardhatUserConfig */
require("@nomicfoundation/hardhat-toolbox");
const fs = require("fs");
const contractName = "MiNFT";
const contractId = "0xABABABABAFEFEFEFEFABABABABADEDEABABABABA";

task("mint", "otorga un token a la cuenta dada en el parámetro --account y la URL del parámetro --metadataurl")
  .addParam("account", "La dirección de la cuenta en la red")
  .addParam("metadataurl", "La url donde residirán los metadatos del token")
  .setAction(async (taskArgs) => {

    const [deployer] = await ethers.getSigners();

    console.log("Minting desde la cuenta:", deployer.address);
    console.log("Balance:", (await deployer.getBalance()).toString());

    const Token = await ethers.getContractFactory(contractName);
    const token = await Token.attach(contractId);

    console.log("Minting:", taskArgs.account);
    console.log("URL de metadatos:", taskArgs.metadataurl);

    var metadataurl="";
    if (taskArgs.metadataurl) {
      metadataurl=taskArgs.metadataurl;
    } else {
      metadataurl="https://ipfs.io/ipfs/Qmch5ukoCsf2rC4UWQxxxxxxxxxxxxxxxxxxxxxxxxxxx";
    }

    console.log("Resultado:", (await token.safeMint(taskArgs.account, metadataurl)));
});

module.exports = {
  solidity: "0.8.17",
  defaultNetwork : 'gnosis',
  networks: {
    
    gnosis: {
      url: 'https://rpc.gnosischain.com/',
      gasPrice: 'auto',
      gas: 'auto',
      accounts: [getPrivateKey()],
    },

    chiado: {
      url: 'https://rpc.chiadochain.net/',
      gasPrice: 1000000000,
      gas: 'auto',
      accounts: [getPrivateKey()],
    },

  }
};
function getPrivateKey() {
  try {
    return fs.readFileSync("./private_key.txt").toString().trim();
  } catch (e) {
    console.log(e);
      console.log(
        "Error: No se encontró el fichero con la clave privada de la cuenta de despliegue."
      );
  }
  return "";
};

Es importante que la variable contractName tenga como valor el nombre que le dimos en la declaración del contrato, en este ejemplo sería MiNFT:

contract MiNFT is ERC721, ERC721Enumerable, ERC721URIStorage, Ownable {

Otra cosa, recordarás que en el post anterior, al desplegar el contrato en la Blockchain, el script de Hardhat scripts/deploy.js nos indicaba la dirección del contrato. Algo así:

Dirección del Token NFT: 0xABABABABAFEFEFEFEFABABABABADEDEABABABABA

Pues bien, poned ese valor hexadecimal en la variable contractId de la task, y el script ya estará preparado para ejecutar el método safeMint. Una última cosa antes de ejecutar el minting, debemos preparar los metadatos del NFT.

Preparación de los metadatos

En un NFT, los metadatos son importantes porque van a permitir a los wallets mostrar información sobre el token. Aunque pueden incluirse muchos datos, lo vamos a hacer simple, indicando sólo los imprescindibles. Escribiremos un json como este en un fichero llamado nft.json:

{
«name»: «31337 Team Access Badge»,
«description»:»Este NFT se ha creado como prueba de concepto de Token Gating en Dapps Web3″,
«image»:»https://www.example.com/fstoken_art.png»,
«external_url»: «https://www.futurespace.es»
}

Este fichero, así como el fichero de imagen (en este ejemplo fstoken_art.png) debemos subirlos a un servidor con acceso público desde Internet, ya que cuando asignemos el token, le asociaremos una url de tipo «https://www.example.com/nft.json», de forma que al ser visualizado en un Wallet, obtendrá de este fichero los datos necesarios para mostrar el nombre, la descripción y la imagen del token.

Si tienes acceso a una máquina en Amazon, Azure, o en un cualquier servidor web al que puedas subir ficheros, sube tanto el .json como el .png en el directorio correspondiente del web server. Es importante que los ficheros puedan servirse por HTTPS, con un certificado válido (no auto-firmado). Puedes configurar uno grátis con Let’s Encrypt.

Si no tienes acceso a un servidor web, puedes alojar los ficheros en un proyecto con hosting o storage activados en Firebase, o subirlos a IPFS, que es un sistema de ficheros distribuido muy usado en Web3.

La ejecución del Smart Contract

Ahora ya podemos ejecutar el método mint del contrato. En los parámetros del script Hardhat tenemos que especificar con –network la red a la que nos referimos (gnosis o chiado), con –account la cuenta del wallet de destino a la que queremos asignar el NFT, y con –metadataurl la URL donde hayamos subido el fichero nft.json.

Para no liarte, puedes tener dos cuentas de wallet: una con la que generas el contrato y haces el minting, y otra en la que recibirás el NFT. En este ejemplo serían 0x1234567890123456789012345678901234567890 y 0x7777777777777777777777777777777777777777 respectivamente.

Ya vimos como instalar Metamask en el navegador de sobremesa. Ahora, puedes instalar la App también en tu teléfono móvil (descárgala Google Play si tienes un teléfono Android o desde el App Store si tienes un iPhone) y crear una cuenta nueva en la red Chiado (o Gnosis). Copia la dirección hexadecimal y utilízala como cuenta de destino en el proceso de minting:

npx hardhat –network gnosis mint –account 0x7777777777777777777777777777777777777777 –metadataurl https://www.example.com/nft.json
Minting desde la cuenta: 0x1234567890123456789012345678901234567890
(node:27770) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node –trace-warnings …` to show where the warning was created)
Balance: 3358649129380211745
Minting: {
hash: ‘0x8417fe7fcc9be1e98a6ae031992e116cfa2cb58e31ed51c755cbc0e31a999b21’,
type: 2,
accessList: null,
blockHash: null,
blockNumber: null,
transactionIndex: null,
confirmations: 0,
from: ‘0x1234567890123456789012345678901234567890’,
gasPrice: BigNumber { value: «2258160001» },
maxPriorityFeePerGas: BigNumber { value: «2258159993» },
maxFeePerGas: BigNumber { value: «2258160001» },
gasLimit: BigNumber { value: «191187» },
[…]
creates: null,
chainId: 100,
wait: [Function (anonymous)]
}

Pues bien, si todo ha se ha ejecutado según lo previsto, ya estará el NFT en la cuenta de destino. Puedes verlo en el explorador de bloques de Chiado (o en el de Gnosis si lo has enviado a esa red) introduciendo en el buscador la dirección que has usado como destino. Entre los datos relacionados con tu cuenta, verás un apartado «Transfers» y dentro de esta opción «Token Transfers» verás la transferencia correspondiente al minting, y al lado del literal «TokenID» verás un identificador numérico («4» en este ejemplo). Toma nota de dicho identificador.

Identificador del NFT
Identificador del NFT

Visualizando el NFT en tu móvil

En Metamask móvil, asegurate de que tienes seleccionada la red donde se generó el Token (Chiado o Gnosis). Si no las tienes dadas de alta, puedes utilizar «Agregar una red» e introducir los datos de configuración correspondientes.

Selector de red, y configuraciones de las redes Chiado y Gnosis

En Metamask, algunas redes permiten la detección automática de tus tokens NFT, pero en el caso de Chiado/Gnosis, aún no es posible, por lo que tendrás que agregar el token de forma manual. Para esto, desde el explorador de NFTs de Metamask, pulsa «Agregar NFT», y en la pantalla que aparecerá, introduce la dirección del Token (la que ya habíamos utilizado para definir la variable «contractId» en la task:

Dirección del Token NFT: 0xABABABABAFEFEFEFEFABABABABADEDEABABABABA

Como identificador del Token, pon el código numérico que aparecía en el explorador blockscout.com. Después pulsa «Agregar»y ya deberás ver el NFT! Es posible que al principio no te salga la imagen, pero pulsando sobre el token podrás ver la opción «Actualizar los metadatos» y así podrás refrescar los datos y la imagen.

Explorador de NFTs, pantalla «Agregar NFT» y el token una vez agregado.

Llave de acceso a la Dapp Web3

Ya tienes tu flamante NFT en el wallet! Ahora podrías transferirlo a un amigo, cambiarlo por otro, venderlo, o, como vamos a ver a continuación, utilizarlo para acceder a un contenido securizado por Token.

Por motivos de espacio y simplicidad, no voy a explicar en detalle cómo hacer la App Web3 con control de acceso, pero si te interesa, contáctanos para más información. Se trata de una aplicación Web muy sencilla, que utiliza el protocolo open source Wallet Connect para, como su nombre indica, conectar tu wallet móvil con la Web y detectar si tienes el NFT requerido para poder acceder al contenido protegido (Token Gating).

A continuación, puedes ver un video en el que en la parte izquierda se ve la ventana del Browser con la App Web3, y en la parte derecha, la pantalla del móvil con Metamask.

Conexión del Wallet móvil con la Dapp Web3

Al principio, el wallet está desconectado, y aparecen en rosa los campos de «Cuenta» y «Tipo de Token». Pulsamos el botón «Conectar» en la Web, y se muestra un QRCode.

Desde el móvil, podemos ver que tenemos el token «Futurespace NF Test Token», que nos permitirá acceder a la Web3 Dapp. Pulsamos el botón de escanear, y con la cámara del móvil capturamos el QR. En ese momento la Dapp y el wallet se conectan (si damos nuestro permiso), y la Dapp comprueba que está presente el NFT requerido. Si es así, los campos de Cuenta y Tipo de Token se pondrán en verde y mostrarán respectivamente la dirección del Wallet y el balance de tokens contenido en el mismo.

¡Espero que os haya resultado muy interesante, y que os pueda inspirar para implementar vuestros propios casos de uso basados en NFT y Web3!

Share the article

Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email
Share on whatsapp
WhatsApp

A new generation of technological services and products for our customers