Initial commit with 🏗️ Scaffold-ETH 2 @ 1.0.5

packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useEffect } from "react";
+import { InheritanceTooltip } from "./InheritanceTooltip";
+import { displayTxResult } from "./utilsDisplay";
+import { Abi, AbiFunction } from "abitype";
+import { Address } from "viem";
+import { useReadContract } from "wagmi";
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import { useAnimationConfig } from "~~/hooks/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { getParsedError, notification } from "~~/utils/scaffold-eth";
+
+type DisplayVariableProps = {
+  contractAddress: Address;
+  abiFunction: AbiFunction;
+  refreshDisplayVariables: boolean;
+  inheritedFrom?: string;
+  abi: Abi;
+};
+
+export const DisplayVariable = ({
+  contractAddress,
+  abiFunction,
+  refreshDisplayVariables,
+  abi,
+  inheritedFrom,
+}: DisplayVariableProps) => {
+  const { targetNetwork } = useTargetNetwork();
+
+  const {
+    data: result,
+    isFetching,
+    refetch,
+    error,
+  } = useReadContract({
+    address: contractAddress,
+    functionName: abiFunction.name,
+    abi: abi,
+    chainId: targetNetwork.id,
+    query: {
+      retry: false,
+    },
+  });
+
+  const { showAnimation } = useAnimationConfig(result);
+
+  useEffect(() => {
+    refetch();
+  }, [refetch, refreshDisplayVariables]);
+
+  useEffect(() => {
+    if (error) {
+      const parsedError = getParsedError(error);
+      notification.error(parsedError);
+    }
+  }, [error]);
+
+  return (
+    <div className="space-y-1 pb-2">
+      <div className="flex items-center">
+        <h3 className="font-medium text-lg mb-0 break-all">{abiFunction.name}</h3>
+        <button className="btn btn-ghost btn-xs" onClick={async () => await refetch()}>
+          {isFetching ? (
+            <span className="loading loading-spinner loading-xs"></span>
+          ) : (
+            <ArrowPathIcon className="h-3 w-3 cursor-pointer" aria-hidden="true" />
+          )}
+        </button>
+        <InheritanceTooltip inheritedFrom={inheritedFrom} />
+      </div>
+      <div className="text-base-content/80 flex flex-col items-start">
+        <div>
+          <div
+            className={`break-all block transition bg-transparent ${
+              showAnimation ? "bg-warning rounded-xs animate-pulse-fast" : ""
+            }`}
+          >
+            {displayTxResult(result)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};