Merge branch 'main' into update-extensions-styles

.changeset/real-rockets-rule.md

@@ -0,0 +1,10 @@
+---
+"create-eth": patch
+---
+
+- Add celo to networks (https://github.com/scaffold-eth/scaffold-eth-2/pull/980)
+- fix: Input components in form tag (https://github.com/scaffold-eth/scaffold-eth-2/pull/992)
+- fix: removed unecessary logs for decoding tx in block-explorer (https://github.com/scaffold-eth/scaffold-eth-2/pull/985)
+- Remove hardcoded colors (https://github.com/scaffold-eth/scaffold-eth-2/pull/991)
+- Fix typo in blockexplorer notification (https://github.com/scaffold-eth/scaffold-eth-2/pull/995)
+- Prettier for solidity (https://github.com/scaffold-eth/scaffold-eth-2/pull/994)

.github/workflows/lint.yml

@@ -32,3 +32,6 @@ jobs:
 
       - name: Run lint
         run: yarn lint --max-warnings=0
+
+      - name: Run type-check
+        run: yarn type-check

README.md

@@ -73,15 +73,18 @@ Run smart contract test with `yarn hardhat:test` or `yarn foundry:test` dependin
 
 **What's next**:
 
-- Edit your smart contract `YourContract.sol` in `packages/hardhat/contracts`
-- Edit your frontend homepage at `packages/nextjs/app/page.tsx`. For guidance on [routing](https://nextjs.org/docs/app/building-your-application/routing/defining-routes) and configuring [pages/layouts](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts) checkout the Next.js documentation.
-- Edit your deployment scripts in `packages/hardhat/deploy`
-- Edit your smart contract test in: `packages/hardhat/test`. To run test use `yarn hardhat:test`
-- You can add your Alchemy API Key in `scaffold.config.ts` if you want more reliability in your RPC requests.
+Visit the [What's next section of our docs](https://docs.scaffoldeth.io/quick-start/environment#whats-next) to learn how to:
+
+- Edit your smart contracts
+- Edit your deployment scripts
+- Customize your frontend
+- Edit the app config
+- Writing and running tests
+- [Setting up external services and API keys](https://docs.scaffoldeth.io/deploying/deploy-smart-contracts#configuration-of-third-party-services-for-production-grade-apps)
 
 ## Documentation
 
-Visit our [docs](https://docs.scaffoldeth.io) to learn how to start building with Scaffold-ETH 2.
+Visit our [docs](https://docs.scaffoldeth.io) to learn all the technical details and guides of Scaffold-ETH 2.
 
 To know more about its features, check out our [website](https://scaffoldeth.io).
 

lefthook.yml

@@ -1,5 +1,14 @@
 pre-commit:
+  parallel: true
   commands:
+    type-check:
+      glob: "src/**/*.ts"
+      run: yarn type-check
     lint:
       glob: "*.{js,ts,md}"
       run: yarn eslint --fix {staged_files}
+    format:
+      glob: "*.{js,ts,md,json}"
+      run: |
+        yarn prettier --write {staged_files}
+        git add {staged_files}

package.json

@@ -18,6 +18,7 @@
     "lint": "eslint .",
     "format": "prettier --write .",
     "test": "echo \"Error: no test specified\" && exit 1",
+    "type-check": "tsc --noEmit",
     "changeset:release": "yarn build && changeset publish"
   },
   "keywords": [
@@ -32,21 +33,22 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@eslint/js": "^9.3.0",
+    "@eslint/js": "^9.15.0",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-typescript": "11.1.0",
     "@types/inquirer": "9.0.3",
     "@types/ncp": "2.0.5",
     "@types/node": "18.16.0",
-    "eslint": "^9.3.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
     "lefthook": "^1.6.16",
-    "prettier": "3.3.2",
+    "prettier": "^3.3.3",
     "rollup": "3.21.0",
     "rollup-plugin-auto-external": "2.0.0",
     "tslib": "2.5.0",
-    "typescript": "5.0.4",
-    "typescript-eslint": "^7.10.0"
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.15.0"
   },
   "dependencies": {
     "@changesets/cli": "^2.26.2",

rollup.config.js

@@ -1,5 +1,6 @@
 import typescript from "@rollup/plugin-typescript";
 import autoExternal from "rollup-plugin-auto-external";
+import json from "@rollup/plugin-json";
 
 export default {
   input: "src/cli.ts",
@@ -8,5 +9,5 @@ export default {
     format: "es",
     sourcemap: true,
   },
-  plugins: [autoExternal(), typescript({ exclude: ["templates/**", "externalExtensions/**"] })],
+  plugins: [autoExternal(), typescript({ exclude: ["templates/**", "externalExtensions/**"] }), json()],
 };

src/curated-extensions.ts

@@ -1,30 +1,31 @@
 import { ExternalExtension } from "./types";
+import curatedExtension from "./extensions.json";
 
-const CURATED_EXTENSIONS: { [key: string]: ExternalExtension } = {
-  subgraph: {
-    repository: "https://github.com/scaffold-eth/create-eth-extensions",
-    branch: "subgraph",
-  },
-  "eip-712": {
-    repository: "https://github.com/scaffold-eth/create-eth-extensions",
-    branch: "eip-712",
-  },
-  ponder: {
-    repository: "https://github.com/scaffold-eth/create-eth-extensions",
-    branch: "ponder",
-  },
-  onchainkit: {
-    repository: "https://github.com/scaffold-eth/create-eth-extensions",
-    branch: "onchainkit",
-  },
-  "erc-20": {
-    repository: "https://github.com/scaffold-eth/create-eth-extensions",
-    branch: "erc-20",
-  },
-  "eip-5792": {
-    repository: "https://github.com/scaffold-eth/create-eth-extensions",
-    branch: "eip-5792",
-  },
+type ExtensionJSON = {
+  extensionFlagValue: string;
+  repository: string;
+  branch?: string;
+  // fields usefull for scaffoldeth.io
+  description: string;
+  version?: string; // if not present we default to latest
+  name?: string; // human redable name, if not present we default to branch or extensionFlagValue on UI
 };
 
+const extensions: ExtensionJSON[] = curatedExtension;
+
+const CURATED_EXTENSIONS = extensions.reduce<Record<string, ExternalExtension>>((acc, ext) => {
+  if (!ext.repository) {
+    throw new Error(`Extension must have 'repository': ${JSON.stringify(ext)}`);
+  }
+  if (!ext.extensionFlagValue) {
+    throw new Error(`Extension must have 'extensionFlagValue': ${JSON.stringify(ext)}`);
+  }
+
+  acc[ext.extensionFlagValue] = {
+    repository: ext.repository,
+    branch: ext.branch,
+  };
+  return acc;
+}, {});
+
 export { CURATED_EXTENSIONS };

src/extensions.json

@@ -0,0 +1,44 @@
+[
+  {
+    "extensionFlagValue": "subgraph",
+    "description": "This Scaffold-ETH 2 extension helps you build and test subgraphs locally for your contracts. It also enables interaction with the front-end and facilitates easy deployment to Subgraph Studio.",
+    "repository": "https://github.com/scaffold-eth/create-eth-extensions",
+    "branch": "subgraph"
+  },
+  {
+    "extensionFlagValue": "eip-712",
+    "description": "An implementation of EIP-712, allowing you to send, sign, and verify typed messages in a user-friendly manner.",
+    "repository": "https://github.com/scaffold-eth/create-eth-extensions",
+    "branch": "eip-712"
+  },
+  {
+    "extensionFlagValue": "ponder",
+    "description": "This Scaffold-ETH 2 extension comes pre-configured with ponder.sh, providing an example to help you get started quickly.",
+    "repository": "https://github.com/scaffold-eth/create-eth-extensions",
+    "branch": "ponder"
+  },
+  {
+    "extensionFlagValue": "onchainkit",
+    "description": "This Scaffold-ETH 2 extension comes pre-configured with onchainkit, providing an example to help you get started quickly.",
+    "repository": "https://github.com/scaffold-eth/create-eth-extensions",
+    "branch": "onchainkit"
+  },
+  {
+    "extensionFlagValue": "erc-20",
+    "description": "This extension introduces an ERC-20 token contract and demonstrates how to interact with it, including getting a holder balance and transferring tokens.",
+    "repository": "https://github.com/scaffold-eth/create-eth-extensions",
+    "branch": "erc-20"
+  },
+  {
+    "extensionFlagValue": "eip-5792",
+    "description": "This extension demonstrates on how to use EIP-5792 wallet capabilities. This EIP introduces new JSON-RPC methods for sending multiple calls from the user wallet, and checking their status",
+    "repository": "https://github.com/scaffold-eth/create-eth-extensions",
+    "branch": "eip-5792"
+  },
+  {
+    "extensionFlagValue": "randao",
+    "description": "This extension shows how to use on-chain randomness using RANDAO for truly on-chain unpredictable random sources.",
+    "repository": "https://github.com/scaffold-eth/create-eth-extensions",
+    "branch": "randao"
+  }
+]

src/utils/parse-arguments-into-options.ts

@@ -117,7 +117,7 @@ export async function parseArgumentsIntoOptions(
 
   // if lengh is 1, we don't give user a choice and set it ourselves.
   const solidityFramework =
-    solidityFrameworkChoices.length === 1 ? solidityFrameworkChoices[0] : args["--solidity-framework"] ?? null;
+    solidityFrameworkChoices.length === 1 ? solidityFrameworkChoices[0] : (args["--solidity-framework"] ?? null);
 
   if (solidityFramework === SOLIDITY_FRAMEWORKS.FOUNDRY) {
     await validateFoundryUp();

src/utils/system-validation.ts

@@ -4,7 +4,7 @@ import { execa } from "execa";
 export const validateFoundryUp = async () => {
   try {
     await execa("foundryup", ["-h"]);
-  } catch (error) {
+  } catch {
     const message = ` ${chalk.bold.yellow("Attention: Foundryup is not installed in your system.")}
  ${chalk.bold.yellow("To use foundry, please install foundryup")}
  ${chalk.bold.yellow("Checkout: https://getfoundry.sh")}

templates/base/packages/nextjs/app/blockexplorer/_components/PaginationButton.tsx

@@ -12,8 +12,8 @@ export const PaginationButton = ({ currentPage, totalItems, setCurrentPage }: Pa
   const isPrevButtonDisabled = currentPage === 0;
   const isNextButtonDisabled = currentPage + 1 >= Math.ceil(totalItems / ITEMS_PER_PAGE);
 
-  const prevButtonClass = isPrevButtonDisabled ? "bg-gray-200 cursor-default" : "btn btn-primary";
-  const nextButtonClass = isNextButtonDisabled ? "bg-gray-200 cursor-default" : "btn btn-primary";
+  const prevButtonClass = isPrevButtonDisabled ? "btn-disabled cursor-default" : "btn-primary";
+  const nextButtonClass = isNextButtonDisabled ? "btn-disabled cursor-default" : "btn-primary";
 
   if (isNextButtonDisabled && isPrevButtonDisabled) return null;
 

templates/base/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx

@@ -35,7 +35,7 @@ export const SearchBar = () => {
   return (
     <form onSubmit={handleSearch} className="flex items-center justify-end mb-5 space-x-3 mx-5">
       <input
-        className="border-primary bg-base-100 text-base-content p-2 mr-2 w-full md:w-1/2 lg:w-1/3 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-accent"
+        className="border-primary bg-base-100 text-base-content placeholder:text-base-content/50 p-2 mr-2 w-full md:w-1/2 lg:w-1/3 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-accent"
         type="text"
         value={searchInput}
         placeholder="Search by hash or address"

templates/base/packages/nextjs/app/blockexplorer/_components/TransactionHash.tsx

@@ -15,7 +15,7 @@ export const TransactionHash = ({ hash }: { hash: string }) => {
       </Link>
       {addressCopied ? (
         <CheckCircleIcon
-          className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
+          className="ml-1.5 text-xl font-normal text-base-content h-5 w-5 cursor-pointer"
           aria-hidden="true"
         />
       ) : (
@@ -28,10 +28,7 @@ export const TransactionHash = ({ hash }: { hash: string }) => {
             }, 800);
           }}
         >
-          <DocumentDuplicateIcon
-            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
-            aria-hidden="true"
-          />
+          <DocumentDuplicateIcon className="ml-1.5 text-xl font-normal h-5 w-5 cursor-pointer" aria-hidden="true" />
         </CopyToClipboard>
       )}
     </div>

templates/base/packages/nextjs/app/blockexplorer/page.tsx

@@ -31,7 +31,7 @@ const BlockExplorer: NextPage = () => {
       notification.error(
         <>
           <p className="font-bold mt-0 mb-1">
-            <code className="italic bg-base-300 text-base font-bold"> targeNetwork </code> is not localhost
+            <code className="italic bg-base-300 text-base font-bold"> targetNetwork </code> is not localhost
           </p>
           <p className="m-0">
             - You are on <code className="italic bg-base-300 text-base font-bold">{targetNetwork.name}</code> .This

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

@@ -69,7 +69,7 @@ export const DisplayVariable = ({
         </button>
         <InheritanceTooltip inheritedFrom={inheritedFrom} />
       </div>
-      <div className="text-gray-500 font-medium flex flex-col items-start">
+      <div className="text-base-content/80 flex flex-col items-start">
         <div>
           <div
             className={`break-all block transition bg-transparent ${

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

@@ -13,7 +13,7 @@ export const TxReceipt = ({ txResult }: { txResult: TransactionReceipt }) => {
       <div className="mt-1 pl-2">
         {txResultCopied ? (
           <CheckCircleIcon
-            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
+            className="ml-1.5 text-xl font-normal text-base-content h-5 w-5 cursor-pointer"
             aria-hidden="true"
           />
         ) : (
@@ -26,10 +26,7 @@ export const TxReceipt = ({ txResult }: { txResult: TransactionReceipt }) => {
               }, 800);
             }}
           >
-            <DocumentDuplicateIcon
-              className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
-              aria-hidden="true"
-            />
+            <DocumentDuplicateIcon className="ml-1.5 text-xl font-normal h-5 w-5 cursor-pointer" aria-hidden="true" />
           </CopyToClipboard>
         )}
       </div>

templates/base/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx

@@ -85,7 +85,7 @@ export const ObjectFieldDisplay = ({
 }) => {
   return (
     <div className={`flex flex-row items-baseline ${leftPad ? "ml-4" : ""}`}>
-      <span className="text-gray-500 dark:text-gray-400 mr-2">{name}:</span>
+      <span className="text-base-content/60 mr-2">{name}:</span>
       <span className="text-base-content">{displayTxResult(value, size)}</span>
     </div>
   );

templates/base/packages/nextjs/components/scaffold-eth/Address/Address.tsx

@@ -177,7 +177,7 @@ export const Address = ({
             </AddressLinkWrapper>
           </span>
           <AddressCopyIcon
-            className={`ml-1 text-sky-600 ${copyIconSizeMap[addressSize]} cursor-pointer`}
+            className={`ml-1 ${copyIconSizeMap[addressSize]} cursor-pointer`}
             address={checkSumAddress}
           />
         </div>

templates/base/packages/nextjs/components/scaffold-eth/Address/AddressCopyIcon.tsx

@@ -14,7 +14,7 @@ export const AddressCopyIcon = ({ className, address }: { className?: string; ad
         }, 800);
       }}
     >
-      <button onClick={e => e.stopPropagation()}>
+      <button onClick={e => e.stopPropagation()} type="button">
         {addressCopied ? (
           <CheckCircleIcon className={className} aria-hidden="true" />
         ) : (

templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx

@@ -43,7 +43,7 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
 
   if (isError) {
     return (
-      <div className={`border-2 border-gray-400 rounded-md px-2 flex flex-col items-center max-w-fit cursor-pointer`}>
+      <div className="border-2 border-base-content/30 rounded-md px-2 flex flex-col items-center max-w-fit cursor-pointer">
         <div className="text-warning">Error</div>
       </div>
     );
@@ -55,6 +55,7 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
     <button
       className={`btn btn-sm btn-ghost flex flex-col font-normal items-center hover:bg-transparent ${className}`}
       onClick={toggleDisplayUsdMode}
+      type="button"
     >
       <div className="w-full flex items-center justify-center">
         {displayUsdMode ? (

templates/base/packages/nextjs/components/scaffold-eth/Input/Bytes32Input.tsx

@@ -18,12 +18,13 @@ export const Bytes32Input = ({ value, onChange, name, placeholder, disabled }: C
       onChange={onChange}
       disabled={disabled}
       suffix={
-        <div
+        <button
           className="self-center cursor-pointer text-xl font-semibold px-4 text-accent"
           onClick={convertStringToBytes32}
+          type="button"
         >
           #
-        </div>
+        </button>
       }
     />
   );

templates/base/packages/nextjs/components/scaffold-eth/Input/BytesInput.tsx

@@ -15,12 +15,13 @@ export const BytesInput = ({ value, onChange, name, placeholder, disabled }: Com
       onChange={onChange}
       disabled={disabled}
       suffix={
-        <div
+        <button
           className="self-center cursor-pointer text-xl font-semibold px-4 text-accent"
           onClick={convertStringToBytes}
+          type="button"
         >
           #
-        </div>
+        </button>
       }
     />
   );

templates/base/packages/nextjs/components/scaffold-eth/Input/EtherInput.tsx

@@ -117,6 +117,7 @@ export const EtherInput = ({
             className="btn btn-primary h-[2.2rem] min-h-[2.2rem]"
             onClick={toggleDisplayUsdMode}
             disabled={!displayUsdMode && !nativeCurrencyPrice}
+            type="button"
           >
             <ArrowsRightLeftIcon className="h-3 w-3 cursor-pointer" aria-hidden="true" />
           </button>