initial commit

6 files changed, 240 insertions, 27 deletions

diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/pages/Base.tsx
new file mode 100644
index 000000000..7bb578611
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Base.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import ThemeContext from 'ts/context';
+import GlobalStyles from 'ts/globalStyles';
+import MetaTags from 'ts/components/MetaTags';
+import Header from 'ts/components/Header';
+import Hero from 'ts/components/Hero';
+import Footer from 'ts/components/Footer';
+
+interface BaseProps {
+    context: any;
+    children: React.ReactNode;
+}
+
+function Base(props: BaseProps) {
+    return (
+        <ThemeContext.Provider value={props.context}>
+            <MetaTags />
+            <GlobalStyles />
+            <Header />
+            <Hero />
+            {props.children}
+            <Footer />
+        </ThemeContext.Provider>
+    );
+}
+
+export default Base;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
new file mode 100644
index 000000000..2a91c465f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/compiler';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Compiler(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Compiler;
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
new file mode 100644
index 000000000..a0acfb869
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/cov';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Cov(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Cov;
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
new file mode 100644
index 000000000..ad2219c5e
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/profiler';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Profiler(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Profiler;
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
new file mode 100644
index 000000000..797ec6f49
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/trace';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Trace(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Trace;
diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx
deleted file mode 100644
index a70a9de46..000000000
--- a/packages/dev-tools-pages/ts/pages/landing.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Button } from '../components/ui/button';
-import { Container } from '../components/ui/container';
-import { Text } from '../components/ui/text';
-
-interface LandingProps {}
-
-interface LandingState {}
-
-export class Landing extends React.Component<LandingProps, LandingState> {
-    constructor(props: LandingProps) {
-        super(props);
-    }
-    public render(): React.ReactNode {
-        return (
-            <Container id="landing" className="clearfix">
-                <Container className="mx-auto p4" width="200px">
-                    <Button>
-                        <Text fontColor="white">Click me!</Text>
-                    </Button>
-                </Container>
-            </Container>
-        );
-    }
-}