Created unstyled block explorer transaction and added Prism for code blocks being displayed

.gitignore

@@ -37,3 +37,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+yarn.lock

apps/explorer/src/app/App.scss

@@ -1,6 +1,7 @@
-@import "./styles/colors";
+@import './styles/colors';
-@import "./styles/fonts";
+@import './styles/fonts';
-@import "./styles/reset";
+@import './styles/reset';
+@import './styles/prism-theme';
 
 html,
 body,

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

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import Prism from 'prismjs';
+
+interface CodeblockProps {
+  code: string;
+  language: string;
+}
+
+export const Codeblock = ({ code, language }: CodeblockProps) => {
+  useEffect(() => {
+    Prism.highlightAll();
+  });
+
+  return (
+    <pre>
+      <code className={`language-${language}`}>{code}</code>
+    </pre>
+  );
+};

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

@@ -0,0 +1,85 @@
+import { Link } from 'react-router-dom';
+import { Routes } from '../../routes/router-config';
+import { Codeblock } from '../codeblock';
+import { ChainExplorerTxResponse } from '../../routes/types/chain-explorer-response';
+import { Result } from '../../routes/txs/tendermint-transaction-response.d';
+
+interface TxDetailsProps {
+  txData: Result | undefined;
+  pubKey: string | undefined;
+}
+
+interface TxContentProps {
+  data: ChainExplorerTxResponse | undefined;
+}
+
+export const TxDetails = ({ txData, pubKey }: TxDetailsProps) => {
+  if (!txData) {
+    return <>Awaiting Tendermint transaction details</>;
+  }
+
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <td>Hash</td>
+          <td>{txData.hash}</td>
+        </tr>
+        {pubKey ? (
+          <tr>
+            <td>Submitted by</td>
+            <td>
+              <Link to={`/${Routes.PARTIES}/${pubKey}`}>{pubKey}</Link>
+            </td>
+          </tr>
+        ) : (
+          <tr>
+            <td>Submitted by</td>
+            <td>Awaiting decoded transaction data</td>
+          </tr>
+        )}
+        {txData.height ? (
+          <tr>
+            <td>Block</td>
+            <td>{txData.height}</td>
+          </tr>
+        ) : null}
+        <tr>
+          <td>Encoded tnx</td>
+          <td>{txData.tx}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+export const TxContent = ({ data }: TxContentProps) => {
+  if (!data?.Command) {
+    return <>Awaiting decoded transaction data</>;
+  }
+
+  const Command = JSON.parse(data.Command);
+
+  const displayCode = `{
+  "market": "${Command.marketId}",
+  "type": "${Command.type}",
+  "side": "${Command.side}",
+  "size": "${Command.size}",
+}`;
+
+  return (
+    <>
+      <table>
+        <tbody>
+          <tr>
+            <td>Type</td>
+            <td>{data.Type}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3>Decoded transaction content</h3>
+      <Codeblock code={displayCode} language={'javascript'} />
+    </>
+  );
+};

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

@@ -1,9 +1,10 @@
-import React from "react";
+import React from 'react';
-import { useParams } from "react-router-dom";
+import { useParams } from 'react-router-dom';
-import { DATA_SOURCES } from "../../../config";
+import { DATA_SOURCES } from '../../../config';
-import useFetch from "../../../hooks/use-fetch";
+import useFetch from '../../../hooks/use-fetch';
-import { ChainExplorerTxResponse } from "../../types/chain-explorer-response";
+import { ChainExplorerTxResponse } from '../../types/chain-explorer-response';
-import { TendermintTransactionResponse } from "../tendermint-transaction-response.d";
+import { TendermintTransactionResponse } from '../tendermint-transaction-response.d';
+import { TxDetails, TxContent } from '../../../components/transaction';
 
 const Tx = () => {
   const { txHash } = useParams<{ txHash: string }>();
@@ -13,7 +14,7 @@ const Tx = () => {
   const { data: decodedData } = useFetch<ChainExplorerTxResponse>(
     DATA_SOURCES.chainExplorerUrl,
     {
-      method: "POST",
+      method: 'POST',
       body: JSON.stringify({
         tx_hash: txHash,
         node_url: `${DATA_SOURCES.tendermintUrl}/`,
@@ -23,11 +24,13 @@ const Tx = () => {
 
   return (
     <section>
-      <h1>Tx</h1>
+      <h1>Transaction details</h1>
-      <h2>Tendermint Data</h2>
+      <TxDetails
-      <pre>{JSON.stringify(transactionData, null, "  ")}</pre>
+        txData={transactionData?.result}
-      <h2>Decoded data</h2>
+        pubKey={decodedData?.PubKey}
-      <pre>{JSON.stringify(decodedData, null, "  ")}</pre>
+      />
+      <h2>Transaction content</h2>
+      <TxContent data={decodedData} />
     </section>
   );
 };

apps/explorer/src/app/styles/_prism-theme.scss

@@ -0,0 +1,143 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #c5c8c6;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #1d1f21;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #7c7c7c;
+}
+
+.token.punctuation {
+  color: #c5c8c6;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.keyword,
+.token.tag {
+  color: #96cbfe;
+}
+
+.token.class-name {
+  color: #ffffb6;
+  text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+  color: #99cc99;
+}
+
+.token.symbol,
+.token.deleted {
+  color: #f92672;
+}
+
+.token.number {
+  color: #ff73fd;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #a8ff60;
+}
+
+.token.variable {
+  color: #c6c5fe;
+}
+
+.token.operator {
+  color: #ededed;
+}
+
+.token.entity {
+  color: #ffffb6;
+  cursor: help;
+}
+
+.token.url {
+  color: #96cbfe;
+}
+
+.language-css .token.string,
+.style .token.string {
+  color: #87c38a;
+}
+
+.token.atrule,
+.token.attr-value {
+  color: #f9ee98;
+}
+
+.token.function {
+  color: #dad085;
+}
+
+.token.regex {
+  color: #e9c062;
+}
+
+.token.important {
+  color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}

package.json

@@ -25,7 +25,9 @@
     "graphql": "^15.7.2",
     "lodash.debounce": "^4.0.8",
     "next": "12.0.7",
+    "nx": "^13.8.3",
     "postcss": "^8.4.6",
+    "prismjs": "^1.27.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-syntax-highlighter": "^15.4.5",
@@ -61,6 +63,7 @@
     "@types/classnames": "^2.3.1",
     "@types/jest": "27.0.2",
     "@types/node": "16.11.7",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "17.0.30",
     "@types/react-dom": "17.0.9",
     "@typescript-eslint/eslint-plugin": "~5.10.0",