raw traces

lib/socket/types.ts

@@ -3,6 +3,7 @@ import type { Channel } from 'phoenix';
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 import type { NewBlockSocketResponse } from 'types/api/block';
 import type { SmartContractVerificationResponse } from 'types/api/contract';
+import type { RawTracesResponse } from 'types/api/rawTrace';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 import type { Transaction } from 'types/api/transaction';
 
@@ -10,6 +11,7 @@ export type SocketMessageParams = SocketMessage.NewBlock |
 SocketMessage.BlocksIndexStatus |
 SocketMessage.InternalTxsIndexStatus |
 SocketMessage.TxStatusUpdate |
+SocketMessage.TxRawTrace |
 SocketMessage.NewTx |
 SocketMessage.NewPendingTx |
 SocketMessage.AddressBalance |
@@ -36,6 +38,7 @@ export namespace SocketMessage {
   export type BlocksIndexStatus = SocketMessageParamsGeneric<'block_index_status', {finished: boolean; ratio: string}>;
   export type InternalTxsIndexStatus = SocketMessageParamsGeneric<'internal_txs_index_status', {finished: boolean; ratio: string}>;
   export type TxStatusUpdate = SocketMessageParamsGeneric<'collated', NewBlockSocketResponse>;
+  export type TxRawTrace = SocketMessageParamsGeneric<'raw_trace', RawTracesResponse>;
   export type NewTx = SocketMessageParamsGeneric<'transaction', { transaction: number }>;
   export type NewPendingTx = SocketMessageParamsGeneric<'pending_transaction', { pending_transaction: number }>;
   export type AddressBalance = SocketMessageParamsGeneric<'balance', { balance: string; block_number: number; exchange_rate: string }>;

ui/tx/TxRawTrace.tsx

@@ -2,9 +2,14 @@ import { Flex, Skeleton } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { SocketMessage } from 'lib/socket/types';
+import type { RawTracesResponse } from 'types/api/rawTrace';
+
 import useApiQuery from 'lib/api/useApiQuery';
 import { SECOND } from 'lib/consts';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 import TxPendingAlert from 'ui/tx/TxPendingAlert';
@@ -12,6 +17,8 @@ import TxSocketAlert from 'ui/tx/TxSocketAlert';
 import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 
 const TxRawTrace = () => {
+  const [ isSocketOpen, setIsSocketOpen ] = React.useState(false);
+  const [ rawTraces, setRawTraces ] = React.useState<RawTracesResponse>();
   const router = useRouter();
   const hash = getQueryParamString(router.query.hash);
 
@@ -19,10 +26,25 @@ const TxRawTrace = () => {
   const { data, isLoading, isError } = useApiQuery('tx_raw_trace', {
     pathParams: { hash },
     queryOptions: {
-      enabled: Boolean(hash) && Boolean(txInfo.data?.status),
+      enabled: Boolean(hash) && Boolean(txInfo.data?.status) && isSocketOpen,
     },
   });
 
+  const handleRawTraceMessage: SocketMessage.TxRawTrace['handler'] = React.useCallback((payload) => {
+    setRawTraces(payload);
+  }, [ ]);
+
+  const channel = useSocketChannel({
+    topic: `transactions:${ hash?.toLowerCase() }`,
+    isDisabled: !hash,
+    onJoin: () => setIsSocketOpen(true),
+  });
+  useSocketMessage({
+    channel,
+    event: 'raw_trace',
+    handler: handleRawTraceMessage,
+  });
+
   if (!txInfo.isLoading && !txInfo.isError && !txInfo.data.status) {
     return txInfo.socketStatus ? <TxSocketAlert status={ txInfo.socketStatus }/> : <TxPendingAlert/>;
   }
@@ -42,11 +64,13 @@ const TxRawTrace = () => {
     );
   }
 
-  if (data.length === 0) {
+  const dataToDisplay = rawTraces ? rawTraces : data;
+
+  if (dataToDisplay.length === 0) {
     return <span>No trace entries found.</span>;
   }
 
-  const text = JSON.stringify(data, undefined, 4);
+  const text = JSON.stringify(dataToDisplay, undefined, 4);
 
   return <RawDataSnippet data={ text }/>;
 };