|
1 | | ---- |
2 | | -title: Flow Client Library (FCL) |
3 | | ---- |
4 | | -<br /> |
5 | | -<p align="center"> |
6 | | - <h1 align="center"> FCL JS</h1> |
7 | | - <p align="center"> |
8 | | - <i>Connect your dapp to users, their wallets and Flow.</i> |
9 | | - <br /> |
10 | | - <a href="https://docs.onflow.org/fcl/"><strong>Read the docs»</strong></a> |
11 | | - <br /> |
12 | | - <br /> |
13 | | - <a href="https://docs.onflow.org/fcl/tutorials/flow-app-quickstart/">Quickstart</a> |
14 | | - · |
15 | | - <a href="https://github.com/onflow/fcl-js/issues">Report Bug</a> |
16 | | - · |
17 | | - <a href="https://github.com/onflow/fcl-js/blob/master/CONTRIBUTING.md">Contribute</a> |
| 1 | +# This document has been moved to a new location: |
18 | 2 |
|
19 | | - </p> |
20 | | -</p> |
21 | | - |
22 | | -## What is FCL? |
23 | | - |
24 | | -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. |
25 | | - |
26 | | -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. |
27 | | - |
28 | | -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/zed-io/fcl-swift) contributed by [@lmcmz](https://github.com/lmcmz). |
29 | | - |
30 | | ---- |
31 | | -## Getting Started |
32 | | - |
33 | | -### Requirements |
34 | | -- Node version `v12.0.0 or higher`. |
35 | | - |
36 | | -### Installation |
37 | | - |
38 | | -To use the FCL JS in your application, install using **yarn** or **npm** |
39 | | - |
40 | | -```shell |
41 | | -npm i -S @onflow/fcl |
42 | | -``` |
43 | | - |
44 | | -```shell |
45 | | -yarn add @onflow/fcl |
46 | | -``` |
47 | | -#### Importing |
48 | | - |
49 | | -**ES6** |
50 | | -```js |
51 | | -import * as fcl from "@onflow/fcl"; |
52 | | -``` |
53 | | -**Node.js** |
54 | | -```js |
55 | | -const fcl = require("@onflow/fcl"); |
56 | | -``` |
57 | | ---- |
58 | | -## FCL for Dapps |
59 | | -#### Wallet Interactions |
60 | | - |
61 | | -- *Wallet Discovery* and *Sign-up/Login*: Onboard users with ease. Never worry about supporting multiple wallets. |
62 | | -Authenticate users with any [FCL compatible wallet](./index.md#current-wallet-providers). |
63 | | -```js |
64 | | -// in the browser |
65 | | -import * as fcl from "@onflow/fcl" |
66 | | - |
67 | | -fcl.config({ |
68 | | - "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn", // Endpoint set to Testnet |
69 | | -}) |
70 | | - |
71 | | -fcl.authenticate() |
72 | | -``` |
73 | | - |
74 | | - |
75 | | -> **Note**: 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). |
76 | | -
|
77 | | -- *Interact with smart contracts*: Authorize transactions via the user's chosen wallet |
78 | | -- *Prove ownership of a wallet address*: Signing and verifying user signed data |
79 | | - |
80 | | -[Learn more about wallet interactions >](https://docs.onflow.org/fcl/reference/api/#wallet-interactions) |
81 | | - |
82 | | -#### Blockchain Interactions |
83 | | -- *Query the chain*: Send arbitrary Cadence scripts to the chain and receive back decoded values |
84 | | -```js |
85 | | -import * as fcl from "@onflow/fcl"; |
86 | | - |
87 | | -const result = await fcl.query({ |
88 | | - cadence: ` |
89 | | - pub fun main(a: Int, b: Int, addr: Address): Int { |
90 | | - log(addr) |
91 | | - return a + b |
92 | | - } |
93 | | - `, |
94 | | - args: (arg, t) => [ |
95 | | - arg(7, t.Int), // a: Int |
96 | | - arg(6, t.Int), // b: Int |
97 | | - arg("0xba1132bc08f82fe2", t.Address), // addr: Address |
98 | | - ], |
99 | | -}); |
100 | | -console.log(result); // 13 |
101 | | -``` |
102 | | -- *Mutate the chain*: Send arbitrary transactions with your own signatures or via a user's wallet to perform state changes on chain. |
103 | | -```js |
104 | | -import * as fcl from "@onflow/fcl"; |
105 | | -// in the browser, FCL will automatically connect to the user's wallet to request signatures to run the transaction |
106 | | -const txId = await fcl.mutate({ |
107 | | - cadence: ` |
108 | | - import Profile from 0xba1132bc08f82fe2 |
109 | | - |
110 | | - transaction(name: String) { |
111 | | - prepare(account: AuthAccount) { |
112 | | - account.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name) |
113 | | - } |
114 | | - } |
115 | | - `, |
116 | | - args: (arg, t) => [arg("myName", t.String)], |
117 | | -}); |
118 | | -``` |
119 | | - |
120 | | -[Learn more about on-chain interactions >](https://docs.onflow.org/fcl/reference/api/#on-chain-interactions) |
121 | | - |
122 | | -#### Utilities |
123 | | -- Get account details from any Flow address |
124 | | -- Get the latest block |
125 | | -- Transaction status polling |
126 | | -- Event polling |
127 | | -- Custom authorization functions |
128 | | - |
129 | | -[Learn more about utilities >](https://docs.onflow.org/fcl/reference/api/#pre-built-interactions) |
130 | | - |
131 | | - |
132 | | -## Next Steps |
133 | | - |
134 | | -See the [Flow App Quick Start](./tutorials/flow-app-quickstart.mdx). |
135 | | - |
136 | | -See the full [API Reference](./reference/api.md) for all FCL functionality. |
137 | | - |
138 | | -Learn Flow's smart contract language to build any script or transactions: [Cadence](https://docs.onflow.org/cadence/). |
139 | | - |
140 | | -Explore all of Flow [docs and tools](https://docs.onflow.org). |
141 | | - |
142 | | - |
143 | | ---- |
144 | | -## FCL for Wallet Providers |
145 | | -Wallet providers on Flow have the flexibility to build their user interactions and UI through a variety of ways: |
146 | | -- Front channel communication via Iframe, pop-up, tab, or extension |
147 | | -- Back channel communication via HTTP |
148 | | - |
149 | | -FCL is agnostic to the communication channel and is 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. |
150 | | - |
151 | | -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/src/wallet-utils/index.js) to simplify this process. |
152 | | - |
153 | | - |
154 | | -### Current Wallet Providers |
155 | | -- [Blocto](https://blocto.portto.io/en/) |
156 | | -- [Ledger](https://ledger.com) (limited transaction support) |
157 | | -- [Dapper Wallet](https://www.meetdapper.com/) (beta access - general availability coming soon) |
158 | | -- [Lilico Wallet](https://lilico.app/) Fully non-custodial chrome extension wallet focused on NFTs |
159 | | - |
160 | | -### Wallet Discovery |
161 | | -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: |
162 | | -- Dapps can display and support all FCL compatible wallets that launch on Flow without needing to change any code |
163 | | -- 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. |
164 | | - |
165 | | -The discovery feature can be used via API, allowing you to customize your own UI or use the default UI without any additional configuration. |
166 | | - |
167 | | -### Building a FCL compatible wallet |
168 | | - |
169 | | -- Read the [wallet guide](https://github.com/onflow/fcl-js/blob/master/packages/fcl/src/wallet-provider-spec/draft-v3.md) to understand the implementation details. |
170 | | -- Review the architecture of the [FCL dev wallet](https://github.com/onflow/fcl-dev-wallet) for an overview. |
171 | | -- 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. |
172 | | - |
173 | | ---- |
174 | | - |
175 | | -## Support |
176 | | - |
177 | | -Notice an problem or want to request a feature? [Add an issue](https://github.com/onflow/flow-js-sdk/issues). |
178 | | - |
179 | | -Discuss FCL with the community on the [forum](https://forum.onflow.org/c/developer-tools/flow-fcl/22). |
180 | | - |
181 | | -Join the Flow community on [Discord](https://discord.gg/k6cZ7QC) to keep up to date and to talk to the team. |
| 3 | +https://github.com/onflow/docs/tree/main/docs/tooling/fcl-js/index.md |
0 commit comments