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

nx format

Browse Source
This commit is contained in:
Bartłomiej Głownia 2022-02-11 15:49:45 +01:00
parent 355de1a32f
commit b2eeaa338a
15 changed files with 108 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -1,5 +1,3 @@
# NxMonorepo # NxMonorepo
This project was generated using [Nx](https://nx.dev). This project was generated using [Nx](https://nx.dev).
@ -79,8 +77,6 @@ Run `nx graph` to see a diagram of the dependencies of your projects.
Visit the [Nx Documentation](https://nx.dev) to learn more. Visit the [Nx Documentation](https://nx.dev) to learn more.
## ☁ Nx Cloud ## ☁ Nx Cloud
### Distributed Computation Caching & Distributed Task Execution ### Distributed Computation Caching & Distributed Task Execution

2
libs/ui-toolkit/src/components/callout/callout.scss
View File

@ -1,4 +1,4 @@
@import "../../styles/colors"; @import '../../styles/colors';
.callout { .callout {
display: flex; display: flex;

16
libs/ui-toolkit/src/components/callout/callout.stories.tsx
View File

@ -1,10 +1,10 @@
import React from "react"; import React from 'react';
import { ComponentStory, ComponentMeta } from "@storybook/react"; import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Callout } from "."; import { Callout } from '.';
export default { export default {
title: "Callout", title: 'Callout',
component: Callout, component: Callout,
} as ComponentMeta<typeof Callout>; } as ComponentMeta<typeof Callout>;
@ -17,20 +17,20 @@ Default.args = {};
export const Success = Template.bind({}); export const Success = Template.bind({});
Success.args = { Success.args = {
intent: "success", intent: 'success',
}; };
export const Error = Template.bind({}); export const Error = Template.bind({});
Error.args = { Error.args = {
intent: "error", intent: 'error',
}; };
export const Warning = Template.bind({}); export const Warning = Template.bind({});
Warning.args = { Warning.args = {
intent: "warn", intent: 'warn',
}; };
export const Action = Template.bind({}); export const Action = Template.bind({});
Action.args = { Action.args = {
intent: "action", intent: 'action',
}; };

28
libs/ui-toolkit/src/components/callout/callout.test.tsx
View File

@ -1,28 +1,28 @@
import { render, screen } from "@testing-library/react"; import { render, screen } from '@testing-library/react';
import * as React from "react"; import * as React from 'react';
import { Callout } from "."; import { Callout } from '.';
test("It renders content within callout", () => { test('It renders content within callout', () => {
render(<Callout>Content</Callout>); render(<Callout>Content</Callout>);
expect(screen.getByTestId("callout")).toHaveTextContent("Content"); expect(screen.getByTestId('callout')).toHaveTextContent('Content');
}); });
test("It renders title and icon", () => { test('It renders title and icon', () => {
render(<Callout icon={<div data-testid="icon" />} title="title" />); render(<Callout icon={<div data-testid="icon" />} title="title" />);
expect(screen.getByTestId("icon")).toBeInTheDocument(); expect(screen.getByTestId('icon')).toBeInTheDocument();
expect(screen.getByText("title")).toBeInTheDocument(); expect(screen.getByText('title')).toBeInTheDocument();
}); });
const intents = ["warn", "action", "error", "success"] as [ const intents = ['warn', 'action', 'error', 'success'] as [
"warn", 'warn',
"action", 'action',
"error", 'error',
"success" 'success'
]; ];
intents.map((intent) => intents.map((intent) =>
test(`Applies class for ${intent}`, () => { test(`Applies class for ${intent}`, () => {
render(<Callout intent={intent} />); render(<Callout intent={intent} />);
expect(screen.getByTestId("callout")).toHaveClass(`callout--${intent}`); expect(screen.getByTestId('callout')).toHaveClass(`callout--${intent}`);
}) })
); );

8
libs/ui-toolkit/src/components/callout/callout.tsx
View File

@ -1,5 +1,5 @@
import "./callout.scss"; import './callout.scss';
import React from "react"; import React from 'react';
export const Callout = ({ export const Callout = ({
children, children,
@ -9,10 +9,10 @@ export const Callout = ({
}: { }: {
children?: React.ReactNode; children?: React.ReactNode;
title?: React.ReactElement | string; title?: React.ReactElement | string;
intent?: "success" | "error" | "warn" | "action"; intent?: 'success' | 'error' | 'warn' | 'action';
icon?: React.ReactNode; icon?: React.ReactNode;
}) => { }) => {
const className = ["callout", intent ? `callout--${intent}` : ""].join(" "); const className = ['callout', intent ? `callout--${intent}` : ''].join(' ');
return ( return (
<div data-testid="callout" className={className}> <div data-testid="callout" className={className}>
{icon && <div className="callout__icon">{icon}</div>} {icon && <div className="callout__icon">{icon}</div>}

2
libs/ui-toolkit/src/components/callout/index.ts
View File

@ -1 +1 @@
export * from "./callout"; export * from './callout';

28
libs/ui-toolkit/src/components/etherscan-link/etherscan-link.stories.tsx
View File

@ -1,17 +1,17 @@
import React from "react"; import React from 'react';
import { ComponentStory, ComponentMeta } from "@storybook/react"; import { ComponentStory, ComponentMeta } from '@storybook/react';
import { EtherscanLink } from "."; import { EtherscanLink } from '.';
import { EthereumChainIds, EthereumChainNames } from "../../utils/web3"; import { EthereumChainIds, EthereumChainNames } from '../../utils/web3';
export default { export default {
title: "EtherscanLink", title: 'EtherscanLink',
component: EtherscanLink, component: EtherscanLink,
argTypes: { argTypes: {
chainId: { chainId: {
options: Object.values(EthereumChainIds), options: Object.values(EthereumChainIds),
control: { control: {
type: "select", // Type 'select' is automatically inferred when 'options' is defined type: 'select', // Type 'select' is automatically inferred when 'options' is defined
labels: EthereumChainNames, labels: EthereumChainNames,
}, },
}, },
@ -25,27 +25,27 @@ const Template: ComponentStory<typeof EtherscanLink> = (args) => (
export const MainnetTx = Template.bind({}); export const MainnetTx = Template.bind({});
MainnetTx.args = { MainnetTx.args = {
chainId: EthereumChainIds.Mainnet, chainId: EthereumChainIds.Mainnet,
tx: "foo", tx: 'foo',
text: "View transaction on Etherscan", text: 'View transaction on Etherscan',
}; };
export const RopstenTx = Template.bind({}); export const RopstenTx = Template.bind({});
RopstenTx.args = { RopstenTx.args = {
chainId: EthereumChainIds.Ropsten, chainId: EthereumChainIds.Ropsten,
tx: "foo", tx: 'foo',
text: "View transaction on Etherscan", text: 'View transaction on Etherscan',
}; };
export const MainnetAddress = Template.bind({}); export const MainnetAddress = Template.bind({});
MainnetAddress.args = { MainnetAddress.args = {
chainId: EthereumChainIds.Mainnet, chainId: EthereumChainIds.Mainnet,
address: "foo", address: 'foo',
text: "View transaction on Etherscan", text: 'View transaction on Etherscan',
}; };
export const RopstenAddress = Template.bind({}); export const RopstenAddress = Template.bind({});
RopstenAddress.args = { RopstenAddress.args = {
chainId: EthereumChainIds.Ropsten, chainId: EthereumChainIds.Ropsten,
address: "foo", address: 'foo',
text: "View transaction on Etherscan", text: 'View transaction on Etherscan',
}; };

48
libs/ui-toolkit/src/components/etherscan-link/etherscan-link.test.tsx
View File

@ -1,65 +1,65 @@
import { render, screen } from "@testing-library/react"; import { render, screen } from '@testing-library/react';
import * as React from "react"; import * as React from 'react';
import { EtherscanLink } from "."; import { EtherscanLink } from '.';
import { EthereumChainIds } from "../../utils/web3"; import { EthereumChainIds } from '../../utils/web3';
test("It renders a link with the text", () => { test('It renders a link with the text', () => {
render( render(
<EtherscanLink text="foo" chainId={EthereumChainIds.Mainnet} tx="tx" /> <EtherscanLink text="foo" chainId={EthereumChainIds.Mainnet} tx="tx" />
); );
expect(screen.getByText("foo")).toBeInTheDocument(); expect(screen.getByText('foo')).toBeInTheDocument();
}); });
test("It renders a link with the tx hash if no text is provided", () => { test('It renders a link with the tx hash if no text is provided', () => {
render(<EtherscanLink chainId={EthereumChainIds.Mainnet} tx="tx" />); render(<EtherscanLink chainId={EthereumChainIds.Mainnet} tx="tx" />);
expect(screen.getByText("tx")).toBeInTheDocument(); expect(screen.getByText('tx')).toBeInTheDocument();
}); });
test("It renders a link with the address if no text is provided", () => { test('It renders a link with the address if no text is provided', () => {
render( render(
<EtherscanLink chainId={EthereumChainIds.Mainnet} address="address" /> <EtherscanLink chainId={EthereumChainIds.Mainnet} address="address" />
); );
expect(screen.getByText("address")).toBeInTheDocument(); expect(screen.getByText('address')).toBeInTheDocument();
}); });
test("It links to etherscan if network is mainnet", () => { test('It links to etherscan if network is mainnet', () => {
render( render(
<EtherscanLink chainId={EthereumChainIds.Mainnet} address="address" /> <EtherscanLink chainId={EthereumChainIds.Mainnet} address="address" />
); );
expect(screen.getByTestId("etherscan-link")).toHaveAttribute( expect(screen.getByTestId('etherscan-link')).toHaveAttribute(
"href", 'href',
"https://etherscan.io/address/address" 'https://etherscan.io/address/address'
); );
}); });
test("It links to ropsten etherscan if network is ropsten", () => { test('It links to ropsten etherscan if network is ropsten', () => {
render( render(
<EtherscanLink chainId={EthereumChainIds.Ropsten} address="address" /> <EtherscanLink chainId={EthereumChainIds.Ropsten} address="address" />
); );
expect(screen.getByTestId("etherscan-link")).toHaveAttribute( expect(screen.getByTestId('etherscan-link')).toHaveAttribute(
"href", 'href',
"https://ropsten.etherscan.io/address/address" 'https://ropsten.etherscan.io/address/address'
); );
}); });
test("Doesn't render for address if chainid is null", () => { test("Doesn't render for address if chainid is null", () => {
render(<EtherscanLink chainId={null} address="address" />); render(<EtherscanLink chainId={null} address="address" />);
expect(screen.queryByTestId("etherscan-link")).not.toBeInTheDocument(); expect(screen.queryByTestId('etherscan-link')).not.toBeInTheDocument();
}); });
test("Doesn't render for tx if chainid is null", () => { test("Doesn't render for tx if chainid is null", () => {
render(<EtherscanLink chainId={null} tx="tx" />); render(<EtherscanLink chainId={null} tx="tx" />);
expect(screen.queryByTestId("etherscan-link")).not.toBeInTheDocument(); expect(screen.queryByTestId('etherscan-link')).not.toBeInTheDocument();
}); });
test("Doesn't render for address if chainid is unknown", () => { test("Doesn't render for address if chainid is unknown", () => {
// @ts-ignore // @ts-ignore
render(<EtherscanLink chainId={"foo"} address="address" />); render(<EtherscanLink chainId={'foo'} address="address" />);
expect(screen.queryByTestId("etherscan-link")).not.toBeInTheDocument(); expect(screen.queryByTestId('etherscan-link')).not.toBeInTheDocument();
}); });
test("Doesn't render for tx if chainid is unknown", () => { test("Doesn't render for tx if chainid is unknown", () => {
// @ts-ignore // @ts-ignore
render(<EtherscanLink chainId={"foo"} tx="tx" />); render(<EtherscanLink chainId={'foo'} tx="tx" />);
expect(screen.queryByTestId("etherscan-link")).not.toBeInTheDocument(); expect(screen.queryByTestId('etherscan-link')).not.toBeInTheDocument();
}); });

25
libs/ui-toolkit/src/components/etherscan-link/etherscan-link.tsx
View File

@ -1,12 +1,12 @@
import React from "react"; import React from 'react';
import { EthereumChainId } from "../../utils/web3"; import { EthereumChainId } from '../../utils/web3';
const etherscanUrls: Record<EthereumChainId, string> = { const etherscanUrls: Record<EthereumChainId, string> = {
"0x1": "https://etherscan.io", '0x1': 'https://etherscan.io',
"0x3": "https://ropsten.etherscan.io", '0x3': 'https://ropsten.etherscan.io',
"0x4": "https://rinkeby.etherscan.io", '0x4': 'https://rinkeby.etherscan.io',
"0x5": "https://goerli.etherscan.io", '0x5': 'https://goerli.etherscan.io',
"0x2a": "https://kovan.etherscan.io", '0x2a': 'https://kovan.etherscan.io',
}; };
interface BaseEtherscanLinkProps { interface BaseEtherscanLinkProps {
@ -36,11 +36,12 @@ export const EtherscanLink = ({
}: EtherscanLinkProps) => { }: EtherscanLinkProps) => {
let hash: string; let hash: string;
let txLink: string | null; let txLink: string | null;
const createLink = React.useMemo(() => etherscanLinkCreator(chainId), [ const createLink = React.useMemo(
chainId, () => etherscanLinkCreator(chainId),
]); [chainId]
);
if ("tx" in props) { if ('tx' in props) {
hash = props.tx; hash = props.tx;
txLink = createLink ? createLink.tx(hash) : null; txLink = createLink ? createLink.tx(hash) : null;
} else { } else {
@ -85,4 +86,4 @@ function etherscanLinkCreator(chainId: EthereumChainId | null) {
}; };
} }
EtherscanLink.displayName = "EtherScanLink"; EtherscanLink.displayName = 'EtherScanLink';

2
libs/ui-toolkit/src/components/etherscan-link/index.ts
View File

@ -1 +1 @@
export { EtherscanLink } from "./etherscan-link"; export { EtherscanLink } from './etherscan-link';

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

@ -1,7 +1,7 @@
import * as EthereumUtils from "./utils/web3"; import * as EthereumUtils from './utils/web3';
export * from './lib/ui-toolkit'; export * from './lib/ui-toolkit';
export { Callout } from "./components/callout"; export { Callout } from './components/callout';
export { EtherscanLink } from "./components/etherscan-link"; export { EtherscanLink } from './components/etherscan-link';
export { EthereumUtils }; export { EthereumUtils };

6
libs/ui-toolkit/src/styles/_fonts.scss
View File

@ -1,6 +1,6 @@
$font-main: "Helvetica neue", "Helvetica", arial, sans-serif; $font-main: 'Helvetica neue', 'Helvetica', arial, sans-serif;
$font-mono: "Roboto Mono", monospace; $font-mono: 'Roboto Mono', monospace;
$font-pixelated: NeuePixelGrotesk, "Helvetica neue", "Helvetica", arial, $font-pixelated: NeuePixelGrotesk, 'Helvetica neue', 'Helvetica', arial,
sans-serif; sans-serif;
.font-main { .font-main {

10
libs/ui-toolkit/src/styles/index.scss
View File

@ -1,6 +1,6 @@
@import "./colors"; @import './colors';
@import "./fonts"; @import './fonts';
@import "./reset"; @import './reset';
html, html,
body, body,
@ -125,8 +125,8 @@ button {
// FORM ELEMENTS // FORM ELEMENTS
select, select,
input[type="text"], input[type='text'],
input[type="password"] { input[type='password'] {
width: 100%; width: 100%;
padding: 12px; padding: 12px;
border-radius: 4px; border-radius: 4px;

32
libs/ui-toolkit/src/utils/web3.ts
View File

@ -1,23 +1,23 @@
export type EthereumChainId = "0x1" | "0x3" | "0x4" | "0x5" | "0x2a"; export type EthereumChainId = '0x1' | '0x3' | '0x4' | '0x5' | '0x2a';
export type EthereumChainName = export type EthereumChainName =
| "Mainnet" | 'Mainnet'
| "Ropsten" | 'Ropsten'
| "Rinkeby" | 'Rinkeby'
| "Goerli" | 'Goerli'
| "Kovan"; | 'Kovan';
export const EthereumChainNames: Record<EthereumChainId, EthereumChainName> = { export const EthereumChainNames: Record<EthereumChainId, EthereumChainName> = {
"0x1": "Mainnet", '0x1': 'Mainnet',
"0x3": "Ropsten", '0x3': 'Ropsten',
"0x4": "Rinkeby", '0x4': 'Rinkeby',
"0x5": "Goerli", '0x5': 'Goerli',
"0x2a": "Kovan", '0x2a': 'Kovan',
}; };
export const EthereumChainIds: Record<EthereumChainName, EthereumChainId> = { export const EthereumChainIds: Record<EthereumChainName, EthereumChainId> = {
Mainnet: "0x1", Mainnet: '0x1',
Ropsten: "0x3", Ropsten: '0x3',
Rinkeby: "0x4", Rinkeby: '0x4',
Goerli: "0x5", Goerli: '0x5',
Kovan: "0x2a", Kovan: '0x2a',
}; };

7
nx.json
View File

@ -17,12 +17,7 @@
"default": { "default": {
"runner": "@nrwl/nx-cloud", "runner": "@nrwl/nx-cloud",
"options": { "options": {
"cacheableOperations": [ "cacheableOperations": ["build", "lint", "test", "e2e"],
"build",
"lint",
"test",
"e2e"
],
"accessToken": "OTY4ZjdlZTItNGIwNy00NDcyLTllZjctOWIzYTg1NWE0Yzg1fHJlYWQtd3JpdGU=" "accessToken": "OTY4ZjdlZTItNGIwNy00NDcyLTllZjctOWIzYTg1NWE0Yzg1fHJlYWQtd3JpdGU="
} }
} }