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

This commit is contained in:
Willian Mitsuda 2021-12-04 17:22:50 -03:00
commit 4935d02e91
10 changed files with 107 additions and 71 deletions

View File

@ -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
}
/>
}
/>

View File

@ -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;

View File

@ -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);

View File

@ -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,

View File

@ -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}>

View File

@ -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!),

View File

@ -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,

View File

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

View File

@ -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;
}

View File

@ -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);