70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import React, { useContext, useMemo } from "react";
|
|
import ContentFrame from "../ContentFrame";
|
|
import TransactionAddress from "../components/TransactionAddress";
|
|
import TraceItem from "./TraceItem";
|
|
import { TransactionData } from "../types";
|
|
import { useBatch4Bytes } from "../use4Bytes";
|
|
import { useTraceTransaction, useUniqueSignatures } from "../useErigonHooks";
|
|
import { RuntimeContext } from "../useRuntime";
|
|
import { ResolvedAddresses } from "../api/address-resolver";
|
|
import { tracesCollector, useResolvedAddresses } from "../useResolvedAddresses";
|
|
|
|
type TraceProps = {
|
|
txData: TransactionData;
|
|
resolvedAddresses: ResolvedAddresses | undefined;
|
|
};
|
|
|
|
const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
|
|
const { provider } = useContext(RuntimeContext);
|
|
const traces = useTraceTransaction(provider, txData.transactionHash);
|
|
const uniqueSignatures = useUniqueSignatures(traces);
|
|
const sigMap = useBatch4Bytes(uniqueSignatures);
|
|
|
|
const addrCollector = useMemo(() => tracesCollector(traces), [traces]);
|
|
const traceResolvedAddresses = useResolvedAddresses(provider, addrCollector);
|
|
const mergedResolvedAddresses = useMemo(() => {
|
|
const merge = {};
|
|
if (resolvedAddresses) {
|
|
Object.assign(merge, resolvedAddresses);
|
|
}
|
|
if (traceResolvedAddresses) {
|
|
Object.assign(merge, traceResolvedAddresses);
|
|
}
|
|
return merge;
|
|
}, [resolvedAddresses, traceResolvedAddresses]);
|
|
|
|
return (
|
|
<ContentFrame tabs>
|
|
<div className="mt-4 mb-5 space-y-3 font-code text-sm flex flex-col items-start overflow-x-auto">
|
|
{traces ? (
|
|
<>
|
|
<div className="border hover:border-gray-500 rounded px-1 py-0.5">
|
|
<TransactionAddress
|
|
address={txData.from}
|
|
resolvedAddresses={resolvedAddresses}
|
|
/>
|
|
</div>
|
|
<div className="ml-5 space-y-3 self-stretch">
|
|
{traces.map((t, i, a) => (
|
|
<TraceItem
|
|
key={i}
|
|
t={t}
|
|
last={i === a.length - 1}
|
|
fourBytesMap={sigMap}
|
|
resolvedAddresses={mergedResolvedAddresses}
|
|
/>
|
|
))}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="border hover:border-gray-500 rounded px-1 py-1 w-96 h-7">
|
|
<div className="animate-pulse w-full h-full rounded bg-gray-200"></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ContentFrame>
|
|
);
|
|
};
|
|
|
|
export default React.memo(Trace);
|