Merge branch 'feature/fix-eoa-contract-display' into develop
This commit is contained in:
commit
4935d02e91
|
@ -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(
|
||||
checksummedAddress,
|
||||
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;
|
||||
|
||||
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}`}>
|
||||
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">
|
||||
<SourcifyLogo />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</NavTab>
|
||||
<NavTab href={`/address/${addressOrName}`}>Overview</NavTab>
|
||||
{(contractAddresses?.length ?? 0) > 0 && (
|
||||
<NavTab href={`/address/${addressOrName}/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">
|
||||
<SourcifyLogo />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</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
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
16
src/hooks.ts
16
src/hooks.ts
|
@ -1,13 +1,19 @@
|
|||
import { useMemo } from "react";
|
||||
import { JsonRpcProvider } from "@ethersproject/providers";
|
||||
import { ChecksummedAddress } from "./types";
|
||||
import {
|
||||
Metadata,
|
||||
useDedupedAddresses,
|
||||
useMultipleMetadata,
|
||||
} from "./sourcify/useSourcify";
|
||||
import { Metadata, 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,
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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!),
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -16,7 +16,7 @@ export type ProcessedTransaction = {
|
|||
idx: number;
|
||||
hash: string;
|
||||
from?: string;
|
||||
to?: string;
|
||||
to: string | null;
|
||||
createdContractAddress?: string;
|
||||
internalMinerInteraction?: boolean;
|
||||
value: BigNumber;
|
||||
|
|
|
@ -95,33 +95,38 @@ export const useBlockTransactions = (
|
|||
const _receipts = result.receipts;
|
||||
|
||||
const rawTxs = _block.transactions
|
||||
.map(
|
||||
(t, i): ProcessedTransaction => ({
|
||||
.map((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,
|
||||
createdContractAddress: _receipts[i].contractAddress,
|
||||
to: t.to ?? null,
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue