aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx47
-rw-r--r--packages/dev-tools-pages/ts/pages/Profiler.tsx8
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']} />