backmerge 25-11-24

.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)

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).
 

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>

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

@@ -50,7 +50,7 @@ export const InputBase = <T extends { toString: () => string } | undefined = str
     <div className={`flex border-2 border-base-300 bg-base-200 rounded-full text-accent ${modifier}`}>
       {prefix}
       <input
-        className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-400 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/50 text-gray-400"
+        className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/70 text-base-content/70 focus:text-base-content/70"
         placeholder={placeholder}
         name={name}
         value={value?.toString()}

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

@@ -51,6 +51,7 @@ export const IntegerInput = ({
               className={`${disabled ? "cursor-not-allowed" : "cursor-pointer"} font-semibold px-4 text-accent`}
               onClick={multiplyBy1e18}
               disabled={disabled}
+              type="button"
             >
               ∗
             </button>

templates/base/packages/nextjs/utils/scaffold-eth/decodeTxData.ts

@@ -18,6 +18,7 @@ const interfaces = chainMetaData
 
 export const decodeTransactionData = (tx: TransactionWithFunction) => {
   if (tx.input.length >= 10 && !tx.input.startsWith("0x60e06040")) {
+    let foundInterface = false;
     for (const [, contractAbi] of Object.entries(interfaces)) {
       try {
         const { functionName, args } = decodeFunctionData({
@@ -34,12 +35,15 @@ export const decodeTransactionData = (tx: TransactionWithFunction) => {
           abi: contractAbi as AbiFunction[],
           name: functionName,
         })?.inputs.map((input: any) => input.type);
-
+        foundInterface = true;
         break;
-      } catch (e) {
-        console.error(`Parsing failed: ${e}`);
+      } catch {
+        // do nothing
       }
     }
+    if (!foundInterface) {
+      tx.functionName = "⚠️ Unknown";
+    }
   }
   return tx;
 };

templates/base/packages/nextjs/utils/scaffold-eth/networks.ts

@@ -31,6 +31,8 @@ export const RPC_CHAIN_NAMES: Record<number, string> = {
   [chains.base.id]: "base-mainnet",
   [chains.baseGoerli.id]: "base-goerli",
   [chains.baseSepolia.id]: "base-sepolia",
+  [chains.celo.id]: "celo-mainnet",
+  [chains.celoAlfajores.id]: "celo-alfajores",
 };
 
 export const getAlchemyHttpUrl = (chainId: number) => {
@@ -81,6 +83,12 @@ export const NETWORKS_EXTRA_DATA: Record<string, ChainAttributes> = {
   [chains.scrollSepolia.id]: {
     color: "#fbebd4",
   },
+  [chains.celo.id]: {
+    color: "#FCFF52",
+  },
+  [chains.celoAlfajores.id]: {
+    color: "#476520",
+  },
 };
 
 /**

templates/example-contracts/hardhat/packages/hardhat/contracts/YourContract.sol

@@ -13,75 +13,66 @@ import "hardhat/console.sol";
  * @author BuidlGuidl
  */
 contract YourContract {
-	// State Variables
-	address public immutable owner;
-	string public greeting = "Building Unstoppable Apps!!!";
-	bool public premium = false;
-	uint256 public totalCounter = 0;
-	mapping(address => uint) public userGreetingCounter;
+    // State Variables
+    address public immutable owner;
+    string public greeting = "Building Unstoppable Apps!!!";
+    bool public premium = false;
+    uint256 public totalCounter = 0;
+    mapping(address => uint) public userGreetingCounter;
 
-	// Events: a way to emit log statements from smart contract that can be listened to by external parties
-	event GreetingChange(
-		address indexed greetingSetter,
-		string newGreeting,
-		bool premium,
-		uint256 value
-	);
+    // Events: a way to emit log statements from smart contract that can be listened to by external parties
+    event GreetingChange(address indexed greetingSetter, string newGreeting, bool premium, uint256 value);
 
-	// Constructor: Called once on contract deployment
-	// Check packages/hardhat/deploy/00_deploy_your_contract.ts
-	constructor(address _owner) {
-		owner = _owner;
-	}
+    // Constructor: Called once on contract deployment
+    // Check packages/hardhat/deploy/00_deploy_your_contract.ts
+    constructor(address _owner) {
+        owner = _owner;
+    }
 
-	// Modifier: used to define a set of rules that must be met before or after a function is executed
-	// Check the withdraw() function
-	modifier isOwner() {
-		// msg.sender: predefined variable that represents address of the account that called the current function
-		require(msg.sender == owner, "Not the Owner");
-		_;
-	}
+    // Modifier: used to define a set of rules that must be met before or after a function is executed
+    // Check the withdraw() function
+    modifier isOwner() {
+        // msg.sender: predefined variable that represents address of the account that called the current function
+        require(msg.sender == owner, "Not the Owner");
+        _;
+    }
 
-	/**
-	 * Function that allows anyone to change the state variable "greeting" of the contract and increase the counters
-	 *
-	 * @param _newGreeting (string memory) - new greeting to save on the contract
-	 */
-	function setGreeting(string memory _newGreeting) public payable {
-		// Print data to the hardhat chain console. Remove when deploying to a live network.
-		console.log(
-			"Setting new greeting '%s' from %s",
-			_newGreeting,
-			msg.sender
-		);
+    /**
+     * Function that allows anyone to change the state variable "greeting" of the contract and increase the counters
+     *
+     * @param _newGreeting (string memory) - new greeting to save on the contract
+     */
+    function setGreeting(string memory _newGreeting) public payable {
+        // Print data to the hardhat chain console. Remove when deploying to a live network.
+        console.log("Setting new greeting '%s' from %s", _newGreeting, msg.sender);
 
-		// Change state variables
-		greeting = _newGreeting;
-		totalCounter += 1;
-		userGreetingCounter[msg.sender] += 1;
+        // Change state variables
+        greeting = _newGreeting;
+        totalCounter += 1;
+        userGreetingCounter[msg.sender] += 1;
 
-		// msg.value: built-in global variable that represents the amount of ether sent with the transaction
-		if (msg.value > 0) {
-			premium = true;
-		} else {
-			premium = false;
-		}
+        // msg.value: built-in global variable that represents the amount of ether sent with the transaction
+        if (msg.value > 0) {
+            premium = true;
+        } else {
+            premium = false;
+        }
 
-		// emit: keyword used to trigger an event
-		emit GreetingChange(msg.sender, _newGreeting, msg.value > 0, msg.value);
-	}
+        // emit: keyword used to trigger an event
+        emit GreetingChange(msg.sender, _newGreeting, msg.value > 0, msg.value);
+    }
 
-	/**
-	 * Function that allows the owner to withdraw all the Ether in the contract
-	 * The function can only be called by the owner of the contract as defined by the isOwner modifier
-	 */
-	function withdraw() public isOwner {
-		(bool success, ) = owner.call{ value: address(this).balance }("");
-		require(success, "Failed to send Ether");
-	}
+    /**
+     * Function that allows the owner to withdraw all the Ether in the contract
+     * The function can only be called by the owner of the contract as defined by the isOwner modifier
+     */
+    function withdraw() public isOwner {
+        (bool success, ) = owner.call{ value: address(this).balance }("");
+        require(success, "Failed to send Ether");
+    }
 
-	/**
-	 * Function that allows the contract to receive ETH
-	 */
-	receive() external payable {}
+    /**
+     * Function that allows the contract to receive ETH
+     */
+    receive() external payable {}
 }