Merge branch 'feature/fix-eoa-contract-display' into develop

src/AddressTransactions.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, useCallback } from "react";
+import React, { useEffect, useContext, useCallback, useMemo } from "react";
 import {
   useParams,
   useNavigate,
@@ -21,8 +21,9 @@ import Contracts from "./address/Contracts";
 import { RuntimeContext } from "./useRuntime";
 import { useAppConfigContext } from "./useAppConfig";
 import { useAddressOrENSFromURL } from "./useResolvedAddresses";
-import { useSingleMetadata } from "./sourcify/useSourcify";
+import { useMultipleMetadata } from "./sourcify/useSourcify";
 import { ChecksummedAddress } from "./types";
+import { useAddressesWithCode } from "./useErigonHooks";
 
 const AddressTransactions: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
@@ -58,11 +59,24 @@ const AddressTransactions: React.FC = () => {
   }, [addressOrName, checksummedAddress, isENS]);
 
   const { sourcifySource } = useAppConfigContext();
-  const addressMetadata = useSingleMetadata(
+  const checksummedAddressAsArray = useMemo(
-    checksummedAddress,
+    () => (checksummedAddress !== undefined ? [checksummedAddress] : []),
+    [checksummedAddress]
+  );
+  const contractAddresses = useAddressesWithCode(
+    provider,
+    checksummedAddressAsArray
+  );
+  const metadatas = useMultipleMetadata(
+    undefined,
+    contractAddresses,
     provider?.network.chainId,
     sourcifySource
   );
+  const addressMetadata =
+    checksummedAddress !== undefined
+      ? metadatas[checksummedAddress]
+      : undefined;
 
   return (
     <StandardFrame>
@@ -94,34 +108,34 @@ const AddressTransactions: React.FC = () => {
             </StandardSubtitle>
             <Tab.Group>
               <Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
-                <NavTab href={`/address/${checksummedAddress}`}>
+                <NavTab href={`/address/${addressOrName}`}>Overview</NavTab>
-                  Overview
+                {(contractAddresses?.length ?? 0) > 0 && (
-                </NavTab>
+                  <NavTab href={`/address/${addressOrName}/contract`}>
-                <NavTab href={`/address/${checksummedAddress}/contract`}>
+                    <span
-                  <span
+                      className={`flex items-baseline space-x-2 ${
-                    className={`flex items-baseline space-x-2 ${
+                        addressMetadata === undefined ? "italic opacity-50" : ""
-                      addressMetadata === undefined ? "italic opacity-50" : ""
+                      }`}
-                    }`}
+                    >
-                  >
+                      <span>Contract</span>
-                    <span>Contract</span>
+                      {addressMetadata === undefined ? (
-                    {addressMetadata === undefined ? (
+                        <span className="self-center">
-                      <span className="self-center">
+                          <FontAwesomeIcon
-                        <FontAwesomeIcon
+                            className="animate-spin"
-                          className="animate-spin"
+                            icon={faCircleNotch}
-                          icon={faCircleNotch}
+                          />
-                        />
+                        </span>
-                      </span>
+                      ) : addressMetadata === null ? (
-                    ) : addressMetadata === null ? (
+                        <span className="self-center text-red-500">
-                      <span className="self-center text-red-500">
+                          <FontAwesomeIcon icon={faQuestionCircle} />
-                        <FontAwesomeIcon icon={faQuestionCircle} />
+                        </span>
-                      </span>
+                      ) : (
-                    ) : (
+                        <span className="self-center">
-                      <span className="self-center">
+                          <SourcifyLogo />
-                        <SourcifyLogo />
+                        </span>
-                      </span>
+                      )}
-                    )}
+                    </span>
-                  </span>
+                  </NavTab>
-                </NavTab>
+                )}
               </Tab.List>
               <Tab.Panels>
                 <Routes>
@@ -142,7 +156,12 @@ const AddressTransactions: React.FC = () => {
                     element={
                       <Contracts
                         checksummedAddress={checksummedAddress}
-                        rawMetadata={addressMetadata}
+                        rawMetadata={
+                          contractAddresses !== undefined &&
+                          contractAddresses.length === 0
+                            ? null
+                            : addressMetadata
+                        }
                       />
                     }
                   />

src/address/AddressTransactionResults.tsx

@@ -114,6 +114,9 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
         if (t.to) {
           _addresses.push(t.to);
         }
+        if (t.createdContractAddress) {
+          _addresses.push(t.createdContractAddress);
+        }
       }
     }
     return _addresses;

src/block/BlockTransactionResults.tsx

@@ -40,7 +40,16 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
       return [];
     }
 
-    return page.map((t) => t.to).filter((to): to is string => to !== undefined);
+    const _addresses: ChecksummedAddress[] = [];
+    for (const t of page) {
+      if (t.to) {
+        _addresses.push(t.to);
+      }
+      if (t.createdContractAddress) {
+        _addresses.push(t.createdContractAddress);
+      }
+    }
+    return _addresses;
   }, [page]);
   const metadatas = useContractsMetadata(addresses, provider);
 

src/hooks.ts

@@ -1,13 +1,19 @@
+import { useMemo } from "react";
 import { JsonRpcProvider } from "@ethersproject/providers";
 import { ChecksummedAddress } from "./types";
-import {
+import { Metadata, useMultipleMetadata } from "./sourcify/useSourcify";
-  Metadata,
-  useDedupedAddresses,
-  useMultipleMetadata,
-} from "./sourcify/useSourcify";
 import { useAppConfigContext } from "./useAppConfig";
 import { useAddressesWithCode } from "./useErigonHooks";
 
+export const useDedupedAddresses = (
+  addresses: ChecksummedAddress[]
+): ChecksummedAddress[] => {
+  return useMemo(() => {
+    const deduped = new Set(addresses);
+    return [...deduped];
+  }, [addresses]);
+};
+
 export const useContractsMetadata = (
   addresses: ChecksummedAddress[],
   provider: JsonRpcProvider | undefined,

src/search/TransactionItem.tsx

@@ -99,7 +99,10 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
           />
         </span>
       </span>
-      <span className="col-span-2 flex items-baseline" title={tx.to}>
+      <span
+        className="col-span-2 flex items-baseline"
+        title={tx.to ?? tx.createdContractAddress}
+      >
         <span className="truncate">
           {tx.to ? (
             <AddressHighlighter address={tx.to}>

src/search/search.ts

@@ -52,7 +52,7 @@ export class SearchController {
           idx: _receipt.transactionIndex,
           hash: t.hash,
           from: t.from,
-          to: t.to,
+          to: t.to ?? null,
           createdContractAddress: _receipt.contractAddress,
           value: t.value,
           fee: _receipt.gasUsed.mul(t.gasPrice!),

src/sourcify/useSourcify.ts

@@ -121,25 +121,6 @@ export const useSourcify = (
   return rawMetadata;
 };
 
-export const useSingleMetadata = (
-  address: ChecksummedAddress | undefined,
-  chainId: number | undefined,
-  source: SourcifySource
-) => {
-  const addresses = useMemo(() => (address ? [address] : []), [address]);
-  const metadatas = useMultipleMetadata(undefined, addresses, chainId, source);
-  return address !== undefined ? metadatas[address] : undefined;
-};
-
-export const useDedupedAddresses = (
-  addresses: ChecksummedAddress[]
-): ChecksummedAddress[] => {
-  return useMemo(() => {
-    const deduped = new Set(addresses);
-    return [...deduped];
-  }, [addresses]);
-};
-
 export const useMultipleMetadata = (
   baseMetadatas: Record<string, Metadata | null> | undefined,
   addresses: ChecksummedAddress[] | undefined,

src/types.ts

@@ -16,7 +16,7 @@ export type ProcessedTransaction = {
   idx: number;
   hash: string;
   from?: string;
-  to?: string;
+  to: string | null;
   createdContractAddress?: string;
   internalMinerInteraction?: boolean;
   value: BigNumber;

src/useErigonHooks.ts

@@ -95,33 +95,38 @@ export const useBlockTransactions = (
       const _receipts = result.receipts;
 
       const rawTxs = _block.transactions
-        .map(
+        .map((t, i): ProcessedTransaction => {
-          (t, i): ProcessedTransaction => ({
+          const _rawReceipt = _receipts[i];
+          // Empty logs on purpose because of ethers formatter requires it
+          _rawReceipt.logs = [];
+          const _receipt = provider.formatter.receipt(_rawReceipt);
+
+          return {
             blockNumber: blockNumber,
             timestamp: _block.timestamp,
             miner: _block.miner,
             idx: i,
             hash: t.hash,
             from: t.from,
-            to: t.to,
+            to: t.to ?? null,
-            createdContractAddress: _receipts[i].contractAddress,
+            createdContractAddress: _receipt.contractAddress,
             value: t.value,
             fee:
               t.type !== 2
                 ? provider.formatter
-                    .bigNumber(_receipts[i].gasUsed)
+                    .bigNumber(_receipt.gasUsed)
                     .mul(t.gasPrice!)
                 : provider.formatter
-                    .bigNumber(_receipts[i].gasUsed)
+                    .bigNumber(_receipt.gasUsed)
                     .mul(t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!)),
             gasPrice:
               t.type !== 2
                 ? t.gasPrice!
                 : t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!),
             data: t.data,
-            status: provider.formatter.number(_receipts[i].status),
+            status: provider.formatter.number(_receipt.status),
-          })
+          };
-        )
+        })
         .reverse();
       setTxs(rawTxs);
       setTotalTxs(result.fullblock.transactionCount);
@@ -457,8 +462,10 @@ export const useAddressesWithCode = (
   const [results, setResults] = useState<ChecksummedAddress[] | undefined>();
 
   useEffect(() => {
+    // Reset
+    setResults(undefined);
+
     if (provider === undefined) {
-      setResults(undefined);
       return;
     }
 

src/useResolvedAddresses.ts

@@ -27,6 +27,11 @@ export const useAddressOrENSFromURL = (
 
   // If it looks like it is an ENS name, try to resolve it
   useEffect(() => {
+    // Reset
+    setENS(false);
+    setError(false);
+    setChecksummedAddress(undefined);
+
     // TODO: handle and offer fallback to bad checksummed addresses
     if (isAddress(addressOrName)) {
       // Normalize to checksummed address
@@ -81,6 +86,9 @@ export const pageCollector =
       if (tx.to) {
         uniqueAddresses.add(tx.to);
       }
+      if (tx.createdContractAddress) {
+        uniqueAddresses.add(tx.createdContractAddress);
+      }
     }
 
     return Array.from(uniqueAddresses);