Update FCL README and contributing guide (#2162)

* Move to contributing guide * Improve what is fcl * Add to contributing * Remove * Add changeset * Update links * Update links * Update links * Update links * Update wallets * Format next steps * Add SDK section --------- Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>
onflow · Feb 24, 2025 · 98c1015 · 98c1015
1 parent 80fd2b7
commit 98c1015
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 93 deletions.
diff --git a/.changeset/ninety-fireants-admire.md b/.changeset/ninety-fireants-admire.md
@@ -0,0 +1,5 @@
+---
+"@onflow/fcl": patch
+---
+
+Updated FCL README and contributing guide
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -14,6 +14,8 @@ Use your best judgment, and feel free to propose changes to this document in a p
 - [Suggesting Enhancements](#suggesting-enhancements)
 - [Your First Code Contribution](#your-first-code-contribution)
 - [Pull Requests](#pull-requests)
+- [Building the Repo](#building-the-repo)
+- [Release Process](#release-process)
 
 [Styleguides](#styleguides)
 
@@ -102,6 +104,45 @@ Please follow the [styleguides](#styleguides) to have your contribution consider
 Reviewer(s) may ask you to complete additional design work, tests,
 or other changes before your pull request can be ultimately accepted.
 
+### Building the Repo
+
+```shell
+npm i
+npm run build
+```
+
+### Release Process
+
+Packages stable versions releases are controlled by [changesets](https://github.com/changesets/changesets) from the `master` branch
+
+#### Creating a changeset
+
+Changesets are used to track changes to the packages in the repository. They are used to generate changelogs and determine the next version of the package.
+
+To create a changeset, run:
+```
+npx changeset
+```
+
+#### Prerelease(alpha)
+In order to create an `alpha` (pre-)release
+- create a branch with `release-<VERSION>` as a branch name
+- run:
+```
+npm run changeset pre enter alpha
+npm run changeset version
+npm run changeset publish
+```
+
+*NOTE: you need to have an npm account and be a member of [OnFlow organization](https://www.npmjs.com/org/onflow)*
+
+`changeset` commands should preferably be run from the `release` branch and not from feature branches in order to avoid merge conflicts with other feature branches
+when the release is ready to be published as stable run from the release branch
+```
+npm run changeset pre exit
+```
+and merge `release-<VERSION>` branch to `master`
+
 ## Styleguides
 
 ### Git Commit Messages

diff --git a/README.md b/README.md
@@ -18,48 +18,27 @@
   </p>
 </p>
 
-## What is FCL?
+## 🌟 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.
+The **Flow Client Library (FCL) JS** is a package designed to facilitate interactions between dapps, wallets, and the Flow blockchain. It provides a standardized way for applications to connect with users and their wallets, **eliminating the need for custom integrations**.
 
-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.
+### 🔑 Key Features:
+- 🔌 **Universal Wallet Support** – Works seamlessly with all FCL-compatible wallets, making authentication simple.
+- 🔐 **Secure Authentication** – Standardized authentication flow ensures a smooth user experience.
+- ⚡ **Blockchain Interactions** – Enables querying, mutating, and interacting with smart contracts on Flow.
+- 🛠️ **Full-Featured Utilities** – Offers built-in functions to streamline blockchain development.
+- 🌍 **Flexible Environment** – Can run in both browser and server environments, though wallet interactions are browser-only.
 
-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](https://github.com/Outblock/fcl-swift) contributed by [@lmcmz](https://github.com/lmcmz).
+FCL was created to make building Flow-connected applications **easy, secure, and scalable** by defining **standardized communication patterns** between wallets, applications, and users.
+
+For iOS, we also offer [FCL Swift](https://github.com/Outblock/fcl-swift).
 
 ---
 ## Getting Started
 
 ### Requirements
 -  Node version `v12.0.0 or higher`.
 
-### Build
-```shell
-npm i
-npm run build
-```
-
-### Release
-Packages stable versions releases are controlled by [changesets](https://github.com/changesets/changesets) from the `master` branch
-
-#### Prerelease(alpha)
-In order to create an `alpha` (pre-)release 
-- create a branch with `release-<VERSION>` as a branch name
-- run:
-```
-npm run changeset pre enter alpha
-npm run changeset version
-npm run changeset publish
-```
-
-*NOTE: you need to have an npm account and be a member of [OnFlow organization](https://www.npmjs.com/org/onflow)*
-
-`changeset` commands should preferably be run from the `release` branch and not from feature branches in order to avoid merge conflicts with other feature branches
-when the release is ready to be published as stable run from the release branch
-```
-npm run changeset pre exit
-```
-and merge `release-<VERSION>` branch to `master`
-
 ### Installation
 
 To use the FCL JS in your application, install using **yarn** or **npm**
@@ -177,14 +156,10 @@ For all type definitions available, see [this file](./packages/typedefs/src/inde
 
 ## Next Steps
 
-See the [Flow App Quick Start](https://developers.flow.com/tutorials/flow-app-quickstart).
-
-See the full [API Reference](https://developers.flow.com/tooling/fcl-js/api) for all FCL functionality.
-
-Learn Flow's smart contract language to build any script or transactions: [Cadence](https://developers.flow.com/cadence).
-
-Explore all of Flow [docs and tools](https://developers.flow.com).
-
+- See the [Flow App Quick Start](https://developers.flow.com/build/getting-started/fcl-quickstart).
+- See the full [API Reference](https://developers.flow.com/tools/clients/fcl-js/api) for all FCL functionality.
+- Learn Flow's smart contract language to build any script or transactions: [Cadence](https://cadence-lang.org).
+- Explore all of Flow [docs and tools](https://developers.flow.com).
 
 ---
 ## FCL for Wallet Providers
@@ -198,10 +173,11 @@ The communication channels involve responding to a set of pre-defined FCL messag
 
 
 ### Current Wallet Providers
+- [Flow Wallet](https://wallet.flow.com/)
+- [NuFi Wallet](https://nu.fi/)
 - [Blocto](https://blocto.portto.io/en/)
 - [Ledger](https://ledger.com) (limited transaction support)
 - [Dapper Wallet](https://www.meetdapper.com/) (beta access - general availability coming soon)
-- [Lilico Wallet](https://lilico.app/) Fully non-custodial chrome extension wallet focused on NFTs
 
 ### 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](https://github.com/onflow/fcl-discovery) that can be configured and accessed through FCL to display all available Flow wallet providers to the user. This means:
@@ -214,16 +190,20 @@ The discovery feature can be used via API allowing you to customize your own UI
 
 ### Building a FCL compatible wallet
 
-- Read the [wallet guide](https://github.com/onflow/fcl-js/blob/master/packages/fcl-core/src/wallet-provider-spec/draft-v3.md) to understand the implementation details.
+- Read the [wallet guide](https://github.com/onflow/fcl-js/blob/master/packages/fcl-core/src/wallet-provider-spec/draft-v4.md) to understand the implementation details.
 - Review the architecture of the [FCL dev wallet](https://github.com/onflow/fcl-dev-wallet) for an overview.
 - If building a non-custodial wallet, see the [Account API](https://github.com/onflow/flow-account-api) and the [FLIP](https://github.com/onflow/flow/pull/727) on derivation paths and key generation.
 
 ---
 
-## Support
+## 🛠 Want to Use the Flow SDK Directly?
 
-Notice a problem or want to request a feature? [Add an issue](https://github.com/onflow/fcl-js/issues).
+If you prefer to interact with Flow at a **lower level** without using FCL, you can use the [Flow JavaScript SDK](packages/sdk/readme.md) directly. The SDK provides raw access to Flow's API for sending transactions, executing scripts, and managing accounts.
 
-Discuss FCL with the community on the [forum](https://forum.onflow.org/c/developer-tools/flow-fcl/22).
+FCL is built **on top of the Flow SDK**, making it easier to handle authentication, wallet interactions, and dapp connectivity. Choose the approach that best fits your use case.
+
+## Support
 
-Join the Flow community on [Discord](https://discord.gg/k6cZ7QC) to keep up to date and to talk to the team.
+- Notice a problem or want to request a feature? [Add an issue](https://github.com/onflow/fcl-js/issues).
+- Join the Flow community on [Discord](https://discord.gg/flow) to keep up to date and to talk to the team.
+- Read the [Contributing Guide](./CONTRIBUTING.md) to learn how to contribute to the project.
diff --git a/packages/fcl/README.md b/packages/fcl/README.md
@@ -18,48 +18,27 @@
   </p>
 </p>
 
-## What is FCL?
+## 🌟 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.
+The **Flow Client Library (FCL) JS** is a package designed to facilitate interactions between dapps, wallets, and the Flow blockchain. It provides a standardized way for applications to connect with users and their wallets, **eliminating the need for custom integrations**.
 
-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.
+### 🔑 Key Features:
+- 🔌 **Universal Wallet Support** – Works seamlessly with all FCL-compatible wallets, making authentication simple.
+- 🔐 **Secure Authentication** – Standardized authentication flow ensures a smooth user experience.
+- ⚡ **Blockchain Interactions** – Enables querying, mutating, and interacting with smart contracts on Flow.
+- 🛠️ **Full-Featured Utilities** – Offers built-in functions to streamline blockchain development.
+- 🌍 **Flexible Environment** – Can run in both browser and server environments, though wallet interactions are browser-only.
 
-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](https://github.com/Outblock/fcl-swift) contributed by [@lmcmz](https://github.com/lmcmz).
+FCL was created to make building Flow-connected applications **easy, secure, and scalable** by defining **standardized communication patterns** between wallets, applications, and users.
+
+For iOS, we also offer [FCL Swift](https://github.com/Outblock/fcl-swift).
 
 ---
 ## Getting Started
 
 ### Requirements
 -  Node version `v12.0.0 or higher`.
 
-### Build
-```shell
-npm i
-npm run build
-```
-
-### Release
-Packages stable versions releases are controlled by [changesets](https://github.com/changesets/changesets) from the `master` branch
-
-#### Prerelease(alpha)
-In order to create an `alpha` (pre-)release
-- create a branch with `release-<VERSION>` as a branch name
-- run:
-```
-npm run changeset pre enter alpha
-npm run changeset version
-npm run changeset publish
-```
-
-*NOTE: you need to have an npm account and be a member of [OnFlow organization](https://www.npmjs.com/org/onflow)*
-
-`changeset` commands should preferably be run from the `release` branch and not from feature branches in order to avoid merge conflicts with other feature branches
-when the release is ready to be published as stable run from the release branch
-```
-npm run changeset pre exit
-```
-and merge `release-<VERSION>` branch to `master`
-
 ### Installation
 
 To use the FCL JS in your application, install using **yarn** or **npm**
@@ -177,14 +156,10 @@ For all type definitions available, see [this file](./packages/typedefs/src/inde
 
 ## Next Steps
 
-See the [Flow App Quick Start](https://developers.flow.com/tutorials/flow-app-quickstart).
-
-See the full [API Reference](https://developers.flow.com/tooling/fcl-js/api) for all FCL functionality.
-
-Learn Flow's smart contract language to build any script or transactions: [Cadence](https://developers.flow.com/cadence).
-
-Explore all of Flow [docs and tools](https://developers.flow.com).
-
+- See the [Flow App Quick Start](https://developers.flow.com/build/getting-started/fcl-quickstart).
+- See the full [API Reference](https://developers.flow.com/tools/clients/fcl-js/api) for all FCL functionality.
+- Learn Flow's smart contract language to build any script or transactions: [Cadence](https://cadence-lang.org).
+- Explore all of Flow [docs and tools](https://developers.flow.com).
 
 ---
 ## FCL for Wallet Providers
@@ -196,12 +171,12 @@ FCL is agnostic to the communication channel and be configured to create both cu
 
 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](https://github.com/onflow/fcl-js/blob/master/packages/fcl-core/src/wallet-utils/index.js) to simplify this process.
 
-
 ### Current Wallet Providers
+- [Flow Wallet](https://wallet.flow.com/)
+- [NuFi Wallet](https://nu.fi/)
 - [Blocto](https://blocto.portto.io/en/)
 - [Ledger](https://ledger.com) (limited transaction support)
 - [Dapper Wallet](https://www.meetdapper.com/) (beta access - general availability coming soon)
-- [Lilico Wallet](https://lilico.app/) Fully non-custodial chrome extension wallet focused on NFTs
 
 ### 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](https://github.com/onflow/fcl-discovery) that can be configured and accessed through FCL to display all available Flow wallet providers to the user. This means:
@@ -214,16 +189,20 @@ The discovery feature can be used via API allowing you to customize your own UI
 
 ### Building a FCL compatible wallet
 
-- Read the [wallet guide](https://github.com/onflow/fcl-js/blob/master/packages/fcl-core/src/wallet-provider-spec/draft-v3.md) to understand the implementation details.
+- Read the [wallet guide](https://github.com/onflow/fcl-js/blob/master/packages/fcl-core/src/wallet-provider-spec/draft-v4.md) to understand the implementation details.
 - Review the architecture of the [FCL dev wallet](https://github.com/onflow/fcl-dev-wallet) for an overview.
 - If building a non-custodial wallet, see the [Account API](https://github.com/onflow/flow-account-api) and the [FLIP](https://github.com/onflow/flow/pull/727) on derivation paths and key generation.
 
 ---
 
-## Support
+## 🛠 Want to Use the Flow SDK Directly?
 
-Notice a problem or want to request a feature? [Add an issue](https://github.com/onflow/fcl-js/issues).
+If you prefer to interact with Flow at a **lower level** without using FCL, you can use the [Flow JavaScript SDK](packages/sdk/readme.md) directly. The SDK provides raw access to Flow's API for sending transactions, executing scripts, and managing accounts.
 
-Discuss FCL with the community on the [forum](https://forum.onflow.org/c/developer-tools/flow-fcl/22).
+FCL is built **on top of the Flow SDK**, making it easier to handle authentication, wallet interactions, and dapp connectivity. Choose the approach that best fits your use case.
+
+## Support
 
-Join the Flow community on [Discord](https://discord.gg/k6cZ7QC) to keep up to date and to talk to the team.
+- Notice a problem or want to request a feature? [Add an issue](https://github.com/onflow/fcl-js/issues).
+- Join the Flow community on [Discord](https://discord.gg/flow) to keep up to date and to talk to the team.
+- Read the [Contributing Guide](./CONTRIBUTING.md) to learn how to contribute to the project.