Update Challenge-base last Version Scaffold Stark

.github/workflows/lint.yml

@@ -34,12 +34,6 @@ jobs:
         run: yarn install --immutable
         working-directory: ./packages/nextjs
 
-      - name: Install scarb
-        run: curl --proto '=https' --tlsv1.2 -sSf https://docs.swmansion.com/scarb/install.sh | sh -s -- -v 2.5.4
-
-      - name: Check Code Format
-        run: npm run format:check
-
       - name: Run Next.js lint
         run: yarn next:lint --max-warnings=0
         working-directory: ./packages/nextjs
@@ -50,4 +44,4 @@ jobs:
 
       - name: Build Next.js project
         run: yarn build
-        working-directory: ./packages/nextjs
+        working-directory: ./packages/nextjs

README.md

@@ -21,9 +21,9 @@ Before you begin, you need to install the following tools:
 
 ### Compatible versions
 
-- Scarb - v2.5.4
-- Snforge - v0.25.0
-- Cairo - v2.5.4
+- Scarb - v2.6.5
+- Snforge - v0.27.0
+- Cairo - v2.6.4
 
 Make sure you have the compatible versions otherwise refer to [Scaffold-Stark Requirements](https://github.com/Quantum3-Labs/scaffold-stark-2?.tab=readme-ov-file#requirements)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ss-2",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "author": "Q3 Labs",
   "license": "MIT",
   "private": true,
@@ -13,6 +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",
     "test": "yarn workspace @ss-2/snfoundry test",
     "compile": "yarn workspace @ss-2/snfoundry compile",
     "start": "yarn workspace @ss-2/nextjs dev",

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

@@ -5,11 +5,15 @@ import { useReducer } from "react";
 import { ContractReadMethods } from "./ContractReadMethods";
 // import { ContractWriteMethods } from "./ContractWriteMethods";
 import { Address, Balance } from "~~/components/scaffold-stark";
-import { useDeployedContractInfo } from "~~/hooks/scaffold-stark";
+import {
+  useDeployedContractInfo,
+  useNetworkColor,
+} from "~~/hooks/scaffold-stark";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { ContractName } from "~~/utils/scaffold-stark/contract";
 import { ContractVariables } from "./ContractVariables";
 import { ContractWriteMethods } from "./ContractWriteMethods";
+import { ClassHash } from "~~/components/scaffold-stark/ClassHash";
 
 type ContractUIProps = {
   contractName: ContractName;
@@ -51,13 +55,17 @@ export const ContractUI = ({
     <div
       className={`grid grid-cols-1 lg:grid-cols-6 px-6 lg:px-10 lg:gap-12 w-full max-w-7xl my-0 ${className}`}
     >
-      <div className="col-span-5 grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10 ">
+      <div className="col-span-5 grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10">
         <div className="col-span-1 flex flex-col">
           <div className="bg-transparent border-gradient rounded-[5px] px-6 lg:px-8 mb-6 space-y-1 py-4">
             <div className="flex">
               <div className="flex flex-col gap-1">
-                <span className="font-bold text-neutral">{contractName}</span>
+                <span className="font-bold">{contractName}</span>
                 <Address address={deployedContractData.address} />
+                <ClassHash
+                  classHash={deployedContractData.classHash}
+                  size="xs"
+                />
                 <div className="flex gap-1 items-center">
                   <span className="font-bold text-sm">Balance:</span>
                   <Balance

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

@@ -85,6 +85,7 @@ export const ReadOnlyFunctionForm = ({
             </div>
           )}
         </div>
+
         <div
           className={`flex ${
             formErrorMessage &&

packages/nextjs/app/debug/page.tsx

@@ -12,6 +12,16 @@ const Debug: NextPage = () => {
   return (
     <>
       <DebugContracts />
+      {/* <div className="text-center mt-8 bg-secondary p-10">
+        <h1 className="text-4xl my-0">Debug Contracts</h1>
+        <p className="text-neutral">
+          You can debug & interact with your deployed contracts here.
+          <br /> Check{" "}
+          <code className="italic bg-base-300 text-base font-bold [word-spacing:-0.5rem] px-1">
+            packages / nextjs / app / debug / page.tsx
+          </code>{" "}
+        </p>
+      </div> */}
     </>
   );
 };

packages/nextjs/components/Footer.tsx

@@ -1,15 +1,13 @@
 import React from "react";
-import Link from "next/link";
 
-import {
-  CurrencyDollarIcon,
-  MagnifyingGlassIcon,
-} from "@heroicons/react/24/outline";
+import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { useGlobalState } from "~~/services/store/store";
-import { devnet } from "@starknet-react/chains";
-import { Faucet } from "./scaffold-stark";
-import { getBlockExplorerLink } from "~~/utils/scaffold-stark";
+import { devnet, sepolia, mainnet } from "@starknet-react/chains";
+import { Faucet } from "~~/components/scaffold-stark/Faucet";
+import { FaucetSepolia } from "~~/components/scaffold-stark/FaucetSepolia";
+import { BlockExplorerSepolia } from "./scaffold-stark/BlockExplorerSepolia";
+import { BlockExplorer } from "./scaffold-stark/BlockExplorer";
 
 /**
  * Site footer
@@ -20,12 +18,14 @@ export const Footer = () => {
   );
   const { targetNetwork } = useTargetNetwork();
   const isLocalNetwork = targetNetwork.id === devnet.id;
+  const isSepoliaNetwork = targetNetwork.id === sepolia.id;
+  const isMainnetNetwork = targetNetwork.id === mainnet.id;
 
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0 bg-base-100">
       <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 md:flex-row gap-2 pointer-events-auto text-[12px] sm:text-[16px]">
+        <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">
@@ -34,27 +34,28 @@ export const Footer = () => {
                 </div>
               </div>
             )}
+            {isSepoliaNetwork && (
+              <>
+                <FaucetSepolia />
+                <BlockExplorerSepolia />
+              </>
+            )}
             {isLocalNetwork && (
               <>
                 <Faucet />
-                <Link
-                  href={getBlockExplorerLink(targetNetwork)}
-                  target={"_blank"}
-                  rel={"noopener noreferrer"}
-                  passHref
-                  className="btn btn-sm font-normal gap-1 border border-[#32BAC4] shadow-none"
-                >
-                  <MagnifyingGlassIcon className="h-4 w-4 text-[#32BAC4]" />
-                  <span>Block Explorer</span>
-                </Link>
+              </>
+            )}
+            {isMainnetNetwork && (
+              <>
+                <BlockExplorer />
               </>
             )}
           </div>
         </div>
       </div>
-      <div className="w-full ">
-        <ul className="menu menu-horizontal w-full ">
-          <div className="flex justify-center items-center gap-2 text-sm w-full ">
+      <div className="w-full">
+        <ul className="menu menu-horizontal w-full">
+          <div className="flex justify-center items-center gap-2 text-sm w-full">
             <div className="text-center">
               <a
                 href="https://github.com/Quantum3-Labs/scaffold-stark-2"
@@ -66,6 +67,31 @@ export const Footer = () => {
               </a>
             </div>
             <span>·</span>
+            {/* <div className="flex justify-center items-center gap-2">
+              <p className="m-0 text-center">
+                Built with <HeartIcon className="inline-block h-4 w-4" /> by
+              </p>
+              <a
+                className="flex justify-center items-center gap-1"
+                href="https://quantum3labs.com/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <BuidlGuidlLogo className="w-3 h-5 pb-1" />
+                <span className="link">Q3 Labs</span>
+              </a>
+              <p className="m-0 text-center">at</p>
+              <a
+                className="flex justify-center items-center gap-1"
+                href="https://buidlguidl.com/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <BuidlGuidlLogo className="w-3 h-5 pb-1" />
+                <span className="link">BuidlGuidl</span>
+              </a>
+            </div>
+            <span>·</span> */}
             <div className="text-center">
               <a
                 href="https://t.me/+wO3PtlRAreo4MDI9"

packages/nextjs/components/Header.tsx

@@ -13,7 +13,7 @@ import { devnet } from "@starknet-react/chains";
 import { SwitchTheme } from "./SwitchTheme";
 import { useAccount, useProvider } from "@starknet-react/core";
 
-export type HeaderMenuLink = {
+type HeaderMenuLink = {
   label: string;
   href: string;
   icon?: React.ReactNode;
@@ -71,13 +71,13 @@ export const HeaderMenuLinks = () => {
 export const Header = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const burgerMenuRef = useRef<HTMLDivElement>(null);
-
   useOutsideClick(
     burgerMenuRef,
     useCallback(() => setIsDrawerOpen(false), []),
   );
   const { targetNetwork } = useTargetNetwork();
   const isLocalNetwork = targetNetwork.id === devnet.id;
+
   const { provider } = useProvider();
   const { address, status } = useAccount();
   const [isDeployed, setIsDeployed] = useState(true);

packages/nextjs/components/SwitchTheme.tsx

@@ -28,6 +28,13 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
     <div
       className={`flex space-x-2 h-5 items-center justify-center text-sm border-l border-neutral px-4 ${className}`}
     >
+      {/* <input
+        id="theme-toggle"
+        type="checkbox"
+        className="toggle toggle-primary bg-primary hover:bg-primary border-primary"
+        onChange={handleToggle}
+        checked={isDarkMode}
+      /> */}
       {
         <label
           htmlFor="theme-toggle"