LogoLogo
ProductsCommunityGitHubShare Feedback
NFT Kit
NFT Kit
  • What is the NFT KIT?
    • Introduction
    • Non-Fungible Tokens (NFTs)
      • NFT | Basics
      • Technologies & Concepts
    • NFT Kit
      • NFT Kit | Basics
        • Overview
        • Functionality
      • NFT Flavors & Ecosystems
      • Architecture
        • Low-Level Service Abstraction
        • Ecosystem Abstraction
        • High-Level Interfaces / APIs
      • Use Cases
  • Getting started
    • Quick Start
  • Ecosystems
    • Ethereum | Polygon | Shimmer
      • Setup
      • NFT | Creation & Management
        • Smart Contract Deployment
        • Minting NFTs
        • Get NFT Metadata
        • Get Account Balance
        • Get Token Owner
        • Get Collection Info
        • Get NFTs by Account
      • NFT | Ownership Verification
        • Ownership Verification
        • Ownership Verification With Traits
      • Smart Contract | Extensions
        • Pausable
        • Burnable
      • Smart Contract | Access Control
        • Ownership
        • Role-Based Access Control
    • Ocean Protocol
      • Setup
      • NFT | Verification
      • NFT | Wallet
      • Architecture
    • Tezos
      • Architecture
      • NFT | Creation & Management
        • Smart Contract
        • Add Minter
        • NFT Minting
        • Fetch NFT metadata
        • Get account NFTs
        • Get contract metadata
      • NFT | Ownership Verification
        • NFT Ownership Verification
        • NFT Ownership Verification Within A Collection
        • NFT Ownership Verification With Traits
      • NFT | Wallet
      • Tutorials
        • Minting NFTs on Tezos
          • Setup
          • New Collection
          • First NFT
          • Verification
          • Wallet
    • Near Protocol
      • Architecture
        • Smart Contract
        • Blockchain NFTs operations
        • NFTs Queries
      • NFT | Creation & Management
        • NEAR Sub-Account
        • Deploy NFT Contract
        • NFT | Minting
      • Querying NFT information controller
        • Get NFTs for account
        • Get NFT By Token Id
        • Get NFT contract metadata
      • NFT | Wallet
      • Tutorials
        • Minting NFT on Near Protocol
          • Near Wallet Creation
          • Setup NFT-Kit
          • Create Sub-account
          • Smart Contract ( Collection )
          • Minting your first NFT
        • NFT Ownership Verification
        • Wallet
    • Polkadot
      • Architecture
      • Query NFTs
        • Unique network
          • Fetching Token id & Collection id
          • Fetching NFT metadata
        • Parachain Networks
          • Fetching Tokens by subscan
          • Fetching EVM ERC721 Collectibles by subscan
      • NFT | Ownership Verification
        • NFT ownership verification
        • NFT ownership verification within a collection
        • NFT ownership verification with traits
      • NFT | Wallet
        • Polkadot parachains
        • Polkadot EVM compatible parachains
    • Flow
      • Architecture
        • Cadence Scripts
        • NFT Operations (FCL)
      • Querying NFT information Controller
        • Get NFTs for an account
        • Get NFTs in Collection
        • Get NFT by Token Id
      • NFT | Ownership Verification
        • NFT ownership verification on Flow
        • NFT ownership verification in collection on Flow
      • NFT | Wallet
        • Flow Blockchain
    • Algorand
      • Architecture
        • Algorand Standard Assets (ASAs)
      • NFT | Creation & Management
        • Account Creation
        • NFT Creation (ARC3)
      • Querying Asset information
        • Get Assets for account
        • Get Asset Details
        • Get NFT Metadata by asset id
        • Get NFT by Asset id
      • NFT | Ownership Verification
        • NFT ownership verification
        • NFT ownership verification with traits
        • NFT ownership verification Based on Creator
        • NFT Metadata verification against a dynamic policy
      • NFT | Wallet
        • Algorand Blockchain
    • IPFS
  • Concepts
    • Soulbound Tokens (SBTs)
    • NFT verification with OPA
  • Configurations
    • Configuration Files
    • Gas Provider
  • Community
    • Discord
    • Twitter
    • Newsletter
    • GitHub Discussions
  • DEVELOPER RELATIONS
    • Roadmap
    • Contribute
    • Share Feedback
    • Contact
  • Product Editions
    • Open Source | Always Free
    • Enterprise | Self-Managed
    • Cloud Platform | Managed
Powered by GitBook
On this page
  • The Flow Client Library (FCL)
  • Installation
  • Configuration
  • Blockchain Interactions
  • Retrieve All NFTs
  • Get NFT by Token id
  • Get NFTs in Collection

Was this helpful?

Export as PDF
  1. Ecosystems
  2. Flow
  3. Architecture

NFT Operations (FCL)

The Flow Client Library (FCL)

The FCL JS package enables communication between user wallets and the Flow blockchain, making it unnecessary for dapps to modify their code or integrate custom solutions when utilizing FCL for authentication. Its purpose is to simplify and secure the development of applications that interface with the Flow blockchain by providing a standardized set of communication patterns for wallets, applications, and users. Additionally, FCL JS includes an SDK and utilities to interact with the Flow blockchain, and can be used in both browser and server environments.

Installation

To use the FCL JS in your application, install using yarn or npm

npm i -S @onflow/fcl
yarn add @onflow/fcl

Importing

ES6

import * as fcl from "@onflow/fcl";

Node.js

const fcl = require("@onflow/fcl");

Configuration

import { config } from "@onflow/fcl";

config({
  "accessNode.api": "https://rest-testnet.onflow.org", // Mainnet: "https://rest-mainnet.onflow.org"
  "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn" // Mainnet: "https://fcl-discovery.onflow.org/authn"
})

The accessNode.api key specifies the address of a Flow access node. Flow provides these, but in the future access to Flow may be provided by other 3rd parties, through their own access nodes. discovery.wallet is an address that points to a service that lists FCL compatible wallets. Flow's FCL Discovery service is a service that FCL wallet providers can be added to, and be made 'discoverable' to any application that uses the discovery.wallet endpoint.

Blockchain Interactions

FCL enables interactions with the Flow blockchain by :

  • Query the chain: Send arbitrary Cadence scripts to the chain and receive back decoded values.

import * as fcl from "@onflow/fcl";

const result = await fcl.query({
  cadence: `
    pub fun main(a: Int, b: Int, addr: Address): Int {
      log(addr)
      return a + b
    }
  `,
  args: (arg, t) => [
    arg(7, t.Int), // a: Int
    arg(6, t.Int), // b: Int
    arg("0xba1132bc08f82fe2", t.Address), // addr: Address
  ],
});
console.log(result); // 13
  • Mutate the chain: Send arbitrary transactions with your own signatures or via a user's wallet to perform state changes on chain.

import * as fcl from "@onflow/fcl";
// in the browser, FCL will automatically connect to the user's wallet to request signatures to run the transaction
const txId = await fcl.mutate({
  cadence: `
    import Profile from 0xba1132bc08f82fe2
    
    transaction(name: String) {
      prepare(account: AuthAccount) {
        account.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)
      }
    }
  `,
  args: (arg, t) => [arg("myName", t.String)],
});

Retrieve All NFTs

  async getAllNFTs(Address: string , chain: string) {
    const ad = Address;

      if (chain === "mainnet") {
          var MetadataViews = process.env.MetadataViews_mainnet;
          var NFTCatalog = process.env.NFTCatalog_mainnet;
          var NFTRetrieval = process.env.NFTRetrieval_mainnet;
          var url = "https://access-mainnet-beta.onflow.org";
      }
      else
      {
          var MetadataViews =process.env.MetadataViews_testnet;
          var NFTCatalog =process.env.NFTCatalog_testnet;
          var NFTRetrieval = process.env.NFTRetrieval_testnet;
          var url = "https://access-testnet.onflow.org";
      }

      fcl.config().put("accessNode.api", url);

      console.log(ad);
    try {

        const response = await fcl.query({
            cadence: `
import MetadataViews from ${MetadataViews}
import NFTCatalog from ${NFTCatalog}
import NFTRetrieval from ${NFTRetrieval}

pub struct NFT {
    pub let id: UInt64
    pub let name: String
    pub let description: String
    pub let thumbnail: String
    pub let externalURL: String
    pub let collectionStoragePath: StoragePath
    pub let collectionPublicPath: PublicPath
    pub let collectionPrivatePath: PrivatePath
    pub let publicLinkedType: Type
    pub let privateLinkedType: Type
    pub let collectionName: String
    pub let collectionDescription: String
    pub let collectionSquareImage: String
    pub let collectionBannerImage: String
    pub let collectionExternalURL: String
    pub let royalties: [MetadataViews.Royalty]

    init(
        id: UInt64,
        name: String,
        description: String,
        thumbnail: String,
        externalURL: String,
        collectionStoragePath: StoragePath,
        collectionPublicPath: PublicPath,
        collectionPrivatePath: PrivatePath,
        publicLinkedType: Type,
        privateLinkedType: Type,
        collectionName: String,
        collectionDescription: String,
        collectionSquareImage: String,
        collectionBannerImage: String,
        collectionExternalURL: String,
        royalties: [MetadataViews.Royalty]
    ) {
        self.id = id
        self.name = name
        self.description = description
        self.thumbnail = thumbnail
        self.externalURL = externalURL
        self.collectionStoragePath = collectionStoragePath
        self.collectionPublicPath = collectionPublicPath
        self.collectionPrivatePath = collectionPrivatePath
        self.publicLinkedType = publicLinkedType
        self.privateLinkedType = privateLinkedType
        self.collectionName = collectionName
        self.collectionDescription = collectionDescription
        self.collectionSquareImage = collectionSquareImage
        self.collectionBannerImage = collectionBannerImage
        self.collectionExternalURL = collectionExternalURL
        self.royalties = royalties
    }
}

pub fun main(ownerAddress: Address): {String: [NFT]} {
    let account = getAuthAccount(ownerAddress)
    let items: [MetadataViews.NFTView] = []
    let data: {String: [NFT]} = {}

    NFTCatalog.forEachCatalogKey(fun (collectionIdentifier: String):Bool {
        let value = NFTCatalog.getCatalogEntry(collectionIdentifier: collectionIdentifier)!
        let keyHash = String.encodeHex(HashAlgorithm.SHA3_256.hash(collectionIdentifier.utf8))
        let tempPathStr = "catalog".concat(keyHash)
        let tempPublicPath = PublicPath(identifier: tempPathStr)!

        account.link<&{MetadataViews.ResolverCollection}>(
            tempPublicPath,
            target: value.collectionData.storagePath
        )

        let collectionCap = account.getCapability<&AnyResource{MetadataViews.ResolverCollection}>(tempPublicPath)

        if !collectionCap.check() {
            return true
        }

        let views = NFTRetrieval.getNFTViewsFromCap(collectionIdentifier: collectionIdentifier, collectionCap: collectionCap)
        let items: [NFT] = []

        for view in views {
            let displayView = view.display
            let externalURLView = view.externalURL
            let collectionDataView = view.collectionData
            let collectionDisplayView = view.collectionDisplay
            let royaltyView = view.royalties

            if (displayView == nil || externalURLView == nil || collectionDataView == nil || collectionDisplayView == nil || royaltyView == nil) {
                // Bad NFT. Skipping....
                return true
            }

            items.append(
                NFT(
                    id: view.id,
                    name: displayView!.name,
                    description: displayView!.description,
                    thumbnail: displayView!.thumbnail.uri(),
                    externalURL: externalURLView!.url,
                    collectionStoragePath: collectionDataView!.storagePath,
                    collectionPublicPath: collectionDataView!.publicPath,
                    collectionPrivatePath: collectionDataView!.providerPath,
                    publicLinkedType: collectionDataView!.publicLinkedType,
                    privateLinkedType: collectionDataView!.providerLinkedType,
                    collectionName: collectionDisplayView!.name,
                    collectionDescription: collectionDisplayView!.description,
                    collectionSquareImage: collectionDisplayView!.squareImage.file.uri(),
                    collectionBannerImage: collectionDisplayView!.bannerImage.file.uri(),
                    collectionExternalURL: collectionDisplayView!.externalURL.url,
                    royalties: royaltyView!.getRoyalties()
                )
            )
        }

        data[collectionIdentifier] = items
        return true
    })

    return data
}
  `,
            //@ts-ignore
            args: (arg, t) => [arg(Address, t.Address)],
        });
        return response;
    }
    catch (error) {
        return error;
    }
  }

Get NFT by Token id

  async getNftById(account_id : String  , contractAddress: string,  collectionPublicPath : string,id: number, chain: string) {
      if (chain === "mainnet") {
          var MetadataViews = process.env.MetadataViews_mainnet;
          var url = "https://access-mainnet-beta.onflow.org";
      }
      else
      {
          var MetadataViews =process.env.MetadataViews_testnet;
          var url = "https://access-testnet.onflow.org";
      }

      fcl.config().put("accessNode.api", url);

    const ad = id;

    try {
        const response = await fcl.query({
            cadence: `
        
import MetadataViews from ${MetadataViews}

pub struct NFTView {
          pub let id: UInt64
          pub let name: String
          pub let description: String
          pub let externalURL: String
          pub let thumbnail : String
        
          init(
              id: UInt64,
              name: String,
              description: String,
              externalURL: String,
              thumbnail : String
              
          ) {
              self.id = id
              self.name = name
              self.description = description
              self.externalURL = externalURL
              self.thumbnail = thumbnail
          }
        }
/// This script gets all the view-based metadata associated with the specified NFT
/// and returns it as a single struct

pub fun main(address: Address, id: UInt64) : NFTView {
    let account = getAccount(address)

    
    
 let collection = account
              .getCapability(${collectionPublicPath})
              .borrow<&{MetadataViews.ResolverCollection}>()
              ?? panic("Could not borrow a reference to the collection")
        
          let viewResolver = collection.borrowViewResolver(id: id)!
        
          let nftView = MetadataViews.getNFTView(id: id, viewResolver : viewResolver)
        
          let collectionSocials: {String: String} = {}
          for key in nftView.collectionDisplay!.socials.keys {
              collectionSocials[key] = nftView.collectionDisplay!.socials[key]!.url
          }

            

 return NFTView(
              id: nftView.id,
              name: nftView.display!.name,
              description: nftView.display!.description,
              externalURL: nftView.externalURL!.url,
              thumbnail :  nftView.display!.thumbnail.uri()
          )
   
}
 
     `,
            //@ts-ignore
            args: (arg, t) => [
                arg(account_id, t.Address),
                arg(ad, t.UInt64)
            ],

        });
        return response;
    }catch (error) {
        return error;
    }

  }

Get NFTs in Collection

  async getNftsByAddressInCollection(Address: string ,collectionPath : string ,chain: string) {

      if (chain === "mainnet") {
          var MetadataViews = process.env.MetadataViews_mainnet;
          var url = "https://access-mainnet-beta.onflow.org";
      }
      else
      {
          var MetadataViews =process.env.MetadataViews_testnet;
          var url = "https://access-testnet.onflow.org";
      }

      fcl.config().put("accessNode.api", url);



    try {
        const response = await fcl.query({
            cadence: `

import MetadataViews from ${MetadataViews}

/// This script gets all the view-based metadata associated with the specified NFT
/// and returns it as a single struct

pub fun main(address: Address): [{String: AnyStruct}] {
    let account = getAccount(address)

    let collection = account
        .getCapability(${collectionPath})
        .borrow<&{MetadataViews.ResolverCollection}>()
        ?? panic("Could not borrow a reference to the collection")

    let nft = collection.getIDs()
       var nfts: [{String: AnyStruct}] = []
    for id in nft {
       
       let nft = collection.borrowViewResolver(id: id)

    // Get the basic display information for this NFT
         let display = MetadataViews.getDisplay(nft)!

        let identifier = nft.getType().identifier
        let traits = MetadataViews.getTraits(nft)!
        
        let externalURL = MetadataViews.getExternalURL(nft)!.url

        
        

        
      let nftData = {
        "id": UInt64(id), 
        
         "name": display.name,
         "description": display.description, 
         "thumbnail": display.thumbnail.uri(),
         "identifier": identifier,
         "traits": traits,
         "externalURL": externalURL
            
       
          
      }
        nfts.append(nftData)
    }
  
    

    return nfts
}
 
  `,
            //@ts-ignore
            args: (arg, t) => [arg(Address, t.Address)],
        });
        return response;
    }catch (error) {
        return error;
    }
  }
PreviousCadence ScriptsNextQuerying NFT information Controller

Last updated 2 years ago

Was this helpful?