2021-08-01 09:59:59 +00:00
|
|
|
import React, { useMemo, useContext } from "react";
|
2021-07-01 18:21:40 +00:00
|
|
|
import { Route, Switch, useParams } from "react-router-dom";
|
2021-09-06 06:43:20 +00:00
|
|
|
import { Tab } from "@headlessui/react";
|
2021-07-01 18:21:40 +00:00
|
|
|
import StandardFrame from "./StandardFrame";
|
|
|
|
import StandardSubtitle from "./StandardSubtitle";
|
2021-09-04 06:19:42 +00:00
|
|
|
import ContentFrame from "./ContentFrame";
|
2021-09-06 06:34:13 +00:00
|
|
|
import NavTab from "./components/NavTab";
|
2021-07-14 19:30:28 +00:00
|
|
|
import Details from "./transaction/Details";
|
|
|
|
import Logs from "./transaction/Logs";
|
2021-07-09 05:07:20 +00:00
|
|
|
import { RuntimeContext } from "./useRuntime";
|
2021-07-14 07:43:58 +00:00
|
|
|
import { SelectionContext, useSelection } from "./useSelection";
|
2021-08-01 09:59:59 +00:00
|
|
|
import { useInternalOperations, useTxData } from "./useErigonHooks";
|
2021-08-31 05:56:05 +00:00
|
|
|
import { useETHUSDOracle } from "./usePriceOracle";
|
2021-09-15 17:43:36 +00:00
|
|
|
import { useSourcify, useTransactionDescription } from "./useSourcify";
|
|
|
|
import { SourcifySource } from "./url";
|
2021-07-01 18:21:40 +00:00
|
|
|
|
|
|
|
type TransactionParams = {
|
|
|
|
txhash: string;
|
|
|
|
};
|
|
|
|
|
|
|
|
const Transaction: React.FC = () => {
|
2021-07-09 05:07:20 +00:00
|
|
|
const { provider } = useContext(RuntimeContext);
|
2021-07-01 18:21:40 +00:00
|
|
|
const params = useParams<TransactionParams>();
|
|
|
|
const { txhash } = params;
|
|
|
|
|
2021-08-01 09:59:59 +00:00
|
|
|
const txData = useTxData(provider, txhash);
|
2021-07-01 18:21:40 +00:00
|
|
|
|
2021-07-21 19:06:51 +00:00
|
|
|
const internalOps = useInternalOperations(provider, txData);
|
2021-07-05 21:08:52 +00:00
|
|
|
const sendsEthToMiner = useMemo(() => {
|
2021-07-21 19:06:51 +00:00
|
|
|
if (!txData || !internalOps) {
|
2021-07-05 21:08:52 +00:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2021-07-21 19:06:51 +00:00
|
|
|
for (const t of internalOps) {
|
2021-09-04 06:19:42 +00:00
|
|
|
if (t.to === txData.confirmedData?.miner) {
|
2021-07-05 21:08:52 +00:00
|
|
|
return true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return false;
|
2021-07-21 19:06:51 +00:00
|
|
|
}, [txData, internalOps]);
|
2021-07-01 18:21:40 +00:00
|
|
|
|
2021-07-14 07:43:58 +00:00
|
|
|
const selectionCtx = useSelection();
|
|
|
|
|
2021-09-04 06:19:42 +00:00
|
|
|
const blockETHUSDPrice = useETHUSDOracle(
|
|
|
|
provider,
|
|
|
|
txData?.confirmedData?.blockNumber
|
|
|
|
);
|
2021-08-31 05:56:05 +00:00
|
|
|
|
2021-09-15 17:43:36 +00:00
|
|
|
const metadata = useSourcify(
|
|
|
|
txData?.to,
|
|
|
|
provider?.network.chainId,
|
|
|
|
SourcifySource.CUSTOM_SNAPSHOT_SERVER // TODO: use dynamic selector
|
|
|
|
);
|
|
|
|
const txDesc = useTransactionDescription(metadata, txData);
|
|
|
|
|
2021-07-01 18:21:40 +00:00
|
|
|
return (
|
|
|
|
<StandardFrame>
|
|
|
|
<StandardSubtitle>Transaction Details</StandardSubtitle>
|
2021-09-04 06:19:42 +00:00
|
|
|
{txData === null && (
|
|
|
|
<ContentFrame>
|
|
|
|
<div className="py-4 text-sm">
|
|
|
|
Transaction <span className="font-hash">{txhash}</span> not found.
|
|
|
|
</div>
|
|
|
|
</ContentFrame>
|
|
|
|
)}
|
2021-07-01 18:21:40 +00:00
|
|
|
{txData && (
|
2021-07-14 07:43:58 +00:00
|
|
|
<SelectionContext.Provider value={selectionCtx}>
|
2021-09-06 06:43:20 +00:00
|
|
|
<Tab.Group>
|
|
|
|
<Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
|
|
|
|
<NavTab href={`/tx/${txhash}`}>Overview</NavTab>
|
|
|
|
{txData.confirmedData?.blockNumber !== undefined && (
|
|
|
|
<NavTab href={`/tx/${txhash}/logs`}>
|
|
|
|
Logs
|
|
|
|
{txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
|
|
|
|
</NavTab>
|
|
|
|
)}
|
|
|
|
</Tab.List>
|
|
|
|
</Tab.Group>
|
2021-07-01 18:21:40 +00:00
|
|
|
<Switch>
|
|
|
|
<Route path="/tx/:txhash/" exact>
|
2021-07-14 19:30:28 +00:00
|
|
|
<Details
|
|
|
|
txData={txData}
|
2021-09-15 17:43:36 +00:00
|
|
|
txDesc={txDesc}
|
2021-07-21 19:06:51 +00:00
|
|
|
internalOps={internalOps}
|
2021-07-14 19:30:28 +00:00
|
|
|
sendsEthToMiner={sendsEthToMiner}
|
2021-08-31 05:56:05 +00:00
|
|
|
ethUSDPrice={blockETHUSDPrice}
|
2021-07-14 19:30:28 +00:00
|
|
|
/>
|
2021-07-01 18:21:40 +00:00
|
|
|
</Route>
|
|
|
|
<Route path="/tx/:txhash/logs/" exact>
|
2021-07-14 19:30:28 +00:00
|
|
|
<Logs txData={txData} />
|
2021-07-01 18:21:40 +00:00
|
|
|
</Route>
|
|
|
|
</Switch>
|
2021-07-14 07:43:58 +00:00
|
|
|
</SelectionContext.Provider>
|
2021-07-01 18:21:40 +00:00
|
|
|
)}
|
|
|
|
</StandardFrame>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default React.memo(Transaction);
|