diff --git a/src/components/ExpanderSwitch.tsx b/src/components/ExpanderSwitch.tsx new file mode 100644 index 0000000..71292db --- /dev/null +++ b/src/components/ExpanderSwitch.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Switch } from "@headlessui/react"; + +type ExpanderSwitchProps = { + expanded: boolean; + setExpanded: React.Dispatch>; +}; + +const ExpanderSwitch: React.FC = ({ + expanded, + setExpanded, +}) => ( + + {expanded ? [-] : <>[...]} + +); + +export default ExpanderSwitch; diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx index 36141ca..ca21ea4 100644 --- a/src/transaction/Details.tsx +++ b/src/transaction/Details.tsx @@ -1,4 +1,5 @@ -import React, { useContext, useMemo } from "react"; +import React, { useContext, useMemo, useState } from "react"; +import { Tab } from "@headlessui/react"; import { TransactionDescription } from "@ethersproject/abi"; import { BigNumber } from "@ethersproject/bignumber"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -8,6 +9,8 @@ import { faTimesCircle } from "@fortawesome/free-solid-svg-icons/faTimesCircle"; import ContentFrame from "../ContentFrame"; import InfoRow from "../components/InfoRow"; import BlockLink from "../components/BlockLink"; +import ModeTab from "../components/ModeTab"; +import ExpanderSwitch from "../components/ExpanderSwitch"; import BlockConfirmations from "../components/BlockConfirmations"; import TransactionAddress from "../components/TransactionAddress"; import Copy from "../components/Copy"; @@ -97,7 +100,11 @@ const Details: React.FC = ({ return _addresses; }, [txData]); const metadatas = useContractsMetadata(addresses, provider); - const errorMsg = useTransactionError(provider, txData.transactionHash); + const [errorMsg, outputData, isCustomError] = useTransactionError( + provider, + txData.transactionHash + ); + const [expanded, setExpanded] = useState(false); return ( @@ -111,24 +118,75 @@ const Details: React.FC = ({ {txData.confirmedData === undefined ? ( Pending ) : txData.confirmedData.status ? ( - - + + Success ) : ( -
- - - Fail - {errorMsg && ( - <> - {" "} - with revert message: ' - {errorMsg}' - + <> +
+
+ + + Fail + {errorMsg && ( + <> + {" "} + with revert message: ' + {errorMsg}' + + )} + {isCustomError && <> with custom error} + +
+ {isCustomError && ( + )} - -
+
+ {expanded && ( + + + Decoded + Raw + + + + {/* {fourBytes === "0x" ? ( + <>No parameters + ) : resolvedTxDesc === undefined ? ( + <>Waiting for data... + ) : resolvedTxDesc === null ? ( + <>Can't decode data + ) : ( + + )} */} + + +