backmerge 13-9-24

.changeset/curvy-gifts-design.md

@@ -0,0 +1,7 @@
+---
+"create-eth": patch
+---
+
+- fix: different contracts on different chains (scaffold-eth#920)
+- bug: Reset enteredEns on Address input when changing the value (scaffold-eth#926)
+- Up viem, wagmi and rainbowkit (scaffold-eth#925)

templates/base/.yarnrc.yml

@@ -7,5 +7,7 @@ nodeLinker: node-modules
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
     spec: "@yarnpkg/plugin-typescript"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
 
 yarnPath: .yarn/releases/yarn-3.2.3.cjs

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

@@ -1,17 +1,18 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { BarsArrowUpIcon } from "@heroicons/react/20/solid";
 import { ContractUI } from "~~/app/debug/_components/contract";
-import { ContractName } from "~~/utils/scaffold-eth/contract";
-import { getAllContracts } from "~~/utils/scaffold-eth/contractsData";
+import { ContractName, GenericContract } from "~~/utils/scaffold-eth/contract";
+import { useAllContracts } from "~~/utils/scaffold-eth/contractsData";
 
 const selectedContractStorageKey = "scaffoldEth2.selectedContract";
-const contractsData = getAllContracts();
-const contractNames = Object.keys(contractsData) as ContractName[];
 
 export function DebugContracts() {
+  const contractsData = useAllContracts();
+  const contractNames = useMemo(() => Object.keys(contractsData) as ContractName[], [contractsData]);
+
   const [selectedContract, setSelectedContract] = useLocalStorage<ContractName>(
     selectedContractStorageKey,
     contractNames[0],
@@ -22,7 +23,7 @@ export function DebugContracts() {
     if (!contractNames.includes(selectedContract)) {
       setSelectedContract(contractNames[0]);
     }
-  }, [selectedContract, setSelectedContract]);
+  }, [contractNames, selectedContract, setSelectedContract]);
 
   return (
     <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center">
@@ -43,7 +44,7 @@ export function DebugContracts() {
                   onClick={() => setSelectedContract(contractName)}
                 >
                   {contractName}
-                  {contractsData[contractName].external && (
+                  {(contractsData[contractName] as GenericContract)?.external && (
                     <span className="tooltip tooltip-top tooltip-accent" data-tip="External contract">
                       <BarsArrowUpIcon className="h-4 w-4 cursor-pointer" />
                     </span>

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { blo } from "blo";
 import { useDebounceValue } from "usehooks-ts";
 import { Address, isAddress } from "viem";
@@ -66,13 +66,9 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
     onChange(ensAddress);
   }, [ensAddress, onChange, debouncedValue]);
 
-  const handleChange = useCallback(
-    (newValue: Address) => {
-      setEnteredEnsName(undefined);
-      onChange(newValue);
-    },
-    [onChange],
-  );
+  useEffect(() => {
+    setEnteredEnsName(undefined);
+  }, [value]);
 
   const reFocus =
     isEnsAddressError ||
@@ -88,7 +84,7 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
       placeholder={placeholder}
       error={ensAddress === null}
       value={value as Address}
-      onChange={handleChange}
+      onChange={onChange}
       disabled={isEnsAddressLoading || isEnsNameLoading || disabled}
       reFocus={reFocus}
       prefix={

templates/base/packages/nextjs/package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@heroicons/react": "~2.0.11",
-    "@rainbow-me/rainbowkit": "2.1.2",
+    "@rainbow-me/rainbowkit": "2.1.5",
     "@tanstack/react-query": "~5.28.6",
     "@uniswap/sdk-core": "~4.0.1",
     "@uniswap/v2-sdk": "~3.0.1",
@@ -32,8 +32,8 @@
     "react-hot-toast": "~2.4.0",
     "use-debounce": "~8.0.4",
     "usehooks-ts": "2.13.0",
-    "viem": "2.17.4",
-    "wagmi": "2.10.10",
+    "viem": "2.21.2",
+    "wagmi": "2.12.8",
     "zustand": "~4.1.2"
   },
   "devDependencies": {
@@ -43,7 +43,7 @@
     "@types/react": "^18.0.21",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@typescript-eslint/eslint-plugin": "~5.40.0",
-    "abitype": "1.0.5",
+    "abitype": "1.0.6",
     "autoprefixer": "~10.4.12",
     "eslint": "~8.24.0",
     "eslint-config-next": "~14.0.4",

templates/base/packages/nextjs/types/abitype/abi.d.ts

@@ -1,4 +1,5 @@
 import "abitype";
+import "~~/node_modules/viem/node_modules/abitype";
 
 type AddressType = string;
 
@@ -7,3 +8,9 @@ declare module "abitype" {
     AddressType: AddressType;
   }
 }
+
+declare module "~~/node_modules/viem/node_modules/abitype" {
+  export interface Register {
+    AddressType: AddressType;
+  }
+}

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

@@ -1,7 +1,11 @@
-import scaffoldConfig from "~~/scaffold.config";
-import { contracts } from "~~/utils/scaffold-eth/contract";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth";
+import { GenericContractsDeclaration, contracts } from "~~/utils/scaffold-eth/contract";
 
-export function getAllContracts() {
-  const contractsData = contracts?.[scaffoldConfig.targetNetworks[0].id];
-  return contractsData ? contractsData : {};
+const DEFAULT_ALL_CONTRACTS: GenericContractsDeclaration[number] = {};
+
+export function useAllContracts() {
+  const { targetNetwork } = useTargetNetwork();
+  const contractsData = contracts?.[targetNetwork.id];
+  // using constant to avoid creating a new object on every call
+  return contractsData || DEFAULT_ALL_CONTRACTS;
 }