aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/dev-tools-pages/ts/components/Trace.tsx150
-rw-r--r--packages/dev-tools-pages/ts/components/Typography.tsx6
-rw-r--r--packages/dev-tools-pages/ts/icons/exact-location.svg1
-rw-r--r--packages/dev-tools-pages/ts/icons/no-location.svg1
-rw-r--r--packages/dev-tools-pages/ts/icons/time-consuming.svg1
-rw-r--r--packages/dev-tools-pages/ts/icons/time-saving.svg1
-rw-r--r--packages/dev-tools-pages/ts/pages/Trace.tsx2
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">