How to Configure FCL

Updated: 2022/8/31 by

3 min read

Configuration

FCL has a mechanism that lets you configure various aspects of FCL. The main idea here (from an FCL perspective) should be that 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 (once again from an FCL perspective) is your configuration.

Setting Configuration Values

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

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

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

Getting Configuration Values

The config instance has an asynchronous get method. You can also pass it a fallback value incase the configuration state does not include what you are wanting.

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

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

8
const FALLBACK = 1
9

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

15
  return woot + rawr + hmmm
16
}
17

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

Common Configuration Keys

accessNode.api -- Api URL for the Flow Blockchain Access Node you want to be communicating with.
app.detail.title - (INTRODUCED @onflow/[email protected]) Your applications title, can be requested by wallets and other services.
app.detail.icon - (INTRODUCED @onflow/[email protected]) Url for your applications icon, can be requested by wallets and other services.
challenge.handshake -- (DEPRECATED @onflow/[email protected]) Points FCL at the Wallet or Wallet Discovery mechanism.
discovery.wallet -- (INTRODUCED @onflow/[email protected]) Points FCL at the Wallet or Wallet Discovery mechanism.
discovery.wallet.method -- Describes which service strategy a wallet should use: IFRAME/RPC, POP/RPC, TAB/RPC, HTTP/POST, EXT/RPC
env -- (DEPRECATED @onflow/[email protected]) Used in conjunction with stored interactions. Possible values: local, canarynet, testnet, mainnet
fcl.limit -- Specifies fallback compute limit if not provided in transaction. Provided as integer.
flow.network (recommended) -- (INTRODUCED @onflow/[email protected]) Used in conjunction with stored interactions and provides FCLCryptoContract address for testnet and mainnet. Possible values: local, canarynet, testnet, mainnet.
service.OpenID.scopes - (INTRODUCED @onflow/[email protected]) Open ID Connect claims for Wallets and OpenID services.

Address replacement in scripts and transactions

Configuration keys that start with 0x will be replaced in FCL scripts and transactions, this allows you to write your script or transaction Cadence code once and not have to change it when you point your application at a difference instance of the Flow Blockchain.

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

3
fcl.config()
4
  .put("0xFungibleToken", "0xf233dcee88fe0abe")
5

6
async function myScript () {
7
  return fcl.send([
8
    fcl.script`
9
      import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration
10

11
      pub fun main() { /* Rest of the script goes here */ }
12
    `
13
  ]).then(fcl.decode)
14
}
15

16
async function myTransaction () {
17
  return fcl.send([
18
    fcl.transaction`
19
      import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration
20

21
      transaction { /* Rest of the transaction goes here */ }
22
    `
23
  ]).then(fcl.decode)
24
}

Example

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

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