Updated: 2023/3/27 byjustinbarry

47 min read

Flow Client Library (FCL) API Reference

Configuration

FCL has a mechanism that lets you configure various aspects of FCL. When you move from one instance of the Flow Blockchain to another (Local Emulator to Testnet to Mainnet) the only thing you should need to change for your FCL implementation is your configuration.

Setting Configuration Values

Values only need to be set once. We recommend doing this once and as early in the life cycle as possible. To set a configuration value, the put method on the config instance needs to be called, the put method returns the config instance so they can be chained.

Alternatively, you can set the config by passing a JSON object directly.

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

3
fcl
4
  .config() // returns the config instance
5
  .put("foo", "bar") // configures "foo" to be "bar"
6
  .put("baz", "buz"); // configures "baz" to be "buz"
7

8
// OR
9

10
fcl.config({
11
  foo: "bar",
12
  baz: "buz",
13
});

Getting Configuration Values

The config instance has an asynchronous get method. You can also pass it a fallback value.

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

3
fcl.config().put("foo", "bar").put("woot", 5).put("rawr", 7);
4

5
const FALLBACK = 1;
6

7
async function addStuff() {
8
  var woot = await fcl.config().get("woot", FALLBACK); // will be 5 -- set in the config before
9
  var rawr = await fcl.config().get("rawr", FALLBACK); // will be 7 -- set in the config before
10
  var hmmm = await fcl.config().get("hmmm", FALLBACK); // will be 1 -- uses fallback because this isnt in the config
11

12
  return woot + rawr + hmmm;
13
}
14

15
addStuff().then((d) => console.log(d)); // 13 (5 + 7 + 1)

Common Configuration Keys

Address replacement in scripts and transactions

Configuration keys that start with 0x will be used to find-and-replace their values in Cadence scripts and transactions input to FCL. Typically this is used to represent account addresses. Account addresses for the same contract will be different depending on the Flow network you're interacting with (eg. Testnet, Mainnet). This allows you to write your script or transaction once and not have to update code when you point your application at a different Flow network.

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

3
fcl
4
  .config()
5
  .put("accessNode.api", "https://rest-testnet.onflow.org")
6
  .put("0xFlowToken", "0x7e60df042a9c0868");
7

8
async function myScript() {
9
  return fcl.query({
10
    cadence: `
11
        import FlowToken from 0xFlowToken // will be replaced with 0xf233dcee88fe0abe because of the configuration
12

13
        pub fun main(): UFix64 { 
14
          return FlowToken.totalSupply  // arbitrary script that can access FlowToken interface
15
        }
16
      `,
17
  });
18
}

Example

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

3
fcl
4
  .config()
5
  .put("flow.network", "testnet")
6
  .put("accessNode.api", "https://rest-testnet.onflow.org")
7
  .put("discovery.wallet", "https://fcl-discovery.onflow.org/testnet/authn")
8
  .put("app.detail.title", "Test Harness")
9
  .put("app.detail.icon", "https://i.imgur.com/r23Zhvu.png")
10
  .put("0xFlowToken", "0x7e60df042a9c0868");

Wallet Interactions

These methods allows dapps to interact with FCL compatible wallets in order to authenticate the user and authorize transactions on their behalf.

⚠️These methods are async.

Methods

authenticate

⚠️This method can only be used in web browsers.

Calling this method will authenticate the current user via any wallet that supports FCL. Once called, FCL will initiate communication with the configured discovery.wallet endpoint which lets the user select a wallet to authenticate with. Once the wallet provider has authenticated the user, FCL will set the values on the current user object for future use and authorization.

Note

⚠️discovery.wallet value must be set in the configuration before calling this method. See FCL Configuration.

📣 The default discovery endpoint will open an iframe overlay to let the user choose a supported wallet.

Usage

1
import * as fcl from "@onflow/fcl";
2
fcl
3
  .config()
4
  .put("accessNode.api", "https://rest-testnet.onflow.org")
5
  .put("discovery.wallet", "https://fcl-discovery.onflow.org/testnet/authn");
6
// anywhere on the page
7
fcl.authenticate();

Note

⚠️ authenticate can also take a service returned from discovery with fcl.authenticate({ service }).

Examples

• Press Login: Explore Kitty Items

unauthenticate

⚠️This method can only be used in web browsers.

Logs out the current user and sets the values on the current user object to null.

Note

⚠️The current user must be authenticated first.

Usage

1
import * as fcl from "@onflow/fcl";
2
fcl.config().put("accessNode.api", "https://rest-testnet.onflow.org");
3
// first authenticate to set current user
4
fcl.authenticate();
5
// ... somewhere else & sometime later
6
fcl.unauthenticate();
7
// fcl.currentUser.loggedIn === null

Examples

• React Hook to manage FCL authentication: Kitty-items

reauthenticate

⚠️This method can only be used in web browsers.

A convenience method that calls fcl.unauthenticate() and then fcl.authenticate() for the current user.

Note

⚠️The current user must be authenticated first.

Usage

1
import * as fcl from "@onflow/fcl";
2
// first authenticate to set current user
3
fcl.authenticate();
4
// ... somewhere else & sometime later
5
fcl.reauthenticate();
6
// logs out user and opens up login/sign-up flow

Examples

• React Hook to manage FCL authentication: Kitty-items

signUp

⚠️This method can only be used in web browsers.

A convenience method that calls and is equivalent to fcl.authenticate().

logIn

⚠️This method can only be used in web browsers.

A convenience method that calls and is equivalent to fcl.authenticate().

authz

A convenience method that produces the needed authorization details for the current user to submit transactions to Flow. It defines a signing function that connects to a user's wallet provider to produce signatures to submit transactions.

📣 You can replace this function with your own authorization function if needed.

Returns

Usage

Note: The default values for proposer, payer, and authorizations are already fcl.authz so there is no need to include these parameters, it is shown only for example purposes. See more on signing roles.

1
import * as fcl from "@onflow/fcl";
2
// login somewhere before
3
fcl.authenticate();
4
// once logged in authz will produce values
5
console.log(fcl.authz);
6
// prints {addr, signingFunction, keyId, sequenceNum} from the current authenticated user.
7

8
const txId = await fcl.mutate({
9
  cadence: `
10
    import Profile from 0xba1132bc08f82fe2
11
    
12
    transaction(name: String) {
13
      prepare(account: AuthAccount) {
14
        account.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)
15
      }
16
    }
17
  `,
18
  args: (arg, t) => [arg("myName", t.String)],
19
  proposer: fcl.authz, // optional - default is fcl.authz
20
  payer: fcl.authz, // optional - default is fcl.authz
21
  authorizations: [fcl.authz], // optional - default is [fcl.authz]
22
});

Current User

Holds the current user, if set, and offers a set of functions to manage the authentication and authorization of the user.

⚠️The following methods can only be used in web browsers.

Methods

currentUser.subscribe

The callback passed to subscribe will be called when the user authenticates and un-authenticates, making it easy to update the UI accordingly.

Arguments

Usage

1
import React, { useState, useEffect } from "react";
2
import * as fcl from "@onflow/fcl";
3

4
export function AuthCluster() {
5
  const [user, setUser] = useState({ loggedIn: null });
6
  useEffect(() => fcl.currentUser.subscribe(setUser), []); // sets the callback for FCL to use
7

8
  if (user.loggedIn) {
9
    return (
10
      <div>
11
        <span>{user?.addr ?? "No Address"}</span>
12
        <button onClick={fcl.unauthenticate}>Log Out</button> {/* once logged out in setUser(user) will be called */}
13
      </div>
14
    );
15
  } else {
16
    return (
17
      <div>
18
        <button onClick={fcl.logIn}>Log In</button>{" "}
19
        {/* once logged in setUser(user) will be called */}
20
        <button onClick={fcl.signUp}>Sign Up</button> {/* once signed up, setUser(user) will be called */}
21
      </div>
22
    );
23
  }
24
}

currentUser.snapshot

Returns the current user object. This is the same object that is set and available on fcl.currentUser.subscribe(callback).

Usage

1
// returns the current user object
2
const user = fcl.currentUser.snapshot();
3

4
// subscribes to the current user object and logs to console on changes
5
fcl.currentUser.subscribe(console.log);

currentUser.authenticate

Equivalent to fcl.authenticate.

currentUser.unauthenticate

Equivalent to fcl.unauthenticate.

currentUser.authorization

Equivalent to fcl.authz

currentUser.signUserMessage

A method to use allowing the user to personally sign data via FCL Compatible Wallets/Services.

⚠️ This method requires the current user's wallet to support a signing service endpoint. Currently, only Blocto is compatible with this feature by default.

Arguments

Returns

Usage

1
import * as fcl from "@onflow/fcl"
2

3
export const signMessage = async () => {
4
  const MSG = Buffer.from("FOO").toString("hex")
5
  try {
6
    return await currentUser.signUserMessage(MSG)
7
  } catch (error) {
8
    console.log(error)
9
  }
10
}

Discovery

discovery

Discovery abstracts away code so that developers don't have to deal with the discovery of Flow compatible wallets, integration, or authentication. Using discovery from FCL allows dapps to list and authenticate with wallets while having full control over the UI. Common use cases for this are login or registration pages.

(Alternatively, if you don't need control over your UI you can continue to use the discovery.wallet config value documented in the Quickstart for the simplest configuration.)

⚠️The following methods can only be used in web browsers.

Note

⚠️discovery.authn.endpoint value must be set in the configuration before calling this method. See FCL Configuration.

Suggested Configuration

If the Discovery endpoint is set in config, then you can iterate through authn services and pass the chosen service to authenticate to authenticate a user.

Usage

1
import "./config"
2
import { useState, useEffect } from "react"
3
import * as fcl from "@onflow/fcl"
4

5
function Component() {
6
  const [wallets, setWallets] = useState([])
7
  useEffect(() => fcl.discovery.authn.subscribe(res => setWallets(res.results)), [])
8

9
  return (
10
    <div>
11
      {wallets.map((wallet) => (
12
        <button
13
          key={wallet.provider.address}
14
          onClick={() => fcl.authenticate({ service: wallet })}
15
        >
16
          Login with {wallet.provider.name}
17
        </button>
18
      ))}
19
    </div>
20
  )
21
}

authn

More Configuration

By default, limited functionality services or services that require developer registration, like Ledger or Dapper Wallet, require apps to opt-in in order to display to users. To enable opt-in services in an application, use the discovery.authn.include property in your configuration with a value of an array of services you'd like your app to opt-in to displaying for users.

1
import { config } from "@onflow/fcl"
2

3
config({
4
  "discovery.authn.endpoint": "https://fcl-discovery.onflow.org/api/testnet/authn", // Endpoint set to Testnet
5
  "discovery.authn.include": ["0x9d2e44203cb13051"] // Ledger wallet address on Testnet set to be included
6
})

Opt-In Wallet Addresses on Testnet and Mainnet

For more details on wallets, view the service list here.

discovery.authn.snapshot()

Return a list of authn services.

discovery.authn.subscribe(callback)

The callback sent to subscribe will be called with a list of authn services.

On-chain Interactions

📣 These methods can be used in browsers and NodeJS.

These methods allows dapps to interact directly with the Flow blockchain via a set of functions that currently use the Access Node API.

Methods

Query and Mutate Flow with Cadence

If you want to run arbitrary Cadence scripts on the blockchain, these methods offer a convenient way to do so without having to build, send, and decode interactions.

query

Allows you to submit scripts to query the blockchain.

Options

Pass in the following as a single object with the following keys.All keys are optional unless otherwise stated.

Returns

Usage

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

3
const result = await fcl.query({
4
  cadence: `
5
    pub fun main(a: Int, b: Int, addr: Address): Int {
6
      log(addr)
7
      return a + b
8
    }
9
  `,
10
  args: (arg, t) => [
11
    arg(7, t.Int), // a: Int
12
    arg(6, t.Int), // b: Int
13
    arg("0xba1132bc08f82fe2", t.Address), // addr: Address
14
  ],
15
});
16
console.log(result); // 13

Examples

• Additional Explanation

mutate

Allows you to submit transactions to the blockchain to potentially mutate the state.

⚠️When being used in the browser, fcl.mutate uses the built-in fcl.authz function to produce the authorization (signatures) for the current user. When calling this method from Node.js, you will need to supply your own custom authorization function.

Options

Pass in the following as a single object with the following keys. All keys are optional unless otherwise stated.

Returns

Usage

1
import * as fcl from "@onflow/fcl";
2
// login somewhere before
3
fcl.authenticate();
4

5
const txId = await fcl.mutate({
6
  cadence: `
7
    import Profile from 0xba1132bc08f82fe2
8
    
9
    transaction(name: String) {
10
      prepare(account: AuthAccount) {
11
        account.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)
12
      }
13
    }
14
  `,
15
  args: (arg, t) => [arg("myName", t.String)],
16
});

Examples

• Additional explanation
• Custom authorization function

verifyUserSignatures (Deprecated)

Use fcl.AppUtils.verifyUserSignatures

AppUtils

AppUtils.verifyUserSignatures

A method allowing applications to cryptographically verify a message was signed by a user's private key/s. This is typically used with the response from currentUser.signUserMessage.

Note

⚠️ fcl.config.flow.network or options override is required to use this api. See FCL Configuration.

Arguments

Returns

Usage

1
import * as fcl from "@onflow/fcl"
2

3
const isValid = await fcl.AppUtils.verifyUserSignatures(
4
  Buffer.from('FOO').toString("hex"),
5
  [{f_type: "CompositeSignature", f_vsn: "1.0.0", addr: "0x123", keyId: 0, signature: "abc123"}],
6
  {fclCryptoContract}
7
)

Examples

• fcl-next-harness

AppUtils.verifyAccountProof

A method allowing applications to cryptographically prove that a user controls an on-chain account. During user authentication, some FCL compatible wallets will choose to support the FCL account-proof service. If a wallet chooses to support this service, and the user approves the signing of message data, they will return account-proof data and a signature(s) that can be used to prove a user controls an on-chain account. See proving-authentication documentaion for more details.

⚠️ fcl.config.flow.network or options override is required to use this api. See FCL Configuration.

Arguments

Returns

Usage

1
import * as fcl from "@onflow/fcl"
2

3
const accountProofData = {
4
  address: "0x123",
5
  nonce: "F0123"
6
  signatures: [{f_type: "CompositeSignature", f_vsn: "1.0.0", addr: "0x123", keyId: 0, signature: "abc123"}],
7
}
8

9
const isValid = await fcl.AppUtils.verifyAccountProof(
10
  "AwesomeAppId",
11
  accountProofData,
12
  {fclCryptoContract}
13
)

Examples

• fcl-next-harness

Query and mutate the blockchain with Builders

In some cases, you may want to utilize pre-built interactions or build more complex interactions than what the fcl.query and fcl.mutate interface offer. To do this, FCL uses a pattern of building up an interaction with a combination of builders, resolving them, and sending them to the chain.

⚠️Recommendation: Unless you have a specific use case that require usage of these builders, you should be able to achieve most cases with fcl.query({...options} or fcl.mutate({...options})

send

Sends arbitrary scripts, transactions, and requests to Flow.

This method consumes an array of builders that are to be resolved and sent. The builders required to be included in the array depend on the interaction that is being built.

Note

⚠️Must be used in conjuction with fcl.decode(response) to get back correct keys and all values in JSON.

Arguments

Returns

Usage

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

3
// a script only needs to resolve the arguments to the script
4
const response = await fcl.send([fcl.script`${script}`, fcl.args(args)]);
5
// note: response values are encoded, call await fcl.decode(response) to get JSON
6

7
// a transaction requires multiple 'builders' that need to be resolved prior to being sent to the chain - such as setting the authorizations.
8
const response = await fcl.send([
9
  fcl.transaction`
10
    ${transaction}
11
    `,
12
  fcl.args(args),
13
  fcl.proposer(proposer),
14
  fcl.authorizations(authorizations),
15
  fcl.payer(payer),
16
  fcl.limit(9999),
17
]);
18
// note: response contains several values (Cad)

Examples

• Getting a user account
• Getting the latest block
• Sending a transaction

decode

Decodes the response from fcl.send() into the appropriate JSON representation of any values returned from Cadence code.

Note

📣 To define your own decoder, see tutorial.

Arguments

Returns

Usage

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

3
// simple script to add 2 numbers
4
const response = await fcl.send([
5
  fcl.script`
6
        pub fun main(int1: Int, int2: Int): Int {
7
            return int1 + int2
8
        }
9
    `,
10
  fcl.args([
11
    fcl.arg(1, fcl.t.Int),
12
    fcl.arg(2, fcl.t.Int)
13
  ]),
14
]);
15

16
const decoded = await fcl.decode(response);
17

18
assert(3 === decoded);
19
assert(typeof decoded === "number");

Examples

• Getting a user account
• Getting the latest block
• Sending a transaction

Builders

These methods fill out various portions of a transaction or script template in order to build, resolve, and send it to the blockchain. A valid populated template is referred to as an Interaction.

⚠️These methods must be used with fcl.send([...builders]).then(fcl.decode)

Query Builders

getAccount

A builder function that returns the interaction to get an account by address.

⚠️Consider using the pre-built interaction fcl.account(address) if you do not need to pair with any other builders.

Arguments

Returns after decoding

Usage

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

3
// somewhere in an async function
4
// fcl.account is the same as this function
5
const getAccount = async (address) => {
6
  const account = await fcl.send([fcl.getAccount(address)]).then(fcl.decode);
7
  return account;
8
};

getBlock

A builder function that returns the interaction to get the latest block.

📣 Use with fcl.atBlockId() and fcl.atBlockHeight() when building the interaction to get information for older blocks.

⚠️Consider using the pre-built interaction fcl.latestBlock(isSealed) if you do not need to pair with any other builders.

Arguments

Returns after decoding

Usage

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

3
const latestSealedBlock = await fcl
4
  .send([
5
    fcl.getBlock(true), // isSealed = true
6
  ])
7
  .then(fcl.decode);

atBlockHeight

A builder function that returns a partial interaction to a block at a specific height.

⚠️Use with other interactions like fcl.getBlock() to get a full interaction at the specified block height.

Arguments

Returns

Usage

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

3
await fcl.send([fcl.getBlock(), fcl.atBlockHeight(123)]).then(fcl.decode);

atBlockId

A builder function that returns a partial interaction to a block at a specific block ID.

⚠️Use with other interactions like fcl.getBlock() to get a full interaction at the specified block ID.

Arguments

Returns

Usage

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

3
await fcl.send([fcl.getBlock(), fcl.atBlockId("23232323232")]).then(fcl.decode);

getBlockHeader

A builder function that returns the interaction to get a block header.

📣 Use with fcl.atBlockId() and fcl.atBlockHeight() when building the interaction to get information for older blocks.

Returns after decoding

Usage

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

3
const latestBlockHeader = await fcl
4
  .send([fcl.getBlockHeader()])
5
  .then(fcl.decode);

getEventsAtBlockHeightRange

A builder function that returns all instances of a particular event (by name) within a height range.

⚠️The block range provided must be from the current spork.

⚠️The block range provided must be 250 blocks or lower per request.

Arguments

Returns after decoding

Usage

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

3
const events = await fcl
4
  .send([
5
    fcl.getEventsAtBlockHeightRange(
6
      "A.7e60df042a9c0868.FlowToken.TokensWithdrawn",
7
      35580624,
8
      35580624
9
    ),
10
  ])
11
  .then(fcl.decode);

getEventsAtBlockIds

A builder function that returns all instances of a particular event (by name) within a set of blocks, specified by block ids.

⚠️The block range provided must be from the current spork.

Arguments

Returns after decoding

Usage

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

3
const events = await fcl
4
  .send([
5
    fcl.getEventsAtBlockIds("A.7e60df042a9c0868.FlowToken.TokensWithdrawn", [
6
      "c4f239d49e96d1e5fbcf1f31027a6e582e8c03fcd9954177b7723fdb03d938c7",
7
      "5dbaa85922eb194a3dc463c946cc01c866f2ff2b88f3e59e21c0d8d00113273f",
8
    ]),
9
  ])
10
  .then(fcl.decode);

getCollection

A builder function that returns all a collection containing a list of transaction ids by its collection id.

⚠️The block range provided must be from the current spork. All events emitted during past sporks is current unavailable.

Arguments

Returns after decoding

Usage

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

3
const collection = await fcl
4
  .send([
5
    fcl.getCollection(
6
      "cccdb0c67d015dc7f6444e8f62a3244ed650215ed66b90603006c70c5ef1f6e5"
7
    ),
8
  ])
9
  .then(fcl.decode);

getTransactionStatus

A builder function that returns the status of transaction in the form of a TransactionStatusObject.

⚠️The transactionID provided must be from the current spork.

📣 Considering subscribing to the transaction from fcl.tx(id) instead of calling this method directly.

Arguments

Returns after decoding

Returns

Usage

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

3
const status = await fcl
4
  .send([
5
    fcl.getTransactionStatus(
6
      "9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3"
7
    ),
8
  ])
9
  .then(fcl.decode);

getTransaction

A builder function that returns a transaction object once decoded.

⚠️The transactionID provided must be from the current spork.

📣 Considering using fcl.tx(id).onceSealed() instead of calling this method directly.

Arguments

Returns after decoding

Returns

Usage

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

3
const tx = await fcl
4
  .send([
5
    fcl.getTransaction(
6
      "9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3"
7
    ),
8
  ])
9
  .then(fcl.decode);

getEvents (Deprecated)

Use fcl.getEventsAtBlockHeightRange or fcl.getEventsAtBlockIds.

getLatestBlock (Deprecated)

Use fcl.getBlock.

getBlockById (Deprecated)

Use fcl.getBlock and fcl.atBlockId.

getBlockByHeight (Deprecated)

Use fcl.getBlock and fcl.atBlockHeight.

Utility Builders

These builders are used to compose interactions with other builders such as scripts and transactions.

⚠️Recommendation: Unless you have a specific use case that require usage of these builders, you should be able to achieve most cases with fcl.query({...options} or fcl.mutate({...options})

arg

A utility builder to be used with fcl.args[...] to create FCL supported arguments for interactions.

Arguments

Returns

Usage

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

3
await fcl
4
  .send([
5
    fcl.script`
6
      pub fun main(a: Int, b: Int): Int {
7
        return a + b
8
      }
9
    `,
10
    fcl.args([
11
      fcl.arg(5, fcl.t.Int), // a
12
      fcl.arg(4, fcl.t.Int), // b
13
    ]),
14
  ])
15
  .then(fcl.decode);

args

A utility builder to be used with other builders to pass in arguments with a value and supported type.

Arguments

Returns

Usage

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

3
await fcl
4
  .send([
5
    fcl.script`
6
      pub fun main(a: Int, b: Int): Int {
7
        return a + b
8
      }
9
    `,
10
    fcl.args([
11
      fcl.arg(5, fcl.t.Int), // a
12
      fcl.arg(4, fcl.t.Int), // b
13
    ]),
14
  ])
15
  .then(fcl.decode); // 9

Template Builders

⚠️Recommended: The following functionality is simplified by fcl.query({...options} or fcl.mutate({...options}) and is reccomended to use over the functions below.

script

A template builder to use a Cadence script for an interaction.

📣 Use with fcl.args(...) to pass in arguments dynamically.

Arguments

Returns

Usage

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

3
const code = `
4
  pub fun main(): Int {
5
    return 5 + 4
6
  }
7
`;
8
const answer = await fcl.send([fcl.script(code)]).then(fcl.decode);
9
console.log(answer); // 9

transaction

A template builder to use a Cadence transaction for an interaction.

⚠️Must be used with fcl.payer, fcl.proposer, fcl.authorizations to produce a valid interaction before sending to the chain.

📣 Use with fcl.args[...] to pass in arguments dynamically.

Arguments

Returns

Usage

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

3
const code = `
4
  pub fun main(): Int {
5
    return 5 + 4
6
  }
7
`;
8
const answer = await fcl.send([fcl.script(code)]).then(fcl.decode);
9
console.log(answer); // 9

Pre-built Interactions

These functions are abstracted short hand ways to skip the send and decode steps of sending an interaction to the chain. More pre-built interactions are coming soon.

account

A pre-built interaction that returns the details of an account from their public address.

Arguments

Returns

Usage

1
import * as fcl from "@onflow/fcl";
2
const account = await fcl.account("0x1d007d755706c469");

block

A pre-built interaction that returns the latest block (optionally sealed or not), by id, or by height.

Arguments

Returns

Usage

1
import * as fcl from "@onflow/fcl";
2
await fcl.block() // get latest finalized block
3
await fcl.block({sealed: true}) // get latest sealed block
4
await fcl.block({id: '0b1bdfa9ddaaf31d53c584f208313557d622d1fedee1586ffc38fb5400979faa'}) // get block by id
5
await fcl.block({height: 56481953}) // get block by height

latestBlock (Deprecated)

A pre-built interaction that returns the latest block (optionally sealed or not).

Arguments

Returns

Usage

1
import * as fcl from "@onflow/fcl";
2
const latestBlock = await fcl.latestBlock();

Transaction Status Utility

tx

A utility function that lets you set the transaction to get subsequent status updates (via polling) and the finalized result once available. ⚠️The poll rate is set at 2500ms and will update at that interval until transaction is sealed.

Arguments

Returns

Usage

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

3
const [txStatus, setTxStatus] = useState(null);
4
useEffect(() => fcl.tx(txId).subscribe(setTxStatus));

Examples

• React Effect to get the transaction status on submit
• Example usage in Kitty Items app

Event Polling Utility

events

A utility function that lets you set the transaction to get subsequent status updates (via polling) and the finalized result once available. ⚠️The poll rate is set at 10000ms and will update at that interval for getting new events.

Note: ⚠️fcl.eventPollRate value could be set to change the polling rate of all events subcribers, check FCL Configuration for guide.

Arguments

Returns

Usage

1
import * as fcl from "@onflow/fcl";
2
// in some react component
3
fcl.events(eventName).subscribe((event) => {
4
  console.log(event)
5
})

Examples

• Flow-view-source example

Types, Interfaces, and Definitions

Builders

Builders are modular functions that can be coupled together with fcl.send([...builders]) to create an Interaction. The builders needed to create an interaction depend on the script or transaction that is being sent.

Interaction

An interaction is an object containing the information to perform an action on chain.This object is populated through builders and converted into the approriate access node API call. See the interaction object here. A 'partial' interaction is an interaction object that does not have sufficient information to the intended on-chain action. Multiple partial interactions (through builders) can be coupled to create a complete interaction.

CurrentUserObject

AuthorizationObject

This type conforms to the interface required for FCL to authorize transaction on behalf o the current user.

SignableObject

An object that contains all the information needed for FCL to sign a message with the user's signature.

AccountObject

The JSON representation of an account on the Flow blockchain.

Address

ArgumentObject

An argument object created by fcl.arg(value,type)

ArgumentFunction

An function that takes the fcl.arg function and fcl types t and returns an array of fcl.arg(value,type).

(arg, t) => Array<Arg>

Returns

Authorization Function

An authorization function must produce the information of the user that is going to sign and a signing function to use the information to produce a signature.

⚠️This function is always async.

📣 By default FCL exposes fcl.authz that produces the authorization object for the current user (given they are signed in and only on the browser). Replace this with your own function that conforms to this interface to use it wherever an authorization object is needed.

Returns

Usage

1
const authorizationFunction = async (account) => {
2
    // authorization function need to return an account
3
    const { address, keys } = account
4
    const tempId = `${address}-${keys[process.env.minterAccountIndex]}`;
5
    const keyId = Number(KEY_ID);
6
    let signingFunction = async signable => {
7
      return {
8
        keyId,
9
        addr: fcl.withPrefix(address),
10
        signature: sign(process.env.FLOW_MINTER_PRIVATE_KEY, signable.message), // signing function, read below
11
      }
12
    }
13
    return {
14
    ...account,
15
    address,
16
    keyId,
17
    tempId,
18
    signingFunction,
19
  }