diff options
Diffstat (limited to 'packages/dev-tools-pages/ts')
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Intro.tsx | 47 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/pages/Profiler.tsx | 8 |
2 files changed, 55 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx new file mode 100644 index 000000000..c16c888b7 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Intro.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Alpha, Beta } from './Typography'; + +const Main = styled.div` + background-color: #f1f4f5; + padding: 6.25rem; + display: flex; + justify-content: space-between; +`; + +const Title = styled(Alpha)` + margin-bottom: 2.5rem; +`; + +const Content = styled.div` + max-width: 25.9375rem; + + display: flex; + flex-direction: column; +`; + +const Code = styled.div` + background-color: #e9eced; + width: 520px; + height: 350px; +`; + +interface IntroProps { + title: string; + children: React.ReactNode; +} + +function Intro(props: IntroProps) { + return ( + <Main> + <Content> + <Title>{props.title}</Title> + <Beta as="div">{props.children}</Beta> + </Content> + <Code /> + </Main> + ); +} + +export default Intro; diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx index ad2219c5e..d129d6427 100644 --- a/packages/dev-tools-pages/ts/pages/Profiler.tsx +++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx @@ -9,11 +9,19 @@ 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 Intro from 'ts/components/Intro'; function Profiler(props: any) { return ( <Base context={context}> <Container> + <Intro title="ra"> + <p> + Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider. + This will help you find unexpected inefficiencies in parts of your smart contract, and take a + data-driven approach to optimizing it. + </p> + </Intro> <Main> <ContentBlock title="Required steps"> <List items={['Step 1', 'Step 2']} /> |