diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/components')
-rw-r--r-- | packages/dev-tools-pages/ts/components/call_to_action.tsx | 40 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/components/code.tsx | 3 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/components/compiler.tsx | 12 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/components/footer.tsx | 13 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/components/header.tsx | 2 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/components/hero.tsx | 6 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/components/trace.tsx | 13 |
7 files changed, 68 insertions, 21 deletions
diff --git a/packages/dev-tools-pages/ts/components/call_to_action.tsx b/packages/dev-tools-pages/ts/components/call_to_action.tsx new file mode 100644 index 000000000..3805a7c8c --- /dev/null +++ b/packages/dev-tools-pages/ts/components/call_to_action.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { ContextInterface, ThemeContext } from 'ts/context'; + +import { Button } from './button'; + +const CallToAction: React.StatelessComponent<ContextInterface> = ({ children }) => ( + <ThemeContext.Consumer> + {({ docLink }: ContextInterface) => ( + <StyledCallToAction> + <CallToActionContainer> + <Button as="a" href={docLink} target="_blank" large={true}> + Read the Docs + </Button> + </CallToActionContainer> + {children} + </StyledCallToAction> + )} + </ThemeContext.Consumer> +); + +const StyledCallToAction = styled.section` + text-align: center; + padding-top: 0; + padding-bottom: 1rem; + padding-left: 2.5rem; + padding-right: 2.5rem; + min-height: min-content; + max-height: 37.5rem; + height: 20vh; + position: relative; +`; + +const CallToActionContainer = styled.div` + margin: 0 auto; + max-width: 590px; +`; + +export { CallToAction }; diff --git a/packages/dev-tools-pages/ts/components/code.tsx b/packages/dev-tools-pages/ts/components/code.tsx index c4f9cee24..0f7d6a0cd 100644 --- a/packages/dev-tools-pages/ts/components/code.tsx +++ b/packages/dev-tools-pages/ts/components/code.tsx @@ -139,7 +139,6 @@ class Code extends React.Component<CodeProps, CodeState> { public render(): React.ReactNode { const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props; const { hlCode } = this.state; - return ( <Container> <Base language={language} isDiff={isDiff} isLight={isLight}> @@ -157,7 +156,7 @@ class Code extends React.Component<CodeProps, CodeState> { <StyledCopyInput readOnly={true} aria-hidden="true" ref={this._code} value={children} /> ) : null} </Base> - {navigator.userAgent !== 'ReactSnap' && canCopy ? ( + {canCopy ? ( <Button onClick={this._handleCopyAsync.bind(this)}>{this.state.didCopy ? 'Copied' : 'Copy'}</Button> ) : null} </Container> diff --git a/packages/dev-tools-pages/ts/components/compiler.tsx b/packages/dev-tools-pages/ts/components/compiler.tsx index 694a535dd..c00e3a2b9 100644 --- a/packages/dev-tools-pages/ts/components/compiler.tsx +++ b/packages/dev-tools-pages/ts/components/compiler.tsx @@ -45,7 +45,7 @@ const Dd = styled.dd` const cards = [ { - title: 'A Project-centric', + title: 'Project-centric', body: ( <React.Fragment> Compiles an entire project instead of only individual <InlineCode isAlt={true}>.sol</InlineCode> files. @@ -54,7 +54,7 @@ const cards = [ }, { title: 'Incremental builds', - body: 'Recompiles your smart contracts after they have changed', + body: 'Only recompiles smart contracts that have been modified.', }, { title: 'Customizable artifacts', @@ -63,12 +63,16 @@ const cards = [ }, { title: 'Seamless', - body: 'Fetches and caches the required compiler binaries.', + body: 'Fetches and caches the required compiler binaries for the Solidity versions you use.', }, { title: 'Versioning', body: - 'Compiles each contract with the version specified at the top of its file (sol-compiler even supports version ranges!).', + 'Compiles each contract with the Solidity version specified at the top of its file (it even supports version ranges!).', + }, + { + title: 'Watch mode', + body: 'Have your contracts instantly recompile on file save.', }, ]; diff --git a/packages/dev-tools-pages/ts/components/footer.tsx b/packages/dev-tools-pages/ts/components/footer.tsx index 04fd9b88e..e6229b4b1 100644 --- a/packages/dev-tools-pages/ts/components/footer.tsx +++ b/packages/dev-tools-pages/ts/components/footer.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { context as compiler } from 'ts/context/compiler'; -import { context as cov } from 'ts/context/cov'; +import { context as coverage } from 'ts/context/coverage'; import { context as profiler } from 'ts/context/profiler'; import { context as trace } from 'ts/context/trace'; import MainIcon from 'ts/icons/logos/0x.svg'; @@ -12,7 +12,7 @@ import { media } from 'ts/variables'; import { Container } from './container'; import { Alpha, Beta } from './typography'; -const tools = [trace, cov, compiler, profiler]; +const tools = [trace, coverage, compiler, profiler]; const Footer: React.StatelessComponent<{}> = () => ( <StyledFooter> @@ -20,9 +20,9 @@ const Footer: React.StatelessComponent<{}> = () => ( <Top> <Alpha>Other tools by 0x</Alpha> <List> - {_.map(tools, ({ title, subtitle, icon }) => ( + {_.map(tools, ({ title, subtitle, icon, name }) => ( <ListItem key={title}> - <ListLink href="#"> + <ListLink href={`https://sol-${name}.com`}> <Icon as={icon as 'svg'} /> <div> <Beta>{title}</Beta> @@ -37,6 +37,11 @@ const Footer: React.StatelessComponent<{}> = () => ( <Icon as={MainIcon} /> <Small> 0x is an open, permissionless protocol allowing for tokens to be traded on the Ethereum blockchain. + Interested in building tools like this with the 0x core team? Apply directly at{' '} + <a href="https://0x.org/careers" target="_blank"> + 0x.org/careers + </a>{' '} + — we'd be excited to hear from you! </Small> </Media> </Container> diff --git a/packages/dev-tools-pages/ts/components/header.tsx b/packages/dev-tools-pages/ts/components/header.tsx index 2787692c1..4d3a8685c 100644 --- a/packages/dev-tools-pages/ts/components/header.tsx +++ b/packages/dev-tools-pages/ts/components/header.tsx @@ -17,7 +17,7 @@ const Header: React.StatelessComponent<{}> = () => ( <Title>{title}</Title> </LogoMark> - <Link as="a" href="https://0xproject.com/"> + <Link as="a" href="https://0x.org/" target="_blank"> Built by 0x </Link> </Container> diff --git a/packages/dev-tools-pages/ts/components/hero.tsx b/packages/dev-tools-pages/ts/components/hero.tsx index cdcad6982..e2977f3f2 100644 --- a/packages/dev-tools-pages/ts/components/hero.tsx +++ b/packages/dev-tools-pages/ts/components/hero.tsx @@ -9,16 +9,16 @@ import { Beta } from './typography'; const Hero: React.StatelessComponent<ContextInterface> = ({ children }) => ( <ThemeContext.Consumer> - {({ subtitle, tagline }: ContextInterface) => ( + {({ subtitle, tagline, docLink }: ContextInterface) => ( <StyledHero> <HeroContainer> <Subtitle>{subtitle}</Subtitle> <Tagline as="p">{tagline}</Tagline> - <Button as="a" href="#" large={true}> + <Button as="a" href={docLink} target="_blank" large={true}> Read the Docs </Button> </HeroContainer> - {navigator.userAgent !== 'ReactSnap' ? children : null} + {children} </StyledHero> )} </ThemeContext.Consumer> diff --git a/packages/dev-tools-pages/ts/components/trace.tsx b/packages/dev-tools-pages/ts/components/trace.tsx index f41dac9b7..81f6db0ab 100644 --- a/packages/dev-tools-pages/ts/components/trace.tsx +++ b/packages/dev-tools-pages/ts/components/trace.tsx @@ -25,7 +25,7 @@ const Trace: React.StatelessComponent<{}> = () => ( 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> + <Code isLight={true}>Error: VM Exception while processing transaction: revert</Code> </Breakout> <List> @@ -44,8 +44,8 @@ const Trace: React.StatelessComponent<{}> = () => ( <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. + Working within a large code-base that contains many smart contracts, finding the + failing line of code quickly becomes a daunting task. </p> </Copy> <Icon as={TimeConsuming} /> @@ -78,8 +78,8 @@ const Trace: React.StatelessComponent<{}> = () => ( <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. + It shows you the exact location of the offending line and where it was called + from. </p> </Copy> <Icon as={ExactLocation} /> @@ -90,8 +90,7 @@ const Trace: React.StatelessComponent<{}> = () => ( <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. + failed on line X of contract Y", drastically improves the developer experience. </p> </Copy> <Icon as={TimeSaving} /> |