Moved to use syntax-highlighter instead of prism

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

@@ -1,19 +0,0 @@
-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/txs/id/txContent.tsx

@@ -1,6 +1,6 @@
-import { Codeblock } from '../../codeblock';
 import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response';
 import { Table } from '../../table';
+import { SyntaxHighlighter } from '../../syntax-highlighter';
 
 interface TxContentProps {
   data: ChainExplorerTxResponse | undefined;
@@ -11,14 +11,14 @@ export const TxContent = ({ data }: TxContentProps) => {
     return <>Awaiting decoded transaction data</>;
   }
 
-  const Command = JSON.parse(data.Command);
+  const { marketId, type, side, size } = JSON.parse(data.Command);
 
-  const displayCode = `{
-  "market": "${Command.marketId}",
-  "type": "${Command.type}",
-  "side": "${Command.side}",
-  "size": "${Command.size}",
-}`;
+  const displayCode = {
+    market: marketId,
+    type,
+    side,
+    size,
+  };
 
   return (
     <>
@@ -30,7 +30,7 @@ export const TxContent = ({ data }: TxContentProps) => {
       </Table>
 
       <h3>Decoded transaction content</h3>
-      <Codeblock code={displayCode} language={'javascript'} />
+      <SyntaxHighlighter data={displayCode} />
     </>
   );
 };

package.json

@@ -27,7 +27,6 @@
     "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",