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

Resumen

En este artículo, aprenderemos como usar un contrato desplegado e interactuar con él. Interactuar con contractos existentes en la blockchain es un parte esencial de lo que hace a la Web3 especial.

En este tutorial específico:

• Resolveremos un identificador de nombre en .find a una dirección 0x en Flow (.find → 0x)
• Busca el nombre .find para una cuenta para una dirección 0x en Flow (0x0 → .find

Previamente en “Aprende FCL”

Si trabajaste a través de alguno de nuestros posts previos deberías saber como pasar argumentos a scripts en Cadence. Necesitaremos este conocimiento ya que en este tutorial pasaremos valores String y Address.

Empecemos! 💪

Preparación

Cuando quieras interactuar con algún contrato desplegado, primero necesitas descubrir donde esta desplegado 😅. En nuestro ejemplo específico, .find es un servicio conocido y con la ayuda de su creador Bjarte fuimos capaces de encontrar la dirección del repositorio en GitHub en https://github.com/findonflow/find.

💡 Pro Tip: puedes encontrar cualquier contrato que quieras, mientras tengas un hash de la transacción o una dirección de una cuenta que haya interactuado con el contrato en el pasado. Solo visita su historia en flowscan.org!

De vuelta a .find! Excavando un poco, puedes encontrar toda la información que necesitas dentro del archivo integration.md. Específicamente, dos bloques de código en Cadence que usaremos como nuestros resolvedores. Este método para encontrar un nombre a través de una dirección:

import FIND from 0x097bafa4e0b48eef

pub fun main(name: String): Address?{
  return FIND.lookupAddress(name)
}

Y este otro para el proceso reverso:

import FIND from 0x097bafa4e0b48eef

pub fun main(address: Address) : String?{
  return FIND.reverseLookup(address)
}

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);

Paso 3 - Resolver una Alias de Identidad a una dirección

Ahora crearemos una función llamada resolveName. Esta función aceptará un parametro String, pasa este a la blockchain junto con nuestro código resolvedor e imprime el resultado:

const resolveName = async (name) => {
  // El codigo Cadence que podemos obtener del script "resolve.cdc":
  // <https://github.com/findonflow/find/blob/main/scripts/resolve.cdc>
  // El contrato de .find está deployado en la Mainnet de Flow en la dirección "0x097bafa4e0b48eef"
    // usaremos esta direccion en la declaración de importación
  const cadence = `
    import FIND from 0x097bafa4e0b48eef

    pub fun main(name: String): Address?{
      return FIND.lookupAddress(name) // we'll use .find's native lookupAddress method.
    }
  `;

  const args = (arg, t) => [arg(name, t.String)];

    // "query" es usado para operaciones de sólo lectura en la blockchain.
    // lee más acerca del método "query" en la pagina web de la documentación de Flow:
    // <https://docs.onflow.org/fcl/reference/api/#query>
  const address = await query({ cadence, args });

  console.log(
    `${name} identity has address %c${address}`,
    "color: #36ad68; font-weight: bold"
  );
};

Paso 4 - Resolver una dirección a un Alias de Identidad

Hagamos algo similar para revertir el proceso. Crearemos una función llamada resolveAddress que acepta una dirección pasada como String.

const resolveAddress = async (address) => {
    // El código Cadence para resolver una direccion como argumento 
    // a una Address lo podemos obtener del script "name.cdc"
    // <https://github.com/findonflow/find/blob/main/scripts/name.cdc>
    // El contrato de .FIND esta deployado en la dirección "0x097bafa4e0b48eef" - usaremos esa dirección en la declaración de importación.
  const cadence = `
    import FIND from 0x097bafa4e0b48eef

    pub fun main(address: Address) : String?{
      return FIND.reverseLookup(address) // nota la nueva función
    }
  `;

  const args = (arg, t) => [arg(address, t.Address)];
    // "query" pasara código en Cadence para acceder al nodo para su ejecución y nos retornará un resultado
    // lee más acerca del método "query" en la documentación de Flow.
    // <https://docs.onflow.org/fcl/reference/api/#query>
  const name = await query({ cadence, args });

  console.log(
    `${address} address is aliased to %c${name}`,
    "color: #36ad68; font-weight: bold"
  );
};

Finalmente

Llamemos las funciones que creamos al final del archivo usando algunos parámetros de prueba.

❕Nota: Estamos llamando a esos métodos dentro de una IIFE por simplicidad. Uno puede imaginar ejecutándolos con un botón o como parte de un procedimiento más complejo.

Ejecutar este código debería emitir esto a la consola:

bjartek identity has address 0x886f3aeaf848c535
0x886f3aeaf848c535 address is aliased to bjartek

Puedes encontrar el código completo en este Codesandbox.

Hasta la próxima! 👋

Recursos

• Código del ejemplo: https://codesandbox.io/s/dev-to-fcl-resolve-find-name-9tbo8e
• Cadence Imports - https://docs.onflow.org/cadence/language/imports/ - documentación sobre declaraciones import en Cadence.
• .find GitHub Repository - https://github.com/findonflow/find - código completo y documentación de la plataforma .find.

Otros recursos que podrías encontrar útil:

• Documentación de Flow - https://docs.onflow.org/ - Más información detallada acerca de la blockchain de Flow y como interactuar con ella.
• Flow Portal - https://flow.com/ - Tu portal de entrada a Flow.
• FCL JS - https://github.com/onflow/fcl-js - Código fuente y la habilidad de contribuir a la libreria de FCL JS.
• Cadence - https://docs.onflow.org/cadence/ - Introduccion a Cadence.
• Codesandbox - https://codesandbox.io - Un editor de texto genial para prototipar en el navegador.