Build on FLOW | Learn FCL - 4. How to Resolve .find Identity Name to an Address

Overview

In this article, we will learn how we can use an existing deployed contract and interact with it. Interacting with existing contracts on-chain is an essential part of what makes Web3 special.

In this specific tutorial, we will:

• Resolve a .find identity name to a corresponding Flow 0x address (.find → 0x)
• Lookup .find name(s) for a Flow 0x address (0x0 → .find)

Previously on “Learn FCL”

If you worked through one of our previous posts you should know how to pass arguments to Cadence scripts. We will need this knowledge as in this tutorial we will need to pass String and Address values.

Let’s begin! 💪

Preparation

Whenever you want to interact with some deployed contract, you need to discover where it’s deployed first 😅. In our specific example, .find is a known service and with help of it’s creator Bjarte we were able to lookup the address to GitHub repository at https://github.com/findonflow/find.

💡 Pro Tip: you can look up any contract you want, as long as you have a transaction hash or an account address that has interacted with a contract in the past. Just go through its history on flowscan.org!

Back to .find! Digging through, you can find all the information you need inside of the integration.md file. Specifically, two blocks of Cadence code which we will use as our resolvers. This one for name to address lookup method:

import FIND from 0x097bafa4e0b48eef

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

And another one for a reverse process:

import FIND from 0x097bafa4e0b48eef

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

Step 1 - Installation

Add "@onflow/fcl": "1.0.0" as your dependency

Step 2 - Setup

Just like the last time we will import necessary methods and setup FCL:

// Import methods from FCL
import { query, config } from "@onflow/fcl";

// Specify the API endpoint - this time we will use Mainnet
const api = "https://rest-mainnet.onflow.org";

// Configure FCL to use testnet as the access node
config().put("accessNode.api", api);

Step 3 - Resolve Identity Name to Address

Now let’s create a function called resolveName . This function will accept a string, pass it to the network alongside our resolver code and then print out the result:

const resolveName = async (name) => {
  // The Cadence code we can get from "resolve.cdc" script:
  // https://github.com/findonflow/find/blob/main/scripts/resolve.cdc
  // .find contract deployed on Flow Mainnet at "0x097bafa4e0b48eef"
  // we will use this address in the import statement
  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" is used for read-only operations on chain.
  // read more about the "query" method on Flow Docs Site:
  // 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"
  );
};

Step 4 - Resolve Address to an Identity Alias

Let’s do something similar to reverse the process. We’ll create a function named resolveAddress that accepts the address passed as a string.

const resolveAddress = async (address) => {
  // The Cadence code to resolve address to an Address we can get from "name.cdc" script:
  // https://github.com/findonflow/find/blob/main/scripts/name.cdc
  // .find contract deployed on Flow Mainnet at "0x097bafa4e0b48eef" - we will use that address in import statement
  const cadence = `
    import FIND from 0x097bafa4e0b48eef

    pub fun main(address: Address) : String?{
      return FIND.reverseLookup(address) // notice the new function
    }
  `;

  const args = (arg, t) => [arg(address, t.Address)];

  // "query" will pass Cadence code to access node for execution and return us a result:
  // read more about "query" method on Flow Docs Site:
  // 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"
  );
};

Finally

Let's call the functions we created at the end of the file using some test parameters.

❕Note: We are calling those methods inside of an IIFE for simplicity. One can imagine running those on a button click or as a part of more complex procedure.

(async () => {
  console.clear();
    // Bjarte S. Karlsen is of the original creators of .find and one of the best pillars of Flow Community - https://github.com/bjartek
  await resolveName("bjartek");
    await resovleAddress("0x886f3aeaf848c535");
})();

Running this code should result in the following output to the console:

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

The full code could be found on Codesandbox here:
https://codesandbox.io/s/dev-to-fcl-resolve-find-name-9tbo8e

Until next time! 👋

Resources

• Example code: https://codesandbox.io/s/dev-to-fcl-resolve-find-name-9tbo8e
• Cadence Imports - https://docs.onflow.org/cadence/language/imports/ - docs for import declarations in Cadence
• .find GitHub Repository - https://github.com/findonflow/find - full source code and documentation for .find platform

Other resources you might find useful:

• Flow Docs Site - https://docs.onflow.org/ - More detailed information about Flow blockchain and how to interact with it
• Flow Portal - https://flow.com/ - your entry point to Flow
• FCL JS - https://github.com/onflow/fcl-js - Source code and ability to contribute to the FCL JS library
• Cadence - https://docs.onflow.org/cadence/ - Introduction to Cadence
• Codesandbox - https://codesandbox.io - An amazing in-browser IDE enabling quick prototyping