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
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -40,7 +40,7 @@ After you complete this tutorial, you will be able to:
40
40
-[Flow CLI] installed.
41
41
- Node.js and npm installed.
42
42
43
-
## Setting Up the Next.js App
43
+
## Set Up the Next.js app
44
44
45
45
Follow these steps to set up your Next.js project and integrate [**@onflow/react-sdk**].
46
46
@@ -50,7 +50,7 @@ You can visit this [React-sdk Demo] to see how the hooks and components are used
50
50
51
51
:::
52
52
53
-
### Step 1: Create a New Next.js App
53
+
### Step 1: Create a new Next.js app
54
54
55
55
Run the following command in your project directory:
56
56
@@ -66,7 +66,7 @@ During setup, choose the following options:
66
66
67
67
This command creates a new Next.js project named `kit-app-quickstart` inside your current directory. We're generating the frontend in a subdirectory so we can next move it into our existing project structure from the previous steps (you can't create an app in a non-empty directory).
68
68
69
-
### Step 2: Move the Next.js App Up a Directory
69
+
### Step 2: Move the Next.js app Up a directory
70
70
71
71
Move the contents of the `kit-app-quickstart` directory into your project root. You can use the gui in your editor, or the console.
72
72
@@ -108,7 +108,7 @@ npm install @onflow/react-sdk
108
108
109
109
This library wraps FCL internally and exposes a set of hooks for authentication, querying, sending transactions, and tracking transaction status.
110
110
111
-
## Configuring the Local Flow Emulator and Dev Wallet
111
+
## Configure the local Flow Emulator and Dev Wallet
112
112
113
113
:::warning
114
114
@@ -136,7 +136,7 @@ flow dev-wallet
136
136
137
137
This will start the [Dev Wallet] on `http://localhost:8701`, which you'll use for authentication during development.
138
138
139
-
## Wrapping Your App with FlowProvider
139
+
## Wrap Your app with FlowProvider
140
140
141
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:
142
142
@@ -174,11 +174,11 @@ This configuration initializes the kit with your local emulator settings and map
174
174
175
175
For more information on Discovery configurations, refer to the [Wallet Discovery Guide].
176
176
177
-
## Interacting With the Chain
177
+
## Interact With the chain
178
178
179
179
Now that we've set our provider, lets start interacting with the chain.
180
180
181
-
### Querying the Chain
181
+
### Query the chain
182
182
183
183
First, use the kit's [`useFlowQuery`] hook to read the current counter value from the blockchain.
184
184
@@ -212,7 +212,7 @@ This script fetches the counter value, formats it via the `NumberFormatter`, and
212
212
213
213
:::
214
214
215
-
### Sending a Transaction
215
+
### Send a transaction
216
216
217
217
Next, use the kit's [`useFlowMutate`] hook to send a transaction that increments the counter.
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.
252
252
253
-
### Subscribing to Transaction Status
253
+
### Subscribe to transaction status
254
254
255
255
Use the kit's [`useFlowTransactionStatus`] hook to monitor and display the transaction status in real time.
256
256
@@ -282,7 +282,7 @@ useEffect(() => {
282
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.
283
283
- The `statusString` property gives a human-readable version of the current status you can display in the UI.
284
284
285
-
#### Why `Executed` is Recommended for UI Updates:
285
+
#### Why we recommend `Executed` for UI Updates:
286
286
287
287
Waiting for `Sealed` provides full onchain confirmation but can introduce a delay — especially in local or test environments. Since most transactions (like incrementing a counter) don't require strong finality guarantees, you can typically refetch data once the transaction reaches `Executed` for a faster, more responsive user experience.
288
288
@@ -291,7 +291,7 @@ However:
291
291
- If you're dealing with critical state changes (for example, token transfers or contract deployments), prefer waiting for `Sealed`.
292
292
- For non-critical UI updates, `Executed` is usually safe and significantly improves perceived performance.
293
293
294
-
### Integrating Authentication and Building the Complete UI
294
+
### Integrate authentication and build the complete UI
295
295
296
296
Finally, integrate the query, mutation, and transaction status hooks with authentication using `useFlowCurrentUser`. Combine all parts to build the complete page.
297
297
@@ -417,7 +417,7 @@ In this tutorial, we inlined Cadence code for simplicity. For real projects, we
Copy file name to clipboardExpand all lines: docs/blockchain-development-tutorials/cadence/getting-started/cadence-environment-setup.md
+19-19Lines changed: 19 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,13 +17,13 @@ keywords:
17
17
- VSCode extension
18
18
---
19
19
20
-
# Cadence Environment Setup
20
+
# Cadence environment eetup
21
21
22
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
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
-
## What You'll Learn
26
+
## What you'll learn
27
27
28
28
After you complete this tutorial, you'll be able to:
29
29
@@ -34,7 +34,7 @@ After you complete this tutorial, you'll be able to:
34
34
-**Understand Flow's account model** and how contracts are deployed to account storage.
35
35
-**Navigate the Flow ecosystem** and know where to find help and resources.
36
36
37
-
## What You'll Build
37
+
## What you'll build
38
38
39
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
@@ -74,7 +74,7 @@ flow version
74
74
75
75
You will see output showing your Flow CLI version.
76
76
77
-
### Install VSCode Extension
77
+
### Install VSCode extension
78
78
79
79
Install the [Flow Cadence VSCode Extension] from the marketplace. This extension provides:
80
80
@@ -83,7 +83,7 @@ Install the [Flow Cadence VSCode Extension] from the marketplace. This extension
83
83
- Error checking and diagnostics.
84
84
- Integrated development tools.
85
85
86
-
## Create Your First Project
86
+
## Create your first project
87
87
88
88
Navigate to your desired development directory and create a new Flow project:
89
89
@@ -118,7 +118,7 @@ For additional details on how `flow.json` is configured, review the [configurati
118
118
119
119
:::
120
120
121
-
### Start the Flow Emulator
121
+
### Start the Flow emulator
122
122
123
123
The emulator is a local version of the Flow blockchain that you can use to test your contracts and scripts. It's a great way to develop and test your contracts locally - before you try them on the `testnet` or `mainnet`.
124
124
@@ -135,11 +135,11 @@ Keep this terminal running. The emulator provides:
135
135
- No real-world costs.
136
136
- Complete Flow feature set.
137
137
138
-
## Your First Contract
138
+
## Your first contract
139
139
140
140
Now let's examine, deploy, and interact with the Counter contract that was created in your project.
141
141
142
-
### Examine the Counter Contract
142
+
### Examine the Counter contract
143
143
144
144
Open `cadence/contracts/Counter.cdc` in your editor. Let's break down this contract:
-`decrement()`: Decreases count by 1 and emits an event
189
189
-`getCount()`: Returns the current count (read-only, marked with `view`)
190
190
191
-
### Create and Configure Deployment Account
191
+
### Create and configure deployment account
192
192
193
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
@@ -242,7 +242,7 @@ This shows which networks your configured accounts are accessible on:
242
242
243
243
This is a great tool to visualize your different accounts and balances when you are developing.
244
244
245
-
### Configure Contract Deployment
245
+
### Configure contract deployment
246
246
247
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
@@ -259,7 +259,7 @@ Follow the prompts:
259
259
260
260
This configures your `flow.json` to deploy the Counter contract to your test account on the emulator.
261
261
262
-
### Deploy the Contract
262
+
### Deploy the contract
263
263
264
264
To deploy the `Counter` contract to the emulator, run:
That's it! You've just deployed your first contract to the Flow Emulator.
281
281
282
-
### Verify Deployment with a Script
282
+
### Verify deployment with a script
283
283
284
284
Scripts are used to read data from the Flow blockchain. There is no state modification. Let's verify the deployment by reading the counter value. Run the included script:
285
285
@@ -315,9 +315,9 @@ To learn more about writing scripts, check out the docs for [basic scripts].
315
315
316
316
:::
317
317
318
-
### Executing Transactions
318
+
### Execute transactions
319
319
320
-
Now let's increment the counter using a transaction:
320
+
Now let's increment the counter with a transaction:
@@ -391,24 +391,24 @@ To learn more about writing transactions, read the docs for [basic transactions]
391
391
392
392
You've successfully established a solid foundation for building on Flow. Let's recap what you've accomplished and learned. Through this hands-on tutorial, you've successfully built a complete Flow development foundation:
393
393
394
-
✅ **Complete Flow Development Environment**
394
+
✅ **Complete Flow development environment**
395
395
396
396
- Flow CLI installed and configured for project management.
397
397
- Local Flow emulator running and ready for development.
398
398
- Project creation and management workflow with `flow init`.
399
399
400
-
✅ **Smart Contract Deployment Skills**
400
+
✅ **Smart contract deployment skills**
401
401
402
402
- Counter contract successfully deployed to your local emulator.
403
403
- Account creation and contract deployment configuration mastered.
404
404
405
-
✅ **Blockchain Interactions**
405
+
✅ **Blockchain interactions**
406
406
407
407
- Scripts to query contract state (reading blockchain data).
408
408
- Transactions to modify contract state (writing to blockchain).
409
409
- Real-time interaction with blockchain data through CLI commands.
Copy file name to clipboardExpand all lines: docs/blockchain-development-tutorials/cadence/getting-started/index.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,7 +17,7 @@ keywords:
17
17
- Production deployment
18
18
---
19
19
20
-
# Getting Started with Cadence
20
+
# Getting started with Cadence
21
21
22
22
The Cadence is designed for the next generation of apps, games, and digital assets. This comprehensive tutorial series will guide you from setting up your development environment to deploying production-ready applications on Flow's mainnet while a complete Counter application that demonstrates all essential Flow development patterns.
23
23
@@ -33,7 +33,7 @@ The Cadence is designed for the next generation of apps, games, and digital asse
33
33
></iframe>
34
34
</div>
35
35
36
-
## What You'll Learn
36
+
## What you'll learn
37
37
38
38
In this tutorial series, you'll discover how to:
39
39
@@ -45,7 +45,7 @@ In this tutorial series, you'll discover how to:
45
45
- Deploy applications to testnet and mainnet with production best practices.
46
46
- Implement monitoring, security, and maintenance for live blockchain applications.
47
47
48
-
## What You'll Build
48
+
## What you'll build
49
49
50
50
Throughout these tutorials, you'll build a complete **Counter Application** that demonstrates the core aspects of Flow development:
51
51
@@ -56,31 +56,31 @@ Throughout these tutorials, you'll build a complete **Counter Application** that
56
56
57
57
By the end, you'll have a fully functional blockchain application and the skills to build your own Flow projects.
58
58
59
-
## Environment Setup
59
+
## Environment setup
60
60
61
61
Learn how to set up your Flow development environment and deploy your first smart contract. This foundational tutorial covers CLI installation, project creation, contract deployment, and basic blockchain interaction patterns using the local Flow emulator.
62
62
63
63
Tutorial: [Cadence Environment Setup]
64
64
65
-
## Smart Contract Interaction
65
+
## Smart contract interaction
66
66
67
67
Gain advanced Flow development skills including dependency management, sophisticated transaction patterns, and comprehensive testing strategies. Learn to integrate external contracts, handle complex state changes, and implement test-driven development workflows.
68
68
69
69
Tutorial: [Smart Contract Interaction]
70
70
71
-
## Building a Frontend App
71
+
## Building a frontend app
72
72
73
73
Create a `Next.js` frontend application that interacts with your Flow smart contracts using `@onflow/react-sdk`. Implement wallet authentication, real-time data queries, transaction submission, and status monitoring for a complete user experience.
74
74
75
75
Tutorial: [Building a Frontend App]
76
76
77
-
## Production Deployment
77
+
## Production deployment
78
78
79
79
To take your application live, deploy to Flow's testnet and mainnet networks. Learn security best practices, production configuration, monitoring strategies, and maintenance practices you can use to manage live blockchain applications.
80
80
81
81
Tutorial: [Production Deployment]
82
82
83
-
## Next Steps
83
+
## Next steps
84
84
85
85
After you complete these tutorials, you'll have the fundamental skills needed for Flow development. Consider exploring our other tutorial series to expand your blockchain development expertise:
0 commit comments