added trace component to trace view

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">