diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/pages')
-rw-r--r-- | packages/dev-tools-pages/ts/pages/Base.tsx | 28 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/pages/Compiler.tsx | 53 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/pages/Cov.tsx | 53 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/pages/Profiler.tsx | 53 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/pages/Trace.tsx | 53 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/pages/landing.tsx | 27 |
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> - ); - } -} |