Merge pull request #295 from machuwey/update-getting-started-remix

Update getting started page remix

src/ch01-00-getting-started.md

@@ -4,15 +4,22 @@ Starknet is a scalable Layer-2 solution on Ethereum. This guide will walk you th
 
 We will use the Starknet Remix Plugin to compile, deploy and interact with our smart contract. It is a great tool to get started with Starknet development.
 
-1. Visit [The Remix Project](https://remix.ethereum.org/).
-2. Navigate to the ‘Plugins’ section in the bottom left corner.
-3. Enable the “Starknet” plugin.
+1. Visit the [Remix IDE](https://remix.ethereum.org/) website.
+2. Navigate to the ‘Plugin Manager’ section in the bottom left corner.
+
+<img alt="Plugin Manager" src="img/ch01-remix-plugin-manager.png" class="center" style="width: 50%;" />
+
+3. Activate the “Starknet” plugin.
 
 <img alt="Activate the Starknet Plugin" src="img/ch01-starknet-plugin.png" class="center" style="width: 100%;" />
 
-<span class="caption">Activate the Starknet Plugin</span>
+4. Accept the permissions. Click "Remember my choice" to avoid this step in the future.
+
+<img alt="Accept Permissions" src="img/ch01-remix-permission-box.png" class="center" style="width: 100%;" />
 
-4. After enabling, the Starknet logo appears on the left sidebar. Click it to interact with opened Cairo files.
+5. After enabling, the Starknet logo appears on the left sidebar. Click it to interact with opened Cairo files.
+
+<img alt="Starknet Plugin" src="img/ch01-remix-starknet-plugin-icon.png" class="center" style="width: 100%; max-width: 300px;" />
 
 ## Introduction to Starknet Smart Contracts
 
@@ -23,6 +30,8 @@ The script below is a simple `Ownable` contract pattern written in Cairo for Sta
 - A method to check the current owner.
 - An event notification for ownership changes.
 
+### Cairo Example Contract
+
 ```rust
 use starknet::ContractAddress;
 
@@ -113,13 +122,17 @@ To compile using Remix:
 1. **File Creation**
 
    - Navigate to the "File Explorer" tab in Remix.
-   - Create a new file named `Ownable.cairo` and input the previous code.
+   - Create a new file named `Ownable.cairo` and paste the previous [code](#cairo-example-contract) into it.
 
 2. **Compilation**
 
    - Choose the `Ownable.cairo` file.
    - In the "Starknet" tab, select "Compile Ownable.cairo".
-   - Post-compilation, an "artifacts" folder emerges containing the compiled contract in two distinct formats: Sierra (JSON file) and CASM. For Starknet deployment, Remix will use the Sierra file. Do not worry about this process for now; we will cover it in detail in a later chapter. For now, Remix will handle the compilation and deployment for us.
+
+<img  alt="Compilation Process" src="img/ch01-compile-contract.png" class="center"
+style="width: 100%;" />
+
+- Post-compilation, an "artifacts" folder emerges containing the compiled contract in two distinct formats: Sierra (JSON file) and CASM. For Starknet deployment, Remix will use the Sierra file. Do not worry about this process for now; we will cover it in detail in a later chapter. For now, Remix will handle the compilation and deployment for us.
 
 <img alt="Artifacts folder after compilation" src="img/ch01-remix-file.png" class="center" style="width: 100%;" />
 
@@ -133,19 +146,27 @@ Here's a step-by-step guide to deploying your smart contract on the development
 
 1. **Select the Appropriate Network**
 
-   - Go to the Environment selection tab.
+   - In the Starknet tab, click on the top button.
+
+   <img alt="Environment selection" src="img/ch01-remix-choose-devnet.png" class="center" style="width: 100%; max-width: 300px;" />
+
    - Choose "Remote Devnet" for deploying your inaugural contract on a development network.
 
 2. **Choose a Devnet Account**
 
    - Under "Devnet account selection", a list of accounts specific to the chosen devnet is presented.
+
+   <img alt="Environment selection" src="img/ch01-remix-remote-devnet.png" class="center" style="width: 100%; max-width: 300px;" />
+
    - Pick any account and copy its address.
 
 3. **Initiating Deployment**
 
-   - Navigate to the "Starknet" tab.
    - Input the copied address into the `init_owner` variable.
-   - Click on "Deploy ownable.cairo".
+
+   <img alt="Environment selection" src="img/ch01-remix-deploy-contract.png" class="center" style="width: 100%; max-width: 300px;" />
+
+   - Click on **"Deploy"**.
 
 Post-deployment, Remix's terminal will send various logs. These logs provide crucial details, including:
 
@@ -159,7 +180,7 @@ Post-deployment, Remix's terminal will send various logs. These logs provide cru
   "contract_address": "0x5eb239955ad4c4333b8ab83406a3cf5970554b60a0d8e78a531df18c59a0db9",
     ...
   "calldata": [
-    "0x4d9c8282b5633eeb1aab56393690d76f71e32f1b7be1bea03eb03e059245a28"
+    "0x1398224729985f8e76571285c6d936b5af4a88206a1dc54c0658b4e15045292"
   ],
     ...
 }
@@ -173,19 +194,22 @@ With the contract now active on the development network, interaction becomes pos
 
 1. **Initiating Interaction**
 
-   - Navigate to the "Starknet" tab.
+   - Navigate to the "Starknet" plugin tab.
    - Select the "Interact" option.
 
 2. **Calling the `get_owner` Function**
 
    - Choose the `get_owner` function. Since this function doesn't require arguments, the calldata field remains blank. (This is a read function, hence calling it is termed as a "call".)
-   - Press the "get_owner" button. Your terminal will display the result, revealing the owner's address provided during the contract's deployment as calldata for the constructor:
+
+   <img alt="Environment selection" src="img/ch01-remix-interact.png" class="center" style="width: 100%; max-width: 300px;" />
+
+   - Press the **"Call"** button. Your terminal will display the result, revealing the owner's address provided during the contract's deployment as calldata for the constructor:
 
 ```json
 {
   "response": {
     "result": [
-      "0x4d9c8282b5633eeb1aab56393690d76f71e32f1b7be1bea03eb03e059245a28"
+      "0x1398224729985f8e76571285c6d936b5af4a88206a1dc54c0658b4e15045292"
     ]
   },
   "contract": "ownable.cairo",
@@ -197,9 +221,13 @@ This call currently doesn't spend gas because the function does not change the s
 
 3. **Invoking the `transfer_ownership` Function**
 
-- Now, for the **`transfer_ownership`** function, which requires the new owner's address as input.
+- Choose the **"Write"** in the interaction area. Here you can see the functions that alter the contract's state.
+
+<img alt="Environment selection" src="img/ch01-remix-write-interaction.png" class="center" style="width: 100%; max-width: 300px;" />
+
+- In this case **`transfer_ownership`** function, which requires the new owner's address as input.
 - Enter this address into the calldata field. (For this, use any address from the "Devnet account selection" listed in the Environment tab.)
-- Click the "transfer_ownership" button. The terminal then showcases the transaction hash indicating the contract's state alteration. Since we are altering the contract's state this typo of interaction is called an "invoke" and needs to be signed by the account that is calling the function.
+- Click the **"Call"** button. The terminal then showcases the transaction hash indicating the contract's state alteration. Since we are altering the contract's state this typo of interaction is called an "invoke" and needs to be signed by the account that is calling the function.
 
 For these transactions, the terminal logs will exhibit a "status" variable, indicating the transaction's fate. If the status reads "ACCEPTED_ON_L2", the Sequencer has accepted the transaction, pending block inclusion. However, a "REJECTED" status signifies the Sequencer's disapproval, and the transaction won't feature in the upcoming block. More often than not, this transaction gains acceptance, leading to a contract state modification. On calling the **`get_owner`** function again we get this:
 
@@ -242,9 +270,11 @@ Once set up, you're ready to deploy your smart contracts to the Starknet Testnet
 ### Deployment and Interaction
 
 1. Follow the previous deployment steps.
-2. In the 'Environment selection' tab, choose 'Wallet Selection'.
+2. In the 'Environment selection' tab, choose 'Wallet'.
 3. Select your Starknet account and continue with deploying and interacting with your contract.
 
+<img alt="Environment selection" src="img/ch01-remix-wallet.png" class="center" style="width: 100%; max-width: 300px;" />
+
 You can monitor transaction hashes and addresses using any Starknet block explorers like:
 
 - [Starkscan](https://testnet.starkscan.co/)

src/ch02-02-starkli-scarb-katana.md

@@ -58,6 +58,7 @@ To install a specific version, such as `2.3.0`, run:
 ## Crafting a Starknet Smart Contract
 
 Before we proceed with the example, please ensure that the versions of both `scarb` and `starkli` match the specified versions provided below.
+
 ```console
     scarb --version  # scarb 2.3.1 (0c8def3aa 2023-10-31)
     starkli --version  # 0.1.20 (e4d2307)