aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-10-18 20:08:46 +0800
committerAugust Skare <post@augustskare.no>2018-10-18 20:08:46 +0800
commitac60d459696b8a68caf65a345626f47c632fb2d0 (patch)
tree0f2dd0bca19317d0176675eb7ca5eca420d9e9dd
parentafa52e280c7e36b625e95b949f1f12933a5ab9dc (diff)
downloaddexon-0x-contracts-ac60d459696b8a68caf65a345626f47c632fb2d0.tar.gz
dexon-0x-contracts-ac60d459696b8a68caf65a345626f47c632fb2d0.tar.zst
dexon-0x-contracts-ac60d459696b8a68caf65a345626f47c632fb2d0.zip
compiler component in compiler view
-rw-r--r--packages/dev-tools-pages/ts/components/Compiler.tsx76
-rw-r--r--packages/dev-tools-pages/ts/pages/Compiler.tsx2
2 files changed, 78 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
new file mode 100644
index 000000000..6dcfda70c
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import InlineCode from './InlineCode';
+
+const Cards = styled.dl`
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
+ align-items: start;
+ grid-gap: 1.25rem;
+ margin-top: 0;
+ margin-bottom: 0;
+`;
+
+const Card = styled.div`
+ background-color: #f1f4f5;
+ padding: 3.125rem;
+ padding-bottom: 2.5rem;
+`;
+
+const Dt = styled.dt`
+ font-weight: 500;
+ display: inline;
+ ::after {
+ content: '. ';
+ }
+`;
+
+const Dd = styled.dd`
+ display: inline;
+ margin-left: 0;
+`;
+
+const cards = [
+ {
+ title: 'Project-centric',
+ body: (
+ <React.Fragment>
+ It can compile an entire project instead of only individual <InlineCode>.sol</InlineCode> files
+ </React.Fragment>
+ ),
+ },
+ {
+ title: 'Incremental builds',
+ body: 'It only recompiles your smart contracts after they have changed.',
+ },
+ {
+ title: 'Customizable artifacts',
+ body:
+ 'It allows you to store only the required compiler output in your artifacts and have complete control over your bundle size.',
+ },
+ {
+ title: 'Seamless',
+ body: 'It auto-fetches and caches the required compiler binaries.',
+ },
+ {
+ title: 'Versioning',
+ body:
+ 'It compiles each contract with the version specified at the top of its file (it even supports version ranges!).',
+ },
+];
+
+function Compiler() {
+ return (
+ <Cards>
+ {cards.map(card => (
+ <Card key={card.title.split(' ').join('-')}>
+ <Dt>{card.title}</Dt>
+ <Dd>{card.body}</Dd>
+ </Card>
+ ))}
+ </Cards>
+ );
+}
+
+export default Compiler;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 2a91c465f..79c9f52e4 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -9,11 +9,13 @@ 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 CompilerComponent from 'ts/components/Compiler';
function Compiler(props: any) {
return (
<Base context={context}>
<Container>
+ <CompilerComponent />
<Main>
<ContentBlock title="Required steps">
<List items={['Step 1', 'Step 2']} />