• Stars
    star
    318
  • Rank 131,872 (Top 3 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 4 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

FCL (Flow Client Library) - The best tool for building JavaScript (browser & NodeJS) applications on Flow 🌊

FLOW-JS-SDK Continuous Integration lerna



FCL JS

Connect your dapp to users, their wallets and Flow.

Quickstart Β· Report Bug Β· Contribute

What is FCL?

The Flow Client Library (FCL) JS is a package used to interact with user wallets and the Flow blockchain. When using FCL for authentication, dapps are able to support all FCL-compatible wallets on Flow and their users without any custom integrations or changes needed to the dapp code.

It was created to make developing applications that connect to the Flow blockchain easy and secure. It defines a standardized set of communication patterns between wallets, applications, and users that is used to perform a wide variety of actions for your dapp. FCL also offers a full featured SDK and utilities to interact with the Flow blockchain.

While FCL itself is a concept and standard, FCL JS is the javascript implementation of FCL and can be used in both browser and server environments. All functionality for connecting and communicating with wallet providers is restricted to the browser. We also have FCL Swift implementation for iOS, see FCL Swift contributed by @lmcmz.


Getting Started

Requirements

  • Node version v12.0.0 or higher.

Build

npm i
npm run build

Installation

To use the FCL JS in your application, install using yarn or npm

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

Importing

ES6

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

Node.js

const fcl = require("@onflow/fcl");

FCL for Dapps

Wallet Interactions

  • Wallet Discovery and Sign-up/Login: Onboard users with ease. Never worry about supporting multiple wallets. Authenticate users with any FCL compatible wallet.
// in the browser
import * as fcl from "@onflow/fcl"

fcl.config({
  "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn", // Endpoint set to Testnet
})

fcl.authenticate()

FCL Default Discovery UI

Note: A Dapper Wallet developer account is required. To enable Dapper Wallet inside FCL, you need to follow this guide.

  • Interact with smart contracts: Authorize transactions via the user's chosen wallet
  • Prove ownership of a wallet address: Signing and verifying user signed data

Learn more about wallet interactions >

Blockchain Interactions

  • Query the chain: Send arbitrary Cadence scripts to the chain and receive back decoded values
import * as fcl from "@onflow/fcl";

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), // a: Int
    arg(6, t.Int), // b: Int
    arg("0xba1132bc08f82fe2", t.Address), // addr: Address
  ],
});
console.log(result); // 13
  • Mutate the chain: Send arbitrary transactions with your own signatures or via a user's wallet to perform state changes on chain.
import * as fcl from "@onflow/fcl";
// in the browser, FCL will automatically connect to the user's wallet to request signatures to run the transaction
const txId = await fcl.mutate({
  cadence: `
    import Profile from 0xba1132bc08f82fe2
    
    transaction(name: String) {
      prepare(account: AuthAccount) {
        account.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)
      }
    }
  `,
  args: (arg, t) => [arg("myName", t.String)],
});

Learn more about on-chain interactions >

Utilities

  • Get account details from any Flow address
  • Get the latest block
  • Transaction status polling
  • Event polling
  • Custom authorization functions

Learn more about utilities >

Typescript Support

FCL JS supports TypeScript. If you need to import specific types, you can do so via the @onflow/typedefs package.

import {CurrentUser} from "@onflow/typedefs"

const newUser: CurrentUser = { 
  addr: null,
  cid: null,
  expiresAt: null,
  f_type: 'User',
  f_vsn: '1.0.0',
  loggedIn: null,
  services: []
}

For all type definitions available, see this file

Next Steps

See the Flow App Quick Start.

See the full API Reference for all FCL functionality.

Learn Flow's smart contract language to build any script or transactions: Cadence.

Explore all of Flow docs and tools.


FCL for Wallet Providers

Wallet providers on Flow have the flexibility to build their user interactions and UI through a variety of ways:

  • Front channel communication via Iframe, pop-up, tab, or extension
  • Back channel communication via HTTP

FCL is agnostic to the communication channel and be configured to create both custodial and non-custodial wallets. This enables users to interact with wallet providers without needing to download an app or extension.

The communication channels involve responding to a set of pre-defined FCL messages to deliver the requested information to the dapp. Implementing a FCL compatible wallet on Flow is as simple as filling in the responses with the appropriate data when FCL requests them. If using any of the front-channel communication methods, FCL also provides a set of wallet utilities to simplify this process.

Current Wallet Providers

Wallet Discovery

It can be difficult to get users to discover new wallets on a chain. To solve this, we created a wallet discovery service that can be configured and accessed through FCL to display all available Flow wallet providers to the user. This means:

  • Dapps can display and support all FCL compatible wallets that launch on Flow without needing to change any code
  • Users don't need to sign up for new wallets - they can carry over their existing one to any dapp that uses FCL for authentication and authorization.

The discovery feature can be used via API allowing you to customize your own UI or you can use the default UI without any additional configuration.

Note: To get your wallet added to the discovery service, make a PR in fcl-discovery.

Building a FCL compatible wallet

  • Read the wallet guide to understand the implementation details.
  • Review the architecture of the FCL dev wallet for an overview.
  • If building a non-custodial wallet, see the Account API and the FLIP on derivation paths and key generation.

Support

Notice an problem or want to request a feature? Add an issue.

Discuss FCL with the community on the forum.

Join the Flow community on Discord to keep up to date and to talk to the team.

More Repositories

1

flow-go

A fast, secure, and developer-friendly blockchain built to support the next generation of games, apps, and the digital assets that power them.
Go
532
star
2

cadence

Cadence, the resource-oriented smart contract programming language πŸƒβ€β™‚οΈ
Go
505
star
3

flow-nft

The non-fungible token standard on the Flow blockchain
Cadence
459
star
4

kitty-items

Kitty Items: CryptoKitties Sample App
JavaScript
408
star
5

flow

Flow is a fast, secure, and developer-friendly blockchain built to support the next generation of games, apps, and the digital assets that power them 🌊
Go
357
star
6

flow-go-sdk

Tools for building Go applications on Flow 🌊
Go
211
star
7

flow-cli

The Flow CLI is a command-line interface that provides useful utilities for building Flow applications
Go
207
star
8

flow-ft

The Fungible Token standard on the Flow Blockchain
Cadence
136
star
9

flow-playground

Flow Playground front-end app πŸ€Ήβ€β™‚οΈ
TypeScript
112
star
10

nft-storefront

A general-purpose Cadence contract for trading NFTs on Flow
Cadence
102
star
11

flow-core-contracts

Cadence smart contracts that define core functionality of the Flow protocol
Go
86
star
12

flow-emulator

The Flow Emulator is a lightweight tool that emulates the behaviour of the real Flow network
Go
84
star
13

freshmint

TypeScript
68
star
14

vscode-cadence

The Visual Studio Code extension for Cadence
TypeScript
52
star
15

fcl-dev-wallet

A Flow wallet for development purposes. To be used with the Flow Emulator.
Go
50
star
16

developer-grants

Grants for developers that contribute to the broader developer ecosystem
50
star
17

flip-fest

A backlog of all the available tasks to complete for Flow's FLIP Fest.
50
star
18

flow-js-testing

Testing framework to enable Cadence testing via a set of JavaScript methods and tools
JavaScript
46
star
19

atree

Atree provides scalable arrays and scalable ordered maps.
Go
39
star
20

nft-catalog

Cadence
37
star
21

flow-101-quest

Cadence
30
star
22

flips

Flow Improvement Proposals
25
star
23

cadence-tools

Developer tools for Cadence
Go
24
star
24

flow-cadut

Node based template generator to simplify interaction with Cadence files.
JavaScript
22
star
25

wallet-api

A REST API to create and manage Flow accounts
HTML
22
star
26

walletless-arcade-example

An example Flow App to demonstrate walletless onboarding and promote composable, secure, and smooth UX for on-chain games without the need for a traditional backend.
Cadence
21
star
27

monster-maker

Create a monster on Flow
TypeScript
18
star
28

hybrid-custody

Cadence suite enabling Hybrid Custody on Flow
Cadence
15
star
29

rosetta

Rosetta implementation for the Flow blockchain
Go
15
star
30

UnityFlowSDK

Flow SDK for Unity - build Unity games on the Flow blockchain
C#
13
star
31

flow-java-client-example

Java
12
star
32

wallet-extension-example

An example and guide showing how to build an FCL-compatible wallet extension on Flow.
JavaScript
12
star
33

fcl-discovery

JavaScript
11
star
34

flow-interaction-template-service

TypeScript
11
star
35

flow-playground-api

Flow Playground back-end app πŸ€Ήβ€β™‚οΈ
Go
11
star
36

linked-accounts

Cadence
11
star
37

ledger-app-flow

JavaScript
10
star
38

sc-eng-gaming

Showcasing how a Rock Paper Scissors game could be made #onFlow
Cadence
10
star
39

flow-batch-scan

Library for running batch scans of the flow network
Go
10
star
40

flow-evm-gateway

FlowEVM Gateway implements an Ethereum-equivalent JSON-RPC API for EVM clients to use
Go
9
star
41

cadence-libraries

Libraries for common programming utilities in the Cadence smart contract programming language
Go
9
star
42

flow-evm-bridge

Repository for contracts supporting bridge between Flow <> EVM
Cadence
9
star
43

sdks

Tips and resources for building Flow SDKs and client libraries πŸ”§
Cadence
9
star
44

developer-portal

Source code for developers.flow.com
TypeScript
8
star
45

docs

Flow Developer Portal. Discover the developer ecosystem and master the Flow blockchain
TypeScript
8
star
46

cadence-lang.org

The home of the Cadence website
MDX
8
star
47

cadence-cookbook

JavaScript
8
star
48

flow-multisig

JavaScript
8
star
49

OWBSummer2020Project

OWB (Open World Builders) bootcamp summer 2020 cohort capstone projects submission
CSS
8
star
50

Flow-Working-Groups

8
star
51

casestudies

Learn more about building on Flow from teams that have already launched successful projects
7
star
52

BFTune

Byzantine Fault Tolerance (BFT) Testing Framework for Flow
7
star
53

cadence-style-guide

The Flow Team guide on how to write better Cadence code
7
star
54

twg

Tokenomics Working Group
6
star
55

flowkit

Go
6
star
56

flow-interaction-template-tools

TypeScript
6
star
57

flow-kmm

Kotlin Multiplatform Mobile (KMM) library for building Android and iOS applications on the Flow blockchain
Objective-C
5
star
58

scaffold-flow

🌊 forkable Flow dev stack focused on fast product iterations
JavaScript
5
star
59

flow-issue-box

A public repository dedicated to collecting issues and feedback from external contributors. The Issue Box πŸ—³οΈ is similar to a backlog, where the issue is later triaged and assigned to the proper team.
5
star
60

ccf

Cadence Compact Format (CCF) is a binary data format and alternative to JSON-CDC
4
star
61

token-cold-storage

JavaScript
4
star
62

cddl

A CDDL implementation in Go
Go
4
star
63

Offers

Cadence
4
star
64

full-observer-node-example

An example demonstrating the use of the Flow unstaked consensus follower
Go
4
star
65

flow-account-api

Go
4
star
66

faucet

Cadence
4
star
67

contract-updater

Enabling delayed contract updates to a wrapped account at or beyond a specified block height
Cadence
4
star
68

flow-validator

Run a Flow node and help secure the network
4
star
69

flow-playground-tutorials

Repository to contain and test tutorials, which are deployed to Playground and used in docs
Cadence
3
star
70

flow-public-key-indexer

A observer service for indexing flow Accounts and by their associated Keys.
Go
3
star
71

flow-cadence-eth-utils

Cadence
3
star
72

flow-cadence-hrt

Write your Cadence tests with human readable TOML
JavaScript
3
star
73

random-coin-toss

An example repo demonstrating safe use of onchain randomness
Cadence
3
star
74

blindninja

Blind Ninja is a composability-first fully onchain game on Flow
JavaScript
3
star
75

waterhose

Waterhose listens to Flow events and publishes them to Kafka
2
star
76

fcl-auth-android

A Kotlin library for the Flow Client Library (FCL) that enables Flow wallet authentication on Android devices
Kotlin
2
star
77

service-account

Cadence
2
star
78

fcl-six

Stored Interactions (SIX) for FCL
JavaScript
2
star
79

flow-scaffold-list

Scaffolds for starting Flow apps
2
star
80

hybrid-custody-scaffold

Starter template for working with HybridCustody contract suite
Cadence
2
star
81

fcl-contracts

Cadence contracts used by the Flow Client Library (FCL)
Cadence
2
star
82

crypto

Assembly
2
star
83

dex

2
star
84

gwg

The Flow Governance Working Group (GWG) is an open-for-all forum that plays a pivotal role in shaping the Flow ecosystem with a focus on discussing and resolving governance issues.
2
star
85

next-docs-v0

next-docs
JavaScript
1
star
86

storage-fees-scripts

1
star
87

unity-flow-sdk-api-docs

HTML
1
star
88

fusd

Cadence source code for the FUSD stablecoin on Flow
Cadence
1
star
89

band-oracle-contracts

Contracts and related for integration with Band protocol Oracle Network
Cadence
1
star
90

cadence-1-migrator

Cadence
1
star
91

fcl-gcp-kms-web

JavaScript
1
star
92

fcl-next-scaffold

JavaScript
1
star
93

wallet-wg

Flow Wallet Working Group
1
star
94

minting-nfts-in-a-set

Cadence Cookbook Recipe: Minting NFTs in a Set
Cadence
1
star
95

create-a-marketplace

Cadence Cookbook Recipe: Create a Marketplace
Cadence
1
star
96

metadata-views

Cadence Cookbook Recipe: Metadata Views
Cadence
1
star
97

create-a-topshot-play

Cadence Cookbook Recipe: Create a TopShot Play
Cadence
1
star
98

collection-for-holding-nfts

Cadence Cookbook Recipe: Collection for Holding NFTs
Cadence
1
star
99

add-a-play-to-topshot-set

Cadence Cookbook Recipe: Add a Play to TopShot Set
Cadence
1
star
100

minting-a-moment-in-topshot-set

Cadence Cookbook Recipe: Minting a Moment in TopShot Set
Cadence
1
star