Skip to content

Commit efa86e8

Browse files
committed
Cadence getting started edits.
1 parent 44aad70 commit efa86e8

File tree

5 files changed

+184
-184
lines changed

5 files changed

+184
-184
lines changed

docs/blockchain-development-tutorials/cadence/getting-started/building-a-frontend-app.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ After you complete this tutorial, you will be able to:
4040
- [Flow CLI] installed.
4141
- Node.js and npm installed.
4242

43-
## Setting Up the Next.js App
43+
## Set Up the Next.js app
4444

4545
Follow these steps to set up your Next.js project and integrate [**@onflow/react-sdk**].
4646

@@ -50,7 +50,7 @@ You can visit this [React-sdk Demo] to see how the hooks and components are used
5050

5151
:::
5252

53-
### Step 1: Create a New Next.js App
53+
### Step 1: Create a new Next.js app
5454

5555
Run the following command in your project directory:
5656

@@ -66,7 +66,7 @@ During setup, choose the following options:
6666

6767
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).
6868

69-
### Step 2: Move the Next.js App Up a Directory
69+
### Step 2: Move the Next.js app Up a directory
7070

7171
Move the contents of the `kit-app-quickstart` directory into your project root. You can use the gui in your editor, or the console.
7272

@@ -108,7 +108,7 @@ npm install @onflow/react-sdk
108108

109109
This library wraps FCL internally and exposes a set of hooks for authentication, querying, sending transactions, and tracking transaction status.
110110

111-
## Configuring the Local Flow Emulator and Dev Wallet
111+
## Configure the local Flow Emulator and Dev Wallet
112112

113113
:::warning
114114

@@ -136,7 +136,7 @@ flow dev-wallet
136136

137137
This will start the [Dev Wallet] on `http://localhost:8701`, which you'll use for authentication during development.
138138

139-
## Wrapping Your App with FlowProvider
139+
## Wrap Your app with FlowProvider
140140

141141
[**@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:
142142

@@ -174,11 +174,11 @@ This configuration initializes the kit with your local emulator settings and map
174174

175175
For more information on Discovery configurations, refer to the [Wallet Discovery Guide].
176176

177-
## Interacting With the Chain
177+
## Interact With the chain
178178

179179
Now that we've set our provider, lets start interacting with the chain.
180180

181-
### Querying the Chain
181+
### Query the chain
182182

183183
First, use the kit's [`useFlowQuery`] hook to read the current counter value from the blockchain.
184184

@@ -212,7 +212,7 @@ This script fetches the counter value, formats it via the `NumberFormatter`, and
212212

213213
:::
214214

215-
### Sending a Transaction
215+
### Send a transaction
216216

217217
Next, use the kit's [`useFlowMutate`] hook to send a transaction that increments the counter.
218218

@@ -250,7 +250,7 @@ const handleIncrement = () => {
250250

251251
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.
252252

253-
### Subscribing to Transaction Status
253+
### Subscribe to transaction status
254254

255255
Use the kit's [`useFlowTransactionStatus`] hook to monitor and display the transaction status in real time.
256256

@@ -282,7 +282,7 @@ useEffect(() => {
282282
- 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.
283283
- The `statusString` property gives a human-readable version of the current status you can display in the UI.
284284

285-
#### Why `Executed` is Recommended for UI Updates:
285+
#### Why we recommend `Executed` for UI Updates:
286286

287287
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.
288288

@@ -291,7 +291,7 @@ However:
291291
- If you're dealing with critical state changes (for example, token transfers or contract deployments), prefer waiting for `Sealed`.
292292
- For non-critical UI updates, `Executed` is usually safe and significantly improves perceived performance.
293293

294-
### Integrating Authentication and Building the Complete UI
294+
### Integrate authentication and build the complete UI
295295

296296
Finally, integrate the query, mutation, and transaction status hooks with authentication using `useFlowCurrentUser`. Combine all parts to build the complete page.
297297

@@ -417,7 +417,7 @@ In this tutorial, we inlined Cadence code for simplicity. For real projects, we
417417

418418
:::
419419

420-
## Running the App
420+
## Run the app
421421

422422
Start your development server:
423423

docs/blockchain-development-tutorials/cadence/getting-started/cadence-environment-setup.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@ keywords:
1717
- VSCode extension
1818
---
1919

20-
# Cadence Environment Setup
20+
# Cadence environment eetup
2121

2222
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.
2323

2424
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.
2525

26-
## What You'll Learn
26+
## What you'll learn
2727

2828
After you complete this tutorial, you'll be able to:
2929

@@ -34,7 +34,7 @@ After you complete this tutorial, you'll be able to:
3434
- **Understand Flow's account model** and how contracts are deployed to account storage.
3535
- **Navigate the Flow ecosystem** and know where to find help and resources.
3636

37-
## What You'll Build
37+
## What you'll build
3838

3939
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:
4040

@@ -74,7 +74,7 @@ flow version
7474

7575
You will see output showing your Flow CLI version.
7676

77-
### Install VSCode Extension
77+
### Install VSCode extension
7878

7979
Install the [Flow Cadence VSCode Extension] from the marketplace. This extension provides:
8080

@@ -83,7 +83,7 @@ Install the [Flow Cadence VSCode Extension] from the marketplace. This extension
8383
- Error checking and diagnostics.
8484
- Integrated development tools.
8585

86-
## Create Your First Project
86+
## Create your first project
8787

8888
Navigate to your desired development directory and create a new Flow project:
8989

@@ -118,7 +118,7 @@ For additional details on how `flow.json` is configured, review the [configurati
118118

119119
:::
120120

121-
### Start the Flow Emulator
121+
### Start the Flow emulator
122122

123123
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`.
124124

@@ -135,11 +135,11 @@ Keep this terminal running. The emulator provides:
135135
- No real-world costs.
136136
- Complete Flow feature set.
137137

138-
## Your First Contract
138+
## Your first contract
139139

140140
Now let's examine, deploy, and interact with the Counter contract that was created in your project.
141141

142-
### Examine the Counter Contract
142+
### Examine the Counter contract
143143

144144
Open `cadence/contracts/Counter.cdc` in your editor. Let's break down this contract:
145145

@@ -177,7 +177,7 @@ access(all) contract Counter {
177177
}
178178
```
179179

180-
**Key Components:**
180+
**Key components:**
181181

182182
- **Contract Declaration**: `access(all) contract Counter` creates a public contract named Counter.
183183
- **State Variable**: `access(all) var count: Int` stores the counter value, accessible to everyone.
@@ -188,7 +188,7 @@ access(all) contract Counter {
188188
- `decrement()`: Decreases count by 1 and emits an event
189189
- `getCount()`: Returns the current count (read-only, marked with `view`)
190190

191-
### Create and Configure Deployment Account
191+
### Create and configure deployment account
192192

193193
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.
194194

@@ -242,7 +242,7 @@ This shows which networks your configured accounts are accessible on:
242242

243243
This is a great tool to visualize your different accounts and balances when you are developing.
244244

245-
### Configure Contract Deployment
245+
### Configure contract deployment
246246

247247
To deploy the `Counter` contract to the emulator, you'll need to add it to your project configuration. To do this, run:
248248

@@ -259,7 +259,7 @@ Follow the prompts:
259259

260260
This configures your `flow.json` to deploy the Counter contract to your test account on the emulator.
261261

262-
### Deploy the Contract
262+
### Deploy the contract
263263

264264
To deploy the `Counter` contract to the emulator, run:
265265

@@ -279,7 +279,7 @@ Counter -> 0x179b6b1cb6755e31 (a98c155fe7afc8eb2af5551748759b08a80a0ae85d1b09f92
279279

280280
That's it! You've just deployed your first contract to the Flow Emulator.
281281

282-
### Verify Deployment with a Script
282+
### Verify deployment with a script
283283

284284
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:
285285

@@ -315,9 +315,9 @@ To learn more about writing scripts, check out the docs for [basic scripts].
315315

316316
:::
317317

318-
### Executing Transactions
318+
### Execute transactions
319319

320-
Now let's increment the counter using a transaction:
320+
Now let's increment the counter with a transaction:
321321

322322
```zsh
323323
flow transactions send cadence/transactions/IncrementCounter.cdc
@@ -391,24 +391,24 @@ To learn more about writing transactions, read the docs for [basic transactions]
391391

392392
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:
393393

394-
**Complete Flow Development Environment**
394+
**Complete Flow development environment**
395395

396396
- Flow CLI installed and configured for project management.
397397
- Local Flow emulator running and ready for development.
398398
- Project creation and management workflow with `flow init`.
399399

400-
**Smart Contract Deployment Skills**
400+
**Smart contract deployment skills**
401401

402402
- Counter contract successfully deployed to your local emulator.
403403
- Account creation and contract deployment configuration mastered.
404404

405-
**Blockchain Interactions**
405+
**Blockchain interactions**
406406

407407
- Scripts to query contract state (reading blockchain data).
408408
- Transactions to modify contract state (writing to blockchain).
409409
- Real-time interaction with blockchain data through CLI commands.
410410

411-
### Resources for Continued Learning
411+
### Resources for continued learning
412412

413413
As you continue your Flow development journey:
414414

docs/blockchain-development-tutorials/cadence/getting-started/index.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ keywords:
1717
- Production deployment
1818
---
1919

20-
# Getting Started with Cadence
20+
# Getting started with Cadence
2121

2222
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.
2323

@@ -33,7 +33,7 @@ The Cadence is designed for the next generation of apps, games, and digital asse
3333
></iframe>
3434
</div>
3535
36-
## What You'll Learn
36+
## What you'll learn
3737

3838
In this tutorial series, you'll discover how to:
3939

@@ -45,7 +45,7 @@ In this tutorial series, you'll discover how to:
4545
- Deploy applications to testnet and mainnet with production best practices.
4646
- Implement monitoring, security, and maintenance for live blockchain applications.
4747

48-
## What You'll Build
48+
## What you'll build
4949

5050
Throughout these tutorials, you'll build a complete **Counter Application** that demonstrates the core aspects of Flow development:
5151

@@ -56,31 +56,31 @@ Throughout these tutorials, you'll build a complete **Counter Application** that
5656

5757
By the end, you'll have a fully functional blockchain application and the skills to build your own Flow projects.
5858

59-
## Environment Setup
59+
## Environment setup
6060

6161
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.
6262

6363
Tutorial: [Cadence Environment Setup]
6464

65-
## Smart Contract Interaction
65+
## Smart contract interaction
6666

6767
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.
6868

6969
Tutorial: [Smart Contract Interaction]
7070

71-
## Building a Frontend App
71+
## Building a frontend app
7272

7373
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.
7474

7575
Tutorial: [Building a Frontend App]
7676

77-
## Production Deployment
77+
## Production deployment
7878

7979
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.
8080

8181
Tutorial: [Production Deployment]
8282

83-
## Next Steps
83+
## Next steps
8484

8585
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:
8686

0 commit comments

Comments
 (0)