LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

render makets list with json fomratter

Browse Source
This commit is contained in:
Dexter 2022-02-18 17:49:48 +00:00 committed by Dexter Edwards
parent 444941e169
commit 04df5aeed6
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/explorer/src/app/routes/markets/index.tsx
View File

@ -2,6 +2,7 @@ import { gql, useQuery } from '@apollo/client';
import { MarketsQuery } from './__generated__/MarketsQuery'; import { MarketsQuery } from './__generated__/MarketsQuery';
import SyntaxHighlighter from 'react-syntax-highlighter'; import SyntaxHighlighter from 'react-syntax-highlighter';
import React from 'react';
const MARKETS_QUERY = gql` const MARKETS_QUERY = gql`
query MarketsQuery { query MarketsQuery {
@ -146,6 +147,7 @@ const MARKETS_QUERY = gql`
const vegaJsonTheme = { const vegaJsonTheme = {
hljs: { hljs: {
fontSize: '1rem', fontSize: '1rem',
fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
display: 'block', display: 'block',
overflowX: 'auto', overflowX: 'auto',
padding: '1em', padding: '1em',
@ -166,14 +168,19 @@ const vegaJsonTheme = {
const Markets = () => { const Markets = () => {
const { data } = useQuery<MarketsQuery>(MARKETS_QUERY); const { data } = useQuery<MarketsQuery>(MARKETS_QUERY);
if (!data || !data.markets) return null;
return ( return (
<section> <section>
<h1>Markets</h1> <h1>Markets</h1>
{data && ( {data.markets.map((m) => (
<React.Fragment key={m.id}>
<h2>{m.name}</h2>
<SyntaxHighlighter language="json" style={vegaJsonTheme}> <SyntaxHighlighter language="json" style={vegaJsonTheme}>
{JSON.stringify(data, null, ' ')} {JSON.stringify(m, null, ' ')}
</SyntaxHighlighter> </SyntaxHighlighter>
)} </React.Fragment>
))}
</section> </section>
); );
}; };