diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Trace.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Trace.tsx | 217 |
1 files changed, 217 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx new file mode 100644 index 000000000..2e00ab9e9 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -0,0 +1,217 @@ +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 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 + require( + isValidSignature( + hash, + signerAddress, + signature + ), + "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> + ); +} + +const StyledSection = + styled.section < + TraceProps > + ` + max-width: 90rem; + margin: 0 auto; + background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%); + overflow: hidden; + ${media.large` + background: none + padding-top: 0; + padding-bottom: 0; + `}; +`; + +const Wrapper = styled(Container)` + display: flex; + + ${Alpha} { + padding-bottom: 2.5rem; + + ${media.small`padding-bottom: 1.875rem;`}; + } + + ${media.large` + display: block; + width: 100%; + `}; +`; + +const Block = + styled.div < + TraceProps > + ` + width: 50%; + background: ${props => (props.background ? props.background : colors.black)}; + color: ${props => (props.background ? 'inherit' : colors.white)}; + padding-top: 6.25rem; + padding-bottom: 5.25rem; + + :first-of-type { + padding-right: 6.25rem; + } + :last-of-type { + padding-left: 6.25rem; + } + + ${media.xlarge` + :first-of-type { + padding-right: 2.5rem; + } + :last-of-type { + padding-left: 2.5rem; + } + `} + ${media.large` + width: 100%; + padding: 2.5rem; + `} + + ${media.small` + padding-left: 1.875rem; + padding-right: 1.875rem; + `}; +`; + +const MainCopy = styled(Lead)` + margin-bottom: 3.1875rem; + ${media.small` + margin-bottom: 1.125rem; + `}; +`; + +const List = styled.ul` + margin-top: 6.25rem; + margin-bottom: 0; + padding: 0; + + ${media.small`margin-top: 3.4375rem;`}; +`; + +const Item = styled.li` + display: flex; + align-items: center; + + :not(:last-child) { + margin-bottom: 4.4375rem; + + ${media.small`margin-bottom: 3.4375rem;`}; + } +`; + +const Copy = styled.div<{ dark?: boolean; }>` + margin-right: 5.875rem; + ${props => props.dark && ` + p { + color: #ccc; + } + `} + + ${media.small`margin-right: 2.0625rem;`}; +`; + +const Icon = styled.div` + flex-shrink: 0; +`; + +export default withContext(Trace); |