Possibility to pass global variables (#350)

Author: rin-st

contributors/TEMPLATING.md

@@ -144,6 +144,28 @@ export default { one: 1, two: 2}
 
 To avoid issues when named arguments have typos, the `withDefaults` utility will also throw an error when an argument is passed with a name that wasn't expected by the template.
 
+### Using global variables in args file content
+
+You can use global variables in your argument values by defining your argument values as functions.
+
+Instead of static values, export functions that receive global variables as parameters and return the desired content.
+
+**Important:** The function's return type must match the default argument value type defined in the template.
+
+Example:
+
+```js
+// Static value (basic approach)
+export const description = "Hello world";
+
+// Dynamic value using global variables (advanced approach)
+export const description = ({ solidityFramework }) => `Hello ${solidityFramework}`;
+```
+
+**Available global variables:**
+
+- `solidityFramework` - The selected Solidity framework (e.g., "hardhat", "foundry")
+
 # Args files injection in Template files
 
 For each Template file, we search on the extensions the user selected for the existence of Args files in the exact same relative path. If Args files are found, we combine them into an array.

src/tasks/copy-template-files.ts

@@ -9,7 +9,13 @@ import path from "path";
 import { promisify } from "util";
 import link from "../utils/link";
 import { getArgumentFromExternalExtensionOption } from "../utils/external-extensions";
-import { BASE_DIR, SOLIDITY_FRAMEWORKS, SOLIDITY_FRAMEWORKS_DIR, EXAMPLE_CONTRACTS_DIR } from "../utils/consts";
+import {
+  BASE_DIR,
+  SOLIDITY_FRAMEWORKS,
+  SOLIDITY_FRAMEWORKS_DIR,
+  EXAMPLE_CONTRACTS_DIR,
+  GLOBAL_ARGS_DEFAULTS,
+} from "../utils/consts";
 
 const EXTERNAL_EXTENSION_TMP_DIR = "tmp-external-extension";
 
@@ -282,7 +288,11 @@ const processTemplatedFiles = async (
         return accumulated;
       }, freshArgs);
 
-      const output = fileTemplate(combinedArgs);
+      const globalArgs = {
+        solidityFramework: [solidityFramework || GLOBAL_ARGS_DEFAULTS.solidityFramework],
+      };
+
+      const output = fileTemplate({ ...combinedArgs, ...globalArgs });
 
       const targetPath = path.join(
         targetDir,

src/utils/consts.ts

@@ -6,3 +6,7 @@ export const SOLIDITY_FRAMEWORKS = {
   HARDHAT: "hardhat",
   FOUNDRY: "foundry",
 } as const;
+
+export const GLOBAL_ARGS_DEFAULTS = {
+  solidityFramework: "",
+};

templates/base/.cursor/rules/scaffold-eth.mdc.template.mjs

@@ -1,4 +1,4 @@
-import { withDefaults } from "../../../utils.js"
+import { withDefaults, upperCaseFirstLetter } from "../../../utils.js"
 
 const contents = ({ solidityFramework, deployScriptDir }) => {
   return `---
@@ -11,7 +11,7 @@ This codebase contains Scaffold-ETH 2 (SE-2), everything you need to build dApps
 
 It's a yarn monorepo that contains following packages:
 
-${Boolean(solidityFramework[0]) ? `- ${solidityFramework[0].toUpperCase()} (\`packages/${solidityFramework[0]}\`): The solidity framework to write, test and deploy EVM Smart Contracts.` : ""}
+${Boolean(solidityFramework[0]) ? `- ${upperCaseFirstLetter(solidityFramework[0])} (\`packages/${solidityFramework[0]}\`): The solidity framework to write, test and deploy EVM Smart Contracts.` : ""}
 - NextJS (\`packages/nextjs\`): The UI framework extended with utilities to make interacting with Smart Contracts easy (using Next.js App Router, not Pages Router).
 
 
@@ -117,4 +117,4 @@ For fully customizable components, you can use the hooks from the \`@scaffold-ui
 Find the relevant information from the documentation and the codebase. Think step by step before answering the question.`
 }
 
-export default withDefaults(contents, { solidityFramework: "", deployScriptDir: "" });
+export default withDefaults(contents, { deployScriptDir: "" });

templates/base/README.md.template.mjs

@@ -1,4 +1,4 @@
-import { withDefaults } from "../utils.js";
+import { upperCaseFirstLetter, withDefaults } from "../utils.js";
 
 const getQuickStart = ({
   solidityFramework,
@@ -26,7 +26,7 @@ ${
 yarn chain
 \`\`\`
 
-This command starts a local Ethereum network using ${solidityFramework[0]}. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in ${networkConfigPath[0]}.
+This command starts a local Ethereum network using ${upperCaseFirstLetter(solidityFramework[0])}. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in ${networkConfigPath[0]}.
 
 3. On a second terminal, deploy the test contract:
 
@@ -84,7 +84,7 @@ const contents = ({
 🧪 An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.
 
 ⚙️ Built using NextJS, RainbowKit, ${
-    Boolean(solidityFramework[0]) ? solidityFramework[0] + ", " : ""
+    Boolean(solidityFramework[0]) ? upperCaseFirstLetter(solidityFramework[0]) + ", " : ""
   }Wagmi, Viem, and Typescript.
 ${
   Boolean(solidityFramework[0])
@@ -128,7 +128,6 @@ Please see [CONTRIBUTING.MD](https://github.com/scaffold-eth/scaffold-eth-2/blob
 
 export default withDefaults(contents, {
   skipQuickStart: false,
-  solidityFramework: "",
   networkConfigPath: "",
   contractsPath: "",
   scriptsPath: "",

templates/base/packages/nextjs/app/blockexplorer/address/[address]/page.tsx.template.mjs

@@ -1,10 +1,14 @@
 import { withDefaults } from "../../../../../../../utils.js";
 
-const contents = ({ chainName, artifactsDirName }) => `
+const contents = ({ solidityFramework, artifactsDirName }) => {
+  if (!solidityFramework[0]) {
+    solidityFramework[0] = "hardhat";
+  }
+  return `
 import fs from "fs";
 import path from "path";
 import { Address } from "viem";
-import { ${chainName[0]} } from "viem/chains";
+import { ${solidityFramework[0]} } from "viem/chains";
 import { AddressComponent } from "~~/app/blockexplorer/_components/AddressComponent";
 import deployedContracts from "~~/contracts/deployedContracts";
 import { isZeroAddress } from "~~/utils/scaffold-eth/common";
@@ -42,7 +46,7 @@ async function fetchByteCodeAndAssembly(buildInfoDirectory: string, contractPath
 
 const getContractData = async (address: Address) => {
   const contracts = deployedContracts as GenericContractsDeclaration | null;
-  const chainId = ${chainName[0]}.id;
+  const chainId = ${solidityFramework[0]}.id;
 
   if (!contracts || !contracts[chainId] || Object.keys(contracts[chainId]).length === 0) {
     return null;
@@ -59,7 +63,7 @@ const getContractData = async (address: Address) => {
     "..",
     "..",
     "..",
-    "${chainName[0]}",
+    "${solidityFramework[0]}",
     "${artifactsDirName[0]}",
     "build-info",
   );
@@ -101,9 +105,8 @@ const AddressPage = async (props: PageProps) => {
   return <AddressComponent address={address} contractData={contractData} />;
 };
 
-export default AddressPage;`;
+export default AddressPage;`};
 
 export default withDefaults(contents, {
-  chainName: "hardhat",
   artifactsDirName: "artifacts",
 });

templates/solidity-frameworks/foundry/.cursor/rules/scaffold-eth.mdc.args.mjs

@@ -1,3 +1,2 @@
-export const solidityFramework = "foundry";
 export const deployScriptDir = "script";
 

templates/solidity-frameworks/foundry/README.md.args.mjs

@@ -1,4 +1,3 @@
-export const solidityFramework = "Foundry";
 export const networkConfigPath = `\`packages/foundry/foundry.toml\``;
 export const contractsPath = `\`packages/foundry/contracts\``;
 export const scriptsPath = `\`packages/foundry/script\``;

templates/solidity-frameworks/foundry/packages/nextjs/app/blockexplorer/address/[address]/page.tsx.args.mjs

@@ -1,2 +1 @@
-export const chainName = "foundry";
 export const artifactsDirName = "out";

templates/solidity-frameworks/hardhat/.cursor/rules/scaffold-eth.mdc.args.mjs

@@ -1,3 +1,2 @@
-export const solidityFramework = "hardhat";
 export const deployScriptDir = "deploy";