DEV Community

Bruno Gonzales for Flow Blockchain

Posted on

Construye en Flow: Aprende FCL - 5. Obtener una lista de NFTs viviendo una direccion conocida

Resumen

En esta guía, expandirás tu conocimiento interactuando con contratos inteligentes a través de scripts en Cadence. Aprenderás como:

  • sacar una lista de NFTs almacenados en la cuenta de una dirección (usaremos un Flovatar para este ejemplo)
  • preparar y retornarlas como un Array de Struct personalizados.

Previamente en “Aprende FCL”

En el post pasado, aprendimos como interactuar con contratos desplegados y como retornar un valor Struct personalizado de un script. Aprenderemos como construir sobre ese conocimiento y ejecutar un procedimiento más complejo - traer una lista de NFTs almacenados en una cuenta, mapearlos a nuestro formato favorito y retornarlos de vuelta.

Empecemos! 💪

¿Qué es Flovatar?

Flovatar es una de los muchos asombrosos proyectos sobre NFTs construido encima de Flow. En vez de dejarte comprar uno de esos miles de NFTs únicos, provee herramientas para que tu puedas agregar tu toque personal a un Flovatar que vaya con tu estilo

Preparación

Las primeras cosas primero, deberías encontrar la dirección donde el contrato está desplegado. El GitHub de Flovatar tiene las direcciones para los contratos desplegados en la página principal.

  • Mainnet - 0x921ea449dffec68a
  • Testnet - 0x0cf264811b95d465

Y en el archivo get_flovatars.cdc, El contrato Flovatar tiene un método util que podemos usar llamado getFlovatars que acepta una dirección como argumento:

import Flovatar from **0x921ea449dffec68a**
pub fun main(address:Address) : [Flovatar.FlovatarData] {
    return Flovatar.getFlovatars(address: address)
}
Enter fullscreen mode Exit fullscreen mode

Paso 1- Instalación

Agrega "onflow/fcl": "1.0.0" como tu dependencia.

Paso 2 - Setup

Como la última vez importaremos los métodos necesarios para configurar FCL:

//Importamos métodos de FCL
import { query, config } from "@onflow/fcl";

// Especifica el endpoint de la API - esta vez usaremos Mainnet
const api = "https://rest-mainnet.onflow.org";

// Configurar FCL para usar Testnet como el nodo de acceso
config().put("accessNode.api", api);

Enter fullscreen mode Exit fullscreen mode

Paso 3 - Implementar el método getFlovatar

// Obtén una lista de Flovatars a través de direcciones.
const getFlovatars = async (adddress) => {
    const cadence = `
        import Flovatar from **0x921ea449dffec68a**

        pub fun main(address:Address) : [Flovatar.FlovatarData] {
            return Flovatar.getFlovatars(address: address)
        }
    `
    // Necesitamos pasar un sólo argumento de tipo Address
    const args = (arg, t) => [arg(address, t.Address)];

    const flovatars = await query({ cadence, args });
    console.log({ flovatars })
}
Enter fullscreen mode Exit fullscreen mode

Paso 4 - Démosle un intento

Hagamos un llamado a nuestro método. Nuestro objetivo sera Luca (creador de Flovatar) - su dirección es 0x2a0eccae942667be

(async()=>{
    const user = "0x2a0eccae942667be"
    await getFlovatars(user)
})()
Enter fullscreen mode Exit fullscreen mode

Si das una mirada a la consola veras una lista de objetos representando Flovatars.

Image description

No tan mal, verdad? Bueno… tratemos de desenvolver ese campo metadata :

Image description

Ahora eso es SVG para ti. Mientras que puedes traer esta data cada vez que el usuario refresque la página, idealmente querrías cachearla de alguna manera y solo consultarla cuando la necesites.

Adicionalmente si consultas cuentas con cientos/miles de NFTs podrias sobrepasar el límite de valor retornable, el cual es alrededor de ~10Mbs.

Si vas al Showroom de Flovatar y usas las dev tools en tu navegador puedes encontrar que todas las imágenes estan cacheadas en https://flovatar.com/api/image/{id}. Traigamos solo los subcampos id y creatorAddress del campo metadata de los NFTs. De esta manera podemos identificar si el dueño es un creador original de dicho NFT.

Paso 5- Mejorando el script en Cadence

Como recordarás del último post- podemos crear Struct personales que almacenarán toda la data que queremos retornar. Definiremos un Struct llamado Avatar con dos campos: id y isCreator

// Trae una lista de FLovatars de una dirección
const getFlovatarsImproved = async (adddress) => {
    const cadence = `
        import Flovatar from **0x921ea449dffec68a

        pub struct Avatar{
      pub let id: UInt64
      pub let isCreator: Bool

      // guión abajo en frente de los argumentos nos permite pasarlos sin nombrarlos
            init(_ id: UInt64, _ isCreator: Bool){
        self.id = id
        self.isCreator = isCreator
      }
        }**

        pub fun main(address:Address) : [Avatar] {
            // Como la última vez llamaremos el método "getFlovatars"
            let flovatars = Flovatar.getFlovatars(address: address)

            // Colectaremos la data procesada del Flovatar aquí
      let data: [Avatar] = []

            // Un loop simple para iterar sobre Flovatars
      for flovatar in flovatars {
        let isCreator = flovatar.metadata.creatorAddress == address
        let avatar = Avatar(flovatar.id, isCreator)

                // agregar nueva instancia del Avatar en la lista resultante
        data.append(avatar)
      }
      return data  
    }
    `

    // Pasaremos la dirección como un argumento solitario de tipo Address
    const args = (arg, t) => [arg(address, t.Address)];

    const flovatars = await query({ cadence, args });
    console.log({ flovatars })
}
Enter fullscreen mode Exit fullscreen mode

Finalmente

Actualicemos nuestro IFEE e intentemos nuevamente:

(async ()=> {
    const user = "0x2a0eccae942667be"
    await getFlovatarsImproved(user)
})()
Enter fullscreen mode Exit fullscreen mode

Esta invocación resulta en una huella más reducida en la consola.

flovatars-small.png

Contained information would be enough to construct a link

La información contenida sería suficiente para construir un link (https://flovatar.com/flovatars/{id}) o imagen (https://flovatar.com/api/image/{id}) en tu interfaz.

⭐Challenge Extra

Usando tu conocimiento de el post sobre resolver identidades en .find modifica el codigo para permitir pasar identidades de .find al método getFlovatars

Recursos

Otros recursos que podrías encontrar útil:

Esta es una traducción al español del quinto artículo de la serie Build on Flow | Learn FCL escrito por Maksimus Starka.

Top comments (0)