From b158a6d7226fb50ecedcc07da8ef30e5e5690e46 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 13:28:44 +0200
Subject: initial commit

---
 packages/dev-tools-pages/ts/pages/Base.tsx     | 28 ++++++++++++++
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 53 ++++++++++++++++++++++++++
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 53 ++++++++++++++++++++++++++
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 53 ++++++++++++++++++++++++++
 packages/dev-tools-pages/ts/pages/Trace.tsx    | 53 ++++++++++++++++++++++++++
 packages/dev-tools-pages/ts/pages/landing.tsx  | 27 -------------
 6 files changed, 240 insertions(+), 27 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/pages/Base.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Compiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Cov.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Profiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Trace.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/landing.tsx

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/pages/Base.tsx
new file mode 100644
index 000000000..7bb578611
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Base.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import ThemeContext from 'ts/context';
+import GlobalStyles from 'ts/globalStyles';
+import MetaTags from 'ts/components/MetaTags';
+import Header from 'ts/components/Header';
+import Hero from 'ts/components/Hero';
+import Footer from 'ts/components/Footer';
+
+interface BaseProps {
+    context: any;
+    children: React.ReactNode;
+}
+
+function Base(props: BaseProps) {
+    return (
+        <ThemeContext.Provider value={props.context}>
+            <MetaTags />
+            <GlobalStyles />
+            <Header />
+            <Hero />
+            {props.children}
+            <Footer />
+        </ThemeContext.Provider>
+    );
+}
+
+export default Base;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
new file mode 100644
index 000000000..2a91c465f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/compiler';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+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';
+
+function Compiler(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <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>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`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);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Compiler;
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
new file mode 100644
index 000000000..a0acfb869
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/cov';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+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';
+
+function Cov(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <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>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`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);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Cov;
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
new file mode 100644
index 000000000..ad2219c5e
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/profiler';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+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';
+
+function Profiler(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <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>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`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);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Profiler;
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
new file mode 100644
index 000000000..797ec6f49
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/trace';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+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';
+
+function Trace(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <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>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`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);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Trace;
diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx
deleted file mode 100644
index a70a9de46..000000000
--- a/packages/dev-tools-pages/ts/pages/landing.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Button } from '../components/ui/button';
-import { Container } from '../components/ui/container';
-import { Text } from '../components/ui/text';
-
-interface LandingProps {}
-
-interface LandingState {}
-
-export class Landing extends React.Component<LandingProps, LandingState> {
-    constructor(props: LandingProps) {
-        super(props);
-    }
-    public render(): React.ReactNode {
-        return (
-            <Container id="landing" className="clearfix">
-                <Container className="mx-auto p4" width="200px">
-                    <Button>
-                        <Text fontColor="white">Click me!</Text>
-                    </Button>
-                </Container>
-            </Container>
-        );
-    }
-}
-- 
cgit v1.2.3


From c57c9752a248a2abb3a73e474ee63b1039f9a9c7 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 13:58:07 +0200
Subject: intro component in profiler view

---
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index ad2219c5e..d129d6427 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -9,11 +9,19 @@ 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 Intro from 'ts/components/Intro';
 
 function Profiler(props: any) {
     return (
         <Base context={context}>
             <Container>
+                <Intro title="ra">
+                    <p>
+                        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.
+                    </p>
+                </Intro>
                 <Main>
                     <ContentBlock title="Required steps">
                         <List items={['Step 1', 'Step 2']} />
-- 
cgit v1.2.3


From afa52e280c7e36b625e95b949f1f12933a5ab9dc Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 13:59:16 +0200
Subject: intro component on cov view

---
 packages/dev-tools-pages/ts/pages/Cov.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index a0acfb869..b7405f8f9 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -9,11 +9,19 @@ 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 Intro from 'ts/components/Intro';
 
 function Cov(props: any) {
     return (
         <Base context={context}>
             <Container>
+                <Intro title="Measure your tests">
+                    <p>
+                        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.
+                    </p>
+                </Intro>
                 <Main>
                     <ContentBlock title="Required steps">
                         <List items={['Step 1', 'Step 2']} />
-- 
cgit v1.2.3


From ac60d459696b8a68caf65a345626f47c632fb2d0 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 14:08:46 +0200
Subject: compiler component in compiler view

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 2a91c465f..79c9f52e4 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -9,11 +9,13 @@ 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';
 
 function Compiler(props: any) {
     return (
         <Base context={context}>
             <Container>
+                <CompilerComponent />
                 <Main>
                     <ContentBlock title="Required steps">
                         <List items={['Step 1', 'Step 2']} />
-- 
cgit v1.2.3


From 30f7f83573c9254de336c3c2fc7297188d47af15 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 15:25:08 +0200
Subject: added trace component to trace view

---
 packages/dev-tools-pages/ts/pages/Trace.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 797ec6f49..5dddf027e 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -9,10 +9,12 @@ 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 TraceComponent from 'ts/components/Trace';
 
 function Trace(props: any) {
     return (
         <Base context={context}>
+            <TraceComponent />
             <Container>
                 <Main>
                     <ContentBlock title="Required steps">
-- 
cgit v1.2.3


From 580e574c841fb9b0ba9d37a50bd5a0f787799ff2 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 19 Oct 2018 15:02:15 +0100
Subject: Feature/build step (#2)

* BundleAnalyzerPlugin

* lazy load highlight.js

* seperate bundles for each page

* prerender apps to html on build

* preload important font files

* dont prerender code copy button

* fix woff2 variant of font

* added missing doctype

* remove metatags component
---
 packages/dev-tools-pages/ts/pages/Base.tsx     | 28 --------------------------
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 13 +++++++++---
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 13 +++++++++---
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 13 +++++++++---
 packages/dev-tools-pages/ts/pages/Trace.tsx    | 13 +++++++++---
 5 files changed, 40 insertions(+), 40 deletions(-)
 delete mode 100644 packages/dev-tools-pages/ts/pages/Base.tsx

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/pages/Base.tsx
deleted file mode 100644
index 7bb578611..000000000
--- a/packages/dev-tools-pages/ts/pages/Base.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-
-import ThemeContext from 'ts/context';
-import GlobalStyles from 'ts/globalStyles';
-import MetaTags from 'ts/components/MetaTags';
-import Header from 'ts/components/Header';
-import Hero from 'ts/components/Hero';
-import Footer from 'ts/components/Footer';
-
-interface BaseProps {
-    context: any;
-    children: React.ReactNode;
-}
-
-function Base(props: BaseProps) {
-    return (
-        <ThemeContext.Provider value={props.context}>
-            <MetaTags />
-            <GlobalStyles />
-            <Header />
-            <Hero />
-            {props.children}
-            <Footer />
-        </ThemeContext.Provider>
-    );
-}
-
-export default Base;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 79c9f52e4..35c810cb3 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import CompilerComponent from 'ts/components/Compiler';
 
-function Compiler(props: any) {
+function Compiler() {
     return (
         <Base context={context}>
             <Container>
@@ -52,4 +53,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Compiler;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Compiler />, root);
+} else {
+    render(<Compiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index b7405f8f9..e835e5c82 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/cov';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import Intro from 'ts/components/Intro';
 
-function Cov(props: any) {
+function Cov() {
     return (
         <Base context={context}>
             <Container>
@@ -58,4 +59,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Cov;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Cov />, root);
+} else {
+    render(<Cov />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index d129d6427..9f8b46b9c 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/profiler';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import Intro from 'ts/components/Intro';
 
-function Profiler(props: any) {
+function Profiler() {
     return (
         <Base context={context}>
             <Container>
@@ -58,4 +59,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Profiler;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Profiler />, root);
+} else {
+    render(<Profiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 5dddf027e..be5acdac4 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/trace';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import TraceComponent from 'ts/components/Trace';
 
-function Trace(props: any) {
+function Trace() {
     return (
         <Base context={context}>
             <TraceComponent />
@@ -52,4 +53,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Trace;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Trace />, root);
+} else {
+    render(<Trace />, root);
+}
-- 
cgit v1.2.3


From e485a9814333a3178e6a156230ed15b047f11005 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:14:48 +0200
Subject: support dark alternative of Main component

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 69 +++++++++++++++-----------
 1 file changed, 39 insertions(+), 30 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 35c810cb3..e7336f1b1 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -15,40 +15,49 @@ import CompilerComponent from 'ts/components/Compiler';
 function Compiler() {
     return (
         <Base context={context}>
-            <Container>
-                <CompilerComponent />
-                <Main>
-                    <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>
+            <CompilerComponent />
+            <Main>
+                <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>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`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);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
+            <Main
+                title="Artifacts"
+                subtitle="Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need."
+                dark
+            >
+                <ContentBlock title="Production">
+                    <p>
+                        Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
+                        define which parts of the artifact you need.
+                    </p>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }
-- 
cgit v1.2.3


From 97c54f84f0b0f3daf41773690cc79296c983b346 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:15:54 +0200
Subject: remove container from all pages

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx |  1 -
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 66 ++++++++++++--------------
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 66 ++++++++++++--------------
 packages/dev-tools-pages/ts/pages/Trace.tsx    | 56 ++++++++++------------
 4 files changed, 88 insertions(+), 101 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index e7336f1b1..c6e67021e 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -3,7 +3,6 @@ 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 ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index e835e5c82..d5b607334 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -3,7 +3,6 @@ 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 ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
@@ -15,46 +14,43 @@ import Intro from 'ts/components/Intro';
 function Cov() {
     return (
         <Base context={context}>
-            <Container>
-                <Intro title="Measure your tests">
+            <Intro title="Measure your tests">
+                <p>
+                    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.
+                </p>
+            </Intro>
+            <Main>
+                <ContentBlock title="Required steps">
+                    <List items={['Step 1', 'Step 2']} />
+                </ContentBlock>
+                <ContentBlock title="Prerequisites">
+                    <Code>npm install @0x/sol-trace --save</Code>
                     <p>
-                        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 <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>
-                </Intro>
-                <Main>
-                    <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>
+                </ContentBlock>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`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);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 9f8b46b9c..ae847ad41 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -3,7 +3,6 @@ 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 ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
@@ -15,46 +14,43 @@ import Intro from 'ts/components/Intro';
 function Profiler() {
     return (
         <Base context={context}>
-            <Container>
-                <Intro title="ra">
+            <Intro title="ra">
+                <p>
+                    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.
+                </p>
+            </Intro>
+            <Main>
+                <ContentBlock title="Required steps">
+                    <List items={['Step 1', 'Step 2']} />
+                </ContentBlock>
+                <ContentBlock title="Prerequisites">
+                    <Code>npm install @0x/sol-trace --save</Code>
                     <p>
-                        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 <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>
-                </Intro>
-                <Main>
-                    <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>
+                </ContentBlock>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`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);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index be5acdac4..b55c03005 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -3,7 +3,6 @@ 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 ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
@@ -16,39 +15,36 @@ function Trace() {
     return (
         <Base context={context}>
             <TraceComponent />
-            <Container>
-                <Main>
-                    <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>
+            <Main>
+                <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>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`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);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }
-- 
cgit v1.2.3


From 8cf720986eb464a39e634ca59c4c3b20b3cd368d Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:18:51 +0200
Subject: rename Main to Content

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 10 +++++-----
 packages/dev-tools-pages/ts/pages/Cov.tsx      |  6 +++---
 packages/dev-tools-pages/ts/pages/Profiler.tsx |  6 +++---
 packages/dev-tools-pages/ts/pages/Trace.tsx    |  6 +++---
 4 files changed, 14 insertions(+), 14 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index c6e67021e..8e2c7f058 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -3,7 +3,7 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
 import Base from 'ts/components/Base';
-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,7 +15,7 @@ function Compiler() {
     return (
         <Base context={context}>
             <CompilerComponent />
-            <Main>
+            <Content>
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -44,8 +44,8 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
                 </ContentBlock>
-            </Main>
-            <Main
+            </Content>
+            <Content
                 title="Artifacts"
                 subtitle="Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need."
                 dark
@@ -56,7 +56,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         define which parts of the artifact you need.
                     </p>
                 </ContentBlock>
-            </Main>
+            </Content>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index d5b607334..1d8bbf512 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -3,7 +3,7 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/cov';
 import Base from 'ts/components/Base';
-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';
@@ -21,7 +21,7 @@ function Cov() {
                     coverage.
                 </p>
             </Intro>
-            <Main>
+            <Content>
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -50,7 +50,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
                 </ContentBlock>
-            </Main>
+            </Content>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index ae847ad41..49028c46a 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -3,7 +3,7 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/profiler';
 import Base from 'ts/components/Base';
-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';
@@ -21,7 +21,7 @@ function Profiler() {
                     data-driven approach to optimizing it.
                 </p>
             </Intro>
-            <Main>
+            <Content>
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -50,7 +50,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
                 </ContentBlock>
-            </Main>
+            </Content>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index b55c03005..4bdc68e95 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -3,7 +3,7 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/trace';
 import Base from 'ts/components/Base';
-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,7 +15,7 @@ function Trace() {
     return (
         <Base context={context}>
             <TraceComponent />
-            <Main>
+            <Content>
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -44,7 +44,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
                 </ContentBlock>
-            </Main>
+            </Content>
         </Base>
     );
 }
-- 
cgit v1.2.3


From 00afb2440dfe41f19c40030de60ffd274a782a04 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:24:43 +0200
Subject: remove contentBlock from content component

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 14 +++++++++-----
 packages/dev-tools-pages/ts/pages/Cov.tsx      |  1 +
 packages/dev-tools-pages/ts/pages/Profiler.tsx |  1 +
 packages/dev-tools-pages/ts/pages/Trace.tsx    |  1 +
 4 files changed, 12 insertions(+), 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 8e2c7f058..96f26a978 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -16,6 +16,7 @@ function Compiler() {
         <Base context={context}>
             <CompilerComponent />
             <Content>
+                <ContentBlock main title="Get started" />
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -45,11 +46,14 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </Tabs>
                 </ContentBlock>
             </Content>
-            <Content
-                title="Artifacts"
-                subtitle="Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need."
-                dark
-            >
+            <Content dark>
+                <ContentBlock main title="Artifacts">
+                    <p>
+                        Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
+                        define which parts of the artifact you need.
+                    </p>
+                </ContentBlock>
+
                 <ContentBlock title="Production">
                     <p>
                         Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 1d8bbf512..c3dfb33c5 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -22,6 +22,7 @@ function Cov() {
                 </p>
             </Intro>
             <Content>
+                <ContentBlock main title="Get started" />
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 49028c46a..48c4c122b 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -22,6 +22,7 @@ function Profiler() {
                 </p>
             </Intro>
             <Content>
+                <ContentBlock main title="Get started" />
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 4bdc68e95..961f4534f 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -16,6 +16,7 @@ function Trace() {
         <Base context={context}>
             <TraceComponent />
             <Content>
+                <ContentBlock main title="Get started" />
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
-- 
cgit v1.2.3


From 1ae9f68db8c9768e68d1eab1f411b346e9512c1c Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 12:10:35 +0100
Subject: 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
---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 128 +++++++++++++++++++------
 packages/dev-tools-pages/ts/pages/Cov.tsx      |  53 +++++++---
 packages/dev-tools-pages/ts/pages/Profiler.tsx |  49 ++++++++--
 packages/dev-tools-pages/ts/pages/Trace.tsx    |  49 ++++++++--
 4 files changed, 219 insertions(+), 60 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

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>
-- 
cgit v1.2.3


From 16b515707823f7f60f641665a3a96b3092d881ee Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Tue, 23 Oct 2018 16:05:28 +0200
Subject: Updates Intro Component to use IntroBody and IntroAside

---
 packages/dev-tools-pages/ts/pages/Cov.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index ccaa60d5a..8fd1ace43 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -9,19 +9,28 @@ import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
-import Intro from 'ts/components/Intro';
 import Breakout from 'ts/components/Breakout';
+import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
 
 function Cov() {
     return (
         <Base context={context}>
             <Intro title="Measure your tests">
-                <p>
+                <IntroLead>
                     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.
-                </p>
+                </IntroLead>
+                <IntroAside>
+                    <Code language="js">
+                        {`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);`}
+                    </Code>
+                </IntroAside>
             </Intro>
+
             <Content>
                 <ContentBlock main title="Get started" />
                 <ContentBlock title="Prerequisites">
-- 
cgit v1.2.3


From 9cf055c1596d8abce854fea8f4e209573d6df7c8 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Wed, 24 Oct 2018 14:31:07 +0200
Subject: Add highlighter.js; basic styling for .diff classes; Start of code
 block in cov

---
 packages/dev-tools-pages/ts/pages/Cov.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 8fd1ace43..01966537c 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -22,11 +22,21 @@ function Cov() {
                     coverage.
                 </IntroLead>
                 <IntroAside>
-                    <Code language="js">
-                        {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                    <Code language="js.diff">
+                        {`+function executeTransaction(uint transactionId)
+    public
++notExecuted(transactionId)
++pastTimeLock(transactionId)
+{ 
++Transaction storage tx = transactions[transactionId]
++tx.executed = true
++if (tx.destination.call.value(tx.value)(tx.data))
++Execution(transactionId)
+else {
+-ExecutionFailure(transactionId)
 
-// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
-const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+    }
+}`}
                     </Code>
                 </IntroAside>
             </Intro>
-- 
cgit v1.2.3


From 43e55a963bef2a2e4740ce27d456927b020b71f2 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 12:19:56 +0100
Subject: Feature/syntaxhighlighting (#9)

* wip code highlighting of lines

* Implements gutter component

* WIP: Profiler with gutter

* cleaned up highlight code

* Removes before content for gutter styling

* Styles gutter

* Add correct Profiler code content

* Adds color variable for gutter gray

* refactor code component width gutter and diffing
---
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 30 +++++++++++++++-----------
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 25 +++++++++++++++++----
 2 files changed, 39 insertions(+), 16 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 01966537c..197ff174d 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -22,19 +22,25 @@ function Cov() {
                     coverage.
                 </IntroLead>
                 <IntroAside>
-                    <Code language="js.diff">
+                    <Code
+                        language="javascript"
+                        diff
+                        gutterLength={2}
+                        gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]}
+                    >
                         {`+function executeTransaction(uint transactionId)
-    public
-+notExecuted(transactionId)
-+pastTimeLock(transactionId)
+     public
++    notExecuted(transactionId)
++    fullyConfirmed(transactionId)
++    pastTimeLock(transactionId)
 { 
-+Transaction storage tx = transactions[transactionId]
-+tx.executed = true
-+if (tx.destination.call.value(tx.value)(tx.data))
-+Execution(transactionId)
-else {
--ExecutionFailure(transactionId)
-
++    Transaction storage tx = transactions[transactionId]
++    tx.executed = true
++    if (tx.destination.call.value(tx.value)(tx.data))
++        Execution(transactionId)
+     else {
+-        ExecutionFailure(transactionId)
+-        tx.executed = false
     }
 }`}
                     </Code>
@@ -69,7 +75,7 @@ else {
 
                     <Tabs>
                         <TabBlock title="Sol-compiler">
-                            <Code language="js">
+                            <Code language="javascript">
                                 {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index ac88bd933..462789a16 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -9,18 +9,35 @@ import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
-import Intro from 'ts/components/Intro';
 import Breakout from 'ts/components/Breakout';
+import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
 
 function Profiler() {
     return (
         <Base context={context}>
-            <Intro title="ra">
-                <p>
+            <Intro title="Headline">
+                <IntroLead>
                     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.
-                </p>
+                </IntroLead>
+                <IntroAside>
+                    <Code language="javascript" diff gutterLength={6} gutter={[15, 15, undefined, 21747, 20303, 1435]}>
+                        {`+function() public payable {
++    deposit();
+}
++function deposit() public payabble {
++    balanceOf[msg.sender] += msg.value; 
++    Deposit(msg.sender, msg.value);
+}
+-function withdraw(uint wad) public {
+-    require(balanceOf[msg.sender] >= wad);
+-    balanceOf[msg.sender] -= wad;
+-    msg.sender.transfer(wad);
+-    Withdrawal(msg.sender, wad);
+}`}
+                    </Code>
+                </IntroAside>
             </Intro>
             <Content>
                 <ContentBlock main title="Get started" />
-- 
cgit v1.2.3


From b8441265167b719db3db940b76fb4b3b0e0edecd Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Thu, 25 Oct 2018 14:04:50 +0200
Subject: Updates intro component (#10)

* Updates intro component

* Remove unused Inner

* Use Breakout component in Intro
---
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 4 ++--
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 197ff174d..679cf6f62 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -15,8 +15,8 @@ import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
 function Cov() {
     return (
         <Base context={context}>
-            <Intro title="Measure your tests">
-                <IntroLead>
+            <Intro>
+                <IntroLead title="Measure your tests">
                     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.
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 462789a16..f147d9d5a 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -5,18 +5,18 @@ import context from 'ts/context/profiler';
 import Base from 'ts/components/Base';
 import Content from 'ts/components/Content';
 import ContentBlock from 'ts/components/ContentBlock';
+import Breakout from 'ts/components/Breakout';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
-import Breakout from 'ts/components/Breakout';
 import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
 
 function Profiler() {
     return (
         <Base context={context}>
-            <Intro title="Headline">
-                <IntroLead>
+            <Intro>
+                <IntroLead title="Headline">
                     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.
-- 
cgit v1.2.3


From fb24a18f3faa99736562e363e68fe077f56d760a Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 14:14:47 +0200
Subject: fix dom elements type in intro

---
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 8 +++++---
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 679cf6f62..743b990df 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -17,9 +17,11 @@ function Cov() {
         <Base context={context}>
             <Intro>
                 <IntroLead title="Measure your tests">
-                    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.
+                    <p>
+                        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.
+                    </p>
                 </IntroLead>
                 <IntroAside>
                     <Code
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index f147d9d5a..b8e78264e 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -17,9 +17,11 @@ function Profiler() {
         <Base context={context}>
             <Intro>
                 <IntroLead title="Headline">
-                    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.
+                    <p>
+                        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.
+                    </p>
                 </IntroLead>
                 <IntroAside>
                     <Code language="javascript" diff gutterLength={6} gutter={[15, 15, undefined, 21747, 20303, 1435]}>
-- 
cgit v1.2.3


From 3901380ffb05f1691ec92c33742013c97530399c Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:08:40 +0200
Subject: update content on copiler page

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 92390e20b..0d9be16bf 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -66,8 +66,7 @@ function Compiler() {
 
                 <ContentBlock title="Production">
                     <p>
-                        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.
                     </p>
                     <Breakout>
                         <Code light language="json">
@@ -88,6 +87,20 @@ function Compiler() {
                         <Code light language="json">
                             {`{
     ...
+    "compilerOutput": {
+        "abi": [...],
+    },
+    ...
+}`}
+                        </Code>
+                    </Breakout>
+                    </ContentBlock>
+                    <ContentBlock title="Development">
+                    <p>Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the artifact.</p>
+                    <Breakout>
+                        <Code light language="json">
+                            {`{
+    ...
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -105,6 +118,7 @@ function Compiler() {
 }`}
                         </Code>
                     </Breakout>
+
                     <Breakout>
                         <Code light language="json">
                             {`{
-- 
cgit v1.2.3


From 89e439c521aed35be72bee1094d8a431e5fc1d68 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 09:59:10 +0200
Subject: update content in tabs

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 12 ++++++++----
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 21 ++++++++++++++++++---
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 23 +++++++++++++++++++----
 packages/dev-tools-pages/ts/pages/Trace.tsx    | 23 +++++++++++++++++++----
 4 files changed, 64 insertions(+), 15 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 0d9be16bf..d2c14c90c 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -66,7 +66,8 @@ function Compiler() {
 
                 <ContentBlock title="Production">
                     <p>
-                    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.
                     </p>
                     <Breakout>
                         <Code light language="json">
@@ -94,9 +95,12 @@ function Compiler() {
 }`}
                         </Code>
                     </Breakout>
-                    </ContentBlock>
-                    <ContentBlock title="Development">
-                    <p>Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the artifact.</p>
+                </ContentBlock>
+                <ContentBlock title="Development">
+                    <p>
+                        Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
+                        artifact.
+                    </p>
                     <Breakout>
                         <Code light language="json">
                             {`{
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 743b990df..4d8288219 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -84,8 +84,23 @@ function Cov() {
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
                             </Code>
                         </TabBlock>
-                        <TabBlock title="Truffle">Truffle</TabBlock>
-                        <TabBlock title="Custom">Custom</TabBlock>
+                        <TabBlock title="Truffle">
+                            <Code language="javascript">
+                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Custom">
+                            <Code language="javascript">
+                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                            </Code>
+                        </TabBlock>
                     </Tabs>
                     <p>
                         Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
@@ -93,7 +108,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </p>
 
                     <Breakout>
-                        <Code language="js">
+                        <Code language="javascript">
                             {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index b8e78264e..d45721937 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -69,15 +69,30 @@ function Profiler() {
 
                     <Tabs>
                         <TabBlock title="Sol-compiler">
-                            <Code language="js">
+                            <Code language="javascript">
                                 {`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);`}
                             </Code>
                         </TabBlock>
-                        <TabBlock title="Truffle">Truffle</TabBlock>
-                        <TabBlock title="Custom">Custom</TabBlock>
+                        <TabBlock title="Truffle">
+                            <Code language="javascript">
+                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Custom">
+                            <Code language="javascript">
+                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                            </Code>
+                        </TabBlock>
                     </Tabs>
                     <p>
                         Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
@@ -85,7 +100,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </p>
 
                     <Breakout>
-                        <Code language="js">
+                        <Code language="javascript">
                             {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 870402df6..609ec8625 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -44,15 +44,30 @@ function Trace() {
 
                     <Tabs>
                         <TabBlock title="Sol-compiler">
-                            <Code language="js">
+                            <Code language="javascript">
                                 {`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);`}
                             </Code>
                         </TabBlock>
-                        <TabBlock title="Truffle">Truffle</TabBlock>
-                        <TabBlock title="Custom">Custom</TabBlock>
+                        <TabBlock title="Truffle">
+                            <Code language="javascript">
+                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Custom">
+                            <Code language="javascript">
+                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                            </Code>
+                        </TabBlock>
                     </Tabs>
                     <p>
                         Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
@@ -60,7 +75,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </p>
 
                     <Breakout>
-                        <Code language="js">
+                        <Code language="javascript">
                             {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
-- 
cgit v1.2.3


From 5cb944fe1b92c1d9f886faa247297115abbfd463 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 30 Oct 2018 08:27:31 +0100
Subject: optional copy button in code component

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index d2c14c90c..2cb232c8c 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -19,7 +19,7 @@ function Compiler() {
                 <ContentBlock main title="Get started" />
                 <ContentBlock title="Install">
                     <Breakout>
-                        <Code>npm install @0x/sol-compiler --g</Code>
+                        <Code copy>npm install @0x/sol-compiler --g</Code>
                     </Breakout>
                 </ContentBlock>
 
-- 
cgit v1.2.3


From 6b11ca6c1dc2a81abb17e85204f708f1ad68dec9 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 30 Oct 2018 09:05:52 +0100
Subject: fix code highlighting with ...

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 2cb232c8c..11c8c4a17 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -70,9 +70,8 @@ function Compiler() {
                         define which parts of the artifact you need.
                     </p>
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -80,18 +79,15 @@ function Compiler() {
             }
         }
     }
-    ...
 }`}
                         </Code>
                     </Breakout>
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerOutput": {
         "abi": [...],
     },
-    ...
 }`}
                         </Code>
                     </Breakout>
@@ -102,9 +98,8 @@ function Compiler() {
                         artifact.
                     </p>
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -118,15 +113,13 @@ function Compiler() {
             }
         }
     }
-    ...
 }`}
                         </Code>
                     </Breakout>
 
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerOutput": {
         "abi": [...],
         "evm": {
@@ -145,7 +138,6 @@ function Compiler() {
             "id": 0
         }
     },
-    ...
 }`}
                         </Code>
                     </Breakout>
-- 
cgit v1.2.3


From 2dfca078fdf3cddb551fb33f913aade1a2e902e1 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 09:10:25 +0100
Subject: copy changes

---
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index d45721937..1021e43a3 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -16,7 +16,7 @@ function Profiler() {
     return (
         <Base context={context}>
             <Intro>
-                <IntroLead title="Headline">
+                <IntroLead title="Outline gas usage">
                     <p>
                         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
-- 
cgit v1.2.3


From 3a23e795acfe00401283e991af52d1f11a51ffbb Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 09:48:10 +0100
Subject: new hero animation using bodymovin and lottie

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 11 +++++++++++
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 11 +++++++++++
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 11 +++++++++++
 packages/dev-tools-pages/ts/pages/Trace.tsx    | 11 +++++++++++
 4 files changed, 44 insertions(+)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 11c8c4a17..0db7c6204 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import { Lead } from 'ts/components/Typography';
 import context from 'ts/context/compiler';
@@ -10,10 +11,20 @@ import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import CompilerComponent from 'ts/components/Compiler';
 import Breakout from 'ts/components/Breakout';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Compiler() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <CompilerComponent />
             <Content>
                 <ContentBlock main title="Get started" />
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 4d8288219..1a7abbbb1 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import context from 'ts/context/cov';
 import Base from 'ts/components/Base';
@@ -11,10 +12,20 @@ import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
 import Breakout from 'ts/components/Breakout';
 import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Cov() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <Intro>
                 <IntroLead title="Measure your tests">
                     <p>
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 1021e43a3..87cc90b23 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import context from 'ts/context/profiler';
 import Base from 'ts/components/Base';
@@ -11,10 +12,20 @@ import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
 import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Profiler() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <Intro>
                 <IntroLead title="Outline gas usage">
                     <p>
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 609ec8625..1a09d7c3a 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import context from 'ts/context/trace';
 import Base from 'ts/components/Base';
@@ -11,10 +12,20 @@ import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
 import TraceComponent from 'ts/components/Trace';
 import Breakout from 'ts/components/Breakout';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Trace() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <TraceComponent />
             <Content>
                 <ContentBlock main title="Get started" />
-- 
cgit v1.2.3


From 54bd7df900316504e4403bc94cffd92930a6c763 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 16 Nov 2018 11:05:30 +0100
Subject: fix linting + code syntax for statless components

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 177 +++++++++++------------
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 186 +++++++++++++------------
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 181 ++++++++++++------------
 packages/dev-tools-pages/ts/pages/Trace.tsx    | 148 ++++++++++----------
 4 files changed, 353 insertions(+), 339 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 0db7c6204..ee533d566 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,56 +1,60 @@
 import * as React from 'react';
-import { render, hydrate } from 'react-dom';
+import { hydrate, render } from 'react-dom';
 import * as Loadable from 'react-loadable';
 
+import { context } from 'ts/context/compiler';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Compiler as CompilerComponent } from 'ts/components/Compiler';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
 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 Code from 'ts/components/Code';
-import InlineCode from 'ts/components/InlineCode';
-import CompilerComponent from 'ts/components/Compiler';
-import Breakout from 'ts/components/Breakout';
-import Hero from 'ts/components/Hero';
 
 const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
     loading: () => <div />,
     delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
 });
 
-function Compiler() {
-    return (
-        <Base context={context}>
-            <Hero>
-                <Animation />
-            </Hero>
-            <CompilerComponent />
-            <Content>
-                <ContentBlock main title="Get started" />
-                <ContentBlock title="Install">
-                    <Breakout>
-                        <Code copy>npm install @0x/sol-compiler --g</Code>
-                    </Breakout>
-                </ContentBlock>
+const Compiler: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <CompilerComponent />
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Install">
+                <Breakout>
+                    <Code canCopy={true}>npm install @0x/sol-compiler --g</Code>
+                </Breakout>
+            </ContentBlock>
 
-                <ContentBlock title="Run">
-                    <Breakout>
-                        <Code>cd /your_project_dir && sol-compiler</Code>
-                    </Breakout>
-                </ContentBlock>
+            <ContentBlock title="Run">
+                <Breakout>
+                    <Code>cd /your_project_dir && sol-compiler</Code>
+                </Breakout>
+            </ContentBlock>
 
-                <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">
-                            {`{
+            <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": "*",
@@ -63,26 +67,26 @@ function Compiler() {
         }
     }
 }`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-            </Content>
-            <Content dark>
-                <ContentBlock main title="Artifacts">
-                    <Lead>
-                        Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
-                        define which parts of the artifact you need.
-                    </Lead>
-                </ContentBlock>
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+        <Content dark={true}>
+            <ContentBlock main={true} title="Artifacts">
+                <Lead>
+                    Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define
+                    which parts of the artifact you need.
+                </Lead>
+            </ContentBlock>
 
-                <ContentBlock title="Production">
-                    <p>
-                        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" etc>
-                            {`{
+            <ContentBlock title="Production">
+                <p>
+                    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 isLight={true} language="json" isEtc={true}>
+                        {`{
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -91,26 +95,26 @@ function Compiler() {
         }
     }
 }`}
-                        </Code>
-                    </Breakout>
-                    <Breakout>
-                        <Code light language="json" etc>
-                            {`{
+                    </Code>
+                </Breakout>
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
     "compilerOutput": {
         "abi": [...],
     },
 }`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-                <ContentBlock title="Development">
-                    <p>
-                        Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
-                        artifact.
-                    </p>
-                    <Breakout>
-                        <Code light language="json" etc>
-                            {`{
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+            <ContentBlock title="Development">
+                <p>
+                    Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
+                    artifact.
+                </p>
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -125,12 +129,12 @@ function Compiler() {
         }
     }
 }`}
-                        </Code>
-                    </Breakout>
+                    </Code>
+                </Breakout>
 
-                    <Breakout>
-                        <Code light language="json" etc>
-                            {`{
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
     "compilerOutput": {
         "abi": [...],
         "evm": {
@@ -150,13 +154,12 @@ function Compiler() {
         }
     },
 }`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-            </Content>
-        </Base>
-    );
-}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
 
 const root = document.getElementById('app');
 
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 1a7abbbb1..3ffa6077d 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -1,52 +1,56 @@
 import * as React from 'react';
-import { render, hydrate } from 'react-dom';
+import { hydrate, render } from 'react-dom';
 import * as Loadable from 'react-loadable';
 
-import context from 'ts/context/cov';
-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 { context } from 'ts/context/cov';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
 import { List, ListItem } from 'ts/components/List';
-import Breakout from 'ts/components/Breakout';
-import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
-import Hero from 'ts/components/Hero';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
 
 const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
     loading: () => <div />,
     delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
 });
 
-function Cov() {
-    return (
-        <Base context={context}>
-            <Hero>
-                <Animation />
-            </Hero>
-            <Intro>
-                <IntroLead title="Measure your tests">
-                    <p>
-                        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.
-                    </p>
-                </IntroLead>
-                <IntroAside>
-                    <Code
-                        language="javascript"
-                        diff
-                        gutterLength={2}
-                        gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]}
-                    >
-                        {`+function executeTransaction(uint transactionId)
+const Cov: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <Intro>
+            <IntroLead title="Measure your tests">
+                <p>
+                    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.
+                </p>
+            </IntroLead>
+            <IntroAside>
+                <Code
+                    language="javascript"
+                    isDiff={true}
+                    gutterLength={2}
+                    gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]}
+                >
+                    {`+function executeTransaction(uint transactionId)
      public
 +    notExecuted(transactionId)
 +    fullyConfirmed(transactionId)
 +    pastTimeLock(transactionId)
-{ 
+{
 +    Transaction storage tx = transactions[transactionId]
 +    tx.executed = true
 +    if (tx.destination.call.value(tx.value)(tx.data))
@@ -56,71 +60,70 @@ function Cov() {
 -        tx.executed = false
     }
 }`}
-                    </Code>
-                </IntroAside>
-            </Intro>
+                </Code>
+            </IntroAside>
+        </Intro>
 
-            <Content>
-                <ContentBlock main title="Get started" />
-                <ContentBlock title="Prerequisites">
-                    <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>
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <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-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>
+                <p>
+                    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>
 
-                    <Tabs>
-                        <TabBlock title="Sol-compiler">
-                            <Code language="javascript">
-                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`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);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Truffle">
-                            <Code language="javascript">
-                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
 
 const projectRoot = '.';
 const solcVersion = '0.4.24';
 const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Custom">
-                            <Code language="javascript">
-                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
 
 class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
 const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                            </Code>
-                        </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>
+                        </Code>
+                    </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="javascript">
-                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+                <Breakout>
+                    <Code language="javascript">
+                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
 const defaultFromAddress = "..."; // Some ethereum address with test funds
@@ -130,13 +133,12 @@ const providerEngine = new ProviderEngine();
 providerEngine.addProvider(revertTraceSubprovider);
 providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
 providerEngine.start();`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-            </Content>
-        </Base>
-    );
-}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
 
 const root = document.getElementById('app');
 
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 87cc90b23..4e833e0d0 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -1,46 +1,55 @@
 import * as React from 'react';
-import { render, hydrate } from 'react-dom';
+import { hydrate, render } from 'react-dom';
 import * as Loadable from 'react-loadable';
 
-import context from 'ts/context/profiler';
-import Base from 'ts/components/Base';
-import Content from 'ts/components/Content';
-import ContentBlock from 'ts/components/ContentBlock';
-import Breakout from 'ts/components/Breakout';
-import { Tabs, TabBlock } from 'ts/components/Tabs';
-import Code from 'ts/components/Code';
-import InlineCode from 'ts/components/InlineCode';
+import { context } from 'ts/context/profiler';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
 import { List, ListItem } from 'ts/components/List';
-import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
-import Hero from 'ts/components/Hero';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
 
 const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
     loading: () => <div />,
     delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
 });
 
-function Profiler() {
-    return (
-        <Base context={context}>
-            <Hero>
-                <Animation />
-            </Hero>
-            <Intro>
-                <IntroLead title="Outline gas usage">
-                    <p>
-                        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.
-                    </p>
-                </IntroLead>
-                <IntroAside>
-                    <Code language="javascript" diff gutterLength={6} gutter={[15, 15, undefined, 21747, 20303, 1435]}>
-                        {`+function() public payable {
+const Profiler: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <Intro>
+            <IntroLead title="Outline gas usage">
+                <p>
+                    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.
+                </p>
+            </IntroLead>
+            <IntroAside>
+                <Code
+                    language="javascript"
+                    isDiff={true}
+                    gutterLength={6}
+                    gutter={[15, 15, undefined, 21747, 20303, 1435]}
+                >
+                    {`+function() public payable {
 +    deposit();
 }
 +function deposit() public payabble {
-+    balanceOf[msg.sender] += msg.value; 
++    balanceOf[msg.sender] += msg.value;
 +    Deposit(msg.sender, msg.value);
 }
 -function withdraw(uint wad) public {
@@ -49,70 +58,69 @@ function Profiler() {
 -    msg.sender.transfer(wad);
 -    Withdrawal(msg.sender, wad);
 }`}
-                    </Code>
-                </IntroAside>
-            </Intro>
-            <Content>
-                <ContentBlock main title="Get started" />
-                <ContentBlock title="Prerequisites">
-                    <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>
+                </Code>
+            </IntroAside>
+        </Intro>
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <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{' '}
-                        <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>
+                <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{' '}
+                    <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>
 
-                    <Tabs>
-                        <TabBlock title="Sol-compiler">
-                            <Code language="javascript">
-                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`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);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Truffle">
-                            <Code language="javascript">
-                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
 
 const projectRoot = '.';
 const solcVersion = '0.4.24';
 const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Custom">
-                            <Code language="javascript">
-                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
 
 class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
 const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                            </Code>
-                        </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>
+                        </Code>
+                    </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="javascript">
-                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+                <Breakout>
+                    <Code language="javascript">
+                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
 const defaultFromAddress = "..."; // Some ethereum address with test funds
@@ -122,13 +130,12 @@ const providerEngine = new ProviderEngine();
 providerEngine.addProvider(revertTraceSubprovider);
 providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
 providerEngine.start();`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-            </Content>
-        </Base>
-    );
-}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
 
 const root = document.getElementById('app');
 
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 1a09d7c3a..23cbe98be 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -1,93 +1,96 @@
 import * as React from 'react';
-import { render, hydrate } from 'react-dom';
+import { hydrate, render } from 'react-dom';
 import * as Loadable from 'react-loadable';
 
-import context from 'ts/context/trace';
-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 { context } from 'ts/context/trace';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
-import TraceComponent from 'ts/components/Trace';
-import Breakout from 'ts/components/Breakout';
-import Hero from 'ts/components/Hero';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
+import { Trace as TraceComponent } from 'ts/components/Trace';
 
 const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
     loading: () => <div />,
     delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
 });
 
-function Trace() {
-    return (
-        <Base context={context}>
-            <Hero>
-                <Animation />
-            </Hero>
-            <TraceComponent />
-            <Content>
-                <ContentBlock main title="Get started" />
-                <ContentBlock title="Prerequisites">
-                    <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>
+const Trace: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <TraceComponent />
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <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{' '}
-                        <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>
+                <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{' '}
+                    <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>
 
-                    <Tabs>
-                        <TabBlock title="Sol-compiler">
-                            <Code language="javascript">
-                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`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);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Truffle">
-                            <Code language="javascript">
-                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
 
 const projectRoot = '.';
 const solcVersion = '0.4.24';
 const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Custom">
-                            <Code language="javascript">
-                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
 
 class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
 const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                            </Code>
-                        </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>
+                        </Code>
+                    </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="javascript">
-                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+                <Breakout>
+                    <Code language="javascript">
+                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
 const defaultFromAddress = "..."; // Some ethereum address with test funds
@@ -97,13 +100,12 @@ const providerEngine = new ProviderEngine();
 providerEngine.addProvider(revertTraceSubprovider);
 providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
 providerEngine.start();`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-            </Content>
-        </Base>
-    );
-}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
 
 const root = document.getElementById('app');
 
-- 
cgit v1.2.3


From 31d07fdac80a2a546646b1eb232fa7dd6319ce83 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 17:27:00 +0100
Subject: rename all files and directories to lowercase

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 170 -------------------------
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 149 ----------------------
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 146 ---------------------
 packages/dev-tools-pages/ts/pages/Trace.tsx    | 116 -----------------
 packages/dev-tools-pages/ts/pages/compiler.tsx | 170 +++++++++++++++++++++++++
 packages/dev-tools-pages/ts/pages/cov.tsx      | 149 ++++++++++++++++++++++
 packages/dev-tools-pages/ts/pages/profiler.tsx | 146 +++++++++++++++++++++
 packages/dev-tools-pages/ts/pages/trace.tsx    | 116 +++++++++++++++++
 8 files changed, 581 insertions(+), 581 deletions(-)
 delete mode 100644 packages/dev-tools-pages/ts/pages/Compiler.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/Cov.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/Profiler.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/Trace.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/compiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/cov.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/profiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/trace.tsx

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
deleted file mode 100644
index ee533d566..000000000
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import * as React from 'react';
-import { hydrate, render } from 'react-dom';
-import * as Loadable from 'react-loadable';
-
-import { context } from 'ts/context/compiler';
-
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Compiler as CompilerComponent } from 'ts/components/Compiler';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Lead } from 'ts/components/Typography';
-
-const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
-    loading: () => <div />,
-    delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
-        return <Component />;
-    },
-});
-
-const Compiler: React.StatelessComponent<{}> = () => (
-    <Base context={context}>
-        <Hero>
-            <Animation />
-        </Hero>
-        <CompilerComponent />
-        <Content>
-            <ContentBlock main={true} title="Get started" />
-            <ContentBlock title="Install">
-                <Breakout>
-                    <Code canCopy={true}>npm install @0x/sol-compiler --g</Code>
-                </Breakout>
-            </ContentBlock>
-
-            <ContentBlock title="Run">
-                <Breakout>
-                    <Code>cd /your_project_dir && sol-compiler</Code>
-                </Breakout>
-            </ContentBlock>
-
-            <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={true}>
-            <ContentBlock main={true} title="Artifacts">
-                <Lead>
-                    Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define
-                    which parts of the artifact you need.
-                </Lead>
-            </ContentBlock>
-
-            <ContentBlock title="Production">
-                <p>
-                    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 isLight={true} language="json" isEtc={true}>
-                        {`{
-    "compilerSettings": {
-        "outputSelection": {
-            "*": {
-                "*": ["abi"]
-            }
-        }
-    }
-}`}
-                    </Code>
-                </Breakout>
-                <Breakout>
-                    <Code isLight={true} language="json" isEtc={true}>
-                        {`{
-    "compilerOutput": {
-        "abi": [...],
-    },
-}`}
-                    </Code>
-                </Breakout>
-            </ContentBlock>
-            <ContentBlock title="Development">
-                <p>
-                    Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
-                    artifact.
-                </p>
-                <Breakout>
-                    <Code isLight={true} language="json" isEtc={true}>
-                        {`{
-    "compilerSettings": {
-        "outputSelection": {
-            "*": {
-                "*": [
-                    "abi",
-                    "evm.bytecode.object",
-                    "evm.bytecode.sourceMap",
-                    "evm.deployedBytecode.object",
-                    "evm.deployedBytecode.sourceMap"
-                ]
-            }
-        }
-    }
-}`}
-                    </Code>
-                </Breakout>
-
-                <Breakout>
-                    <Code isLight={true} language="json" isEtc={true}>
-                        {`{
-    "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>
-);
-
-const root = document.getElementById('app');
-
-if (root.hasChildNodes()) {
-    hydrate(<Compiler />, root);
-} else {
-    render(<Compiler />, root);
-}
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
deleted file mode 100644
index 3ffa6077d..000000000
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import * as React from 'react';
-import { hydrate, render } from 'react-dom';
-import * as Loadable from 'react-loadable';
-
-import { context } from 'ts/context/cov';
-
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
-
-const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
-    loading: () => <div />,
-    delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
-        return <Component />;
-    },
-});
-
-const Cov: React.StatelessComponent<{}> = () => (
-    <Base context={context}>
-        <Hero>
-            <Animation />
-        </Hero>
-        <Intro>
-            <IntroLead title="Measure your tests">
-                <p>
-                    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.
-                </p>
-            </IntroLead>
-            <IntroAside>
-                <Code
-                    language="javascript"
-                    isDiff={true}
-                    gutterLength={2}
-                    gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]}
-                >
-                    {`+function executeTransaction(uint transactionId)
-     public
-+    notExecuted(transactionId)
-+    fullyConfirmed(transactionId)
-+    pastTimeLock(transactionId)
-{
-+    Transaction storage tx = transactions[transactionId]
-+    tx.executed = true
-+    if (tx.destination.call.value(tx.value)(tx.data))
-+        Execution(transactionId)
-     else {
--        ExecutionFailure(transactionId)
--        tx.executed = false
-    }
-}`}
-                </Code>
-            </IntroAside>
-        </Intro>
-
-        <Content>
-            <ContentBlock main={true} title="Get started" />
-            <ContentBlock title="Prerequisites">
-                <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-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>
-
-                <Tabs>
-                    <TabBlock title="Sol-compiler">
-                        <Code language="javascript">
-                            {`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);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Truffle">
-                        <Code language="javascript">
-                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
-
-const projectRoot = '.';
-const solcVersion = '0.4.24';
-const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Custom">
-                        <Code language="javascript">
-                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
-
-class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
-const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                        </Code>
-                    </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="javascript">
-                        {`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>
-);
-
-const root = document.getElementById('app');
-
-if (root.hasChildNodes()) {
-    hydrate(<Cov />, root);
-} else {
-    render(<Cov />, root);
-}
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
deleted file mode 100644
index 4e833e0d0..000000000
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import * as React from 'react';
-import { hydrate, render } from 'react-dom';
-import * as Loadable from 'react-loadable';
-
-import { context } from 'ts/context/profiler';
-
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
-
-const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
-    loading: () => <div />,
-    delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
-        return <Component />;
-    },
-});
-
-const Profiler: React.StatelessComponent<{}> = () => (
-    <Base context={context}>
-        <Hero>
-            <Animation />
-        </Hero>
-        <Intro>
-            <IntroLead title="Outline gas usage">
-                <p>
-                    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.
-                </p>
-            </IntroLead>
-            <IntroAside>
-                <Code
-                    language="javascript"
-                    isDiff={true}
-                    gutterLength={6}
-                    gutter={[15, 15, undefined, 21747, 20303, 1435]}
-                >
-                    {`+function() public payable {
-+    deposit();
-}
-+function deposit() public payabble {
-+    balanceOf[msg.sender] += msg.value;
-+    Deposit(msg.sender, msg.value);
-}
--function withdraw(uint wad) public {
--    require(balanceOf[msg.sender] >= wad);
--    balanceOf[msg.sender] -= wad;
--    msg.sender.transfer(wad);
--    Withdrawal(msg.sender, wad);
-}`}
-                </Code>
-            </IntroAside>
-        </Intro>
-        <Content>
-            <ContentBlock main={true} title="Get started" />
-            <ContentBlock title="Prerequisites">
-                <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{' '}
-                    <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>
-
-                <Tabs>
-                    <TabBlock title="Sol-compiler">
-                        <Code language="javascript">
-                            {`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);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Truffle">
-                        <Code language="javascript">
-                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
-
-const projectRoot = '.';
-const solcVersion = '0.4.24';
-const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Custom">
-                        <Code language="javascript">
-                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
-
-class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
-const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                        </Code>
-                    </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="javascript">
-                        {`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>
-);
-
-const root = document.getElementById('app');
-
-if (root.hasChildNodes()) {
-    hydrate(<Profiler />, root);
-} else {
-    render(<Profiler />, root);
-}
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
deleted file mode 100644
index 23cbe98be..000000000
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import * as React from 'react';
-import { hydrate, render } from 'react-dom';
-import * as Loadable from 'react-loadable';
-
-import { context } from 'ts/context/trace';
-
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
-import { Trace as TraceComponent } from 'ts/components/Trace';
-
-const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
-    loading: () => <div />,
-    delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
-        return <Component />;
-    },
-});
-
-const Trace: React.StatelessComponent<{}> = () => (
-    <Base context={context}>
-        <Hero>
-            <Animation />
-        </Hero>
-        <TraceComponent />
-        <Content>
-            <ContentBlock main={true} title="Get started" />
-            <ContentBlock title="Prerequisites">
-                <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{' '}
-                    <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>
-
-                <Tabs>
-                    <TabBlock title="Sol-compiler">
-                        <Code language="javascript">
-                            {`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);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Truffle">
-                        <Code language="javascript">
-                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
-
-const projectRoot = '.';
-const solcVersion = '0.4.24';
-const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Custom">
-                        <Code language="javascript">
-                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
-
-class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
-const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                        </Code>
-                    </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="javascript">
-                        {`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>
-);
-
-const root = document.getElementById('app');
-
-if (root.hasChildNodes()) {
-    hydrate(<Trace />, root);
-} else {
-    render(<Trace />, root);
-}
diff --git a/packages/dev-tools-pages/ts/pages/compiler.tsx b/packages/dev-tools-pages/ts/pages/compiler.tsx
new file mode 100644
index 000000000..ee533d566
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/compiler.tsx
@@ -0,0 +1,170 @@
+import * as React from 'react';
+import { hydrate, render } from 'react-dom';
+import * as Loadable from 'react-loadable';
+
+import { context } from 'ts/context/compiler';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Compiler as CompilerComponent } from 'ts/components/Compiler';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { Lead } from 'ts/components/Typography';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
+    loading: () => <div />,
+    delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
+});
+
+const Compiler: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <CompilerComponent />
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Install">
+                <Breakout>
+                    <Code canCopy={true}>npm install @0x/sol-compiler --g</Code>
+                </Breakout>
+            </ContentBlock>
+
+            <ContentBlock title="Run">
+                <Breakout>
+                    <Code>cd /your_project_dir && sol-compiler</Code>
+                </Breakout>
+            </ContentBlock>
+
+            <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={true}>
+            <ContentBlock main={true} title="Artifacts">
+                <Lead>
+                    Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define
+                    which parts of the artifact you need.
+                </Lead>
+            </ContentBlock>
+
+            <ContentBlock title="Production">
+                <p>
+                    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 isLight={true} language="json" isEtc={true}>
+                        {`{
+    "compilerSettings": {
+        "outputSelection": {
+            "*": {
+                "*": ["abi"]
+            }
+        }
+    }
+}`}
+                    </Code>
+                </Breakout>
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
+    "compilerOutput": {
+        "abi": [...],
+    },
+}`}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+            <ContentBlock title="Development">
+                <p>
+                    Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
+                    artifact.
+                </p>
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
+    "compilerSettings": {
+        "outputSelection": {
+            "*": {
+                "*": [
+                    "abi",
+                    "evm.bytecode.object",
+                    "evm.bytecode.sourceMap",
+                    "evm.deployedBytecode.object",
+                    "evm.deployedBytecode.sourceMap"
+                ]
+            }
+        }
+    }
+}`}
+                    </Code>
+                </Breakout>
+
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
+    "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>
+);
+
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Compiler />, root);
+} else {
+    render(<Compiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/cov.tsx b/packages/dev-tools-pages/ts/pages/cov.tsx
new file mode 100644
index 000000000..3ffa6077d
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/cov.tsx
@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { hydrate, render } from 'react-dom';
+import * as Loadable from 'react-loadable';
+
+import { context } from 'ts/context/cov';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
+import { List, ListItem } from 'ts/components/List';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
+    loading: () => <div />,
+    delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
+});
+
+const Cov: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <Intro>
+            <IntroLead title="Measure your tests">
+                <p>
+                    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.
+                </p>
+            </IntroLead>
+            <IntroAside>
+                <Code
+                    language="javascript"
+                    isDiff={true}
+                    gutterLength={2}
+                    gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]}
+                >
+                    {`+function executeTransaction(uint transactionId)
+     public
++    notExecuted(transactionId)
++    fullyConfirmed(transactionId)
++    pastTimeLock(transactionId)
+{
++    Transaction storage tx = transactions[transactionId]
++    tx.executed = true
++    if (tx.destination.call.value(tx.value)(tx.data))
++        Execution(transactionId)
+     else {
+-        ExecutionFailure(transactionId)
+-        tx.executed = false
+    }
+}`}
+                </Code>
+            </IntroAside>
+        </Intro>
+
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <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-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>
+
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`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);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                        </Code>
+                    </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="javascript">
+                        {`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>
+);
+
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Cov />, root);
+} else {
+    render(<Cov />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx
new file mode 100644
index 000000000..4e833e0d0
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/profiler.tsx
@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { hydrate, render } from 'react-dom';
+import * as Loadable from 'react-loadable';
+
+import { context } from 'ts/context/profiler';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
+import { List, ListItem } from 'ts/components/List';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
+    loading: () => <div />,
+    delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
+});
+
+const Profiler: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <Intro>
+            <IntroLead title="Outline gas usage">
+                <p>
+                    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.
+                </p>
+            </IntroLead>
+            <IntroAside>
+                <Code
+                    language="javascript"
+                    isDiff={true}
+                    gutterLength={6}
+                    gutter={[15, 15, undefined, 21747, 20303, 1435]}
+                >
+                    {`+function() public payable {
++    deposit();
+}
++function deposit() public payabble {
++    balanceOf[msg.sender] += msg.value;
++    Deposit(msg.sender, msg.value);
+}
+-function withdraw(uint wad) public {
+-    require(balanceOf[msg.sender] >= wad);
+-    balanceOf[msg.sender] -= wad;
+-    msg.sender.transfer(wad);
+-    Withdrawal(msg.sender, wad);
+}`}
+                </Code>
+            </IntroAside>
+        </Intro>
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <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{' '}
+                    <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>
+
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`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);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                        </Code>
+                    </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="javascript">
+                        {`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>
+);
+
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Profiler />, root);
+} else {
+    render(<Profiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx
new file mode 100644
index 000000000..23cbe98be
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/trace.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { hydrate, render } from 'react-dom';
+import * as Loadable from 'react-loadable';
+
+import { context } from 'ts/context/trace';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { List, ListItem } from 'ts/components/List';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
+import { Trace as TraceComponent } from 'ts/components/Trace';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
+    loading: () => <div />,
+    delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
+});
+
+const Trace: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <TraceComponent />
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <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{' '}
+                    <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>
+
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`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);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                        </Code>
+                    </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="javascript">
+                        {`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>
+);
+
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Trace />, root);
+} else {
+    render(<Trace />, root);
+}
-- 
cgit v1.2.3


From 117726c6d80dd20e8b9409cec23b0c062690b0df Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 17:35:22 +0100
Subject: fix imports after renaming

---
 packages/dev-tools-pages/ts/pages/compiler.tsx | 20 ++++++++++----------
 packages/dev-tools-pages/ts/pages/cov.tsx      | 22 +++++++++++-----------
 packages/dev-tools-pages/ts/pages/profiler.tsx | 22 +++++++++++-----------
 packages/dev-tools-pages/ts/pages/trace.tsx    | 22 +++++++++++-----------
 4 files changed, 43 insertions(+), 43 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/compiler.tsx b/packages/dev-tools-pages/ts/pages/compiler.tsx
index ee533d566..912589b51 100644
--- a/packages/dev-tools-pages/ts/pages/compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/compiler.tsx
@@ -4,18 +4,18 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/compiler';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Compiler as CompilerComponent } from 'ts/components/Compiler';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Lead } from 'ts/components/Typography';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Compiler as CompilerComponent } from 'ts/components/compiler';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { Lead } from 'ts/components/typography';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
+    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/animations/compiler'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {
diff --git a/packages/dev-tools-pages/ts/pages/cov.tsx b/packages/dev-tools-pages/ts/pages/cov.tsx
index 3ffa6077d..ebaf5bfb2 100644
--- a/packages/dev-tools-pages/ts/pages/cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/cov.tsx
@@ -4,19 +4,19 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/cov';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { Intro, IntroAside, IntroLead } from 'ts/components/intro';
+import { List, ListItem } from 'ts/components/list';
+import { TabBlock, Tabs } from 'ts/components/tabs';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
+    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/animations/cov'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {
diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx
index 4e833e0d0..040b439e8 100644
--- a/packages/dev-tools-pages/ts/pages/profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/profiler.tsx
@@ -4,19 +4,19 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/profiler';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { Intro, IntroAside, IntroLead } from 'ts/components/intro';
+import { List, ListItem } from 'ts/components/list';
+import { TabBlock, Tabs } from 'ts/components/tabs';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
+    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/animations/profiler'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {
diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx
index 23cbe98be..acb8fb841 100644
--- a/packages/dev-tools-pages/ts/pages/trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/trace.tsx
@@ -4,19 +4,19 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/trace';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
-import { Trace as TraceComponent } from 'ts/components/Trace';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { List, ListItem } from 'ts/components/list';
+import { TabBlock, Tabs } from 'ts/components/tabs';
+import { Trace as TraceComponent } from 'ts/components/trace';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
+    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/animations/trace'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {
-- 
cgit v1.2.3


From 339ec3e8ebac25fe7ee6eb26b89bfc9b9e00db26 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 20 Nov 2018 15:18:09 +0100
Subject: uniq export names for animations

---
 packages/dev-tools-pages/ts/pages/compiler.tsx | 4 ++--
 packages/dev-tools-pages/ts/pages/cov.tsx      | 4 ++--
 packages/dev-tools-pages/ts/pages/profiler.tsx | 4 ++--
 packages/dev-tools-pages/ts/pages/trace.tsx    | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages')

diff --git a/packages/dev-tools-pages/ts/pages/compiler.tsx b/packages/dev-tools-pages/ts/pages/compiler.tsx
index 912589b51..93a667562 100644
--- a/packages/dev-tools-pages/ts/pages/compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/compiler.tsx
@@ -18,8 +18,8 @@ const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/animations/compiler'),
     loading: () => <div />,
     delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
+    render(loadable: { CompilerAnimation: any }): React.ReactNode {
+        const Component = loadable.CompilerAnimation;
         return <Component />;
     },
 });
diff --git a/packages/dev-tools-pages/ts/pages/cov.tsx b/packages/dev-tools-pages/ts/pages/cov.tsx
index ebaf5bfb2..ff1ced27d 100644
--- a/packages/dev-tools-pages/ts/pages/cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/cov.tsx
@@ -19,8 +19,8 @@ const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/animations/cov'),
     loading: () => <div />,
     delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
+    render(loadable: { CovAnimation: any }): React.ReactNode {
+        const Component = loadable.CovAnimation;
         return <Component />;
     },
 });
diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx
index 040b439e8..860e2c25e 100644
--- a/packages/dev-tools-pages/ts/pages/profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/profiler.tsx
@@ -19,8 +19,8 @@ const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/animations/profiler'),
     loading: () => <div />,
     delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
+    render(loadable: { ProfilerAnimation: any }): React.ReactNode {
+        const Component = loadable.ProfilerAnimation;
         return <Component />;
     },
 });
diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx
index acb8fb841..a25d2eff8 100644
--- a/packages/dev-tools-pages/ts/pages/trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/trace.tsx
@@ -19,8 +19,8 @@ const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/animations/trace'),
     loading: () => <div />,
     delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
+    render(loadable: { TraceAnimation: any }): React.ReactNode {
+        const Component = loadable.TraceAnimation;
         return <Component />;
     },
 });
-- 
cgit v1.2.3