Skip to content

Commit 44aad70

Browse files
committed
First cadence getting started doc edits.
1 parent 71f122b commit 44aad70

File tree

3 files changed

+85
-81
lines changed

3 files changed

+85
-81
lines changed

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

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@ keywords:
2222

2323
# Building a Frontend App
2424

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.
2626

2727
## Objectives
2828

29-
After finishing this guide, you will be able to:
29+
After you complete this tutorial, you will be able to:
3030

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**].
3232
- Read data from a Cadence smart contract (`Counter`) using kit's query hook.
3333
- Send a transaction to update the smart contract's state using kit's mutation hook.
3434
- Monitor a transaction's status in real time using kit's transaction hook.
@@ -92,7 +92,11 @@ Move-Item -Path .\kit-app-quickstart\.* -Destination . -Force
9292
Remove-Item -Recurse -Force .\kit-app-quickstart
9393
```
9494

95-
**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+
:::
96100

97101
### Step 3: Install @onflow/react-sdk
98102

@@ -108,7 +112,7 @@ This library wraps FCL internally and exposes a set of hooks for authentication,
108112

109113
:::warning
110114

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 emulator will 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].
112116

113117
:::
114118

@@ -134,7 +138,7 @@ This will start the [Dev Wallet] on `http://localhost:8701`, which you'll use fo
134138

135139
## Wrapping Your App with FlowProvider
136140

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:
138142

139143
```tsx
140144
'use client';
@@ -244,7 +248,7 @@ const handleIncrement = () => {
244248

245249
#### Explanation
246250

247-
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.
248252

249253
### Subscribing to Transaction Status
250254

@@ -275,7 +279,7 @@ useEffect(() => {
275279
- `2`: **Finalized** – The transaction has been included in a block, but not yet executed.
276280
- `3`: **Executed** – The transaction code has run successfully, but the result has not yet been sealed.
277281
- `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.
279283
- The `statusString` property gives a human-readable version of the current status you can display in the UI.
280284

281285
#### Why `Executed` is Recommended for UI Updates:
@@ -284,7 +288,7 @@ Waiting for `Sealed` provides full onchain confirmation but can introduce a dela
284288

285289
However:
286290

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`.
288292
- For non-critical UI updates, `Executed` is usually safe and significantly improves perceived performance.
289293

290294
### Integrating Authentication and Building the Complete UI
@@ -442,9 +446,9 @@ Then visit [http://localhost:3000](http://localhost:3000) in your browser. You s
442446
- Once logged in, your account address appears with options to **Log Out** and **Increment Count**.
443447
- 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.
444448

445-
## Wrapping Up
449+
## Conclusion
446450

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:
448452

449453
- Wrap your application in a `FlowProvider` to configure blockchain connectivity.
450454
- Use kit hooks such as `useFlowQuery`, `useFlowMutate`, `useFlowTransactionStatus`, and `useFlowCurrentUser` to manage authentication, query onchain data, submit transactions, and monitor their status.

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

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -19,69 +19,69 @@ keywords:
1919

2020
# Cadence Environment Setup
2121

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

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

2626
## What You'll Learn
2727

28-
After completing this tutorial, you'll be able to:
28+
After you complete this tutorial, you'll be able to:
2929

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.
3636

3737
## What You'll Build
3838

39-
You'll work with a `Counter` contracta 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:
4040

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.
4646

4747
**Time Commitment:** Approximately 30-45 minutes
4848

4949
**Prerequisites:**
5050

5151
- Basic command line familiarity
5252
- Code editor (VSCode recommended)
53-
- Node.js installed (for future frontend development)
53+
- `Node.js` installed (for future frontend development)
5454

5555
---
5656

5757
### Install Flow CLI
5858

5959
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.
6060

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:
6262

6363
```zsh
6464
brew install flow-cli
6565
```
6666

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

6969
**Verify Installation:**
7070

7171
```zsh
7272
flow version
7373
```
7474

75-
You should see output showing your Flow CLI version.
75+
You will see output showing your Flow CLI version.
7676

7777
### Install VSCode Extension
7878

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

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.
8585

8686
## Create Your First Project
8787

@@ -93,13 +93,13 @@ flow init
9393

9494
When prompted:
9595

96-
1. **Project name:** Enter your preferred project name
96+
1. **Project name:** Enter your preferred project name.
9797
2. Select `Basic Cadence project (no dependencies)`.
9898

9999
The `flow init` command creates:
100100

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.
103103
- **`cadence/`**: Directory structure for your Cadence code:
104104
- `contracts/`: Smart contract files
105105
- `scripts/`: Read-only blockchain queries
@@ -130,10 +130,10 @@ flow emulator start
130130

131131
Keep this terminal running. The emulator provides:
132132

133-
- Local blockchain environment
134-
- Fast transaction processing
135-
- No real-world costs
136-
- Complete Flow feature set
133+
- Local blockchain environment.
134+
- Fast transaction processing.
135+
- No real-world costs.
136+
- Complete Flow feature set.
137137

138138
## Your First Contract
139139

@@ -179,18 +179,18 @@ access(all) contract Counter {
179179

180180
**Key Components:**
181181

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
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.
186186
- **Public Functions**:
187187
- `increment()`: Increases count by 1 and emits an event
188188
- `decrement()`: Decreases count by 1 and emits an event
189189
- `getCount()`: Returns the current count (read-only, marked with `view`)
190190

191191
### Create and Configure Deployment Account
192192

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

195195
:::info
196196

@@ -211,7 +211,7 @@ When prompted:
211211

212212
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).
213213

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:
215215

216216
```zsh
217217
📋 Account Status Across Networks
@@ -244,7 +244,7 @@ This is a great tool to visualize your different accounts and balances when you
244244

245245
### Configure Contract Deployment
246246

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:
248248

249249
```zsh
250250
flow config add deployment
@@ -267,7 +267,7 @@ To deploy the `Counter` contract to the emulator, run:
267267
flow project deploy
268268
```
269269

270-
You should see output similar to:
270+
You'll see output similar to:
271271

272272
```zsh
273273
Deploying 1 contracts for accounts: test-account
@@ -293,7 +293,7 @@ You should see:
293293
Result: 0
294294
```
295295

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.
297297

298298
If we wanted to generate a new script, we could run:
299299

@@ -311,7 +311,7 @@ For more information about generating Cadence files, see the [Generating Cadence
311311

312312
:::tip
313313

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].
315315

316316
:::
317317

@@ -331,9 +331,9 @@ flow transactions send cadence/transactions/IncrementCounter.cdc --signer test-a
331331

332332
The transaction output shows detailed information including:
333333

334-
- Transaction ID and block information
335-
- Status confirmation (`✅ SEALED`)
336-
- Events emitted (including `CounterIncremented`)
334+
- Transaction ID and block information.
335+
- Status confirmation (`✅ SEALED`).
336+
- Events emitted (including `CounterIncremented`).
337337

338338
```zsh
339339
Transaction ID: 9cc7ac4d3d5239016965aba89b9692d3401a48a090d1ad1a8d9ef9cfca685e6e
@@ -383,7 +383,7 @@ Result: 1
383383

384384
:::tip
385385

386-
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].
387387

388388
:::
389389

@@ -393,28 +393,28 @@ You've successfully established a solid foundation for building on Flow. Let's r
393393

394394
**Complete Flow Development Environment**
395395

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`.
399399

400400
**Smart Contract Deployment Skills**
401401

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.
404404

405405
**Blockchain Interactions**
406406

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.
410410

411411
### Resources for Continued Learning
412412

413413
As you continue your Flow development journey:
414414

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.
418418

419419
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.
420420

0 commit comments

Comments
 (0)