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