diff --git a/docs/src/SUMMARY.md b/docs/src/SUMMARY.md index 53a48bd..d2a7caf 100644 --- a/docs/src/SUMMARY.md +++ b/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) diff --git a/docs/src/chapter_2.md b/docs/src/chapter_2.md index 8351ea8..fee650a 100644 --- a/docs/src/chapter_2.md +++ b/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) \ No newline at end of file +2. [Environment](./chapter_2/subchapter_2.md) +3. [Tool version](./chapter_2/subchapter_3.md) \ No newline at end of file diff --git a/docs/src/chapter_2/subchapter_1.md b/docs/src/chapter_2/subchapter_1.md index 75056f2..f01c79e 100644 --- a/docs/src/chapter_2/subchapter_1.md +++ b/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 + git@github.com: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 - ``` \ No newline at end of file + ``` + +**PS: The executable automatically installs Scarb and Starknet Foundry, if you do not have them installed locally.** \ No newline at end of file diff --git a/docs/src/chapter_2/subchapter_2.md b/docs/src/chapter_2/subchapter_2.md index 0e49999..dd4dfac 100644 --- a/docs/src/chapter_2/subchapter_2.md +++ b/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: diff --git a/docs/src/chapter_2/subchapter_3.md b/docs/src/chapter_2/subchapter_3.md new file mode 100644 index 0000000..8106c62 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/docs/src/chapter_3/subchapter_1.md b/docs/src/chapter_3/subchapter_1.md index 8ba97fa..ecc03b3 100644 --- a/docs/src/chapter_3/subchapter_1.md +++ b/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: diff --git a/docs/src/chapter_3/subchapter_2.md b/docs/src/chapter_3/subchapter_2.md index 3356945..41f54e2 100644 --- a/docs/src/chapter_3/subchapter_2.md +++ b/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 diff --git a/docs/src/chapter_3/subchapter_3.md b/docs/src/chapter_3/subchapter_3.md index 673895d..0aad35e 100644 --- a/docs/src/chapter_3/subchapter_3.md +++ b/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 diff --git a/docs/src/chapter_3/subchapter_7.md b/docs/src/chapter_3/subchapter_7.md new file mode 100644 index 0000000..0c68dfe --- /dev/null +++ b/docs/src/chapter_3/subchapter_7.md @@ -0,0 +1 @@ +# App Light/Dark mode diff --git a/docs/src/chapter_5.md b/docs/src/chapter_5.md index dac5442..bf9028e 100644 --- a/docs/src/chapter_5.md +++ b/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= +``` + +### Build Dojo Project +To build your dojo project, from the base repository run: +``` +npm run build-dojo --name= +``` + +### Deploy Katana +To build deploy katana, from the base repository run: +``` +npm run deploy-dojo-katana --name= +``` + +### Migrate Dojo Project +To migrate your dojo project, from the base repository run: +``` +npm run migrate-dojo --name= +``` + + ## User Interface Scripts The following are scripts from `Starknet-Scaffold` for handling the user interface. diff --git a/website/app/components/Hero.tsx b/website/app/components/Hero.tsx index 4cd3d68..4e91838 100644 --- a/website/app/components/Hero.tsx +++ b/website/app/components/Hero.tsx @@ -124,16 +124,14 @@ const Hero = () => { - 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" + >Try Online - 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" + >Docs { to create, declare, and deploy smart contracts alongside build interactive user interfaces.

- - + Docs