Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nialexsan/v3 guides move #437

Merged
merged 17 commits into from
Nov 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/build/getting-started/explore-more.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Below are some additional tutorials to help you get started with Flow:
{
type: 'link',
label: 'Flow App Quickstart',
href: '/guides/flow-app-quickstart',
href: '/build/guides/flow-app-quickstart',
description: 'Simple walkthrough building a web3 app using the Flow Client Library (FCL)',
customProps: {
icon: <FontAwesomeIcon icon={faWindowMaximize} className="h-16" />,
Expand All @@ -30,7 +30,7 @@ Below are some additional tutorials to help you get started with Flow:
{
type: 'link',
label: 'Fungible Token Guide',
href: '/guides/fungible-token',
href: '/build/guides/fungible-token',
description: 'Steps to create, deploy, mint, and transfer fungible tokens on Flow',
customProps: {
icon: <FontAwesomeIcon icon={faCoins} className="h-16" />,
Expand Down Expand Up @@ -58,7 +58,7 @@ Below are some additional tutorials to help you get started with Flow:
{
type: 'link',
label: 'Walkthrough Guides',
href: '/guides/flow-app-quickstart',
href: '/build/guides/flow-app-quickstart',
description: 'Longer form guides to help you get started with Flow',
customProps: {
icon: <FontAwesomeIcon icon={faBook} className="h-16" />,
Expand Down
2 changes: 1 addition & 1 deletion docs/build/getting-started/quickstarts/fcl-quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,4 +138,4 @@ You just built an app on Flow!

## Mutating Chain State and More

For a deeper dive into writing an FCL app, such as how to change the chain state with FCL, check out [this guide](../../../guides/flow-app-quickstart.md) or the [FCL documentation](../../../tools/clients/fcl-js/index.md).
For a deeper dive into writing an FCL app, such as how to change the chain state with FCL, check out [this guide](../../guides/flow-app-quickstart.md) or the [FCL documentation](../../../tools/clients/fcl-js/index.md).
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"label": "Guides",
"position": 1
"position": 7
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Flow App Quickstart
sidebar_label: Flow App Quickstart
description: Building an application on Flow
sidebar_position: 2
sidebar_position: 4
sidebar_custom_props:
icon: 🏗️
---
Expand All @@ -14,7 +14,7 @@ sidebar_custom_props:
This guide is a simple walkthrough to get started building a web3 app using the Flow Client Library (FCL).

<Callout type="info">
If you are looking for a scalfolds, check out [scaffolds available in the Flow CLI](../tools/flow-cli/super-commands.md#using-scaffolds).
If you are looking for a scalfolds, check out [scaffolds available in the Flow CLI](../../tools/flow-cli/super-commands.md#using-scaffolds).
</Callout>

This simple guide uses the "Hello World" scaffold, it is meant to provide all the code needed to get a web application up and running.
Expand All @@ -24,10 +24,10 @@ This simple guide uses the "Hello World" scaffold, it is meant to provide all th
![Flow app anatomy](flow-dapp-anatomy.png)

<Callout type="info">
FCL (aka Flow Client Library) wraps the logic needed to communicate with the Flow blockchain. It's a npm package, [More Information](../tools/clients/fcl-js)
FCL (aka Flow Client Library) wraps the logic needed to communicate with the Flow blockchain. It's a npm package, [More Information](../../tools/clients/fcl-js)
</Callout>

This guide assumes a good understanding of React. The concepts are easy to understand and apply to other libraries and framework. A strong understanding of Cadence (Flow's smart contract language) is not required. More information on Cadence, [learning the Cadence language](../build/cadence.md).
This guide assumes a good understanding of React. The concepts are easy to understand and apply to other libraries and framework. A strong understanding of Cadence (Flow's smart contract language) is not required. More information on Cadence, [learning the Cadence language](./smart-contracts/cadence.md).

### FCL concepts covered:

Expand All @@ -42,7 +42,7 @@ For more help, [Discord](https://discord.gg/flow). See links at the end of this

## Installation

Make sure you have Flow CLI installed. [installation instructions](../tools/flow-cli/install.md).
Make sure you have Flow CLI installed. [installation instructions](../../tools/flow-cli/install.md).

## Configuration

Expand All @@ -58,7 +58,7 @@ npm install
# run the app in a later step
```

We don't recommend keeping private keys in your `flow.json`, notice that Flow CLI already moved the emulator private key to a `emulator.key` file and point to it using the [key/location pattern](../tools/flow-cli/flow.json/security.md#private-account-configuration-file). This file should be added to your `.gitignore` file, so it won't be committed to your repository.
We don't recommend keeping private keys in your `flow.json`, notice that Flow CLI already moved the emulator private key to a `emulator.key` file and point to it using the [key/location pattern](../../tools/flow-cli/flow.json/security.md#private-account-configuration-file). This file should be added to your `.gitignore` file, so it won't be committed to your repository.

We won't be using emulator and running contracts locally in this quickstart, but FCL will complain if it finds private keys in your `flow.json` file.

Expand All @@ -85,7 +85,7 @@ Your `flow.json` file should look like this:
```

<Callout type="info">
The `flow.json` file is used to keep track of deployed contracts and accounts. [More Information](../tools/clients/fcl-js/api#using-flowjson)
The `flow.json` file is used to keep track of deployed contracts and accounts. [More Information](../../tools/clients/fcl-js/api#using-flowjson)
</Callout>


Expand All @@ -104,7 +104,7 @@ The `hello-world` web application comes with convenience npm commands to facilit
3. Start web app

<Callout type="info">
Emulator is a local blockchain [More Information](../tools/emulator/index.md). Emulator has all the features as testnet and mainnet blockchains
Emulator is a local blockchain [More Information](../../tools/emulator/index.md). Emulator has all the features as testnet and mainnet blockchains
</Callout>

```sh
Expand All @@ -113,12 +113,12 @@ npm run dev:local

Now that your app is running. FCL loads the configuration in `config/fcl.ts` This file contains configuration information for FCL, such as what Access Node and wallet discovery endpoint and which network to use (e.g. testnet or a local emulator).

- `accessNode.api` key specifies the address of a Flow access node. There are publically available access nodes, but have to rate limit. Alternatively, applications might want to run an Observer node [Run a Node](../references/run-and-secure/node-operation/observer-node.mdx).
- `accessNode.api` key specifies the address of a Flow access node. There are publically available access nodes, but have to rate limit. Alternatively, applications might want to run an Observer node [Run a Node](../../references/run-and-secure/node-operation/observer-node.mdx).
- `discovery.wallet` is an address that points to a service that lists FCL compatible wallets. Flow's FCL Discovery service is a service that FCL wallet providers can be added to, and be made 'discoverable' to any application that uses the `discovery.wallet` endpoint.

Also, notice that `package.json` uses `NEXT_PUBLIC_FLOW_NETWORK=local` for `dev` command, this is used to set the network in `config/fcl.ts`.
<Callout type="info">
Learn more about [configuring Discovery](../tools/clients/fcl-js/discovery.mdx) or [setting configuration values](../tools/clients/fcl-js/api.md#setting-configuration-values).
Learn more about [configuring Discovery](../../tools/clients/fcl-js/discovery.mdx) or [setting configuration values](../../tools/clients/fcl-js/api.md#setting-configuration-values).
</Callout>

The main Next.js app component is located in `pages/_app.tsx`. It should import the config file `config/fcl.ts` already and should look like this:
Expand Down Expand Up @@ -194,11 +194,11 @@ The web app will run, but there are no contracts deployed to local emulator. Thi

Note: in the code above `useCurrentUser` is used to determine if there is a logged in user.

There are two methods to allow the user to login. `fcl.logIn()` or `fcl.authenticate()` [More Information on, authenticate](../tools/clients/fcl-js/api#authenticate)
There are two methods to allow the user to login. `fcl.logIn()` or `fcl.authenticate()` [More Information on, authenticate](../../tools/clients/fcl-js/api#authenticate)

In `components/Navbar.tsx` a button wires up the authentication method `fcl.authenticate()`. It is used to bring up the list of supported wallets. See below

Once authenticated, FCL uses a hook `const user = useCurrentUser()` to get the user data, when user is signed in `user.loggedIn` flag is `true`. For more information on the `currentUser`, read more [here](../tools/clients/fcl-js/api.md#current-user).
Once authenticated, FCL uses a hook `const user = useCurrentUser()` to get the user data, when user is signed in `user.loggedIn` flag is `true`. For more information on the `currentUser`, read more [here](../../tools/clients/fcl-js/api.md#current-user).

```jsx
import Head from 'next/head'
Expand Down Expand Up @@ -304,7 +304,7 @@ Verify that `flow.json` updates with HelloWorld contract information, `contracts
}
```

For more information on deployments check [Flow CLI](../tools/flow-cli/flow.json/manage-configuration.md) documentation
For more information on deployments check [Flow CLI](../../tools/flow-cli/flow.json/manage-configuration.md) documentation

## Query the Blockchain

Expand Down Expand Up @@ -383,11 +383,11 @@ That's it! You now have Flow app that uses auth, query and mutate the chain. Thi
- [Beginner Example: CryptoDappy](https://github.com/bebner/crypto-dappy)

**More FCL**
- [FCL API Quick Reference](../tools/clients/fcl-js/api)
- [More on Scripts](../tools/clients/fcl-js/scripts.mdx)
- [More on Transactions](../tools/clients/fcl-js/transactions.mdx)
- [User Signatures](../tools/clients/fcl-js/user-signatures.mdx)
- [Proving Account Ownership](../tools/clients/fcl-js/proving-authentication.mdx)
- [FCL API Quick Reference](../../tools/clients/fcl-js/api)
- [More on Scripts](../../tools/clients/fcl-js/scripts.mdx)
- [More on Transactions](../../tools/clients/fcl-js/transactions.mdx)
- [User Signatures](../../tools/clients/fcl-js/user-signatures.mdx)
- [Proving Account Ownership](../../tools/clients/fcl-js/proving-authentication.mdx)

**Other**
- [Flow Developer Onboarding Guide](/tutorials/intro.md)
- [Flow Developer Onboarding Guide](../../tutorials/intro.md)
11 changes: 5 additions & 6 deletions docs/guides/flow-cli.md → docs/build/guides/flow-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@
title: Flow CLI
sidebar_label: Install Flow CLI
description: Guide to installing and using Flow CLI
sidebar_position: 2
sidebar_position: 5
---

## Installation

## macOS
## MacOS

### Homebrew

Expand All @@ -28,6 +26,7 @@ sh -ci "$(curl -fsSL https://raw.githubusercontent.com/onflow/flow-cli/master/in
To update, simply re-run the installation command above.

It is currently not possible to install earlier versions of the Flow CLI with Homebrew.

## Linux

### From a pre-built binary
Expand All @@ -50,7 +49,7 @@ To install a specific version of Flow CLI newer than v0.42.0, append the version
sh -ci "$(curl -fsSL https://raw.githubusercontent.com/onflow/flow-cli/master/install.sh)" -- v0.44.0
```

To install a version older than v0.42.0, refer to [Installing versions before 0.42.0](../tools/flow-cli/install.md#installing-versions-before-0420) below.
To install a version older than v0.42.0, refer to [Installing versions before 0.42.0](../../tools/flow-cli/install.md#installing-versions-before-0420) below.

## Windows

Expand Down Expand Up @@ -109,4 +108,4 @@ And then the flow dev:

### Next steps

As part of the next steps you can read more about [flow dev command](../tools/flow-cli/super-commands.md).
As part of the next steps you can read more about [flow dev command](../../tools/flow-cli/super-commands.md).
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: How to Create a Fungible Token on Flow
sidebar_label: Create a Fungible Token
description: Guide to creating a fungible token on Flow with the Flow CLI and Cadence.
sidebar_position: 4
sidebar_position: 2
---

This article will guide you through the steps to create, deploy, mint, and transfer fungible tokens on Flow.
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/nft.md → docs/build/guides/nft.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: How to Create an NFT Project on Flow
sidebar_label: Create an NFT Project
description: Guide to creating an NFT Project with the Flow CLI and Cadence.
sidebar_position: 5
sidebar_position: 3
---

This tutorial dives into the technical steps required to craft an NFT on the Flow blockchain, providing developers with a clear roadmap from setup to deployment.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
label: Writing and Deploying Smart Contracts
position: 3
position: 1
customProps:
icon: 🧱
description: How to deploy smart contracts to mainnet and testnet
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 2
sidebar_position: 1
---

# Intro to Cadence
Expand Down
Loading