replace components with scaffold-ui (#1136)

Author: technophile-04

packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx

@@ -1,7 +1,11 @@
+"use client";
+
 import { BackButton } from "./BackButton";
 import { ContractTabs } from "./ContractTabs";
+import { Address, Balance } from "@scaffold-ui/components";
 import { Address as AddressType } from "viem";
-import { Address, Balance } from "~~/components/scaffold-eth";
+import { hardhat } from "viem/chains";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth";
 
 export const AddressComponent = ({
   address,
@@ -10,6 +14,7 @@ export const AddressComponent = ({
   address: AddressType;
   contractData: { bytecode: string; assembly: string } | null;
 }) => {
+  const { targetNetwork } = useTargetNetwork();
   return (
     <div className="m-10 mb-20">
       <div className="flex justify-start mb-5">
@@ -20,10 +25,17 @@ export const AddressComponent = ({
           <div className="bg-base-100 border-base-300 border shadow-md shadow-secondary rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4 overflow-x-auto">
             <div className="flex">
               <div className="flex flex-col gap-1">
-                <Address address={address} format="long" onlyEnsOrAddress />
+                <Address
+                  address={address}
+                  format="long"
+                  onlyEnsOrAddress
+                  blockExplorerAddressLink={
+                    targetNetwork.id === hardhat.id ? `/blockexplorer/address/${address}` : undefined
+                  }
+                />
                 <div className="flex gap-1 items-center">
                   <span className="font-bold text-sm">Balance:</span>
-                  <Balance address={address} className="text" />
+                  <Balance address={address} />
                 </div>
               </div>
             </div>

packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx

@@ -1,6 +1,7 @@
 import { TransactionHash } from "./TransactionHash";
+import { Address } from "@scaffold-ui/components";
 import { formatEther } from "viem";
-import { Address } from "~~/components/scaffold-eth";
+import { hardhat } from "viem/chains";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { TransactionWithFunction } from "~~/utils/scaffold-eth";
 import { TransactionsTableProps } from "~~/utils/scaffold-eth/";
@@ -44,14 +45,39 @@ export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsT
                     <td className="w-1/12 md:py-4">{block.number?.toString()}</td>
                     <td className="w-2/12 md:py-4">{timeMined}</td>
                     <td className="w-2/12 md:py-4">
-                      <Address address={tx.from} size="sm" onlyEnsOrAddress />
+                      <Address
+                        address={tx.from}
+                        size="sm"
+                        onlyEnsOrAddress
+                        blockExplorerAddressLink={
+                          targetNetwork.id === hardhat.id ? `/blockexplorer/address/${tx.from}` : undefined
+                        }
+                      />
                     </td>
                     <td className="w-2/12 md:py-4">
                       {!receipt?.contractAddress ? (
-                        tx.to && <Address address={tx.to} size="sm" onlyEnsOrAddress />
+                        tx.to && (
+                          <Address
+                            address={tx.to}
+                            size="sm"
+                            onlyEnsOrAddress
+                            blockExplorerAddressLink={
+                              targetNetwork.id === hardhat.id ? `/blockexplorer/address/${tx.to}` : undefined
+                            }
+                          />
+                        )
                       ) : (
                         <div className="relative">
-                          <Address address={receipt.contractAddress} size="sm" onlyEnsOrAddress />
+                          <Address
+                            address={receipt.contractAddress}
+                            size="sm"
+                            onlyEnsOrAddress
+                            blockExplorerAddressLink={
+                              targetNetwork.id === hardhat.id
+                                ? `/blockexplorer/address/${receipt.contractAddress}`
+                                : undefined
+                            }
+                          />
                           <small className="absolute top-4 left-4">(Contract Creation)</small>
                         </div>
                       )}

packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx

@@ -2,10 +2,10 @@
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+import { Address } from "@scaffold-ui/components";
 import { Hash, Transaction, TransactionReceipt, formatEther, formatUnits } from "viem";
 import { hardhat } from "viem/chains";
 import { usePublicClient } from "wagmi";
-import { Address } from "~~/components/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { decodeTransactionData, getFunctionDetails } from "~~/utils/scaffold-eth";
 import { replacer } from "~~/utils/scaffold-eth/common";
@@ -64,7 +64,14 @@ const TransactionComp = ({ txHash }: { txHash: Hash }) => {
                   <strong>From:</strong>
                 </td>
                 <td>
-                  <Address address={transaction.from} format="long" onlyEnsOrAddress />
+                  <Address
+                    address={transaction.from}
+                    format="long"
+                    onlyEnsOrAddress
+                    blockExplorerAddressLink={
+                      targetNetwork.id === hardhat.id ? `/blockexplorer/address/${transaction.from}` : undefined
+                    }
+                  />
                 </td>
               </tr>
               <tr>
@@ -73,11 +80,29 @@ const TransactionComp = ({ txHash }: { txHash: Hash }) => {
                 </td>
                 <td>
                   {!receipt?.contractAddress ? (
-                    transaction.to && <Address address={transaction.to} format="long" onlyEnsOrAddress />
+                    transaction.to && (
+                      <Address
+                        address={transaction.to}
+                        format="long"
+                        onlyEnsOrAddress
+                        blockExplorerAddressLink={
+                          targetNetwork.id === hardhat.id ? `/blockexplorer/address/${transaction.to}` : undefined
+                        }
+                      />
+                    )
                   ) : (
                     <span>
                       Contract Creation:
-                      <Address address={receipt.contractAddress} format="long" onlyEnsOrAddress />
+                      <Address
+                        address={receipt.contractAddress}
+                        format="long"
+                        onlyEnsOrAddress
+                        blockExplorerAddressLink={
+                          targetNetwork.id === hardhat.id
+                            ? `/blockexplorer/address/${receipt.contractAddress}`
+                            : undefined
+                        }
+                      />
                     </span>
                   )}
                 </td>

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

@@ -0,0 +1,38 @@
+"use client";
+
+// @refresh reset
+import { Contract } from "@scaffold-ui/debug-contracts";
+import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { ContractName } from "~~/utils/scaffold-eth/contract";
+
+type ContractUIProps = {
+  contractName: ContractName;
+  className?: string;
+};
+
+/**
+ * UI component to interface with deployed contracts.
+ **/
+export const ContractUI = ({ contractName }: ContractUIProps) => {
+  const { targetNetwork } = useTargetNetwork();
+  const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo({ contractName });
+
+  if (deployedContractLoading) {
+    return (
+      <div className="mt-14">
+        <span className="loading loading-spinner loading-lg"></span>
+      </div>
+    );
+  }
+
+  if (!deployedContractData) {
+    return (
+      <p className="text-3xl mt-14">
+        No contract found by the name of {contractName} on chain {targetNetwork.name}!
+      </p>
+    );
+  }
+
+  return <Contract contractName={contractName as string} contract={deployedContractData} chainId={targetNetwork.id} />;
+};

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

@@ -1,9 +1,10 @@
 "use client";
 
 import { useEffect, useMemo } from "react";
+import { ContractUI } from "./ContractUI";
+import "@scaffold-ui/debug-contracts/styles.css";
 import { useSessionStorage } from "usehooks-ts";
 import { BarsArrowUpIcon } from "@heroicons/react/20/solid";
-import { ContractUI } from "~~/app/debug/_components/contract";
 import { ContractName, GenericContract } from "~~/utils/scaffold-eth/contract";
 import { useAllContracts } from "~~/utils/scaffold-eth/contractsData";
 
@@ -59,13 +60,10 @@ export function DebugContracts() {
               ))}
             </div>
           )}
-          {contractNames.map(contractName => (
-            <ContractUI
-              key={contractName}
-              contractName={contractName}
-              className={contractName === selectedContract ? "" : "hidden"}
-            />
-          ))}
+          {contractNames.map(
+            contractName =>
+              contractName === selectedContract && <ContractUI key={contractName} contractName={contractName} />,
+          )}
         </>
       )}
     </div>