Skip to content

Commit

Permalink
chore: update documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
Darlington02 committed Aug 23, 2024
1 parent 896ce28 commit 86f24b7
Show file tree
Hide file tree
Showing 12 changed files with 82 additions and 46 deletions.
18 changes: 9 additions & 9 deletions docs/src/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
# Summary

- [Chapter 1](./chapter_1.md)
- [Chapter 2](./chapter_2.md)
- [Introduction](./chapter_1.md)
- [Quickstart](./chapter_2.md)
- [Installation](./chapter_2/subchapter_1.md)
- [Environment](./chapter_2/subchapter_2.md)
- [Chapter 3](./chapter_3.md)
- [Tool version](./chapter_2/subchapter_3.md)
- [UI Components](./chapter_3.md)
- [Connect button & Custom Wallet Modal](./chapter_3/subchapter_1.md)
- [Address bar (Displays StarknetID)](./chapter_3/subchapter_2.md)
- [Transactions List](./chapter_3/subchapter_3.md)
- [User modal](./chapter_3/subchapter_4.md)
- [Display account balance](./chapter_3/subchapter_5.md)
- [Switch/display network](./chapter_3/subchapter_6.md)
- [App Light/Dark mode](./chapter_3/subchapter_7.md)
- [Chapter 4](./chapter_4.md)
- [Tour Guide](./chapter_4.md)
- [Deployer](./chapter_4/subchapter_1.md)
- [Burner](./chapter_4/subchapter_2.md)
- [Faucet](./chapter_4/subchapter_3.md)
- [Wikipedia](./chapter_4/subchapter_4.md)
- [Converter](./chapter_4/subchapter_5.md)
- [Address Book](./chapter_4/subchapter_6.md)
- [Chapter 5](./chapter_5.md)
- [Chapter 6](./chapter_6.md)
- [Chapter 7](./chapter_7.md)
- [Chapter 8](./chapter_8.md)
- [Scripts Overview](./chapter_5.md)
- [Devnet](./chapter_6.md)
- [Address Book](./chapter_7.md)
- [Contributing Guide](./chapter_8.md)
3 changes: 2 additions & 1 deletion docs/src/chapter_2.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@
This section covers installation and setting up of the development environment.

1. [Installation](./chapter_2/subchapter_1.md)
2. [Environment](./chapter_2/subchapter_2.md)
2. [Environment](./chapter_2/subchapter_2.md)
3. [Tool version](./chapter_2/subchapter_3.md)
39 changes: 19 additions & 20 deletions docs/src/chapter_2/subchapter_1.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ Before you begin, ensure you have the following tools installed on your system:
* [Node (v18 LTS)](https://nodejs.org/en/download/package-manager)
* [Rust](https://www.rust-lang.org/tools/install)
* [Git](https://git-scm.com/downloads)
* [Scarb](https://docs.swmansion.com/scarb/download.html)
* [Starknet Foundry](https://foundry-rs.github.io/starknet-foundry/getting-started/installation.html)
* [Docker](https://docs.docker.com/get-docker/)

## Installation Methods
Expand All @@ -24,26 +22,25 @@ The recommended way to get started with Starknet-Scaffold is by using the `creat

1. Run the executable

Open your terminal and run one of the following commands depending on your desired setup:

* For a project that needs to utilize our full debugging suite:
```
npx create-starknet-app my-app debugger
```
Open your terminal and run:
```
npx create-starknet-app
```
You'll be prompted for a project name, and a package type, enter both to proceed.
Available package types include:
* **contract-only:** For a project that require just contract-related tools (no frontend).
* For a project that only needs customizable out-of-the-box UI components:
```
npx create-starknet-app my-app basic
```
* **fullstack:** For full stack projects. Provides customizable [out-of-the-box UI](../chapter_3.md) components.
* If you don't specify a type, it defaults to the debugger mode:
```
npx create-starknet-app my-app
```
* **dojo:** For gaming projects which needs access to the dojo stack.
Replace `my-app` with your project name.
* **debugger:** For projects with need to utilize the full debugging suite.
After running the command, follow the prompts to customize your new Starknet application.
Once installation is completed, navigate to the project directory:
```
cd my-project
```
### Method Two: Cloning the repository from GitHub.
Expand All @@ -54,7 +51,7 @@ To get started with Starknet-Scaffold via GitHub, follow these steps:
Clone the Starknet-Scaffold repository from GitHub to your local machine. Open your terminal or command prompt and run the following command:
```
git clone git@github.com:argentlabs/Starknet-Scaffold.git
git@github.com:horuslabsio/Starknet-Scaffold.git
```
2. Navigate to the Project Directory
Expand All @@ -63,4 +60,6 @@ To get started with Starknet-Scaffold via GitHub, follow these steps:
```
cd Starknet-Scaffold
```
```
**PS: The executable automatically installs Scarb and Starknet Foundry, if you do not have them installed locally.**
6 changes: 4 additions & 2 deletions docs/src/chapter_2/subchapter_2.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Getting Started

After setting up your project using either method, follow these steps to get your development environment running smoothly:
After setting up your project, follow these steps to get your development environment running smoothly:

1. Install the required dependencies

Expand All @@ -16,7 +16,9 @@ After setting up your project using either method, follow these steps to get you
npm run install
```

This will download and install all the important packages specified in the `package.json` file.
This will download and install all the important packages specified in the `package.json` file, including Scarb, Starknet Foundry and dojo if not initially present.

**PS:** This is only necessary if you installed by cloning. All these are done automatically when you use the `create-starknet-app` executable.

2. To build your Cairo contracts:

Expand Down
9 changes: 9 additions & 0 deletions docs/src/chapter_2/subchapter_3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Tool version

## Starknet Scaffold v0.5.0
- Cairo: v2.7.0
- Scarb: v2.7.0
- Starknet Foundry: v0.27.0
- starknet-react/chains: v0.1.7
- starknet-react/core: v2.9.0
- Starknet.js: v6.11.0
2 changes: 1 addition & 1 deletion docs/src/chapter_3/subchapter_1.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ The custom connect button is located in the header of the page and facilitates t

The connect wallet modal is a UI component that appears when the connect button is clicked. Its primary function is to allow users to select the wallet they wish to use to connect to the dapp.

The modal is divided in to sections:
The modal is divided into two sections:

- Left side: Lists popular Starknet wallets available for connection, including:

Expand Down
2 changes: 1 addition & 1 deletion docs/src/chapter_3/subchapter_2.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Address Bar

The Address Bar displays the address of the connected account. If the connected wallet has a Starknet.id, the Address Bar will show the Starknet.id profile picture and name. If not, a Blockies-generated image representation of the connected address is displayed alongside a shortened version of the address.
The Address Bar displays the address of the connected account. If the connected wallet has a Starknet.id, the Address Bar will display the Starknet.id pfp and name. If not, a Blockies-generated image representation of the connected address is displayed alongside a shortened version of the address.

## User Modal

Expand Down
4 changes: 2 additions & 2 deletions docs/src/chapter_3/subchapter_3.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ This component displays the list of transactions performed by the connected wall

Each transaction item shows the following:

- Transaction status: represented by icons. The status of a transaction can be one of the following: completed, pending, or failed.
- Transaction status: represented by icons. The status of a transaction can be one of the following: `completed`, `pending`, or `failed`.
- User address
- Transaction time and date
- "See transaction": redirects the user to view the transaction on the Starkscan block explorer.
- "See transaction": redirects the user to view the transaction on a block explorer.

## Import

Expand Down
1 change: 1 addition & 0 deletions docs/src/chapter_3/subchapter_7.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# App Light/Dark mode
29 changes: 29 additions & 0 deletions docs/src/chapter_5.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,35 @@ Confirm that Docker is installed and running to use starknet-devnet. To run devn
npm run devnet
```


## Dojo Scripts
The `contracts` folder contains all the tools needed to write, build, test and deploy dojo projects. It is built with sozo and katana. Here are common operations you can perform on your dojo contracts.

### Initialize Dojo Project
To initialize a dojo project, from the base repository:
```
npm run initialize-dojo --name=<PROJECT_NAME>
```

### Build Dojo Project
To build your dojo project, from the base repository run:
```
npm run build-dojo --name=<PROJECT_NAME>
```

### Deploy Katana
To build deploy katana, from the base repository run:
```
npm run deploy-dojo-katana --name=<PROJECT_NAME>
```

### Migrate Dojo Project
To migrate your dojo project, from the base repository run:
```
npm run migrate-dojo --name=<PROJECT_NAME>
```


## User Interface Scripts

The following are scripts from `Starknet-Scaffold` for handling the user interface.
Expand Down
10 changes: 4 additions & 6 deletions website/app/components/Hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -124,16 +124,14 @@ const Hero = () => {
<Link
target="_blank"
href="https://app.starknetscaffold.xyz"
className="border-solid h-[2.5rem] border-dark-font-color border-[2px] min-w-[6rem] px-2 py-1 rounded-[4px] hover:bg-[#f98862] hover:rounded-[20px] transition-all duration-400"
>
Try Online
className="border-solid h-[2.5rem] border-dark-font-color grid place-content-center border-[2px] min-w-[6rem] px-2 py-1 rounded-[4px] hover:bg-[#f98862] hover:rounded-[20px] transition-all duration-400"
><span>Try Online</span>
</Link>
<Link
target="_blank"
href="https://docs.starknetscaffold.xyz"
className="border-solid h-[2.5rem] border-dark-font-color border-[2px] min-w-[6rem] px-2 py-1 rounded-[4px] hover:bg-[#f98862] hover:rounded-[20px] transition-all duration-400"
>
Docs
className="border-solid h-[2.5rem] border-dark-font-color grid place-content-center border-[2px] min-w-[6rem] px-2 py-1 rounded-[4px] hover:bg-[#f98862] hover:rounded-[20px] transition-all duration-400"
><span>Docs</span>
</Link>
<Link
target="_blank"
Expand Down
5 changes: 1 addition & 4 deletions website/app/components/WhyUs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,7 @@ const WhyUs = () => {
to create, declare, and deploy smart contracts alongside build
interactive user interfaces.
</p>
<a href="https://github.com/argentlabs/Starknet-Scaffold#readme">
<button className="border-solid border-[#B4B4B4] border-[2px] min-w-[6rem] px-2 py-1 rounded-[8px] w-fit hover:rounded-[20px] transition-all duration-400 ">
Docs
</button>
<a href="https://docs.starknetscaffold.xyz" className="border-solid border-[#B4B4B4] border-[2px] min-w-[6rem] Try Online px-2 py-1 rounded-[8px] w-fit hover:rounded-[20px] transition-all duration-400"><span>Docs</span>
</a>
</figure>
<div className="w-full flex flex-col gap-4">
Expand Down

0 comments on commit 86f24b7

Please sign in to comment.