From e981b8c7fa7365b2f7a2e9becb8fc3e9d00734f6 Mon Sep 17 00:00:00 2001
From: sam-keen <samuel.kleinmann@gmail.com>
Date: Thu, 3 Mar 2022 17:11:18 +0000
Subject: [PATCH] Moved to use syntax-highlighter instead of prism

---
 .../src/app/components/codeblock/index.tsx    | 19 -------------------
 .../src/app/components/txs/id/txContent.tsx   | 18 +++++++++---------
 package.json                                  |  1 -
 3 files changed, 9 insertions(+), 29 deletions(-)
 delete mode 100644 apps/explorer/src/app/components/codeblock/index.tsx

diff --git a/apps/explorer/src/app/components/codeblock/index.tsx b/apps/explorer/src/app/components/codeblock/index.tsx
deleted file mode 100644
index 9ebffa109..000000000
--- a/apps/explorer/src/app/components/codeblock/index.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/apps/explorer/src/app/components/txs/id/txContent.tsx b/apps/explorer/src/app/components/txs/id/txContent.tsx
index 6d3ee407f..ed0f0112e 100644
--- a/apps/explorer/src/app/components/txs/id/txContent.tsx
+++ b/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} />
     </>
   );
 };
diff --git a/package.json b/package.json
index f8b46b06e..3f6df9dc1 100644
--- a/package.json
+++ b/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",