feat: Synced New changes from Scaffold Stark to SpeedRun Base Template (

#174) [skip ci]

.github/workflows/main.yml

@@ -26,13 +26,13 @@ jobs:
         uses: actions/checkout@master
 
       - name: Install scarb
-        run: curl --proto '=https' --tlsv1.2 -sSf https://docs.swmansion.com/scarb/install.sh | sh -s -- -v 2.8.5
+        run: curl --proto '=https' --tlsv1.2 -sSf https://docs.swmansion.com/scarb/install.sh | sh -s -- -v 2.9.2
 
       - name: Install snfoundryup
         run: curl -L https://raw.githubusercontent.com/foundry-rs/starknet-foundry/master/scripts/install.sh | sh
 
       - name: Install snforge
-        run: snfoundryup -v 0.33.0
+        run: snfoundryup -v 0.34.0
 
       - name: Run snforge tests
         run: snforge test

.tool-versions

@@ -1,3 +1,3 @@
-scarb 2.8.5
-starknet-foundry 0.33.0
-starknet-devnet 0.2.0
+scarb 2.9.2
+starknet-foundry 0.34.0
+starknet-devnet 0.2.3

README.md

@@ -18,29 +18,29 @@ Before you begin, you need to install the following tools:
 - [Node (>= v18.17)](https://nodejs.org/en/download/)
 - Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/) or [v2+](https://yarnpkg.com/getting-started/install))
 - [Git](https://git-scm.com/downloads)
-- [Rust](https://www.rust-lang.org/tools/install)
+- [Rust](https://rust-lang.org/tools/install)
 - [asdf](https://asdf-vm.com/guide/getting-started.html)
 - [Cairo 1.0 extension for VSCode](https://marketplace.visualstudio.com/items?itemName=starkware.cairo1)
 
 ### Starknet-devnet version
 
-To ensure the proper functioning of scaffold-stark, your local `starknet-devnet` version must be `0.2.0`. To accomplish this, first check your local starknet-devnet version:
+To ensure the proper functioning of scaffold-stark, your local `starknet-devnet` version must be `0.2.3`. To accomplish this, first check your local starknet-devnet version:
 
 ```sh
 starknet-devnet --version
 ```
 
-If your local starknet-devnet version is not `0.2.0`, you need to install it.
+If your local starknet-devnet version is not `0.2.3`, you need to install it.
 
-- Install Starknet-devnet `0.2.0` via `asdf` ([instructions](https://github.com/gianalarcon/asdf-starknet-devnet/blob/main/README.md)).
+- Install Starknet-devnet `0.2.3` via `asdf` ([instructions](https://github.com/gianalarcon/asdf-starknet-devnet/blob/main/README.md)).
 
 ### Compatible versions
 
-- Starknet-devnet - v0.2.0
-- Scarb - v2.8.5
-- Snforge - v0.33.0
-- Cairo - v2.8.5
-- RPC - v0.7.1
+- Starknet-devnet - v0.2.3
+- Scarb - v2.9.2
+- Snforge - v0.34.0
+- Cairo - v2.9.2
+- Rpc - v0.7.1
 
 Make sure you have the compatible versions otherwise refer to [Scaffold-Stark Requirements](https://github.com/Scaffold-Stark/scaffold-stark-2?.tab=readme-ov-file#requirements)
 
@@ -89,4 +89,4 @@ _To finish your README, can add these links_
 
 > 🏃 Head to your next challenge [here](https://speedrunstark.com/).
 
-> 💬 Problems, questions, comments on the stack? Post them to the [🏗 Scaffold-Stark developers chat](https://t.me/+wO3PtlRAreo4MDI9)
+> 💬 Problems, questions, comments on the stack? Post them to the [🏗 Scaffold-Stark developers chat](https://t.me/+wO3PtlRAreo4MDI9)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ss-2",
-  "version": "0.3.2",
+  "version": "0.3.12",
   "author": "Q3 Labs",
   "license": "MIT",
   "private": true,
@@ -13,7 +13,7 @@
   "scripts": {
     "chain": "yarn workspace @ss-2/snfoundry chain",
     "deploy": "yarn workspace @ss-2/snfoundry deploy",
-    "deploy:reset": "yarn workspace @ss-2/snfoundry  deploy:reset",
+    "deploy:no-reset": "yarn workspace @ss-2/snfoundry deploy --no-reset",
     "test": "yarn workspace @ss-2/snfoundry test",
     "compile": "yarn workspace @ss-2/snfoundry compile",
     "start": "yarn workspace @ss-2/nextjs dev",

packages/nextjs/.env.example

@@ -1 +1 @@
-NEXT_PUBLIC_PROVIDER_URL=https://starknet-sepolia.public.blastapi.io/rpc/v0_7
+NEXT_PUBLIC_PROVIDER_URL=https://starknet-sepolia.blastapi.io/64168c77-3fa5-4e1e-9fe4-41675d212522/rpc/v0_7

packages/nextjs/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next"
 }

packages/nextjs/app/configure/_components/DownloadContracts.tsx

@@ -1,25 +1,24 @@
 "use client";
 
 import { useProvider } from "@starknet-react/core";
-import React, { useState } from "react";
+import { useCallback, useState } from "react";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import configExternalContracts from "~~/contracts/configExternalContracts";
 import { deepMergeContracts } from "~~/utils/scaffold-stark/contract";
 import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
+import prettier from "prettier/standalone";
+import parserTypescript from "prettier/plugins/typescript";
+import prettierPluginEstree from "prettier/plugins/estree";
 
 export default function DownloadContracts() {
   const { provider } = useProvider();
   const [address, setAddress] = useState<string>("");
 
   const { targetNetwork } = useTargetNetwork();
-  const [symbol, setSymbol] = useState<string>("");
-  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    const value = e.target.value;
-    setSymbol(value);
-  };
+  const [contractName, setContractName] = useState<string>("");
 
-  const handleDownload = async () => {
+  const handleDownload = useCallback(async () => {
     if (!address) return;
     try {
       const [apiResponse, classHash] = await Promise.all([
@@ -29,7 +28,7 @@ export default function DownloadContracts() {
 
       const contractData = {
         [targetNetwork.network]: {
-          [symbol]: {
+          [contractName]: {
             address,
             classHash,
             abi: apiResponse.abi,
@@ -46,17 +45,21 @@ export default function DownloadContracts() {
       console.error(error);
       return;
     }
-  };
+  }, [address, provider, contractName, targetNetwork.network]);
 
-  const generateContractsFile = (contractsData: Object) => {
+  const generateContractsFile = async (contractsData: Object) => {
     const generatedContractComment = `/**
 * This file is autogenerated by Scaffold-Stark.
 * You should not edit it manually or your changes might be overwritten.
 */`;
 
-    const fileContent = JSON.stringify(contractsData, null, 2);
-    const configExternalContracts = `${generatedContractComment}\n\nconst configExternalContracts = ${fileContent} as const;\n\nexport default configExternalContracts;`;
-
+    const configExternalContracts = await prettier.format(
+      `${generatedContractComment}\n\nconst configExternalContracts = ${JSON.stringify(contractsData)} as const;\n\nexport default configExternalContracts;`,
+      {
+        parser: "typescript",
+        plugins: [parserTypescript, prettierPluginEstree],
+      },
+    );
     const blob = new Blob([configExternalContracts], {
       type: "text/typescript",
     });
@@ -78,49 +81,35 @@ export default function DownloadContracts() {
           <div className="flex-1">
             <div className="font-bold my-3 text-lg">Instructions</div>
             <p className="my-2">
-              This tool allows you to fetch the ABI of a contract by entering
-              its address. It will download a configuration file that can be
-              used to replace or append to your local{" "}
+              This tool generate a contract configuration file by entering a
+              contract address and name. The downloaded file can be used to
+              replace your local{" "}
               <code className="text-function">configExternalContracts.ts</code>{" "}
-              file, allowing you to debug in the{" "}
-              <code className="text-function">/debug</code> page.
+              for debugging.
             </p>
             <ol className="flex flex-col gap-2 list-decimal list-outside my-6 space-y-1 ml-4">
+              <li className="pl-3">Enter contract name and address</li>
               <li className="pl-3">
-                Enter the contract address and name within the designated input
-                fields.
-              </li>
-              <li className="pl-3">
-                Click the{" "}
+                Click{" "}
                 <strong className="text-function">
                   Download Contract File
-                </strong>{" "}
-                button.
-              </li>
-              <li className="pl-3">
-                The tool will fetch the ABI, address, and classHash from the
-                network and generate a configuration file.
+                </strong>
               </li>
               <li className="pl-3">
-                Download the file and replace it to your local{" "}
+                Replace your{" "}
                 <code className="text-function">
                   configExternalContracts.ts
                 </code>{" "}
-                file.
+                file
               </li>
               <li className="pl-3">
-                Use the{" "}
+                Debug your contract at{" "}
                 <Link href={"/debug"} className="text-function">
                   <code>/debug</code>
                 </Link>{" "}
-                page to interact with and test the contract using the scaffold
-                hooks.
+                and use hooks with the downloaded contract
               </li>
             </ol>
-            <p className="mt-2">
-              Ensure that the format of the ABI matches the expected format in
-              your project before replacing the file.
-            </p>
           </div>
           <div className="flex-1 px-12">
             {targetNetwork && (
@@ -136,8 +125,8 @@ export default function DownloadContracts() {
                 Contract
               </div>
               <input
-                value={symbol}
-                onChange={handleInputChange}
+                value={contractName}
+                onChange={(e) => setContractName(e.target.value)}
                 list="symbols"
                 className="input bg-input input-ghost rounded-none focus-within:border-transparent focus:outline-none h-[2.2rem] min-h-[2.2rem] px-4 border w-full text-sm placeholder:text-[#9596BF] text-neutral"
                 placeholder="Enter contract name"

packages/nextjs/app/configure/page.tsx

@@ -8,11 +8,7 @@ export const metadata = getMetadata({
 });
 
 const Configure: NextPage = () => {
-  return (
-    <>
-      <DownloadContracts />
-    </>
-  );
+  return <DownloadContracts />;
 };
 
 export default Configure;

packages/nextjs/app/debug/_components/contract/ContractUI.tsx

@@ -10,7 +10,10 @@ import {
   useNetworkColor,
 } from "~~/hooks/scaffold-stark";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
-import { ContractName } from "~~/utils/scaffold-stark/contract";
+import {
+  ContractCodeStatus,
+  ContractName,
+} from "~~/utils/scaffold-stark/contract";
 import { ContractVariables } from "./ContractVariables";
 import { ClassHash } from "~~/components/scaffold-stark/ClassHash";
 
@@ -40,23 +43,18 @@ export const ContractUI = ({
     false,
   );
   const { targetNetwork } = useTargetNetwork();
-  const { data: deployedContractData, isLoading: deployedContractLoading } =
-    useDeployedContractInfo(contractName);
+  const {
+    raw: deployedContractData,
+    isLoading: deployedContractLoading,
+    status,
+  } = useDeployedContractInfo(contractName);
 
   const tabs = [
     { id: "read", label: "Read" },
     { id: "write", label: "Write" },
   ];
 
-  if (deployedContractLoading) {
-    return (
-      <div className="mt-14">
-        <span className="loading loading-spinner loading-lg"></span>
-      </div>
-    );
-  }
-
-  if (!deployedContractData) {
+  if (status === ContractCodeStatus.NOT_FOUND) {
     return (
       <p className="text-3xl mt-14">
         {`No contract found by the name of "${contractName}" on chain "${targetNetwork.name}"!`}
@@ -79,7 +77,7 @@ export const ContractUI = ({
                   classHash={deployedContractData.classHash}
                   size="xs"
                 />
-                <div className="flex gap-1 items-center">
+                <div className="flex gap-1 items-center h-5">
                   <span className="font-bold text-sm">Balance:</span>
                   <Balance
                     address={deployedContractData.address}
@@ -130,6 +128,11 @@ export const ContractUI = ({
                   />
                 )}
               </div>
+              {deployedContractLoading && (
+                <div className="absolute inset-0 rounded-[5px] bg-white/20 z-10">
+                  <div className="animate-spin h-4 w-4 border-2 border-purple-500 border-t-transparent rounded-full absolute top-4 right-4" />
+                </div>
+              )}
             </div>
           </div>
         </div>

packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx

@@ -1,5 +1,5 @@
 import { getChecksumAddress, Uint256 } from "starknet";
-import { replacer } from "~~/utils/scaffold-stark/common";
+import { feltToHex, replacer } from "~~/utils/scaffold-stark/common";
 import { AbiOutput } from "~~/utils/scaffold-stark/contract";
 import {
   isCairoArray,
@@ -139,11 +139,11 @@ const _decodeContractResponseItem = (
     abiType.type &&
     abiType.type === "core::starknet::contract_address::ContractAddress"
   ) {
-    return getChecksumAddress(`0x${respItem.toString(16)}`);
+    return getChecksumAddress(feltToHex(respItem));
   }
 
   if (abiType.type && baseHexType.has(abiType.type)) {
-    const hexString = `0x${respItem.toString(16)}`;
+    const hexString = feltToHex(respItem);
     if (showAsString) {
       return hexToAscii(hexString) || hexString;
     }

packages/nextjs/app/debug/page.tsx

@@ -9,11 +9,7 @@ export const metadata = getMetadata({
 });
 
 const Debug: NextPage = () => {
-  return (
-    <>
-      <DebugContracts />
-    </>
-  );
+  return <DebugContracts />;
 };
 
 export default Debug;

packages/nextjs/components/ConnectedAddress.tsx

@@ -0,0 +1,14 @@
+"use client";
+import { useAccount } from "~~/hooks/useAccount";
+import { Address } from "./scaffold-stark";
+import { Address as AddressType } from "@starknet-react/chains";
+
+export const ConnectedAddress = () => {
+  const connectedAddress = useAccount();
+  return (
+    <div className="flex justify-center items-center space-x-2">
+      <p className="my-2 font-medium text-[#00A3FF]">Connected Address:</p>
+      <Address address={connectedAddress.address as AddressType} />
+    </div>
+  );
+};

packages/nextjs/components/Footer.tsx

@@ -1,5 +1,3 @@
-import React, { useEffect } from "react";
-
 import { Cog8ToothIcon, CurrencyDollarIcon } from "@heroicons/react/24/outline";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { useGlobalState } from "~~/services/store/store";
@@ -34,13 +32,11 @@ export const Footer = () => {
       <div>
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
-            {nativeCurrencyPrice > 0 && (
-              <div>
-                <div className="btn btn-sm font-normal gap-1 cursor-auto border border-[#32BAC4] shadow-none">
-                  <CurrencyDollarIcon className="h-4 w-4 text-[#32BAC4]" />
-                  <span>{nativeCurrencyPrice}</span>
-                </div>
-              </div>
+            {isSepoliaNetwork && (
+              <>
+                <FaucetSepolia />
+                <BlockExplorerSepolia />
+              </>
             )}
             {isSepoliaNetwork && (
               <>
@@ -66,6 +62,14 @@ export const Footer = () => {
               <Cog8ToothIcon className="h-4 w-4 text-[#32BAC4]" />
               <span>Configure Contracts</span>
             </Link>
+            {nativeCurrencyPrice > 0 && (
+              <div>
+                <div className="btn btn-sm font-normal gap-1 cursor-auto border border-[#32BAC4] shadow-none">
+                  <CurrencyDollarIcon className="h-4 w-4 text-[#32BAC4]" />
+                  <span>{nativeCurrencyPrice}</span>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </div>