📝 run prettier

Author: omarespejel

.github/workflows/mdbook.yml

@@ -17,7 +17,7 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     permissions:
-      contents: read  # To push a branch 
+      contents: read # To push a branch
       id-token: write # To update the deployment status
     steps:
       - name: Checkout
@@ -49,4 +49,4 @@ jobs:
 
       - name: scp upload to production site
         run: |
-          sshpass -p ${{ secrets.PROD_PASS }} scp -o 'StrictHostKeyChecking no' -r public_html/ ${{ secrets.PROD_USER }}@${{ secrets.PROD_IP }}:~/
+          sshpass -p ${{ secrets.PROD_PASS }} scp -o 'StrictHostKeyChecking no' -r public_html/ ${{ secrets.PROD_USER }}@${{ secrets.PROD_IP }}:~/

README.md

@@ -22,10 +22,12 @@ cargo install mdbook --version 0.4.31 && cargo install mdbook-i18n-helpers --ver
 ```
 
 2. **Machine Packages**:
+
 - For translations, install [gettext](https://www.gnu.org/software/gettext/): `sudo apt install gettext`.
 - On Mac, you can use `brew install gettext` to install.
 
 3. **Repository Operations**:
+
 - Clone the main repository: `git clone https://github.com/starknet-edu/starknetbook && cd starknetbook`.
 - Create and work on a branch in your fork. If you're unfamiliar, use this [guide](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/) for assistance.
 - Once done, submit a PR to merge your edits. Ensure you tag a reviewer for feedback (`l-henri` or `@omarespejel`).

src/ch02-07-01-00-counter-ui.md

@@ -39,24 +39,19 @@ In `index.js`, several key functions are provided:
 
 ```javascript
 // Connect to the blockchain via a wallet provider (argentX or Bravoos)
-const connectWallet = async() => {
-}
+const connectWallet = async () => {};
 
 // Terminate the connection
-const disconnectWallet = async() => {
-}
+const disconnectWallet = async () => {};
 
 // Trigger increment
-const increaseCounter = async() => {
-}
+const increaseCounter = async () => {};
 
 // Trigger decrement
-const decreaseCounter = async() => {
-}
+const decreaseCounter = async () => {};
 
 // Retrieve current count
-const getCounter = async() => {
-}
+const getCounter = async () => {};
 ```
 
 ## Managing Connection
@@ -79,7 +74,6 @@ const connectWallet = async() => {
 - Initiates the connection using the **`connect`** method from the **`@argent/get-starknet`** library, targeting Starknet.
 - Upon a successful connection, updates the React component's state with details of the **`connection`**, **`account`**, and **`selectedAddress`**.
 
-
 ### `disconnectWallet`
 
 The `disconnectWallet` function is designed to sever the connection with the web wallet asynchronously. After disconnection, it updates the component's state, resetting connection details.
@@ -95,35 +89,36 @@ const disconnectWallet = async() => {
 
 - It utilizes the **`disconnect`** function, possibly from an external library, and handles the operation asynchronously with **`await`**.
 - Post-disconnection, the state of the React component is updated:
-    - **`setConnection`** is set to **`undefined`**.
-    - **`setAccount`** is set to **`undefined`**.
-    - **`setAddress`** is cleared with an empty string.
-
+  - **`setConnection`** is set to **`undefined`**.
+  - **`setAccount`** is set to **`undefined`**.
+  - **`setAddress`** is cleared with an empty string.
 
 ### `EagerlyConnect`
 
 The `EagerlyConnect` mechanism leverages React's `useEffect` hook to initiate a connection to Starknet upon the component's mounting or initial rendering.
 
 ```javascript
 useEffect(() => {
-    const connectToStarknet = async() => {
-      const connection = await connect({ modalMode: "neverAsk", webWalletUrl: "https://web.argent.xyz" });
-
-      if(connection && connection.isConnected) {
-        setConnection(connection);
-        setAccount(connection.account);
-        setAddress(connection.selectedAddress);
-      }
+  const connectToStarknet = async () => {
+    const connection = await connect({
+      modalMode: "neverAsk",
+      webWalletUrl: "https://web.argent.xyz",
+    });
+
+    if (connection && connection.isConnected) {
+      setConnection(connection);
+      setAccount(connection.account);
+      setAddress(connection.selectedAddress);
     }
-    connectToStarknet();
-  }, [])
+  };
+  connectToStarknet();
+}, []);
 ```
 
 - Inside the **`useEffect`**, the **`connectToStarknet`** function is defined, aiming to establish an asynchronous connection using the **`connect`** function. Parameters like **`modalMode`** and **`webWalletUrl`** are passed to guide the connection process.
 - If successful in connecting (**`connection && connection.isConnected`**), the state updates with details of the connection, the account, and the selected address using **`setConnection`**, **`setAccount`**, and **`setAddress`**.
 - The **`connectToStarknet`** function is executed immediately after its definition.
 
-
 ## Important Refresher on Smart Contract Interactions
 
 For effective interaction with a smart contract on the network, it's crucial to understand key components after establishing a connection. Among these are the `contract address`, `ABI`, `Signer`, and `Provider`.
@@ -144,7 +139,7 @@ The Signer plays a pivotal role in:
 - Signing transactions.
 - Authorizing actions on the blockchain.
 - Bearing the fees associated with blockchain operations.
-  
+
 Signers are especially linked to write operations that change the state of the blockchain. These operations need cryptographic signing for security and validity.
 
 ### Provider
@@ -157,20 +152,18 @@ The Provider acts as the medium for:
 
 To initiate a write transaction, the connected account (signer) must be provided. This signer then signs the transaction, bearing the necessary fee for execution.
 
-
 ## Invoking the `increment` Function
 
 ```javascript
-const increaseCounter = async() => {
-    try {
-      const contract = new Contract(contractAbi, contractAddress, account)
-      await contract.increment()
-      alert("You successfully incremented the counter!")
-    }
-    catch(err) {
-      alert(err.message)
-    }
+const increaseCounter = async () => {
+  try {
+    const contract = new Contract(contractAbi, contractAddress, account);
+    await contract.increment();
+    alert("You successfully incremented the counter!");
+  } catch (err) {
+    alert(err.message);
   }
+};
 ```
 
 The **`increaseCounter`** function is crafted to interact with a smart contract and increment a specific counter. Here's a step-by-step breakdown:
@@ -180,20 +173,18 @@ The **`increaseCounter`** function is crafted to interact with a smart contract
 3. On successful execution, the user receives a confirmation alert indicating the counter's increment.
 4. In case of any errors during the process, an alert displays the corresponding error message to the user.
 
-
 ## Invoking the `decrement` Function
 
 ```javascript
-const decreaseCounter = async() => {
-    try {
-      const contract = new Contract(contractAbi, contractAddress, account)
-      await contract.decrement()
-      alert("You successfully decremented the counter!")
-    }
-    catch(err) {
-      alert(err.message)
-    }
+const decreaseCounter = async () => {
+  try {
+    const contract = new Contract(contractAbi, contractAddress, account);
+    await contract.decrement();
+    alert("You successfully decremented the counter!");
+  } catch (err) {
+    alert(err.message);
   }
+};
 ```
 
 The **`decreaseCounter`** function is designed to interact with a smart contract and decrement a specific counter. Here's a succinct breakdown of its operation:
@@ -206,17 +197,18 @@ The **`decreaseCounter`** function is designed to interact with a smart contract
 ## Fetching the Current Count with `get_current_count` Function
 
 ```javascript
-const getCounter = async() => {
-    const provider = new Provider({ sequencer: { network:constants.NetworkName.SN_MAIN } })
-    try {
-      const mycontract = new Contract(contractAbi, contractAddress, provider)
-      const num = await mycontract.get_current_count()
-      setRetrievedValue(num.toString())
-    }
-    catch(err) {
-      alert(err.message)
-    }
+const getCounter = async () => {
+  const provider = new Provider({
+    sequencer: { network: constants.NetworkName.SN_MAIN },
+  });
+  try {
+    const mycontract = new Contract(contractAbi, contractAddress, provider);
+    const num = await mycontract.get_current_count();
+    setRetrievedValue(num.toString());
+  } catch (err) {
+    alert(err.message);
   }
+};
 ```
 
 The **`getCounter`** function is designed to retrieve the current count from a smart contract. Here's a breakdown of its operation:
@@ -229,7 +221,6 @@ The **`getCounter`** function is designed to retrieve the current count from a s
 
 It's essential to emphasize that while performing read operations, like fetching data from a blockchain network, the function uses the provider. Unlike write operations, which typically require a signer (or an account) for transaction signing, read operations don't mandate such authentication. Thus, in this function, only the provider is specified, and not the signer.
 
-
 ## Wrapping It Up: Integrating a Frontend with a Counter Smart Contract
 
 In this tutorial, we review the process of integrating a basic counter smart contract with a frontend application.
@@ -239,8 +230,8 @@ Here's a quick recap:
 1. **Establishing Connection**: With the **`connectWallet`** function, we made seamless connections to the blockchain, paving the way for interactions with our smart contract.
 2. **Terminating Connection**: The **`disconnectWallet`** function ensures that users can safely terminate their active connections to the blockchain, maintaining security and control.
 3. **Interacting with the Smart Contract**: Using the **`increaseCounter`**, **`decreaseCounter`**, and **`getCounter`** functions, we explored how to:
-    - Initiate transactions
-    - Adjust the counter value (increment or decrement)
-    - Fetch data from the blockchain
+   - Initiate transactions
+   - Adjust the counter value (increment or decrement)
+   - Fetch data from the blockchain
 
-For a visual walkthrough, do check out the [Basecamp frontend session](https://drive.google.com/file/d/1Dtb3Ol_BVoNV4w-_MKV8aeyyRra8nRtz/view). This comprehensive session delves deeper into the nuances of the concepts we've touched upon, presenting a mix of theoretical explanations and hands-on demonstrations.
+For a visual walkthrough, do check out the [Basecamp frontend session](https://drive.google.com/file/d/1Dtb3Ol_BVoNV4w-_MKV8aeyyRra8nRtz/view). This comprehensive session delves deeper into the nuances of the concepts we've touched upon, presenting a mix of theoretical explanations and hands-on demonstrations.

src/ch02-07-01-01-erc20-ui.md

@@ -13,7 +13,6 @@ The example will walk through creating an ERC20 token named MKT and crafting a w
 
 <img alt="Basic Dapp ERC20" src="img/ch02-basic-dapp-screenshot.png" class="center" style="width: 75%;" />
 
-
 Throughout this guide, the following tools and libraries will be utilized:
 
 - Scarb 0.7.0 with Cairo 2.2.0
@@ -104,15 +103,14 @@ scarb build
 
 Subsequent to the compilation, declare the smart contract on the Starknet testnet:
 
-
 ```bash
 starkli declare target/dev/erc20_erc20.sierra.json --account ../../demo-account.json --keystore ../../demo-key.json --compiler-version 2.1.0 --network goerli-1 --watch
 ```
 
 The output should appear similar to:
 
 ```bash
-Enter keystore password: 
+Enter keystore password:
 Declaring Cairo 1 class: 0x04940154eae35788e899ceb0ef2794eaa5ea6818af5c1c726d6d278fd4979713
 ... [shortened for brevity]
 Class hash declared: 0x04940154eae35788e899ceb0ef2794eaa5ea6818af5c1c726d6d278fd4979713
@@ -121,15 +119,15 @@ Class hash declared: 0x04940154eae35788e899ceb0ef2794eaa5ea6818af5c1c726d6d278fd
 In cases where no modifications have been made to the provided contract, a notification will indicate that the contract has previously been declared on Starknet:
 
 ```bash
-Enter keystore password: 
+Enter keystore password:
 Not declaring class as it's already declared. Class hash: 0x04940154eae35788e899ceb0ef2794eaa5ea6818af5c1c726d6d278fd4979713
 ```
 
 ## Deploying the ERC20 Contract
 
 Proceed to deploy the MKT Token using Starkli. Provide these arguments for successful deployment:
 
-- `Initial mint`: Mint 1,000,000 tokens. Given that the MKT token comprises 18 decimals (a standard of OpenZeppelin), the input required is 1,000,000 * 10^18 or 0xd3c21bcecceda1000000. Due to the contract's expectation of a u256 mint value, provide both low and high values: 0xd3c21bcecceda1000000 and 0 respectively.
+- `Initial mint`: Mint 1,000,000 tokens. Given that the MKT token comprises 18 decimals (a standard of OpenZeppelin), the input required is 1,000,000 \* 10^18 or 0xd3c21bcecceda1000000. Due to the contract's expectation of a u256 mint value, provide both low and high values: 0xd3c21bcecceda1000000 and 0 respectively.
 - `Receiver address`: Use a preferred address. In this example: 0x0334863e3e851de87fb4b6b6113aa2a6b40ea20f22dbec55536e4eac912206fc
 
 ```bash
@@ -139,7 +137,7 @@ starkli deploy 0x04940154eae35788e899ceb0ef2794eaa5ea6818af5c1c726d6d278fd497971
 The output should appear similar to:
 
 ```bash
-Enter keystore password: 
+Enter keystore password:
 ... [shortened for brevity]
 Contract deployed: 0x001892d81e09cb2c2005f0112891dacb92a6f8ce571edd03ed1f3e549abcf37f
 ```
@@ -220,15 +218,14 @@ npm run dev
 
 NOTE: Observe the server port that appears during launch. This will be useful for subsequent testing.
 
-
 ## Enhancing Your React Application with Additional Features
 
 To enhance the app's functionality, create two components for balance and transfer. Subsequently, update the `Wallet.tsx` file to incorporate the new features:
 
 <img alt="Basic Dapp ERC20 React Files" src="img/ch02-basic-dapp-react-files.png" class="center" style="width: 75%;" />
 
-
 ### Balance Component
+
 Design a balance component inside `components/Balance.tsx` and integrate the following code:
 
 ```typescript
@@ -257,7 +254,7 @@ function Balance() {
     </div>
   );
 }
-  
+
 export default Balance;
 ```
 
@@ -276,7 +273,7 @@ function Transfer() {
     const [count] = useState(1);
     const [recipient, setRecipient] = useState('0x');
     const [amount, setAmount] = useState('1000000000000000000');
-  
+
     const calls = useMemo(() => {
       const tx = {
         contractAddress: '0x001892d81e09cb2c2005f0112891dacb92a6f8ce571edd03ed1f3e549abcf37f',
@@ -287,7 +284,7 @@ function Transfer() {
     }, [address, count, recipient, amount]);
 
     const { write } = useContractWrite({ calls });
-  
+
     return (
       <>
         <p>Transfer:</p>
@@ -310,7 +307,6 @@ export default Transfer;
 
 NOTE: Replace contractAddress with the address of your deployed contract.
 
-
 ### Updating the Wallet Component
 
 Proceed to modify the `components/Wallet.tsx` file. Replace any existing content with the following enhanced code:
@@ -367,7 +363,6 @@ export default function WalletBar() {
 
 This updated code refines the Wallet component to offer a more interactive experience for users intending to connect or manage their wallets.
 
-
 ## Finalizing the MKT Token Application
 
 To finalize the application setup, we need the ABI file for the MKT token. Follow the steps below to generate and integrate it:
@@ -386,7 +381,6 @@ Well done! The basic MKT token application is now operational locally. Access it
 
 <img alt="Localhost" src="img/ch02-basic-dapp-localhost.png" class="center" style="width: 75%;" />
 
-
 ## Deploying Your Project Online
 
 To share your application with friends and allow them to check their balances and transfer tokens, publish your app online. Vercel offers a straightforward way to do this:
@@ -414,7 +408,6 @@ After entering your email, check your inbox and click on the "Verify" button.
 
 <img alt="Vercel verify" src="img/ch02-basic-dapp-vercel-verify.png" class="center" style="width: 75%;" />
 
-
 On successful verification, you'll receive a confirmation in the console.
 
 4. Link your project to Vercel:
@@ -441,15 +434,15 @@ Congratulations! Your MKT token web3 application is now accessible to everyone.
 
 Engage with your app by:
 
-* Connecting your wallet:
+- Connecting your wallet:
 
 <img alt="Vercel publication 2" src="img/ch02-basic-dapp-pub2.png" class="center" style="width: 75%;" />
 
-* Checking your balance:
+- Checking your balance:
 
 <img alt="Vercel publication 3" src="img/ch02-basic-dapp-pub3.png" class="center" style="width: 75%;" />
 
-* Transferring tokens:
+- Transferring tokens:
 
 <img alt="Vercel publication 4" src="img/ch02-basic-dapp-pub4.png" class="center" style="width: 75%;" />
 
@@ -458,7 +451,6 @@ Engage with your app by:
 Throughout this tutorial, you've walked through the steps to craft a web3 application using React and Starknet Cairo. This application, complete with an ERC20 smart contract, offers a modern web interface for user interaction. Here's a snapshot of your achievements:
 
 - **Project Initialization**: Set up a Starknet project with Scarb and incorporated OpenZeppelin libraries.
-  
 - **Crafting the ERC20 Contract**: Developed an ERC20 token using Cairo, enriched with functionalities like balance checks and token transfers. This was then compiled and launched on the Starknet network.
 
 - **React Application**: Built a React application powered by Starknet React, featuring components dedicated to balance inquiries and token transactions.