tx revert reason

types/api/transaction.ts

@@ -3,6 +3,11 @@ import type { DecodedInput } from './decodedInput';
 import type { Fee } from './fee';
 import type { TokenTransfer } from './tokenTransfer';
 
+export type TransactionRevertReason = {
+  raw: string;
+  decoded: string;
+} | DecodedInput;
+
 export interface Transaction {
   hash: string;
   result: string;
@@ -27,10 +32,7 @@ export interface Transaction {
   tx_burnt_fee: number | null;
   nonce: number;
   position: number;
-  revert_reason: {
-    raw: string;
-    decoded: string;
-  } | null;
+  revert_reason: TransactionRevertReason | null;
   raw_input: string;
   decoded_input: DecodedInput | null;
   token_transfers: Array<TokenTransfer> | null;

ui/tx/TxDecodedInputData.tsx

@@ -111,45 +111,49 @@ const TxDecodedInputData = ({ data }: Props) => {
         { data.method_call }
       </GridItem>
       { /* TABLE INSIDE OF BLOCK */ }
-      <GridItem
-        pl={ PADDING }
-        pr={ GAP }
-        pt={ PADDING }
-        pb={ 1 }
-        bgColor={ bgColor }
-        fontWeight={ 600 }
-      >
+      { data.parameters.length > 0 && (
+        <>
+          <GridItem
+            pl={ PADDING }
+            pr={ GAP }
+            pt={ PADDING }
+            pb={ 1 }
+            bgColor={ bgColor }
+            fontWeight={ 600 }
+          >
         Name
-      </GridItem>
-      <GridItem
-        pr={ GAP }
-        pt={ PADDING }
-        pb={ 1 }
-        bgColor={ bgColor }
-        fontWeight={ 600 }
-      >
+          </GridItem>
+          <GridItem
+            pr={ GAP }
+            pt={ PADDING }
+            pb={ 1 }
+            bgColor={ bgColor }
+            fontWeight={ 600 }
+          >
         Type
-      </GridItem>
-      { hasIndexed && (
-        <GridItem
-          pr={ GAP }
-          pt={ PADDING }
-          pb={ 1 }
-          bgColor={ bgColor }
-          fontWeight={ 600 }
-        >
+          </GridItem>
+          { hasIndexed && (
+            <GridItem
+              pr={ GAP }
+              pt={ PADDING }
+              pb={ 1 }
+              bgColor={ bgColor }
+              fontWeight={ 600 }
+            >
           Inde<wbr/>xed?
-        </GridItem>
-      ) }
-      <GridItem
-        pr={ PADDING }
-        pt={ PADDING }
-        pb={ 1 }
-        bgColor={ bgColor }
-        fontWeight={ 600 }
-      >
+            </GridItem>
+          ) }
+          <GridItem
+            pr={ PADDING }
+            pt={ PADDING }
+            pb={ 1 }
+            bgColor={ bgColor }
+            fontWeight={ 600 }
+          >
         Data
-      </GridItem>
+          </GridItem>
+        </>
+      ) }
       { data.parameters.map(({ name, type, value, indexed }, index) => {
         return (
           <TableRow key={ name } name={ name } type={ type } isLast={ index === data.parameters.length - 1 } indexed={ indexed }>

ui/tx/TxDetails.tsx

@@ -31,6 +31,7 @@ import TextSeparator from 'ui/shared/TextSeparator';
 import TxStatus from 'ui/shared/TxStatus';
 import Utilization from 'ui/shared/Utilization';
 import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
+import TxRevertReason from 'ui/tx/details/TxRevertReason';
 import TokenTransfer from 'ui/tx/TokenTransfer';
 import TxDecodedInputData from 'ui/tx/TxDecodedInputData';
 
@@ -85,6 +86,14 @@ const TxDetails = () => {
       >
         <TxStatus status={ data.status } errorText={ data.status === 'error' ? data.result : undefined }/>
       </DetailsInfoItem>
+      { data.revert_reason && (
+        <DetailsInfoItem
+          title="Revert reason"
+          hint="The revert reason of the transaction."
+        >
+          <TxRevertReason { ...data.revert_reason }/>
+        </DetailsInfoItem>
+      ) }
       <DetailsInfoItem
         title="Block"
         hint="Block number containing the transaction."

ui/tx/details/TxRevertReason.tsx

+import { Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TransactionRevertReason } from 'types/api/transaction';
+
+import TxDecodedInputData from 'ui/tx/TxDecodedInputData';
+
+type Props = TransactionRevertReason;
+
+const TxRevertReason = (props: Props) => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  if ('raw' in props) {
+    return (
+      <Grid
+        bgColor={ bgColor }
+        p={ 4 }
+        fontSize="sm"
+        borderRadius="md"
+        templateColumns="auto minmax(0, 1fr)"
+        rowGap={ 2 }
+        columnGap={ 4 }
+        whiteSpace="normal"
+      >
+        <GridItem fontWeight={ 500 }>Raw:</GridItem>
+        <GridItem>{ props.raw }</GridItem>
+        <GridItem fontWeight={ 500 }>Decoded:</GridItem>
+        <GridItem>{ props.decoded }</GridItem>
+      </Grid>
+    );
+  }
+
+  return <TxDecodedInputData data={ props }/>;
+};
+
+export default React.memo(TxRevertReason);