backmerge latest main changes to cli (#571)

* Tweak DaisyUI `link` (#560)

* Improve ENS support (accept all TLDs) (#563)

* fix: memo history events (#565)

* update developer guide with backmerge-main instructions

* add changeset

---------

Co-authored-by: Carlos Sánchez <oceanrdn@gmail.com>
Co-authored-by: Filip Harald <Filip.harald@gmail.com>
Co-authored-by: Greg <35093316+gskril@users.noreply.github.com>
Co-authored-by: Rinat <rinat@hey.com>
Co-authored-by: Carlos Sánchez <oceanrdn@gmail.com>

.changeset/polite-carrots-smash.md

@@ -0,0 +1,11 @@
+---
+"create-eth": patch
+---
+
+Tweak DaisyUI link (#560)
+
+Improve ENS support (accept all TLDs) (#563)
+
+fix: memo history events (#565)
+
+update DEVELOPER-GUIDE.md with backmerge-main instructions

contributors/DEVELOPER-GUIDE.md

@@ -54,3 +54,20 @@ There are some files that are not just copied, but generated from the CLI using
 Once you're happy with the file contents, you'd need to reverse-engineer the changes needed in this project's `template/` folder. To make it easier to figure out what to change, we generate sibling files to any of these special ones, with the exact same name but adding `*.dev` to them.
 
 For example, `generated.txt` would have a sibling `generated.txt.dev` file with information about the "template" and "args" files that contributed to the current result.
+
+## Back-merging main branch / Publishing to NPM
+
+1. Make sure you have the latest changes from `main` branch
+2. Checkout to `cli` branch and create a new branch from it eg: `cli-backmerge`
+3. Checkout to `cli-backmerge` branch and `git merge main`
+4. If there are any conflicts, resolve them and commit the changes
+5. Add changeset by doing `yarn changeset add` follow prompt and commit changes, learn more about changeset [here](https://github.com/scaffold-eth/scaffold-eth-2/blob/cli/CONTRIBUTING.md#changeset)
+6. Push the branch and create a PR against `cli` branch
+
+### Publishing to NPM
+
+Once the previous PR containing `changeset` is merged to `cli` branch, github bot will automatically create a new PR against `cli` branch containing version increment in `package.json` based on `changeset` and will also update `CHANGELOG.md` with respective `changesets` present.
+
+After this GH bot PR is merged to `cli`. It will auto publish a new release to NPM.
+
+> NOTE: Even after resolving conflicts and merging `cli-backmerge` to `cli` branch, you see will conflicts not being resolved in `cli` as compared to `main` branch and for that you need to directly push an extra commit to `cli` branch merging main into cli.

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

@@ -33,12 +33,7 @@ export const Footer = () => {
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">
             <div className="text-center">
-              <a
-                href="https://github.com/scaffold-eth/se-2"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2"
-              >
+              <a href="https://github.com/scaffold-eth/se-2" target="_blank" rel="noreferrer" className="link">
                 Fork me
               </a>
             </div>
@@ -54,17 +49,12 @@ export const Footer = () => {
                 rel="noreferrer"
               >
                 <BuidlGuidlLogo className="w-3 h-5 pb-1" />
-                <span className="underline underline-offset-2">BuidlGuidl</span>
+                <span className="link">BuidlGuidl</span>
               </a>
             </div>
             <span>·</span>
             <div className="text-center">
-              <a
-                href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2"
-              >
+              <a href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer" className="link">
                 Support
               </a>
             </div>

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

@@ -1,28 +1,34 @@
 import { useCallback, useEffect, useState } from "react";
 import { blo } from "blo";
-import { isAddress } from "viem";
-import { Address } from "viem";
+import { useDebounce } from "usehooks-ts";
+import { Address, isAddress } from "viem";
 import { useEnsAddress, useEnsAvatar, useEnsName } from "wagmi";
-import { CommonInputProps, InputBase } from "~~/components/scaffold-eth";
-
-// ToDo:  move this function to an utility file
-const isENS = (address = "") => address.endsWith(".eth") || address.endsWith(".xyz");
+import { CommonInputProps, InputBase, isENS } from "~~/components/scaffold-eth";
 
 /**
  * Address input with ENS name resolution
  */
 export const AddressInput = ({ value, name, placeholder, onChange, disabled }: CommonInputProps<Address | string>) => {
+  // Debounce the input to keep clean RPC calls when resolving ENS names
+  // If the input is an address, we don't need to debounce it
+  const _debouncedValue = useDebounce(value, 500);
+  const debouncedValue = isAddress(value) ? value : _debouncedValue;
+  const isDebouncedValueLive = debouncedValue === value;
+
+  // If the user changes the input after an ENS name is already resolved, we want to remove the stale result
+  const settledValue = isDebouncedValueLive ? debouncedValue : undefined;
+
   const { data: ensAddress, isLoading: isEnsAddressLoading } = useEnsAddress({
-    name: value,
-    enabled: isENS(value),
+    name: settledValue,
+    enabled: isENS(debouncedValue),
     chainId: 1,
     cacheTime: 30_000,
   });
 
   const [enteredEnsName, setEnteredEnsName] = useState<string>();
   const { data: ensName, isLoading: isEnsNameLoading } = useEnsName({
-    address: value,
-    enabled: isAddress(value),
+    address: settledValue,
+    enabled: isAddress(debouncedValue),
     chainId: 1,
     cacheTime: 30_000,
   });
@@ -39,9 +45,9 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
     if (!ensAddress) return;
 
     // ENS resolved successfully
-    setEnteredEnsName(value);
+    setEnteredEnsName(debouncedValue);
     onChange(ensAddress);
-  }, [ensAddress, onChange, value]);
+  }, [ensAddress, onChange, debouncedValue]);
 
   const handleChange = useCallback(
     (newValue: Address) => {

templates/base/packages/nextjs/components/scaffold-eth/Input/utils.ts

@@ -105,3 +105,7 @@ export const isValidInteger = (dataType: IntegerVariant, value: bigint | string,
   }
   return true;
 };
+
+// Treat any dot-separated string as a potential ENS name
+const ensRegex = /.+\..+/;
+export const isENS = (address = "") => ensRegex.test(address);

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Abi, AbiEvent, ExtractAbiEventNames } from "abitype";
 import { Hash } from "viem";
 import { usePublicClient } from "wagmi";
@@ -108,14 +108,20 @@ export const useScaffoldEventHistory = <
     receiptData,
   ]);
 
+  const eventHistoryData = useMemo(
+    () =>
+      events?.map(addIndexedArgsToEvent) as UseScaffoldEventHistoryData<
+        TContractName,
+        TEventName,
+        TBlockData,
+        TTransactionData,
+        TReceiptData
+      >,
+    [events],
+  );
+
   return {
-    data: events?.map(addIndexedArgsToEvent) as UseScaffoldEventHistoryData<
-      TContractName,
-      TEventName,
-      TBlockData,
-      TTransactionData,
-      TReceiptData
-    >,
+    data: eventHistoryData,
     isLoading: isLoading,
     error: error,
   };

templates/base/packages/nextjs/tailwind.config.js

@@ -30,6 +30,12 @@ module.exports = {
           ".tooltip": {
             "--tooltip-tail": "6px",
           },
+          ".link": {
+            textUnderlineOffset: "2px",
+          },
+          ".link:hover": {
+            opacity: "80%",
+          },
         },
       },
       {
@@ -57,6 +63,12 @@ module.exports = {
             "--tooltip-tail": "6px",
             "--tooltip-color": "hsl(var(--p))",
           },
+          ".link": {
+            textUnderlineOffset: "2px",
+          },
+          ".link:hover": {
+            opacity: "80%",
+          },
         },
       },
       {