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

---
 .../ts/components/Animations/Compiler/index.tsx    |  11 +-
 .../ts/components/Animations/Cov/index.tsx         |  11 +-
 .../ts/components/Animations/Profiler/index.tsx    |  11 +-
 .../ts/components/Animations/Trace/index.tsx       |  11 +-
 .../ts/components/Animations/index.tsx             |  81 ++++----
 packages/dev-tools-pages/ts/components/Base.tsx    |  33 ++--
 .../dev-tools-pages/ts/components/Breakout.tsx     |   2 +-
 packages/dev-tools-pages/ts/components/Button.tsx  |  16 +-
 packages/dev-tools-pages/ts/components/Code.tsx    | 122 ++++++------
 .../dev-tools-pages/ts/components/Compiler.tsx     |  45 +++--
 .../dev-tools-pages/ts/components/Container.tsx    |   4 +-
 packages/dev-tools-pages/ts/components/Content.tsx |  16 +-
 .../dev-tools-pages/ts/components/ContentBlock.tsx |  15 +-
 packages/dev-tools-pages/ts/components/Footer.tsx  |  90 +++++----
 packages/dev-tools-pages/ts/components/Header.tsx  |  46 ++---
 packages/dev-tools-pages/ts/components/Hero.tsx    |  27 ++-
 .../dev-tools-pages/ts/components/InlineCode.tsx   |   9 +-
 packages/dev-tools-pages/ts/components/Intro.tsx   |  48 +++--
 packages/dev-tools-pages/ts/components/List.tsx    |  27 ++-
 packages/dev-tools-pages/ts/components/Tabs.tsx    |  51 +++---
 packages/dev-tools-pages/ts/components/Trace.tsx   | 204 +++++++++++----------
 .../dev-tools-pages/ts/components/Typography.tsx   |   1 +
 .../dev-tools-pages/ts/components/withContext.tsx  |  23 ---
 packages/dev-tools-pages/ts/context/compiler.tsx   |   2 +-
 packages/dev-tools-pages/ts/context/cov.tsx        |   2 +-
 packages/dev-tools-pages/ts/context/index.tsx      |  11 +-
 packages/dev-tools-pages/ts/context/profiler.tsx   |   2 +-
 packages/dev-tools-pages/ts/context/trace.tsx      |   2 +-
 packages/dev-tools-pages/ts/globalStyles.tsx       |  21 +--
 packages/dev-tools-pages/ts/globals.d.ts           |   4 +-
 packages/dev-tools-pages/ts/highlight.tsx          |  46 ++---
 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 +++++++--------
 packages/dev-tools-pages/ts/variables.tsx          |   1 -
 36 files changed, 844 insertions(+), 843 deletions(-)
 delete mode 100644 packages/dev-tools-pages/ts/components/withContext.tsx

diff --git a/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
index dbd8a3799..db93ff8a4 100644
--- a/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 
-import Animation from '../index';
+import { BaseAnimation } from '../index';
+
 import * as animationData from './data.json';
 
-function AnimationCompiler() {
-    return <Animation animationData={animationData} width={2150} height={700} />;
-}
+const CompilerAnimation: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={2150} height={700} />
+);
 
-export default AnimationCompiler;
+export { CompilerAnimation as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
index c14c64ab9..445824717 100644
--- a/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 
-import Animation from '../index';
+import { BaseAnimation } from '../index';
+
 import * as animationData from './data.json';
 
-function AnimationCov() {
-    return <Animation animationData={animationData} width={1981} height={660} />;
-}
+const AnimationCov: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={1981} height={660} />
+);
 
-export default AnimationCov;
+export { AnimationCov as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
index e767a587f..73a4e9ad6 100644
--- a/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 
-import Animation from '../index';
+import { BaseAnimation } from '../index';
+
 import * as animationData from './data.json';
 
-function AnimationProfiler() {
-    return <Animation animationData={animationData} width={1985} height={657} />;
-}
+const AnimationProfiler: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={1985} height={657} />
+);
 
-export default AnimationProfiler;
+export { AnimationProfiler as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
index fa421a3bf..10a78ccb7 100644
--- a/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 
-import Animation from '../index';
+import { BaseAnimation } from '../index';
+
 import * as animationData from './data.json';
 
-function AnimationTrace() {
-    return <Animation animationData={animationData} width={2241} height={610} />;
-}
+const AnimationTrace: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={2241} height={610} />
+);
 
-export default AnimationTrace;
+export { AnimationTrace as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/index.tsx b/packages/dev-tools-pages/ts/components/Animations/index.tsx
index 3db501dc1..95af4448c 100644
--- a/packages/dev-tools-pages/ts/components/Animations/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/index.tsx
@@ -11,55 +11,28 @@ interface AnimationProps {
 }
 
 interface AnimationState {
-    width?: number;
-    height?: number;
+    width?: number | undefined;
+    height?: number | undefined;
 }
 
-class Animation extends React.PureComponent<AnimationProps, AnimationState> {
-    timeout = null as any;
-    constructor(props: AnimationProps) {
-        super(props);
+class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState> {
+    public state: AnimationState = {
+        height: undefined,
+        width: undefined,
+    };
+    private _timeout = null as any;
 
-        this.state = {
-            height: undefined,
-            width: undefined,
-        };
-
-        this.handleResize = this.handleResize.bind(this);
-        this.updateAnimationSize = this.updateAnimationSize.bind(this);
-    }
-
-    componentDidMount() {
-        this.updateAnimationSize();
-        window.addEventListener('resize', this.handleResize);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.handleResize);
+    public componentDidMount(): void {
+        this._updateAnimationSize();
+        window.addEventListener('resize', this._handleResize);
     }
 
-    handleResize() {
-        clearTimeout(this.timeout);
-        this.timeout = setTimeout(this.updateAnimationSize, 50);
+    public componentWillUnmount(): void {
+        window.removeEventListener('resize', this._handleResize);
     }
 
-    updateAnimationSize() {
-        const windowWidth = window.innerWidth;
-        let width = undefined;
-        let height = undefined;
-        if (windowWidth <= 1000) {
-            const maxWidth = windowWidth + 250;
-            const ratio = maxWidth / this.props.width;
-
-            height = Math.round(this.props.height * ratio);
-            width = Math.round(this.props.width * ratio);
-        }
-
-        this.setState({ width, height });
-    }
-
-    render() {
-        let { animationData } = this.props;
+    public render(): React.ReactNode {
+        const { animationData } = this.props;
         const height = this.state.height || this.props.height;
         const width = this.state.width || this.props.width;
 
@@ -72,13 +45,33 @@ class Animation extends React.PureComponent<AnimationProps, AnimationState> {
                         options={{
                             loop: true,
                             autoplay: true,
-                            animationData: animationData,
+                            animationData,
                         }}
                     />
                 </InnerContainer>
             </Container>
         );
     }
+
+    private readonly _handleResize = () => {
+        clearTimeout(this._timeout);
+        this._timeout = setTimeout(this._updateAnimationSize, 50);
+    };
+
+    private readonly _updateAnimationSize = () => {
+        const windowWidth = window.innerWidth;
+        let width;
+        let height;
+        if (windowWidth <= 1000) {
+            const maxWidth = windowWidth + 250;
+            const ratio = maxWidth / this.props.width;
+
+            height = Math.round(this.props.height * ratio);
+            width = Math.round(this.props.width * ratio);
+        }
+
+        this.setState({ width, height });
+    };
 }
 
 const Container = styled.div`
@@ -102,4 +95,4 @@ const InnerContainer = styled.div`
     transform: translateX(-50%);
 `;
 
-export default Animation;
+export { BaseAnimation };
diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
index 54340c9de..a1b066d85 100644
--- a/packages/dev-tools-pages/ts/components/Base.tsx
+++ b/packages/dev-tools-pages/ts/components/Base.tsx
@@ -1,24 +1,27 @@
 import * as React from 'react';
+import { ThemeProvider } from 'styled-components';
 
-import ThemeContext from 'ts/context';
-import GlobalStyles from 'ts/globalStyles';
-import Header from 'ts/components/Header';
-import Footer from 'ts/components/Footer';
+import { Footer } from 'ts/components/Footer';
+import { Header } from 'ts/components/Header';
+import { ThemeContext } from 'ts/context';
+import { GlobalStyles } from 'ts/globalStyles';
 
 interface BaseProps {
     context: any;
     children: React.ReactNode;
 }
 
-function Base(props: BaseProps) {
-    return (
-        <ThemeContext.Provider value={props.context}>
-            <GlobalStyles />
-            <Header />
-            {props.children}
-            <Footer />
-        </ThemeContext.Provider>
-    );
-}
+const Base: React.StatelessComponent<BaseProps> = props => (
+    <ThemeContext.Provider value={props.context}>
+        <ThemeProvider theme={props.context}>
+            <React.Fragment>
+                <GlobalStyles />
+                <Header />
+                {props.children}
+                <Footer />
+            </React.Fragment>
+        </ThemeProvider>
+    </ThemeContext.Provider>
+);
 
-export default Base;
+export { Base };
diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx
index 39998e9c7..505d8de41 100644
--- a/packages/dev-tools-pages/ts/components/Breakout.tsx
+++ b/packages/dev-tools-pages/ts/components/Breakout.tsx
@@ -9,4 +9,4 @@ const Breakout = styled.div`
   `};
 `;
 
-export default Breakout;
+export { Breakout };
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 2a968af28..d3b36ebfd 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,10 +1,8 @@
 import styled from 'styled-components';
-import { colors } from '../variables';
 
-import { media } from 'ts/variables';
-import { withContext, Props } from './withContext';
+import { colors, media } from 'ts/variables';
 
-interface ButtonProps extends Props {
+interface ButtonProps {
     large?: boolean;
 }
 
@@ -17,7 +15,7 @@ const Button =
   font-weight: 500;
   white-space: nowrap;
   vertical-align: middle;
-  background-color: ${props => props.colors.secondary};
+  background-color: ${props => props.theme.colors.secondary};
   color: ${colors.black};
   border: 0;
   border-radius: 5rem;
@@ -37,10 +35,10 @@ const Button =
   `}
 
   :hover, :focus {
-    background-color: ${props => props.colors.secondary_alt};
+    background-color: ${props => props.theme.colors.secondary_alt};
     outline: 0;
-  } 
-  
+  }
+
   ${media.small`
   font-size: .875rem;
   padding: .5625rem 1.25rem;
@@ -54,4 +52,4 @@ const Button =
     `}
 `;
 
-export default withContext(Button);
+export { Button };
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index f04d5aab8..da2bb83e6 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors, media } from 'ts/variables';
-import BaseButton from './Button';
+import { colors } from 'ts/variables';
 
-const touch = Boolean(
+import { Button as BaseButton } from './Button';
+
+const isTouch = Boolean(
     'ontouchstart' in window ||
         (window as any).navigator.maxTouchPoints > 0 ||
         (window as any).navigator.msMaxTouchPoints > 0,
@@ -13,12 +14,12 @@ const touch = Boolean(
 interface CodeProps {
     children: React.ReactNode;
     language?: string;
-    light?: boolean;
-    diff?: boolean;
-    gutter?: Array<number>;
+    isLight?: boolean;
+    isDiff?: boolean;
+    gutter?: Array<number | undefined>;
     gutterLength?: number;
-    copy?: boolean;
-    etc?: boolean;
+    canCopy?: boolean;
+    isEtc?: boolean;
 }
 
 interface CodeState {
@@ -27,7 +28,7 @@ interface CodeState {
 }
 
 const Button = styled(BaseButton)`
-    opacity: ${touch ? '1' : '0'};
+    opacity: ${isTouch ? '1' : '0'};
     position: absolute;
     top: 1rem;
     right: 1rem;
@@ -51,12 +52,12 @@ const Base =
     font-size: .875rem;
     color: ${props => (props.language === undefined ? colors.white : 'inherit')};
     background-color: ${props =>
-        props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : '#F1F4F5'};
+        props.isLight ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : '#F1F4F5'};
     white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
     position: relative;
 
     ${props =>
-        props.diff
+        props.isDiff
             ? `
         background-color: #E9ECED;
         display: flex;
@@ -66,8 +67,6 @@ const Base =
         -webkit-overflow-scrolling: touch;
     `
             : ``}
-
-    
 `;
 
 const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <code {...props}>{children}</code>)`
@@ -112,8 +111,8 @@ const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <co
 
 const StyledPre = styled.pre`
     margin: 0;
-    ${(props: { diff: boolean }) =>
-        !props.diff
+    ${(props: { isDiff: boolean }) =>
+        !props.isDiff
             ? `
         padding: 1.5rem;
         overflow-x: auto;
@@ -134,37 +133,78 @@ const StyledCopyInput = styled.textarea`
 const CopyInput = StyledCopyInput as any;
 
 class Code extends React.Component<CodeProps, CodeState> {
-    code = React.createRef<HTMLTextAreaElement>();
-
-    state: CodeState = {};
+    public state: CodeState = {};
+    private readonly _code = React.createRef<HTMLTextAreaElement>();
 
     constructor(props: CodeProps) {
         super(props);
     }
 
-    async componentDidMount() {
-        const { language, children, diff, gutter, etc } = this.props;
+    public componentDidMount(): void {
+        /*
+        * _onMountAsync is only setting state, so no point in handling the promise
+        */
+        /* tslint:disable:no-floating-promises */
+        this._onMountAsync();
+        /* tslint:enable:no-floating-promises */
+    }
+
+    public render(): React.ReactNode {
+        const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props;
+        const { hlCode } = this.state;
+
+        let CodeComponent = 'code';
+        let codeProps = {};
+        if (isDiff) {
+            codeProps = { gutterLength };
+            CodeComponent = StyledCodeDiff as any;
+        }
+
+        return (
+            <Container>
+                <Base language={language} isDiff={isDiff} isLight={isLight}>
+                    <StyledPre isDiff={isDiff}>
+                        <CodeComponent
+                            {...codeProps}
+                            dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
+                        >
+                            {hlCode === undefined ? children : null}
+                        </CodeComponent>
+                    </StyledPre>
+                    {!('clipboard' in navigator) ? (
+                        <CopyInput readOnly={true} aria-hidden="true" ref={this._code} value={children} />
+                    ) : null}
+                </Base>
+                {navigator.userAgent !== 'ReactSnap' && canCopy ? (
+                    <Button onClick={this._handleCopyAsync}>{this.state.copied ? 'Copied' : 'Copy'}</Button>
+                ) : null}
+            </Container>
+        );
+    }
+
+    private async _onMountAsync(): Promise<void> {
+        const { language, children, isDiff, gutter, isEtc } = this.props;
 
         const code = children as string;
 
         if (language !== undefined) {
-            const { default: highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
+            const { highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
 
             this.setState({
-                hlCode: highlight({ language, code, diff, gutter, etc }),
+                hlCode: highlight({ language, code, isDiff, gutter, isEtc }),
             });
         }
     }
 
-    handleCopy = async () => {
+    private readonly _handleCopyAsync = async () => {
         try {
             if ('clipboard' in navigator) {
                 await (navigator as any).clipboard.writeText(this.props.children);
                 this.setState({ copied: true });
             } else {
                 const lastActive = document.activeElement as HTMLElement;
-                this.code.current.focus();
-                this.code.current.select();
+                this._code.current.focus();
+                this._code.current.select();
                 document.execCommand('copy');
                 lastActive.focus();
                 this.setState({ copied: true });
@@ -173,36 +213,6 @@ class Code extends React.Component<CodeProps, CodeState> {
             this.setState({ copied: false });
         }
     };
-
-    render() {
-        const { language, light, diff, children, gutterLength, copy } = this.props;
-        const { hlCode } = this.state;
-
-        let Code = 'code';
-        let codeProps = {};
-        if (diff) {
-            codeProps = { gutterLength };
-            Code = StyledCodeDiff as any;
-        }
-
-        return (
-            <Container>
-                <Base language={language} diff={diff} light={light}>
-                    <StyledPre diff={diff}>
-                        <Code {...codeProps} dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}>
-                            {hlCode === undefined ? children : null}
-                        </Code>
-                    </StyledPre>
-                    {!('clipboard' in navigator) ? (
-                        <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
-                    ) : null}
-                </Base>
-                {navigator.userAgent !== 'ReactSnap' && copy ? (
-                    <Button onClick={this.handleCopy}>{this.state.copied ? 'Copied' : 'Copy'}</Button>
-                ) : null}
-            </Container>
-        );
-    }
 }
 
-export default Code;
+export { Code };
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index 37796e6cc..f16365fd0 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { media, colors } from '../variables';
 
-import Container from './Container';
-import InlineCode from './InlineCode';
-import Breakout from './Breakout';
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './Breakout';
+import { Container } from './Container';
+import { InlineCode } from './InlineCode';
 
 const Cards = styled.dl`
     column-count: 3;
@@ -12,7 +13,7 @@ const Cards = styled.dl`
 
     ${media.medium`
         column-count: 1;
-    `}: ;
+    `};
 `;
 
 const Card = styled.div`
@@ -46,7 +47,7 @@ const cards = [
         title: 'A Project-centric',
         body: (
             <React.Fragment>
-                Compiles an entire project instead of only individual <InlineCode alt>.sol</InlineCode> files.
+                Compiles an entire project instead of only individual <InlineCode isAlt={true}>.sol</InlineCode> files.
             </React.Fragment>
         ),
     },
@@ -70,21 +71,19 @@ const cards = [
     },
 ];
 
-function Compiler() {
-    return (
-        <Container>
-            <Breakout>
-                <Cards>
-                    {cards.map(card => (
-                        <Card key={card.title.split(' ').join('-')}>
-                            <Dt>{card.title}</Dt>
-                            <Dd>{card.body}</Dd>
-                        </Card>
-                    ))}
-                </Cards>
-            </Breakout>
-        </Container>
-    );
-}
+const Compiler: React.StatelessComponent<{}> = () => (
+    <Container>
+        <Breakout>
+            <Cards>
+                {cards.map(card => (
+                    <Card key={card.title.split(' ').join('-')}>
+                        <Dt>{card.title}</Dt>
+                        <Dd>{card.body}</Dd>
+                    </Card>
+                ))}
+            </Cards>
+        </Breakout>
+    </Container>
+);
 
-export default Compiler;
+export { Compiler };
diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
index de2de383b..1b9212ed2 100644
--- a/packages/dev-tools-pages/ts/components/Container.tsx
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
-import { media } from 'ts/variables';
-
 interface ContainerProps {
     wide?: boolean;
 }
@@ -15,4 +13,4 @@ const Container =
     width: ${props => (props.wide ? '100%' : 'calc(100% - 5rem)')};
 `;
 
-export default Container;
+export { Container };
diff --git a/packages/dev-tools-pages/ts/components/Content.tsx b/packages/dev-tools-pages/ts/components/Content.tsx
index 3dcf50660..328ef0778 100644
--- a/packages/dev-tools-pages/ts/components/Content.tsx
+++ b/packages/dev-tools-pages/ts/components/Content.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import Container from './Container';
+import { Container } from './Container';
 
 const StyledMain =
     styled.div <
@@ -26,12 +26,10 @@ interface MainProps {
     children: React.ReactNode;
 }
 
-function Main(props: MainProps) {
-    return (
-        <StyledMain dark={props.dark}>
-            <Container>{props.children}</Container>
-        </StyledMain>
-    );
-}
+const Content: React.StatelessComponent<MainProps> = props => (
+    <StyledMain dark={props.dark}>
+        <Container>{props.children}</Container>
+    </StyledMain>
+);
 
-export default Main;
+export { Content };
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index c54930902..66e0331ab 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { withContext, Props } from './withContext';
-import { Beta, Alpha } from './Typography';
+import { ContextInterface } from 'ts/context';
 import { media } from 'ts/variables';
 
+import { Alpha, Beta } from './Typography';
+
 const Base = styled.div`
     display: flex;
     align-items: flex-start;
@@ -52,13 +53,13 @@ const StyledTitle = styled(Alpha)`
     `};
 `;
 
-interface ContentBlockProps extends Props {
+interface ContentBlockProps extends ContextInterface {
     title: string;
     main?: boolean;
     children?: React.ReactNode;
 }
 
-function ContentBlock(props: ContentBlockProps) {
+const ContentBlock: React.StatelessComponent<ContentBlockProps> = props => {
     const children = React.Children.map(props.children, child => {
         return <Item>{child}</Item>;
     });
@@ -67,10 +68,10 @@ function ContentBlock(props: ContentBlockProps) {
 
     return (
         <Base>
-            <Title color={props.colors.type}>{props.title}</Title>
+            <Title color={props.colors}>{props.title}</Title>
             {children ? <Content>{children}</Content> : null}
         </Base>
     );
-}
+};
 
-export default withContext(ContentBlock);
+export { ContentBlock };
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 1a948fe08..d7ed6309a 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -1,54 +1,49 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Alpha, Beta } from './Typography';
-import { withContext, Props } from './withContext';
-import Container from './Container';
-import { media } from '../variables';
-
+import { context as compiler } from 'ts/context/compiler';
+import { context as cov } from 'ts/context/cov';
+import { context as profiler } from 'ts/context/profiler';
+import { context as trace } from 'ts/context/trace';
 import MainIcon from 'ts/icons/logos/0x.svg';
-import compiler from 'ts/context/compiler';
-import cov from 'ts/context/cov';
-import profiler from 'ts/context/profiler';
-import trace from 'ts/context/trace';
+import { media } from 'ts/variables';
+
+import { Container } from './Container';
+import { Alpha, Beta } from './Typography';
 
 const tools = [trace, cov, compiler, profiler];
 
-function Footer(props: Props) {
-    const { colors } = props;
-
-    return (
-        <StyledFooter background={colors.secondary}>
-            <Container>
-                <Top>
-                    <Alpha>Other tools by 0x</Alpha>
-                    <List>
-                        {tools.map(({ title, subtitle, icon }) => (
-                            <ListItem key={title}>
-                                <ListLink hoverColor={colors.dark} href="#">
-                                    <Icon as={icon} />
-                                    <div>
-                                        <Beta>{title}</Beta>
-                                        <p>{subtitle}</p>
-                                    </div>
-                                </ListLink>
-                            </ListItem>
-                        ))}
-                    </List>
-                </Top>
-                <Media as="aside">
-                    <Icon as={MainIcon} />
-                    <Small>
+const Footer: React.StatelessComponent<{}> = () => (
+    <StyledFooter>
+        <Container>
+            <Top>
+                <Alpha>Other tools by 0x</Alpha>
+                <List>
+                    {tools.map(({ title, subtitle, icon }) => (
+                        <ListItem key={title}>
+                            <ListLink href="#">
+                                <Icon as={icon} />
+                                <div>
+                                    <Beta>{title}</Beta>
+                                    <p>{subtitle}</p>
+                                </div>
+                            </ListLink>
+                        </ListItem>
+                    ))}
+                </List>
+            </Top>
+            <Media as="aside">
+                <Icon as={MainIcon} />
+                <Small>
                     0x is an open, permissionless protocol allowing for tokens to be traded on the Ethereum blockchain.
-                    </Small>
-                </Media>
-            </Container>
-        </StyledFooter>
-    );
-}
+                </Small>
+            </Media>
+        </Container>
+    </StyledFooter>
+);
 
 const StyledFooter = styled.footer`
-    background-color: ${(props: { background: string }) => props.background};
+    background-color: ${props => props.theme.colors.secondary};
     padding-top: 6.25rem;
     padding-bottom: 5.4375rem;
 
@@ -81,7 +76,7 @@ const Media = styled.div`
     align-items: center;
 
     ${Icon} {
-        margin-top: .5rem;
+        margin-top: 0.5rem;
         align-self: flex-start;
     }
 `;
@@ -95,7 +90,7 @@ const List = styled.ul`
     flex-wrap: wrap;
 
     ${media.medium`
-        width: 100%; 
+        width: 100%;
     `};
 
     ${media.small`
@@ -121,11 +116,14 @@ const ListItem = styled.li`
     `};
 `;
 
-const ListLink = styled.a<{hoverColor: string;}>`
+const ListLink =
+    styled.a <
+    { hoverColor: string } >
+    `
     display: flex;
     align-items: center;
     :hover {
-        color: ${props => props.hoverColor};
+        color: ${props => props.theme.colors.dark};
     }
 `;
 
@@ -134,4 +132,4 @@ const Small = styled.small`
     max-width: 37.5rem;
 `;
 
-export default withContext(Footer);
+export { Footer };
diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index b561a5d91..8c7154623 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -1,30 +1,30 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { withContext, Props } from './withContext';
-import Container from './Container';
-import { Small } from './Typography';
-
-import { media } from '../variables';
+import { ContextInterface, ThemeContext } from 'ts/context';
+import { media } from 'ts/variables';
 
-function Header(props: Props) {
-    const { icon, title, colors } = props;
+import { Container } from './Container';
+import { Small } from './Typography';
 
-    return (
-        <StyledHeader>
-            <Container>
-                <LogoMark>
-                    <Logo as={icon} color={colors.main} />
-                    <Title>{title}</Title>
-                </LogoMark>
+const Header: React.StatelessComponent<{}> = () => (
+    <ThemeContext.Consumer>
+        {({ icon, title, colors }: ContextInterface) => (
+            <StyledHeader>
+                <Container>
+                    <LogoMark>
+                        <Logo as={icon} color={colors.main} />
+                        <Title>{title}</Title>
+                    </LogoMark>
 
-                <Link as="a" href="https://0xproject.com/">
-                    Built by 0x
-                </Link>
-            </Container>
-        </StyledHeader>
-    );
-}
+                    <Link as="a" href="https://0xproject.com/">
+                        Built by 0x
+                    </Link>
+                </Container>
+            </StyledHeader>
+        )}
+    </ThemeContext.Consumer>
+);
 
 const StyledHeader = styled.header`
     padding-top: 3.75rem;
@@ -51,7 +51,7 @@ const LogoMark = styled.div`
 `;
 
 const StyledLogo = styled.div`
-    color: ${props => props.color}
+    color: ${props => props.color};
     width: 1.75rem;
     height: 100%;
 `;
@@ -76,4 +76,4 @@ const StyledLink = styled(Small)`
 const Link = StyledLink as any;
 const Logo = StyledLogo as any;
 
-export default withContext(Header);
+export { Header };
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index 8b866c5aa..9db15cb36 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -1,33 +1,32 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { ContextInterface, ThemeContext } from 'ts/context';
 import { media } from 'ts/variables';
-import { withContext, Props } from './withContext';
-import Button from './Button';
+
+import { Button } from './Button';
 import { Beta } from './Typography';
 
-interface HeroProps extends Props {
+interface HeroProps extends ContextInterface {
     children: React.ReactNode;
 }
 
-function Hero(props: HeroProps) {
-    const { subtitle, tagline } = props;
-
-    return (
-        <React.Fragment>
+const Hero: React.StatelessComponent<HeroProps> = ({ children }) => (
+    <ThemeContext.Consumer>
+        {({ subtitle, tagline }: ContextInterface) => (
             <StyledHero>
                 <HeroContainer>
                     <Subtitle>{subtitle}</Subtitle>
                     <Tagline as="p">{tagline}</Tagline>
-                    <Button as="a" href="#" large>
+                    <Button as="a" href="#" large={true}>
                         Read the Docs
                     </Button>
                 </HeroContainer>
-                {navigator.userAgent !== 'ReactSnap' ? props.children : null}
+                {navigator.userAgent !== 'ReactSnap' ? children : null}
             </StyledHero>
-        </React.Fragment>
-    );
-}
+        )}
+    </ThemeContext.Consumer>
+);
 
 const StyledHero = styled.section`
     text-align: center;
@@ -65,4 +64,4 @@ const Tagline = styled(Beta)`
     `};
 `;
 
-export default withContext(Hero);
+export { Hero };
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index 9f25927cd..00e625d66 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -1,15 +1,16 @@
 import * as React from 'react';
 import styled from 'styled-components';
+
 import { colors } from '../variables';
 
 interface InlineCodeProps {
-    alt?: boolean;
+    isAlt?: boolean;
     children: React.ReactNode;
 }
 
-const InlineCode = styled(({ alt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)`
-    background-color: ${props => (props.alt ? '#E5E8E9' : colors.blueGray)};
+const InlineCode = styled(({ isAlt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)`
+    background-color: ${props => (props.isAlt ? '#E5E8E9' : colors.blueGray)};
     padding: 0.3125rem;
 `;
 
-export default InlineCode;
+export { InlineCode };
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 838493998..ecc926e3c 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { media, colors } from '../variables';
 
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './Breakout';
+import { Container } from './Container';
 import { Alpha, Lead } from './Typography';
-import Container from './Container';
-import Breakout from './Breakout';
 
 const Main = styled.div`
     background-color: ${colors.lightGray};
@@ -16,7 +17,7 @@ const Main = styled.div`
         padding: 2.5rem;
     `};
     ${media.medium`
-        display: block;     
+        display: block;
     `};
 `;
 
@@ -52,30 +53,23 @@ interface IntroLeadProps {
     children?: React.ReactNode;
 }
 
-function IntroLead(props: IntroLeadProps) {
-    return (
-        <StyledIntroLead as="div">
-            <Title>{props.title}</Title>
-            {props.children}
-        </StyledIntroLead>
-    );
-}
+const IntroLead: React.StatelessComponent<IntroLeadProps> = props => (
+    <StyledIntroLead as="div">
+        <Title>{props.title}</Title>
+        {props.children}
+    </StyledIntroLead>
+);
 
-function IntroAside(props: IntroProps) {
-    return (
-        <Breakout>
-            <StyledIntroAside>{props.children}</StyledIntroAside>
-        </Breakout>
-    );
-}
+const IntroAside: React.StatelessComponent<IntroProps> = props => (
+    <Breakout>
+        <StyledIntroAside>{props.children}</StyledIntroAside>
+    </Breakout>
+);
 
-function Intro(props: IntroProps) {
-    return (
-        <Container wide>
-            <Main>{props.children}</Main>
-        </Container>
-    );
-}
+const Intro: React.StatelessComponent<IntroProps> = props => (
+    <Container wide={true}>
+        <Main>{props.children}</Main>
+    </Container>
+);
 
-export default Intro;
 export { IntroLead, IntroAside, Intro };
diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index 5bf6a9a6b..39e80de13 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { media } from '../variables';
+
+import { media } from 'ts/variables';
 
 const StyledList = styled.ul`
     list-style-type: none;
@@ -27,25 +28,23 @@ const StyledItem = styled.li`
     }
     :not(:last-child) {
         margin-bottom: 0.5625rem;
-
-        ${media.small`margin-bottom: 0.375rem`};
+        ${media.small`
+            margin-bottom: 0.375rem
+        `};
     }
 `;
 
 interface ListProps {
-    items?: Array<string>;
+    items?: [];
     children?: React.ReactNode;
 }
 
-function List(props: ListProps) {
-    return (
-        <StyledList>
-            {props.children !== undefined
-                ? props.children
-                : props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)}
-        </StyledList>
-    );
-}
+const List: React.StatelessComponent<ListProps> = props => (
+    <StyledList>
+        {props.children !== undefined
+            ? props.children
+            : props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)}
+    </StyledList>
+);
 
-export default List;
 export { List, StyledItem as ListItem };
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 36c707b06..c1d5f6b7f 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
+import { Tab, TabList, TabPanel, Tabs as ReactTabs } from 'react-tabs';
 import styled from 'styled-components';
+
 import { colors } from 'ts/variables';
-import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs';
-import Breakout from './Breakout';
-import { withContext, Props } from './withContext';
+
+import { Breakout } from './Breakout';
 
 const StyledTabList = styled(TabList)`
     text-transform: uppercase;
@@ -31,7 +32,7 @@ const Root =
     { colors: any } >
     `
     ${StyledTab} {
-        background-color: ${props => props.colors.secondary};
+        background-color: ${props => props.theme.colors.secondary};
         &[aria-selected="true"] {
             background-color: ${colors.gray};
 
@@ -39,44 +40,40 @@ const Root =
 
         &[aria-selected="false"]:focus,
         &[aria-selected="false"]:hover {
-            background-color: ${props => props.colors.secondary_alt};
+            background-color: ${props => props.theme.colors.secondary_alt};
             cursor: pointer;
         }
     }
 `;
 
-interface TabsProps extends Props {
+interface TabsProps {
     children: React.ReactNode;
 }
 
-function Tabs(props: TabsProps) {
-    return (
-        <Breakout>
-            <Root colors={props.colors}>
-                <ReactTabs>
-                    <StyledTabList>
-                        {React.Children.map(props.children, child => {
-                            const { props } = React.cloneElement(child as React.ReactElement<any>);
-                            return <StyledTab>{props.title}</StyledTab>;
-                        })}
-                    </StyledTabList>
+const Tabs: React.StatelessComponent<TabsProps> = props => (
+    <Breakout>
+        <Root>
+            <ReactTabs>
+                <StyledTabList>
+                    {React.Children.map(props.children, child => {
+                        const { title } = React.cloneElement(child as React.ReactElement<any>).props;
+                        return <StyledTab>{title}</StyledTab>;
+                    })}
+                </StyledTabList>
 
-                    {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
-                </ReactTabs>
-            </Root>
-        </Breakout>
-    );
-}
+                {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+            </ReactTabs>
+        </Root>
+    </Breakout>
+);
 
 interface TabBlockProps {
     title: string;
     children: React.ReactNode;
 }
 
-function TabBlock(props: TabBlockProps) {
-    return <React.Fragment>{props.children}</React.Fragment>;
-}
+const TabBlock: React.StatelessComponent<TabBlockProps> = props => <React.Fragment>{props.children}</React.Fragment>;
 
-const ContextTabs = withContext(Tabs);
+const ContextTabs = Tabs;
 
 export { ContextTabs as Tabs, TabBlock };
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 2e00ab9e9..0cee4c1a2 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,72 +1,67 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors, media } from '../variables';
-
-import { withContext, Props } from './withContext';
-import { Alpha, Lead, Gamma } from './Typography';
-import Container from './Container';
-import Code from './Code';
-import Breakout from './Breakout';
 
+import { ContextInterface, ThemeContext } from 'ts/context';
 import ExactLocation from 'ts/icons/exact-location.svg';
 import NoLocation from 'ts/icons/no-location.svg';
 import TimeConsuming from 'ts/icons/time-consuming.svg';
 import TimeSaving from 'ts/icons/time-saving.svg';
-
-interface TraceProps {
-    background?: string;
-}
-
-function Trace(props: Props) {
-    const { colors } = props;
-
-    return (
-        <StyledSection background={colors.secondary}>
-            <Wrapper>
-                <Block>
-                    <Alpha>The Issue</Alpha>
-                    <MainCopy>
-                        Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking
-                        line of code. The only hint you'll get is a generic error.
-                    </MainCopy>
-                    <Breakout>
-                        <Code light>Error: VM Exception while processing transaction: rever</Code>
-                    </Breakout>
-
-                    <List>
-                        <Item>
-                            <Copy dark>
-                                <Gamma as="h3">No location</Gamma>
-                                <p>
-                                    The error basically says "anything could have gone wrong here", which keeps you
-                                    completely in the dark about its exact location.
-                                </p>
-                            </Copy>
-                            <Icon as={NoLocation} />
-                        </Item>
-
-                        <Item>
-                            <Copy dark>
-                                <Gamma as="h3">Time-consuming</Gamma>
-                                <p>
-                                    Working with a large code-base that contains hundreds of smart contracts, finding
-                                    the failing line of code quickly becomes a daunting task.
-                                </p>
-                            </Copy>
-                            <Icon as={TimeConsuming} />
-                        </Item>
-                    </List>
-                </Block>
-
-                <Block background={colors.secondary}>
-                    <Alpha>The Fix</Alpha>
-                    <MainCopy>
-                        Sol-trace will give you full stack traces, including contract names, line numbers and code
-                        snippets, every time you encounter an error.
-                    </MainCopy>
-                    <Breakout>
-                        <Code light language="javascript">
-                        {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './Breakout';
+import { Code } from './Code';
+import { Container } from './Container';
+import { Alpha, Gamma, Lead } from './Typography';
+
+const Trace: React.StatelessComponent<{}> = () => (
+    <ThemeContext.Consumer>
+        {(props: ContextInterface) => (
+            <StyledSection background={props.colors.secondary}>
+                <Wrapper>
+                    <Block>
+                        <Alpha>The Issue</Alpha>
+                        <MainCopy>
+                            Every time an Ethereum transaction fails, it's extremely hard to trace down the
+                            troublemaking line of code. The only hint you'll get is a generic error.
+                        </MainCopy>
+                        <Breakout>
+                            <Code isLight={true}>Error: VM Exception while processing transaction: rever</Code>
+                        </Breakout>
+
+                        <List>
+                            <Item>
+                                <Copy dark={true}>
+                                    <Gamma as="h3">No location</Gamma>
+                                    <p>
+                                        The error basically says "anything could have gone wrong here", which keeps you
+                                        completely in the dark about its exact location.
+                                    </p>
+                                </Copy>
+                                <Icon as={NoLocation} />
+                            </Item>
+
+                            <Item>
+                                <Copy dark={true}>
+                                    <Gamma as="h3">Time-consuming</Gamma>
+                                    <p>
+                                        Working with a large code-base that contains hundreds of smart contracts,
+                                        finding the failing line of code quickly becomes a daunting task.
+                                    </p>
+                                </Copy>
+                                <Icon as={TimeConsuming} />
+                            </Item>
+                        </List>
+                    </Block>
+
+                    <Block background={props.colors.secondary}>
+                        <Alpha>The Fix</Alpha>
+                        <MainCopy>
+                            Sol-trace will give you full stack traces, including contract names, line numbers and code
+                            snippets, every time you encounter an error.
+                        </MainCopy>
+                        <Breakout>
+                            <Code isLight={true} language="javascript">
+                                {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
     require(
         isValidSignature(
             hash,
@@ -75,42 +70,48 @@ function Trace(props: Props) {
         ),
         "INVALID_SIGNATURE"
     )`}
-                        </Code>
-                    </Breakout>
-
-                    <List>
-                        <Item>
-                            <Copy>
-                                <Gamma as="h3">Exact location</Gamma>
-                                <p>
-                                    It shows you the exact location of the specific code linen and where it was called
-                                    from.
-                                </p>
-                            </Copy>
-                            <Icon as={ExactLocation} />
-                        </Item>
-
-                        <Item>
-                            <Copy>
-                                <Gamma as="h3">Time-saving</Gamma>
-                                <p>
-                                    Turning "Your code failed somewhere, good luck debugging it" into "Your code failed
-                                    on line X of contract Y", it drastically improves the developer experience.
-                                </p>
-                            </Copy>
-                            <Icon as={TimeSaving} />
-                        </Item>
-                    </List>
-                </Block>
-            </Wrapper>
-        </StyledSection>
-    );
+                            </Code>
+                        </Breakout>
+
+                        <List>
+                            <Item>
+                                <Copy>
+                                    <Gamma as="h3">Exact location</Gamma>
+                                    <p>
+                                        It shows you the exact location of the specific code linen and where it was
+                                        called from.
+                                    </p>
+                                </Copy>
+                                <Icon as={ExactLocation} />
+                            </Item>
+
+                            <Item>
+                                <Copy>
+                                    <Gamma as="h3">Time-saving</Gamma>
+                                    <p>
+                                        Turning "Your code failed somewhere, good luck debugging it" into "Your code
+                                        failed on line X of contract Y", it drastically improves the developer
+                                        experience.
+                                    </p>
+                                </Copy>
+                                <Icon as={TimeSaving} />
+                            </Item>
+                        </List>
+                    </Block>
+                </Wrapper>
+            </StyledSection>
+        )}
+    </ThemeContext.Consumer>
+);
+
+interface TraceProps {
+    background?: string;
 }
 
 const StyledSection =
     styled.section <
-        TraceProps >
-        `
+    TraceProps >
+    `
     max-width: 90rem;
     margin: 0 auto;
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
@@ -139,8 +140,8 @@ const Wrapper = styled(Container)`
 
 const Block =
     styled.div <
-        TraceProps >
-        `
+    TraceProps >
+    `
     width: 50%;
     background: ${props => (props.background ? props.background : colors.black)};
     color: ${props => (props.background ? 'inherit' : colors.white)};
@@ -199,9 +200,14 @@ const Item = styled.li`
     }
 `;
 
-const Copy = styled.div<{ dark?: boolean; }>`
+const Copy =
+    styled.div <
+    { dark: boolean } >
+    `
     margin-right: 5.875rem;
-    ${props => props.dark && `
+    ${props =>
+        props.dark &&
+        `
         p {
             color: #ccc;
         }
@@ -214,4 +220,4 @@ const Icon = styled.div`
     flex-shrink: 0;
 `;
 
-export default withContext(Trace);
+export { Trace };
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index b3ed1b95c..e4b13163a 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+
 import { media } from '../variables';
 
 const Alpha = styled.h2`
diff --git a/packages/dev-tools-pages/ts/components/withContext.tsx b/packages/dev-tools-pages/ts/components/withContext.tsx
deleted file mode 100644
index d38c0afe4..000000000
--- a/packages/dev-tools-pages/ts/components/withContext.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-import ThemeContext from '../context';
-
-interface Props {
-    title?: string;
-    name?: string;
-    subtitle?: string;
-    tagline?: string;
-    icon?: React.ReactNode;
-    colors?: any;
-}
-
-function withContext(WrappedComponent: any) {
-    function ComponentWithContext(props: any) {
-        return <ThemeContext.Consumer>{data => <WrappedComponent {...data} {...props} />}</ThemeContext.Consumer>;
-    }
-
-    return ComponentWithContext;
-}
-
-export default withContext;
-export { withContext, Props };
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
index e14c1936e..88402e4f6 100644
--- a/packages/dev-tools-pages/ts/context/compiler.tsx
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -1,6 +1,6 @@
 import Icon from 'ts/icons/logos/compiler.svg';
 
-export default {
+export const context = {
     title: 'sol-compiler',
     name: 'compiler',
     subtitle: 'Solidity compilation that just works',
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
index f2f4d5dad..eea3ccca6 100644
--- a/packages/dev-tools-pages/ts/context/cov.tsx
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -1,6 +1,6 @@
 import Icon from 'ts/icons/logos/cov.svg';
 
-export default {
+export const context = {
     title: 'sol-cov',
     name: 'cov',
     subtitle: 'Solidity code coverage',
diff --git a/packages/dev-tools-pages/ts/context/index.tsx b/packages/dev-tools-pages/ts/context/index.tsx
index 54556a3fd..3aba2f34c 100644
--- a/packages/dev-tools-pages/ts/context/index.tsx
+++ b/packages/dev-tools-pages/ts/context/index.tsx
@@ -1,5 +1,14 @@
 import { createContext } from 'react';
 
+interface ContextInterface {
+    title?: string;
+    name?: string;
+    subtitle?: string;
+    tagline?: string;
+    icon?: React.ReactNode;
+    colors?: any;
+}
+
 const ThemeContext = createContext({});
 
-export default ThemeContext;
+export { ThemeContext, ContextInterface };
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
index 9593c08ec..507fa663d 100644
--- a/packages/dev-tools-pages/ts/context/profiler.tsx
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -1,6 +1,6 @@
 import Icon from 'ts/icons/logos/profiler.svg';
 
-export default {
+export const context = {
     title: 'sol-profiler',
     name: 'profiler',
     subtitle: 'Gas profiling for Solidity',
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
index 697a4263a..fea72d4c2 100644
--- a/packages/dev-tools-pages/ts/context/trace.tsx
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -1,6 +1,6 @@
 import Icon from 'ts/icons/logos/trace.svg';
 
-export default {
+export const context = {
     title: 'sol-trace',
     name: 'trace',
     subtitle: 'Human-readable stack traces',
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index c5db93f6a..1a571c0cb 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -1,11 +1,10 @@
+import hljsStyles from 'highlight.js/styles/github-gist.css';
 import { createGlobalStyle } from 'styled-components';
-import { media } from './variables';
 import styledNormalize from 'styled-normalize';
-import hljsStyles from 'highlight.js/styles/github-gist.css';
 
-import { withContext } from 'ts/components/withContext';
+import { media } from 'ts/variables';
 
-const BaseStyles = createGlobalStyle`
+const GlobalStyles = createGlobalStyle`
     ${styledNormalize}
     ${hljsStyles}
 
@@ -35,11 +34,11 @@ const BaseStyles = createGlobalStyle`
         font-size: 100%;
         box-sizing: border-box;
     }
-    
+
     *, *::before, *::after {
         box-sizing: inherit;
     }
-    
+
     body {
         font-family: "Maison Neue", system-ui, sans-serif;
         font-weight: 300;
@@ -55,14 +54,14 @@ const BaseStyles = createGlobalStyle`
     }
 
     a:not([class]) {
-        color: ${(props: any) => props.colors.type};
-        text-decoration: none; 
+        color: black;
+        text-decoration: none;
 
         &:hover {
-            color: ${(props: any) => props.colors.type_alt};
+            color: black;
         }
     }
-    
+
     h1, h2, h3, h4 {
         font-weight: 500;
         margin: 0;
@@ -84,4 +83,4 @@ const BaseStyles = createGlobalStyle`
     }
 `;
 
-export default withContext(BaseStyles);
+export { GlobalStyles };
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
index 5c7cbe54c..bfe13ee71 100644
--- a/packages/dev-tools-pages/ts/globals.d.ts
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -1,6 +1,8 @@
 declare module 'whatwg-fetch';
 declare module 'react-document-title';
-declare module 'highlighter';
+declare module 'highlight.js/lib/highlight';
+declare module 'highlight.js/lib/languages/javascript';
+declare module 'highlight.js/lib/languages/json';
 
 declare var System: any;
 
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 6efba02f8..cef03904a 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,6 +1,6 @@
-const hljs = require('highlight.js/lib/highlight');
-const javascript = require('highlight.js/lib/languages/javascript');
-const json = require('highlight.js/lib/languages/json');
+import * as hljs from 'highlight.js/lib/highlight';
+import * as javascript from 'highlight.js/lib/languages/javascript';
+import * as json from 'highlight.js/lib/languages/json';
 
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('json', json);
@@ -9,59 +9,61 @@ interface PatchInterface {
     [key: string]: string;
 }
 
-var PATCH_TYPES: PatchInterface = {
+const PATCH_TYPES: PatchInterface = {
     '+': 'addition',
     '-': 'deletion',
     '!': 'change',
 };
 
-function diffHighlight(language: string, code: any, gutter: any) {
+function diffHighlight(language: string, code: any, gutter: any): string {
     return code
         .split(/\r?\n/g)
         .map((line: string, index: number) => {
-            var type;
-            if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(line)) {
+            let type;
+            let currentLine = line;
+
+            if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(currentLine)) {
                 type = 'chunk';
-            } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(line)) {
+            } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(currentLine)) {
                 type = 'header';
             } else {
-                type = PATCH_TYPES[line[0] as string] || 'null';
-                line = line.replace(/^[+\-! ]/, '');
+                type = PATCH_TYPES[currentLine[0]] || 'null';
+                currentLine = currentLine.replace(/^[+\-! ]/, '');
             }
 
             const g = gutter[index];
 
-            return `<span data-gutter="${g !== undefined ? g + 'x' : ''}" class="line-${type}">${
-                hljs.highlight(language, line).value
+            return `<span data-gutter="${g !== undefined ? `${g}x` : ''}" class="line-${type}">${
+                hljs.highlight(language, currentLine).value
             }</span>`;
         })
         .join('\n');
 }
 
-interface highlightProps {
+interface HighlightProps {
     language: string;
     code: string;
-    diff?: boolean;
-    gutter?: boolean;
-    etc?: boolean;
+    isDiff?: boolean;
+    gutter?: [];
+    isEtc?: boolean;
 }
 
-function highlight({ language, code, diff, gutter, etc }: highlightProps) {
-    if (diff) {
+function highlight({ language, code, isDiff, gutter, isEtc }: HighlightProps): string {
+    if (isDiff) {
         return diffHighlight(language, code, gutter);
     }
 
-    let hlCode = hljs.highlight(language, code).value;
+    const hlCode = hljs.highlight(language, code).value;
 
-    if (!etc) {
+    if (!isEtc) {
         return hlCode;
     }
 
-    var hc = hlCode.split(/\r?\n/g);
+    const hc = hlCode.split(/\r?\n/g);
     hc.splice(1, 0, '    ...');
     hc.splice(hc.length - 1, 0, '    ...');
 
     return hc.join('\n');
 }
 
-export default highlight;
+export { highlight };
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');
 
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index 258e5d225..5ea495036 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -31,5 +31,4 @@ const media = Object.keys(sizes).reduce((acc: any, label: string) => {
     return acc;
 }, {});
 
-export default media;
 export { colors, media };
-- 
cgit v1.2.3