Merge branch 'develop' into feature/trace-tx
This commit is contained in:
commit
d2ae5f07fd
|
@ -41,7 +41,7 @@
|
||||||
"react-blockies": "^1.4.1",
|
"react-blockies": "^1.4.1",
|
||||||
"react-chartjs-2": "^3.3.0",
|
"react-chartjs-2": "^3.3.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-error-boundary": "^3.1.3",
|
"react-error-boundary": "^3.1.4",
|
||||||
"react-helmet-async": "^1.1.2",
|
"react-helmet-async": "^1.1.2",
|
||||||
"react-image": "^4.0.3",
|
"react-image": "^4.0.3",
|
||||||
"react-router-dom": "^5.3.0",
|
"react-router-dom": "^5.3.0",
|
||||||
|
@ -14621,9 +14621,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-error-boundary": {
|
"node_modules/react-error-boundary": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
|
||||||
"integrity": "sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==",
|
"integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.12.5"
|
"@babel/runtime": "^7.12.5"
|
||||||
},
|
},
|
||||||
|
@ -29543,9 +29543,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"react-error-boundary": {
|
"react-error-boundary": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
|
||||||
"integrity": "sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==",
|
"integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@babel/runtime": "^7.12.5"
|
"@babel/runtime": "^7.12.5"
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
"react-blockies": "^1.4.1",
|
"react-blockies": "^1.4.1",
|
||||||
"react-chartjs-2": "^3.3.0",
|
"react-chartjs-2": "^3.3.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-error-boundary": "^3.1.3",
|
"react-error-boundary": "^3.1.4",
|
||||||
"react-helmet-async": "^1.1.2",
|
"react-helmet-async": "^1.1.2",
|
||||||
"react-image": "^4.0.3",
|
"react-image": "^4.0.3",
|
||||||
"react-router-dom": "^5.3.0",
|
"react-router-dom": "^5.3.0",
|
||||||
|
|
|
@ -26,7 +26,7 @@ import PendingResults from "./search/PendingResults";
|
||||||
import TransactionItem from "./search/TransactionItem";
|
import TransactionItem from "./search/TransactionItem";
|
||||||
import { SearchController } from "./search/search";
|
import { SearchController } from "./search/search";
|
||||||
import { RuntimeContext } from "./useRuntime";
|
import { RuntimeContext } from "./useRuntime";
|
||||||
import { useENSCache } from "./useReverseCache";
|
import { pageCollector, useResolvedAddresses } from "./useResolvedAddresses";
|
||||||
import { useFeeToggler } from "./search/useFeeToggler";
|
import { useFeeToggler } from "./search/useFeeToggler";
|
||||||
import { SelectionContext, useSelection } from "./useSelection";
|
import { SelectionContext, useSelection } from "./useSelection";
|
||||||
import { useMultipleETHUSDOracle } from "./usePriceOracle";
|
import { useMultipleETHUSDOracle } from "./usePriceOracle";
|
||||||
|
@ -165,7 +165,8 @@ const AddressTransactions: React.FC = () => {
|
||||||
}, [provider, checksummedAddress, params.direction, hash, controller]);
|
}, [provider, checksummedAddress, params.direction, hash, controller]);
|
||||||
|
|
||||||
const page = useMemo(() => controller?.getPage(), [controller]);
|
const page = useMemo(() => controller?.getPage(), [controller]);
|
||||||
const reverseCache = useENSCache(provider, page);
|
const addrCollector = useMemo(() => pageCollector(page), [page]);
|
||||||
|
const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
|
||||||
|
|
||||||
const blockTags: BlockTag[] = useMemo(() => {
|
const blockTags: BlockTag[] = useMemo(() => {
|
||||||
if (!page) {
|
if (!page) {
|
||||||
|
@ -277,13 +278,13 @@ const AddressTransactions: React.FC = () => {
|
||||||
feeDisplay={feeDisplay}
|
feeDisplay={feeDisplay}
|
||||||
feeDisplayToggler={feeDisplayToggler}
|
feeDisplayToggler={feeDisplayToggler}
|
||||||
/>
|
/>
|
||||||
{controller ? (
|
{page ? (
|
||||||
<SelectionContext.Provider value={selectionCtx}>
|
<SelectionContext.Provider value={selectionCtx}>
|
||||||
{controller.getPage().map((tx) => (
|
{page.map((tx) => (
|
||||||
<TransactionItem
|
<TransactionItem
|
||||||
key={tx.hash}
|
key={tx.hash}
|
||||||
tx={tx}
|
tx={tx}
|
||||||
ensCache={reverseCache}
|
resolvedAddresses={resolvedAddresses}
|
||||||
selectedAddress={checksummedAddress}
|
selectedAddress={checksummedAddress}
|
||||||
feeDisplay={feeDisplay}
|
feeDisplay={feeDisplay}
|
||||||
priceMap={priceMap}
|
priceMap={priceMap}
|
||||||
|
|
|
@ -11,11 +11,13 @@ import {
|
||||||
TokenTransfer,
|
TokenTransfer,
|
||||||
TransactionData,
|
TransactionData,
|
||||||
} from "./types";
|
} from "./types";
|
||||||
|
import { ResolvedAddresses } from "./api/address-resolver";
|
||||||
|
|
||||||
type TokenTransferItemProps = {
|
type TokenTransferItemProps = {
|
||||||
t: TokenTransfer;
|
t: TokenTransfer;
|
||||||
txData: TransactionData;
|
txData: TransactionData;
|
||||||
tokenMeta: TokenMeta | null | undefined;
|
tokenMeta?: TokenMeta | null | undefined;
|
||||||
|
resolvedAddresses: ResolvedAddresses | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
// TODO: handle partial
|
// TODO: handle partial
|
||||||
|
@ -23,6 +25,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
||||||
t,
|
t,
|
||||||
txData,
|
txData,
|
||||||
tokenMeta,
|
tokenMeta,
|
||||||
|
resolvedAddresses,
|
||||||
}) => (
|
}) => (
|
||||||
<div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
|
<div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
|
||||||
<span className="text-gray-500">
|
<span className="text-gray-500">
|
||||||
|
@ -64,10 +67,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
||||||
<AddressHighlighter address={t.token}>
|
<AddressHighlighter address={t.token}>
|
||||||
<DecoratedAddressLink
|
<DecoratedAddressLink
|
||||||
address={t.token}
|
address={t.token}
|
||||||
text={
|
resolvedAddresses={resolvedAddresses}
|
||||||
tokenMeta ? `${tokenMeta.name} (${tokenMeta.symbol})` : undefined
|
|
||||||
}
|
|
||||||
tokenMeta={tokenMeta}
|
|
||||||
/>
|
/>
|
||||||
</AddressHighlighter>
|
</AddressHighlighter>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -11,6 +11,10 @@ import { useInternalOperations, useTxData } from "./useErigonHooks";
|
||||||
import { useETHUSDOracle } from "./usePriceOracle";
|
import { useETHUSDOracle } from "./usePriceOracle";
|
||||||
import { useAppConfigContext } from "./useAppConfig";
|
import { useAppConfigContext } from "./useAppConfig";
|
||||||
import { useSourcify, useTransactionDescription } from "./useSourcify";
|
import { useSourcify, useTransactionDescription } from "./useSourcify";
|
||||||
|
import {
|
||||||
|
transactionDataCollector,
|
||||||
|
useResolvedAddresses,
|
||||||
|
} from "./useResolvedAddresses";
|
||||||
|
|
||||||
const Details = React.lazy(
|
const Details = React.lazy(
|
||||||
() =>
|
() =>
|
||||||
|
@ -42,6 +46,11 @@ const Transaction: React.FC = () => {
|
||||||
const { txhash } = params;
|
const { txhash } = params;
|
||||||
|
|
||||||
const txData = useTxData(provider, txhash);
|
const txData = useTxData(provider, txhash);
|
||||||
|
const addrCollector = useMemo(
|
||||||
|
() => transactionDataCollector(txData),
|
||||||
|
[txData]
|
||||||
|
);
|
||||||
|
const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
|
||||||
|
|
||||||
const internalOps = useInternalOperations(provider, txData);
|
const internalOps = useInternalOperations(provider, txData);
|
||||||
const sendsEthToMiner = useMemo(() => {
|
const sendsEthToMiner = useMemo(() => {
|
||||||
|
@ -107,10 +116,15 @@ const Transaction: React.FC = () => {
|
||||||
internalOps={internalOps}
|
internalOps={internalOps}
|
||||||
sendsEthToMiner={sendsEthToMiner}
|
sendsEthToMiner={sendsEthToMiner}
|
||||||
ethUSDPrice={blockETHUSDPrice}
|
ethUSDPrice={blockETHUSDPrice}
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/tx/:txhash/logs/" exact>
|
<Route path="/tx/:txhash/logs/" exact>
|
||||||
<Logs txData={txData} metadata={metadata} />
|
<Logs
|
||||||
|
txData={txData}
|
||||||
|
metadata={metadata}
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
|
/>
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/tx/:txhash/trace" exact>
|
<Route path="/tx/:txhash/trace" exact>
|
||||||
<Trace txData={txData} />
|
<Trace txData={txData} />
|
||||||
|
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { BaseProvider } from "@ethersproject/providers";
|
||||||
|
import { IAddressResolver } from "./address-resolver";
|
||||||
|
|
||||||
|
export type SelectedResolvedName<T> = [IAddressResolver<T>, T] | null;
|
||||||
|
|
||||||
|
export class CompositeAddressResolver<T = any>
|
||||||
|
implements IAddressResolver<SelectedResolvedName<T>>
|
||||||
|
{
|
||||||
|
private resolvers: IAddressResolver<T>[] = [];
|
||||||
|
|
||||||
|
addResolver(resolver: IAddressResolver<T>) {
|
||||||
|
this.resolvers.push(resolver);
|
||||||
|
}
|
||||||
|
|
||||||
|
async resolveAddress(
|
||||||
|
provider: BaseProvider,
|
||||||
|
address: string
|
||||||
|
): Promise<SelectedResolvedName<T> | undefined> {
|
||||||
|
for (const r of this.resolvers) {
|
||||||
|
const resolvedAddress = await r.resolveAddress(provider, address);
|
||||||
|
if (resolvedAddress !== undefined) {
|
||||||
|
return [r, resolvedAddress];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { BaseProvider } from "@ethersproject/providers";
|
||||||
|
import { IAddressResolver } from "./address-resolver";
|
||||||
|
|
||||||
|
export class ENSAddressResolver implements IAddressResolver<string> {
|
||||||
|
async resolveAddress(
|
||||||
|
provider: BaseProvider,
|
||||||
|
address: string
|
||||||
|
): Promise<string | undefined> {
|
||||||
|
const name = await provider.lookupAddress(address);
|
||||||
|
if (name === null) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return name;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { BaseProvider } from "@ethersproject/providers";
|
||||||
|
import { Contract } from "@ethersproject/contracts";
|
||||||
|
import { IAddressResolver } from "./address-resolver";
|
||||||
|
import erc20 from "../../erc20.json";
|
||||||
|
import { TokenMeta } from "../../types";
|
||||||
|
|
||||||
|
export class ERCTokenResolver implements IAddressResolver<TokenMeta> {
|
||||||
|
async resolveAddress(
|
||||||
|
provider: BaseProvider,
|
||||||
|
address: string
|
||||||
|
): Promise<TokenMeta | undefined> {
|
||||||
|
const erc20Contract = new Contract(address, erc20, provider);
|
||||||
|
try {
|
||||||
|
const [name, symbol, decimals] = await Promise.all([
|
||||||
|
erc20Contract.name(),
|
||||||
|
erc20Contract.symbol(),
|
||||||
|
erc20Contract.decimals(),
|
||||||
|
]);
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
symbol,
|
||||||
|
decimals,
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
// Ignore on purpose; this indicates the probe failed and the address
|
||||||
|
// is not a token
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,16 @@
|
||||||
|
import React from "react";
|
||||||
|
import { BaseProvider } from "@ethersproject/providers";
|
||||||
|
|
||||||
|
export interface IAddressResolver<T> {
|
||||||
|
resolveAddress(
|
||||||
|
provider: BaseProvider,
|
||||||
|
address: string
|
||||||
|
): Promise<T | undefined>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ResolvedAddressRenderer<T> = (
|
||||||
|
address: string,
|
||||||
|
resolvedAddress: T,
|
||||||
|
linkable: boolean,
|
||||||
|
dontOverrideColors: boolean
|
||||||
|
) => React.ReactElement;
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { BaseProvider } from "@ethersproject/providers";
|
||||||
|
import { ensRenderer } from "../../components/ENSName";
|
||||||
|
import { tokenRenderer } from "../../components/TokenName";
|
||||||
|
import { IAddressResolver, ResolvedAddressRenderer } from "./address-resolver";
|
||||||
|
import {
|
||||||
|
CompositeAddressResolver,
|
||||||
|
SelectedResolvedName,
|
||||||
|
} from "./CompositeAddressResolver";
|
||||||
|
import { ENSAddressResolver } from "./ENSAddressResolver";
|
||||||
|
import { ERCTokenResolver } from "./ERCTokenResolver";
|
||||||
|
|
||||||
|
export type ResolvedAddresses = Record<string, SelectedResolvedName<any>>;
|
||||||
|
|
||||||
|
// Create and configure the main resolver
|
||||||
|
export const ensResolver = new ENSAddressResolver();
|
||||||
|
export const ercTokenResolver = new ERCTokenResolver();
|
||||||
|
|
||||||
|
const _mainResolver = new CompositeAddressResolver();
|
||||||
|
_mainResolver.addResolver(ensResolver);
|
||||||
|
_mainResolver.addResolver(ercTokenResolver);
|
||||||
|
|
||||||
|
export const mainResolver: IAddressResolver<SelectedResolvedName<any>> =
|
||||||
|
_mainResolver;
|
||||||
|
|
||||||
|
export const resolverRendererRegistry = new Map<
|
||||||
|
IAddressResolver<any>,
|
||||||
|
ResolvedAddressRenderer<any>
|
||||||
|
>();
|
||||||
|
resolverRendererRegistry.set(ensResolver, ensRenderer);
|
||||||
|
resolverRendererRegistry.set(ercTokenResolver, tokenRenderer);
|
||||||
|
|
||||||
|
// TODO: implement progressive resolving
|
||||||
|
export const batchPopulate = async (
|
||||||
|
provider: BaseProvider,
|
||||||
|
addresses: string[],
|
||||||
|
currentMap: ResolvedAddresses | undefined
|
||||||
|
): Promise<ResolvedAddresses> => {
|
||||||
|
const solvers: Promise<SelectedResolvedName<any> | undefined>[] = [];
|
||||||
|
const unresolvedAddresses = addresses.filter(
|
||||||
|
(a) => currentMap?.[a] === undefined
|
||||||
|
);
|
||||||
|
for (const a of unresolvedAddresses) {
|
||||||
|
solvers.push(mainResolver.resolveAddress(provider, a));
|
||||||
|
}
|
||||||
|
|
||||||
|
const resultMap: ResolvedAddresses = currentMap ? { ...currentMap } : {};
|
||||||
|
const results = await Promise.all(solvers);
|
||||||
|
for (let i = 0; i < results.length; i++) {
|
||||||
|
const r = results[i];
|
||||||
|
if (r === undefined) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
resultMap[unresolvedAddresses[i]] = r;
|
||||||
|
}
|
||||||
|
|
||||||
|
return resultMap;
|
||||||
|
};
|
|
@ -8,7 +8,7 @@ import TransactionItem from "../search/TransactionItem";
|
||||||
import { useFeeToggler } from "../search/useFeeToggler";
|
import { useFeeToggler } from "../search/useFeeToggler";
|
||||||
import { RuntimeContext } from "../useRuntime";
|
import { RuntimeContext } from "../useRuntime";
|
||||||
import { SelectionContext, useSelection } from "../useSelection";
|
import { SelectionContext, useSelection } from "../useSelection";
|
||||||
import { useENSCache } from "../useReverseCache";
|
import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses";
|
||||||
import { ProcessedTransaction } from "../types";
|
import { ProcessedTransaction } from "../types";
|
||||||
import { PAGE_SIZE } from "../params";
|
import { PAGE_SIZE } from "../params";
|
||||||
import { useMultipleETHUSDOracle } from "../usePriceOracle";
|
import { useMultipleETHUSDOracle } from "../usePriceOracle";
|
||||||
|
@ -29,7 +29,8 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
|
||||||
const selectionCtx = useSelection();
|
const selectionCtx = useSelection();
|
||||||
const [feeDisplay, feeDisplayToggler] = useFeeToggler();
|
const [feeDisplay, feeDisplayToggler] = useFeeToggler();
|
||||||
const { provider } = useContext(RuntimeContext);
|
const { provider } = useContext(RuntimeContext);
|
||||||
const reverseCache = useENSCache(provider, page);
|
const addrCollector = useMemo(() => pageCollector(page), [page]);
|
||||||
|
const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
|
||||||
const blockTags = useMemo(() => [blockTag], [blockTag]);
|
const blockTags = useMemo(() => [blockTag], [blockTag]);
|
||||||
const priceMap = useMultipleETHUSDOracle(provider, blockTags);
|
const priceMap = useMultipleETHUSDOracle(provider, blockTags);
|
||||||
|
|
||||||
|
@ -59,7 +60,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
|
||||||
<TransactionItem
|
<TransactionItem
|
||||||
key={tx.hash}
|
key={tx.hash}
|
||||||
tx={tx}
|
tx={tx}
|
||||||
ensCache={reverseCache}
|
resolvedAddresses={resolvedAddresses}
|
||||||
feeDisplay={feeDisplay}
|
feeDisplay={feeDisplay}
|
||||||
priceMap={priceMap}
|
priceMap={priceMap}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,13 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
type AddressProps = {
|
|
||||||
address: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const Address: React.FC<AddressProps> = ({ address }) => (
|
|
||||||
<span className="font-address text-gray-400 truncate" title={address}>
|
|
||||||
<span className="truncate">{address}</span>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default React.memo(Address);
|
|
|
@ -1,51 +1,49 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import Address from "./Address";
|
import {
|
||||||
import AddressLink from "./AddressLink";
|
ResolvedAddresses,
|
||||||
import ENSName from "./ENSName";
|
resolverRendererRegistry,
|
||||||
import ENSNameLink from "./ENSNameLink";
|
} from "../api/address-resolver";
|
||||||
|
import PlainAddress from "./PlainAddress";
|
||||||
|
|
||||||
type AddressOrENSNameProps = {
|
type AddressOrENSNameProps = {
|
||||||
address: string;
|
address: string;
|
||||||
ensName?: string;
|
|
||||||
selectedAddress?: string;
|
selectedAddress?: string;
|
||||||
text?: string;
|
|
||||||
dontOverrideColors?: boolean;
|
dontOverrideColors?: boolean;
|
||||||
|
resolvedAddresses?: ResolvedAddresses | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
|
const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
|
||||||
address,
|
address,
|
||||||
ensName,
|
|
||||||
selectedAddress,
|
selectedAddress,
|
||||||
text,
|
|
||||||
dontOverrideColors,
|
dontOverrideColors,
|
||||||
}) => (
|
resolvedAddresses,
|
||||||
<>
|
}) => {
|
||||||
{address === selectedAddress ? (
|
const resolvedAddress = resolvedAddresses?.[address];
|
||||||
<>
|
const linkable = address !== selectedAddress;
|
||||||
{ensName ? (
|
|
||||||
<ENSName name={ensName} address={address} />
|
if (!resolvedAddress) {
|
||||||
) : (
|
return (
|
||||||
<Address address={address} />
|
<PlainAddress
|
||||||
)}
|
address={address}
|
||||||
</>
|
linkable={linkable}
|
||||||
) : (
|
dontOverrideColors={dontOverrideColors}
|
||||||
<>
|
/>
|
||||||
{ensName ? (
|
);
|
||||||
<ENSNameLink
|
}
|
||||||
name={ensName}
|
|
||||||
address={address}
|
const [resolver, resolvedName] = resolvedAddress;
|
||||||
dontOverrideColors={dontOverrideColors}
|
const renderer = resolverRendererRegistry.get(resolver);
|
||||||
/>
|
if (renderer === undefined) {
|
||||||
) : (
|
return (
|
||||||
<AddressLink
|
<PlainAddress
|
||||||
address={address}
|
address={address}
|
||||||
text={text}
|
linkable={linkable}
|
||||||
dontOverrideColors={dontOverrideColors}
|
dontOverrideColors={dontOverrideColors}
|
||||||
/>
|
/>
|
||||||
)}
|
);
|
||||||
</>
|
}
|
||||||
)}
|
|
||||||
</>
|
return renderer(address, resolvedName, linkable, !!dontOverrideColors);
|
||||||
);
|
};
|
||||||
|
|
||||||
export default AddressOrENSName;
|
export default AddressOrENSName;
|
||||||
|
|
|
@ -5,36 +5,32 @@ import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
|
||||||
import { faMoneyBillAlt } from "@fortawesome/free-solid-svg-icons/faMoneyBillAlt";
|
import { faMoneyBillAlt } from "@fortawesome/free-solid-svg-icons/faMoneyBillAlt";
|
||||||
import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
|
import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
|
||||||
import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
|
import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
|
||||||
import TokenLogo from "./TokenLogo";
|
|
||||||
import AddressOrENSName from "./AddressOrENSName";
|
import AddressOrENSName from "./AddressOrENSName";
|
||||||
import { AddressContext, TokenMeta, ZERO_ADDRESS } from "../types";
|
import { AddressContext, ZERO_ADDRESS } from "../types";
|
||||||
|
import { ResolvedAddresses } from "../api/address-resolver";
|
||||||
|
|
||||||
type DecoratedAddressLinkProps = {
|
type DecoratedAddressLinkProps = {
|
||||||
address: string;
|
address: string;
|
||||||
ensName?: string;
|
|
||||||
selectedAddress?: string;
|
selectedAddress?: string;
|
||||||
text?: string;
|
|
||||||
addressCtx?: AddressContext;
|
addressCtx?: AddressContext;
|
||||||
creation?: boolean;
|
creation?: boolean;
|
||||||
miner?: boolean;
|
miner?: boolean;
|
||||||
selfDestruct?: boolean;
|
selfDestruct?: boolean;
|
||||||
txFrom?: boolean;
|
txFrom?: boolean;
|
||||||
txTo?: boolean;
|
txTo?: boolean;
|
||||||
tokenMeta?: TokenMeta | null | undefined;
|
resolvedAddresses?: ResolvedAddresses | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
|
const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
|
||||||
address,
|
address,
|
||||||
ensName,
|
|
||||||
selectedAddress,
|
selectedAddress,
|
||||||
text,
|
|
||||||
addressCtx,
|
addressCtx,
|
||||||
creation,
|
creation,
|
||||||
miner,
|
miner,
|
||||||
selfDestruct,
|
selfDestruct,
|
||||||
txFrom,
|
txFrom,
|
||||||
txTo,
|
txTo,
|
||||||
tokenMeta,
|
resolvedAddresses,
|
||||||
}) => {
|
}) => {
|
||||||
const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
|
const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
|
||||||
const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
|
const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
|
||||||
|
@ -74,20 +70,14 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
|
||||||
<FontAwesomeIcon icon={faCoins} size="1x" />
|
<FontAwesomeIcon icon={faCoins} size="1x" />
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{tokenMeta && (
|
|
||||||
<div className="self-center">
|
|
||||||
<TokenLogo address={address} name={tokenMeta.name} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<AddressOrENSName
|
<AddressOrENSName
|
||||||
address={address}
|
address={address}
|
||||||
ensName={ensName}
|
|
||||||
selectedAddress={selectedAddress}
|
selectedAddress={selectedAddress}
|
||||||
text={text}
|
|
||||||
dontOverrideColors={mint || burn}
|
dontOverrideColors={mint || burn}
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default React.memo(DecoratedAddresssLink);
|
export default React.memo(DecoratedAddressLink);
|
||||||
|
|
|
@ -1,25 +1,75 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolver";
|
||||||
import ENSLogo from "./ensLogo.svg";
|
import ENSLogo from "./ensLogo.svg";
|
||||||
|
|
||||||
type ENSNameProps = {
|
type ENSNameProps = {
|
||||||
name: string;
|
name: string;
|
||||||
address: string;
|
address: string;
|
||||||
|
linkable: boolean;
|
||||||
|
dontOverrideColors?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const ENSName: React.FC<ENSNameProps> = ({ name, address }) => (
|
const ENSName: React.FC<ENSNameProps> = ({
|
||||||
<div
|
name,
|
||||||
className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
|
address,
|
||||||
title={`${name}: ${address}`}
|
linkable,
|
||||||
>
|
dontOverrideColors,
|
||||||
|
}) => {
|
||||||
|
if (linkable) {
|
||||||
|
return (
|
||||||
|
<NavLink
|
||||||
|
className={`flex items-baseline space-x-1 font-sans ${
|
||||||
|
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
|
||||||
|
} truncate`}
|
||||||
|
to={`/address/${name}`}
|
||||||
|
title={`${name}: ${address}`}
|
||||||
|
>
|
||||||
|
<Content linkable={true} name={name} />
|
||||||
|
</NavLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
|
||||||
|
title={`${name}: ${address}`}
|
||||||
|
>
|
||||||
|
<Content linkable={false} name={name} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
type ContentProps = {
|
||||||
|
linkable: boolean;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Content: React.FC<ContentProps> = ({ linkable, name }) => (
|
||||||
|
<>
|
||||||
<img
|
<img
|
||||||
className="self-center filter grayscale"
|
className={`self-center ${linkable ? "" : "filter grayscale"}`}
|
||||||
src={ENSLogo}
|
src={ENSLogo}
|
||||||
alt="ENS Logo"
|
alt="ENS Logo"
|
||||||
width={12}
|
width={12}
|
||||||
height={12}
|
height={12}
|
||||||
/>
|
/>
|
||||||
<span className="truncate">{name}</span>
|
<span className="truncate">{name}</span>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default React.memo(ENSName);
|
export const ensRenderer: ResolvedAddressRenderer<string> = (
|
||||||
|
address,
|
||||||
|
resolvedAddress,
|
||||||
|
linkable,
|
||||||
|
dontOverrideColors
|
||||||
|
) => (
|
||||||
|
<ENSName
|
||||||
|
address={address}
|
||||||
|
name={resolvedAddress}
|
||||||
|
linkable={linkable}
|
||||||
|
dontOverrideColors={dontOverrideColors}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default ENSName;
|
||||||
|
|
|
@ -3,17 +3,23 @@ import InternalTransfer from "./InternalTransfer";
|
||||||
import InternalSelfDestruct from "./InternalSelfDestruct";
|
import InternalSelfDestruct from "./InternalSelfDestruct";
|
||||||
import InternalCreate from "./InternalCreate";
|
import InternalCreate from "./InternalCreate";
|
||||||
import { TransactionData, InternalOperation, OperationType } from "../types";
|
import { TransactionData, InternalOperation, OperationType } from "../types";
|
||||||
|
import { ResolvedAddresses } from "../api/address-resolver";
|
||||||
|
|
||||||
type InternalTransactionOperationProps = {
|
type InternalTransactionOperationProps = {
|
||||||
txData: TransactionData;
|
txData: TransactionData;
|
||||||
internalOp: InternalOperation;
|
internalOp: InternalOperation;
|
||||||
|
resolvedAddresses: ResolvedAddresses | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
const InternalTransactionOperation: React.FC<InternalTransactionOperationProps> =
|
const InternalTransactionOperation: React.FC<InternalTransactionOperationProps> =
|
||||||
({ txData, internalOp }) => (
|
({ txData, internalOp, resolvedAddresses }) => (
|
||||||
<>
|
<>
|
||||||
{internalOp.type === OperationType.TRANSFER && (
|
{internalOp.type === OperationType.TRANSFER && (
|
||||||
<InternalTransfer txData={txData} internalOp={internalOp} />
|
<InternalTransfer
|
||||||
|
txData={txData}
|
||||||
|
internalOp={internalOp}
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
{internalOp.type === OperationType.SELF_DESTRUCT && (
|
{internalOp.type === OperationType.SELF_DESTRUCT && (
|
||||||
<InternalSelfDestruct txData={txData} internalOp={internalOp} />
|
<InternalSelfDestruct txData={txData} internalOp={internalOp} />
|
||||||
|
|
|
@ -5,15 +5,18 @@ import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
|
||||||
import AddressHighlighter from "./AddressHighlighter";
|
import AddressHighlighter from "./AddressHighlighter";
|
||||||
import DecoratedAddressLink from "./DecoratedAddressLink";
|
import DecoratedAddressLink from "./DecoratedAddressLink";
|
||||||
import { TransactionData, InternalOperation } from "../types";
|
import { TransactionData, InternalOperation } from "../types";
|
||||||
|
import { ResolvedAddresses } from "../api/address-resolver";
|
||||||
|
|
||||||
type InternalTransferProps = {
|
type InternalTransferProps = {
|
||||||
txData: TransactionData;
|
txData: TransactionData;
|
||||||
internalOp: InternalOperation;
|
internalOp: InternalOperation;
|
||||||
|
resolvedAddresses: ResolvedAddresses | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
const InternalTransfer: React.FC<InternalTransferProps> = ({
|
const InternalTransfer: React.FC<InternalTransferProps> = ({
|
||||||
txData,
|
txData,
|
||||||
internalOp,
|
internalOp,
|
||||||
|
resolvedAddresses,
|
||||||
}) => {
|
}) => {
|
||||||
const fromMiner =
|
const fromMiner =
|
||||||
txData.confirmedData?.miner !== undefined &&
|
txData.confirmedData?.miner !== undefined &&
|
||||||
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
import React from "react";
|
||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
|
||||||
|
type PlainAddressProps = {
|
||||||
|
address: string;
|
||||||
|
linkable: boolean;
|
||||||
|
dontOverrideColors: boolean | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const PlainAddress: React.FC<PlainAddressProps> = ({
|
||||||
|
address,
|
||||||
|
linkable,
|
||||||
|
dontOverrideColors,
|
||||||
|
}) => {
|
||||||
|
if (linkable) {
|
||||||
|
return (
|
||||||
|
<NavLink
|
||||||
|
className={`${
|
||||||
|
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
|
||||||
|
} font-address truncate`}
|
||||||
|
to={`/address/${address}`}
|
||||||
|
title={address}
|
||||||
|
>
|
||||||
|
{address}
|
||||||
|
</NavLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className="font-address text-gray-400 truncate" title={address}>
|
||||||
|
{address}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PlainAddress;
|
|
@ -9,7 +9,7 @@ type TokenLogoProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const TokenLogo: React.FC<TokenLogoProps> = (props) => (
|
const TokenLogo: React.FC<TokenLogoProps> = (props) => (
|
||||||
<Suspense fallback={<></>}>
|
<Suspense fallback={null}>
|
||||||
<InternalTokenLogo {...props} />
|
<InternalTokenLogo {...props} />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1,91 @@
|
||||||
|
import React from "react";
|
||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
import TokenLogo from "./TokenLogo";
|
||||||
|
import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolver";
|
||||||
|
import { TokenMeta } from "../types";
|
||||||
|
|
||||||
|
type TokenNameProps = {
|
||||||
|
address: string;
|
||||||
|
name: string;
|
||||||
|
symbol: string;
|
||||||
|
linkable: boolean;
|
||||||
|
dontOverrideColors?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const TokenName: React.FC<TokenNameProps> = ({
|
||||||
|
address,
|
||||||
|
name,
|
||||||
|
symbol,
|
||||||
|
linkable,
|
||||||
|
dontOverrideColors,
|
||||||
|
}) => {
|
||||||
|
if (linkable) {
|
||||||
|
return (
|
||||||
|
<NavLink
|
||||||
|
className={`flex items-baseline space-x-1 font-sans ${
|
||||||
|
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
|
||||||
|
} truncate`}
|
||||||
|
to={`/address/${address}`}
|
||||||
|
title={`${name} (${symbol}): ${address}`}
|
||||||
|
>
|
||||||
|
<Content
|
||||||
|
address={address}
|
||||||
|
linkable={true}
|
||||||
|
name={name}
|
||||||
|
symbol={symbol}
|
||||||
|
/>
|
||||||
|
</NavLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
|
||||||
|
title={`${name} (${symbol}): ${address}`}
|
||||||
|
>
|
||||||
|
<Content address={address} linkable={false} name={name} symbol={symbol} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
type ContentProps = {
|
||||||
|
address: string;
|
||||||
|
name: string;
|
||||||
|
symbol: string;
|
||||||
|
linkable: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Content: React.FC<ContentProps> = ({
|
||||||
|
address,
|
||||||
|
name,
|
||||||
|
symbol,
|
||||||
|
linkable,
|
||||||
|
}) => (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
|
||||||
|
>
|
||||||
|
<TokenLogo address={address} name={name} />
|
||||||
|
</div>
|
||||||
|
<span className="truncate">
|
||||||
|
{name} ({symbol})
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const tokenRenderer: ResolvedAddressRenderer<TokenMeta> = (
|
||||||
|
address,
|
||||||
|
tokenMeta,
|
||||||
|
linkable,
|
||||||
|
dontOverrideColors
|
||||||
|
) => (
|
||||||
|
<TokenName
|
||||||
|
address={address}
|
||||||
|
name={tokenMeta.name}
|
||||||
|
symbol={tokenMeta.symbol}
|
||||||
|
linkable={linkable}
|
||||||
|
dontOverrideColors={dontOverrideColors}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default TokenName;
|
|
@ -14,14 +14,15 @@ import TransactionDirection, {
|
||||||
Flags,
|
Flags,
|
||||||
} from "../components/TransactionDirection";
|
} from "../components/TransactionDirection";
|
||||||
import TransactionValue from "../components/TransactionValue";
|
import TransactionValue from "../components/TransactionValue";
|
||||||
import { ENSReverseCache, ProcessedTransaction } from "../types";
|
import { ProcessedTransaction } from "../types";
|
||||||
import { FeeDisplay } from "./useFeeToggler";
|
import { FeeDisplay } from "./useFeeToggler";
|
||||||
import { formatValue } from "../components/formatter";
|
import { formatValue } from "../components/formatter";
|
||||||
import ETH2USDValue from "../components/ETH2USDValue";
|
import ETH2USDValue from "../components/ETH2USDValue";
|
||||||
|
import { ResolvedAddresses } from "../api/address-resolver";
|
||||||
|
|
||||||
type TransactionItemProps = {
|
type TransactionItemProps = {
|
||||||
tx: ProcessedTransaction;
|
tx: ProcessedTransaction;
|
||||||
ensCache?: ENSReverseCache;
|
resolvedAddresses?: ResolvedAddresses;
|
||||||
selectedAddress?: string;
|
selectedAddress?: string;
|
||||||
feeDisplay: FeeDisplay;
|
feeDisplay: FeeDisplay;
|
||||||
priceMap: Record<BlockTag, BigNumber>;
|
priceMap: Record<BlockTag, BigNumber>;
|
||||||
|
@ -29,7 +30,7 @@ type TransactionItemProps = {
|
||||||
|
|
||||||
const TransactionItem: React.FC<TransactionItemProps> = ({
|
const TransactionItem: React.FC<TransactionItemProps> = ({
|
||||||
tx,
|
tx,
|
||||||
ensCache,
|
resolvedAddresses,
|
||||||
selectedAddress,
|
selectedAddress,
|
||||||
feeDisplay,
|
feeDisplay,
|
||||||
priceMap,
|
priceMap,
|
||||||
|
@ -50,12 +51,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const ensFrom = ensCache && tx.from && ensCache[tx.from];
|
|
||||||
const ensTo = ensCache && tx.to && ensCache[tx.to];
|
|
||||||
const ensCreated =
|
|
||||||
ensCache &&
|
|
||||||
tx.createdContractAddress &&
|
|
||||||
ensCache[tx.createdContractAddress];
|
|
||||||
const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction;
|
const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -87,9 +82,9 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
||||||
<AddressHighlighter address={tx.from}>
|
<AddressHighlighter address={tx.from}>
|
||||||
<DecoratedAddressLink
|
<DecoratedAddressLink
|
||||||
address={tx.from}
|
address={tx.from}
|
||||||
ensName={ensFrom}
|
|
||||||
selectedAddress={selectedAddress}
|
selectedAddress={selectedAddress}
|
||||||
miner={tx.miner === tx.from}
|
miner={tx.miner === tx.from}
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
</AddressHighlighter>
|
</AddressHighlighter>
|
||||||
)}
|
)}
|
||||||
|
@ -107,18 +102,18 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
||||||
<AddressHighlighter address={tx.to}>
|
<AddressHighlighter address={tx.to}>
|
||||||
<DecoratedAddressLink
|
<DecoratedAddressLink
|
||||||
address={tx.to}
|
address={tx.to}
|
||||||
ensName={ensTo}
|
|
||||||
selectedAddress={selectedAddress}
|
selectedAddress={selectedAddress}
|
||||||
miner={tx.miner === tx.to}
|
miner={tx.miner === tx.to}
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
</AddressHighlighter>
|
</AddressHighlighter>
|
||||||
) : (
|
) : (
|
||||||
<AddressHighlighter address={tx.createdContractAddress!}>
|
<AddressHighlighter address={tx.createdContractAddress!}>
|
||||||
<DecoratedAddressLink
|
<DecoratedAddressLink
|
||||||
address={tx.createdContractAddress!}
|
address={tx.createdContractAddress!}
|
||||||
ensName={ensCreated}
|
|
||||||
selectedAddress={selectedAddress}
|
selectedAddress={selectedAddress}
|
||||||
creation
|
creation
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
</AddressHighlighter>
|
</AddressHighlighter>
|
||||||
)}
|
)}
|
||||||
|
@ -144,4 +139,4 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default React.memo(TransactionItem);
|
export default TransactionItem;
|
||||||
|
|
|
@ -38,6 +38,7 @@ import ModeTab from "../components/ModeTab";
|
||||||
import DecodedParamsTable from "./decoder/DecodedParamsTable";
|
import DecodedParamsTable from "./decoder/DecodedParamsTable";
|
||||||
import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
|
import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
|
||||||
import { DevDoc, UserDoc } from "../useSourcify";
|
import { DevDoc, UserDoc } from "../useSourcify";
|
||||||
|
import { ResolvedAddresses } from "../api/address-resolver";
|
||||||
|
|
||||||
type DetailsProps = {
|
type DetailsProps = {
|
||||||
txData: TransactionData;
|
txData: TransactionData;
|
||||||
|
@ -47,6 +48,7 @@ type DetailsProps = {
|
||||||
internalOps?: InternalOperation[];
|
internalOps?: InternalOperation[];
|
||||||
sendsEthToMiner: boolean;
|
sendsEthToMiner: boolean;
|
||||||
ethUSDPrice: BigNumber | undefined;
|
ethUSDPrice: BigNumber | undefined;
|
||||||
|
resolvedAddresses: ResolvedAddresses | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Details: React.FC<DetailsProps> = ({
|
const Details: React.FC<DetailsProps> = ({
|
||||||
|
@ -57,6 +59,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||||
internalOps,
|
internalOps,
|
||||||
sendsEthToMiner,
|
sendsEthToMiner,
|
||||||
ethUSDPrice,
|
ethUSDPrice,
|
||||||
|
resolvedAddresses,
|
||||||
}) => {
|
}) => {
|
||||||
const hasEIP1559 =
|
const hasEIP1559 =
|
||||||
txData.confirmedData?.blockBaseFeePerGas !== undefined &&
|
txData.confirmedData?.blockBaseFeePerGas !== undefined &&
|
||||||
|
@ -154,6 +157,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||||
address={txData.from}
|
address={txData.from}
|
||||||
miner={txData.from === txData.confirmedData?.miner}
|
miner={txData.from === txData.confirmedData?.miner}
|
||||||
txFrom
|
txFrom
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
</AddressHighlighter>
|
</AddressHighlighter>
|
||||||
<Copy value={txData.from} />
|
<Copy value={txData.from} />
|
||||||
|
@ -171,6 +175,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||||
address={txData.to}
|
address={txData.to}
|
||||||
miner={txData.to === txData.confirmedData?.miner}
|
miner={txData.to === txData.confirmedData?.miner}
|
||||||
txTo
|
txTo
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
</AddressHighlighter>
|
</AddressHighlighter>
|
||||||
<Copy value={txData.to} />
|
<Copy value={txData.to} />
|
||||||
|
@ -188,6 +193,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||||
address={txData.confirmedData.createdContractAddress!}
|
address={txData.confirmedData.createdContractAddress!}
|
||||||
creation
|
creation
|
||||||
txTo
|
txTo
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
</AddressHighlighter>
|
</AddressHighlighter>
|
||||||
<Copy value={txData.confirmedData.createdContractAddress!} />
|
<Copy value={txData.confirmedData.createdContractAddress!} />
|
||||||
|
@ -200,6 +206,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||||
key={i}
|
key={i}
|
||||||
txData={txData}
|
txData={txData}
|
||||||
internalOp={op}
|
internalOp={op}
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
@ -219,6 +226,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||||
t={t}
|
t={t}
|
||||||
txData={txData}
|
txData={txData}
|
||||||
tokenMeta={txData.tokenMetas[t.token]}
|
tokenMeta={txData.tokenMetas[t.token]}
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -10,14 +10,21 @@ import DecodedParamsTable from "./decoder/DecodedParamsTable";
|
||||||
import DecodedLogSignature from "./decoder/DecodedLogSignature";
|
import DecodedLogSignature from "./decoder/DecodedLogSignature";
|
||||||
import { TransactionData } from "../types";
|
import { TransactionData } from "../types";
|
||||||
import { useTopic0 } from "../useTopic0";
|
import { useTopic0 } from "../useTopic0";
|
||||||
|
import { ResolvedAddresses } from "../api/address-resolver";
|
||||||
|
|
||||||
type LogEntryProps = {
|
type LogEntryProps = {
|
||||||
txData: TransactionData;
|
txData: TransactionData;
|
||||||
log: Log;
|
log: Log;
|
||||||
logDesc: LogDescription | null | undefined;
|
logDesc: LogDescription | null | undefined;
|
||||||
|
resolvedAddresses: ResolvedAddresses | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => {
|
const LogEntry: React.FC<LogEntryProps> = ({
|
||||||
|
txData,
|
||||||
|
log,
|
||||||
|
logDesc,
|
||||||
|
resolvedAddresses,
|
||||||
|
}) => {
|
||||||
const rawTopic0 = log.topics[0];
|
const rawTopic0 = log.topics[0];
|
||||||
const topic0 = useTopic0(rawTopic0);
|
const topic0 = useTopic0(rawTopic0);
|
||||||
|
|
||||||
|
@ -62,6 +69,7 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => {
|
||||||
miner={log.address === txData.confirmedData?.miner}
|
miner={log.address === txData.confirmedData?.miner}
|
||||||
txFrom={log.address === txData.from}
|
txFrom={log.address === txData.from}
|
||||||
txTo={log.address === txData.to}
|
txTo={log.address === txData.to}
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
</AddressHighlighter>
|
</AddressHighlighter>
|
||||||
<Copy value={log.address} />
|
<Copy value={log.address} />
|
||||||
|
|
|
@ -5,13 +5,15 @@ import LogEntry from "./LogEntry";
|
||||||
import { TransactionData } from "../types";
|
import { TransactionData } from "../types";
|
||||||
import { useAppConfigContext } from "../useAppConfig";
|
import { useAppConfigContext } from "../useAppConfig";
|
||||||
import { Metadata, useMultipleMetadata } from "../useSourcify";
|
import { Metadata, useMultipleMetadata } from "../useSourcify";
|
||||||
|
import { ResolvedAddresses } from "../api/address-resolver";
|
||||||
|
|
||||||
type LogsProps = {
|
type LogsProps = {
|
||||||
txData: TransactionData;
|
txData: TransactionData;
|
||||||
metadata: Metadata | null | undefined;
|
metadata: Metadata | null | undefined;
|
||||||
|
resolvedAddresses: ResolvedAddresses | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
|
const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
|
||||||
const baseMetadatas = useMemo((): Record<string, Metadata | null> => {
|
const baseMetadatas = useMemo((): Record<string, Metadata | null> => {
|
||||||
if (!txData.to || metadata === undefined) {
|
if (!txData.to || metadata === undefined) {
|
||||||
return {};
|
return {};
|
||||||
|
@ -70,6 +72,7 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
|
||||||
txData={txData}
|
txData={txData}
|
||||||
log={l}
|
log={l}
|
||||||
logDesc={logDescs?.[i]}
|
logDesc={logDescs?.[i]}
|
||||||
|
resolvedAddresses={resolvedAddresses}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -32,10 +32,6 @@ export type TransactionChunk = {
|
||||||
lastPage: boolean;
|
lastPage: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ENSReverseCache = {
|
|
||||||
[address: string]: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type TransactionData = {
|
export type TransactionData = {
|
||||||
transactionHash: string;
|
transactionHash: string;
|
||||||
from: string;
|
from: string;
|
||||||
|
|
|
@ -38,7 +38,7 @@ const resolveSourcifySource = (source: SourcifySource) => {
|
||||||
return sourcifyHttpRepoPrefix;
|
return sourcifyHttpRepoPrefix;
|
||||||
}
|
}
|
||||||
|
|
||||||
throw new Error(`Unknown Sourcify intergration source code: ${source}`);
|
throw new Error(`Unknown Sourcify integration source code: ${source}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const sourcifyMetadata = (
|
export const sourcifyMetadata = (
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { JsonRpcProvider, WebSocketProvider } from "@ethersproject/providers";
|
import {
|
||||||
|
JsonRpcProvider,
|
||||||
|
JsonRpcBatchProvider,
|
||||||
|
WebSocketProvider,
|
||||||
|
} from "@ethersproject/providers";
|
||||||
import { ConnectionStatus } from "./types";
|
import { ConnectionStatus } from "./types";
|
||||||
import { MIN_API_LEVEL } from "./params";
|
import { MIN_API_LEVEL } from "./params";
|
||||||
|
|
||||||
|
@ -35,7 +39,7 @@ export const useProvider = (
|
||||||
if (erigonURL?.startsWith("ws://") || erigonURL?.startsWith("wss://")) {
|
if (erigonURL?.startsWith("ws://") || erigonURL?.startsWith("wss://")) {
|
||||||
provider = new WebSocketProvider(erigonURL);
|
provider = new WebSocketProvider(erigonURL);
|
||||||
} else {
|
} else {
|
||||||
provider = new JsonRpcProvider(erigonURL);
|
provider = new JsonRpcBatchProvider(erigonURL);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if it is at least a regular ETH node
|
// Check if it is at least a regular ETH node
|
||||||
|
|
|
@ -0,0 +1,92 @@
|
||||||
|
import { useState, useEffect, useRef } from "react";
|
||||||
|
import { JsonRpcProvider } from "@ethersproject/providers";
|
||||||
|
import { ProcessedTransaction, TransactionData } from "./types";
|
||||||
|
import { batchPopulate, ResolvedAddresses } from "./api/address-resolver";
|
||||||
|
|
||||||
|
export type AddressCollector = () => string[];
|
||||||
|
|
||||||
|
export const pageCollector =
|
||||||
|
(page: ProcessedTransaction[] | undefined): AddressCollector =>
|
||||||
|
() => {
|
||||||
|
if (!page) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const uniqueAddresses = new Set<string>();
|
||||||
|
for (const tx of page) {
|
||||||
|
if (tx.from) {
|
||||||
|
uniqueAddresses.add(tx.from);
|
||||||
|
}
|
||||||
|
if (tx.to) {
|
||||||
|
uniqueAddresses.add(tx.to);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return Array.from(uniqueAddresses);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const transactionDataCollector =
|
||||||
|
(txData: TransactionData | null | undefined): AddressCollector =>
|
||||||
|
() => {
|
||||||
|
if (!txData) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const uniqueAddresses = new Set<string>();
|
||||||
|
|
||||||
|
// Standard fields
|
||||||
|
uniqueAddresses.add(txData.from);
|
||||||
|
if (txData.to) {
|
||||||
|
uniqueAddresses.add(txData.to);
|
||||||
|
}
|
||||||
|
if (txData.confirmedData?.createdContractAddress) {
|
||||||
|
uniqueAddresses.add(txData.confirmedData?.createdContractAddress);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dig token transfers
|
||||||
|
for (const t of txData.tokenTransfers) {
|
||||||
|
uniqueAddresses.add(t.from);
|
||||||
|
uniqueAddresses.add(t.to);
|
||||||
|
uniqueAddresses.add(t.token);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dig log addresses
|
||||||
|
if (txData.confirmedData) {
|
||||||
|
for (const l of txData.confirmedData.logs) {
|
||||||
|
uniqueAddresses.add(l.address);
|
||||||
|
// TODO: find a way to dig over decoded address log attributes
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return Array.from(uniqueAddresses);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useResolvedAddresses = (
|
||||||
|
provider: JsonRpcProvider | undefined,
|
||||||
|
addrCollector: AddressCollector
|
||||||
|
) => {
|
||||||
|
const [names, setNames] = useState<ResolvedAddresses>();
|
||||||
|
const ref = useRef<ResolvedAddresses | undefined>();
|
||||||
|
useEffect(() => {
|
||||||
|
ref.current = names;
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(
|
||||||
|
() => {
|
||||||
|
if (!provider) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const populate = async () => {
|
||||||
|
const _addresses = addrCollector();
|
||||||
|
const _names = await batchPopulate(provider, _addresses, ref.current);
|
||||||
|
setNames(_names);
|
||||||
|
};
|
||||||
|
populate();
|
||||||
|
},
|
||||||
|
// DON'T put names variables in dependency array; this is intentional; useRef
|
||||||
|
[provider, addrCollector]
|
||||||
|
);
|
||||||
|
|
||||||
|
return names;
|
||||||
|
};
|
|
@ -1,48 +0,0 @@
|
||||||
import { useState, useEffect } from "react";
|
|
||||||
import { JsonRpcProvider } from "@ethersproject/providers";
|
|
||||||
import { ENSReverseCache, ProcessedTransaction } from "./types";
|
|
||||||
|
|
||||||
export const useENSCache = (
|
|
||||||
provider?: JsonRpcProvider,
|
|
||||||
page?: ProcessedTransaction[]
|
|
||||||
) => {
|
|
||||||
const [reverseCache, setReverseCache] = useState<ENSReverseCache>();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!provider || !page) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const addrSet = new Set<string>();
|
|
||||||
for (const tx of page) {
|
|
||||||
if (tx.from) {
|
|
||||||
addrSet.add(tx.from);
|
|
||||||
}
|
|
||||||
if (tx.to) {
|
|
||||||
addrSet.add(tx.to);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const addresses = Array.from(addrSet);
|
|
||||||
|
|
||||||
const reverseResolve = async () => {
|
|
||||||
const solvers: Promise<string | null>[] = [];
|
|
||||||
for (const a of addresses) {
|
|
||||||
solvers.push(provider.lookupAddress(a));
|
|
||||||
}
|
|
||||||
|
|
||||||
const results = await Promise.all(solvers);
|
|
||||||
const cache: ENSReverseCache = {};
|
|
||||||
for (let i = 0; i < results.length; i++) {
|
|
||||||
const r = results[i];
|
|
||||||
if (r === null) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
cache[addresses[i]] = r;
|
|
||||||
}
|
|
||||||
setReverseCache(cache);
|
|
||||||
};
|
|
||||||
reverseResolve();
|
|
||||||
}, [provider, page]);
|
|
||||||
|
|
||||||
return reverseCache;
|
|
||||||
};
|
|
2
topic0
2
topic0
|
@ -1 +1 @@
|
||||||
Subproject commit 52559d5690d491f8191a2d3fdb3c037516adc68f
|
Subproject commit 5026a20b712c1cad66878821c38e1f070e4a3799
|
Loading…
Reference in New Issue