diff options
7 files changed, 161 insertions, 1 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..50bbd449a --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -0,0 +1,150 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; +import { Alpha, Beta, Gamma } from './Typography'; +import Container from './Container'; +import Code from './Code'; + +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 as="p"> + 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> + <Code>Error: VM Exception while processing transaction: rever</Code> + + <List> + <Item> + <Copy> + <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> + <NoLocation /> + </Item> + + <Item> + <Copy> + <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> + <TimeConsuming /> + </Item> + </List> + </Block> + + <Block background={colors.secondary}> + <Alpha>The Fix</Alpha> + <MainCopy as="p"> + Sol-trace will give you full stack traces, including contract names, line numbers and code + snippets, every time you encounter an error. + </MainCopy> + <Code>Error: VM Exception while processing transaction: rever</Code> + + <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> + <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 linen X of contract Y", it drastically improves the developer experience. + </p> + </Copy> + <TimeSaving /> + </Item> + </List> + </Block> + </Wrapper> + </StyledSection> + ); +} + +const StyledSection = + styled.section < + TraceProps > + ` + max-width: 90rem; + margin: 0 auto; + background: linear-gradient(to right, #000 50%, ${props => props.background} 50%); + padding-top: 6.25rem; + padding-bottom: 5.25rem; +`; + +const Wrapper = styled(Container)` + display: flex; + + ${Alpha} { + padding-bottom: 2.5rem; + } +`; + +const Block = + styled.div < + TraceProps > + ` + width: 50%; + background: ${props => (props.background ? props.background : '#000')}; + color: ${props => (props.background ? 'inherit' : '#fff')}; + + :first-of-type { + padding-right: 6.25rem; + } + :last-of-type { + padding-left: 6.25rem; + } +`; + +const MainCopy = styled(Beta)` + margin-bottom: 3.1875rem; +`; + +const List = styled.ul` + margin-top: 6.25rem; + margin-bottom: 0; + padding: 0; +`; + +const Item = styled.li` + display: flex; + align-items: center; + margin-bottom: 4.4375rem; +`; + +const Copy = styled.div` + max-width: 20rem; + margin-right: 5.875rem; +`; + +export default withContext(Trace); diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx index 3ce18df3b..9251d31b4 100644 --- a/packages/dev-tools-pages/ts/components/Typography.tsx +++ b/packages/dev-tools-pages/ts/components/Typography.tsx @@ -10,8 +10,12 @@ const Beta = styled.h3` line-height: 1.65; `; +const Gamma = styled.h4` + font-size: 1rem; +`; + const Small = styled.p` font-size: 0.875rem; `; -export { Alpha, Beta, Small }; +export { Alpha, Beta, Gamma, Small }; diff --git a/packages/dev-tools-pages/ts/icons/exact-location.svg b/packages/dev-tools-pages/ts/icons/exact-location.svg new file mode 100644 index 000000000..4934cad58 --- /dev/null +++ b/packages/dev-tools-pages/ts/icons/exact-location.svg @@ -0,0 +1 @@ +<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M80 33.6772c0 5.1116-1.8855 10.4454-4.7935 15.617-2.9036 5.1637-6.7886 10.0987-10.6962 14.3941-3.9047 4.2922-7.8128 7.9248-10.746 10.4851-1.4659 1.2795-2.6866 2.2897-3.5393 2.9788-.2841.2296-.5273.4235-.725.5798-.1977-.1563-.4409-.3502-.725-.5798-.8527-.6891-2.0734-1.6993-3.5393-2.9788-2.9332-2.5603-6.8413-6.1929-10.746-10.4851-3.9076-4.2954-7.7926-9.2304-10.6962-14.3941C20.8855 44.1226 19 38.7888 19 33.6772 19 16.7294 32.6606 3 49.5 3 66.3394 3 80 16.7294 80 33.6772z" stroke="#fff" stroke-width="2"/><path d="M50 98V55M27.5 77H73" stroke="#000" stroke-width="2"/><circle cx="50" cy="34" r="10" stroke="#fff" stroke-width="2"/></svg>
\ No newline at end of file diff --git a/packages/dev-tools-pages/ts/icons/no-location.svg b/packages/dev-tools-pages/ts/icons/no-location.svg new file mode 100644 index 000000000..7df008ee1 --- /dev/null +++ b/packages/dev-tools-pages/ts/icons/no-location.svg @@ -0,0 +1 @@ +<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".5" d="M88.2609 41.4937c0 6.4322-2.3631 13.1253-5.9866 19.5928-3.6191 6.4597-8.4581 12.6276-13.3196 17.9909-4.8586 5.3602-9.7205 9.8958-13.3691 13.0921-1.8236 1.5975-3.3423 2.8589-4.4037 3.7198-.4285.3475-.7823.6297-1.0515.8423-.2692-.2126-.623-.4948-1.0514-.8423-1.0614-.8609-2.5802-2.1223-4.4038-3.7198-3.6486-3.1963-8.5105-7.7319-13.3691-13.0921-4.8614-5.3633-9.7004-11.5312-13.3196-17.9909C14.363 54.619 12 47.9259 12 41.4937 12 20.2255 29.0803 3 50.1304 3c21.0502 0 38.1305 17.2255 38.1305 38.4937z" stroke="#CDD8FF" stroke-width="2"/><circle opacity=".5" cx="50" cy="42" r="18" stroke="#CDD8FF" stroke-width="2"/><path d="M22.5 69.5L78 14" stroke="#fff" stroke-width="2"/></svg>
\ No newline at end of file diff --git a/packages/dev-tools-pages/ts/icons/time-consuming.svg b/packages/dev-tools-pages/ts/icons/time-consuming.svg new file mode 100644 index 000000000..330723394 --- /dev/null +++ b/packages/dev-tools-pages/ts/icons/time-consuming.svg @@ -0,0 +1 @@ +<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity=".5" cx="50" cy="50" r="42" stroke="#CDD8FF" stroke-width="2"/><path opacity=".5" d="M34.6621 79.4343c6.9918 3.5363 15.2613 4.61 23.4252 2.4225 8.1639-2.1875 14.7886-7.2521 19.0755-13.8105M33.8711 58c2.9454 5.9269 9.0615 10 16.129 10 1.5538 0 3.0617-.1969 4.5-.5671M30 25.0185C35.4784 20.6269 42.4324 18 50 18c13.4295 0 24.9268 8.2727 29.6739 20" stroke="#CDD8FF" stroke-width="2"/><path d="M35 64l17.5-12.5L37.5 9" stroke="#fff" stroke-width="2"/></svg>
\ No newline at end of file diff --git a/packages/dev-tools-pages/ts/icons/time-saving.svg b/packages/dev-tools-pages/ts/icons/time-saving.svg new file mode 100644 index 000000000..935b1204e --- /dev/null +++ b/packages/dev-tools-pages/ts/icons/time-saving.svg @@ -0,0 +1 @@ +<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="49.9092" cy="49.7499" r="40.4824" transform="rotate(45 49.9092 49.7499)" stroke="#fff" stroke-width="2"/><path d="M21.5991 79.4236l8.5269-8.5269M71.3965 29.6267l8.5268-8.5268M69.6914 70.8967l8.5269 8.5269M20.5761 21.7819l9.2091 9.2091M9.01002 50.4736H21.0688M79.4334 50.4736h12.0588M49.0449 78.45v12.0588M49.0449 8.99112V22.0146" stroke="#fff" stroke-width="2"/><path d="M35.584 36.789l14.3252 14.3252 30.0146-30.0146" stroke="#000" stroke-width="2"/></svg>
\ No newline at end of file diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx index 797ec6f49..5dddf027e 100644 --- a/packages/dev-tools-pages/ts/pages/Trace.tsx +++ b/packages/dev-tools-pages/ts/pages/Trace.tsx @@ -9,10 +9,12 @@ import { Tabs, TabBlock } from 'ts/components/Tabs'; import Code from 'ts/components/Code'; import InlineCode from 'ts/components/InlineCode'; import List from 'ts/components/List'; +import TraceComponent from 'ts/components/Trace'; function Trace(props: any) { return ( <Base context={context}> + <TraceComponent /> <Container> <Main> <ContentBlock title="Required steps"> |
