chore: sync files from scaffold-stark-2

Author: github-actions[bot]

.github/workflows/main.yml

@@ -11,7 +11,7 @@ on:
       - develop
     paths:
       - "packages/nextjs/**"
-      - "packages/snfoundry/contracts/**"
+      - "packages/snfoundry/**"
 
 jobs:
   ci:

.gitignore

@@ -13,3 +13,6 @@ package-lock.json
 .eslintcache
 .DS_Store
 .vercel
+
+**/.env*
+!**/.env.example

.tool-versions

@@ -1,3 +1,3 @@
 scarb 2.11.4
-starknet-foundry 0.45.0
+starknet-foundry 0.46.0
 starknet-devnet 0.4.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ss-2",
-  "version": "1.0.16",
+  "version": "1.1.0",
   "author": "Q3 Labs",
   "license": "MIT",
   "private": true,

packages/nextjs/.env.example

@@ -1,12 +1,10 @@
-NEXT_PUBLIC_PROVIDER_URL=http://127.0.0.1:5050  
-
 # URL Devnet
 NEXT_PUBLIC_DEVNET_PROVIDER_URL=http://127.0.0.1:5050
 
 # URL Sepolia
-# NEXT_PUBLIC_SEPOLIA_PROVIDER_URL=https://starknet-sepolia.blastapi.io/64168c77-3fa5-4e1e-9fe4-41675d212522/rpc/v0_8
+NEXT_PUBLIC_SEPOLIA_PROVIDER_URL=https://starknet-sepolia.blastapi.io/64168c77-3fa5-4e1e-9fe4-41675d212522/rpc/v0_8
 
 # URL Mainnet
-# NEXT_PUBLIC_MAINNET_PROVIDER_URL=https://starknet-mainnet.blastapi.io/64168c77-3fa5-4e1e-9fe4-41675d212522/rpc/v0_8
+NEXT_PUBLIC_MAINNET_PROVIDER_URL=https://starknet-mainnet.blastapi.io/64168c77-3fa5-4e1e-9fe4-41675d212522/rpc/v0_8
 
 

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

@@ -7,9 +7,7 @@ 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";
+// Prettier imports moved to lazy loading for better performance
 
 export default function DownloadContracts() {
   const { provider } = useProvider();
@@ -49,17 +47,25 @@ export default function DownloadContracts() {
 
   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.
-*/`;
+    * This file is autogenerated by Scaffold-Stark.
+    * You should not edit it manually or your changes might be overwritten.
+    */`;
 
-    const configExternalContracts = await prettier.format(
+    // Lazy load prettier and plugins only when needed
+    const [prettier, parserTypescript, prettierPluginEstree] =
+      await Promise.all([
+        import("prettier/standalone"),
+        import("prettier/plugins/typescript"),
+        import("prettier/plugins/estree"),
+      ]);
+
+    const configExternalContracts = await prettier.default.format(
       `${generatedContractComment}\n\nconst configExternalContracts = ${JSON.stringify(
         contractsData,
       )} as const;\n\nexport default configExternalContracts;`,
       {
         parser: "typescript",
-        plugins: [parserTypescript, prettierPluginEstree],
+        plugins: [parserTypescript.default, prettierPluginEstree.default],
       },
     );
     const blob = new Blob([configExternalContracts], {
@@ -130,7 +136,7 @@ export default function DownloadContracts() {
                 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"
+                className="input bg-input input-ghost rounded-none focus-within:border-transparent focus:outline-hidden h-[2.2rem] min-h-[2.2rem] px-4 border w-full text-sm placeholder:text-[#9596BF] text-neutral"
                 placeholder="Enter contract name"
               />
             </div>
@@ -140,15 +146,15 @@ export default function DownloadContracts() {
               </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"
+                  className="input bg-input input-ghost rounded-none focus-within:border-transparent focus:outline-hidden 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"
+                className="btn btn-sm mt-12 border-none! max-w-56 bg-gradient-nav text-white! shadow-md flex gap-2"
                 onClick={handleDownload}
               >
                 Download Contract File

packages/nextjs/app/debug/_components/DebugContracts.tsx

@@ -2,7 +2,16 @@
 
 import { useEffect } from "react";
 import { useLocalStorage } from "usehooks-ts";
-import { ContractUI } from "~~/app/debug/_components/contract";
+import dynamic from "next/dynamic";
+
+const ContractUI = dynamic(
+  () =>
+    import("~~/app/debug/_components/contract/ContractUI").then(
+      (mod) => mod.ContractUI,
+    ),
+  { ssr: false },
+);
+
 import { ContractName } from "~~/utils/scaffold-stark/contract";
 import { getAllContracts } from "~~/utils/scaffold-stark/contractsData";
 

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

@@ -53,12 +53,12 @@ export const ArrayInput = ({
 
   return (
     <div>
-      <div className="collapse bg-base-200 pl-4 pt-1.5 pb-2 border-2 border-secondary custom-after">
+      <div className="collapse bg-base-200 pl-4 pt-1.5 border-2 border-secondary custom-after">
         <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">
           <p className="m-0 p-0 text-[1rem]">array (length: {arrLength + 1})</p>
         </div>
-        <div className="ml-3 flex-col space-y-4 border-secondary/80 border-l-2 pl-4 collapse-content">
+        <div className="ml-3 flex-col space-y-4 border-secondary/80 peer-checked:mb-3 border-l-2 pl-4 collapse-content">
           {/*  do note here that the "index" are basically array keys */}
           {Object.keys(inputArr).map((index) => {
             return (

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

@@ -1,9 +1,6 @@
-"use client";
-
 // @refresh reset
-import { useReducer, useState } from "react";
+import { useMemo, useReducer, useState } from "react";
 import dynamic from "next/dynamic";
-import { ContractReadMethods } from "./ContractReadMethods";
 import { Address, Balance } from "~~/components/scaffold-stark";
 import {
   useDeployedContractInfo,
@@ -17,12 +14,12 @@ import {
 import { ContractVariables } from "./ContractVariables";
 import { ClassHash } from "~~/components/scaffold-stark/ClassHash";
 
-const ContractWriteMethods = dynamic(
-  () =>
-    import("./ContractWriteMethods").then((mod) => mod.ContractWriteMethods),
-  {
-    loading: () => <p>Loading Write Methods...</p>,
-  },
+const ContractWriteMethods = dynamic(() =>
+  import("./ContractWriteMethods").then((mod) => mod.ContractWriteMethods),
+);
+
+const ContractReadMethods = dynamic(() =>
+  import("./ContractReadMethods").then((mod) => mod.ContractReadMethods),
 );
 
 type ContractUIProps = {
@@ -54,6 +51,17 @@ export const ContractUI = ({
     { id: "write", label: "Write" },
   ];
 
+  const tabContent = useMemo(() => {
+    return activeTab === "write" ? (
+      <ContractWriteMethods
+        deployedContractData={deployedContractData}
+        onChange={triggerRefreshDisplayVariables}
+      />
+    ) : (
+      <ContractReadMethods deployedContractData={deployedContractData} />
+    );
+  }, [activeTab, deployedContractData, triggerRefreshDisplayVariables]);
+
   if (status === ContractCodeStatus.NOT_FOUND) {
     return (
       <p className="text-3xl mt-14">
@@ -81,7 +89,7 @@ export const ContractUI = ({
                   <span className="font-bold text-sm">Balance:</span>
                   <Balance
                     address={deployedContractData.address}
-                    className="px-0 h-1.5 min-h-[0.375rem] text-network"
+                    className="px-0 h-1.5 min-h-1.5 text-network"
                   />
                 </div>
               </div>
@@ -102,13 +110,13 @@ export const ContractUI = ({
         </div>
 
         <div className="col-span-1 lg:col-span-2 flex flex-col gap-6">
-          <div className="tabs tabs-boxed border border-[#8A45FC] rounded-[5px] bg-transparent">
+          <div className="tabs tabs-box  border border-[#8A45FC] rounded-[5px] bg-transparent">
             {tabs.map((tab) => (
               <a
                 key={tab.id}
-                className={`tab h-10 ${
+                className={`tab h-10 w-1/2 ${
                   activeTab === tab.id
-                    ? "tab-active !bg-[#8A45FC] !rounded-[5px] !text-white"
+                    ? "tab-active bg-[#8A45FC]! rounded-[5px]! text-white! w-1/2"
                     : ""
                 }`}
                 onClick={() => setActiveTab(tab.id)}
@@ -119,19 +127,7 @@ export const ContractUI = ({
           </div>
           <div className="z-10">
             <div className="rounded-[5px] border border-[#8A45FC] flex flex-col relative bg-component">
-              <div className="p-5 divide-y divide-secondary">
-                {activeTab === "read" && (
-                  <ContractReadMethods
-                    deployedContractData={deployedContractData}
-                  />
-                )}
-                {activeTab === "write" && (
-                  <ContractWriteMethods
-                    deployedContractData={deployedContractData}
-                    onChange={triggerRefreshDisplayVariables}
-                  />
-                )}
-              </div>
+              <div className="p-5 divide-y divide-secondary">{tabContent}</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" />

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

@@ -147,7 +147,7 @@ export const DisplayVariable = ({
         <div>
           <div
             className={`break-all block transition bg-transparent ${
-              showAnimation ? "bg-warning rounded-sm animate-pulse-fast" : ""
+              showAnimation ? "bg-warning rounded-xs animate-pulse-fast" : ""
             }`}
           >
             {decodeContractResponse({