Sync Ch-2 with the last PR version the Scaffold Stark (#183)[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

@@ -29,11 +29,11 @@ Before you begin, you need to install the following tools:
 
 ### 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)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ss-2",
-  "version": "0.3.2",
+  "version": "0.3.13",
   "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,23 @@ 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 +83,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 +127,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}
@@ -108,7 +106,11 @@ export const ContractUI = ({
             {tabs.map((tab) => (
               <a
                 key={tab.id}
-                className={`tab h-10 ${activeTab === tab.id ? "tab-active !bg-[#8A45FC] !rounded-[5px] !text-white" : ""}`}
+                className={`tab h-10 ${
+                  activeTab === tab.id
+                    ? "tab-active !bg-[#8A45FC] !rounded-[5px] !text-white"
+                    : ""
+                }`}
                 onClick={() => setActiveTab(tab.id)}
               >
                 {tab.label}
@@ -130,6 +132,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/DisplayVariable.tsx

@@ -59,7 +59,9 @@ export const DisplayVariable = ({
     <div className="space-y-1 pb-2">
       <div className="flex items-center">
         <h3
-          className={`font-medium text-lg mb-0 break-all ${isDarkMode ? "text-[#4DB4FF]" : "text-[#7800FF]"}`}
+          className={`font-medium text-lg mb-0 break-all ${
+            isDarkMode ? "text-[#4DB4FF]" : "text-[#7800FF]"
+          }`}
         >
           {abiFunction.name}
         </h3>

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

@@ -69,11 +69,15 @@ export const Struct = ({
   return (
     <div>
       <div
-        className={`collapse bg-base-200 pl-4 pt-1.5 pb-2 border-2 ${isDisabled ? "border-base-100 cursor-not-allowed" : "border-secondary"} custom-after`}
+        className={`collapse bg-base-200 pl-4 pt-1.5 pb-2 border-2 ${
+          isDisabled ? "border-base-100 cursor-not-allowed" : "border-secondary"
+        } custom-after`}
       >
         {!isDisabled && <input type="checkbox" className="min-h-fit peer" />}
         <div
-          className={`collapse-title p-0 min-h-fit peer-checked:mb-2 text-primary-content/50 ${isDisabled && "cursor-not-allowed"} `}
+          className={`collapse-title p-0 min-h-fit peer-checked:mb-2 text-primary-content/50 ${
+            isDisabled && "cursor-not-allowed"
+          } `}
         >
           <p className="m-0 p-0 text-[1rem]">{abiMember.type}</p>
         </div>

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

@@ -27,13 +27,15 @@ export const TxReceipt = (
             aria-hidden="true"
           />
         ) : (
+          //@ts-ignore coponent works but some typing issue came up, ts-expect-error does not work
           <CopyToClipboard
             text={
               decodeContractResponse({
                 resp: txResult,
                 abi: [],
                 functionOutputs: [],
                 asText: true,
+                showAsString: true,
               }) as string
             }
             onCopy={() => {

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/app/layout.tsx

@@ -2,19 +2,17 @@ import type { Metadata } from "next";
 import { ScaffoldStarkAppWithProviders } from "~~/components/ScaffoldStarkAppWithProviders";
 import "~~/styles/globals.css";
 import { ThemeProvider } from "~~/components/ThemeProvider";
-import { Space_Grotesk } from "next/font/google";
-const spaceGrotesk = Space_Grotesk({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Speedrun Stark",
+  title: "Scaffold-Stark",
   description: "Fast track your starknet journey",
   icons: "/logo.ico",
 };
 
 const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning>
-      <body className={spaceGrotesk.className}>
+      <body>
         <ThemeProvider enableSystem>
           <ScaffoldStarkAppWithProviders>
             {children}