Sync Ch-0 with the last PR version the Scaffold Stark

package.json

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

packages/nextjs/.gitignore

@@ -34,4 +34,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts

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

@@ -54,7 +54,9 @@ export default function DownloadContracts() {
 */`;
 
     const configExternalContracts = await prettier.format(
-      `${generatedContractComment}\n\nconst configExternalContracts = ${JSON.stringify(contractsData)} as const;\n\nexport default configExternalContracts;`,
+      `${generatedContractComment}\n\nconst configExternalContracts = ${JSON.stringify(
+        contractsData,
+      )} as const;\n\nexport default configExternalContracts;`,
       {
         parser: "typescript",
         plugins: [parserTypescript, prettierPluginEstree],

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

@@ -106,7 +106,11 @@ export const ContractUI = ({
             {tabs.map((tab) => (
               <a
                 key={tab.id}
-                className={`tab h-10 ${activeTab === tab.id ? "tab-active !bg-[#8A45FC] !rounded-[5px] !text-white" : ""}`}
+                className={`tab h-10 ${
+                  activeTab === tab.id
+                    ? "tab-active !bg-[#8A45FC] !rounded-[5px] !text-white"
+                    : ""
+                }`}
                 onClick={() => setActiveTab(tab.id)}
               >
                 {tab.label}

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

@@ -59,7 +59,9 @@ export const DisplayVariable = ({
     <div className="space-y-1 pb-2">
       <div className="flex items-center">
         <h3
-          className={`font-medium text-lg mb-0 break-all ${isDarkMode ? "text-[#4DB4FF]" : "text-[#7800FF]"}`}
+          className={`font-medium text-lg mb-0 break-all ${
+            isDarkMode ? "text-[#4DB4FF]" : "text-[#7800FF]"
+          }`}
         >
           {abiFunction.name}
         </h3>

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

@@ -69,11 +69,15 @@ export const Struct = ({
   return (
     <div>
       <div
-        className={`collapse bg-base-200 pl-4 pt-1.5 pb-2 border-2 ${isDisabled ? "border-base-100 cursor-not-allowed" : "border-secondary"} custom-after`}
+        className={`collapse bg-base-200 pl-4 pt-1.5 pb-2 border-2 ${
+          isDisabled ? "border-base-100 cursor-not-allowed" : "border-secondary"
+        } custom-after`}
       >
         {!isDisabled && <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 ${isDisabled && "cursor-not-allowed"} `}
+          className={`collapse-title p-0 min-h-fit peer-checked:mb-2 text-primary-content/50 ${
+            isDisabled && "cursor-not-allowed"
+          } `}
         >
           <p className="m-0 p-0 text-[1rem]">{abiMember.type}</p>
         </div>

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

@@ -27,13 +27,15 @@ export const TxReceipt = (
             aria-hidden="true"
           />
         ) : (
+          //@ts-ignore coponent works but some typing issue came up, ts-expect-error does not work
           <CopyToClipboard
             text={
               decodeContractResponse({
                 resp: txResult,
                 abi: [],
                 functionOutputs: [],
                 asText: true,
+                showAsString: true,
               }) as string
             }
             onCopy={() => {

packages/nextjs/components/Header.tsx

@@ -94,10 +94,13 @@ export const HeaderMenuLinks = () => {
 export const Header = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const burgerMenuRef = useRef<HTMLDivElement>(null);
+
   useOutsideClick(
+    //@ts-expect-error refs are supposed to be null by default
     burgerMenuRef,
     useCallback(() => setIsDrawerOpen(false), []),
   );
+
   const { targetNetwork } = useTargetNetwork();
   const isLocalNetwork = targetNetwork.network === devnet.network;
 

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

@@ -4,11 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Address as AddressType } from "@starknet-react/chains";
-import {
-  getChecksumAddress,
-  validateAndParseAddress,
-  validateChecksumAddress,
-} from "starknet";
+import { getChecksumAddress, validateChecksumAddress } from "starknet";
 import { devnet } from "@starknet-react/chains";
 import {
   CheckCircleIcon,
@@ -17,7 +13,10 @@ import {
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-stark";
 import { BlockieAvatar } from "~~/components/scaffold-stark/BlockieAvatar";
-import useScaffoldStarkProfile from "~~/hooks/scaffold-stark/useScaffoldStarkProfile";
+import { useScaffoldStarkProfile } from "~~/hooks/scaffold-stark/useScaffoldStarkProfile";
+import { getStarknetPFPIfExists } from "~~/utils/profile";
+import { default as NextImage } from "next/image";
+import ConnectModal from "./CustomConnectButton/ConnectModal";
 
 type AddressProps = {
   address?: AddressType;
@@ -47,7 +46,6 @@ export const Address = ({
 }: AddressProps) => {
   const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const [addressCopied, setAddressCopied] = useState(false);
-  const [isUseBlockie, setIsUseBlockie] = useState(false);
 
   const { targetNetwork } = useTargetNetwork();
   const { data: fetchedProfile, isLoading } = useScaffoldStarkProfile(address);
@@ -81,7 +79,7 @@ export const Address = ({
   }, [fetchedProfile, checkSumAddress, address, format]);
 
   // Skeleton UI
-  if (!checkSumAddress || isLoading) {
+  if (isLoading) {
     return (
       <div className="animate-pulse flex space-x-4">
         <div className="rounded-md bg-slate-300 h-6 w-6"></div>
@@ -92,30 +90,32 @@ export const Address = ({
     );
   }
 
+  if (!checkSumAddress) {
+    return (
+      <div className="italic text-base font-bold ">Wallet not connected</div>
+    );
+  }
+
   if (!validateChecksumAddress(checkSumAddress)) {
     return <span className="text-error">Wrong address</span>;
   }
 
   return (
     <div className="flex items-center">
       <div className="flex-shrink-0">
-        {isUseBlockie ? (
-          <BlockieAvatar
-            address={checkSumAddress}
-            ensImage={ensAvatar}
-            size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-          />
-        ) : (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
+        {getStarknetPFPIfExists(fetchedProfile?.profilePicture) ? (
+          <NextImage
             src={fetchedProfile?.profilePicture || ""}
             alt="Profile Picture"
-            className="rounded-full h-6 w-6"
+            className="rounded-full"
             width={24}
             height={24}
-            onError={() => {
-              setIsUseBlockie(true);
-            }}
+          />
+        ) : (
+          <BlockieAvatar
+            address={checkSumAddress}
+            size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
+            ensImage={ensAvatar}
           />
         )}
       </div>
@@ -145,6 +145,7 @@ export const Address = ({
           aria-hidden="true"
         />
       ) : (
+        //@ts-ignore
         <CopyToClipboard
           text={checkSumAddress}
           onCopy={() => {

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

@@ -67,7 +67,9 @@ export const BlockExplorer = () => {
                 <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 `}
+                  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">

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

@@ -68,7 +68,9 @@ export const BlockExplorerSepolia = () => {
                   <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 `}
+                    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">

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

@@ -65,6 +65,7 @@ export const ClassHash = ({
           aria-hidden="true"
         />
       ) : (
+        // @ts-ignore
         <CopyToClipboard
           text={classHash}
           onCopy={() => {

packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx

@@ -15,13 +15,12 @@ import {
 import { useLocalStorage } from "usehooks-ts";
 import { BlockieAvatar, isENS } from "~~/components/scaffold-stark";
 import { useOutsideClick } from "~~/hooks/scaffold-stark";
-import { BurnerConnector } from "~~/services/web3/stark-burner/BurnerConnector";
+import { BurnerConnector, burnerAccounts } from "@scaffold-stark/stark-burner";
 import { getTargetNetworks } from "~~/utils/scaffold-stark";
-import { burnerAccounts } from "~~/utils/devnetAccounts";
 import { Address } from "@starknet-react/chains";
 import { useDisconnect, useNetwork, useConnect } from "@starknet-react/core";
 import { getStarknetPFPIfExists } from "~~/utils/profile";
-import useScaffoldStarkProfile from "~~/hooks/scaffold-stark/useScaffoldStarkProfile";
+import { useScaffoldStarkProfile } from "~~/hooks/scaffold-stark/useScaffoldStarkProfile";
 import { useTheme } from "next-themes";
 import { default as NextImage } from "next/image";
 
@@ -54,16 +53,16 @@ export const AddressInfoDropdown = ({
     setSelectingNetwork(false);
     dropdownRef.current?.removeAttribute("open");
   };
+
+  // @ts-expect-error ref are initialized with null by default
   useOutsideClick(dropdownRef, closeDropdown);
 
   function handleConnectBurner(
     e: React.MouseEvent<HTMLButtonElement>,
     ix: number,
   ) {
-    const connector = connectors.find(
-      (it) => it.id == "burner-wallet",
-    ) as BurnerConnector;
-    if (connector) {
+    const connector = connectors.find((it) => it.id == "burner-wallet");
+    if (connector && connector instanceof BurnerConnector) {
       connector.burnerAccount = burnerAccounts[ix];
       connect({ connector });
       setLastConnector({ id: connector.id, ix });
@@ -122,6 +121,7 @@ export const AddressInfoDropdown = ({
                 <span className=" whitespace-nowrap">Copy address</span>
               </div>
             ) : (
+              //@ts-ignore
               <CopyToClipboard
                 text={address}
                 onCopy={() => {
@@ -222,14 +222,21 @@ export const AddressInfoDropdown = ({
                               className="w-full flex flex-col"
                             >
                               <button
-                                className={`${isDarkMode ? "hover:bg-[#385183] border-[#385183]" : "hover:bg-gradient-light "} border rounded-md text-neutral py-[8px] pl-[10px] pr-16 flex items-center gap-4`}
+                                className={`${
+                                  isDarkMode
+                                    ? "hover:bg-[#385183] border-[#385183]"
+                                    : "hover:bg-gradient-light "
+                                } border rounded-md text-neutral py-[8px] pl-[10px] pr-16 flex items-center gap-4`}
                                 onClick={(e) => handleConnectBurner(e, ix)}
                               >
                                 <BlockieAvatar
                                   address={burnerAcc.accountAddress}
                                   size={35}
                                 ></BlockieAvatar>
-                                {`${burnerAcc.accountAddress.slice(0, 6)}...${burnerAcc.accountAddress.slice(-4)}`}
+                                {`${burnerAcc.accountAddress.slice(
+                                  0,
+                                  6,
+                                )}...${burnerAcc.accountAddress.slice(-4)}`}
                               </button>
                             </div>
                           ))}

packages/nextjs/components/scaffold-stark/CustomConnectButton/ConnectModal.tsx

@@ -2,8 +2,7 @@ import { Connector, useConnect } from "@starknet-react/core";
 import { useRef, useState } from "react";
 import Wallet from "~~/components/scaffold-stark/CustomConnectButton/Wallet";
 import { useLocalStorage } from "usehooks-ts";
-import { burnerAccounts } from "~~/utils/devnetAccounts";
-import { BurnerConnector } from "~~/services/web3/stark-burner/BurnerConnector";
+import { BurnerConnector, burnerAccounts } from "@scaffold-stark/stark-burner";
 import { useTheme } from "next-themes";
 import { BlockieAvatar } from "../BlockieAvatar";
 import GenericModal from "./GenericModal";
@@ -55,10 +54,8 @@ const ConnectModal = () => {
     e: React.MouseEvent<HTMLButtonElement>,
     ix: number,
   ) {
-    const connector = connectors.find(
-      (it) => it.id == "burner-wallet",
-    ) as BurnerConnector;
-    if (connector) {
+    const connector = connectors.find((it) => it.id == "burner-wallet");
+    if (connector && connector instanceof BurnerConnector) {
       connector.burnerAccount = burnerAccounts[ix];
       connect({ connector });
       setLastConnector({ id: connector.id, ix });
@@ -116,14 +113,19 @@ const ConnectModal = () => {
                         className="w-full flex flex-col"
                       >
                         <button
-                          className={`hover:bg-gradient-modal border rounded-md text-neutral py-[8px] pl-[10px] pr-16 flex items-center gap-4 ${isDarkMode ? "border-[#385183]" : ""}`}
+                          className={`hover:bg-gradient-modal border rounded-md text-neutral py-[8px] pl-[10px] pr-16 flex items-center gap-4 ${
+                            isDarkMode ? "border-[#385183]" : ""
+                          }`}
                           onClick={(e) => handleConnectBurner(e, ix)}
                         >
                           <BlockieAvatar
                             address={burnerAcc.accountAddress}
                             size={35}
                           />
-                          {`${burnerAcc.accountAddress.slice(0, 6)}...${burnerAcc.accountAddress.slice(-4)}`}
+                          {`${burnerAcc.accountAddress.slice(
+                            0,
+                            6,
+                          )}...${burnerAcc.accountAddress.slice(-4)}`}
                         </button>
                       </div>
                     ))}

packages/nextjs/components/scaffold-stark/CustomConnectButton/Wallet.tsx

@@ -34,7 +34,11 @@ const Wallet = ({
 
   return isMounted ? (
     <button
-      className={`flex gap-4 items-center text-neutral  rounded-[4px] p-3 transition-all ${isDarkMode ? "hover:bg-[#385183] border-[#4f4ab7]" : "hover:bg-slate-200 border-[#5c4fe5]"} border ${clicked ? "bg-ligth" : ""}`}
+      className={`flex gap-4 items-center text-neutral  rounded-[4px] p-3 transition-all ${
+        isDarkMode
+          ? "hover:bg-[#385183] border-[#4f4ab7]"
+          : "hover:bg-slate-200 border-[#5c4fe5]"
+      } border ${clicked ? "bg-ligth" : ""}`}
       onClick={(e) => {
         setClicked(true);
         handleConnectWallet(e, connector);

packages/nextjs/components/scaffold-stark/CustomConnectButton/index.tsx

@@ -12,6 +12,7 @@ import { useAccount, useNetwork } from "@starknet-react/core";
 import { Address } from "@starknet-react/chains";
 import { useEffect, useMemo, useState } from "react";
 import ConnectModal from "./ConnectModal";
+import scaffoldConfig from "~~/scaffold.config";
 
 /**
  * Custom Connect Button (watch balance + custom design)
@@ -44,8 +45,8 @@ export const CustomConnectButton = () => {
   }, [account]);
 
   if (status === "disconnected") return <ConnectModal />;
-  // TODO : add tag for fork on scaffold config and dont show wrong network dropdown if fork is true
-  if (accountChainId !== targetNetwork.id) {
+  // Skip wrong network check if using a fork
+  if (!scaffoldConfig.isFork && accountChainId !== targetNetwork.id) {
     return <WrongNetworkDropdown />;
   }
 

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

@@ -115,7 +115,9 @@ export const FaucetSepolia = () => {
                   <a
                     href={faucet.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 `}
+                    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">