create-stylus 0.0.5

package/templates/base/packages/nextjs/hooks/scaffold-eth/useAnimationConfig.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+const ANIMATION_TIME = 2000;
+
+export function useAnimationConfig(data: any) {
+  const [showAnimation, setShowAnimation] = useState(false);
+  const [prevData, setPrevData] = useState();
+
+  useEffect(() => {
+    if (prevData !== undefined && prevData !== data) {
+      setShowAnimation(true);
+      setTimeout(() => setShowAnimation(false), ANIMATION_TIME);
+    }
+    setPrevData(data);
+  }, [data, prevData]);
+
+  return {
+    showAnimation,
+  };
+}

package/templates/base/packages/nextjs/hooks/scaffold-eth/useContractLogs.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { useTargetNetwork } from "./useTargetNetwork";
+import { Address, Log } from "viem";
+import { usePublicClient } from "wagmi";
+
+export const useContractLogs = (address: Address) => {
+  const [logs, setLogs] = useState<Log[]>([]);
+  const { targetNetwork } = useTargetNetwork();
+  const client = usePublicClient({ chainId: targetNetwork.id });
+
+  useEffect(() => {
+    const fetchLogs = async () => {
+      if (!client) return console.error("Client not found");
+      try {
+        const existingLogs = await client.getLogs({
+          address: address,
+          fromBlock: 0n,
+          toBlock: "latest",
+        });
+        setLogs(existingLogs);
+      } catch (error) {
+        console.error("Failed to fetch logs:", error);
+      }
+    };
+    fetchLogs();
+
+    return client?.watchBlockNumber({
+      onBlockNumber: async (_blockNumber, prevBlockNumber) => {
+        const newLogs = await client.getLogs({
+          address: address,
+          fromBlock: prevBlockNumber,
+          toBlock: "latest",
+        });
+        setLogs(prevLogs => [...prevLogs, ...newLogs]);
+      },
+    });
+  }, [address, client]);
+
+  return logs;
+};

package/templates/base/packages/nextjs/hooks/scaffold-eth/useCopyToClipboard.ts

@@ -0,0 +1,19 @@
+import { useState } from "react";
+
+export const useCopyToClipboard = () => {
+  const [isCopiedToClipboard, setIsCopiedToClipboard] = useState(false);
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setIsCopiedToClipboard(true);
+      setTimeout(() => {
+        setIsCopiedToClipboard(false);
+      }, 800);
+    } catch (err) {
+      console.error("Failed to copy text:", err);
+    }
+  };
+
+  return { copyToClipboard, isCopiedToClipboard };
+};

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

@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import { useIsMounted } from "usehooks-ts";
+import { usePublicClient } from "wagmi";
+import { useSelectedNetwork } from "~~/hooks/scaffold-eth";
+import {
+  Contract,
+  ContractCodeStatus,
+  ContractName,
+  UseDeployedContractConfig,
+  contracts,
+} from "~~/utils/scaffold-eth/contract";
+
+type DeployedContractData<TContractName extends ContractName> = {
+  data: Contract<TContractName> | undefined;
+  isLoading: boolean;
+};
+
+/**
+ * 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 function useDeployedContractInfo<TContractName extends ContractName>(
+  config: UseDeployedContractConfig<TContractName>,
+): DeployedContractData<TContractName>;
+/**
+ * @deprecated Use object parameter version instead: useDeployedContractInfo({ contractName: "YourContract" })
+ */
+export function useDeployedContractInfo<TContractName extends ContractName>(
+  contractName: TContractName,
+): DeployedContractData<TContractName>;
+
+export function useDeployedContractInfo<TContractName extends ContractName>(
+  configOrName: UseDeployedContractConfig<TContractName> | TContractName,
+): DeployedContractData<TContractName> {
+  const isMounted = useIsMounted();
+
+  const finalConfig: UseDeployedContractConfig<TContractName> =
+    typeof configOrName === "string" ? { contractName: configOrName } : (configOrName as any);
+
+  useEffect(() => {
+    if (typeof configOrName === "string") {
+      console.warn(
+        "Using `useDeployedContractInfo` with a string parameter is deprecated. Please use the object parameter version instead.",
+      );
+    }
+  }, [configOrName]);
+  const { contractName, chainId } = finalConfig;
+  const selectedNetwork = useSelectedNetwork(chainId);
+  const deployedContract = contracts?.[selectedNetwork.id]?.[contractName as ContractName] as Contract<TContractName>;
+  const [status, setStatus] = useState<ContractCodeStatus>(ContractCodeStatus.LOADING);
+  const publicClient = usePublicClient({ chainId: selectedNetwork.id });
+
+  useEffect(() => {
+    const checkContractDeployment = async () => {
+      try {
+        if (!isMounted() || !publicClient) return;
+
+        if (!deployedContract) {
+          setStatus(ContractCodeStatus.NOT_FOUND);
+          return;
+        }
+
+        const code = await publicClient.getBytecode({
+          address: deployedContract.address,
+        });
+
+        // If contract code is `0x` => no contract deployed on that address
+        if (code === "0x") {
+          setStatus(ContractCodeStatus.NOT_FOUND);
+          return;
+        }
+        setStatus(ContractCodeStatus.DEPLOYED);
+      } catch (e) {
+        console.error(e);
+        setStatus(ContractCodeStatus.NOT_FOUND);
+      }
+    };
+
+    checkContractDeployment();
+  }, [isMounted, contractName, deployedContract, publicClient]);
+
+  return {
+    data: status === ContractCodeStatus.DEPLOYED ? deployedContract : undefined,
+    isLoading: status === ContractCodeStatus.LOADING,
+  };
+}

package/templates/base/packages/nextjs/hooks/scaffold-eth/useDisplayUsdMode.ts

@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useState } from "react";
+import { useGlobalState } from "~~/services/store/store";
+
+export const useDisplayUsdMode = ({ defaultUsdMode = false }: { defaultUsdMode?: boolean }) => {
+  const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrency.price);
+  const isPriceFetched = nativeCurrencyPrice > 0;
+  const predefinedUsdMode = isPriceFetched ? Boolean(defaultUsdMode) : false;
+  const [displayUsdMode, setDisplayUsdMode] = useState(predefinedUsdMode);
+
+  useEffect(() => {
+    setDisplayUsdMode(predefinedUsdMode);
+  }, [predefinedUsdMode]);
+
+  const toggleDisplayUsdMode = useCallback(() => {
+    if (isPriceFetched) {
+      setDisplayUsdMode(!displayUsdMode);
+    }
+  }, [displayUsdMode, isPriceFetched]);
+
+  return { displayUsdMode, toggleDisplayUsdMode };
+};

package/templates/base/packages/nextjs/hooks/scaffold-eth/useFetchBlocks.ts

@@ -0,0 +1,133 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  Block,
+  Hash,
+  Transaction,
+  TransactionReceipt,
+  createTestClient,
+  publicActions,
+  walletActions,
+  webSocket,
+} from "viem";
+import { decodeTransactionData } from "~~/utils/scaffold-eth";
+import { arbitrumNitro } from "~~/utils/scaffold-stylus/chain";
+
+const BLOCKS_PER_PAGE = 20;
+
+export const testClient = createTestClient({
+  chain: arbitrumNitro,
+  mode: "hardhat",
+  transport: webSocket("ws://127.0.0.1:8547"),
+})
+  .extend(publicActions)
+  .extend(walletActions);
+
+export const useFetchBlocks = () => {
+  const [blocks, setBlocks] = useState<Block[]>([]);
+  const [transactionReceipts, setTransactionReceipts] = useState<{
+    [key: string]: TransactionReceipt;
+  }>({});
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalBlocks, setTotalBlocks] = useState(0n);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchBlocks = useCallback(async () => {
+    setError(null);
+
+    try {
+      const blockNumber = await testClient.getBlockNumber();
+      setTotalBlocks(blockNumber);
+
+      const startingBlock = blockNumber - BigInt(currentPage * BLOCKS_PER_PAGE);
+      const blockNumbersToFetch = Array.from(
+        { length: Number(BLOCKS_PER_PAGE < startingBlock + 1n ? BLOCKS_PER_PAGE : startingBlock + 1n) },
+        (_, i) => startingBlock - BigInt(i),
+      );
+
+      const blocksWithTransactions = blockNumbersToFetch.map(async blockNumber => {
+        try {
+          return testClient.getBlock({ blockNumber, includeTransactions: true });
+        } catch (err) {
+          setError(err instanceof Error ? err : new Error("An error occurred."));
+          throw err;
+        }
+      });
+      const fetchedBlocks = await Promise.all(blocksWithTransactions);
+
+      fetchedBlocks.forEach(block => {
+        block.transactions.forEach(tx => decodeTransactionData(tx as Transaction));
+      });
+
+      const txReceipts = await Promise.all(
+        fetchedBlocks.flatMap(block =>
+          block.transactions.map(async tx => {
+            try {
+              const receipt = await testClient.getTransactionReceipt({ hash: (tx as Transaction).hash });
+              return { [(tx as Transaction).hash]: receipt };
+            } catch (err) {
+              setError(err instanceof Error ? err : new Error("An error occurred."));
+              throw err;
+            }
+          }),
+        ),
+      );
+
+      setBlocks(fetchedBlocks);
+      setTransactionReceipts(prevReceipts => ({ ...prevReceipts, ...Object.assign({}, ...txReceipts) }));
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("An error occurred."));
+    }
+  }, [currentPage]);
+
+  useEffect(() => {
+    fetchBlocks();
+  }, [fetchBlocks]);
+
+  useEffect(() => {
+    const handleNewBlock = async (newBlock: any) => {
+      try {
+        if (currentPage === 0) {
+          if (newBlock.transactions.length > 0) {
+            const transactionsDetails = await Promise.all(
+              newBlock.transactions.map((txHash: string) => testClient.getTransaction({ hash: txHash as Hash })),
+            );
+            newBlock.transactions = transactionsDetails;
+          }
+
+          newBlock.transactions.forEach((tx: Transaction) => decodeTransactionData(tx as Transaction));
+
+          const receipts = await Promise.all(
+            newBlock.transactions.map(async (tx: Transaction) => {
+              try {
+                const receipt = await testClient.getTransactionReceipt({ hash: (tx as Transaction).hash });
+                return { [(tx as Transaction).hash]: receipt };
+              } catch (err) {
+                setError(err instanceof Error ? err : new Error("An error occurred fetching receipt."));
+                throw err;
+              }
+            }),
+          );
+
+          setBlocks(prevBlocks => [newBlock, ...prevBlocks.slice(0, BLOCKS_PER_PAGE - 1)]);
+          setTransactionReceipts(prevReceipts => ({ ...prevReceipts, ...Object.assign({}, ...receipts) }));
+        }
+        if (newBlock.number) {
+          setTotalBlocks(newBlock.number);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("An error occurred."));
+      }
+    };
+
+    return testClient.watchBlocks({ onBlock: handleNewBlock, includeTransactions: true });
+  }, [currentPage]);
+
+  return {
+    blocks,
+    transactionReceipts,
+    currentPage,
+    totalBlocks,
+    setCurrentPage,
+    error,
+  };
+};

package/templates/base/packages/nextjs/hooks/scaffold-eth/useInitializeNativeCurrencyPrice.ts

@@ -0,0 +1,32 @@
+import { useCallback, useEffect } from "react";
+import { useTargetNetwork } from "./useTargetNetwork";
+import { useInterval } from "usehooks-ts";
+import scaffoldConfig from "~~/scaffold.config";
+import { useGlobalState } from "~~/services/store/store";
+import { fetchPriceFromUniswap } from "~~/utils/scaffold-eth";
+
+const enablePolling = false;
+
+/**
+ * Get the price of Native Currency based on Native Token/DAI trading pair from Uniswap SDK
+ */
+export const useInitializeNativeCurrencyPrice = () => {
+  const setNativeCurrencyPrice = useGlobalState(state => state.setNativeCurrencyPrice);
+  const setIsNativeCurrencyFetching = useGlobalState(state => state.setIsNativeCurrencyFetching);
+  const { targetNetwork } = useTargetNetwork();
+
+  const fetchPrice = useCallback(async () => {
+    setIsNativeCurrencyFetching(true);
+    const price = await fetchPriceFromUniswap(targetNetwork);
+    setNativeCurrencyPrice(price);
+    setIsNativeCurrencyFetching(false);
+  }, [setIsNativeCurrencyFetching, setNativeCurrencyPrice, targetNetwork]);
+
+  // Get the price of ETH from Uniswap on mount
+  useEffect(() => {
+    fetchPrice();
+  }, [fetchPrice]);
+
+  // Get the price of ETH from Uniswap at a given interval
+  useInterval(fetchPrice, enablePolling ? scaffoldConfig.pollingInterval : null);
+};

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

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { useTargetNetwork } from "./useTargetNetwork";
+import { useInterval } from "usehooks-ts";
+import scaffoldConfig from "~~/scaffold.config";
+import { fetchPriceFromUniswap } from "~~/utils/scaffold-eth";
+
+const enablePolling = false;
+
+/**
+ * Get the price of Native Currency based on Native Token/DAI trading pair from Uniswap SDK
+ */
+export const useNativeCurrencyPrice = () => {
+  const { targetNetwork } = useTargetNetwork();
+  const [nativeCurrencyPrice, setNativeCurrencyPrice] = useState(0);
+
+  // Get the price of ETH from Uniswap on mount
+  useEffect(() => {
+    (async () => {
+      const price = await fetchPriceFromUniswap(targetNetwork);
+      setNativeCurrencyPrice(price);
+    })();
+  }, [targetNetwork]);
+
+  // Get the price of ETH from Uniswap at a given interval
+  useInterval(
+    async () => {
+      const price = await fetchPriceFromUniswap(targetNetwork);
+      setNativeCurrencyPrice(price);
+    },
+    enablePolling ? scaffoldConfig.pollingInterval : null,
+  );
+
+  return nativeCurrencyPrice;
+};

package/templates/base/packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts

@@ -0,0 +1,22 @@
+import { useTheme } from "next-themes";
+import { useSelectedNetwork } from "~~/hooks/scaffold-eth";
+import { AllowedChainIds, ChainWithAttributes } from "~~/utils/scaffold-stylus";
+
+export const DEFAULT_NETWORK_COLOR: [string, string] = ["#666666", "#bbbbbb"];
+
+export function getNetworkColor(network: ChainWithAttributes, isDarkMode: boolean) {
+  const colorConfig = network.color ?? DEFAULT_NETWORK_COLOR;
+  return Array.isArray(colorConfig) ? (isDarkMode ? colorConfig[1] : colorConfig[0]) : colorConfig;
+}
+
+/**
+ * Gets the color of the target network
+ */
+export const useNetworkColor = (chainId?: AllowedChainIds) => {
+  const { resolvedTheme } = useTheme();
+
+  const chain = useSelectedNetwork(chainId);
+  const isDarkMode = resolvedTheme === "dark";
+
+  return getNetworkColor(chain, isDarkMode);
+};

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

@@ -0,0 +1,23 @@
+import React, { useEffect } from "react";
+
+/**
+ * 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 | null>, callback: { (): void }) => {
+  useEffect(() => {
+    function handleOutsideClick(event: MouseEvent) {
+      if (!(event.target instanceof Element)) {
+        return;
+      }
+
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    }
+
+    document.addEventListener("click", handleOutsideClick);
+    return () => document.removeEventListener("click", handleOutsideClick);
+  }, [ref, callback]);
+};

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

@@ -0,0 +1,65 @@
+import { Account, Address, Chain, Client, Transport, getContract } from "viem";
+import { usePublicClient } from "wagmi";
+import { GetWalletClientReturnType } from "wagmi/actions";
+import { useSelectedNetwork } from "~~/hooks/scaffold-eth";
+import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
+import { AllowedChainIds } from "~~/utils/scaffold-stylus";
+import { Contract, ContractName } from "~~/utils/scaffold-eth/contract";
+
+/**
+ * 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
+ * @param config.chainId - optional chainId that is configured with the scaffold project to make use for multi-chain interactions.
+ */
+export const useScaffoldContract = <
+  TContractName extends ContractName,
+  TWalletClient extends Exclude<GetWalletClientReturnType, null> | undefined,
+>({
+  contractName,
+  walletClient,
+  chainId,
+}: {
+  contractName: TContractName;
+  walletClient?: TWalletClient | null;
+  chainId?: AllowedChainIds;
+}) => {
+  const selectedNetwork = useSelectedNetwork(chainId);
+  const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo({
+    contractName,
+    chainId: selectedNetwork?.id as AllowedChainIds,
+  });
+
+  const publicClient = usePublicClient({ chainId: selectedNetwork?.id });
+
+  let contract = undefined;
+  if (deployedContractData && publicClient) {
+    contract = getContract<
+      Transport,
+      Address,
+      Contract<TContractName>["abi"],
+      TWalletClient extends Exclude<GetWalletClientReturnType, null>
+        ? {
+            public: Client<Transport, Chain>;
+            wallet: TWalletClient;
+          }
+        : { public: Client<Transport, Chain> },
+      Chain,
+      Account
+    >({
+      address: deployedContractData.address,
+      abi: deployedContractData.abi as Contract<TContractName>["abi"],
+      client: {
+        public: publicClient,
+        wallet: walletClient ? walletClient : undefined,
+      } as any,
+    });
+  }
+
+  return {
+    data: contract,
+    isLoading: deployedContractLoading,
+  };
+};