Construye la Dapp NFT

Si es la primera vez que construyes un frontend dapp Archway, dirígete a la guía Creando tu primera dapp para aprender a configurar el andamiaje básico de tu proyecto. Una vez que estés sirviendo una página web que se conecta a Keplr, estarás listo para seguir los siguientes pasos.

Información

Una cosa a tener en cuenta es que, por defecto, Keplr anula las tasas establecidas por el frontend. Para evitar que Keplr anule estas tarifas, establezca el valor de la opción interactiva preferNoSetFee en true. Puede encontrar más información sobre estas opciones de anulación aquí.

Cargando la colección NFT

Como vimos en la guía anterior, para consultar un contrato necesitamos conocer su dirección en la cadena. También necesitamos una instancia de SigningArchwayClient.

// For more on setting up this handler see the "Creating Your First dapp" guide (linked to above):
const client = await SigningArchwayClient.connect('https://rpc.constantine.archway.tech');
// Replace this empty string with your deployed contract address
const contractAddress = '';

Usando las dos variables anteriores podemos escribir JavaScript para consultar la colección NFT para sus identificadores de token de la siguiente manera:

async function getNfts() {
  let entrypoint = {
    all_tokens: {},
  };
  let query = await queryHandler(contract, entrypoint);
  console.log('All NFTs of contract ' + contract + ':', query);
  return query;
}

La función getNfts devuelve un objeto tokens que contiene una matriz de todos los tokens acuñados por el contrato.

He aquí un ejemplo de llamada:

let nfts;
async function doGetNfts() {
  nfts = await getNfts();
  console.log('All NFT ids', nfts);
}
doGetNfts();

Minting desde la dapp

Para acuñar desde nuestra dapp, necesitamos ensamblar los campos de metadatos para la NFT. Podemos conseguirlo creando una interfaz web con campos de formulario donde el creador de la NFT pueda añadir rasgos personalizados a su NFT.

Podemos simplificar nuestra tarea restante escribiendo una función que tome los metadatos NFT requeridos como parámetros. Con esto en mente, este es el aspecto de una función de acuñación en JavaScript:

async function mintNft(owner, tokenId, imageUrl, name, description, attributes = []) {
  // Ensure we collected the required arguments
  if (!owner || !tokenId || !imageUrl || !name || !description) {
    console.warn('Error parsing mint arguments', { owner, tokenId, imageUrl, name, description });
    return;
  }
  // Prepare Tx
  let entrypoint = {
    mint: {
      token_id: String(nfts.tokens.length),
      owner: owner,
      extension: {
        name: name,
        description: description,
        image: imageUrl,
      },
    },
  };
  // If the creator used any arbitrary custom attributes, add them to the entrypoint
  if (attributes.length) {
    entrypoint.mint.extension.attributes = attributes;
  }
  try {
    // Send Tx
    let tx = await CosmWasmClient.execute(owner, contract, entrypoint, 'auto');
    console.log('Mint Tx', tx);
    // Refresh the NFT collection to resolve the new token
    await getNfts();
  } catch (e) {
    console.warn('Error executing mint tx', e);
  }
}

He aquí un ejemplo de cómo sería llamar a nuestra función mintNft:

// Example call:
async function doMintNft() {
  let mintTx = await mintNft(
    (owner = 'archway1f395p0gg67mmfd5zcqvpnp9cxnu0hg6r9hfczq'),
    (tokenId = '2'),
    (imageUrl = 'ipfs://QmY8Ei2NQkMg8rCFiUkcXH2NPWPNKMoWLBYDwBeMNsP5sr'),
    (name = 'Archway NFT #2'),
    (description = 'Building With NFTs (and Dapps)'),
    (attributes = [{ trait_type: 'tutorial', value: 'https://docs.archway.io/developers/guides/nft-project/deploy' }])
  );
  console.log('Mint tx', mintTx);
}
doMintNft();

Transfiriendo NFTs

Ahora que podemos minar desde nuestra dapp, los parámetros de formulario y punto de entrada para transferir NFTs son mucho más sencillos. Al igual que las transferencias iniciadas desde la Developer CLI, , necesitamos la dirección Archway del destinatario y el token_id que le estamos enviando. También necesitamos conocer la dirección del propietario actual y una referencia a la dirección del contrato que configuramos anteriormente.

Este es el aspecto de una función JavaScript para transferir un NFT de Archway:

async function transferNft(owner, recipient, tokenId) {
  if (!owner || !recipient || !tokenId) {
    console.warn('Error parsing transfer_nft arguments', { owner, recipient, tokenId });
    return;
  }
  // Prepare Tx
  let entrypoint = {
    transfer_nft: {
      recipient: recipient,
      token_id: tokenId,
    },
  };
  // Send Tx
  try {
    let tx = await SigningArchwayClient.connectWithSigner(network.endpoint, wallet);
    console.log('Transfer Tx', tx);
    // Refresh the NFT collection
    await getNfts();
  } catch (e) {
    console.warn('Error executing NFT transfer', e);
  }
}

Llamar a la función anterior podría tener este aspecto:

// Example call:
async function doTransferNft() {
  let transferTx = await transferNft(
    (owner = 'archway1f395p0gg67mmfd5zcqvpnp9cxnu0hg6r9hfczq'),
    (recipient = 'archway1y00hm50lffnxt5m0kuy9afk83gyuye684zwcr5'),
    (tokenId = '2')
  );
  console.log('Transfer tx', transferTx);
}
doTransferNft();

Mostrando el NFT

La función getNfts que creamos devuelve todos los identificadores de token acuñados por el contrato, pero es necesario un paso más antes de que podamos mostrar los NFT de nuestra colección en nuestra dapp. Para leer los metadatos de un NFT llamamos al punto de entrada nft_info que ejecutamos desde CLI en la lección anterior.

Este es el aspecto de la carga de metadatos de tokens mediante JavaScript:

async function getTokenMeta(tokenId) {
  if (typeof tokenId !== 'string') {
    console.warn('Invalid token ID. Token ID must be a string, but got ' + typeof tokenId);
    return;
  }
  let entrypoint = {
    nft_info: {
      token_id: tokenId,
    },
  };
  let query = await this.handlers.query(contract, entrypoint);
  console.log('NFT contract succesfully  queried for token ID ' + tokenId, query);
  return query;
}

Un ejemplo de llamada a la función getTokenMeta podría ser el siguiente:

// Example call:
async function doGetTokenMeta() {
  let token2 = await getTokenMeta('2');
  console.log('Metadata for token_id: "2"', token2);
}
doGetTokenMeta();

Información

Nota: Si su imagen NFT fue subida a IPFS, usando una url IPFS como ipfs://... su aplicación web necesitará resolver la fuente de la imagen desde una pasarela IPFS (lea más sobre pasarelas y proveedores IPFS).

Clonalo y inténtalo tu mismo!

Esta guía se centra en las características principales de las NFTs de Archway, algunos aspectos básicos del desarrollo web no se han visto en detalle, pero encontrarás frontends de ejemplo que funcionan para este proyecto en el repositorio de ejemplos de dapp.