json for genesis, assets, new component for syntax highlighting

apps/explorer/src/app/components/syntax-highlighter/index.tsx

@@ -0,0 +1,31 @@
+import Highlighter from 'react-syntax-highlighter';
+
+const vegaJsonTheme = {
+  hljs: {
+    fontSize: '1rem',
+    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+    display: 'block',
+    overflowX: 'auto',
+    padding: '1em',
+    color: '#26ff8a',
+    background: '#2C2C2C',
+    border: '1px solid #696969',
+  },
+  'hljs-literal': {
+    color: '#ff2d5e',
+  },
+  'hljs-number': {
+    color: '#ff7a1a',
+  },
+  'hljs-string': {
+    color: '#48aff0',
+  },
+};
+
+export const SyntaxHighlighter = ({ data }: { data: unknown }) => {
+  return (
+    <Highlighter language="json" style={vegaJsonTheme}>
+      {JSON.stringify(data, null, '  ')}
+    </Highlighter>
+  );
+};

apps/explorer/src/app/routes/assets/index.tsx

@@ -1,5 +1,7 @@
-import { gql, useQuery } from "@apollo/client";
-import { AssetsQuery } from "./__generated__/AssetsQuery";
+import { gql, useQuery } from '@apollo/client';
+import React from 'react';
+import { SyntaxHighlighter } from '../../components/syntax-highlighter';
+import { AssetsQuery } from './__generated__/AssetsQuery';
 
 export const ASSETS_QUERY = gql`
   query AssetsQuery {
@@ -31,10 +33,18 @@ export const ASSETS_QUERY = gql`
 
 const Assets = () => {
   const { data } = useQuery<AssetsQuery>(ASSETS_QUERY);
+  if (!data || !data.assets) return null;
   return (
     <section>
       <h1>Assets</h1>
-      <pre>{JSON.stringify(data, null, "  ")}</pre>
+      {data?.assets.map((a) => (
+        <React.Fragment key={a.id}>
+          <h2>
+            {a.name} ({a.symbol})
+          </h2>
+          <SyntaxHighlighter data={a} />
+        </React.Fragment>
+      ))}
     </section>
   );
 };

apps/explorer/src/app/routes/genesis/index.tsx

@@ -1,15 +1,17 @@
-import { DATA_SOURCES } from "../../config";
-import useFetch from "../../hooks/use-fetch";
-import { TendermintGenesisResponse } from "./tendermint-genesis-response";
+import { SyntaxHighlighter } from '../../components/syntax-highlighter';
+import { DATA_SOURCES } from '../../config';
+import useFetch from '../../hooks/use-fetch';
+import { TendermintGenesisResponse } from './tendermint-genesis-response';
 
 const Genesis = () => {
   const { data: genesis } = useFetch<TendermintGenesisResponse>(
     `${DATA_SOURCES.tendermintUrl}/genesis`
   );
+  if (!genesis?.result.genesis) return null;
   return (
     <section>
       <h1>Genesis</h1>
-      <pre>{JSON.stringify(genesis, null, "  ")}</pre>
+      <SyntaxHighlighter data={genesis?.result.genesis} />
     </section>
   );
 };

apps/explorer/src/app/routes/markets/index.tsx

@@ -1,8 +1,8 @@
 import { gql, useQuery } from '@apollo/client';
 import { MarketsQuery } from './__generated__/MarketsQuery';
 
-import SyntaxHighlighter from 'react-syntax-highlighter';
 import React from 'react';
+import { SyntaxHighlighter } from '../../components/syntax-highlighter';
 
 const MARKETS_QUERY = gql`
   query MarketsQuery {
@@ -144,28 +144,6 @@ const MARKETS_QUERY = gql`
   }
 `;
 
-const vegaJsonTheme = {
-  hljs: {
-    fontSize: '1rem',
-    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
-    display: 'block',
-    overflowX: 'auto',
-    padding: '1em',
-    color: '#26ff8a',
-    background: '#2C2C2C',
-    border: '1px solid #696969',
-  },
-  'hljs-literal': {
-    color: '#ff2d5e',
-  },
-  'hljs-number': {
-    color: '#ff7a1a',
-  },
-  'hljs-string': {
-    color: '#48aff0',
-  },
-};
-
 const Markets = () => {
   const { data } = useQuery<MarketsQuery>(MARKETS_QUERY);
 
@@ -176,9 +154,7 @@ const Markets = () => {
       {data.markets.map((m) => (
         <React.Fragment key={m.id}>
           <h2>{m.name}</h2>
-          <SyntaxHighlighter language="json" style={vegaJsonTheme}>
-            {JSON.stringify(m, null, '  ')}
-          </SyntaxHighlighter>
+          <SyntaxHighlighter data={m} />
         </React.Fragment>
       ))}
     </section>