Up usehooks ts

package.json

@@ -34,8 +34,5 @@
   "devDependencies": {
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3"
-  },
-  "resolutions": {
-    "usehooks-ts@^2.7.2": "patch:usehooks-ts@npm:^2.7.2#./.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch"
   }
 }

packages/hardhat/contracts/MyContract.sol

@@ -0,0 +1,33 @@
+//SPDX-License-Identifier: MIT
+pragma solidity >=0.8.0 <0.9.0;
+
+contract MyContract {
+	// 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
+	);
+
+	// 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");
+		_;
+	}
+}

packages/hardhat/deploy/00_deploy_your_contract.ts

@@ -32,6 +32,16 @@ const deployYourContract: DeployFunction = async function (hre: HardhatRuntimeEn
     autoMine: true,
   });
 
+  await deploy("MyContract", {
+    from: deployer,
+    // Contract constructor arguments
+    args: [deployer],
+    log: true,
+    // autoMine: can be passed to the deploy function to make the deployment process faster on local networks by
+    // automatically mining the contract deployment transaction. There is no effect on live networks.
+    autoMine: true,
+  });
+
   // Get the deployed contract to interact with it after deploying.
   const yourContract = await hre.ethers.getContract<Contract>("YourContract", deployer);
   console.log("👋 Initial greeting:", await yourContract.greeting());

packages/nextjs/app/debug/_components/DebugContracts.tsx

@@ -15,6 +15,7 @@ export function DebugContracts() {
   const [selectedContract, setSelectedContract] = useLocalStorage<ContractName>(
     selectedContractStorageKey,
     contractNames[0],
+    { initializeWithValue: false },
   );
 
   useEffect(() => {

packages/nextjs/components/ScaffoldEthAppWithProviders.tsx

@@ -3,13 +3,13 @@
 import { useEffect } from "react";
 import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
 import { Toaster } from "react-hot-toast";
+import { useDarkMode } from "usehooks-ts";
 import { WagmiConfig } from "wagmi";
 import { Footer } from "~~/components/Footer";
 import { Header } from "~~/components/Header";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar";
 import { useNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
-import { useDarkMode } from "~~/hooks/scaffold-eth/useDarkMode";
 import { useGlobalState } from "~~/services/store/store";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 import { appChains } from "~~/services/web3/wagmiConnectors";
@@ -37,7 +37,7 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
 };
 
 export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => {
-  const { isDarkMode } = useDarkMode();
+  const { isDarkMode } = useDarkMode({ initializeWithValue: false });
 
   return (
     <WagmiConfig config={wagmiConfig}>

packages/nextjs/components/SwitchTheme.tsx

@@ -1,12 +1,11 @@
 "use client";
 
 import { useEffect } from "react";
-import { useIsMounted } from "usehooks-ts";
+import { useDarkMode, useIsMounted } from "usehooks-ts";
 import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
-import { useDarkMode } from "~~/hooks/scaffold-eth/useDarkMode";
 
 export const SwitchTheme = ({ className }: { className?: string }) => {
-  const { isDarkMode, toggle } = useDarkMode();
+  const { isDarkMode, toggle } = useDarkMode({ initializeWithValue: false });
   const isMounted = useIsMounted();
 
   useEffect(() => {

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx

@@ -1,7 +1,7 @@
+import { useDarkMode } from "usehooks-ts";
 import { useNetwork, useSwitchNetwork } from "wagmi";
 import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
 import { getNetworkColor } from "~~/hooks/scaffold-eth";
-import { useDarkMode } from "~~/hooks/scaffold-eth/useDarkMode";
 import { getTargetNetworks } from "~~/utils/scaffold-eth";
 
 const allowedNetworks = getTargetNetworks();
@@ -11,7 +11,7 @@ type NetworkOptionsProps = {
 };
 
 export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
-  const { isDarkMode } = useDarkMode();
+  const { isDarkMode } = useDarkMode({ initializeWithValue: false });
   const { switchNetwork } = useSwitchNetwork();
   const { chain } = useNetwork();
 

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

@@ -58,7 +58,9 @@ const getInitialConnector = (
  */
 export const useAutoConnect = (): void => {
   const wagmiWalletValue = useReadLocalStorage<string>(WAGMI_WALLET_STORAGE_KEY);
-  const [walletId, setWalletId] = useLocalStorage<string>(SCAFFOLD_WALLET_STORAGE_KEY, wagmiWalletValue ?? "");
+  const [walletId, setWalletId] = useLocalStorage<string>(SCAFFOLD_WALLET_STORAGE_KEY, wagmiWalletValue ?? "", {
+    initializeWithValue: false,
+  });
   const connectState = useConnect();
   useAccount({
     onConnect({ connector }) {

packages/nextjs/hooks/scaffold-eth/useBurnerWallet.ts

@@ -57,7 +57,9 @@ type BurnerAccount = {
  * Creates a burner wallet
  */
 export const useBurnerWallet = (): BurnerAccount => {
-  const [burnerSk, setBurnerSk] = useLocalStorage<Hex>(burnerStorageKey, newDefaultPrivateKey);
+  const [burnerSk, setBurnerSk] = useLocalStorage<Hex>(burnerStorageKey, newDefaultPrivateKey, {
+    initializeWithValue: false,
+  });
 
   const publicClient = usePublicClient();
   const [walletClient, setWalletClient] = useState<WalletClient<HttpTransport, Chain, PrivateKeyAccount>>();

packages/nextjs/hooks/scaffold-eth/useDarkMode.ts

@@ -16,8 +16,12 @@ export function useDarkMode(defaultValue?: boolean): UseDarkModeOutput {
   const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);
   const [prevIsDarkOs, setPrevIsDarkOs] = useState(isDarkOS);
 
-  const initialStorageValue: boolean | null = useReadLocalStorage(LOCAL_STORAGE_THEME_KEY);
-  const [isDarkMode, setIsDarkMode] = useLocalStorage<boolean>(LOCAL_STORAGE_THEME_KEY, Boolean(defaultValue));
+  const initialStorageValue: boolean | null | undefined = useReadLocalStorage(LOCAL_STORAGE_THEME_KEY, {
+    initializeWithValue: false,
+  });
+  const [isDarkMode, setIsDarkMode] = useLocalStorage<boolean>(LOCAL_STORAGE_THEME_KEY, Boolean(defaultValue), {
+    initializeWithValue: false,
+  });
 
   // set if no init value
   useEffect(() => {

packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts

@@ -1,5 +1,5 @@
-import { useDarkMode } from "./useDarkMode";
 import { useTargetNetwork } from "./useTargetNetwork";
+import { useDarkMode } from "usehooks-ts";
 import { ChainWithAttributes } from "~~/utils/scaffold-eth";
 
 export const DEFAULT_NETWORK_COLOR: [string, string] = ["#666666", "#bbbbbb"];
@@ -13,7 +13,7 @@ export function getNetworkColor(network: ChainWithAttributes, isDarkMode: boolea
  * Gets the color of the target network
  */
 export const useNetworkColor = () => {
-  const { isDarkMode } = useDarkMode();
+  const { isDarkMode } = useDarkMode({ initializeWithValue: false });
   const { targetNetwork } = useTargetNetwork();
 
   return getNetworkColor(targetNetwork, isDarkMode);

packages/nextjs/package.json

@@ -29,7 +29,7 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
     "use-debounce": "^8.0.4",
-    "usehooks-ts": "^2.7.2",
+    "usehooks-ts": "^2.13.0",
     "viem": "1.19.9",
     "wagmi": "1.4.12",
     "zustand": "^4.1.2"

yarn.lock

@@ -1890,7 +1890,7 @@ __metadata:
     type-fest: ^4.6.0
     typescript: ^5.1.6
     use-debounce: ^8.0.4
-    usehooks-ts: ^2.7.2
+    usehooks-ts: ^2.13.0
     vercel: ^32.4.1
     viem: 1.19.9
     wagmi: 1.4.12
@@ -9588,6 +9588,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.debounce@npm:^4.0.8":
+  version: 4.0.8
+  resolution: "lodash.debounce@npm:4.0.8"
+  checksum: a3f527d22c548f43ae31c861ada88b2637eb48ac6aa3eb56e82d44917971b8aa96fbb37aa60efea674dc4ee8c42074f90f7b1f772e9db375435f6c83a19b3bc6
+  languageName: node
+  linkType: hard
+
 "lodash.defaults@npm:^4.2.0":
   version: 4.2.0
   resolution: "lodash.defaults@npm:4.2.0"
@@ -14036,23 +14043,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"usehooks-ts@npm:^2.7.2":
-  version: 2.9.1
-  resolution: "usehooks-ts@npm:2.9.1"
-  peerDependencies:
-    react: ^16.8.0  || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0  || ^17.0.0 || ^18.0.0
-  checksum: 36f1e4142ce23bc019b81d2e93aefd7f2c350abcf255598c21627114a69a2f2f116b35dc3a353375f09c6e4c9b704a04f104e3d10e98280545c097feca66c30a
-  languageName: node
-  linkType: hard
-
-"usehooks-ts@patch:usehooks-ts@npm:^2.7.2#./.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch::locator=se-2%40workspace%3A.":
-  version: 2.9.1
-  resolution: "usehooks-ts@patch:usehooks-ts@npm%3A2.9.1#./.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch::version=2.9.1&hash=68bde7&locator=se-2%40workspace%3A."
+"usehooks-ts@npm:^2.13.0":
+  version: 2.13.0
+  resolution: "usehooks-ts@npm:2.13.0"
+  dependencies:
+    lodash.debounce: ^4.0.8
   peerDependencies:
-    react: ^16.8.0  || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0  || ^17.0.0 || ^18.0.0
-  checksum: 6807ae0e6ffd158790e5018d3a322efd0fe97853b6b83751725e5e81d0962cb6230ca65a24341bb5cee3f1bc330721611440c399fc950723153c5cc61eb74b04
+    react: ^16.8.0  || ^17 || ^18
+  checksum: ad07930e1b5c70392603eb8b3f199f44349c75406fe31013f79b0fb7fdece59f47f8dba09b6f1fafaa00d68f43240dbb13cdc1afb89b647f1d53504599a51ca0
   languageName: node
   linkType: hard