Update last PR232 ClassHash

.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

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/components/scaffold-stark/ClassHash.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { Address as AddressType } from "@starknet-react/chains";
+import { devnet } from "@starknet-react/chains";
+import {
+  CheckCircleIcon,
+  DocumentDuplicateIcon,
+} from "@heroicons/react/24/outline";
+import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
+import { getBlockExplorerClasshashLink } from "~~/utils/scaffold-stark";
+
+type ClasshashProps = {
+  classHash: AddressType;
+  format?: "short" | "long";
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+};
+
+/**
+ * Displays a Classhash and option to copy classHash.
+ */
+export const ClassHash = ({
+  classHash,
+  format,
+  size = "xs",
+}: ClasshashProps) => {
+  const [addressCopied, setAddressCopied] = useState(false);
+  const { targetNetwork } = useTargetNetwork();
+
+  const blockExplorerAddressLink = getBlockExplorerClasshashLink(
+    targetNetwork,
+    classHash,
+  );
+
+  let displayClasshash = classHash?.slice(0, 6) + "..." + classHash?.slice(-4);
+
+  if (format === "long") {
+    displayClasshash = classHash;
+  }
+
+  return (
+    <div className="flex items-center">
+      <div className="flex-shrink-0">
+        <span className={`text-${size} font-normal`}>class hash: </span>
+      </div>
+      {targetNetwork.network === devnet.network ? (
+        <span className={`ml-1.5 text-${size} font-normal`}>
+          <Link href={blockExplorerAddressLink}>{displayClasshash}</Link>
+        </span>
+      ) : (
+        <a
+          className={`ml-1.5 text-${size} font-normal`}
+          target="_blank"
+          href={blockExplorerAddressLink}
+          rel="noopener noreferrer"
+        >
+          {displayClasshash}
+        </a>
+      )}
+      {addressCopied ? (
+        <CheckCircleIcon
+          className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
+          aria-hidden="true"
+        />
+      ) : (
+        <CopyToClipboard
+          text={classHash}
+          onCopy={() => {
+            setAddressCopied(true);
+            setTimeout(() => {
+              setAddressCopied(false);
+            }, 800);
+          }}
+        >
+          <DocumentDuplicateIcon
+            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
+            aria-hidden="true"
+          />
+        </CopyToClipboard>
+      )}
+    </div>
+  );
+};

packages/nextjs/contracts/predeployedContracts.ts

@@ -215,6 +215,8 @@ const preDeployedContracts = {
           ],
         },
       ],
+      classHash:
+        "0x046ded64ae2dead6448e247234bab192a9c483644395b66f2155f2614e5804b0",
     },
     Strk: {
       address: universalStrkAddress,
@@ -421,6 +423,8 @@ const preDeployedContracts = {
           ],
         },
       ],
+      classHash:
+        "0x046ded64ae2dead6448e247234bab192a9c483644395b66f2155f2614e5804b0",
     },
   },
   sepolia: {
@@ -680,6 +684,8 @@ const preDeployedContracts = {
           ],
         },
       ],
+      classHash:
+        "0x07f3777c99f3700505ea966676aac4a0d692c2a9f5e667f4c606b51ca1dd3420",
     },
     Strk: {
       address: universalStrkAddress,
@@ -937,6 +943,8 @@ const preDeployedContracts = {
           ],
         },
       ],
+      classHash:
+        "0x04ad3c1dc8413453db314497945b6903e1c766495a1e60492d44da9c2a986e4b",
     },
   },
 } as const;

packages/nextjs/utils/scaffold-stark/contract.ts

@@ -63,7 +63,9 @@ export enum ContractCodeStatus {
 export type GenericContract = {
   address: Address;
   abi: Abi;
+  classHash: String;
 };
+
 export type GenericContractsDeclaration = {
   [network: string]: {
     [contractName: string]: GenericContract;

packages/nextjs/utils/scaffold-stark/networks.ts

@@ -66,6 +66,26 @@ export function getBlockExplorerAddressLink(
   return `${blockExplorerBaseURL}/contract/${address}`;
 }
 
+/**
+ * Gives the block explorer URL for a given classhash.
+ * Defaults to Etherscan if no (wagmi) block explorer is configured for the network.
+ */
+export function getBlockExplorerClasshashLink(
+  network: chains.Chain,
+  address: string,
+) {
+  const blockExplorerBaseURL = network.explorers?.starkscan[0];
+  if (network.network === chains.devnet.network) {
+    return `/blockexplorer/class/${address}`;
+  }
+
+  if (!blockExplorerBaseURL) {
+    return `https://starkscan.co/class/${address}`;
+  }
+
+  return `${blockExplorerBaseURL}/class/${address}`;
+}
+
 export function getBlockExplorerLink(network: chains.Chain) {
   switch (network) {
     case chains.mainnet:

packages/snfoundry/scripts-ts/deploy-contract.ts

@@ -212,14 +212,12 @@ const deployContract = async (
   let finalContractName = contractName || contract;
 
   deployments[finalContractName] = {
-    classHash: classHash,
     classHash: classHash,
     address: contractAddress,
     contract: contract,
   };
 
   return {
-    classHash: classHash,
     classHash: classHash,
     address: contractAddress,
   };

packages/snfoundry/scripts-ts/helpers/parse-deployments.ts

@@ -14,11 +14,11 @@ const generatedContractComment = `/**
 
 const getContractDataFromDeployments = (): Record<
   string,
-  Record<string, { address: string; abi: Abi }>
+  Record<string, { address: string; abi: Abi; classHash: string }>
 > => {
   const allContractsData: Record<
     string,
-    Record<string, { address: string; abi: Abi }>
+    Record<string, { address: string; abi: Abi; classHash: string }>
   > = {};
 
   files.forEach((file) => {
@@ -49,6 +49,7 @@ const getContractDataFromDeployments = (): Record<
             [contractName]: {
               address: contractData.address,
               abi: abiContent.abi.filter((item) => item.type !== "l1_handler"),
+              classHash: contractData.classHash,
             },
           };
         } catch (e) {}