Weekly CLI backmerge

.changeset/soft-geese-rule.md

@@ -0,0 +1,9 @@
+---
+"create-eth": patch
+---
+
+- Daisy UI: update to v4 (#656)
+- JSDoc cleanup (#665)
+- use default values for safeConnector (#667)
+- Typos (#668)
+- Remove custom Spinner component (#669)

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

@@ -24,7 +24,7 @@ export const Footer = () => {
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
               <div>
-                <div className="btn btn-primary btn-sm font-normal normal-case gap-1 cursor-auto">
+                <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
                   <CurrencyDollarIcon className="h-4 w-4" />
                   <span>{nativeCurrencyPrice}</span>
                 </div>
@@ -33,7 +33,7 @@ export const Footer = () => {
             {isLocalNetwork && (
               <>
                 <Faucet />
-                <Link href="/blockexplorer" passHref className="btn btn-primary btn-sm font-normal normal-case gap-1">
+                <Link href="/blockexplorer" passHref className="btn btn-primary btn-sm font-normal gap-1">
                   <MagnifyingGlassIcon className="h-4 w-4" />
                   <span>Block Explorer</span>
                 </Link>

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

@@ -16,7 +16,7 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
       <input
         id="theme-toggle"
         type="checkbox"
-        className="toggle toggle-primary bg-primary"
+        className="toggle toggle-primary bg-primary hover:bg-primary border-primary"
         onChange={toggle}
         checked={isDarkMode}
       />

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

@@ -2,7 +2,6 @@ import { useReducer } from "react";
 import { ContractReadMethods } from "./ContractReadMethods";
 import { ContractVariables } from "./ContractVariables";
 import { ContractWriteMethods } from "./ContractWriteMethods";
-import { Spinner } from "~~/components/assets/Spinner";
 import { Address, Balance } from "~~/components/scaffold-eth";
 import { useDeployedContractInfo, useNetworkColor } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
@@ -25,7 +24,7 @@ export const ContractUI = ({ contractName, className = "" }: ContractUIProps) =>
   if (deployedContractLoading) {
     return (
       <div className="mt-14">
-        <Spinner width="50px" height="50px" />
+        <span className="loading loading-spinner loading-lg"></span>
       </div>
     );
   }

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

@@ -3,20 +3,16 @@ import { BaseError as BaseViemError, DecodeErrorResultReturnType } from "viem";
 
 /**
  * Generates a key based on function metadata
- * @param {string} functionName
- * @param {AbiParameter} input - object containing function name and input type corresponding to index
- * @param {number} inputIndex
- * @returns {string} key
  */
 const getFunctionInputKey = (functionName: string, input: AbiParameter, inputIndex: number): string => {
   const name = input?.name || `input_${inputIndex}_`;
   return functionName + "_" + name + "_" + input.internalType + "_" + input.type;
 };
 
 /**
- * Parses an error to get a displayable string
+ * Parses an viem/wagmi error to get a displayable string
  * @param e - error object
- * @returns {string} parsed error string
+ * @returns parsed error string
  */
 const getParsedError = (e: any): string => {
   let message: string = e.message ?? "An unknown error occurred";
@@ -48,8 +44,6 @@ const ARRAY_TYPE_REGEX = /\[.*\]$/;
 
 /**
  * Parses form input with array support
- * @param {Record<string,any>} form - form object containing key value pairs
- * @returns  parsed error string
  */
 const getParsedContractFunctionArgs = (form: Record<string, any>) => {
   const keys = Object.keys(form);

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

@@ -82,7 +82,7 @@ export const Faucet = () => {
 
   return (
     <div>
-      <label htmlFor="faucet-modal" className="btn btn-primary btn-sm font-normal normal-case gap-1">
+      <label htmlFor="faucet-modal" className="btn btn-primary btn-sm font-normal gap-1">
         <BanknotesIcon className="h-4 w-4" />
         <span>Faucet</span>
       </label>

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

@@ -35,7 +35,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: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 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"
         placeholder={placeholder}
         name={name}
         value={value?.toString()}

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

@@ -6,7 +6,7 @@ import scaffoldConfig from "~~/scaffold.config";
 import { burnerWalletId } from "~~/services/web3/wagmi-burner/BurnerConnector";
 import { getTargetNetworks } from "~~/utils/scaffold-eth";
 
-const SCAFFOLD_WALLET_STROAGE_KEY = "scaffoldEth2.wallet";
+const SCAFFOLD_WALLET_STORAGE_KEY = "scaffoldEth2.wallet";
 const WAGMI_WALLET_STORAGE_KEY = "wagmi.wallet";
 
 // ID of the SAFE connector instance
@@ -59,7 +59,7 @@ const getInitialConnector = (
  */
 export const useAutoConnect = (): void => {
   const wagmiWalletValue = useReadLocalStorage<string>(WAGMI_WALLET_STORAGE_KEY);
-  const [walletId, setWalletId] = useLocalStorage<string>(SCAFFOLD_WALLET_STROAGE_KEY, wagmiWalletValue ?? "");
+  const [walletId, setWalletId] = useLocalStorage<string>(SCAFFOLD_WALLET_STORAGE_KEY, wagmiWalletValue ?? "");
   const connectState = useConnect();
   const accountState = useAccount();
 

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

@@ -5,8 +5,8 @@ import { usePublicClient } from "wagmi";
 import { Contract, ContractCodeStatus, ContractName, contracts } from "~~/utils/scaffold-eth/contract";
 
 /**
- * Gets the matching contract info from the contracts file generated by `yarn deploy`
- * @param contractName - name of deployed contract
+ * Gets the matching contract info for the provided contract name from the contracts present in deployedContracts.ts
+ * and externalContracts.ts corresponding to targetNetworks configured in scaffold.config.ts
  */
 export const useDeployedContractInfo = <TContractName extends ContractName>(contractName: TContractName) => {
   const isMounted = useIsMounted();

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

@@ -8,7 +8,6 @@ const enablePolling = false;
 
 /**
  * Get the price of Native Currency based on Native Token/DAI trading pair from Uniswap SDK
- * @returns nativeCurrencyPrice: number
  */
 export const useNativeCurrencyPrice = () => {
   const { targetNetwork } = useTargetNetwork();

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

@@ -1,7 +1,9 @@
 import React, { useEffect } from "react";
 
 /**
- * Check if a click was made outside the passed ref
+ * Handles clicks outside of passed ref element
+ * @param ref - react ref of the element
+ * @param callback - callback function to call when clicked outside
  */
 export const useOutsideClick = (ref: React.RefObject<HTMLElement>, callback: { (): void }) => {
   useEffect(() => {

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

@@ -5,10 +5,11 @@ import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
 import { Contract, ContractName } from "~~/utils/scaffold-eth/contract";
 
 /**
- * Gets a deployed contract by contract name and returns a contract instance
- * @param config - The config settings
- * @param config.contractName - Deployed contract name
- * @param config.walletClient - An viem wallet client instance (optional)
+ * Gets a viem instance of the contract present in deployedContracts.ts or externalContracts.ts corresponding to
+ * targetNetworks configured in scaffold.config.ts. Optional walletClient can be passed for doing write transactions.
+ * @param config - The config settings for the hook
+ * @param config.contractName - deployed contract name
+ * @param config.walletClient - optional walletClient from wagmi useWalletClient hook can be passed for doing write transactions
  */
 export const useScaffoldContract = <
   TContractName extends ContractName,

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

@@ -10,8 +10,8 @@ import {
 } from "~~/utils/scaffold-eth/contract";
 
 /**
- * Wrapper for wagmi's useContractRead hook which automatically loads (by name)
- * the contract ABI and address from the deployed contracts
+ * Wrapper around wagmi's useContractRead hook which automatically loads (by name) the contract ABI and address from
+ * the contracts present in deployedContracts.ts & externalContracts.ts corresponding to targetNetworks configured in scaffold.config.ts
  * @param config - The config settings, including extra wagmi configuration
  * @param config.contractName - deployed contract name
  * @param config.functionName - name of the function to be called

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

@@ -10,13 +10,15 @@ import { ContractAbi, ContractName, UseScaffoldWriteConfig } from "~~/utils/scaf
 type UpdatedArgs = Parameters<ReturnType<typeof useContractWrite<Abi, string, undefined>>["writeAsync"]>[0];
 
 /**
- * Wrapper for wagmi's useContractWrite hook (with config prepared by usePrepareContractWrite hook)
- * which automatically loads (by name) the contract ABI and address from the deployed contracts
+ * Wrapper around wagmi's useContractWrite hook which automatically loads (by name) the contract ABI and address from
+ * the contracts present in deployedContracts.ts & externalContracts.ts corresponding to targetNetworks configured in scaffold.config.ts
  * @param config - The config settings, including extra wagmi configuration
- * @param config.contractName - deployed contract name
+ * @param config.contractName - contract name
  * @param config.functionName - name of the function to be called
  * @param config.args - arguments for the function
  * @param config.value - value in ETH that will be sent with transaction
+ * @param config.blockConfirmations - number of block confirmations to wait for (default: 1)
+ * @param config.onBlockConfirmation - callback that will be called after blockConfirmations.
  */
 export const useScaffoldContractWrite = <
   TContractName extends ContractName,

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

@@ -6,8 +6,8 @@ import { addIndexedArgsToEvent, useDeployedContractInfo } from "~~/hooks/scaffol
 import { ContractAbi, ContractName, UseScaffoldEventConfig } from "~~/utils/scaffold-eth/contract";
 
 /**
- * Wrapper for wagmi's useContractEvent which automatically loads (by name)
- * the contract ABI and address from the deployed contracts.
+ * Wrapper around wagmi's useEventSubscriber hook which automatically loads (by name) the contract ABI and
+ * address from the contracts present in deployedContracts.ts & externalContracts.ts
  * @param config - The config settings
  * @param config.contractName - deployed contract name
  * @param config.eventName - name of the event to listen for
@@ -24,9 +24,9 @@ export const useScaffoldEventSubscriber = <
   const { data: deployedContractData } = useDeployedContractInfo(contractName);
   const { targetNetwork } = useTargetNetwork();
 
-  const addInexedArgsToLogs = (logs: Log[]) => logs.map(addIndexedArgsToEvent);
+  const addIndexedArgsToLogs = (logs: Log[]) => logs.map(addIndexedArgsToEvent);
   const listenerWithIndexedArgs = (logs: Log[]) =>
-    listener(addInexedArgsToLogs(logs) as Parameters<typeof listener>[0]);
+    listener(addIndexedArgsToLogs(logs) as Parameters<typeof listener>[0]);
 
   return useContractEvent({
     address: deployedContractData?.address,

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

@@ -5,6 +5,9 @@ import { useGlobalState } from "~~/services/store/store";
 import { ChainWithAttributes } from "~~/utils/scaffold-eth";
 import { NETWORKS_EXTRA_DATA } from "~~/utils/scaffold-eth";
 
+/**
+ * Retrieves the connected wallet's network from scaffold.config or defaults to the 0th network in the list if the wallet is not connected.
+ */
 export function useTargetNetwork(): { targetNetwork: ChainWithAttributes } {
   const { chain } = useNetwork();
   const targetNetwork = useGlobalState(({ targetNetwork }) => targetNetwork);

templates/base/packages/nextjs/hooks/scaffold-eth/useTransactor.tsx

@@ -29,9 +29,9 @@ const TxnNotification = ({ message, blockExplorerLink }: { message: string; bloc
 };
 
 /**
- * @description Runs Transaction passed in to returned function showing UI feedback.
- * @param _walletClient
- * @returns function that takes a transaction and returns a promise of the transaction hash
+ * Runs Transaction passed in to returned function showing UI feedback.
+ * @param _walletClient - Optional wallet client to use. If not provided, will use the one from useWalletClient.
+ * @returns function that takes in transaction function as callback, shows UI feedback for transaction and returns a promise of the transaction hash
  */
 export const useTransactor = (_walletClient?: WalletClient): TransactionFunc => {
   let walletClient = _walletClient;

templates/base/packages/nextjs/package.json

@@ -20,7 +20,7 @@
     "@uniswap/sdk-core": "~4.0.1",
     "@uniswap/v2-sdk": "~3.0.1",
     "blo": "~1.0.1",
-    "daisyui": "~3.5.1",
+    "daisyui": "~4.4.19",
     "next": "~13.1.6",
     "nextjs-progressbar": "~0.0.16",
     "qrcode.react": "~3.1.0",

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

@@ -82,29 +82,23 @@ const AddressPage = ({ address, contractData }: PageProps) => {
         </div>
       </div>
       {isContract && (
-        <div className="tabs">
+        <div className="tabs tabs-lifted w-min">
           <button
-            className={\`tab tab-lifted \${activeTab === "transactions" ? "tab-active" : ""}\`}
+            className={\`tab \${activeTab === "transactions" ? "tab-active" : ""}\`}
             onClick={() => setActiveTab("transactions")}
           >
             Transactions
           </button>
-          <button
-            className={\`tab tab-lifted \${activeTab === "code" ? "tab-active" : ""}\`}
-            onClick={() => setActiveTab("code")}
-          >
+          <button className={\`tab \${activeTab === "code" ? "tab-active" : ""}\`} onClick={() => setActiveTab("code")}>
             Code
           </button>
           <button
-            className={\`tab tab-lifted \${activeTab === "storage" ? "tab-active" : ""}\`}
+            className={\`tab \${activeTab === "storage" ? "tab-active" : ""}\`}
             onClick={() => setActiveTab("storage")}
           >
             Storage
           </button>
-          <button
-            className={\`tab tab-lifted \${activeTab === "logs" ? "tab-active" : ""}\`}
-            onClick={() => setActiveTab("logs")}
-          >
+          <button className={\`tab \${activeTab === "logs" ? "tab-active" : ""}\`} onClick={() => setActiveTab("logs")}>
             Logs
           </button>
         </div>

templates/base/packages/nextjs/pages/blockexplorer/index.tsx

@@ -8,7 +8,7 @@ import { useFetchBlocks } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { notification } from "~~/utils/scaffold-eth";
 
-const Blockexplorer: NextPage = () => {
+const BlockExplorer: NextPage = () => {
   const { blocks, transactionReceipts, currentPage, totalBlocks, setCurrentPage, error } = useFetchBlocks();
   const { targetNetwork } = useTargetNetwork();
 
@@ -59,4 +59,4 @@ const Blockexplorer: NextPage = () => {
   );
 };
 
-export default Blockexplorer;
+export default BlockExplorer;

templates/base/packages/nextjs/pages/debug.tsx

@@ -36,7 +36,7 @@ const Debug: NextPage = () => {
               <div className="flex flex-row gap-2 w-full max-w-7xl pb-1 px-6 lg:px-10 flex-wrap">
                 {contractNames.map(contractName => (
                   <button
-                    className={`btn btn-secondary btn-sm normal-case font-thin ${
+                    className={`btn btn-secondary btn-sm font-thin ${
                       contractName === selectedContract ? "bg-base-300" : "bg-base-100"
                     }`}
                     key={contractName}

templates/base/packages/nextjs/services/web3/wagmi-burner/BurnerConnector.ts

@@ -18,9 +18,8 @@ export class BurnerConnector extends Connector<StaticJsonRpcProvider, BurnerConn
   readonly ready = true;
 
   private provider?: StaticJsonRpcProvider;
-  /**
-   * this is the store for getWallet()
-   */
+
+  // store for getWallet()
   private burnerWallet: WalletClient<HttpTransport, Chain, PrivateKeyAccount> | undefined;
 
   constructor(config: { chains?: Chain[]; options: BurnerConnectorOptions }) {
@@ -39,11 +38,11 @@ export class BurnerConnector extends Connector<StaticJsonRpcProvider, BurnerConn
   async getWalletClient(config?: { chainId?: number | undefined } | undefined) {
     const chain = this.getChainFromId(config?.chainId);
     if (!this.burnerWallet) {
-      const bunerAccount = privateKeyToAccount(loadBurnerSK());
+      const burnerAccount = privateKeyToAccount(loadBurnerSK());
 
       const client = createWalletClient({
         chain: chain,
-        account: bunerAccount,
+        account: burnerAccount,
         transport: http(),
       });
       this.burnerWallet = client;

templates/base/packages/nextjs/services/web3/wagmi-burner/BurnerConnectorErrors.ts

@@ -5,7 +5,7 @@ export const BurnerConnectorErrorList = {
   accountNotFound: "Account not found",
   couldNotConnect: "Could not connect to network",
   unsupportedBurnerChain: "This network is not supported for burner connector",
-  chainIdNotResolved: "Cound not resolve chainId",
+  chainIdNotResolved: "Could not resolve chainId",
   chainNotSupported: "Chain is not supported, check burner wallet config",
 } as const;
 

templates/base/packages/nextjs/services/web3/wagmi-burner/burnerWalletConfig.ts

@@ -16,8 +16,6 @@ const burnerWalletIconBase64 =
 
 /**
  * Wagmi config for burner wallet
- * @param param0
- * @returns
  */
 export const burnerWalletConfig = ({ chains }: BurnerWalletOptions): Wallet => ({
   id: burnerWalletId,

templates/base/packages/nextjs/services/web3/wagmiConnectors.tsx

@@ -62,7 +62,7 @@ const wallets = [
         }),
       ]
     : []),
-  safeWallet({ ...walletsOptions, debug: false, allowedDomains: [/gnosis-safe.io$/, /app.safe.global$/] }),
+  safeWallet({ ...walletsOptions }),
 ];
 
 /**

templates/base/packages/nextjs/styles/globals.css

@@ -4,7 +4,7 @@
 
 :root,
 [data-theme] {
-  background: hsl(var(--b2));
+  background: oklch(var(--b2));
 }
 
 body {