354 lines
12 KiB
TypeScript
354 lines
12 KiB
TypeScript
import React, { useState, useEffect, useMemo, useContext } from "react";
|
|
import {
|
|
useParams,
|
|
useLocation,
|
|
useHistory,
|
|
Switch,
|
|
Route,
|
|
} from "react-router-dom";
|
|
import { BlockTag } from "@ethersproject/abstract-provider";
|
|
import { getAddress, isAddress } from "@ethersproject/address";
|
|
import { Tab } from "@headlessui/react";
|
|
import queryString from "query-string";
|
|
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 Copy from "./components/Copy";
|
|
import ContentFrame from "./ContentFrame";
|
|
import NavTab from "./components/NavTab";
|
|
import Contracts from "./address/Contracts";
|
|
import UndefinedPageControl from "./search/UndefinedPageControl";
|
|
import ResultHeader from "./search/ResultHeader";
|
|
import PendingResults from "./search/PendingResults";
|
|
import TransactionItem from "./search/TransactionItem";
|
|
import { SearchController } from "./search/search";
|
|
import { RuntimeContext } from "./useRuntime";
|
|
import { pageCollector, useResolvedAddresses } from "./useResolvedAddresses";
|
|
import { useFeeToggler } from "./search/useFeeToggler";
|
|
import { SelectionContext, useSelection } from "./useSelection";
|
|
import { useMultipleETHUSDOracle } from "./usePriceOracle";
|
|
import { useAppConfigContext } from "./useAppConfig";
|
|
import { useMultipleMetadata } from "./useSourcify";
|
|
import { ChecksummedAddress } from "./types";
|
|
import SourcifyLogo from "./sourcify.svg";
|
|
|
|
type BlockParams = {
|
|
addressOrName: string;
|
|
direction?: string;
|
|
};
|
|
|
|
type PageParams = {
|
|
p?: number;
|
|
};
|
|
|
|
const AddressTransactions: React.FC = () => {
|
|
const { provider } = useContext(RuntimeContext);
|
|
const params = useParams<BlockParams>();
|
|
const location = useLocation<PageParams>();
|
|
const history = useHistory();
|
|
const qs = queryString.parse(location.search);
|
|
let hash: string | undefined;
|
|
if (qs.h) {
|
|
hash = qs.h as string;
|
|
}
|
|
|
|
const [checksummedAddress, setChecksummedAddress] = useState<string>();
|
|
const [isENS, setENS] = useState<boolean>();
|
|
const [error, setError] = useState<boolean>();
|
|
|
|
// If it looks like it is an ENS name, try to resolve it
|
|
useEffect(() => {
|
|
if (isAddress(params.addressOrName)) {
|
|
setENS(false);
|
|
setError(false);
|
|
|
|
// Normalize to checksummed address
|
|
const _checksummedAddress = getAddress(params.addressOrName);
|
|
if (_checksummedAddress !== params.addressOrName) {
|
|
// Request came with a non-checksummed address; fix the URL
|
|
history.replace(
|
|
`/address/${_checksummedAddress}${
|
|
params.direction ? "/" + params.direction : ""
|
|
}${location.search}`
|
|
);
|
|
}
|
|
setChecksummedAddress(_checksummedAddress);
|
|
return;
|
|
}
|
|
|
|
if (!provider) {
|
|
return;
|
|
}
|
|
const resolveName = async () => {
|
|
const resolvedAddress = await provider.resolveName(params.addressOrName);
|
|
if (resolvedAddress !== null) {
|
|
setENS(true);
|
|
setError(false);
|
|
setChecksummedAddress(resolvedAddress);
|
|
} else {
|
|
setENS(false);
|
|
setError(true);
|
|
setChecksummedAddress(undefined);
|
|
}
|
|
};
|
|
resolveName();
|
|
}, [
|
|
provider,
|
|
params.addressOrName,
|
|
history,
|
|
params.direction,
|
|
location.search,
|
|
]);
|
|
|
|
const [controller, setController] = useState<SearchController>();
|
|
useEffect(() => {
|
|
if (!provider || !checksummedAddress) {
|
|
return;
|
|
}
|
|
|
|
const readFirstPage = async () => {
|
|
const _controller = await SearchController.firstPage(
|
|
provider,
|
|
checksummedAddress
|
|
);
|
|
setController(_controller);
|
|
};
|
|
const readMiddlePage = async (next: boolean) => {
|
|
const _controller = await SearchController.middlePage(
|
|
provider,
|
|
checksummedAddress,
|
|
hash!,
|
|
next
|
|
);
|
|
setController(_controller);
|
|
};
|
|
const readLastPage = async () => {
|
|
const _controller = await SearchController.lastPage(
|
|
provider,
|
|
checksummedAddress
|
|
);
|
|
setController(_controller);
|
|
};
|
|
const prevPage = async () => {
|
|
const _controller = await controller!.prevPage(provider, hash!);
|
|
setController(_controller);
|
|
};
|
|
const nextPage = async () => {
|
|
const _controller = await controller!.nextPage(provider, hash!);
|
|
setController(_controller);
|
|
};
|
|
|
|
// Page load from scratch
|
|
if (params.direction === "first" || params.direction === undefined) {
|
|
if (!controller?.isFirst || controller.address !== checksummedAddress) {
|
|
readFirstPage();
|
|
}
|
|
} else if (params.direction === "prev") {
|
|
if (controller && controller.address === checksummedAddress) {
|
|
prevPage();
|
|
} else {
|
|
readMiddlePage(false);
|
|
}
|
|
} else if (params.direction === "next") {
|
|
if (controller && controller.address === checksummedAddress) {
|
|
nextPage();
|
|
} else {
|
|
readMiddlePage(true);
|
|
}
|
|
} else if (params.direction === "last") {
|
|
if (!controller?.isLast || controller.address !== checksummedAddress) {
|
|
readLastPage();
|
|
}
|
|
}
|
|
}, [provider, checksummedAddress, params.direction, hash, controller]);
|
|
|
|
const page = useMemo(() => controller?.getPage(), [controller]);
|
|
const addrCollector = useMemo(() => pageCollector(page), [page]);
|
|
const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
|
|
|
|
const blockTags: BlockTag[] = useMemo(() => {
|
|
if (!page) {
|
|
return [];
|
|
}
|
|
return page.map((p) => p.blockNumber);
|
|
}, [page]);
|
|
const priceMap = useMultipleETHUSDOracle(provider, blockTags);
|
|
|
|
document.title = `Address ${params.addressOrName} | Otterscan`;
|
|
|
|
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 metadatas = useMultipleMetadata(
|
|
undefined,
|
|
addresses,
|
|
provider?.network.chainId,
|
|
sourcifySource
|
|
);
|
|
const addressMetadata =
|
|
checksummedAddress !== undefined
|
|
? metadatas[checksummedAddress]
|
|
: undefined;
|
|
|
|
return (
|
|
<StandardFrame>
|
|
{error ? (
|
|
<span className="text-base">
|
|
"{params.addressOrName}" is not an ETH address or ENS name.
|
|
</span>
|
|
) : (
|
|
checksummedAddress && (
|
|
<>
|
|
<StandardSubtitle>
|
|
<div className="flex space-x-2 items-baseline">
|
|
<Blockies
|
|
className="self-center rounded"
|
|
seed={checksummedAddress.toLowerCase()}
|
|
scale={3}
|
|
/>
|
|
<span>Address</span>
|
|
<span className="font-address text-base text-gray-500">
|
|
{checksummedAddress}
|
|
</span>
|
|
<Copy value={checksummedAddress} rounded />
|
|
{isENS && (
|
|
<span className="rounded-lg px-2 py-1 bg-gray-200 text-gray-500 text-xs">
|
|
ENS: {params.addressOrName}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</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}`}>
|
|
Overview
|
|
</NavTab>
|
|
<NavTab href={`/address/${checksummedAddress}/contract`}>
|
|
<span
|
|
className={`flex items-baseline space-x-2 ${
|
|
addressMetadata === undefined ? "italic opacity-50" : ""
|
|
}`}
|
|
>
|
|
<span>Contract</span>
|
|
{addressMetadata === undefined ? (
|
|
<span className="self-center">
|
|
<FontAwesomeIcon
|
|
className="animate-spin"
|
|
icon={faCircleNotch}
|
|
/>
|
|
</span>
|
|
) : addressMetadata === null ? (
|
|
<span className="self-center text-red-500">
|
|
<FontAwesomeIcon icon={faQuestionCircle} />
|
|
</span>
|
|
) : (
|
|
<span className="self-center text-green-500">
|
|
<img
|
|
src={SourcifyLogo}
|
|
alt="Sourcify logo"
|
|
title="Verified by Sourcify"
|
|
width={16}
|
|
height={16}
|
|
/>
|
|
</span>
|
|
)}
|
|
</span>
|
|
</NavTab>
|
|
</Tab.List>
|
|
<Tab.Panels>
|
|
<Switch>
|
|
<Route path="/address/:addressOrName" exact>
|
|
<ContentFrame tabs>
|
|
<div className="flex justify-between items-baseline py-3">
|
|
<div className="text-sm text-gray-500">
|
|
{page === undefined ? (
|
|
<>Waiting for search results...</>
|
|
) : (
|
|
<>{page.length} transactions on this page</>
|
|
)}
|
|
</div>
|
|
<UndefinedPageControl
|
|
address={params.addressOrName}
|
|
isFirst={controller?.isFirst}
|
|
isLast={controller?.isLast}
|
|
prevHash={page ? page[0].hash : ""}
|
|
nextHash={page ? page[page.length - 1].hash : ""}
|
|
disabled={controller === undefined}
|
|
/>
|
|
</div>
|
|
<ResultHeader
|
|
feeDisplay={feeDisplay}
|
|
feeDisplayToggler={feeDisplayToggler}
|
|
/>
|
|
{page ? (
|
|
<SelectionContext.Provider value={selectionCtx}>
|
|
{page.map((tx) => (
|
|
<TransactionItem
|
|
key={tx.hash}
|
|
tx={tx}
|
|
resolvedAddresses={resolvedAddresses}
|
|
selectedAddress={checksummedAddress}
|
|
feeDisplay={feeDisplay}
|
|
priceMap={priceMap}
|
|
metadatas={metadatas}
|
|
/>
|
|
))}
|
|
<div className="flex justify-between items-baseline py-3">
|
|
<div className="text-sm text-gray-500">
|
|
{page === undefined ? (
|
|
<>Waiting for search results...</>
|
|
) : (
|
|
<>{page.length} transactions on this page</>
|
|
)}
|
|
</div>
|
|
<UndefinedPageControl
|
|
address={params.addressOrName}
|
|
isFirst={controller?.isFirst}
|
|
isLast={controller?.isLast}
|
|
prevHash={page ? page[0].hash : ""}
|
|
nextHash={page ? page[page.length - 1].hash : ""}
|
|
disabled={controller === undefined}
|
|
/>
|
|
</div>
|
|
</SelectionContext.Provider>
|
|
) : (
|
|
<PendingResults />
|
|
)}
|
|
</ContentFrame>
|
|
</Route>
|
|
<Route path="/address/:addressOrName/contract" exact>
|
|
<Contracts
|
|
checksummedAddress={checksummedAddress}
|
|
rawMetadata={addressMetadata}
|
|
/>
|
|
</Route>
|
|
</Switch>
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
</>
|
|
)
|
|
)}
|
|
</StandardFrame>
|
|
);
|
|
};
|
|
|
|
export default React.memo(AddressTransactions);
|