aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx11
-rw-r--r--packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx11
-rw-r--r--packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx11
-rw-r--r--packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx11
-rw-r--r--packages/dev-tools-pages/ts/components/Animations/index.tsx81
-rw-r--r--packages/dev-tools-pages/ts/components/Base.tsx33
-rw-r--r--packages/dev-tools-pages/ts/components/Breakout.tsx2
-rw-r--r--packages/dev-tools-pages/ts/components/Button.tsx16
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx122
-rw-r--r--packages/dev-tools-pages/ts/components/Compiler.tsx45
-rw-r--r--packages/dev-tools-pages/ts/components/Container.tsx4
-rw-r--r--packages/dev-tools-pages/ts/components/Content.tsx16
-rw-r--r--packages/dev-tools-pages/ts/components/ContentBlock.tsx15
-rw-r--r--packages/dev-tools-pages/ts/components/Footer.tsx90
-rw-r--r--packages/dev-tools-pages/ts/components/Header.tsx46
-rw-r--r--packages/dev-tools-pages/ts/components/Hero.tsx27
-rw-r--r--packages/dev-tools-pages/ts/components/InlineCode.tsx9
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx48
-rw-r--r--packages/dev-tools-pages/ts/components/List.tsx27
-rw-r--r--packages/dev-tools-pages/ts/components/Tabs.tsx51
-rw-r--r--packages/dev-tools-pages/ts/components/Trace.tsx204
-rw-r--r--packages/dev-tools-pages/ts/components/Typography.tsx1
-rw-r--r--packages/dev-tools-pages/ts/components/withContext.tsx23
-rw-r--r--packages/dev-tools-pages/ts/context/compiler.tsx2
-rw-r--r--packages/dev-tools-pages/ts/context/cov.tsx2
-rw-r--r--packages/dev-tools-pages/ts/context/index.tsx11
-rw-r--r--packages/dev-tools-pages/ts/context/profiler.tsx2
-rw-r--r--packages/dev-tools-pages/ts/context/trace.tsx2
-rw-r--r--packages/dev-tools-pages/ts/globalStyles.tsx21
-rw-r--r--packages/dev-tools-pages/ts/globals.d.ts4
-rw-r--r--packages/dev-tools-pages/ts/highlight.tsx46
-rw-r--r--packages/dev-tools-pages/ts/pages/Compiler.tsx177
-rw-r--r--packages/dev-tools-pages/ts/pages/Cov.tsx186
-rw-r--r--packages/dev-tools-pages/ts/pages/Profiler.tsx181
-rw-r--r--packages/dev-tools-pages/ts/pages/Trace.tsx148
-rw-r--r--packages/dev-tools-pages/ts/variables.tsx1
36 files changed, 844 insertions, 843 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 };
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 };