From 30f7f83573c9254de336c3c2fc7297188d47af15 Mon Sep 17 00:00:00 2001 From: August Skare Date: Thu, 18 Oct 2018 15:25:08 +0200 Subject: added trace component to trace view --- packages/dev-tools-pages/ts/components/Trace.tsx | 150 +++++++++++++++++++++ .../dev-tools-pages/ts/components/Typography.tsx | 6 +- .../dev-tools-pages/ts/icons/exact-location.svg | 1 + packages/dev-tools-pages/ts/icons/no-location.svg | 1 + .../dev-tools-pages/ts/icons/time-consuming.svg | 1 + packages/dev-tools-pages/ts/icons/time-saving.svg | 1 + packages/dev-tools-pages/ts/pages/Trace.tsx | 2 + 7 files changed, 161 insertions(+), 1 deletion(-) create mode 100644 packages/dev-tools-pages/ts/components/Trace.tsx create mode 100644 packages/dev-tools-pages/ts/icons/exact-location.svg create mode 100644 packages/dev-tools-pages/ts/icons/no-location.svg create mode 100644 packages/dev-tools-pages/ts/icons/time-consuming.svg create mode 100644 packages/dev-tools-pages/ts/icons/time-saving.svg 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 ( + + + + The Issue + + 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. + + Error: VM Exception while processing transaction: rever + + + + + No location +

+ The error basically says "anything could have gone wrong here", which keeps you + completely in the dark about its exact location. +

+ + + + + + + Time-consuming +

+ Working with a large code-base that contains hundreds of smart contracts, finding + the failing line of code quickly becomes a daunting task. +

+ + + + + + + + The Fix + + Sol-trace will give you full stack traces, including contract names, line numbers and code + snippets, every time you encounter an error. + + Error: VM Exception while processing transaction: rever + + + + + Exact location +

+ It shows you the exact location of the specific code linen and where it was called + from. +

+ + + + + + + Time-saving +

+ 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. +

+ + + + + + + + ); +} + +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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 ( +
-- cgit v1.2.3