Feat/272 syntax highlighter from explorer to ui-toolkit and feat/216 added light theme and feat/283 add to token (#286)

* Moved syntax highlighter from explorer to ui-toolkit

* Update libs/ui-toolkit/src/components/syntax-highlighter/syntax-highlighter.stories.tsx

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

* Added a light theme for syntax highlighter, added the styling for syntax highlighter to our custom classes

* Suboptimal but successful way of ensuring styling is applied to syntax highlighter

* Styling syntax highlighter with scss

* Fix failing test

* Back to applying styling via custom plugin, but with a wrapper on the syntax highlighter ensuring Tailwind doesn't cull the classes

* Preferred class name

* prettier formatting

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>
Co-authored-by: Joe <joe@vega.xyz>

apps/explorer-e2e/src/support/pages/transactions-page.ts

@@ -53,7 +53,7 @@ export default class TransactionsPage extends BasePage {
                 .each(($propertyName) => {
                   cy.wrap($propertyName).should('not.be.empty');
                 });
-              cy.get('span[style*="color"]')
+              cy.get('.hljs-string')
                 .should('have.length.at.least', 8)
                 .each(($propertyValue) => {
                   cy.wrap($propertyValue).should('not.be.empty');

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

@@ -1,31 +0,0 @@
-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

@@ -3,7 +3,7 @@ import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
-import { SyntaxHighlighter } from '../../components/syntax-highlighter';
+import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import type { AssetsQuery } from './__generated__/AssetsQuery';
 
 export const ASSETS_QUERY = gql`

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

@@ -1,6 +1,6 @@
 import { t } from '@vegaprotocol/react-helpers';
 import { RouteTitle } from '../../components/route-title';
-import { SyntaxHighlighter } from '../../components/syntax-highlighter';
+import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { DATA_SOURCES } from '../../config';
 import useFetch from '../../hooks/use-fetch';
 import type { TendermintGenesisResponse } from './tendermint-genesis-response';

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

@@ -3,7 +3,7 @@ import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
-import { SyntaxHighlighter } from '../../components/syntax-highlighter';
+import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import type {
   ProposalsQuery,
   ProposalsQuery_proposals_terms_change,

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

@@ -2,7 +2,7 @@ import { gql, useQuery } from '@apollo/client';
 import type { MarketsQuery } from './__generated__/MarketsQuery';
 
 import React from 'react';
-import { SyntaxHighlighter } from '../../components/syntax-highlighter';
+import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
 import { t } from '@vegaprotocol/react-helpers';

apps/explorer/src/app/routes/network-parameters/index.tsx

@@ -1,7 +1,7 @@
 import { gql, useQuery } from '@apollo/client';
 import { RouteTitle } from '../../components/route-title';
 import type { NetworkParametersQuery } from './__generated__/NetworkParametersQuery';
-import { SyntaxHighlighter } from '../../components/syntax-highlighter';
+import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
 
 export const NETWORK_PARAMETERS_QUERY = gql`

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

@@ -5,7 +5,7 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import { RouteTitle } from '../../../components/route-title';
 import { SubHeading } from '../../../components/sub-heading';
-import { SyntaxHighlighter } from '../../../components/syntax-highlighter';
+import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { DATA_SOURCES } from '../../../config';
 import useFetch from '../../../hooks/use-fetch';
 import type { TendermintSearchTransactionResponse } from '../tendermint-transaction-response';

apps/explorer/src/app/routes/txs/id/tx-content.tsx

@@ -1,6 +1,6 @@
 import { t } from '@vegaprotocol/react-helpers';
 import { StatusMessage } from '../../../components/status-message';
-import { SyntaxHighlighter } from '../../../components/syntax-highlighter';
+import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import {
   TableWithTbody,
   TableCell,

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

@@ -3,7 +3,7 @@ import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
-import { SyntaxHighlighter } from '../../components/syntax-highlighter';
+import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { DATA_SOURCES } from '../../config';
 import useFetch from '../../hooks/use-fetch';
 import type { TendermintValidatorsResponse } from './tendermint-validator-response';

apps/token/src/components/nav/nav.scss

@@ -1,7 +1,6 @@
 @import '../../styles/colors';
 
 .nav {
-  padding: 20px;
   padding: 10px !important;
   border-bottom: 1px solid $white;
   position: sticky;

apps/token/src/components/syntax-highlighter/index.tsx

@@ -1 +0,0 @@
-export { SyntaxHighlighter } from './syntax-highlighter';

apps/token/src/components/syntax-highlighter/syntax-highlighter.test.tsx

@@ -1,11 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { SyntaxHighlighter } from './syntax-highlighter';
-
-it('Renders test id and content', () => {
-  const data = {};
-  render(<SyntaxHighlighter data={data} />);
-  expect(screen.getByTestId('syntax-highlighter')).toHaveTextContent(
-    JSON.stringify(data, null, 2)
-  );
-});

apps/token/src/components/syntax-highlighter/syntax-highlighter.tsx

@@ -1,36 +0,0 @@
-// TODO: Move to ui-toolkit https://github.com/vegaprotocol/frontend-monorepo/issues/272
-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: object }) => {
-  return (
-    <Highlighter
-      language="json"
-      style={vegaJsonTheme}
-      data-testid="syntax-highlighter"
-    >
-      {JSON.stringify(data, null, 2)}
-    </Highlighter>
-  );
-};

apps/token/src/hooks/use-ethereum-config.ts

@@ -19,8 +19,7 @@ export const useEthereumConfig = () => {
     }
     try {
       const [configJson] = ethereumConfigJSON;
-      const config = JSON.parse(configJson);
+      return JSON.parse(configJson);
-      return config;
     } catch {
       Sentry.captureMessage('Ethereum config JSON is invalid');
       return null;

apps/token/src/hooks/use-pending-transactions.ts

@@ -5,9 +5,7 @@ import { useContracts } from '../contexts/contracts/contracts-context';
 export const usePendingTransactions = () => {
   const { transactions } = useContracts();
 
-  const pending = React.useMemo(() => {
+  return React.useMemo(() => {
     return transactions.some((tx) => tx.pending);
   }, [transactions]);
-
-  return pending;
 };

apps/token/src/hooks/use-refresh-associated-balances.ts

@@ -10,7 +10,7 @@ export function useRefreshAssociatedBalances() {
   const { appDispatch } = useAppState();
   const { staking, vesting } = useContracts();
 
-  const refresh = React.useCallback(
+  return React.useCallback(
     async (ethAddress: string, vegaKey: string) => {
       const [walletAssociatedBalance, vestingAssociatedBalance] =
         await Promise.all([
@@ -26,6 +26,4 @@ export function useRefreshAssociatedBalances() {
     },
     [staking, vesting, appDispatch]
   );
-
-  return refresh;
 }

apps/token/src/lib/web3-utils.ts

@@ -17,10 +17,7 @@ const IgnoreCodes = {
  * and thus not capture in Sentry
  */
 export const isUnexpectedError = (error: Error | TxError) => {
-  if ('code' in error && Object.values(IgnoreCodes).includes(error.code)) {
+  return !('code' in error && Object.values(IgnoreCodes).includes(error.code));
-    return false;
-  }
-  return true;
 };
 
 /**
@@ -28,10 +25,7 @@ export const isUnexpectedError = (error: Error | TxError) => {
  * a transaction confirmation prompt
  */
 export const isUserRejection = (error: Error | TxError) => {
-  if ('code' in error && error.code === IgnoreCodes.USER_REJECTED) {
+  return 'code' in error && error.code === IgnoreCodes.USER_REJECTED;
-    return true;
-  }
-  return false;
 };
 
 /**
@@ -39,8 +33,5 @@ export const isUserRejection = (error: Error | TxError) => {
  * a transaction confirmation prompt
  */
 export const isAlreadyProcessing = (error: Error | TxError) => {
-  if ('code' in error && error.code === IgnoreCodes.ALREADY_PROCESSING) {
+  return 'code' in error && error.code === IgnoreCodes.ALREADY_PROCESSING;
-    return true;
-  }
-  return false;
 };

apps/token/src/routes/claim/target-address-mismatch.tsx

@@ -1,6 +1,6 @@
 import { Trans, useTranslation } from 'react-i18next';
 
-import { Colors } from '../../config/colors';
+import { Colors } from '../../config';
 
 interface TargetAddressMismatchProps {
   connectedAddress: string;

apps/token/src/routes/governance/components/proposal-terms-json/proposal-terms-json.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { SyntaxHighlighter } from '../../../../components/syntax-highlighter';
+import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import type { RestProposalResponse } from '../../proposal/proposal-container';
 
 export const ProposalTermsJson = ({

apps/token/src/routes/governance/components/vote-details/vote-details.scss

@@ -75,6 +75,6 @@
   }
 
   &__set_to {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
 }

libs/tailwindcss-config/src/vega-custom-classes.js

@@ -1,10 +1,34 @@
 const plugin = require('tailwindcss/plugin');
+const theme = require('./theme');
 
 const vegaCustomClasses = plugin(function ({ addUtilities }) {
   addUtilities({
     '.calt': {
       fontFeatureSettings: "'calt'",
     },
+    '.syntax-highlighter-wrapper .hljs': {
+      fontSize: '1rem',
+      fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+      display: 'block',
+      overflowX: 'auto',
+      padding: '1em',
+      background: theme.colors.white.DEFAULT,
+      color: theme.colors.intent.help,
+      border: '1px solid #696969',
+    },
+    '.dark .syntax-highlighter-wrapper .hljs': {
+      background: '#2C2C2C',
+      color: theme.colors.vega.green,
+    },
+    '.syntax-highlighter-wrapper .hljs-literal': {
+      color: theme.colors.vega.pink,
+    },
+    '.syntax-highlighter-wrapper .hljs-number': {
+      color: theme.colors.intent.warning,
+    },
+    '.syntax-highlighter-wrapper .hljs-string': {
+      color: theme.colors.blue,
+    },
   });
 });
 

libs/ui-toolkit/src/components/syntax-highlighter/index.ts

@@ -0,0 +1 @@
+export * from './syntax-highlighter';

libs/ui-toolkit/src/components/syntax-highlighter/syntax-highlighter.spec.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+
+import { SyntaxHighlighter } from './syntax-highlighter';
+
+describe('Syntax highlighter', () => {
+  it('should render data successfully', () => {
+    const testData = {
+      name: 'test of highlighter',
+    };
+
+    render(<SyntaxHighlighter data={testData} />);
+    expect(screen.getByText('"test of highlighter"')).toBeInTheDocument();
+  });
+});

libs/ui-toolkit/src/components/syntax-highlighter/syntax-highlighter.stories.tsx

@@ -0,0 +1,20 @@
+import type { Story, Meta } from '@storybook/react';
+import { SyntaxHighlighter } from './syntax-highlighter';
+
+export default {
+  component: SyntaxHighlighter,
+  title: 'Syntax Highlighter',
+} as Meta;
+
+const data = {
+  name: 'Level one',
+  undefinedProp: undefined,
+  nullProp: null,
+  level: 1,
+  nestedData: {
+    name: 'Level two',
+    level: 2,
+  },
+};
+
+export const Default: Story = () => <SyntaxHighlighter data={data} />;

libs/ui-toolkit/src/components/syntax-highlighter/syntax-highlighter.tsx

@@ -0,0 +1,11 @@
+import Highlighter from 'react-syntax-highlighter';
+
+export const SyntaxHighlighter = ({ data }: { data: unknown }) => {
+  return (
+    <div className="syntax-highlighter-wrapper">
+      <Highlighter language="json" useInlineStyles={false}>
+        {JSON.stringify(data, null, '  ')}
+      </Highlighter>
+    </div>
+  );
+};

libs/ui-toolkit/src/index.ts

@@ -21,6 +21,7 @@ export { VegaLogo } from './components/vega-logo';
 export { Tooltip } from './components/tooltip';
 export { Indicator } from './components/indicator';
 export { Card } from './components/card';
+export { SyntaxHighlighter } from './components/syntax-highlighter';
 
 // Utils
 export * from './utils/intent';

libs/ui-toolkit/tailwind.config.js

@@ -1,6 +1,7 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
 const theme = require('../tailwindcss-config/src/theme');
+const vegaCustomClasses = require('../tailwindcss-config/src/vega-custom-classes');
 
 module.exports = {
   content: [
@@ -12,5 +13,5 @@ module.exports = {
   theme: {
     extend: theme,
   },
-  plugins: [],
+  plugins: [vegaCustomClasses],
 };