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