Update CLI with latest main (#555)

Co-authored-by: Rinat <rinat@hey.com>
Co-authored-by: Shiv Bhonde | shivbhonde.eth <shivbhonde04@gmail.com>
Co-authored-by: CJ <53488449+0xChijoke@users.noreply.github.com>
Co-authored-by: Zak G <zakgriffith@gmail.com>
Co-authored-by: owlwilderness.eth <98717833+OwlWilderness@users.noreply.github.com>
Co-authored-by: port <108868128+portdeveloper@users.noreply.github.com>
Co-authored-by: Pierre Bertet <hi@bpier.re>
Co-authored-by: isabellewei <isabelle.wei@yahoo.ca>
Co-authored-by: Filip Harald <Filip.harald@gmail.com>

.changeset/angry-tips-speak.md

@@ -0,0 +1,41 @@
+---
+"create-eth": patch
+---
+
+1. Fix RainbowKitCustomConnectButton dropdown styles (#500)
+
+2. chore: footer missalignment & home page on small screens (#502)
+
+3. Update and typescript version (#499)
+
+4. fix: header links wrapping icons and text (#510)
+
+5. Fix typos in useScaffoldContractWrite logs (#512)
+
+6. fix: spelling in test file name (#522)
+
+7. Add polygonZkEvm and polygonZkEvmTestnet (#309)
+
+8. fix: eth price showing 0 on sepolia network (#532)
+
+9. use websockets client in useFetchBlocks hooks (#529)
+
+10. Move from react-blockies to blo (#538)
+
+11. add Prettify type helper locally (#541)
+
+12. update hardhat version (#546)
+
+13. Add indexed args to events (#540)
+
+14. add out of box compatibility with SAFE{Wallet} (#346)
+
+15. remove parseEther from useScaffoldContractWrite (#548)
+
+16. Add Scroll Sepolia testnet (#547)
+
+17. use BuidlGuidl logo on footer (#551)
+
+18. add types to even data in useScaffoldEventHistory (#553)
+
+19. foundry: add chain id 31337 while forking chain (#531)

templates/base/packages/nextjs/components/Footer.tsx

@@ -2,6 +2,7 @@ import { hardhat } from "wagmi/chains";
 import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
 import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
+import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
 import { Faucet } from "~~/components/scaffold-eth";
 import { useGlobalState } from "~~/services/store/store";
 import { getTargetNetwork } from "~~/utils/scaffold-eth";
@@ -42,18 +43,19 @@ export const Footer = () => {
               </a>
             </div>
             <span>·</span>
-            <div>
+            <div className="flex justify-center items-center gap-2">
               <p className="m-0 text-center">
-                Built with <HeartIcon className="inline-block h-4 w-4" /> at 🏰{" "}
-                <a
-                  href="https://buidlguidl.com/"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="underline underline-offset-2"
-                >
-                  BuidlGuidl
-                </a>
+                Built with <HeartIcon className="inline-block h-4 w-4" /> at
               </p>
+              <a
+                className="flex justify-center items-center gap-1"
+                href="https://buidlguidl.com/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <BuidlGuidlLogo className="w-3 h-5 pb-1" />
+                <span className="underline underline-offset-2">BuidlGuidl</span>
+              </a>
             </div>
             <span>·</span>
             <div className="text-center">

templates/base/packages/nextjs/components/assets/BuidlGuidlLogo.tsx

@@ -0,0 +1,18 @@
+export const BuidlGuidlLogo = ({ className }: { className: string }) => {
+  return (
+    <svg
+      className={className}
+      width="53"
+      height="72"
+      viewBox="0 0 53 72"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        d="M25.9 17.434v15.638h3.927v9.04h9.718v-9.04h6.745v18.08l-10.607 19.88-12.11-.182-12.11.183L.856 51.152v-18.08h6.713v9.04h9.75v-9.04h4.329V2.46a2.126 2.126 0 0 1 4.047-.914c1.074.412 2.157 1.5 3.276 2.626 1.33 1.337 2.711 2.726 4.193 3.095 1.496.373 2.605-.026 3.855-.475 1.31-.47 2.776-.997 5.005-.747 1.67.197 2.557 1.289 3.548 2.509 1.317 1.623 2.82 3.473 6.599 3.752l-.024.017c-2.42 1.709-5.726 4.043-10.86 3.587-1.605-.139-2.736-.656-3.82-1.153-1.546-.707-2.997-1.37-5.59-.832-2.809.563-4.227 1.892-5.306 2.903-.236.221-.456.427-.67.606Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};

templates/base/packages/nextjs/components/blockexplorer/TransactionsTable.tsx

@@ -4,7 +4,7 @@ import { Address } from "~~/components/scaffold-eth";
 import { TransactionWithFunction, getTargetNetwork } from "~~/utils/scaffold-eth";
 import { TransactionsTableProps } from "~~/utils/scaffold-eth/";
 
-export const TransactionsTable = ({ blocks, transactionReceipts, isLoading }: TransactionsTableProps) => {
+export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsTableProps) => {
   const targetNetwork = getTargetNetwork();
 
   return (
@@ -22,64 +22,47 @@ export const TransactionsTable = ({ blocks, transactionReceipts, isLoading }: Tr
               <th className="bg-primary text-end">Value ({targetNetwork.nativeCurrency.symbol})</th>
             </tr>
           </thead>
-          {isLoading ? (
-            <tbody>
-              {[...Array(20)].map((_, rowIndex) => (
-                <tr
-                  key={rowIndex}
-                  className="bg-base-200 hover:bg-base-300 transition-colors duration-200 h-12 text-sm"
-                >
-                  {[...Array(7)].map((_, colIndex) => (
-                    <td className="w-1/12 md:py-4" key={colIndex}>
-                      <div className="h-2 bg-gray-200 rounded-full animate-pulse"></div>
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          ) : (
-            <tbody>
-              {blocks.map(block =>
-                (block.transactions as TransactionWithFunction[]).map(tx => {
-                  const receipt = transactionReceipts[tx.hash];
-                  const timeMined = new Date(Number(block.timestamp) * 1000).toLocaleString();
-                  const functionCalled = tx.input.substring(0, 10);
+          <tbody>
+            {blocks.map(block =>
+              (block.transactions as TransactionWithFunction[]).map(tx => {
+                const receipt = transactionReceipts[tx.hash];
+                const timeMined = new Date(Number(block.timestamp) * 1000).toLocaleString();
+                const functionCalled = tx.input.substring(0, 10);
 
-                  return (
-                    <tr key={tx.hash} className="hover text-sm">
-                      <td className="w-1/12 md:py-4">
-                        <TransactionHash hash={tx.hash} />
-                      </td>
-                      <td className="w-2/12 md:py-4">
-                        {tx.functionName === "0x" ? "" : <span className="mr-1">{tx.functionName}</span>}
-                        {functionCalled !== "0x" && (
-                          <span className="badge badge-primary font-bold text-xs">{functionCalled}</span>
-                        )}
-                      </td>
-                      <td className="w-1/12 md:py-4">{block.number?.toString()}</td>
-                      <td className="w-2/1 md:py-4">{timeMined}</td>
-                      <td className="w-2/12 md:py-4">
-                        <Address address={tx.from} size="sm" />
-                      </td>
-                      <td className="w-2/12 md:py-4">
-                        {!receipt?.contractAddress ? (
-                          tx.to && <Address address={tx.to} size="sm" />
-                        ) : (
-                          <div className="relative">
-                            <Address address={receipt.contractAddress} size="sm" />
-                            <small className="absolute top-4 left-4">(Contract Creation)</small>
-                          </div>
-                        )}
-                      </td>
-                      <td className="text-right md:py-4">
-                        {formatEther(tx.value)} {targetNetwork.nativeCurrency.symbol}
-                      </td>
-                    </tr>
-                  );
-                }),
-              )}
-            </tbody>
-          )}
+                return (
+                  <tr key={tx.hash} className="hover text-sm">
+                    <td className="w-1/12 md:py-4">
+                      <TransactionHash hash={tx.hash} />
+                    </td>
+                    <td className="w-2/12 md:py-4">
+                      {tx.functionName === "0x" ? "" : <span className="mr-1">{tx.functionName}</span>}
+                      {functionCalled !== "0x" && (
+                        <span className="badge badge-primary font-bold text-xs">{functionCalled}</span>
+                      )}
+                    </td>
+                    <td className="w-1/12 md:py-4">{block.number?.toString()}</td>
+                    <td className="w-2/1 md:py-4">{timeMined}</td>
+                    <td className="w-2/12 md:py-4">
+                      <Address address={tx.from} size="sm" />
+                    </td>
+                    <td className="w-2/12 md:py-4">
+                      {!receipt?.contractAddress ? (
+                        tx.to && <Address address={tx.to} size="sm" />
+                      ) : (
+                        <div className="relative">
+                          <Address address={receipt.contractAddress} size="sm" />
+                          <small className="absolute top-4 left-4">(Contract Creation)</small>
+                        </div>
+                      )}
+                    </td>
+                    <td className="text-right md:py-4">
+                      {formatEther(tx.value)} {targetNetwork.nativeCurrency.symbol}
+                    </td>
+                  </tr>
+                );
+              }),
+            )}
+          </tbody>
         </table>
       </div>
     </div>

templates/base/packages/nextjs/components/example-ui/ContractInteraction.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { CopyIcon } from "./assets/CopyIcon";
 import { DiamondIcon } from "./assets/DiamondIcon";
 import { HareIcon } from "./assets/HareIcon";
+import { parseEther } from "viem";
 import { ArrowSmallRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 
@@ -13,7 +14,7 @@ export const ContractInteraction = () => {
     contractName: "YourContract",
     functionName: "setGreeting",
     args: [newGreeting],
-    value: "0.01",
+    value: parseEther("0.01"),
     onBlockConfirmation: txnReceipt => {
       console.log("📦 Transaction blockHash", txnReceipt.blockHash);
     },

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

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import Blockies from "react-blockies";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { isAddress } from "viem";
 import { useEnsAvatar, useEnsName } from "wagmi";
 import { hardhat } from "wagmi/chains";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { getBlockExplorerAddressLink, getTargetNetwork } from "~~/utils/scaffold-eth";
 
 type TAddressProps = {
@@ -78,24 +78,11 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
   return (
     <div className="flex items-center">
       <div className="flex-shrink-0">
-        {ensAvatar ? (
-          // Don't want to use nextJS Image here (and adding remote patterns for the URL)
-          // eslint-disable-next-line
-          <img
-            className="rounded-full"
-            src={ensAvatar}
-            width={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-            height={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-            alt={`${address} avatar`}
-          />
-        ) : (
-          <Blockies
-            className="mx-auto rounded-full"
-            size={blockieSizeMap[size]}
-            seed={address.toLowerCase()}
-            scale={3}
-          />
-        )}
+        <BlockieAvatar
+          address={address}
+          ensImage={ensAvatar}
+          size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
+        />
       </div>
       {disableAddressLink ? (
         <span className={`ml-1.5 text-${size} font-normal`}>{displayAddress}</span>

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

@@ -1,12 +1,15 @@
 import { AvatarComponent } from "@rainbow-me/rainbowkit";
-import Blockies from "react-blockies";
+import { blo } from "blo";
 
 // Custom Avatar for RainbowKit
-export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) =>
-  ensImage ? (
-    // Don't want to use nextJS Image here (and adding remote patterns for the URL)
-    // eslint-disable-next-line
-    <img className="rounded-full" src={ensImage} width={size} height={size} alt={`${address} avatar`} />
-  ) : (
-    <Blockies className="rounded-full" seed={address?.toLowerCase() as string} scale={size > 30 ? 10 : 3.75} />
-  );
+export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => (
+  // Don't want to use nextJS Image here (and adding remote patterns for the URL)
+  // eslint-disable-next-line @next/next/no-img-element
+  <img
+    className="rounded-full"
+    src={ensImage || blo(address as `0x${string}`)}
+    width={size}
+    height={size}
+    alt={`${address} avatar`}
+  />
+);

templates/base/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx

@@ -2,7 +2,7 @@ import { useReducer } from "react";
 import { ContractReadMethods } from "./ContractReadMethods";
 import { ContractVariables } from "./ContractVariables";
 import { ContractWriteMethods } from "./ContractWriteMethods";
-import { Spinner } from "~~/components/Spinner";
+import { Spinner } from "~~/components/assets/Spinner";
 import { Address, Balance } from "~~/components/scaffold-eth";
 import { useDeployedContractInfo, useNetworkColor } from "~~/hooks/scaffold-eth";
 import { getTargetNetwork } from "~~/utils/scaffold-eth";

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-import Blockies from "react-blockies";
+import { blo } from "blo";
 import { isAddress } from "viem";
 import { Address } from "viem";
 import { useEnsAddress, useEnsAvatar, useEnsName } from "wagmi";
@@ -74,7 +74,11 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
           </div>
         )
       }
-      suffix={value && <Blockies className="!rounded-full" seed={value?.toLowerCase() as string} size={7} scale={5} />}
+      suffix={
+        // Don't want to use nextJS Image here (and adding remote patterns for the URL)
+        // eslint-disable-next-line @next/next/no-img-element
+        value && <img alt="" className="!rounded-full" src={blo(value as `0x${string}`)} width="35" height="35" />
+      }
     />
   );
 };

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

@@ -96,7 +96,7 @@ export const RainbowKitCustomConnectButton = () => {
                       tabIndex={0}
                       className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto"
                     >
-                      <BlockieAvatar address={account.address} size={24} ensImage={account.ensAvatar} />
+                      <BlockieAvatar address={account.address} size={30} ensImage={account.ensAvatar} />
                       <span className="ml-2 mr-1">{account.displayName}</span>
                       <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
                     </label>

templates/base/packages/nextjs/hooks/scaffold-eth/useAutoConnect.ts

@@ -9,6 +9,9 @@ import { getTargetNetwork } from "~~/utils/scaffold-eth";
 const SCAFFOLD_WALLET_STROAGE_KEY = "scaffoldEth2.wallet";
 const WAGMI_WALLET_STORAGE_KEY = "wagmi.wallet";
 
+// ID of the SAFE connector instance
+const SAFE_ID = "safe";
+
 /**
  * This function will get the initial wallet connector (if any), the app will connect to
  * @param previousWalletId
@@ -19,8 +22,14 @@ const getInitialConnector = (
   previousWalletId: string,
   connectors: Connector[],
 ): { connector: Connector | undefined; chainId?: number } | undefined => {
-  const targetNetwork = getTargetNetwork();
+  // Look for the SAFE connector instance and connect to it instantly if loaded in SAFE frame
+  const safeConnectorInstance = connectors.find(connector => connector.id === SAFE_ID && connector.ready);
 
+  if (safeConnectorInstance) {
+    return { connector: safeConnectorInstance };
+  }
+
+  const targetNetwork = getTargetNetwork();
   const allowBurner = scaffoldConfig.onlyLocalBurnerWallet ? targetNetwork.id === hardhat.id : true;
 
   if (!previousWalletId) {