Styled tx:id

apps/explorer/src/app/components/table/index.tsx

@@ -57,7 +57,7 @@ export const TableRow = ({
   ...props
 }: TableRowProps) => {
   const cellClasses = classnames(className, {
-    'border-b border-white-40': modifier === 'bordered',
+    'border-b border-white-40 py-2': modifier === 'bordered',
     'bg-white-25 border-b-4 border-b-black': modifier === 'background',
   });
   return (

apps/explorer/src/app/components/txs/id/tx-content.tsx

@@ -1,6 +1,8 @@
 import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response';
-import { Table } from '../../table';
 import { SyntaxHighlighter } from '../../syntax-highlighter';
+import { Table, TableRow, TableHeader, TableCell } from '../../table';
+import { TxOrderType } from '../tx-order-type';
+import { StatusMessage } from '../../status-message';
 
 interface TxContentProps {
   data: ChainExplorerTxResponse | undefined;
@@ -8,29 +10,30 @@ interface TxContentProps {
 
 export const TxContent = ({ data }: TxContentProps) => {
   if (!data?.Command) {
-    return <>Awaiting decoded transaction data</>;
+    return (
+      <StatusMessage>Could not retrieve transaction content</StatusMessage>
+    );
   }
 
-  const { marketId, type, side, size } = JSON.parse(data.Command);
-
-  const displayCode = {
-    market: marketId,
-    type,
-    side,
-    size,
-  };
-
   return (
     <>
-      <Table>
-        <tr>
-          <td>Type</td>
-          <td>{data.Type}</td>
-        </tr>
+      <Table className="mb-12">
+        <TableRow modifier="bordered">
+          <TableHeader scope="row" className="w-[160px]">
+            Type
+          </TableHeader>
+          <TableCell modifier="bordered">
+            <TxOrderType orderType={data.Type} />
+          </TableCell>
+        </TableRow>
       </Table>
 
-      <h3>Decoded transaction content</h3>
-      <SyntaxHighlighter data={displayCode} />
+      {data.Command && (
+        <>
+          <h3 className="font-mono mb-8">Decoded transaction content</h3>
+          <SyntaxHighlighter data={JSON.parse(data.Command)} />
+        </>
+      )}
     </>
   );
 };

apps/explorer/src/app/components/txs/id/tx-details.tsx

@@ -1,50 +1,63 @@
 import { Link } from 'react-router-dom';
 import { Routes } from '../../../routes/router-config';
 import { Result } from '../../../routes/txs/tendermint-transaction-response.d';
-import { Table, TableRow, TableCell } from '../../table';
+import { Table, TableRow, TableCell, TableHeader } from '../../table';
+import { TruncateInline } from '../../truncate/truncate';
 
 interface TxDetailsProps {
   txData: Result | undefined;
   pubKey: string | undefined;
+  className?: string;
 }
 
-export const TxDetails = ({ txData, pubKey }: TxDetailsProps) => {
+const truncateLength = 30;
+
+export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
   if (!txData) {
     return <>Awaiting Tendermint transaction details</>;
   }
 
   return (
-    <Table>
-      <TableRow>
+    <Table className={className}>
+      <TableRow modifier="bordered">
         <TableCell>Hash</TableCell>
-        <TableCell data-testid="hash">{txData.hash}</TableCell>
+        <TableCell modifier="bordered" data-testid="hash">
+          {txData.hash}
+        </TableCell>
       </TableRow>
-      {pubKey ? (
-        <TableRow>
-          <td>Submitted by</td>
-          <td data-testid="submitted-by">
-            <Link to={`/${Routes.PARTIES}/${pubKey}`}>{pubKey}</Link>
-          </td>
-        </TableRow>
-      ) : (
-        <TableRow>
-          <td>Submitted by</td>
-          <td>Awaiting decoded transaction data</td>
-        </TableRow>
-      )}
-      {txData.height ? (
-        <TableRow>
-          <td>Block</td>
-          <td data-testid="block">
-            <Link to={`/${Routes.BLOCKS}/${txData.height}`}>
-              {txData.height}
-            </Link>
-          </td>
-        </TableRow>
-      ) : null}
-      <TableRow>
-        <td>Encoded tnx</td>
-        <td data-testid="encoded-tnx">{txData.tx}</td>
+      <TableRow modifier="bordered">
+        <TableHeader scope="row" className="w-[160px]">
+          Submitted by
+        </TableHeader>
+        <TableCell modifier="bordered" data-testid="submitted-by">
+          <Link
+            className="text-vega-yellow"
+            to={`/${Routes.PARTIES}/${pubKey}`}
+          >
+            {pubKey}
+          </Link>
+        </TableCell>
+      </TableRow>
+      <TableRow modifier="bordered">
+        <TableCell>Block</TableCell>
+        <TableCell modifier="bordered" data-testid="block">
+          <Link
+            className="text-vega-yellow"
+            to={`/${Routes.BLOCKS}/${txData.height}`}
+          >
+            {txData.height}
+          </Link>
+        </TableCell>
+      </TableRow>
+      <TableRow modifier="bordered">
+        <TableCell>Encoded tnx</TableCell>
+        <TableCell modifier="bordered" data-testid="encoded-tnx">
+          <TruncateInline
+            text={txData.tx}
+            startChars={truncateLength}
+            endChars={truncateLength}
+          />
+        </TableCell>
       </TableRow>
     </Table>
   );

apps/explorer/src/app/routes/txs/id/index.tsx

@@ -1,20 +1,24 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { TxContent, TxDetails } from '../../../components/txs';
-import { DATA_SOURCES } from '../../../config';
 import useFetch from '../../../hooks/use-fetch';
-import { ChainExplorerTxResponse } from '../../types/chain-explorer-response';
 import { TendermintTransactionResponse } from '../tendermint-transaction-response.d';
+import { ChainExplorerTxResponse } from '../../types/chain-explorer-response';
+import { DATA_SOURCES } from '../../../config';
+import { TxContent, TxDetails } from '../../../components/txs';
+import { RouteTitle } from '../../../components/route-title';
+import { RenderFetched } from '../../../components/render-fetched';
 
 const Tx = () => {
   const { txHash } = useParams<{ txHash: string }>();
+
   const {
-    state: { data: transactionData },
+    state: { data: tTxData, loading: tTxLoading, error: tTxError },
   } = useFetch<TendermintTransactionResponse>(
     `${DATA_SOURCES.tendermintUrl}/tx?hash=${txHash}`
   );
+
   const {
-    state: { data: decodedData },
+    state: { data: ceTxData, loading: ceTxLoading, error: ceTxError },
   } = useFetch<ChainExplorerTxResponse>(DATA_SOURCES.chainExplorerUrl, {
     method: 'POST',
     body: JSON.stringify({
@@ -25,13 +29,20 @@ const Tx = () => {
 
   return (
     <section>
-      <h1>Transaction details</h1>
-      <TxDetails
-        txData={transactionData?.result}
-        pubKey={decodedData?.PubKey}
-      />
-      <h2>Transaction content</h2>
-      <TxContent data={decodedData} />
+      <RouteTitle>Transaction details</RouteTitle>
+
+      <RenderFetched error={tTxError} loading={tTxLoading}>
+        <TxDetails
+          className="mb-28"
+          txData={tTxData?.result}
+          pubKey={ceTxData?.PubKey}
+        />
+      </RenderFetched>
+
+      <h2 className="text-h4 uppercase mb-16">Transaction content</h2>
+      <RenderFetched error={ceTxError} loading={ceTxLoading}>
+        <TxContent data={ceTxData} />
+      </RenderFetched>
     </section>
   );
 };