Update Challenge-simple-nft-example last Version Scaffold Stark

.github/workflows/demo.yaml

@@ -5,12 +5,13 @@ on:
     types: [closed]
     branches: [main]
     paths:
-      - "packages/nextjs/**"
+      - 'packages/nextjs/**'
 
 jobs:
   version-bump-nextjs:
     runs-on: ubuntu-22.04
     steps:
+
       - name: Checkout Source Repository
         uses: actions/checkout@v4
         with:
@@ -28,7 +29,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 20
-          registry-url: "https://registry.yarnpkg.com"
+          registry-url: 'https://registry.yarnpkg.com'
 
       - name: Deploy to vercel
         if: success()
@@ -60,3 +61,4 @@ jobs:
           slack-message: "GitHub deployed to vercel result: ${{ job.status }}\nRepository Name: ${{ github.repository }}\n${{ github.event.pull_request.html_url || github.event.head_commit.url }}"
         env:
           SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
+

.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

.github/workflows/release-create-stark.yaml

@@ -55,7 +55,7 @@ jobs:
           git commit -m "chore: sync files from scaffold-stark-2 [skip ci]"
 
       - name: Format .gitignore files
-        run: |
+        run: | 
           find destination_repo/templates/base -type f -name ".gitignore" | while read -r gitignore_file; do
             mjs_file="${gitignore_file%/*}/.gitignore.template.mjs"
             gitignore_content=$(cat "$gitignore_file")
@@ -83,8 +83,8 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
-          registry-url: "https://registry.npmjs.org/"
+          node-version: '16'
+          registry-url: 'https://registry.npmjs.org/'
 
       - name: Publish release
         if: success()
@@ -93,7 +93,7 @@ jobs:
           cd destination_repo
           npm install && npm run build && npm publish
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}  
 
       - name: Notify Slack on Success
         if: success()

README.md

@@ -123,7 +123,7 @@ Prepare your environment variables.
 
 > 🦊 Since we have deployed to a public testnet, you will now need to connect using a wallet you own(Argent X or Braavos).
 
-![connect-wallet](https://raw.githubusercontent.com/Quantum3-Labs/speedrunstark/gabi/simple-nft-example/packages/nextjs/public/ch0-wallet.png)
+![connect-wallet](https://raw.githubusercontent.com/Quantum3-Labs/speedrunstark/simple-nft-example/packages/nextjs/public/ch0-wallet.png)
 
 > You should see the correct network in the frontend (<http://localhost:3000>):
 

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

@@ -10,6 +10,7 @@ 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;
@@ -58,6 +59,10 @@ export const ContractUI = ({
               <div className="flex flex-col gap-1">
                 <span className="font-bold text-neutral">{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

@@ -1,4 +1,5 @@
 "use client";
+
 import React, { useCallback, useRef, useState, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
@@ -19,7 +20,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;
@@ -61,7 +62,6 @@ export const HeaderMenuLinks = () => {
   useEffect(() => {
     setIsDark(theme === "dark");
   }, [theme]);
-
   return (
     <>
       {menuLinks.map(({ label, href, icon }) => {
@@ -93,13 +93,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);
@@ -151,7 +151,7 @@ export const Header = () => {
               alt="SE2 logo"
               className="cursor-pointer"
               fill
-              src="/challenge-icon-starknet.svg"
+              src="/logo.svg"
             />
           </div>
           <div className="flex flex-col">
@@ -170,6 +170,7 @@ export const Header = () => {
           </span>
         ) : null}
         <CustomConnectButton />
+        {/* <FaucetButton /> */}
         <SwitchTheme
           className={`pointer-events-auto ${
             isLocalNetwork ? "self-end md:self-auto" : ""

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"