diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx index 320c984..38fea85 100644 --- a/src/TokenTransferItem.tsx +++ b/src/TokenTransferItem.tsx @@ -1,9 +1,8 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight"; -import AddressHighlighter from "./components/AddressHighlighter"; +import TransactionAddress from "./components/TransactionAddress"; import ValueHighlighter from "./components/ValueHighlighter"; -import DecoratedAddressLink from "./components/DecoratedAddressLink"; import FormattedBalance from "./components/FormattedBalance"; import { AddressContext, @@ -34,27 +33,19 @@ const TokenTransferItem: React.FC = ({
From - - - +
To - - - +
For @@ -66,12 +57,10 @@ const TokenTransferItem: React.FC = ({ /> - - - +
diff --git a/src/Transaction.tsx b/src/Transaction.tsx index 21d821f..168c83f 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -15,6 +15,7 @@ import { transactionDataCollector, useResolvedAddresses, } from "./useResolvedAddresses"; +import { SelectedTransactionContext } from "./useSelectedTransaction"; const Details = React.lazy( () => @@ -82,58 +83,63 @@ const Transaction: React.FC = () => { const txDesc = useTransactionDescription(metadata, txData); return ( - - Transaction Details - {txData === null && ( - -
- Transaction {txhash} not found. -
-
- )} - {txData && ( - - - - Overview - {txData.confirmedData?.blockNumber !== undefined && ( - - Logs - {txData && ` (${txData.confirmedData?.logs?.length ?? 0})`} - - )} - Trace - - - - - -
- - - - - - - - - - - )} - + + + Transaction Details + {txData === null && ( + +
+ Transaction {txhash} not found. +
+
+ )} + {txData && ( + + + + Overview + {txData.confirmedData?.blockNumber !== undefined && ( + + Logs + {txData && ` (${txData.confirmedData?.logs?.length ?? 0})`} + + )} + Trace + + + + + +
+ + + + + + + + + + + )} + + ); }; diff --git a/src/components/TransactionAddress.tsx b/src/components/TransactionAddress.tsx new file mode 100644 index 0000000..1595ef0 --- /dev/null +++ b/src/components/TransactionAddress.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import AddressHighlighter from "./AddressHighlighter"; +import DecoratedAddressLink from "./DecoratedAddressLink"; +import { ResolvedAddresses } from "../api/address-resolver"; +import { useSelectedTransaction } from "../useSelectedTransaction"; +import { AddressContext } from "../types"; + +type TransactionAddressProps = { + address: string; + addressCtx?: AddressContext | undefined; + resolvedAddresses: ResolvedAddresses | undefined; +}; + +const TransactionAddress: React.FC = ({ + address, + addressCtx, + resolvedAddresses, +}) => { + const txData = useSelectedTransaction(); + // TODO: push down creation coloring logic into DecoratedAddressLink + const creation = address === txData?.confirmedData?.createdContractAddress; + + return ( + + + + ); +}; + +export default TransactionAddress; diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx index a9f716a..51b8a63 100644 --- a/src/transaction/Details.tsx +++ b/src/transaction/Details.tsx @@ -11,8 +11,7 @@ import ContentFrame from "../ContentFrame"; import InfoRow from "../components/InfoRow"; import BlockLink from "../components/BlockLink"; import BlockConfirmations from "../components/BlockConfirmations"; -import AddressHighlighter from "../components/AddressHighlighter"; -import DecoratedAddressLink from "../components/DecoratedAddressLink"; +import TransactionAddress from "../components/TransactionAddress"; import Copy from "../components/Copy"; import Nonce from "../components/Nonce"; import Timestamp from "../components/Timestamp"; @@ -149,14 +148,10 @@ const Details: React.FC = ({
- - - +
@@ -167,14 +162,10 @@ const Details: React.FC = ({ {txData.to ? (
- - - +
) : txData.confirmedData === undefined ? ( @@ -183,16 +174,10 @@ const Details: React.FC = ({ ) : (
- - - + resolvedAddresses={resolvedAddresses} + />
)} diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx index 0c9b5d6..c8bbcfd 100644 --- a/src/transaction/LogEntry.tsx +++ b/src/transaction/LogEntry.tsx @@ -2,8 +2,7 @@ import React, { useMemo } from "react"; import { Log } from "@ethersproject/abstract-provider"; import { Fragment, Interface, LogDescription } from "@ethersproject/abi"; import { Tab } from "@headlessui/react"; -import AddressHighlighter from "../components/AddressHighlighter"; -import DecoratedAddressLink from "../components/DecoratedAddressLink"; +import TransactionAddress from "../components/TransactionAddress"; import Copy from "../components/Copy"; import ModeTab from "../components/ModeTab"; import DecodedParamsTable from "./decoder/DecodedParamsTable"; @@ -63,15 +62,10 @@ const LogEntry: React.FC = ({
Address
- - - +
diff --git a/src/transaction/decoder/AddressDecoder.tsx b/src/transaction/decoder/AddressDecoder.tsx index 3e74790..49726e6 100644 --- a/src/transaction/decoder/AddressDecoder.tsx +++ b/src/transaction/decoder/AddressDecoder.tsx @@ -1,31 +1,19 @@ import React from "react"; -import AddressHighlighter from "../../components/AddressHighlighter"; -import DecoratedAddressLink from "../../components/DecoratedAddressLink"; +import TransactionAddress from "../../components/TransactionAddress"; import Copy from "../../components/Copy"; -import { SelectedTransactionContext } from "../../types"; import { ResolvedAddresses } from "../../api/address-resolver"; type AddressDecoderProps = { r: string; - txContext: SelectedTransactionContext; resolvedAddresses?: ResolvedAddresses | undefined; }; const AddressDecoder: React.FC = ({ r, - txContext, resolvedAddresses, }) => (
- - - +
); diff --git a/src/transaction/decoder/DecodedParamRow.tsx b/src/transaction/decoder/DecodedParamRow.tsx index 83fe0ac..eb31b91 100644 --- a/src/transaction/decoder/DecodedParamRow.tsx +++ b/src/transaction/decoder/DecodedParamRow.tsx @@ -77,7 +77,6 @@ const DecodedParamRow: React.FC = ({ ) : paramType.baseType === "address" ? ( ) : paramType.baseType === "bool" ? ( diff --git a/src/useSelectedTransaction.ts b/src/useSelectedTransaction.ts new file mode 100644 index 0000000..8676a53 --- /dev/null +++ b/src/useSelectedTransaction.ts @@ -0,0 +1,9 @@ +import { createContext, useContext } from "react"; +import { TransactionData } from "./types"; + +export const SelectedTransactionContext = createContext< + TransactionData | null | undefined +>(undefined); + +export const useSelectedTransaction = () => + useContext(SelectedTransactionContext);