Replace Sourcify metadata reading by SWR; 2nd batch of refactorings
This commit is contained in:
parent
0b210fd446
commit
39c11a1ed4
|
@ -6,28 +6,20 @@ import TransactionAddress from "./components/TransactionAddress";
|
|||
import ValueHighlighter from "./components/ValueHighlighter";
|
||||
import FormattedBalance from "./components/FormattedBalance";
|
||||
import USDAmount from "./components/USDAmount";
|
||||
import {
|
||||
AddressContext,
|
||||
ChecksummedAddress,
|
||||
TokenMeta,
|
||||
TokenTransfer,
|
||||
} from "./types";
|
||||
import { AddressContext, TokenMeta, TokenTransfer } from "./types";
|
||||
import { RuntimeContext } from "./useRuntime";
|
||||
import { useBlockNumberContext } from "./useBlockTagContext";
|
||||
import { Metadata } from "./sourcify/useSourcify";
|
||||
import { useTokenUSDOracle } from "./usePriceOracle";
|
||||
|
||||
type TokenTransferItemProps = {
|
||||
t: TokenTransfer;
|
||||
tokenMeta?: TokenMeta | null | undefined;
|
||||
metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
|
||||
};
|
||||
|
||||
// TODO: handle partial
|
||||
const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
||||
t,
|
||||
tokenMeta,
|
||||
metadatas,
|
||||
}) => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const blockNumber = useBlockNumberContext();
|
||||
|
@ -40,7 +32,6 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
|||
<TransactionAddress
|
||||
address={t.from}
|
||||
addressCtx={AddressContext.FROM}
|
||||
metadata={metadatas[t.from]}
|
||||
showCodeIndicator
|
||||
/>
|
||||
</div>
|
||||
|
@ -51,7 +42,6 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
|||
<TransactionAddress
|
||||
address={t.to}
|
||||
addressCtx={AddressContext.TO}
|
||||
metadata={metadatas[t.to]}
|
||||
showCodeIndicator
|
||||
/>
|
||||
</div>
|
||||
|
@ -67,7 +57,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
|||
/>
|
||||
</ValueHighlighter>
|
||||
</span>
|
||||
<TransactionAddress address={t.token} metadata={metadatas[t.token]} />
|
||||
<TransactionAddress address={t.token} />
|
||||
{tokenMeta && quote !== undefined && decimals !== undefined && (
|
||||
<span className="px-2 border-gray-200 border rounded-lg bg-gray-100 text-gray-600">
|
||||
<USDAmount
|
||||
|
|
|
@ -18,7 +18,6 @@ import { useMultipleETHUSDOracle } from "../usePriceOracle";
|
|||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useParams, useSearchParams } from "react-router-dom";
|
||||
import { ChecksummedAddress, ProcessedTransaction } from "../types";
|
||||
import { useContractsMetadata } from "../hooks";
|
||||
import { useAddressBalance, useContractCreator } from "../useErigonHooks";
|
||||
import { BlockNumberContext } from "../useBlockTagContext";
|
||||
|
||||
|
@ -112,22 +111,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
|
|||
}, [page]);
|
||||
const priceMap = useMultipleETHUSDOracle(provider, blockTags);
|
||||
|
||||
// Calculate Sourcify metadata for all addresses that appear on this page results
|
||||
const addresses = useMemo(() => {
|
||||
const _addresses = [address];
|
||||
if (page) {
|
||||
for (const t of page) {
|
||||
if (t.to) {
|
||||
_addresses.push(t.to);
|
||||
}
|
||||
if (t.createdContractAddress) {
|
||||
_addresses.push(t.createdContractAddress);
|
||||
}
|
||||
}
|
||||
}
|
||||
return _addresses;
|
||||
}, [address, page]);
|
||||
const metadatas = useContractsMetadata(addresses, provider);
|
||||
const balance = useAddressBalance(provider, address);
|
||||
const creator = useContractCreator(provider, address);
|
||||
|
||||
|
@ -181,7 +164,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
|
|||
selectedAddress={address}
|
||||
feeDisplay={feeDisplay}
|
||||
priceMap={priceMap}
|
||||
metadatas={metadatas}
|
||||
/>
|
||||
))}
|
||||
<NavBar address={address} page={page} controller={controller} />
|
||||
|
|
|
@ -8,10 +8,9 @@ import TransactionItem from "../search/TransactionItem";
|
|||
import { useFeeToggler } from "../search/useFeeToggler";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { SelectionContext, useSelection } from "../useSelection";
|
||||
import { ChecksummedAddress, ProcessedTransaction } from "../types";
|
||||
import { ProcessedTransaction } from "../types";
|
||||
import { PAGE_SIZE } from "../params";
|
||||
import { useMultipleETHUSDOracle } from "../usePriceOracle";
|
||||
import { useContractsMetadata } from "../hooks";
|
||||
|
||||
type BlockTransactionResultsProps = {
|
||||
blockTag: BlockTag;
|
||||
|
@ -32,24 +31,6 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
|
|||
const blockTags = useMemo(() => [blockTag], [blockTag]);
|
||||
const priceMap = useMultipleETHUSDOracle(provider, blockTags);
|
||||
|
||||
const addresses = useMemo((): ChecksummedAddress[] => {
|
||||
if (!page) {
|
||||
return [];
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
return (
|
||||
<ContentFrame>
|
||||
<div className="flex justify-between items-baseline py-3">
|
||||
|
@ -78,7 +59,6 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
|
|||
tx={tx}
|
||||
feeDisplay={feeDisplay}
|
||||
priceMap={priceMap}
|
||||
metadatas={metadatas}
|
||||
/>
|
||||
))}
|
||||
<div className="flex justify-between items-baseline py-3">
|
||||
|
|
|
@ -8,8 +8,9 @@ import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
|
|||
import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
|
||||
import SourcifyLogo from "../sourcify/SourcifyLogo";
|
||||
import PlainAddress from "./PlainAddress";
|
||||
import { Metadata } from "../sourcify/useSourcify";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useAppConfigContext } from "../useAppConfig";
|
||||
import { useSourcifyMetadata } from "../sourcify/useSourcify";
|
||||
import { useResolvedAddress } from "../useResolvedAddresses";
|
||||
import { AddressContext, ChecksummedAddress, ZERO_ADDRESS } from "../types";
|
||||
import { resolverRendererRegistry } from "../api/address-resolver";
|
||||
|
@ -23,7 +24,6 @@ type DecoratedAddressLinkProps = {
|
|||
selfDestruct?: boolean | undefined;
|
||||
txFrom?: boolean | undefined;
|
||||
txTo?: boolean | undefined;
|
||||
metadata?: Metadata | null | undefined;
|
||||
eoa?: boolean | undefined;
|
||||
};
|
||||
|
||||
|
@ -36,9 +36,16 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
|
|||
selfDestruct,
|
||||
txFrom,
|
||||
txTo,
|
||||
metadata,
|
||||
eoa,
|
||||
}) => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const { sourcifySource } = useAppConfigContext();
|
||||
const metadata = useSourcifyMetadata(
|
||||
address,
|
||||
provider?.network.chainId,
|
||||
sourcifySource
|
||||
);
|
||||
|
||||
const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
|
||||
const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
|
||||
|
||||
|
|
|
@ -5,20 +5,17 @@ import { useSelectedTransaction } from "../useSelectedTransaction";
|
|||
import { useBlockNumberContext } from "../useBlockTagContext";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useHasCode } from "../useErigonHooks";
|
||||
import { Metadata } from "../sourcify/useSourcify";
|
||||
import { AddressContext, ChecksummedAddress } from "../types";
|
||||
|
||||
type TransactionAddressProps = {
|
||||
address: ChecksummedAddress;
|
||||
addressCtx?: AddressContext | undefined;
|
||||
metadata?: Metadata | null | undefined;
|
||||
showCodeIndicator?: boolean;
|
||||
};
|
||||
|
||||
const TransactionAddress: React.FC<TransactionAddressProps> = ({
|
||||
address,
|
||||
addressCtx,
|
||||
metadata,
|
||||
showCodeIndicator = false,
|
||||
}) => {
|
||||
const txData = useSelectedTransaction();
|
||||
|
@ -46,7 +43,6 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
|
|||
txFrom={address === txData?.from}
|
||||
txTo={address === txData?.to || creation}
|
||||
creation={creation}
|
||||
metadata={metadata}
|
||||
eoa={
|
||||
showCodeIndicator && blockNumber !== undefined
|
||||
? !toHasCode
|
||||
|
|
|
@ -14,20 +14,18 @@ import TransactionDirection, {
|
|||
Flags,
|
||||
} from "../components/TransactionDirection";
|
||||
import TransactionValue from "../components/TransactionValue";
|
||||
import { ChecksummedAddress, ProcessedTransaction } from "../types";
|
||||
import { ProcessedTransaction } from "../types";
|
||||
import { FeeDisplay } from "./useFeeToggler";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useHasCode } from "../useErigonHooks";
|
||||
import { formatValue } from "../components/formatter";
|
||||
import ETH2USDValue from "../components/ETH2USDValue";
|
||||
import { Metadata } from "../sourcify/useSourcify";
|
||||
|
||||
type TransactionItemProps = {
|
||||
tx: ProcessedTransaction;
|
||||
selectedAddress?: string;
|
||||
feeDisplay: FeeDisplay;
|
||||
priceMap: Record<BlockTag, BigNumber>;
|
||||
metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
|
||||
};
|
||||
|
||||
const TransactionItem: React.FC<TransactionItemProps> = ({
|
||||
|
@ -35,7 +33,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
selectedAddress,
|
||||
feeDisplay,
|
||||
priceMap,
|
||||
metadatas,
|
||||
}) => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const toHasCode = useHasCode(
|
||||
|
@ -113,7 +110,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
address={tx.to}
|
||||
selectedAddress={selectedAddress}
|
||||
miner={tx.miner === tx.to}
|
||||
metadata={metadatas[tx.to]}
|
||||
eoa={toHasCode === undefined ? undefined : !toHasCode}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
|
@ -123,7 +119,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
address={tx.createdContractAddress!}
|
||||
selectedAddress={selectedAddress}
|
||||
creation
|
||||
metadata={metadatas[tx.createdContractAddress!]}
|
||||
eoa={false}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useContext, useMemo, useState } from "react";
|
||||
import React, { useContext, useState } from "react";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import { TransactionDescription } from "@ethersproject/abi";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
@ -25,11 +25,7 @@ import USDValue from "../components/USDValue";
|
|||
import FormattedBalance from "../components/FormattedBalance";
|
||||
import ETH2USDValue from "../components/ETH2USDValue";
|
||||
import TokenTransferItem from "../TokenTransferItem";
|
||||
import {
|
||||
TransactionData,
|
||||
InternalOperation,
|
||||
ChecksummedAddress,
|
||||
} from "../types";
|
||||
import { TransactionData, InternalOperation } from "../types";
|
||||
import PercentageBar from "../components/PercentageBar";
|
||||
import ExternalLink from "../components/ExternalLink";
|
||||
import RelativePosition from "../components/RelativePosition";
|
||||
|
@ -43,7 +39,6 @@ import {
|
|||
} from "../use4Bytes";
|
||||
import { DevDoc, Metadata, useError, UserDoc } from "../sourcify/useSourcify";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { useContractsMetadata } from "../hooks";
|
||||
import { useTransactionError } from "../useErigonHooks";
|
||||
import { useChainInfo } from "../useChainInfo";
|
||||
import { useETHUSDOracle } from "../usePriceOracle";
|
||||
|
@ -94,22 +89,6 @@ const Details: React.FC<DetailsProps> = ({
|
|||
txData?.confirmedData?.blockNumber
|
||||
);
|
||||
|
||||
const addresses = useMemo(() => {
|
||||
const _addresses: ChecksummedAddress[] = [];
|
||||
if (txData.to) {
|
||||
_addresses.push(txData.to);
|
||||
}
|
||||
if (txData.confirmedData?.createdContractAddress) {
|
||||
_addresses.push(txData.confirmedData.createdContractAddress);
|
||||
}
|
||||
for (const t of txData.tokenTransfers) {
|
||||
_addresses.push(t.from);
|
||||
_addresses.push(t.to);
|
||||
_addresses.push(t.token);
|
||||
}
|
||||
return _addresses;
|
||||
}, [txData]);
|
||||
const metadatas = useContractsMetadata(addresses, provider);
|
||||
const [errorMsg, outputData, isCustomError] = useTransactionError(
|
||||
provider,
|
||||
txData.transactionHash
|
||||
|
@ -269,11 +248,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||
<InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
|
||||
{txData.to ? (
|
||||
<div className="flex items-baseline space-x-2 -ml-1">
|
||||
<TransactionAddress
|
||||
address={txData.to}
|
||||
metadata={metadatas?.[txData.to]}
|
||||
showCodeIndicator
|
||||
/>
|
||||
<TransactionAddress address={txData.to} showCodeIndicator />
|
||||
<Copy value={txData.to} />
|
||||
</div>
|
||||
) : txData.confirmedData === undefined ? (
|
||||
|
@ -284,9 +259,6 @@ const Details: React.FC<DetailsProps> = ({
|
|||
<div className="flex items-baseline space-x-2 -ml-1">
|
||||
<TransactionAddress
|
||||
address={txData.confirmedData?.createdContractAddress!}
|
||||
metadata={
|
||||
metadatas?.[txData.confirmedData?.createdContractAddress!]
|
||||
}
|
||||
/>
|
||||
<Copy value={txData.confirmedData.createdContractAddress!} />
|
||||
</div>
|
||||
|
@ -316,7 +288,6 @@ const Details: React.FC<DetailsProps> = ({
|
|||
key={i}
|
||||
t={t}
|
||||
tokenMeta={txData.tokenMetas[t.token]}
|
||||
metadatas={metadatas}
|
||||
/>
|
||||
))}
|
||||
</InfoRow>
|
||||
|
|
|
@ -14,10 +14,9 @@ import { Metadata } from "../sourcify/useSourcify";
|
|||
type LogEntryProps = {
|
||||
log: Log;
|
||||
logDesc: LogDescription | null | undefined;
|
||||
metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
|
||||
};
|
||||
|
||||
const LogEntry: React.FC<LogEntryProps> = ({ log, logDesc, metadatas }) => {
|
||||
const LogEntry: React.FC<LogEntryProps> = ({ log, logDesc }) => {
|
||||
const rawTopic0 = log.topics[0];
|
||||
const topic0 = useTopic0(rawTopic0);
|
||||
|
||||
|
@ -56,10 +55,7 @@ const LogEntry: React.FC<LogEntryProps> = ({ log, logDesc, metadatas }) => {
|
|||
<div className="font-bold text-right">Address</div>
|
||||
<div className="col-span-11 mr-auto">
|
||||
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
|
||||
<TransactionAddress
|
||||
address={log.address}
|
||||
metadata={metadatas[log.address]}
|
||||
/>
|
||||
<TransactionAddress address={log.address} />
|
||||
<Copy value={log.address} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -62,12 +62,7 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
|
|||
{txData.confirmedData.logs.length > 0 ? (
|
||||
<>
|
||||
{txData.confirmedData.logs.map((l, i) => (
|
||||
<LogEntry
|
||||
key={i}
|
||||
log={l}
|
||||
logDesc={logDescs?.[i]}
|
||||
metadatas={metadatas}
|
||||
/>
|
||||
<LogEntry key={i} log={l} logDesc={logDescs?.[i]} />
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
|
|
Loading…
Reference in New Issue