From 757e962ac2f03318bb004b091f8773b8efc7e990 Mon Sep 17 00:00:00 2001 From: mfbz Date: Wed, 2 Apr 2025 17:22:53 +0200 Subject: [PATCH 1/2] Added fcl default configurations section (#1201) --- docs/tools/clients/fcl-js/api.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/tools/clients/fcl-js/api.md b/docs/tools/clients/fcl-js/api.md index 4784f78bd1..a635d5b56d 100644 --- a/docs/tools/clients/fcl-js/api.md +++ b/docs/tools/clients/fcl-js/api.md @@ -35,6 +35,22 @@ fcl.config({ }); ``` +### Using Default Configurations + +To simplify setup across networks, FCL provides built-in configuration presets for the most common environments. These include: `flowMainnet`, `flowTestnet` and `flowEmulator`. + +Each preset contains the appropriate values for connecting to its corresponding network. To use one, just spread it into your fcl.config() call: + +```typescript +import {flowTestnet} from "@onflow/fcl" + +fcl.config({ + ...flowTestnet +}) +``` + +You can view the full preset definitions [here](https://github.com/onflow/fcl-js/blob/master/packages/sdk/src/constants.ts). + ### Getting Configuration Values The `config` instance has an **asynchronous** `get` method. You can also pass it a fallback value. From 91ad99896d88850c1d7621c6eba5503f94ac15ef Mon Sep 17 00:00:00 2001 From: mfbz Date: Thu, 3 Apr 2025 15:39:05 +0200 Subject: [PATCH 2/2] Updated more docs with default fcl config usage --- docs/build/getting-started/fcl-quickstart.md | 14 +++------ docs/tools/clients/fcl-js/api.md | 6 ++-- docs/tools/clients/fcl-js/configure-fcl.md | 16 ++++++++++ docs/tools/clients/fcl-js/discovery.md | 32 ++++++++++---------- 4 files changed, 39 insertions(+), 29 deletions(-) diff --git a/docs/build/getting-started/fcl-quickstart.md b/docs/build/getting-started/fcl-quickstart.md index 66eab85aa6..21a457b381 100644 --- a/docs/build/getting-started/fcl-quickstart.md +++ b/docs/build/getting-started/fcl-quickstart.md @@ -160,13 +160,11 @@ import * as fcl from "@onflow/fcl"; // FCL Configuration fcl.config({ - "flow.network": "local", - "accessNode.api": "http://localhost:8888", // Flow Emulator - "discovery.wallet": "http://localhost:8701/fcl/authn", // Local Wallet Discovery + ...fcl.flowEmulator }); ``` -This configuration code sets up FCL to work with the local Flow emulator and Dev Wallet. The `flow.network` and `accessNode.api` properties point to the local emulator, while `discovery.wallet` points to the local Dev Wallet for authentication. +This configuration code sets up FCL to work with the local Flow emulator and Dev Wallet. The `flowEmulator` object provides a default FCL configuration that simplifies development by automatically setting the necessary parameters. You can learn more about default configurations [here](../../tools/clients/fcl-js/api.md#using-default-configurations). For more information on Discovery configurations, refer to the [Wallet Discovery Guide](../../tools/clients/fcl-js/discovery.md). @@ -186,9 +184,7 @@ import * as fcl from "@onflow/fcl"; // FCL Configuration fcl.config({ - "flow.network": "local", - "accessNode.api": "http://localhost:8888", - "discovery.wallet": "http://localhost:8701/fcl/authn", // Local Dev Wallet + ...fcl.flowEmulator }); export default function Home() { @@ -400,9 +396,7 @@ import * as fcl from "@onflow/fcl"; // FCL Configuration fcl.config({ - "flow.network": "local", - "accessNode.api": "http://localhost:8888", - "discovery.wallet": "http://localhost:8701/fcl/authn", // Local Dev Wallet + ...fcl.flowEmulator }); export default function Home() { diff --git a/docs/tools/clients/fcl-js/api.md b/docs/tools/clients/fcl-js/api.md index a635d5b56d..b53f1bfa92 100644 --- a/docs/tools/clients/fcl-js/api.md +++ b/docs/tools/clients/fcl-js/api.md @@ -41,11 +41,11 @@ To simplify setup across networks, FCL provides built-in configuration presets f Each preset contains the appropriate values for connecting to its corresponding network. To use one, just spread it into your fcl.config() call: -```typescript -import {flowTestnet} from "@onflow/fcl" +```javascript +import * as fcl from '@onflow/fcl'; fcl.config({ - ...flowTestnet + ...fcl.flowTestnet }) ``` diff --git a/docs/tools/clients/fcl-js/configure-fcl.md b/docs/tools/clients/fcl-js/configure-fcl.md index 033c057853..64d000e709 100644 --- a/docs/tools/clients/fcl-js/configure-fcl.md +++ b/docs/tools/clients/fcl-js/configure-fcl.md @@ -20,6 +20,22 @@ fcl .put('baz', 'buz'); // configures "baz" to be "buz" ``` +## Using Default Configurations + +To simplify setup across networks, FCL provides built-in configuration presets for the most common environments. These include: `flowMainnet`, `flowTestnet` and `flowEmulator`. + +Each preset contains the appropriate values for connecting to its corresponding network. To use one, just spread it into your fcl.config() call: + +```javascript +import * as fcl from '@onflow/fcl'; + +fcl.config({ + ...fcl.flowTestnet +}) +``` + +You can view the full preset definitions [here](https://github.com/onflow/fcl-js/blob/master/packages/sdk/src/constants.ts). + ## 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. diff --git a/docs/tools/clients/fcl-js/discovery.md b/docs/tools/clients/fcl-js/discovery.md index 59e993b268..bd93e9474c 100644 --- a/docs/tools/clients/fcl-js/discovery.md +++ b/docs/tools/clients/fcl-js/discovery.md @@ -17,19 +17,18 @@ When authenticating via FCL using Discovery UI, a user is shown a list of servic ![FCL Default Discovery UI](./images/discovery.png) -This method is the simplest way to integrate Discovery and its wallets and services into your app. All you have to do is configure `discovery.wallet` with the host endpoint for testnet or mainnet. +This method is the simplest way to integrate Discovery and its wallets and services into your app. Just use the default configuration that matches the network you're working with. Available options include `flowMainnet`, `flowTestnet` and `flowEmulator`. > **Note**: Opt-in wallets, like Ledger and Dapper Wallet, require you to explicitly state you'd like to use them. For more information on including opt-in wallets, [see these docs](./api.md#more-configuration). > > A [Dapper Wallet](https://meetdapper.com/developers) developer account is required. To enable Dapper Wallet inside FCL, you need to [follow this guide](https://docs.meetdapper.com/quickstart). ```javascript -import { config } from '@onflow/fcl'; +import * as fcl from '@onflow/fcl'; -config({ - 'accessNode.api': 'https://rest-testnet.onflow.org', - 'discovery.wallet': 'https://fcl-discovery.onflow.org/testnet/authn', -}); +fcl.config({ + ...fcl.flowTestnet +}) ``` Any time you call `fcl.authenticate` the user will be presented with that screen. @@ -43,9 +42,10 @@ Starting in version 0.0.79-alpha.4, dapps now have the ability to display app a All you have to do is set `app.detail.icon` and `app.detail.title` like this: ```javascript -import { config } from '@onflow/fcl'; +import * as fcl from '@onflow/fcl'; -config({ +fcl.config({ + ...fcl.flowTestnet, 'app.detail.icon': 'https://placekitten.com/g/200/200', 'app.detail.title': 'Kitten Dapp', }); @@ -60,12 +60,11 @@ If you want more control over your authentication UI, the Discovery API is also Setup still requires configuration of the Discovery endpoint, but when using the API it is set via `discovery.authn.endpoint` as shown below. ```javascript -import { config } from '@onflow/fcl'; +import * as fcl from '@onflow/fcl'; -config({ - 'accessNode.api': 'https://rest-testnet.onflow.org', - 'discovery.authn.endpoint': - 'https://fcl-discovery.onflow.org/api/testnet/authn', +fcl.config({ + ...fcl.flowTestnet, + 'discovery.authn.endpoint': 'https://fcl-discovery.onflow.org/api/testnet/authn', }); ``` @@ -166,11 +165,11 @@ Opt-in wallets are those that don't have support for authentication, authorizati To include opt-in wallets from FCL: -``` +```javascript import * as fcl from "@onflow/fcl" fcl.config({ - "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn", + ...fcl.flowTestnet, "discovery.authn.endpoint": "https://fcl-discovery.onflow.org/api/testnet/authn", "discovery.authn.include": ["0x123"] // Service account address }) @@ -194,8 +193,9 @@ To exclude wallets from FCL Discovery, you can use the `discovery.authn.exclude` ```javascript import * as fcl from '@onflow/fcl'; + fcl.config({ - 'discovery.wallet': 'https://fcl-discovery.onflow.org/testnet/authn', + ...fcl.flowTestnet, 'discovery.authn.endpoint': 'https://fcl-discovery.onflow.org/api/testnet/authn', 'discovery.authn.exclude': ['0x123', '0x456'], // Service account addresses to exclude