Merge branch 'feature/sourcify-decoration' into develop

nginx/conf.d/default.conf

@@ -118,7 +118,7 @@ server {
         index  index.html;
         try_files $uri /index.html;
 
-        brotli_static on;
+        # brotli_static on;
     }
 
     #error_page  404              /404.html;

nginx/nginx.conf

@@ -4,7 +4,7 @@ worker_processes  auto;
 error_log  /var/log/nginx/error.log notice;
 pid        /var/run/nginx.pid;
 
-load_module modules/ngx_http_brotli_static_module.so;
+#load_module modules/ngx_http_brotli_static_module.so;
 
 events {
     worker_connections  1024;

src/AddressTransactions.tsx

@@ -31,7 +31,8 @@ import { useFeeToggler } from "./search/useFeeToggler";
 import { SelectionContext, useSelection } from "./useSelection";
 import { useMultipleETHUSDOracle } from "./usePriceOracle";
 import { useAppConfigContext } from "./useAppConfig";
-import { useSourcify } from "./useSourcify";
+import { useMultipleMetadata } from "./useSourcify";
+import { ChecksummedAddress } from "./types";
 import SourcifyLogo from "./sourcify.svg";
 
 type BlockParams = {
@@ -181,12 +182,31 @@ const AddressTransactions: React.FC = () => {
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
 
   const selectionCtx = useSelection();
+  const addresses = useMemo(() => {
+    const _addresses: ChecksummedAddress[] = [];
+    if (checksummedAddress) {
+      _addresses.push(checksummedAddress);
+    }
+    if (page) {
+      for (const t of page) {
+        if (t.to) {
+          _addresses.push(t.to);
+        }
+      }
+    }
+    return _addresses;
+  }, [checksummedAddress, page]);
   const { sourcifySource } = useAppConfigContext();
-  const rawMetadata = useSourcify(
+  const metadatas = useMultipleMetadata(
-    checksummedAddress,
+    undefined,
+    addresses,
     provider?.network.chainId,
     sourcifySource
   );
+  const addressMetadata =
+    checksummedAddress !== undefined
+      ? metadatas[checksummedAddress]
+      : undefined;
 
   return (
     <StandardFrame>
@@ -224,18 +244,18 @@ const AddressTransactions: React.FC = () => {
                 <NavTab href={`/address/${checksummedAddress}/contract`}>
                   <span
                     className={`flex items-baseline space-x-2 ${
-                      rawMetadata === undefined ? "italic opacity-50" : ""
+                      addressMetadata === undefined ? "italic opacity-50" : ""
                     }`}
                   >
                     <span>Contract</span>
-                    {rawMetadata === undefined ? (
+                    {addressMetadata === undefined ? (
                       <span className="self-center">
                         <FontAwesomeIcon
                           className="animate-spin"
                           icon={faCircleNotch}
                         />
                       </span>
-                    ) : rawMetadata === null ? (
+                    ) : addressMetadata === null ? (
                       <span className="self-center text-red-500">
                         <FontAwesomeIcon icon={faQuestionCircle} />
                       </span>
@@ -288,6 +308,7 @@ const AddressTransactions: React.FC = () => {
                               selectedAddress={checksummedAddress}
                               feeDisplay={feeDisplay}
                               priceMap={priceMap}
+                              metadatas={metadatas}
                             />
                           ))}
                           <div className="flex justify-between items-baseline py-3">
@@ -316,7 +337,7 @@ const AddressTransactions: React.FC = () => {
                   <Route path="/address/:addressOrName/contract" exact>
                     <Contracts
                       checksummedAddress={checksummedAddress}
-                      rawMetadata={rawMetadata}
+                      rawMetadata={addressMetadata}
                     />
                   </Route>
                 </Switch>

src/block/BlockTransactionResults.tsx

@@ -9,9 +9,11 @@ import { useFeeToggler } from "../search/useFeeToggler";
 import { RuntimeContext } from "../useRuntime";
 import { SelectionContext, useSelection } from "../useSelection";
 import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses";
-import { ProcessedTransaction } from "../types";
+import { ChecksummedAddress, ProcessedTransaction } from "../types";
 import { PAGE_SIZE } from "../params";
 import { useMultipleETHUSDOracle } from "../usePriceOracle";
+import { useAppConfigContext } from "../useAppConfig";
+import { useMultipleMetadata } from "../useSourcify";
 
 type BlockTransactionResultsProps = {
   blockTag: BlockTag;
@@ -34,6 +36,21 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
   const blockTags = useMemo(() => [blockTag], [blockTag]);
   const priceMap = useMultipleETHUSDOracle(provider, blockTags);
 
+  const addresses = useMemo((): ChecksummedAddress[] => {
+    if (!page) {
+      return [];
+    }
+
+    return page.map((t) => t.to).filter((to): to is string => to !== undefined);
+  }, [page]);
+  const { sourcifySource } = useAppConfigContext();
+  const metadatas = useMultipleMetadata(
+    undefined,
+    addresses,
+    provider?.network.chainId,
+    sourcifySource
+  );
+
   return (
     <ContentFrame>
       <div className="flex justify-between items-baseline py-3">
@@ -63,6 +80,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
               resolvedAddresses={resolvedAddresses}
               feeDisplay={feeDisplay}
               priceMap={priceMap}
+              metadatas={metadatas}
             />
           ))}
           <div className="flex justify-between items-baseline py-3">

src/components/DecoratedAddressLink.tsx

@@ -8,6 +8,8 @@ import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
 import AddressOrENSName from "./AddressOrENSName";
 import { AddressContext, ZERO_ADDRESS } from "../types";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { Metadata } from "../useSourcify";
+import SourcifyLogo from "../sourcify.svg";
 
 type DecoratedAddressLinkProps = {
   address: string;
@@ -19,6 +21,7 @@ type DecoratedAddressLinkProps = {
   txFrom?: boolean;
   txTo?: boolean;
   resolvedAddresses?: ResolvedAddresses | undefined;
+  metadata?: Metadata | null | undefined;
 };
 
 const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
@@ -31,6 +34,7 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
   txFrom,
   txTo,
   resolvedAddresses,
+  metadata,
 }) => {
   const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
   const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
@@ -70,6 +74,17 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
           <FontAwesomeIcon icon={faCoins} size="1x" />
         </span>
       )}
+      {metadata && (
+        <span className="self-center flex-shrink-0 flex items-center">
+          <img
+            src={SourcifyLogo}
+            alt="Sourcify logo"
+            title="Verified by Sourcify"
+            width={16}
+            height={16}
+          />
+        </span>
+      )}
       <AddressOrENSName
         address={address}
         selectedAddress={selectedAddress}

src/components/TransactionAddress.tsx

@@ -4,17 +4,20 @@ import DecoratedAddressLink from "./DecoratedAddressLink";
 import { ResolvedAddresses } from "../api/address-resolver";
 import { useSelectedTransaction } from "../useSelectedTransaction";
 import { AddressContext } from "../types";
+import { Metadata } from "../useSourcify";
 
 type TransactionAddressProps = {
   address: string;
   addressCtx?: AddressContext | undefined;
   resolvedAddresses: ResolvedAddresses | undefined;
+  metadata?: Metadata | null | undefined;
 };
 
 const TransactionAddress: React.FC<TransactionAddressProps> = ({
   address,
   addressCtx,
   resolvedAddresses,
+  metadata,
 }) => {
   const txData = useSelectedTransaction();
   // TODO: push down creation coloring logic into DecoratedAddressLink
@@ -30,6 +33,7 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
         txTo={address === txData?.to || creation}
         creation={creation}
         resolvedAddresses={resolvedAddresses}
+        metadata={metadata}
       />
     </AddressHighlighter>
   );

src/search/TransactionItem.tsx

@@ -14,11 +14,12 @@ import TransactionDirection, {
   Flags,
 } from "../components/TransactionDirection";
 import TransactionValue from "../components/TransactionValue";
-import { ProcessedTransaction } from "../types";
+import { ChecksummedAddress, ProcessedTransaction } from "../types";
 import { FeeDisplay } from "./useFeeToggler";
 import { formatValue } from "../components/formatter";
 import ETH2USDValue from "../components/ETH2USDValue";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { Metadata } from "../useSourcify";
 
 type TransactionItemProps = {
   tx: ProcessedTransaction;
@@ -26,6 +27,7 @@ type TransactionItemProps = {
   selectedAddress?: string;
   feeDisplay: FeeDisplay;
   priceMap: Record<BlockTag, BigNumber>;
+  metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
 const TransactionItem: React.FC<TransactionItemProps> = ({
@@ -34,6 +36,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
   selectedAddress,
   feeDisplay,
   priceMap,
+  metadatas,
 }) => {
   let direction: Direction | undefined;
   if (selectedAddress) {
@@ -105,6 +108,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 selectedAddress={selectedAddress}
                 miner={tx.miner === tx.to}
                 resolvedAddresses={resolvedAddresses}
+                metadata={metadatas[tx.to]}
               />
             </AddressHighlighter>
           ) : (
@@ -114,6 +118,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 selectedAddress={selectedAddress}
                 creation
                 resolvedAddresses={resolvedAddresses}
+                metadata={metadatas[tx.createdContractAddress!]}
               />
             </AddressHighlighter>
           )}

src/transaction/Details.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import {
   TransactionDescription,
   Fragment,
@@ -26,15 +26,21 @@ import USDValue from "../components/USDValue";
 import FormattedBalance from "../components/FormattedBalance";
 import ETH2USDValue from "../components/ETH2USDValue";
 import TokenTransferItem from "../TokenTransferItem";
-import { TransactionData, InternalOperation } from "../types";
+import {
+  TransactionData,
+  InternalOperation,
+  ChecksummedAddress,
+} from "../types";
 import PercentageBar from "../components/PercentageBar";
 import ExternalLink from "../components/ExternalLink";
 import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
 import InputDecoder from "./decoder/InputDecoder";
 import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
-import { DevDoc, UserDoc } from "../useSourcify";
+import { DevDoc, useMultipleMetadata, UserDoc } from "../useSourcify";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { RuntimeContext } from "../useRuntime";
+import { useAppConfigContext } from "../useAppConfig";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -80,6 +86,25 @@ const Details: React.FC<DetailsProps> = ({
   const userMethod = txDesc ? userDoc?.methods[txDesc.signature] : undefined;
   const devMethod = txDesc ? devDoc?.methods[txDesc.signature] : undefined;
 
+  const { provider } = useContext(RuntimeContext);
+  const addresses = useMemo(() => {
+    const _addresses: ChecksummedAddress[] = [];
+    if (txData.to) {
+      _addresses.push(txData.to);
+    }
+    if (txData.confirmedData?.createdContractAddress) {
+      _addresses.push(txData.confirmedData.createdContractAddress);
+    }
+    return _addresses;
+  }, [txData]);
+  const { sourcifySource } = useAppConfigContext();
+  const metadatas = useMultipleMetadata(
+    undefined,
+    addresses,
+    provider?.network.chainId,
+    sourcifySource
+  );
+
   return (
     <ContentFrame tabs>
       <InfoRow title="Transaction Hash">
@@ -155,6 +180,7 @@ const Details: React.FC<DetailsProps> = ({
             <TransactionAddress
               address={txData.to}
               resolvedAddresses={resolvedAddresses}
+              metadata={metadatas?.[txData.to]}
             />
             <Copy value={txData.to} />
           </div>
@@ -167,6 +193,9 @@ const Details: React.FC<DetailsProps> = ({
             <TransactionAddress
               address={txData.confirmedData?.createdContractAddress!}
               resolvedAddresses={resolvedAddresses}
+              metadata={
+                metadatas?.[txData.confirmedData?.createdContractAddress!]
+              }
             />
             <Copy value={txData.confirmedData.createdContractAddress!} />
           </div>

src/transaction/LogEntry.tsx

@@ -9,17 +9,21 @@ import DecodedParamsTable from "./decoder/DecodedParamsTable";
 import DecodedLogSignature from "./decoder/DecodedLogSignature";
 import { useTopic0 } from "../useTopic0";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { ChecksummedAddress } from "../types";
+import { Metadata } from "../useSourcify";
 
 type LogEntryProps = {
   log: Log;
   logDesc: LogDescription | null | undefined;
   resolvedAddresses: ResolvedAddresses | undefined;
+  metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
 const LogEntry: React.FC<LogEntryProps> = ({
   log,
   logDesc,
   resolvedAddresses,
+  metadatas,
 }) => {
   const rawTopic0 = log.topics[0];
   const topic0 = useTopic0(rawTopic0);
@@ -62,6 +66,7 @@ const LogEntry: React.FC<LogEntryProps> = ({
               <TransactionAddress
                 address={log.address}
                 resolvedAddresses={resolvedAddresses}
+                metadata={metadatas[log.address]}
               />
               <Copy value={log.address} />
             </div>

src/transaction/Logs.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import { Interface } from "@ethersproject/abi";
 import ContentFrame from "../ContentFrame";
 import LogEntry from "./LogEntry";
@@ -6,6 +6,7 @@ import { TransactionData } from "../types";
 import { useAppConfigContext } from "../useAppConfig";
 import { Metadata, useMultipleMetadata } from "../useSourcify";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { RuntimeContext } from "../useRuntime";
 
 type LogsProps = {
   txData: TransactionData;
@@ -24,15 +25,16 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
     return md;
   }, [txData.to, metadata]);
 
-  const { sourcifySource } = useAppConfigContext();
   const logAddresses = useMemo(
     () => txData.confirmedData?.logs.map((l) => l.address) ?? [],
     [txData]
   );
+  const { provider } = useContext(RuntimeContext);
+  const { sourcifySource } = useAppConfigContext();
   const metadatas = useMultipleMetadata(
     baseMetadatas,
     logAddresses,
-    1,
+    provider?.network.chainId,
     sourcifySource
   );
   const logDescs = useMemo(() => {
@@ -72,6 +74,7 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
                   log={l}
                   logDesc={logDescs?.[i]}
                   resolvedAddresses={resolvedAddresses}
+                  metadatas={metadatas}
                 />
               ))}
             </>

src/types.ts

@@ -67,6 +67,9 @@ export type ConfirmedTransactionData = {
 // The VOID...
 export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
 
+// TODO: replace all occurrences of plain string
+export type ChecksummedAddress = string;
+
 export enum AddressContext {
   FROM,
   TO,

src/url.ts

@@ -1,4 +1,5 @@
 import { BlockTag } from "@ethersproject/abstract-provider";
+import { ChecksummedAddress } from "./types";
 
 export const fourBytesURL = (
   assetsURLPrefix: string,
@@ -42,23 +43,23 @@ const resolveSourcifySource = (source: SourcifySource) => {
 };
 
 export const sourcifyMetadata = (
-  checksummedAddress: string,
+  address: ChecksummedAddress,
-  networkId: number,
+  chainId: number,
   source: SourcifySource
 ) =>
   `${resolveSourcifySource(
     source
-  )}/contracts/full_match/${networkId}/${checksummedAddress}/metadata.json`;
+  )}/contracts/full_match/${chainId}/${address}/metadata.json`;
 
 export const sourcifySourceFile = (
-  checksummedAddress: string,
+  address: ChecksummedAddress,
-  networkId: number,
+  chainId: number,
   filepath: string,
   source: SourcifySource
 ) =>
   `${resolveSourcifySource(
     source
-  )}/contracts/full_match/${networkId}/${checksummedAddress}/sources/${filepath}`;
+  )}/contracts/full_match/${chainId}/${address}/sources/${filepath}`;
 
 export const openInRemixURL = (checksummedAddress: string, networkId: number) =>
   `https://remix.ethereum.org/#call=source-verification//fetchAndSave//${checksummedAddress}//${networkId}`;

src/useSourcify.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from "react";
 import { Interface } from "@ethersproject/abi";
-import { TransactionData } from "./types";
+import { ChecksummedAddress, TransactionData } from "./types";
 import { sourcifyMetadata, SourcifySource, sourcifySourceFile } from "./url";
 
 export type UserMethod = {
@@ -65,24 +65,19 @@ export type Metadata = {
   };
 };
 
-export const fetchSourcifyMetadata = async (
+const fetchSourcifyMetadata = async (
-  checksummedAddress: string,
+  address: ChecksummedAddress,
   chainId: number,
   source: SourcifySource,
   abortController: AbortController
 ): Promise<Metadata | null> => {
   try {
-    const contractMetadataURL = sourcifyMetadata(
+    const metadataURL = sourcifyMetadata(address, chainId, source);
-      checksummedAddress,
+    const result = await fetch(metadataURL, {
-      chainId,
-      source
-    );
-    const result = await fetch(contractMetadataURL, {
       signal: abortController.signal,
     });
     if (result.ok) {
-      const _metadata = await result.json();
+      return await result.json();
-      return _metadata;
     }
 
     return null;
@@ -92,15 +87,16 @@ export const fetchSourcifyMetadata = async (
   }
 };
 
+// TODO: replace every occurrence with the multiple version one
 export const useSourcify = (
-  checksummedAddress: string | undefined,
+  address: ChecksummedAddress | undefined,
   chainId: number | undefined,
   source: SourcifySource
 ): Metadata | null | undefined => {
   const [rawMetadata, setRawMetadata] = useState<Metadata | null | undefined>();
 
   useEffect(() => {
-    if (!checksummedAddress || chainId === undefined) {
+    if (!address || chainId === undefined) {
       return;
     }
     setRawMetadata(undefined);
@@ -108,7 +104,7 @@ export const useSourcify = (
     const abortController = new AbortController();
     const fetchMetadata = async () => {
       const _metadata = await fetchSourcifyMetadata(
-        checksummedAddress,
+        address,
         chainId,
         source,
         abortController
@@ -120,47 +116,53 @@ export const useSourcify = (
     return () => {
       abortController.abort();
     };
-  }, [checksummedAddress, chainId, source]);
+  }, [address, chainId, source]);
 
   return rawMetadata;
 };
 
 export const useMultipleMetadata = (
-  baseMetadatas: Record<string, Metadata | null>,
+  baseMetadatas: Record<string, Metadata | null> | undefined,
-  checksummedAddress: (string | undefined)[],
+  addresses: (ChecksummedAddress | undefined)[],
   chainId: number | undefined,
   source: SourcifySource
-): Record<string, Metadata | null | undefined> => {
+): Record<ChecksummedAddress, Metadata | null | undefined> => {
   const [rawMetadata, setRawMetadata] = useState<
     Record<string, Metadata | null | undefined>
   >({});
 
   useEffect(() => {
-    if (!checksummedAddress || chainId === undefined) {
+    if (!addresses || chainId === undefined) {
       return;
     }
     setRawMetadata({});
 
     const abortController = new AbortController();
-    const fetchMetadata = async (addresses: string[]) => {
+    const fetchMetadata = async (dedupedAddresses: string[]) => {
       const promises: Promise<Metadata | null>[] = [];
-      for (const addr of addresses) {
+      for (const address of dedupedAddresses) {
         promises.push(
-          fetchSourcifyMetadata(addr, chainId, source, abortController)
+          fetchSourcifyMetadata(address, chainId, source, abortController)
         );
       }
 
       const results = await Promise.all(promises);
-      const metadatas: Record<string, Metadata | null> = { ...baseMetadatas };
+      if (abortController.signal.aborted) {
+        return;
+      }
+      const metadatas: Record<string, Metadata | null> = baseMetadatas
+        ? { ...baseMetadatas }
+        : {};
       for (let i = 0; i < results.length; i++) {
-        metadatas[addresses[i]] = results[i];
+        metadatas[dedupedAddresses[i]] = results[i];
       }
       setRawMetadata(metadatas);
     };
 
     const deduped = new Set(
-      checksummedAddress.filter(
+      addresses.filter(
-        (a): a is string => a !== undefined && baseMetadatas[a] === undefined
+        (a): a is ChecksummedAddress =>
+          a !== undefined && baseMetadatas?.[a] === undefined
       )
     );
     fetchMetadata(Array.from(deduped));
@@ -168,7 +170,7 @@ export const useMultipleMetadata = (
     return () => {
       abortController.abort();
     };
-  }, [baseMetadatas, checksummedAddress, chainId, source]);
+  }, [baseMetadatas, addresses, chainId, source]);
 
   return rawMetadata;
 };