Update base-challenge-template (#153)

.tool-versions

@@ -1,3 +1,3 @@
-scarb 2.8.2
-starknet-foundry 0.30.0
+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

@@ -37,8 +37,8 @@ If your local starknet-devnet version is not `0.2.0`, you need to install it.
 ### Compatible versions
 
 - Starknet-devnet - v0.2.0
-- Scarb - v2.8.2
-- Snforge - v0.30.0
+- Scarb - v2.8.3
+- Snforge - v0.31.0
 - Cairo - v2.8.2
 - RPC - v0.7.1
 
@@ -89,4 +89,4 @@ _To finish your README, can add these links_
 
 > 🏃 Head to your next challenge [here](https://speedrunstark.com/).
 
-> 💬 Problems, questions, comments on the stack? Post them to the [🏗 Scaffold-Stark developers chat](https://t.me/+wO3PtlRAreo4MDI9)
+> 💬 Problems, questions, comments on the stack? Post them to the [🏗 Scaffold-Stark developers chat](https://t.me/+wO3PtlRAreo4MDI9)

package.json

@@ -24,7 +24,8 @@
     "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/app/configure/_components/DownloadContracts.tsx

@@ -81,7 +81,7 @@ export default function DownloadContracts() {
               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>{" "}
+              <code className="text-function">configExternalContracts.ts</code>{" "}
               file, allowing you to debug in the{" "}
               <code className="text-function">/debug</code> page.
             </p>

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

@@ -1,9 +1,9 @@
 "use client";
 
 // @refresh reset
-import { useReducer } from "react";
+import { useReducer, useState } from "react";
+import dynamic from "next/dynamic";
 import { ContractReadMethods } from "./ContractReadMethods";
-// import { ContractWriteMethods } from "./ContractWriteMethods";
 import { Address, Balance } from "~~/components/scaffold-stark";
 import {
   useDeployedContractInfo,
@@ -12,9 +12,16 @@ import {
 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";
 
+const ContractWriteMethods = dynamic(
+  () =>
+    import("./ContractWriteMethods").then((mod) => mod.ContractWriteMethods),
+  {
+    loading: () => <p>Loading Write Methods...</p>,
+  },
+);
+
 type ContractUIProps = {
   contractName: ContractName;
   className?: string;
@@ -27,6 +34,7 @@ export const ContractUI = ({
   contractName,
   className = "",
 }: ContractUIProps) => {
+  const [activeTab, setActiveTab] = useState("read");
   const [refreshDisplayVariables, triggerRefreshDisplayVariables] = useReducer(
     (value) => !value,
     false,
@@ -35,6 +43,11 @@ export const ContractUI = ({
   const { data: deployedContractData, isLoading: deployedContractLoading } =
     useDeployedContractInfo(contractName);
 
+  const tabs = [
+    { id: "read", label: "Read" },
+    { id: "write", label: "Write" },
+  ];
+
   if (deployedContractLoading) {
     return (
       <div className="mt-14">
@@ -89,33 +102,33 @@ export const ContractUI = ({
             />
           </div>
         </div>
+
         <div className="col-span-1 lg:col-span-2 flex flex-col gap-6">
-          <div className="z-10">
-            <div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
-              <div className="bg-function w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem] clip-corner">
-                <div className="flex items-center justify-center space-x-2">
-                  <p className="my-0 text-sm text-center">Read</p>
-                </div>
-              </div>
-              <div className="p-5 divide-y divide-secondary">
-                <ContractReadMethods
-                  deployedContractData={deployedContractData}
-                />
-              </div>
-            </div>
+          <div className="tabs tabs-boxed border border-[#8A45FC] rounded-[5px] bg-transparent">
+            {tabs.map((tab) => (
+              <a
+                key={tab.id}
+                className={`tab h-10 ${activeTab === tab.id ? "tab-active !bg-[#8A45FC] !rounded-[5px] !text-white" : ""}`}
+                onClick={() => setActiveTab(tab.id)}
+              >
+                {tab.label}
+              </a>
+            ))}
           </div>
           <div className="z-10">
-            <div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
-              <div className="w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem]  bg-function clip-corner">
-                <div className="flex items-center justify-center space-x-2">
-                  <p className="my-0 text-sm">Write</p>
-                </div>
-              </div>
+            <div className="rounded-[5px] border border-[#8A45FC] flex flex-col relative bg-component">
               <div className="p-5 divide-y divide-secondary">
-                <ContractWriteMethods
-                  deployedContractData={deployedContractData}
-                  onChange={triggerRefreshDisplayVariables}
-                />
+                {activeTab === "read" && (
+                  <ContractReadMethods
+                    deployedContractData={deployedContractData}
+                  />
+                )}
+                {activeTab === "write" && (
+                  <ContractWriteMethods
+                    deployedContractData={deployedContractData}
+                    onChange={triggerRefreshDisplayVariables}
+                  />
+                )}
               </div>
             </div>
           </div>

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

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

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

@@ -3,6 +3,7 @@
 import { useEffect, useMemo, useState } from "react";
 import {
   ContractInput,
+  //   TxReceipt,
   getFunctionInputKey,
   getInitialFormState,
   getParsedContractFunctionArgs,
@@ -27,6 +28,7 @@ type WriteOnlyFunctionFormProps = {
   abiFunction: AbiFunction;
   onChange: () => void;
   contractAddress: Address;
+  //   inheritedFrom?: string;
 };
 
 export const WriteOnlyFunctionForm = ({
@@ -141,6 +143,7 @@ export const WriteOnlyFunctionForm = ({
       >
         <p className="font-medium my-0 break-words text-function">
           {abiFunction.name}
+          {/* <InheritanceTooltip inheritedFrom={undefined} /> */}
         </p>
         {inputs}
         <div className="flex justify-between gap-2">
@@ -172,7 +175,7 @@ export const WriteOnlyFunctionForm = ({
         </div>
       </div>
       {zeroInputs && txResult ? (
-        <div className="flex-grow basis-0 ">
+        <div className="flex-grow basis-0">
           <TxReceipt txResult={txResult} />
         </div>
       ) : null}

packages/nextjs/app/layout.tsx

@@ -3,7 +3,6 @@ import { ScaffoldStarkAppWithProviders } from "~~/components/ScaffoldStarkAppWit
 import "~~/styles/globals.css";
 import { ThemeProvider } from "~~/components/ThemeProvider";
 import { Space_Grotesk } from "next/font/google";
-
 const spaceGrotesk = Space_Grotesk({ subsets: ["latin"] });
 
 export const metadata: Metadata = {

packages/nextjs/components/Footer.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect } from "react";
 
-import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
+import { Cog8ToothIcon, CurrencyDollarIcon } from "@heroicons/react/24/outline";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { useGlobalState } from "~~/services/store/store";
 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";
+import Link from "next/link";
 
 /**
  * Site footer
@@ -57,6 +58,14 @@ export const Footer = () => {
                 <BlockExplorer />
               </>
             )}
+            <Link
+              href={"/configure"}
+              passHref
+              className="btn btn-sm font-normal gap-1 cursor-pointer border border-[#32BAC4] shadow-none"
+            >
+              <Cog8ToothIcon className="h-4 w-4 text-[#32BAC4]" />
+              <span>Configure Contracts</span>
+            </Link>
           </div>
         </div>
       </div>

packages/nextjs/components/scaffold-stark/Balance.tsx

@@ -76,7 +76,7 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
   return (
     <>
       <button
-        className={`btn btn-sm btn-ghost flex flex-col font-normal items-center hover:bg-transparent ${className}`}
+        className={` btn btn-sm btn-ghost flex flex-col font-normal items-center hover:bg-transparent ${className}`}
         onClick={toggleBalanceMode}
       >
         <div className="w-full flex items-center justify-center">
@@ -92,7 +92,7 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
             </div>
           ) : (
             <>
-              <div className="flex gap-4">
+              <div className="flex flex-col sm:flex-row sm:gap-4">
                 <div className="flex">
                   <span>{parseFloat(formatted).toFixed(4)}</span>
                   <span className="text-[0.8em] font-bold ml-1">

packages/nextjs/components/scaffold-stark/BlockExplorer.tsx

@@ -4,6 +4,8 @@ import { Address as AddressType, mainnet } from "@starknet-react/chains";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { useNetwork } from "@starknet-react/core";
 import Image from "next/image";
+import GenericModal from "./CustomConnectButton/GenericModal";
+import { useTheme } from "next-themes";
 
 export const BlockExplorer = () => {
   const { chain: ConnectedChain } = useNetwork();
@@ -26,6 +28,9 @@ export const BlockExplorer = () => {
     },
   ];
 
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
+
   // Render only on mainnet chain
   if (ConnectedChain?.id !== mainnet.id) {
     return null;
@@ -45,42 +50,40 @@ export const BlockExplorer = () => {
         id="blockexplorer-modal"
         className="modal-toggle"
       />
-      <label htmlFor="blockexplorer-modal" className="modal cursor-pointer">
-        <label className="modal-box relative">
-          {/* dummy input to capture event onclick on modal box */}
-          <input className="h-0 w-0 absolute top-0 left-0" />
-          <h3 className="text-xl font-bold mb-3">Mainnet Block Explorers</h3>
+      <GenericModal modalId="blockexplorer-modal">
+        <div className="flex items-center justify-between">
+          <h3 className="text-xl font-bold">Mainnet Block Explorers</h3>
           <label
             htmlFor="blockexplorer-modal"
-            className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3"
+            className="btn btn-ghost btn-sm btn-circle"
           >
             ✕
           </label>
-          <div className="mb-4 mt-6">
-            <div className="flex flex-col space-y-3">
-              {blockExplorers.length &&
-                blockExplorers.map((blockexplorer, id) => (
-                  <a
-                    href={blockexplorer.link}
-                    target="_blank"
-                    className="h-12 btn btn-primary flex justify-start btn-sm px-6 gap-4 rounded-full"
-                    key={id}
-                  >
-                    <div className="flex relative w-6 h-6">
-                      <Image
-                        alt="Starknet Developers Hub"
-                        className="cursor-pointer"
-                        fill
-                        src={blockexplorer.img}
-                      />
-                    </div>
-                    <p className="text-sm m-0">{blockexplorer.name}</p>
-                  </a>
-                ))}
-            </div>
+        </div>
+        <div className="mb-4 mt-6">
+          <div className="flex flex-col gap-4">
+            {blockExplorers.length &&
+              blockExplorers.map((blockexplorer, id) => (
+                <a
+                  href={blockexplorer.link}
+                  target="_blank"
+                  className={`h-12 flex items-center btn-sm px-6 gap-4 rounded-[4px] transition-all modal-border ${isDarkMode ? "hover:bg-[#385183]" : "hover:bg-slate-200"} border `}
+                  key={id}
+                >
+                  <div className="flex relative w-6 h-6">
+                    <Image
+                      alt="Starknet Developers Hub"
+                      className="cursor-pointer"
+                      fill
+                      src={blockexplorer.img}
+                    />
+                  </div>
+                  <span className="text-sm m-0">{blockexplorer.name}</span>
+                </a>
+              ))}
           </div>
-        </label>
-      </label>
+        </div>
+      </GenericModal>
     </div>
   );
 };