fix linting + code syntax for statless components

23 files changed, 440 insertions, 464 deletions

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 };