Update ch-3 new version V3 (#156)

Co-authored-by: Bủ <[email protected]>
Co-authored-by: metalboyrick <[email protected]>

.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.3
+starknet-foundry 0.31.0
+starknet-devnet 0.2.0

.yarnrc.yml

@@ -1,11 +1,11 @@
-compressionLevel: mixed
-
 enableColors: true
 
-enableGlobalCache: false
-
 nmHoistingLimits: workspaces
 
 nodeLinker: node-modules
 
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+
 yarnPath: .yarn/releases/yarn-3.2.3.cjs

README.md

@@ -29,11 +29,11 @@ Before you begin, you need to install the following tools:
 
 ### Compatible versions
 
-- Starknet-devnet - v0.0.4
-- Scarb - v2.6.5
-- Snforge - v0.27
-- Cairo - v2.6.4
-- Rpc - v0.7.0
+- Starknet-devnet - v0.2.0
+- Scarb - v2.8.3
+- Snforge - v0.31.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)
 

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,9 +21,11 @@
     "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"
+    "prepare": "husky",
+    "verify": "yarn workspace @ss-2/snfoundry verify"
   },
   "packageManager": "[email protected]",
   "devDependencies": {

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">configExternalContracts.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/ContractReadMethods.tsx

@@ -1,7 +1,10 @@
 import { Abi } from "abi-wan-kanabi";
 import {
+  AbiFunction,
   Contract,
   ContractName,
+  GenericContract,
+  InheritedFunctions,
   getFunctionsByStateMutability,
 } from "~~/utils/scaffold-stark/contract";
 import { ReadOnlyFunctionForm } from "./ReadOnlyFunctionForm";