test

.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.6.5
+        run: curl --proto '=https' --tlsv1.2 -sSf https://docs.swmansion.com/scarb/install.sh | sh -s -- -v 2.8.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.27.0
+        run: snfoundryup -v 0.30.0
 
       - name: Run snforge tests
         run: snforge test
@@ -60,6 +60,10 @@ jobs:
         run: yarn next:check-types
         working-directory: ./packages/nextjs
 
+      - name: Run Next.js tests
+        run: yarn test run
+        working-directory: ./packages/nextjs
+
       - name: Build Next.js project
         run: yarn build
         working-directory: ./packages/nextjs

.tool-versions

@@ -0,0 +1,3 @@
+scarb 2.8.2
+starknet-foundry 0.30.0
+starknet-devnet 0.2.0

README.md

@@ -22,13 +22,25 @@ Before you begin, you need to install the following tools:
 - [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:
+
+```sh
+starknet-devnet --version
+```
+
+If your local starknet-devnet version is not `0.2.0`, 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)).
+
 ### Compatible versions
 
-- Starknet-devnet - v0.0.4
-- Scarb - v2.6.5
-- Snforge - v0.27.0
-- Cairo - v2.6.4
-- RPC - v0.7.0
+- Starknet-devnet - v0.2.0
+- Scarb - v2.8.2
+- Snforge - v0.30.0
+- Cairo - v2.8.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)
 
@@ -47,6 +59,8 @@ yarn install
 yarn chain
 ```
 
+> To run a fork : `yarn chain --fork-network <URL> [--fork-block <BLOCK_NUMBER>]`
+
 > in a second terminal window, 🛰 deploy your contract (locally):
 
 ```sh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ss-2",
-  "version": "0.2.10",
+  "version": "0.3.2",
   "author": "Q3 Labs",
   "license": "MIT",
   "private": true,
@@ -21,6 +21,7 @@
     "next:check-types": "yarn workspace @ss-2/nextjs check-types",
     "vercel": "yarn workspace @ss-2/nextjs vercel",
     "vercel:yolo": "yarn workspace @ss-2/nextjs vercel:yolo",
+    "test:nextjs": "yarn workspace @ss-2/nextjs test",
     "format": "yarn workspace @ss-2/nextjs format && yarn workspace @ss-2/snfoundry format",
     "format:check": "yarn workspace @ss-2/nextjs format:check && yarn workspace @ss-2/snfoundry format:check",
     "prepare": "husky"

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.public.blastapi.io/rpc/v0_7

packages/nextjs/.gitignore

@@ -26,7 +26,8 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
+.env.local
+.env
 
 # vercel
 .vercel

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

@@ -0,0 +1,177 @@
+"use client";
+
+import { useProvider } from "@starknet-react/core";
+import React, { 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";
+
+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 handleDownload = async () => {
+    if (!address) return;
+    try {
+      const [apiResponse, classHash] = await Promise.all([
+        provider.getClassAt(address),
+        provider.getClassHashAt(address),
+      ]);
+
+      const contractData = {
+        [targetNetwork.network]: {
+          [symbol]: {
+            address,
+            classHash,
+            abi: apiResponse.abi,
+          },
+        },
+      };
+      const mergedPredeployedContracts = deepMergeContracts(
+        contractData,
+        configExternalContracts,
+      );
+
+      generateContractsFile(mergedPredeployedContracts);
+    } catch (error) {
+      console.error(error);
+      return;
+    }
+  };
+
+  const generateContractsFile = (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 blob = new Blob([configExternalContracts], {
+      type: "text/typescript",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "configExternalContracts.ts";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center">
+      <div className="p-6 px-8 mx-2 border-gradient rounded-[5px] w-full max-w-6xl contract-content">
+        <div className="text-xl mb-2 font-bold">
+          Fetch Contract Configuration File from Contract Address
+        </div>
+        <div className="flex flex-col gap-12 sm:gap-24 sm:flex-row">
+          <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{" "}
+              <code className="text-function">predeployedContracts.ts</code>{" "}
+              file, allowing you to debug in the{" "}
+              <code className="text-function">/debug</code> page.
+            </p>
+            <ol className="flex flex-col gap-2 list-decimal list-outside my-6 space-y-1 ml-4">
+              <li className="pl-3">
+                Enter the contract address and name within the designated input
+                fields.
+              </li>
+              <li className="pl-3">
+                Click the{" "}
+                <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.
+              </li>
+              <li className="pl-3">
+                Download the file and replace it to your local{" "}
+                <code className="text-function">
+                  configExternalContracts.ts
+                </code>{" "}
+                file.
+              </li>
+              <li className="pl-3">
+                Use the{" "}
+                <Link href={"/debug"} className="text-function">
+                  <code>/debug</code>
+                </Link>{" "}
+                page to interact with and test the contract using the scaffold
+                hooks.
+              </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 && (
+              <div className="my-4 flex text-md flex-col">
+                <div className="w-24 mb-2 font-medium break-words text-function">
+                  Network
+                </div>
+                <span>{targetNetwork.name}</span>
+              </div>
+            )}
+            <div className="flex flex-col my-6">
+              <div className="w-24 mb-2 font-medium break-words text-function">
+                Contract
+              </div>
+              <input
+                value={symbol}
+                onChange={handleInputChange}
+                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"
+              />
+            </div>
+            <div className="flex flex-col text-accent my-6">
+              <div className="w-24 mb-2 font-medium break-words text-function">
+                Address
+              </div>
+              <div className="flex flex-1 gap-4">
+                <input
+                  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"
+                  type="text"
+                  placeholder="Enter contract address"
+                  value={address}
+                  onChange={(e) => setAddress(e.target.value)}
+                />
+              </div>
+              <button
+                className="btn btn-sm mt-12 max-w-56 bg-gradient-nav !text-white shadow-md flex gap-2"
+                onClick={handleDownload}
+              >
+                Download Contract File
+                <span>
+                  <ArrowDownTrayIcon
+                    className="h-4 w-4 cursor-pointer"
+                    aria-hidden="true"
+                  />
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/nextjs/app/configure/page.tsx

@@ -0,0 +1,18 @@
+import DownloadContracts from "./_components/DownloadContracts";
+import type { NextPage } from "next";
+import { getMetadata } from "~~/utils/scaffold-stark/getMetadata";
+
+export const metadata = getMetadata({
+  title: "Configure Contracts",
+  description: "Configure your deployed 🏗 Scaffold-Stark 2 contracts",
+});
+
+const Configure: NextPage = () => {
+  return (
+    <>
+      <DownloadContracts />
+    </>
+  );
+};
+
+export default Configure;

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

@@ -63,7 +63,15 @@ export const ContractInput = ({
       isCairoBigInt(paramType.type) ||
       isCairoU256(paramType.type)
     ) {
-      return <IntegerInput {...inputProps} variant={paramType.type} />;
+      return (
+        <IntegerInput
+          {...inputProps}
+          variant={paramType.type}
+          onError={(errMessage: string | null) =>
+            setFormErrorMessage(errMessage)
+          }
+        />
+      );
     } else if (isCairoType(paramType.type)) {
       return <InputBase {...inputProps} />;
     } else {

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

@@ -7,7 +7,7 @@ import { useAnimationConfig } from "~~/hooks/scaffold-stark";
 import { AbiFunction } from "~~/utils/scaffold-stark/contract";
 import { Abi } from "abi-wan-kanabi";
 import { Address } from "@starknet-react/chains";
-import { useContractRead } from "@starknet-react/core";
+import { useReadContract } from "@starknet-react/core";
 import { BlockNumber } from "starknet";
 import { displayTxResult } from "./utilsDisplay";
 import { useTheme } from "next-themes";
@@ -31,7 +31,8 @@ export const DisplayVariable = ({
     isLoading,
     isFetching,
     refetch,
-  } = useContractRead({
+    error,
+  } = useReadContract({
     address: contractAddress,
     functionName: abiFunction.name,
     abi: [...abi],
@@ -42,6 +43,14 @@ export const DisplayVariable = ({
   const { resolvedTheme } = useTheme();
   const isDarkMode = resolvedTheme === "dark";
 
+  // error logging
+  useEffect(() => {
+    if (error) {
+      console.error(error?.message);
+      console.error(error.stack);
+    }
+  }, [error]);
+
   useEffect(() => {
     refetch();
   }, [refetch, refreshDisplayVariables]);