How to Configure FCL
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.
_10import * as fcl from "@onflow/fcl"_10_10fcl.config() // returns the config instance_10 .put("foo", "bar") // configures "foo" to be "bar"_10 .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.
_18import * as fcl from "@onflow/fcl"_18_18fcl.config()_18 .put("foo", "bar")_18 .put("woot", 5)_18 .put("rawr", 7)_18_18const FALLBACK = 1_18_18async function addStuff () {_18 var woot = await fcl.config().get("woot", FALLBACK) // will be 5 -- set in the config before_18 var rawr = await fcl.config().get("rawr", FALLBACK) // will be 7 -- set in the config before_18 var hmmm = await fcl.config().get("hmmm", FALLBACK) // will be 1 -- uses fallback because this isnt in the config_18_18 return woot + rawr + hmmm_18}_18_18addStuff().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/fcl@0.0.68
) Your applications title, can be requested by wallets and other services.app.detail.icon
- (INTRODUCED@onflow/fcl@0.0.68
) Url for your applications icon, can be requested by wallets and other services.challenge.handshake
-- (DEPRECATED@onflow/fcl@0.0.68
) Points FCL at the Wallet or Wallet Discovery mechanism.discovery.wallet
-- (INTRODUCED@onflow/fcl@0.0.68
) 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/fcl@1.0.0
) Used in conjunction with stored interactions. Possible values:local
,testnet
,mainnet
fcl.limit
-- Specifies fallback compute limit if not provided in transaction. Provided as integer.flow.network
(recommended) -- (INTRODUCED@onflow/fcl@1.0.0
) Used in conjunction with stored interactions and provides FCLCryptoContract address fortestnet
andmainnet
. Possible values:local
,testnet
,mainnet
.service.OpenID.scopes
- (INTRODUCED@onflow/fcl@0.0.68
) Open ID Connect claims for Wallets and OpenID services.
Using Contracts in Scripts and Transactions​
Address Replacement​
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.
_24import * as fcl from "@onflow/fcl"_24_24fcl.config()_24 .put("0xFungibleToken", "0xf233dcee88fe0abe")_24_24async function myScript () {_24 return fcl.send([_24 fcl.script`_24 import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration_24_24 pub fun main() { /* Rest of the script goes here */ }_24 `_24 ]).then(fcl.decode)_24}_24_24async function myTransaction () {_24 return fcl.send([_24 fcl.transaction`_24 import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration_24_24 transaction { /* Rest of the transaction goes here */ }_24 `_24 ]).then(fcl.decode)_24}
Example​
_10import * as fcl from "@onflow/fcl"_10_10fcl.config()_10 .put("flow.network", "testnet")_10 .put("accessNode.api", "https://rest-testnet.onflow.org")_10 .put("discovery.wallet", "https://fcl-discovery.onflow.org/testnet/authn")_10 .put("app.detail.title", "Test Harness")_10 .put("app.detail.icon", "https://i.imgur.com/r23Zhvu.png")_10 .put("0xFlowToken", "0x7e60df042a9c0868")
Using Flow.json​
A simpler way to import contracts in scripts and transactions is to use the config.load
method to ingest your contracts from your flow.json
file. This keeps the import syntax unified across tools and lets FCL figure out which address to use for what network based on the network provided in config. To use config.load
you must first import your flow.json
file and then pass it to config.load
as a parameter.
_10import { config } from '@onflow/fcl'_10import flowJSON from '../flow.json'_10_10config({_10 'flow.network': 'testnet',_10 'accessNode.api': 'https://rest-testnet.onflow.org',_10 'discovery.wallet': `https://fcl-discovery.onflow.org/testnet/authn`,_10}).load({ flowJSON })
Let's say your flow.json
file looks like this:
_10{_10 "contracts": {_10 "HelloWorld": "cadence/contracts/HelloWorld.cdc"_10 }_10}
Then in your scripts and transactions, all you have to do is:
_10import "HelloWorld"
FCL will automatically replace the contract name with the address for the network you are using.
Note: never put private keys in your
flow.json
. You should use the key/location syntax to separate your keys into a separate git ignored file.