🚩 Challenge #0: 🎟 Simple Counter Example

🎫 Create a simple Counter:

👷‍♀️ You'll compile and deploy your first smart contracts. Then, you'll use a template React app full of important components and hooks. Finally, you'll deploy a Counter contract written in RUST to a public network to share with friends! 🚀

🌟 The final deliverable is an app that lets users interact with the counter contract. Deploy your contracts to a testnet, then build and upload your app to a public web server.

Checkpoint 0: 📦 Environment Setup 📚

Before starting, ensure you have the following installed:

Install Rust and Cargo

Install Rust using rustup, which is the recommended way to install Rust:
```
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
Follow the on-screen instructions to complete the installation.
After installation, ensure that the Cargo and Rust binaries are in your PATH. You can do this by adding the following line to your shell configuration file (e.g., ~/.bashrc or ~/.zshrc):
```
export PATH="$HOME/.cargo/bin:$PATH"
```
Then, run:
```
source ~/.bashrc  # or source ~/.zshrc
```

Install Cargo-Stylus

Install cargo-stylus globally using Cargo:
```
cargo install cargo-stylus
```
Add the wasm32-unknown-unknown build target to your Rust compiler:
```
rustup target add wasm32-unknown-unknown
```
You can verify the installation by checking the version:
```
cargo stylus --help
```

For more detailed instructions on cargo-stylus, you can visit the cargo-stylus GitHub repository.

⚠️ IMPORTANT: Please make sure to run the below commands through WSL only. In PowerShell, you'll get an error because some files are not supported on Windows.

🚩 Challenge Setup Instructions

Running Challenges in Ubuntu/Mac or Windows (WSL)

To ensure a smooth experience while running the challenges, follow these instructions based on your operating system:

For Ubuntu/Mac Users:

Open your terminal.

Clone the repository:

git clone -b counter https://github.com/abhi152003/speedrun_stylus.git speedrun_stylus_counter
cd speedrun_stylus_counter
yarn install

Start the local devnode in Docker:

cd packages
cd stylus-demo
bash run-dev-node.sh

In a second terminal window, start your frontend:

cd speedrun_stylus
cd packages
cd nextjs
yarn run dev

Open http://localhost:3000 to see the app.

For Windows Users (Using WSL):

Open your WSL terminal.

Ensure you have set your Git username and email globally:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Clone the repository:

git clone -b counter https://github.com/abhi152003/speedrun_stylus.git
cd speedrun_stylus
yarn install

Start the local devnode in Docker:

cd packages
cd stylus-demo
bash run-dev-node.sh

In a second WSL terminal window, start your frontend:

cd speedrun_stylus
cd packages
cd nextjs
yarn run dev

Open http://localhost:3000 to see the app.

Troubleshooting Common Issues

1. `stylus` Not Recognized

If you encounter an error stating that stylus is not recognized as an external or internal command, run the following command in your terminal:

sudo apt-get update && sudo apt-get install -y pkg-config libssl-dev

After that, check if stylus is installed by running:

cargo stylus --version

If the version is displayed, stylus has been successfully installed and the path is correctly set.

2. ABI Not Generated

If you face issues with the ABI not being generated, you can try one of the following solutions:

Restart Docker Node: Pause and restart the Docker node and the local setup of the project. You can do this by deleting all ongoing running containers and then restarting the local terminal using:
```
yarn run dev
```

Modify the Script: In the run-dev-node.sh script, replace the line:

cargo stylus export-abi

with:

cargo run --manifest-path=Cargo.toml --features export-abi

🚨 Fixing Line Endings and Running Shell Scripts in WSL on a CRLF-Based Windows System

⚠️ This guide provides step-by-step instructions to resolve the Command not found error caused by CRLF line endings in shell scripts when running in a WSL environment.

🛠️ Steps to Fix the Issue

Convert Line Endings to LF

Shell scripts created in Windows often have CRLF line endings, which cause issues in Unix-like environments such as WSL. To fix this:

Using `dos2unix`

Install dos2unix (if not already installed):
```
sudo apt install dos2unix
```
Convert the script's line endings:
```
dos2unix run-dev-node.sh
```
Make the Script Executable:
```
chmod +x run-dev-node.sh
```
Run the Script in WSL:
```
bash run-dev-node.sh
```

Then in a second WSL terminal window, you can run the below commands to start your 📱 frontend:

cd speedrun_stylus ( if not done )
cd packages ( if not done )
cd nextjs
yarn run dev OR yarn dev

📱 Open http://localhost:3000 to see the app.

💫 Checkpoint 1: Frontend Magic

⛽ You'll be redirected to the below page after you complete checkpoint 0

Then you have to click on the debug contracts to start interacting with your contract. Click on "Debug Contracts" from the Navbar or from the Debug Contracts Div placed in the middle of the screen

The interface allows you to:

Set any number
Add numbers
Increment count
Perform multiplications
Track all transactions in the Block Explorer

After that, you can easily view all of your transactions from the Block Explorer Tab

💼 Take a quick look at your deploy script run-dev-node.sh in speedrun-rust/packages/stylus-demo/run-dev-node.sh.

📝 If you want to edit the frontend, navigate to speedrun-rust/packages/nextjs/app and open the specific page you want to modify. For instance: /debug/page.tsx. For guidance on routing and configuring pages/layouts checkout the Next.js documentation.

Checkpoint 2: 💾 Deploy your contract! 🛰

🛰 You don't need to provide any specifications to deploy your contract because contracts are automatically deployed from the run-dev-node.sh

You can check that below :

The above command will automatically deploy the contract functions written inside speedrun_stylus/packages/stylus-demo/src/lib.rs

This local account will deploy your contracts, allowing you to avoid entering a personal private key because the deployment happens using the pre-funded account's private key.

Checkpoint 3: 🚢 Ship your frontend! 🚁

We are deploying all the RUST contracts at the localhost:8547 endpoint where the nitro devnode is spinning up in Docker. You can check the network where your contract has been deployed in the frontend (http://localhost:3000):

🚀 Deploy your NextJS App

yarn vercel

Follow the steps to deploy to Vercel. Once you log in (email, github, etc), the default options should work. It'll give you a public URL.

If you want to redeploy to the same production URL you can run yarn vercel --prod. If you omit the --prod flag it will deploy it to a preview/test URL.

⚠️ Run the automated testing function to make sure your app passes

yarn test

Checkpoint 4: 📜 Contract Verification

You can verify your smart contract by running:

cargo stylus verify -e http://127.0.0.1:8547 --deployment-tx "$deployment_tx"
# here deployment_tx can be received through the docker desktop's terminal when you have depoloyed your contract using the below command:

cargo stylus deploy -e http://127.0.0.1:8547 --private-key "$your_private_key"
# here you can use pre-funded account's private-key as well

It is okay if it says your contract is already verified.

🏃 Head to your next challenge here.