You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/blockchain-development-tutorials/cadence/getting-started/building-a-frontend-app.md
+15-11Lines changed: 15 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,13 +22,13 @@ keywords:
22
22
23
23
# Building a Frontend App
24
24
25
-
Building on the `Counter` contract you deployed in [Cadence Environment Setup] and [Smart Contract Interaction], this tutorial shows you how to create a simple Next.js frontend that interacts with the `Counter` smart contract deployed on your local Flow emulator. Instead of using FCL directly, you'll leverage [**@onflow/react-sdk**] to simplify authentication, querying, transactions, and to display real-time transaction status updates using convenient React hooks.
25
+
This tutorial builds on the `Counter` contract you deployed in [Cadence Environment Setup] and [Smart Contract Interaction]. It shows you how to create a simple `Next.js` frontend that interacts with the `Counter` smart contract deployed on your local Flow emulator. Instead of using FCL directly, you'll leverage [**@onflow/react-sdk**] to simplify authentication, querying, transactions, and to display real-time transaction status updates using convenient React hooks.
26
26
27
27
## Objectives
28
28
29
-
After finishing this guide, you will be able to:
29
+
After you complete this tutorial, you will be able to:
30
30
31
-
- Wrap your Next.js app with a Flow provider using [**@onflow/react-sdk**].
31
+
- Wrap your `Next.js` app with a Flow provider using [**@onflow/react-sdk**].
32
32
- Read data from a Cadence smart contract (`Counter`) using kit's query hook.
33
33
- Send a transaction to update the smart contract's state using kit's mutation hook.
34
34
- Monitor a transaction's status in real time using kit's transaction hook.
**Note:** When moving hidden files (those beginning with a dot) like `.gitignore`, be cautious not to overwrite any important files.
95
+
:::tip
96
+
97
+
When moving hidden files (those beginning with a dot) like `.gitignore`, be cautious not to overwrite any important files.
98
+
99
+
:::
96
100
97
101
### Step 3: Install @onflow/react-sdk
98
102
@@ -108,7 +112,7 @@ This library wraps FCL internally and exposes a set of hooks for authentication,
108
112
109
113
:::warning
110
114
111
-
You should already have the Flow emulator running from the local development step. If it's not running, you can start it again — but note that restarting the emulatorwill clear all blockchain state, including any contracts deployed in [Step 2: Local Development].
115
+
You should already have the Flow emulator running from the local development step. If it's not running, you can start it again — but when you restart the emulator, it will clear all blockchain state, which includes any contracts deployed in [Step 2: Local Development].
112
116
113
117
:::
114
118
@@ -134,7 +138,7 @@ This will start the [Dev Wallet] on `http://localhost:8701`, which you'll use fo
134
138
135
139
## Wrapping Your App with FlowProvider
136
140
137
-
[**@onflow/react-sdk**] provides a `FlowProvider` component that sets up the Flow Client Library configuration. In Next.js using the App Router, add or update your `src/app/layout.tsx` as follows:
141
+
[**@onflow/react-sdk**] provides a `FlowProvider` component that sets up the Flow Client Library configuration. In `Next.js` using the App Router, add or update your `src/app/layout.tsx` as follows:
This sends a Cadence transaction to the blockchain using the `mutate` function. The transaction imports the `Counter` contract and calls its `increment` function. Authorization is handled automatically by the connected wallet during the `prepare` phase. Once submitted, the returned `txId` can be used to track the transaction's status in real time.
251
+
This sends a Cadence transaction to the blockchain using the `mutate` function. The transaction imports the `Counter` contract and calls its `increment` function. The connected wallet handles authorization automatically during the `prepare` phase. After it's submitted, you cna use the returned `txId` to track the transaction's status in real time.
248
252
249
253
### Subscribing to Transaction Status
250
254
@@ -275,7 +279,7 @@ useEffect(() => {
275
279
-`2`: **Finalized** – The transaction has been included in a block, but not yet executed.
276
280
-`3`: **Executed** – The transaction code has run successfully, but the result has not yet been sealed.
277
281
-`4`: **Sealed** – The transaction is fully complete, included in a block, and now immutable onchain.
278
-
- We recommend calling`refetch()` when the status reaches **3 (Executed)** to update your UI more quickly after the transaction runs, rather than waiting for sealing.
282
+
- We recommend that you call`refetch()` when the status reaches **3 (Executed)** to update your UI more quickly after the transaction runs, rather than waiting for sealing.
279
283
- The `statusString` property gives a human-readable version of the current status you can display in the UI.
280
284
281
285
#### Why `Executed` is Recommended for UI Updates:
@@ -284,7 +288,7 @@ Waiting for `Sealed` provides full onchain confirmation but can introduce a dela
284
288
285
289
However:
286
290
287
-
- If you're dealing with critical state changes (e.g., token transfers or contract deployments), prefer waiting for `Sealed`.
291
+
- If you're dealing with critical state changes (for example, token transfers or contract deployments), prefer waiting for `Sealed`.
288
292
- For non-critical UI updates, `Executed` is usually safe and significantly improves perceived performance.
289
293
290
294
### Integrating Authentication and Building the Complete UI
@@ -442,9 +446,9 @@ Then visit [http://localhost:3000](http://localhost:3000) in your browser. You s
442
446
- Once logged in, your account address appears with options to **Log Out** and **Increment Count**.
443
447
- When you click **Increment Count**, the transaction is sent; its status updates are displayed in real time below the action buttons, and once the transaction is sealed, the updated count is automatically fetched.
444
448
445
-
## Wrapping Up
449
+
## Conclusion
446
450
447
-
By following these steps, you've built a simple Next.js dApp that interacts with a Flow smart contract using [**@onflow/react-sdk**]. In this guide you learned how to:
451
+
By following these steps, you've built a simple `Next.js` dApp that interacts with a Flow smart contract using [**@onflow/react-sdk**]. In this guide you learned how to:
448
452
449
453
- Wrap your application in a `FlowProvider` to configure blockchain connectivity.
450
454
- Use kit hooks such as `useFlowQuery`, `useFlowMutate`, `useFlowTransactionStatus`, and `useFlowCurrentUser` to manage authentication, query onchain data, submit transactions, and monitor their status.
Copy file name to clipboardExpand all lines: docs/blockchain-development-tutorials/cadence/getting-started/cadence-environment-setup.md
+55-55Lines changed: 55 additions & 55 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,69 +19,69 @@ keywords:
19
19
20
20
# Cadence Environment Setup
21
21
22
-
This comprehensive tutorial will guide you through setting up your complete development environment, deploying your first smart contract, and mastering the fundamentals of Flow development. You'll work hands-on with the Flow CLI, local emulator, and a real smart contract to build practical skills from day one.
22
+
This comprehensive tutorial will guide you through how to set up your complete development environment, deploy your first smart contract, and learn the fundamentals of Flow development. You'll work hands-on with the Flow CLI, local emulator, and a real smart contract to build practical skills from day one.
23
23
24
-
Flow is a blockchain built for the next generation of apps, games, and digital assets. With its unique multi-role architecture and resource-oriented programming language Cadence, Flow enables developers to create secure, composable, and scalable applications. This tutorial focuses on getting you productive with Flow's developer tools as quickly as possible.
24
+
Flow is a blockchain built for the next generation of apps, games, and digital assets. With its unique multi-role architecture and resource-oriented programming language Cadence, Flow allows developers to create secure, composable, and scalable applications. This tutorial focuses on getting you productive with Flow's developer tools as quickly as possible.
25
25
26
26
## What You'll Learn
27
27
28
-
After completing this tutorial, you'll be able to:
28
+
After you complete this tutorial, you'll be able to:
29
29
30
-
-**Set up a complete Flow development environment** with CLI tools and VSCode integration
31
-
-**Create and manage Flow projects** using the Flow CLI and understand project structure
32
-
-**Deploy and interact with smart contracts** on the local Flow emulator
33
-
-**Execute scripts and transactions** to read from and modify blockchain state
34
-
-**Understand Flow's account model** and how contracts are deployed to account storage
35
-
-**Navigate the Flow ecosystem** and know where to find help and resources
30
+
-**Set up a complete Flow development environment** with CLI tools and VSCode integration.
31
+
-**Create and manage Flow projects** using the Flow CLI and understand project structure.
32
+
-**Deploy and interact with smart contracts** on the local Flow emulator.
33
+
-**Execute scripts and transactions** to read from and modify blockchain state.
34
+
-**Understand Flow's account model** and how contracts are deployed to account storage.
35
+
-**Navigate the Flow ecosystem** and know where to find help and resources.
36
36
37
37
## What You'll Build
38
38
39
-
You'll work with a `Counter` contract—a simple but comprehensive example that demonstrates core Flow development patterns. This contract maintains a count value and provides functions to increment, decrement, and read the current count. By the end of this tutorial, you'll have:
39
+
You'll work with a `Counter` contract, a simple but comprehensive example that demonstrates core Flow development patterns. This contract maintains a count value and provides functions to increment, decrement, and read the current count. By the end of this tutorial, you'll have:
40
40
41
-
- A fully functional local Flow development environment
42
-
- A deployed Counter contract running on your local emulator
43
-
- Scripts to query the contract's state
44
-
- Transactions to modify the contract's state
45
-
- Understanding of how to extend this foundation for more complex applications
41
+
- A fully functional local Flow development environment.
42
+
- A deployed Counter contract running on your local emulator.
43
+
- Scripts to query the contract's state.
44
+
- Transactions to modify the contract's state.
45
+
- Understanding of how to extend this foundation for more complex applications.
The [Flow Command Line Interface] (CLI) is a set of tools that developers can use to interact with the Flow blockchain by managing accounts, sending transactions, deploying smart contracts, running the emulator, and more. This quickstart will get you familiar with its main concepts and functionality.
60
60
61
-
The first thing you'll need to do is install the Flow CLI. If you have [homebrew] installed you can run:
61
+
The first thing you'll need to do is install the Flow CLI. If you have [homebrew] installed, run:
62
62
63
63
```zsh
64
64
brew install flow-cli
65
65
```
66
66
67
-
**For other operating systems,**please refer to the [installation guide] for detailed instructions.
67
+
**For other operating systems,** refer to the [installation guide] for detailed instructions.
68
68
69
69
**Verify Installation:**
70
70
71
71
```zsh
72
72
flow version
73
73
```
74
74
75
-
You should see output showing your Flow CLI version.
75
+
You will see output showing your Flow CLI version.
76
76
77
77
### Install VSCode Extension
78
78
79
79
Install the [Flow Cadence VSCode Extension] from the marketplace. This extension provides:
80
80
81
-
- Syntax highlighting for Cadence
82
-
- Code completion and IntelliSense
83
-
- Error checking and diagnostics
84
-
- Integrated development tools
81
+
- Syntax highlighting for Cadence.
82
+
- Code completion and IntelliSense.
83
+
- Error checking and diagnostics.
84
+
- Integrated development tools.
85
85
86
86
## Create Your First Project
87
87
@@ -93,13 +93,13 @@ flow init
93
93
94
94
When prompted:
95
95
96
-
1.**Project name:** Enter your preferred project name
96
+
1.**Project name:** Enter your preferred project name.
97
97
2. Select `Basic Cadence project (no dependencies)`.
98
98
99
99
The `flow init` command creates:
100
100
101
-
-**`flow.json`**: Central configuration file containing accounts, contracts, deployments, and network settings
102
-
-**`emulator-account.pkey`**: Private key for the default emulator account
101
+
-**`flow.json`**: Central configuration file containing accounts, contracts, deployments, and network settings.
102
+
-**`emulator-account.pkey`**: Private key for the default emulator account.
103
103
-**`cadence/`**: Directory structure for your Cadence code:
104
104
-`contracts/`: Smart contract files
105
105
-`scripts/`: Read-only blockchain queries
@@ -130,10 +130,10 @@ flow emulator start
130
130
131
131
Keep this terminal running. The emulator provides:
-**Contract Declaration**: `access(all) contract Counter` creates a public contract named Counter
183
-
-**State Variable**: `access(all) var count: Int` stores the counter value, accessible to everyone
184
-
-**Events**: `CounterIncremented` and `CounterDecremented` notify listeners when changes occur
185
-
-**Initializer**: `init()` sets the initial count to 0 when the contract is deployed
182
+
-**Contract Declaration**: `access(all) contract Counter` creates a public contract named Counter.
183
+
-**State Variable**: `access(all) var count: Int` stores the counter value, accessible to everyone.
184
+
-**Events**: `CounterIncremented` and `CounterDecremented` notify listeners when changes occur.
185
+
-**Initializer**: `init()` sets the initial count to 0 when the contract is deployed.
186
186
-**Public Functions**:
187
187
-`increment()`: Increases count by 1 and emits an event
188
188
-`decrement()`: Decreases count by 1 and emits an event
189
189
-`getCount()`: Returns the current count (read-only, marked with `view`)
190
190
191
191
### Create and Configure Deployment Account
192
192
193
-
When you created a project you'll see that a `Counter` contract was added to your [`flow.json` configuration file](../../../build/tools/flow-cli/flow.json/configuration.md), but it's not set up for deployment yet. We could deploy it to the automatically created `emulator-account`, but for this example lets also create a new account on the emulator to deploy it to.
193
+
When you create a project, you'll see that a `Counter` contract was added to your [`flow.json` configuration file](../../../build/tools/flow-cli/flow.json/configuration.md), but it's not set up for deployment yet. We could deploy it to the automatically created `emulator-account`, but for this example, lets also create a new account on the emulator to deploy it to.
194
194
195
195
:::info
196
196
@@ -211,7 +211,7 @@ When prompted:
211
211
212
212
This adds the new account to your `flow.json` configuration file.You'll now see this account in your [`flow.json`](../../../build/tools/flow-cli/flow.json/configuration.md).
213
213
214
-
Once you have created you accounts, then you can view all your accounts on the with the Flow CLI with:
214
+
After you've created you accounts, then you can view all your accounts on the with the Flow CLI with:
215
215
216
216
```zsh
217
217
📋 Account Status Across Networks
@@ -244,7 +244,7 @@ This is a great tool to visualize your different accounts and balances when you
244
244
245
245
### Configure Contract Deployment
246
246
247
-
To deploy the `Counter` contract to the emulator, you'll need to add it to your project configuration. You can do this by running:
247
+
To deploy the `Counter` contract to the emulator, you'll need to add it to your project configuration. To do this, run:
248
248
249
249
```zsh
250
250
flow config add deployment
@@ -267,7 +267,7 @@ To deploy the `Counter` contract to the emulator, run:
267
267
flow project deploy
268
268
```
269
269
270
-
You should see output similar to:
270
+
You'll see output similar to:
271
271
272
272
```zsh
273
273
Deploying 1 contracts for accounts: test-account
@@ -293,7 +293,7 @@ You should see:
293
293
Result: 0
294
294
```
295
295
296
-
This confirms your contract is deployed and functioning correctly. The counter starts at 0, as defined in the contract's `init()` function.
296
+
This confirms your contract is deployed and functional. The counter starts at zero (0), as defined in the contract's `init()` function.
297
297
298
298
If we wanted to generate a new script, we could run:
299
299
@@ -311,7 +311,7 @@ For more information about generating Cadence files, see the [Generating Cadence
311
311
312
312
:::tip
313
313
314
-
If you'll like to learn more about writing scripts, please check out the docs for [basic scripts].
314
+
To learn more about writing scripts, check out the docs for [basic scripts].
If you want to learn more about writing transactions, please read the docs for [basic transactions].
386
+
To learn more about writing transactions, read the docs for [basic transactions].
387
387
388
388
:::
389
389
@@ -393,28 +393,28 @@ You've successfully established a solid foundation for building on Flow. Let's r
393
393
394
394
✅ **Complete Flow Development Environment**
395
395
396
-
- Flow CLI installed and configured for project management
397
-
- Local Flow emulator running and ready for development
398
-
- Project creation and management workflow with `flow init`
396
+
- Flow CLI installed and configured for project management.
397
+
- Local Flow emulator running and ready for development.
398
+
- Project creation and management workflow with `flow init`.
399
399
400
400
✅ **Smart Contract Deployment Skills**
401
401
402
-
- Counter contract successfully deployed to your local emulator
403
-
- Account creation and contract deployment configuration mastered
402
+
- Counter contract successfully deployed to your local emulator.
403
+
- Account creation and contract deployment configuration mastered.
404
404
405
405
✅ **Blockchain Interactions**
406
406
407
-
- Scripts to query contract state (reading blockchain data)
408
-
- Transactions to modify contract state (writing to blockchain)
409
-
- Real-time interaction with blockchain data through CLI commands
407
+
- Scripts to query contract state (reading blockchain data).
408
+
- Transactions to modify contract state (writing to blockchain).
409
+
- Real-time interaction with blockchain data through CLI commands.
410
410
411
411
### Resources for Continued Learning
412
412
413
413
As you continue your Flow development journey:
414
414
415
-
-**[Flow Discord Community]**: Connect with other developers, get help, and share your projects
416
-
-**[Cadence Language Reference]**: Deep dive into Flow's programming language features and best practices
417
-
-**[Flow GitHub]**: Explore open source tools, examples, and contribute to the ecosystem
415
+
-**[Flow Discord Community]**: Connect with other developers, get help, and share your projects.
416
+
-**[Cadence Language Reference]**: Deep dive into Flow's programming language features and best practices.
417
+
-**[Flow GitHub]**: Explore open source tools, examples, and contribute to the ecosystem.
418
418
419
419
The foundation you've built today will serve you well as you explore Flow's capabilities and build applications that take advantage of blockchain's unique properties: permanence, transparency, and decentralization.
0 commit comments