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

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

Browse Source 
* 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>
This commit is contained in:
Sam Keen 2022-04-29 10:46:31 +01:00 committed by GitHub
parent de4c5499b9
commit 2b910aa04c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 91 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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');

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

@ -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>
);
};

2
apps/explorer/src/app/routes/assets/index.tsx
View File

@ -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`

2
apps/explorer/src/app/routes/genesis/index.tsx
View File

@ -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';

2
apps/explorer/src/app/routes/governance/index.tsx
View File

@ -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,

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

@ -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';

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

@ -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`

2
apps/explorer/src/app/routes/parties/id/index.tsx
View File

@ -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';

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

@ -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,

2
apps/explorer/src/app/routes/validators/index.tsx
View File

@ -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';

1
apps/token/src/components/nav/nav.scss
View File

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

1
apps/token/src/components/syntax-highlighter/index.tsx
View File

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

11
apps/token/src/components/syntax-highlighter/syntax-highlighter.test.tsx
View File

@ -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)
);
});

36
apps/token/src/components/syntax-highlighter/syntax-highlighter.tsx
View File

@ -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>
);
};

3
apps/token/src/hooks/use-ethereum-config.ts
View File

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

4
apps/token/src/hooks/use-pending-transactions.ts
View File

@ -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;
};

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

@ -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;
}

15
apps/token/src/lib/web3-utils.ts
View File

@ -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 false;
}
return true;
return !('code' in error && Object.values(IgnoreCodes).includes(error.code));
};
/**
@ -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 true;
}
return false;
return 'code' in error && error.code === IgnoreCodes.USER_REJECTED;
};
/**
@ -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 true;
}
return false;
return 'code' in error && error.code === IgnoreCodes.ALREADY_PROCESSING;
};

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

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

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

@ -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 = ({

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

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

24
libs/tailwindcss-config/src/vega-custom-classes.js
View File

@ -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,
},
});
});

1
libs/ui-toolkit/src/components/syntax-highlighter/index.ts Normal file
View File

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

14
libs/ui-toolkit/src/components/syntax-highlighter/syntax-highlighter.spec.tsx Normal file
View File

@ -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();
});
});

20
libs/ui-toolkit/src/components/syntax-highlighter/syntax-highlighter.stories.tsx Normal file
View File

@ -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} />;

11
libs/ui-toolkit/src/components/syntax-highlighter/syntax-highlighter.tsx Normal file
View File

@ -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>
);
};

1
libs/ui-toolkit/src/index.ts
View File

@ -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';

3
libs/ui-toolkit/tailwind.config.js
View File

@ -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],
};