Replace Sourcify metadata reading by SWR; 2nd batch of refactorings

This commit is contained in:
Willian Mitsuda 2022-08-09 20:04:15 -03:00
parent 0b210fd446
commit 39c11a1ed4
No known key found for this signature in database
9 changed files with 20 additions and 108 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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]} />
))}
</>
) : (