Connect your dapp to users, their wallets, and Flow.

What is FCL?

The Flow Client Library (FCL) JS is a powerful package that serves as a bridge between user wallets and the Flow blockchain for your decentralized applications (dapps). Think of FCL as a universal remote control for all compatible wallets, allowing developers to operate seamlessly without needing to customize integrations for each wallet provider.

FCL allows dapps to support various wallet types effortlessly—users can hop onto your application without getting bogged down by wallet-specific setups.

Getting Started

Requirements

• Node version v12.0.0 or higher.

Setup and Installation

To get started, you’ll want to install the necessary package using either npm or yarn:

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

Using FCL for Dapps

Wallet Interactions

Onboard users seamlessly with wallet discovery and easy authentication. FCL supports various FCL-compatible wallets, allowing you to authenticate users without any hassle.

Here’s a quick way to authenticate users in your app:

import * as fcl from @onflow/fcl;

fcl.config({
  discovery: {
    wallet: "https://fcl-discovery.onflow.org/testnet/authn",
  },
});

fcl.authenticate();

When executed, this code is like flipping the switch on your universal remote—your app will automatically connect users to their wallets for authentication.

Interacting with Smart Contracts

FCL also allows your dapp to interact with smart contracts, making it easy to authorize transactions or check ownership:

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),    // First integer
    arg(6, t.Int),    // Second integer
    arg("0xba1132bc08f82fe2", t.Address), // Example address
  ],
});

console.log(result); // 13

In this instance, you’re ordering a coffee in a café. You specify your order, and the cashier (the Flow blockchain) prepares it just how you asked!

Mutate the Blockchain

For performing state changes on-chain, you can use the following snippet:

const txId = await fcl.mutate({
  cadence: `
    import Profile from 0xba1132bc08f82fe2

    transaction(name: String) {
      prepare(account: AuthAccount) {
        account.borrowProfile.Owner(from: Profile.privatePath)!.setName(name)
      }
    }
  `,
  args: (arg, t) => [arg(myName, t.String)],
});

Mutations are like submitting a support ticket at your workplace; you’re providing information to change something in the system.

Troubleshooting

• If you encounter issues during installation, ensure that your Node version meets the requirements.
• For problems related to wallet authentication, remember to check if you have a Dapper Wallet account set up, if required by your dapp.
• If you’re facing issues with undefined functions or variables, verify that you’re importing the FCL library correctly.
• In the event of unexpected errors, ensure all environment variables and configurations are set correctly.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Next Steps

You may want to explore further through the following resources:

• Flow App Quick Start
• Full API Reference
• Learn Cadence for smart contracts

Support

Should you encounter further issues, feel free to add an issue or connect on the Flow Discord channel.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.