diff --git a/packages/dev-tools-pages/ts/components/Content.tsx b/packages/dev-tools-pages/ts/components/Content.tsx new file mode 100644 index 0000000000..6f46274f78 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Content.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import Container from './Container'; + +const StyledMain = + styled.div < + MainProps > + ` + padding-top: 6.25rem; + padding-bottom: 6.25rem; + ${props => + props.dark + ? ` + background-color: #000; + color: #fff; + ` + : ''}; +`; + +interface MainProps { + dark?: boolean; + children: React.ReactNode; +} + +function Main(props: MainProps) { + return ( + + {props.children} + + ); +} + +export default Main; diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx index b80fd4550a..39c99f6d90 100644 --- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx +++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import styled from 'styled-components'; +import { withContext, Props } from './withContext'; +import { Beta, Alpha } from './Typography'; import { media } from 'ts/variables'; -import { Beta } from './Typography'; const Base = styled.div` display: flex; @@ -42,9 +43,14 @@ const Item = styled.div` } `; -interface ContentBlockProps { +const StyledTitle = styled(Alpha)` + color: ${props => props.color}; +`; + +interface ContentBlockProps extends Props { title: string; - children: React.ReactNode; + main?: boolean; + children?: React.ReactNode; } function ContentBlock(props: ContentBlockProps) { @@ -52,12 +58,14 @@ function ContentBlock(props: ContentBlockProps) { return {child}; }); + const Title = props.main ? StyledTitle : Beta; + return ( - {props.title} - {children} + {props.title} + {children ? {children} : null} ); } -export default ContentBlock; +export default withContext(ContentBlock); diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx deleted file mode 100644 index 97eb407b99..0000000000 --- a/packages/dev-tools-pages/ts/components/Main.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; - -import { media } from 'ts/variables'; -import { withContext, Props } from './withContext'; - -import { Alpha } from './Typography'; - -const StyledMain = styled.div` - padding-top: 6.25rem; - padding-bottom: 6.25rem; - ${media.small` - padding-top: 2.5rem; - padding-bottom: 2.5rem; - `}; -`; - -const Title = styled(Alpha)` - color: ${props => props.color}; - margin-bottom: 6.25rem; - ${media.small` - margin-bottom: 3.125rem; - `}; -`; - -interface MainProps extends Props { - children: React.ReactNode; -} - -function Main(props: MainProps) { - return ( - - - Get started - - {props.children} - - ); -} - -export default withContext(Main); diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx index b51970a7e5..5307483e80 100644 --- a/packages/dev-tools-pages/ts/components/Tabs.tsx +++ b/packages/dev-tools-pages/ts/components/Tabs.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import styled from 'styled-components'; - import { colors } from 'ts/variables'; import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'; import Breakout from './Breakout'; @@ -41,7 +40,7 @@ const Root = } ${StyledTab}[aria-selected="true"] { background-color: ${colors.gray}; - } + } `; interface TabsProps extends Props { diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx index 35c810cb3e..96f26a9785 100644 --- a/packages/dev-tools-pages/ts/pages/Compiler.tsx +++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx @@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom'; import context from 'ts/context/compiler'; import Base from 'ts/components/Base'; -import Container from 'ts/components/Container'; -import Main from 'ts/components/Main'; +import Content from 'ts/components/Content'; import ContentBlock from 'ts/components/ContentBlock'; import { Tabs, TabBlock } from 'ts/components/Tabs'; import Code from 'ts/components/Code'; @@ -15,40 +14,53 @@ import CompilerComponent from 'ts/components/Compiler'; function Compiler() { return ( - - -
- - - - - npm install @0x/sol-trace --save -

- Sol-trace is a subprovider that needs to be prepended to your{' '} - provider engine. Depending on your project setup, you will need to use a - specific ArtifactAdapter. Sol-trace ships with the{' '} - SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can - also write your own and support any artifact format. -

- + + + + + + + + npm install @0x/sol-trace --save +

+ Sol-trace is a subprovider that needs to be prepended to your provider engine. + Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace + ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} + TruffleArtifactAdapter for use with the Truffle framework. You can also + write your own and support any artifact format. +

+ - - - - - {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + + + + + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} - - - Truffle - Custom - - -
- + + + Truffle + Custom + + + + + +

+ Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can + define which parts of the artifact you need. +

+ + + +

+ Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can + define which parts of the artifact you need. +

+ + ); } diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx index e835e5c821..c3dfb33c5b 100644 --- a/packages/dev-tools-pages/ts/pages/Cov.tsx +++ b/packages/dev-tools-pages/ts/pages/Cov.tsx @@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom'; import context from 'ts/context/cov'; import Base from 'ts/components/Base'; -import Container from 'ts/components/Container'; -import Main from 'ts/components/Main'; +import Content from 'ts/components/Content'; import ContentBlock from 'ts/components/ContentBlock'; import { Tabs, TabBlock } from 'ts/components/Tabs'; import Code from 'ts/components/Code'; @@ -15,46 +14,44 @@ import Intro from 'ts/components/Intro'; function Cov() { return ( - - + +

+ When it comes to writing smart contracts, testing is one of the most important steps of the process. + In order to quantify the robustness of your Solidity testing suite, you need to measure its code + coverage. +

+ + + + + + + + npm install @0x/sol-trace --save

- When it comes to writing smart contracts, testing is one of the most important steps of the - process. In order to quantify the robustness of your Solidity testing suite, you need to measure - its code coverage. + Sol-trace is a subprovider that needs to be prepended to your provider engine. + Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace + ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} + TruffleArtifactAdapter for use with the Truffle framework. You can also + write your own and support any artifact format.

- -
- - - - - npm install @0x/sol-trace --save -

- Sol-trace is a subprovider that needs to be prepended to your{' '} - provider engine. Depending on your project setup, you will need to use a - specific ArtifactAdapter. Sol-trace ships with the{' '} - SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can - also write your own and support any artifact format. -

- + - - - - - {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + + + + + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} - - - Truffle - Custom - - -
- + + + Truffle + Custom + + + ); } diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx index 9f8b46b9c0..48c4c122b3 100644 --- a/packages/dev-tools-pages/ts/pages/Profiler.tsx +++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx @@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom'; import context from 'ts/context/profiler'; import Base from 'ts/components/Base'; -import Container from 'ts/components/Container'; -import Main from 'ts/components/Main'; +import Content from 'ts/components/Content'; import ContentBlock from 'ts/components/ContentBlock'; import { Tabs, TabBlock } from 'ts/components/Tabs'; import Code from 'ts/components/Code'; @@ -15,46 +14,44 @@ import Intro from 'ts/components/Intro'; function Profiler() { return ( - - + +

+ Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider. + This will help you find unexpected inefficiencies in parts of your smart contract, and take a + data-driven approach to optimizing it. +

+ + + + + + + + npm install @0x/sol-trace --save

- Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider. - This will help you find unexpected inefficiencies in parts of your smart contract, and take a - data-driven approach to optimizing it. + Sol-trace is a subprovider that needs to be prepended to your provider engine. + Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace + ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} + TruffleArtifactAdapter for use with the Truffle framework. You can also + write your own and support any artifact format.

- -
- - - - - npm install @0x/sol-trace --save -

- Sol-trace is a subprovider that needs to be prepended to your{' '} - provider engine. Depending on your project setup, you will need to use a - specific ArtifactAdapter. Sol-trace ships with the{' '} - SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can - also write your own and support any artifact format. -

- + - - - - - {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + + + + + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} - - - Truffle - Custom - - -
- + + + Truffle + Custom + + + ); } diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx index be5acdac4c..961f4534ff 100644 --- a/packages/dev-tools-pages/ts/pages/Trace.tsx +++ b/packages/dev-tools-pages/ts/pages/Trace.tsx @@ -3,8 +3,7 @@ import { render, hydrate } from 'react-dom'; import context from 'ts/context/trace'; import Base from 'ts/components/Base'; -import Container from 'ts/components/Container'; -import Main from 'ts/components/Main'; +import Content from 'ts/components/Content'; import ContentBlock from 'ts/components/ContentBlock'; import { Tabs, TabBlock } from 'ts/components/Tabs'; import Code from 'ts/components/Code'; @@ -16,39 +15,37 @@ function Trace() { return ( - -
- - - - - npm install @0x/sol-trace --save -

- Sol-trace is a subprovider that needs to be prepended to your{' '} - provider engine. Depending on your project setup, you will need to use a - specific ArtifactAdapter. Sol-trace ships with the{' '} - SolCompilerArtifactAdapter for use with Sol-compiler and{' '} - TruffleArtifactAdapter for use with the Truffle framework. You can - also write your own and support any artifact format. -

- + + + + + + + npm install @0x/sol-trace --save +

+ Sol-trace is a subprovider that needs to be prepended to your provider engine. + Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace + ships with the SolCompilerArtifactAdapter for use with Sol-compiler and{' '} + TruffleArtifactAdapter for use with the Truffle framework. You can also + write your own and support any artifact format. +

+ - - - - - {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + + + + + {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} - - - Truffle - Custom - - -
- + + + Truffle + Custom + + + ); }