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

1 files changed, 39 insertions, 10 deletions

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>