chore: update documentation

docs/src/SUMMARY.md

@@ -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)

docs/src/chapter_2.md

@@ -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)

docs/src/chapter_2/subchapter_1.md

@@ -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
@@ -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.
 
@@ -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
+    [email protected]:horuslabsio/Starknet-Scaffold.git
     ```
 
 2. Navigate to the Project Directory
@@ -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.**

docs/src/chapter_2/subchapter_2.md

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

docs/src/chapter_2/subchapter_3.md

@@ -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

docs/src/chapter_3/subchapter_1.md

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

docs/src/chapter_3/subchapter_2.md

@@ -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
 

docs/src/chapter_3/subchapter_3.md

@@ -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
 

docs/src/chapter_3/subchapter_7.md

@@ -0,0 +1 @@
+# App Light/Dark mode

docs/src/chapter_5.md

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

website/app/components/Hero.tsx

@@ -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"

website/app/components/WhyUs.tsx

@@ -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">