Content (#7)

* optional children in List component

* added real content to trace page

* added real content to cov page

* add support for json highlighting

* real content on compiler page

* real content on profiler page

* remove unused import

* remove list from compiler page

* wrap code components in pages with breakout component

* fix font size on text

* fix typo

6 files changed, 231 insertions, 65 deletions

diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index 3041fc475..ceb3bc108 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -26,14 +26,19 @@ const StyledItem = styled.li`
 `;
 
 interface ListProps {
-    items: Array<string>;
+    items?: Array<string>;
+    children?: React.ReactNode;
 }
 
 function List(props: ListProps) {
-    const items = props.items;
-    const listItems = items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>);
-
-    return <StyledList>{listItems}</StyledList>;
+    return (
+        <StyledList>
+            {props.children !== undefined
+                ? props.children
+                : props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)}
+        </StyledList>
+    );
 }
 
 export default List;
+export { List, StyledItem as ListItem };
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 0c4602d51..9d7844c89 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,6 +1,8 @@
 const highlight = require('highlight.js/lib/highlight');
 const javascript = require('highlight.js/lib/languages/javascript');
+const json = require('highlight.js/lib/languages/json');
 
 highlight.registerLanguage('javascript', javascript);
+highlight.registerLanguage('json', json);
 
 export default highlight;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 96f26a978..92390e20b 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
 
+import { Lead } from 'ts/components/Typography';
 import context from 'ts/context/compiler';
 import Base from 'ts/components/Base';
 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';
 import InlineCode from 'ts/components/InlineCode';
-import List from 'ts/components/List';
 import CompilerComponent from 'ts/components/Compiler';
+import Breakout from 'ts/components/Breakout';
 
 function Compiler() {
     return (
@@ -17,41 +17,51 @@ function Compiler() {
             <CompilerComponent />
             <Content>
                 <ContentBlock main title="Get started" />
-                <ContentBlock title="Required steps">
-                    <List items={['Step 1', 'Step 2']} />
-                </ContentBlock>
-                <ContentBlock title="Prerequisites">
-                    <Code>npm install @0x/sol-trace --save</Code>
-                    <p>
-                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
-                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
-                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
-                        write your own and support any artifact format.
-                    </p>
+                <ContentBlock title="Install">
+                    <Breakout>
+                        <Code>npm install @0x/sol-compiler --g</Code>
+                    </Breakout>
                 </ContentBlock>
 
-                <ContentBlock title="Installation">
-                    <Tabs>
-                        <TabBlock title="Sol-compiler">
-                            <Code language="js">
-                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Run">
+                    <Breakout>
+                        <Code>cd /your_project_dir && sol-compiler</Code>
+                    </Breakout>
+                </ContentBlock>
 
-// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
-const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Truffle">Truffle</TabBlock>
-                        <TabBlock title="Custom">Custom</TabBlock>
-                    </Tabs>
+                <ContentBlock title="Configure">
+                    <p>
+                        Configure via a <InlineCode>compiler.json</InlineCode> file.
+                    </p>
+                    <Breakout>
+                        <Code>mkdir compiler.json</Code>
+                    </Breakout>
+                    <p>Example of settings:</p>
+                    <Breakout>
+                        <Code language="json">
+                            {`{
+    "contractsDir": "contracts",
+    "artifactsDir": "artifacts",
+    "contracts": "*",
+    "compilerSettings": {
+        "optimizer": { "enabled": false },
+        "outputSelection": {
+            "*": {
+                "*": ["abi", "evm.bytecode.object"]
+            }
+        }
+    }
+}`}
+                        </Code>
+                    </Breakout>
                 </ContentBlock>
             </Content>
             <Content dark>
                 <ContentBlock main title="Artifacts">
-                    <p>
+                    <Lead>
                         Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
                         define which parts of the artifact you need.
-                    </p>
+                    </Lead>
                 </ContentBlock>
 
                 <ContentBlock title="Production">
@@ -59,6 +69,68 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
                         define which parts of the artifact you need.
                     </p>
+                    <Breakout>
+                        <Code light language="json">
+                            {`{
+    ...
+    "compilerSettings": {
+        "outputSelection": {
+            "*": {
+                "*": ["abi"]
+            }
+        }
+    }
+    ...
+}`}
+                        </Code>
+                    </Breakout>
+                    <Breakout>
+                        <Code light language="json">
+                            {`{
+    ...
+    "compilerSettings": {
+        "outputSelection": {
+            "*": {
+                "*": [
+                    "abi",
+                    "evm.bytecode.object",
+                    "evm.bytecode.sourceMap",
+                    "evm.deployedBytecode.object",
+                    "evm.deployedBytecode.sourceMap"
+                ]
+            }
+        }
+    }
+    ...
+}`}
+                        </Code>
+                    </Breakout>
+                    <Breakout>
+                        <Code light language="json">
+                            {`{
+    ...
+    "compilerOutput": {
+        "abi": [...],
+        "evm": {
+            "bytecode": {
+                "object": "0xdeadbeef",
+                "sourceMap": "26:480:..."
+            },
+            "deployedBytecode": {
+                "object": "0xdeadbeef",
+                "sourceMap": "26:480:0..."
+            }
+        }
+    }
+    "sources": {
+        "Migrations.sol": {
+            "id": 0
+        }
+    },
+    ...
+}`}
+                        </Code>
+                    </Breakout>
                 </ContentBlock>
             </Content>
         </Base>
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index c3dfb33c5..ccaa60d5a 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -8,8 +8,9 @@ import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
-import List from 'ts/components/List';
+import { List, ListItem } from 'ts/components/List';
 import Intro from 'ts/components/Intro';
+import Breakout from 'ts/components/Breakout';
 
 function Cov() {
     return (
@@ -23,21 +24,30 @@ function Cov() {
             </Intro>
             <Content>
                 <ContentBlock main title="Get started" />
-                <ContentBlock title="Required steps">
-                    <List items={['Step 1', 'Step 2']} />
-                </ContentBlock>
                 <ContentBlock title="Prerequisites">
-                    <Code>npm install @0x/sol-trace --save</Code>
+                    <List>
+                        <ListItem>
+                            Use <a href="#">ganache-cli</a> as a backing node.
+                        </ListItem>
+                        <ListItem>
+                            Understand and use <a href="#">web3-provider-engine</a>.
+                        </ListItem>
+                    </List>
+                </ContentBlock>
+                <ContentBlock title="Installation">
+                    <Breakout>
+                        <Code>npm install @0x/sol-cov --save</Code>
+                    </Breakout>
+
                     <p>
-                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
-                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
-                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
-                        write your own and support any artifact format.
+                        Sol-cov is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-cov ships
+                        with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
+                        <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
+                        the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
+                        format.
                     </p>
-                </ContentBlock>
 
-                <ContentBlock title="Installation">
                     <Tabs>
                         <TabBlock title="Sol-compiler">
                             <Code language="js">
@@ -50,6 +60,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Truffle">Truffle</TabBlock>
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
+                    <p>
+                        Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                        <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                    </p>
+
+                    <Breakout>
+                        <Code language="js">
+                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+import { RevertTraceSubprovider } from '@0x/sol-cov';
+
+const defaultFromAddress = "..."; // Some ethereum address with test funds
+const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
+
+const providerEngine = new ProviderEngine();
+providerEngine.addProvider(revertTraceSubprovider);
+providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
+providerEngine.start();`}
+                        </Code>
+                    </Breakout>
                 </ContentBlock>
             </Content>
         </Base>
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 48c4c122b..ac88bd933 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -8,8 +8,9 @@ import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
-import List from 'ts/components/List';
+import { List, ListItem } from 'ts/components/List';
 import Intro from 'ts/components/Intro';
+import Breakout from 'ts/components/Breakout';
 
 function Profiler() {
     return (
@@ -23,21 +24,30 @@ function Profiler() {
             </Intro>
             <Content>
                 <ContentBlock main title="Get started" />
-                <ContentBlock title="Required steps">
-                    <List items={['Step 1', 'Step 2']} />
-                </ContentBlock>
                 <ContentBlock title="Prerequisites">
-                    <Code>npm install @0x/sol-trace --save</Code>
+                    <List>
+                        <ListItem>
+                            Use <a href="#">ganache-cli</a> as a backing node.
+                        </ListItem>
+                        <ListItem>
+                            Understand and use <a href="#">web3-provider-engine</a>.
+                        </ListItem>
+                    </List>
+                </ContentBlock>
+                <ContentBlock title="Installation">
+                    <Breakout>
+                        <Code>npm install @0x/sol-trace --save</Code>
+                    </Breakout>
+
                     <p>
                         Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
                         Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
-                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
-                        write your own and support any artifact format.
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
+                        <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
+                        the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
+                        format.
                     </p>
-                </ContentBlock>
 
-                <ContentBlock title="Installation">
                     <Tabs>
                         <TabBlock title="Sol-compiler">
                             <Code language="js">
@@ -50,6 +60,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Truffle">Truffle</TabBlock>
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
+                    <p>
+                        Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                        <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                    </p>
+
+                    <Breakout>
+                        <Code language="js">
+                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+import { RevertTraceSubprovider } from '@0x/sol-cov';
+
+const defaultFromAddress = "..."; // Some ethereum address with test funds
+const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
+
+const providerEngine = new ProviderEngine();
+providerEngine.addProvider(revertTraceSubprovider);
+providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
+providerEngine.start();`}
+                        </Code>
+                    </Breakout>
                 </ContentBlock>
             </Content>
         </Base>
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 961f4534f..870402df6 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -8,8 +8,9 @@ import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
-import List from 'ts/components/List';
+import { List, ListItem } from 'ts/components/List';
 import TraceComponent from 'ts/components/Trace';
+import Breakout from 'ts/components/Breakout';
 
 function Trace() {
     return (
@@ -17,21 +18,30 @@ function Trace() {
             <TraceComponent />
             <Content>
                 <ContentBlock main title="Get started" />
-                <ContentBlock title="Required steps">
-                    <List items={['Step 1', 'Step 2']} />
-                </ContentBlock>
                 <ContentBlock title="Prerequisites">
-                    <Code>npm install @0x/sol-trace --save</Code>
+                    <List>
+                        <ListItem>
+                            Use <a href="#">ganache-cli</a> as a backing node.
+                        </ListItem>
+                        <ListItem>
+                            Understand and use <a href="#">web3-provider-engine</a>.
+                        </ListItem>
+                    </List>
+                </ContentBlock>
+                <ContentBlock title="Installation">
+                    <Breakout>
+                        <Code>npm install @0x/sol-trace --save</Code>
+                    </Breakout>
+
                     <p>
                         Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
                         Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
-                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
-                        write your own and support any artifact format.
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
+                        <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
+                        the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
+                        format.
                     </p>
-                </ContentBlock>
 
-                <ContentBlock title="Installation">
                     <Tabs>
                         <TabBlock title="Sol-compiler">
                             <Code language="js">
@@ -44,6 +54,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Truffle">Truffle</TabBlock>
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
+                    <p>
+                        Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                        <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                    </p>
+
+                    <Breakout>
+                        <Code language="js">
+                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+import { RevertTraceSubprovider } from '@0x/sol-cov';
+
+const defaultFromAddress = "..."; // Some ethereum address with test funds
+const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
+
+const providerEngine = new ProviderEngine();
+providerEngine.addProvider(revertTraceSubprovider);
+providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
+providerEngine.start();`}
+                        </Code>
+                    </Breakout>
                 </ContentBlock>
             </Content>
         </Base>