Merge branch 'main' of github.com:scaffold-eth/create-eth into extens…

…ion-to-solidity-framework

.changeset/angry-zoos-kneel.md

@@ -0,0 +1,5 @@
+---
+"create-eth": patch
+---
+
+cli: format instance with prettier from cli

.changeset/sweet-seas-raise.md

@@ -0,0 +1,5 @@
+---
+"create-eth": patch
+---
+
+up prettier (scaffold-eth#875)

CHANGELOG.md

@@ -1,5 +1,21 @@
 # create-eth
 
+## 0.0.48
+
+### Patch Changes
+
+- Allow developing externalExtensions with --dev
+- remove vercelignore from root dir + clean base package.json
+- cli: help command
+- foundry: use forge to setup libraries + do early check for foundryup
+- foundry: fix verification script failing in latest foundry version
+- cli: solidity framework options
+- Better transaction result formatting in debug page (#853)
+- fix: address components copy icon on small screens (#864)
+- lock typescript and abitype version (#871)
+- rewrite useScaffoldEventHistory hook (#869)
+- fix bug foundry gh action fails
+
 ## 0.0.47
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-eth",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "description": "Create a Scaffold-ETH-2 app",
   "repository": {
     "type": "git",
@@ -39,7 +39,6 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "lefthook": "^1.6.16",
-    "prettier": "3.2.5",
     "rollup": "3.21.0",
     "rollup-plugin-auto-external": "2.0.0",
     "tslib": "2.5.0",
@@ -48,14 +47,17 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.26.2",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "arg": "5.0.2",
     "chalk": "5.2.0",
     "execa": "7.1.1",
     "inquirer": "9.2.0",
     "listr2": "^8.2.1",
     "merge-packages": "^0.1.6",
     "ncp": "2.0.0",
-    "pkg-install": "1.0.0"
+    "pkg-install": "1.0.0",
+    "prettier": "3.3.2",
+    "prettier-plugin-solidity": "^1.3.1"
   },
   "packageManager": "yarn@3.5.0"
 }

src/main.ts

@@ -35,6 +35,10 @@ export async function createProject(options: Options) {
         )}${options.externalExtension ? ` with the ${chalk.green.bold(options.dev ? options.externalExtension : getArgumentFromExternalExtensionOption(options.externalExtension))} extension` : ""}`,
         task: () => copyTemplateFiles(options, templateDirectory, targetDirectory),
       },
+      {
+        title: "🪄 Formatting files",
+        task: () => prettierFormat(targetDirectory, options),
+      },
       {
         title: `📦 Installing dependencies with yarn, this could take a while`,
         task: () => installPackages(targetDirectory),
@@ -45,16 +49,6 @@ export async function createProject(options: Options) {
           return false;
         },
       },
-      {
-        title: "🪄 Formatting files with prettier",
-        task: () => prettierFormat(targetDirectory),
-        skip: () => {
-          if (!options.install) {
-            return "Skipping because prettier install was skipped";
-          }
-          return false;
-        },
-      },
       {
         title: `📡 Initializing Git repository${options.solidityFramework === SOLIDITY_FRAMEWORKS.FOUNDRY ? " and submodules" : ""}`,
         task: () => createFirstGitCommit(targetDirectory, options),

src/tasks/prettier-format.ts

@@ -1,15 +1,54 @@
 import { execa } from "execa";
+import path from "path";
+import { Options } from "../types";
+import { SOLIDITY_FRAMEWORKS } from "../utils/consts";
 
-// TODO: Instead of using execa, use prettier package from cli to format targetDir
-export async function prettierFormat(targetDir: string) {
+async function runPrettier(targetPath: string[], prettierConfigPath: string, prettierPlugins: string[]) {
+  console.log("the prettier config path is", prettierConfigPath);
+  const result = await execa("yarn", [
+    "prettier",
+    "--write",
+    ...targetPath,
+    "--config",
+    prettierConfigPath,
+    ...prettierPlugins,
+    "--no-editorconfig",
+  ]);
+  if (result.failed) {
+    throw new Error(`There was a problem running prettier in ${targetPath.join(" ")}`);
+  }
+}
+
+export async function prettierFormat(targetDir: string, options: Options) {
   try {
-    const result = await execa("yarn", ["format"], { cwd: targetDir });
+    const nextJsPath = path.join(targetDir, "packages", "nextjs");
+    const nextPrettierConfig = path.join(nextJsPath, ".prettierrc.json");
+
+    await runPrettier([nextJsPath], nextPrettierConfig, ["--plugin=@trivago/prettier-plugin-sort-imports"]);
+
+    if (options.solidityFramework === SOLIDITY_FRAMEWORKS.HARDHAT) {
+      const hardhatPackagePath = path.join(targetDir, "packages", SOLIDITY_FRAMEWORKS.HARDHAT);
+      const hardhatPrettierConfig = path.join(hardhatPackagePath, ".prettierrc.json");
+      const hardhatPaths = [
+        `${hardhatPackagePath}/*.ts`,
+        `${hardhatPackagePath}/deploy/**/*.ts`,
+        `${hardhatPackagePath}/scripts/**/*.ts`,
+        `${hardhatPackagePath}/test/**/*.ts`,
+        `${hardhatPackagePath}/contracts/**/*.sol`,
+      ];
+
+      await runPrettier(hardhatPaths, hardhatPrettierConfig, ["--plugin=prettier-plugin-solidity"]);
+    }
 
-    if (result.failed) {
-      throw new Error("There was a problem running the format command");
+    if (options.solidityFramework === SOLIDITY_FRAMEWORKS.FOUNDRY) {
+      const foundryPackagePath = path.resolve(targetDir, "packages", SOLIDITY_FRAMEWORKS.FOUNDRY);
+      const foundryResult = await execa("forge", ["fmt"], { cwd: foundryPackagePath });
+      if (foundryResult.failed) {
+        throw new Error("There was a problem running forge fmt in the foundry package");
+      }
     }
   } catch (error) {
-    throw new Error("Failed to format directory", { cause: error });
+    throw new Error("Failed to run prettier", { cause: error });
   }
 
   return true;

templates/base/packages/nextjs/.prettierrc.json

@@ -1,8 +1,10 @@
 {
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "arrowParens": "avoid",
   "printWidth": 120,
   "tabWidth": 2,
   "trailingComma": "all",
   "importOrder": ["^react$", "^next/(.*)$", "<THIRD_PARTY_MODULES>", "^@heroicons/(.*)$", "^~~/(.*)$"],
-  "importOrderSortSpecifiers": true
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

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

@@ -76,17 +76,17 @@ export const ReadOnlyFunctionForm = ({
         <InheritanceTooltip inheritedFrom={inheritedFrom} />
       </p>
       {inputElements}
-      <div className="flex justify-between gap-2 flex-wrap">
-        <div className="flex-grow w-4/5">
+      <div className="flex flex-col md:flex-row justify-between gap-2 flex-wrap">
+        <div className="flex-grow w-full md:max-w-[80%]">
           {result !== null && result !== undefined && (
-            <div className="bg-secondary rounded-3xl text-sm px-4 py-1.5 break-words">
+            <div className="bg-secondary rounded-3xl text-sm px-4 py-1.5 break-words overflow-auto">
               <p className="font-bold m-0 mb-1">Result:</p>
-              <pre className="whitespace-pre-wrap break-words">{displayTxResult(result)}</pre>
+              <pre className="whitespace-pre-wrap break-words">{displayTxResult(result, "sm")}</pre>
             </div>
           )}
         </div>
         <button
-          className="btn btn-secondary btn-sm"
+          className="btn btn-secondary btn-sm self-end md:self-start"
           onClick={async () => {
             const { data } = await refetch();
             setResult(data);

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

@@ -21,15 +21,18 @@ export const TupleArray = ({ abiTupleParameter, setParentForm, parentStateObject
 
   useEffect(() => {
     // Extract and group fields based on index prefix
-    const groupedFields = Object.keys(form).reduce((acc, key) => {
-      const [indexPrefix, ...restArray] = key.split("_");
-      const componentName = restArray.join("_");
-      if (!acc[indexPrefix]) {
-        acc[indexPrefix] = {};
-      }
-      acc[indexPrefix][componentName] = form[key];
-      return acc;
-    }, {} as Record<string, Record<string, any>>);
+    const groupedFields = Object.keys(form).reduce(
+      (acc, key) => {
+        const [indexPrefix, ...restArray] = key.split("_");
+        const componentName = restArray.join("_");
+        if (!acc[indexPrefix]) {
+          acc[indexPrefix] = {};
+        }
+        acc[indexPrefix][componentName] = form[key];
+        return acc;
+      },
+      {} as Record<string, Record<string, any>>,
+    );
 
     let argsArray: Array<Record<string, any>> = [];
 

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

@@ -2,11 +2,10 @@ import { useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { TransactionReceipt } from "viem";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
-import { displayTxResult } from "~~/app/debug/_components/contract";
+import { ObjectFieldDisplay } from "~~/app/debug/_components/contract";
+import { replacer } from "~~/utils/scaffold-eth/common";
 
-export const TxReceipt = (
-  txResult: string | number | bigint | Record<string, any> | TransactionReceipt | undefined,
-) => {
+export const TxReceipt = ({ txResult }: { txResult: TransactionReceipt }) => {
   const [txResultCopied, setTxResultCopied] = useState(false);
 
   return (
@@ -19,7 +18,7 @@ export const TxReceipt = (
           />
         ) : (
           <CopyToClipboard
-            text={displayTxResult(txResult) as string}
+            text={JSON.stringify(txResult, replacer, 2)}
             onCopy={() => {
               setTxResultCopied(true);
               setTimeout(() => {
@@ -39,8 +38,12 @@ export const TxReceipt = (
         <div className="collapse-title text-sm min-h-0 py-1.5 pl-1">
           <strong>Transaction Receipt</strong>
         </div>
-        <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl">
-          <pre className="text-xs pt-4">{displayTxResult(txResult)}</pre>
+        <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl !pl-0">
+          <pre className="text-xs">
+            {Object.entries(txResult).map(([k, v]) => (
+              <ObjectFieldDisplay name={k} value={v} size="xs" leftPad={false} key={k} />
+            ))}
+          </pre>
         </div>
       </div>
     </div>