import React, { useEffect, useContext, useCallback, useMemo } from "react"; import { useParams, useNavigate, Routes, Route, useSearchParams, } from "react-router-dom"; import { Tab } from "@headlessui/react"; import Blockies from "react-blockies"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch"; import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons/faQuestionCircle"; import StandardFrame from "./StandardFrame"; import StandardSubtitle from "./StandardSubtitle"; import AddressOrENSNameNotFound from "./components/AddressOrENSNameNotFound"; import Copy from "./components/Copy"; import Faucet from "./components/Faucet"; import NavTab from "./components/NavTab"; import SourcifyLogo from "./sourcify/SourcifyLogo"; import AddressTransactionResults from "./address/AddressTransactionResults"; import Contracts from "./address/Contracts"; import { RuntimeContext } from "./useRuntime"; import { useAppConfigContext } from "./useAppConfig"; import { useAddressOrENS } from "./useResolvedAddresses"; import { useMultipleMetadata } from "./sourcify/useSourcify"; import { ChecksummedAddress } from "./types"; import { useAddressesWithCode } from "./useErigonHooks"; import { useChainInfo } from "./useChainInfo"; const AddressTransactionByNonce = React.lazy( () => import("./AddressTransactionByNonce") ); const Address: React.FC = () => { const { provider } = useContext(RuntimeContext); const { addressOrName, direction } = useParams(); if (addressOrName === undefined) { throw new Error("addressOrName couldn't be undefined here"); } const navigate = useNavigate(); const [searchParams] = useSearchParams(); const urlFixer = useCallback( (address: ChecksummedAddress) => { navigate( `/address/${address}${ direction ? "/" + direction : "" }?${searchParams.toString()}`, { replace: true } ); }, [navigate, direction, searchParams] ); const [checksummedAddress, isENS, error] = useAddressOrENS( addressOrName, urlFixer ); useEffect(() => { if (isENS || checksummedAddress === undefined) { document.title = `Address ${addressOrName} | Otterscan`; } else { document.title = `Address ${checksummedAddress} | Otterscan`; } }, [addressOrName, checksummedAddress, isENS]); const { sourcifySource } = useAppConfigContext(); const checksummedAddressAsArray = useMemo( () => (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; const { network, faucets } = useChainInfo(); // Search address by nonce === transaction @ nonce const rawNonce = searchParams.get("nonce"); if (rawNonce !== null) { return ( ); } return ( {error ? ( ) : ( checksummedAddress && ( <>
Address {checksummedAddress} {/* Only display faucets for testnets who actually have any */} {network === "testnet" && faucets && faucets.length > 0 && ( )} {isENS && ( ENS: {addressOrName} )}
Overview {(contractAddresses?.length ?? 0) > 0 && ( Contract {addressMetadata === undefined ? ( ) : addressMetadata === null ? ( ) : ( )} )} } /> } /> } /> ) )}
); }; export default Address;