aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/dev-tools-pages/.gitignore1
-rw-r--r--packages/dev-tools-pages/less/all.less0
-rw-r--r--packages/dev-tools-pages/package.json15
-rw-r--r--packages/dev-tools-pages/public/css/basscss_responsive_custom.css85
-rw-r--r--packages/dev-tools-pages/public/css/basscss_responsive_margin.css453
-rw-r--r--packages/dev-tools-pages/public/css/basscss_responsive_padding.css134
-rw-r--r--packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css35
-rw-r--r--packages/dev-tools-pages/public/favicons/compiler.icobin0 -> 6518 bytes
-rw-r--r--packages/dev-tools-pages/public/favicons/cov.icobin0 -> 6518 bytes
-rw-r--r--packages/dev-tools-pages/public/favicons/profiler.icobin0 -> 6518 bytes
-rw-r--r--packages/dev-tools-pages/public/favicons/trace.icobin0 -> 6518 bytes
-rwxr-xr-xpackages/dev-tools-pages/public/images/favicon/favicon-2-16x16.pngbin684 -> 0 bytes
-rwxr-xr-xpackages/dev-tools-pages/public/images/favicon/favicon-2-32x32.pngbin1567 -> 0 bytes
-rwxr-xr-xpackages/dev-tools-pages/public/images/favicon/favicon.icobin5430 -> 0 bytes
-rw-r--r--packages/dev-tools-pages/public/index.html13
-rw-r--r--packages/dev-tools-pages/ts/components/Button.tsx26
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx114
-rw-r--r--packages/dev-tools-pages/ts/components/Container.tsx9
-rw-r--r--packages/dev-tools-pages/ts/components/ContentBlock.tsx47
-rw-r--r--packages/dev-tools-pages/ts/components/Footer.tsx91
-rw-r--r--packages/dev-tools-pages/ts/components/Header.tsx59
-rw-r--r--packages/dev-tools-pages/ts/components/Hero.tsx37
-rw-r--r--packages/dev-tools-pages/ts/components/InlineCode.tsx8
-rw-r--r--packages/dev-tools-pages/ts/components/List.tsx33
-rw-r--r--packages/dev-tools-pages/ts/components/Main.tsx33
-rw-r--r--packages/dev-tools-pages/ts/components/MetaTags.tsx28
-rw-r--r--packages/dev-tools-pages/ts/components/Tabs.tsx79
-rw-r--r--packages/dev-tools-pages/ts/components/Typography.tsx17
-rw-r--r--packages/dev-tools-pages/ts/components/meta_tags.tsx25
-rw-r--r--packages/dev-tools-pages/ts/components/ui/button.tsx59
-rw-r--r--packages/dev-tools-pages/ts/components/ui/container.tsx55
-rw-r--r--packages/dev-tools-pages/ts/components/ui/text.tsx74
-rw-r--r--packages/dev-tools-pages/ts/components/withContext.tsx23
-rw-r--r--packages/dev-tools-pages/ts/context/compiler.tsx14
-rw-r--r--packages/dev-tools-pages/ts/context/cov.tsx14
-rw-r--r--packages/dev-tools-pages/ts/context/index.tsx5
-rw-r--r--packages/dev-tools-pages/ts/context/profiler.tsx14
-rw-r--r--packages/dev-tools-pages/ts/context/trace.tsx14
-rw-r--r--packages/dev-tools-pages/ts/globalStyles.tsx76
-rw-r--r--packages/dev-tools-pages/ts/globals.d.ts10
-rw-r--r--packages/dev-tools-pages/ts/icons/logos/0x.svg1
-rw-r--r--packages/dev-tools-pages/ts/icons/logos/compiler.svg3
-rw-r--r--packages/dev-tools-pages/ts/icons/logos/cov.svg3
-rw-r--r--packages/dev-tools-pages/ts/icons/logos/profiler.svg3
-rw-r--r--packages/dev-tools-pages/ts/icons/logos/trace.svg1
-rw-r--r--packages/dev-tools-pages/ts/index.tsx42
-rw-r--r--packages/dev-tools-pages/ts/pages/Base.tsx28
-rw-r--r--packages/dev-tools-pages/ts/pages/Compiler.tsx53
-rw-r--r--packages/dev-tools-pages/ts/pages/Cov.tsx53
-rw-r--r--packages/dev-tools-pages/ts/pages/Profiler.tsx53
-rw-r--r--packages/dev-tools-pages/ts/pages/Trace.tsx53
-rw-r--r--packages/dev-tools-pages/ts/pages/landing.tsx27
-rw-r--r--packages/dev-tools-pages/ts/utils/utils.ts32
-rw-r--r--packages/dev-tools-pages/webpack.config.js6
54 files changed, 1050 insertions, 1008 deletions
diff --git a/packages/dev-tools-pages/.gitignore b/packages/dev-tools-pages/.gitignore
new file mode 100644
index 000000000..6446c8579
--- /dev/null
+++ b/packages/dev-tools-pages/.gitignore
@@ -0,0 +1 @@
+/public/fonts \ No newline at end of file
diff --git a/packages/dev-tools-pages/less/all.less b/packages/dev-tools-pages/less/all.less
deleted file mode 100644
index e69de29bb..000000000
--- a/packages/dev-tools-pages/less/all.less
+++ /dev/null
diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json
index 4d7f03add..8fb4bed7b 100644
--- a/packages/dev-tools-pages/package.json
+++ b/packages/dev-tools-pages/package.json
@@ -17,32 +17,35 @@
"license": "Apache-2.0",
"dependencies": {
"@0xproject/react-shared": "^1.0.15",
- "basscss": "^8.0.3",
- "bowser": "^1.9.3",
+ "highlight.js": "^9.13.1",
"less": "^2.7.2",
- "lodash": "^4.17.5",
"polished": "^1.9.2",
"react": "^16.5.2",
- "react-document-title": "^2.0.3",
"react-dom": "^16.5.2",
"react-helmet": "^5.2.0",
- "styled-components": "^4.0.0-beta.9-macro2"
+ "react-tabs": "^2.3.0",
+ "styled-components": "^4.0.2",
+ "styled-normalize": "^8.0.1"
},
"devDependencies": {
+ "@reach/router": "^1.2.1",
"@types/lodash": "4.14.104",
"@types/node": "*",
+ "@types/reach__router": "^1.2.0",
"@types/react": "^16.4.2",
"@types/react-dom": "^16.0.7",
"@types/react-helmet": "^5.0.6",
"@types/react-router-dom": "^4.0.4",
+ "@types/react-tabs": "^2.3.0",
"@types/react-tap-event-plugin": "0.0.30",
- "@types/styled-components": "^4.0.0",
+ "@types/styled-components": "^4.0.1",
"awesome-typescript-loader": "^5.2.1",
"copyfiles": "^2.0.0",
"css-loader": "0.23.x",
"less-loader": "^4.1.0",
"make-promises-safe": "^1.1.0",
"raw-loader": "^0.5.1",
+ "react-svg-loader": "^2.1.0",
"shx": "^0.2.2",
"source-map-loader": "^0.2.4",
"style-loader": "0.23.x",
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_custom.css b/packages/dev-tools-pages/public/css/basscss_responsive_custom.css
deleted file mode 100644
index 5f8bd9117..000000000
--- a/packages/dev-tools-pages/public/css/basscss_responsive_custom.css
+++ /dev/null
@@ -1,85 +0,0 @@
-/* Custom Basscss Responsive Utilities */
-
-@media (max-width: 52em) {
- .sm-center {
- text-align: center;
- }
- .sm-align-middle {
- vertical-align: middle;
- }
- .sm-align-top {
- vertical-align: top;
- }
- .sm-left-align {
- text-align: left;
- }
- .sm-right-align {
- text-align: right;
- }
- .sm-table-cell {
- display: table-cell;
- }
- .sm-mx-auto {
- margin-left: auto;
- margin-right: auto;
- }
- .sm-right {
- float: right;
- }
-}
-
-@media (min-width: 52em) {
- .md-center {
- text-align: center;
- }
- .md-align-middle {
- vertical-align: middle;
- }
- .md-align-top {
- vertical-align: top;
- }
- .md-left-align {
- text-align: left;
- }
- .md-right-align {
- text-align: right;
- }
- .md-table-cell {
- display: table-cell;
- }
- .md-mx-auto {
- margin-left: auto;
- margin-right: auto;
- }
- .md-right {
- float: right;
- }
-}
-
-@media (min-width: 64em) {
- .lg-center {
- text-align: center;
- }
- .lg-align-middle {
- vertical-align: middle;
- }
- .lg-align-top {
- vertical-align: top;
- }
- .lg-left-align {
- text-align: left;
- }
- .lg-right-align {
- text-align: right;
- }
- .lg-table-cell {
- display: table-cell;
- }
- .lg-mx-auto {
- margin-left: auto;
- margin-right: auto;
- }
- .lg-right {
- float: right;
- }
-}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_margin.css b/packages/dev-tools-pages/public/css/basscss_responsive_margin.css
deleted file mode 100644
index c9f3e855c..000000000
--- a/packages/dev-tools-pages/public/css/basscss_responsive_margin.css
+++ /dev/null
@@ -1,453 +0,0 @@
-/* Basscss Responsive Margin */
-
-@media (max-width: 52em) {
- /* Modified by Fabio Berger to max-width from min-width */
-
- .sm-m0 {
- margin: 0;
- }
- .sm-mt0 {
- margin-top: 0;
- }
- .sm-mr0 {
- margin-right: 0;
- }
- .sm-mb0 {
- margin-bottom: 0;
- }
- .sm-ml0 {
- margin-left: 0;
- }
- .sm-mx0 {
- margin-left: 0;
- margin-right: 0;
- }
- .sm-my0 {
- margin-top: 0;
- margin-bottom: 0;
- }
-
- .sm-m1 {
- margin: 0.5rem;
- }
- .sm-mt1 {
- margin-top: 0.5rem;
- }
- .sm-mr1 {
- margin-right: 0.5rem;
- }
- .sm-mb1 {
- margin-bottom: 0.5rem;
- }
- .sm-ml1 {
- margin-left: 0.5rem;
- }
- .sm-mx1 {
- margin-left: 0.5rem;
- margin-right: 0.5rem;
- }
- .sm-my1 {
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- }
-
- .sm-m2 {
- margin: 1rem;
- }
- .sm-mt2 {
- margin-top: 1rem;
- }
- .sm-mr2 {
- margin-right: 1rem;
- }
- .sm-mb2 {
- margin-bottom: 1rem;
- }
- .sm-ml2 {
- margin-left: 1rem;
- }
- .sm-mx2 {
- margin-left: 1rem;
- margin-right: 1rem;
- }
- .sm-my2 {
- margin-top: 1rem;
- margin-bottom: 1rem;
- }
-
- .sm-m3 {
- margin: 2rem;
- }
- .sm-mt3 {
- margin-top: 2rem;
- }
- .sm-mr3 {
- margin-right: 2rem;
- }
- .sm-mb3 {
- margin-bottom: 2rem;
- }
- .sm-ml3 {
- margin-left: 2rem;
- }
- .sm-mx3 {
- margin-left: 2rem;
- margin-right: 2rem;
- }
- .sm-my3 {
- margin-top: 2rem;
- margin-bottom: 2rem;
- }
-
- .sm-m4 {
- margin: 4rem;
- }
- .sm-mt4 {
- margin-top: 4rem;
- }
- .sm-mr4 {
- margin-right: 4rem;
- }
- .sm-mb4 {
- margin-bottom: 4rem;
- }
- .sm-ml4 {
- margin-left: 4rem;
- }
- .sm-mx4 {
- margin-left: 4rem;
- margin-right: 4rem;
- }
- .sm-my4 {
- margin-top: 4rem;
- margin-bottom: 4rem;
- }
-
- .sm-mxn1 {
- margin-left: -0.5rem;
- margin-right: -0.5rem;
- }
- .sm-mxn2 {
- margin-left: -1rem;
- margin-right: -1rem;
- }
- .sm-mxn3 {
- margin-left: -2rem;
- margin-right: -2rem;
- }
- .sm-mxn4 {
- margin-left: -4rem;
- margin-right: -4rem;
- }
-
- .sm-ml-auto {
- margin-left: auto;
- }
- .sm-mr-auto {
- margin-right: auto;
- }
- .sm-mx-auto {
- margin-left: auto;
- margin-right: auto;
- }
-}
-
-@media (min-width: 52em) {
- .md-m0 {
- margin: 0;
- }
- .md-mt0 {
- margin-top: 0;
- }
- .md-mr0 {
- margin-right: 0;
- }
- .md-mb0 {
- margin-bottom: 0;
- }
- .md-ml0 {
- margin-left: 0;
- }
- .md-mx0 {
- margin-left: 0;
- margin-right: 0;
- }
- .md-my0 {
- margin-top: 0;
- margin-bottom: 0;
- }
-
- .md-m1 {
- margin: 0.5rem;
- }
- .md-mt1 {
- margin-top: 0.5rem;
- }
- .md-mr1 {
- margin-right: 0.5rem;
- }
- .md-mb1 {
- margin-bottom: 0.5rem;
- }
- .md-ml1 {
- margin-left: 0.5rem;
- }
- .md-mx1 {
- margin-left: 0.5rem;
- margin-right: 0.5rem;
- }
- .md-my1 {
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- }
-
- .md-m2 {
- margin: 1rem;
- }
- .md-mt2 {
- margin-top: 1rem;
- }
- .md-mr2 {
- margin-right: 1rem;
- }
- .md-mb2 {
- margin-bottom: 1rem;
- }
- .md-ml2 {
- margin-left: 1rem;
- }
- .md-mx2 {
- margin-left: 1rem;
- margin-right: 1rem;
- }
- .md-my2 {
- margin-top: 1rem;
- margin-bottom: 1rem;
- }
-
- .md-m3 {
- margin: 2rem;
- }
- .md-mt3 {
- margin-top: 2rem;
- }
- .md-mr3 {
- margin-right: 2rem;
- }
- .md-mb3 {
- margin-bottom: 2rem;
- }
- .md-ml3 {
- margin-left: 2rem;
- }
- .md-mx3 {
- margin-left: 2rem;
- margin-right: 2rem;
- }
- .md-my3 {
- margin-top: 2rem;
- margin-bottom: 2rem;
- }
-
- .md-m4 {
- margin: 4rem;
- }
- .md-mt4 {
- margin-top: 4rem;
- }
- .md-mr4 {
- margin-right: 4rem;
- }
- .md-mb4 {
- margin-bottom: 4rem;
- }
- .md-ml4 {
- margin-left: 4rem;
- }
- .md-mx4 {
- margin-left: 4rem;
- margin-right: 4rem;
- }
- .md-my4 {
- margin-top: 4rem;
- margin-bottom: 4rem;
- }
-
- .md-mxn1 {
- margin-left: -0.5rem;
- margin-right: -0.5rem;
- }
- .md-mxn2 {
- margin-left: -1rem;
- margin-right: -1rem;
- }
- .md-mxn3 {
- margin-left: -2rem;
- margin-right: -2rem;
- }
- .md-mxn4 {
- margin-left: -4rem;
- margin-right: -4rem;
- }
-
- .md-ml-auto {
- margin-left: auto;
- }
- .md-mr-auto {
- margin-right: auto;
- }
- .md-mx-auto {
- margin-left: auto;
- margin-right: auto;
- }
-}
-
-@media (min-width: 64em) {
- .lg-m0 {
- margin: 0;
- }
- .lg-mt0 {
- margin-top: 0;
- }
- .lg-mr0 {
- margin-right: 0;
- }
- .lg-mb0 {
- margin-bottom: 0;
- }
- .lg-ml0 {
- margin-left: 0;
- }
- .lg-mx0 {
- margin-left: 0;
- margin-right: 0;
- }
- .lg-my0 {
- margin-top: 0;
- margin-bottom: 0;
- }
-
- .lg-m1 {
- margin: 0.5rem;
- }
- .lg-mt1 {
- margin-top: 0.5rem;
- }
- .lg-mr1 {
- margin-right: 0.5rem;
- }
- .lg-mb1 {
- margin-bottom: 0.5rem;
- }
- .lg-ml1 {
- margin-left: 0.5rem;
- }
- .lg-mx1 {
- margin-left: 0.5rem;
- margin-right: 0.5rem;
- }
- .lg-my1 {
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- }
-
- .lg-m2 {
- margin: 1rem;
- }
- .lg-mt2 {
- margin-top: 1rem;
- }
- .lg-mr2 {
- margin-right: 1rem;
- }
- .lg-mb2 {
- margin-bottom: 1rem;
- }
- .lg-ml2 {
- margin-left: 1rem;
- }
- .lg-mx2 {
- margin-left: 1rem;
- margin-right: 1rem;
- }
- .lg-my2 {
- margin-top: 1rem;
- margin-bottom: 1rem;
- }
-
- .lg-m3 {
- margin: 2rem;
- }
- .lg-mt3 {
- margin-top: 2rem;
- }
- .lg-mr3 {
- margin-right: 2rem;
- }
- .lg-mb3 {
- margin-bottom: 2rem;
- }
- .lg-ml3 {
- margin-left: 2rem;
- }
- .lg-mx3 {
- margin-left: 2rem;
- margin-right: 2rem;
- }
- .lg-my3 {
- margin-top: 2rem;
- margin-bottom: 2rem;
- }
-
- .lg-m4 {
- margin: 4rem;
- }
- .lg-mt4 {
- margin-top: 4rem;
- }
- .lg-mr4 {
- margin-right: 4rem;
- }
- .lg-mb4 {
- margin-bottom: 4rem;
- }
- .lg-ml4 {
- margin-left: 4rem;
- }
- .lg-mx4 {
- margin-left: 4rem;
- margin-right: 4rem;
- }
- .lg-my4 {
- margin-top: 4rem;
- margin-bottom: 4rem;
- }
-
- .lg-mxn1 {
- margin-left: -0.5rem;
- margin-right: -0.5rem;
- }
- .lg-mxn2 {
- margin-left: -1rem;
- margin-right: -1rem;
- }
- .lg-mxn3 {
- margin-left: -2rem;
- margin-right: -2rem;
- }
- .lg-mxn4 {
- margin-left: -4rem;
- margin-right: -4rem;
- }
-
- .lg-ml-auto {
- margin-left: auto;
- }
- .lg-mr-auto {
- margin-right: auto;
- }
- .lg-mx-auto {
- margin-left: auto;
- margin-right: auto;
- }
-}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_padding.css b/packages/dev-tools-pages/public/css/basscss_responsive_padding.css
deleted file mode 100644
index e027c2d65..000000000
--- a/packages/dev-tools-pages/public/css/basscss_responsive_padding.css
+++ /dev/null
@@ -1,134 +0,0 @@
-/* Basscss Responsive Padding */
-/* Modified by Fabio Berger to include xs prefix */
-
-@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
-
- .sm-p0 { padding: 0 }
- .sm-pt0 { padding-top: 0 }
- .sm-pr0 { padding-right: 0 }
- .sm-pb0 { padding-bottom: 0 }
- .sm-pl0 { padding-left: 0 }
- .sm-px0 { padding-left: 0; padding-right: 0 }
- .sm-py0 { padding-top: 0; padding-bottom: 0 }
-
- .sm-p1 { padding: .5rem }
- .sm-pt1 { padding-top: .5rem }
- .sm-pr1 { padding-right: .5rem }
- .sm-pb1 { padding-bottom: .5rem }
- .sm-pl1 { padding-left: .5rem }
- .sm-px1 { padding-left: .5rem; padding-right: .5rem }
- .sm-py1 { padding-top: .5rem; padding-bottom: .5rem }
-
- .sm-p2 { padding: 1rem }
- .sm-pt2 { padding-top: 1rem }
- .sm-pr2 { padding-right: 1rem }
- .sm-pb2 { padding-bottom: 1rem }
- .sm-pl2 { padding-left: 1rem }
- .sm-px2 { padding-left: 1rem; padding-right: 1rem }
- .sm-py2 { padding-top: 1rem; padding-bottom: 1rem }
-
- .sm-p3 { padding: 2rem }
- .sm-pt3 { padding-top: 2rem }
- .sm-pr3 { padding-right: 2rem }
- .sm-pb3 { padding-bottom: 2rem }
- .sm-pl3 { padding-left: 2rem }
- .sm-px3 { padding-left: 2rem; padding-right: 2rem }
- .sm-py3 { padding-top: 2rem; padding-bottom: 2rem }
-
- .sm-p4 { padding: 4rem }
- .sm-pt4 { padding-top: 4rem }
- .sm-pr4 { padding-right: 4rem }
- .sm-pb4 { padding-bottom: 4rem }
- .sm-pl4 { padding-left: 4rem }
- .sm-px4 { padding-left: 4rem; padding-right: 4rem }
- .sm-py4 { padding-top: 4rem; padding-bottom: 4rem }
-
-}
-
-@media (min-width: 52em) {
-
- .md-p0 { padding: 0 }
- .md-pt0 { padding-top: 0 }
- .md-pr0 { padding-right: 0 }
- .md-pb0 { padding-bottom: 0 }
- .md-pl0 { padding-left: 0 }
- .md-px0 { padding-left: 0; padding-right: 0 }
- .md-py0 { padding-top: 0; padding-bottom: 0 }
-
- .md-p1 { padding: .5rem }
- .md-pt1 { padding-top: .5rem }
- .md-pr1 { padding-right: .5rem }
- .md-pb1 { padding-bottom: .5rem }
- .md-pl1 { padding-left: .5rem }
- .md-px1 { padding-left: .5rem; padding-right: .5rem }
- .md-py1 { padding-top: .5rem; padding-bottom: .5rem }
-
- .md-p2 { padding: 1rem }
- .md-pt2 { padding-top: 1rem }
- .md-pr2 { padding-right: 1rem }
- .md-pb2 { padding-bottom: 1rem }
- .md-pl2 { padding-left: 1rem }
- .md-px2 { padding-left: 1rem; padding-right: 1rem }
- .md-py2 { padding-top: 1rem; padding-bottom: 1rem }
-
- .md-p3 { padding: 2rem }
- .md-pt3 { padding-top: 2rem }
- .md-pr3 { padding-right: 2rem }
- .md-pb3 { padding-bottom: 2rem }
- .md-pl3 { padding-left: 2rem }
- .md-px3 { padding-left: 2rem; padding-right: 2rem }
- .md-py3 { padding-top: 2rem; padding-bottom: 2rem }
-
- .md-p4 { padding: 4rem }
- .md-pt4 { padding-top: 4rem }
- .md-pr4 { padding-right: 4rem }
- .md-pb4 { padding-bottom: 4rem }
- .md-pl4 { padding-left: 4rem }
- .md-px4 { padding-left: 4rem; padding-right: 4rem }
- .md-py4 { padding-top: 4rem; padding-bottom: 4rem }
-
-}
-
-@media (min-width: 64em) {
-
- .lg-p0 { padding: 0 }
- .lg-pt0 { padding-top: 0 }
- .lg-pr0 { padding-right: 0 }
- .lg-pb0 { padding-bottom: 0 }
- .lg-pl0 { padding-left: 0 }
- .lg-px0 { padding-left: 0; padding-right: 0 }
- .lg-py0 { padding-top: 0; padding-bottom: 0 }
-
- .lg-p1 { padding: .5rem }
- .lg-pt1 { padding-top: .5rem }
- .lg-pr1 { padding-right: .5rem }
- .lg-pb1 { padding-bottom: .5rem }
- .lg-pl1 { padding-left: .5rem }
- .lg-px1 { padding-left: .5rem; padding-right: .5rem }
- .lg-py1 { padding-top: .5rem; padding-bottom: .5rem }
-
- .lg-p2 { padding: 1rem }
- .lg-pt2 { padding-top: 1rem }
- .lg-pr2 { padding-right: 1rem }
- .lg-pb2 { padding-bottom: 1rem }
- .lg-pl2 { padding-left: 1rem }
- .lg-px2 { padding-left: 1rem; padding-right: 1rem }
- .lg-py2 { padding-top: 1rem; padding-bottom: 1rem }
-
- .lg-p3 { padding: 2rem }
- .lg-pt3 { padding-top: 2rem }
- .lg-pr3 { padding-right: 2rem }
- .lg-pb3 { padding-bottom: 2rem }
- .lg-pl3 { padding-left: 2rem }
- .lg-px3 { padding-left: 2rem; padding-right: 2rem }
- .lg-py3 { padding-top: 2rem; padding-bottom: 2rem }
-
- .lg-p4 { padding: 4rem }
- .lg-pt4 { padding-top: 4rem }
- .lg-pr4 { padding-right: 4rem }
- .lg-pb4 { padding-bottom: 4rem }
- .lg-pl4 { padding-left: 4rem }
- .lg-px4 { padding-left: 4rem; padding-right: 4rem }
- .lg-py4 { padding-top: 4rem; padding-bottom: 4rem }
-
-}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css b/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css
deleted file mode 100644
index cae23b4e7..000000000
--- a/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/* Basscss Responsive Type Scale */
-/* Modified by Fabio Berger to include xs prefix */
-
-@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
- .sm-h00 { font-size: 4rem }
- .sm-h0 { font-size: 3rem }
- .sm-h1 { font-size: 2rem }
- .sm-h2 { font-size: 1.5rem }
- .sm-h3 { font-size: 1.25rem }
- .sm-h4 { font-size: 1rem }
- .sm-h5 { font-size: .875rem }
- .sm-h6 { font-size: .75rem }
-}
-
-@media (min-width: 52em) {
- .md-h00 { font-size: 4rem }
- .md-h0 { font-size: 3rem }
- .md-h1 { font-size: 2rem }
- .md-h2 { font-size: 1.5rem }
- .md-h3 { font-size: 1.25rem }
- .md-h4 { font-size: 1rem }
- .md-h5 { font-size: .875rem }
- .md-h6 { font-size: .75rem }
-}
-
-@media (min-width: 64em) {
- .lg-h00 { font-size: 4rem }
- .lg-h0 { font-size: 3rem }
- .lg-h1 { font-size: 2rem }
- .lg-h2 { font-size: 1.5rem }
- .lg-h3 { font-size: 1.25rem }
- .lg-h4 { font-size: 1rem }
- .lg-h5 { font-size: .875rem }
- .lg-h6 { font-size: .75rem }
-}
diff --git a/packages/dev-tools-pages/public/favicons/compiler.ico b/packages/dev-tools-pages/public/favicons/compiler.ico
new file mode 100644
index 000000000..e43c5fc8a
--- /dev/null
+++ b/packages/dev-tools-pages/public/favicons/compiler.ico
Binary files differ
diff --git a/packages/dev-tools-pages/public/favicons/cov.ico b/packages/dev-tools-pages/public/favicons/cov.ico
new file mode 100644
index 000000000..4f1172186
--- /dev/null
+++ b/packages/dev-tools-pages/public/favicons/cov.ico
Binary files differ
diff --git a/packages/dev-tools-pages/public/favicons/profiler.ico b/packages/dev-tools-pages/public/favicons/profiler.ico
new file mode 100644
index 000000000..65d38812b
--- /dev/null
+++ b/packages/dev-tools-pages/public/favicons/profiler.ico
Binary files differ
diff --git a/packages/dev-tools-pages/public/favicons/trace.ico b/packages/dev-tools-pages/public/favicons/trace.ico
new file mode 100644
index 000000000..af00455d4
--- /dev/null
+++ b/packages/dev-tools-pages/public/favicons/trace.ico
Binary files differ
diff --git a/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png b/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png
deleted file mode 100755
index 68c493c4f..000000000
--- a/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png
+++ /dev/null
Binary files differ
diff --git a/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png b/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png
deleted file mode 100755
index a5abb0eb3..000000000
--- a/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png
+++ /dev/null
Binary files differ
diff --git a/packages/dev-tools-pages/public/images/favicon/favicon.ico b/packages/dev-tools-pages/public/images/favicon/favicon.ico
deleted file mode 100755
index b7ada2a1c..000000000
--- a/packages/dev-tools-pages/public/images/favicon/favicon.ico
+++ /dev/null
Binary files differ
diff --git a/packages/dev-tools-pages/public/index.html b/packages/dev-tools-pages/public/index.html
index f62d7b255..f8131aece 100644
--- a/packages/dev-tools-pages/public/index.html
+++ b/packages/dev-tools-pages/public/index.html
@@ -4,21 +4,10 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="description" content="" />
- <meta property="og:type" content="website" />
- <meta property="og:title" content="0x" />
- <meta property="og:description" content="" />
- <meta property="og:image" content="/images/og_image.png" />
<title>0x: The Protocol for Trading Tokens</title>
- <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" />
- <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" />
- <link rel="stylesheet" href="/css/basscss_responsive_custom.css">
- <link rel="stylesheet" href="/css/basscss_responsive_padding.css">
- <link rel="stylesheet" href="/css/basscss_responsive_margin.css">
- <link rel="stylesheet" href="/css/basscss_responsive_type_scale.css">
</head>
-<body style="margin: 0px; min-width: 355px;">
+<body>
<div id="app"></div>
<script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
</body>
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
new file mode 100644
index 000000000..e676961c8
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+
+interface ButtonProps extends Props {
+ large?: boolean;
+}
+
+const Button =
+ styled.button <
+ ButtonProps >
+ `
+ font-family: inherit;
+ font-size: ${props => (props.large ? '1.125rem' : '.875rem')};
+ font-weight: 500;
+ white-space: nowrap;
+ vertical-align: middle;
+ background-color: ${props => props.colors.secondary};
+ color: #000;
+ border: 0;
+ border-radius: 5rem;
+ padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
+ display: inline-block;
+`;
+
+export default withContext(Button);
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
new file mode 100644
index 000000000..42d4234f1
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import BaseButton from './Button';
+
+interface CodeProps {
+ children: React.ReactNode;
+ language?: string;
+}
+
+interface CodeState {
+ hlCode?: string;
+ copied?: boolean;
+}
+
+const Button = styled(BaseButton)`
+ opacity: 0;
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ transition: opacity 0.2s;
+`;
+
+const Base =
+ styled.div <
+ CodeProps >
+ `
+ color: ${props => (props.language === undefined ? '#FFF' : 'inherit')};
+ background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')};
+ white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
+ position: relative;
+ &:hover ${Button} {
+ opacity: 1;
+ }
+`;
+
+const StyledCode = styled.code`
+ padding: 1.5rem;
+ display: block;
+ overflow-y: scroll;
+ -webkit-overflow-scrolling: touch;
+`;
+
+const StyledPre = styled.pre`
+ margin: 0;
+`;
+
+const StyledCopyInput = styled.textarea`
+ height: 0;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: -1;
+`;
+
+const CopyInput = StyledCopyInput as any;
+
+class Code extends React.Component<CodeProps, CodeState> {
+ code = React.createRef<HTMLTextAreaElement>();
+
+ state: CodeState = {};
+
+ constructor(props: CodeProps) {
+ super(props);
+ }
+
+ async componentDidMount() {
+ const { language, children } = this.props;
+
+ if (language !== undefined) {
+ const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js');
+ const { value: hlCode } = highlight(language, children as string);
+ this.setState({ hlCode });
+ }
+ }
+
+ handleCopy = async () => {
+ try {
+ if ('clipboard' in navigator) {
+ await (navigator as any).clipboard.writeText(this.props.children);
+ this.setState({ copied: true });
+ } else {
+ this.code.current.focus();
+ this.code.current.select();
+ document.execCommand('copy');
+ this.setState({ copied: true });
+ }
+ } catch (error) {
+ this.setState({ copied: false });
+ }
+ };
+
+ render() {
+ const { language, children } = this.props;
+
+ return (
+ <Base language={language}>
+ <StyledPre>
+ {this.state.hlCode !== undefined ? (
+ <StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
+ ) : (
+ <StyledCode>{this.props.children}</StyledCode>
+ )}
+ </StyledPre>
+ <Button onClick={this.handleCopy}>Copy</Button>
+ {!('clipboard' in navigator) ? (
+ <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
+ ) : null}
+ </Base>
+ );
+ }
+}
+
+export default Code;
diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
new file mode 100644
index 000000000..d6df7a0b4
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+ max-width: 77.5rem;
+ width: calc(100% - 3.75rem);
+ margin: 0 auto;
+`;
+
+export default Container;
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
new file mode 100644
index 000000000..56d52a150
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Beta } from './Typography';
+
+const Base = styled.div`
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ &:not(:last-of-type) {
+ margin-bottom: 6.25rem;
+ }
+`;
+
+const Content = styled.div`
+ width: 66.693548387%;
+`;
+
+const Item = styled.div`
+ p {
+ max-width: 31.25rem;
+ }
+
+ &:not(:last-of-type) {
+ margin-bottom: 2.5rem;
+ }
+`;
+
+interface ContentBlockProps {
+ title: string;
+ children: React.ReactNode;
+}
+
+function ContentBlock(props: ContentBlockProps) {
+ const children = React.Children.map(props.children, child => {
+ return <Item>{child}</Item>;
+ });
+
+ return (
+ <Base>
+ <Beta>{props.title}</Beta>
+ <Content>{children}</Content>
+ </Base>
+ );
+}
+
+export default ContentBlock;
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
new file mode 100644
index 000000000..82b2de1a3
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Alpha, Beta } from './Typography';
+import { withContext, Props } from './withContext';
+import Container from './Container';
+
+import MainIcon from 'ts/icons/logos/0x.svg';
+import compiler from 'ts/context/compiler';
+import cov from 'ts/context/cov';
+import profiler from 'ts/context/profiler';
+import trace from 'ts/context/trace';
+
+const tools = [trace, cov, compiler, profiler];
+
+function Footer(props: Props) {
+ const { colors } = props;
+
+ return (
+ <StyledFooter background={colors.secondary}>
+ <Container>
+ <Top>
+ <Alpha>Other tools by 0x</Alpha>
+ <List>
+ {tools.map(({ title, subtitle, icon }) => (
+ <ListItem as="li" key={title}>
+ <Icon as={icon} />
+ <div>
+ <Beta>{title}</Beta>
+ <p>{subtitle}</p>
+ </div>
+ </ListItem>
+ ))}
+ </List>
+ </Top>
+ <Media as="aside">
+ <Icon as={MainIcon} />
+ <Small>
+ Built by 0x. 0x is an open, permissionless protocol allowing for ERC20 tokens to be traded on
+ the Ethereum blockchain.
+ </Small>
+ </Media>
+ </Container>
+ </StyledFooter>
+ );
+}
+
+const StyledFooter = styled.footer`
+ background-color: ${(props: { background: string }) => props.background};
+ padding-top: 6.25rem;
+ padding-bottom: 5.4375rem;
+`;
+
+const Top = styled.div`
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 9.375rem;
+`;
+
+const Media = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+const Icon = styled.div`
+ margin-right: 1.3125rem;
+`;
+
+const List = styled.ul`
+ display: flex;
+ width: 66.693548387%;
+ flex-wrap: wrap;
+ flex-direction: row;
+ margin: 0;
+ padding: 0;
+`;
+
+const ListItem = styled(Media)`
+ flex-basis: 50%;
+ margin-bottom: 3.3125rem;
+ :nth-last-of-type(-n + 2) {
+ margin-bottom: 0;
+ }
+`;
+
+const Small = styled.small`
+ font-size: 1em;
+ max-width: 37.5rem;
+`;
+
+export default withContext(Footer);
diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
new file mode 100644
index 000000000..46dce01eb
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+import Container from './Container';
+import { Small } from './Typography';
+
+function Header(props: Props) {
+ const { icon, title, colors } = props;
+
+ return (
+ <Container>
+ <StyledHeader>
+ <LogoMark>
+ <Logo as={icon} color={colors.main} />
+ <Title>{title}</Title>
+ </LogoMark>
+
+ <Link as="a" href="#">
+ Built by 0x
+ </Link>
+ </StyledHeader>
+ </Container>
+ );
+}
+
+const StyledHeader = styled.header`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-top: 3.75rem;
+ padding-bottom: 0.875rem;
+`;
+
+const LogoMark = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+const StyledLogo = styled.div`
+ color: ${props => props.color}
+ width: 1.75rem;
+ height: 1.75rem;
+`;
+
+const Title = styled.h1`
+ font-size: 1.5rem;
+ margin: 0;
+ margin-left: 0.8125rem;
+`;
+
+const StyledLink = styled(Small)`
+ color: inherit;
+`;
+
+const Link = StyledLink as any;
+const Logo = StyledLogo as any;
+
+export default withContext(Header);
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
new file mode 100644
index 000000000..60f859a55
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+import Button from './Button';
+import { Beta } from './Typography';
+
+function Hero(props: Props) {
+ const { subtitle, tagline } = props;
+ return (
+ <StyledHero>
+ <Subtitle>{subtitle}</Subtitle>
+ <Tagline as="p">{tagline}</Tagline>
+ <Button as="a" href="#" large>
+ Read the Docs
+ </Button>
+ </StyledHero>
+ );
+}
+
+const StyledHero = styled.section`
+ margin: 0 auto;
+ text-align: center;
+ max-width: 590px;
+`;
+
+const Subtitle = styled.h2`
+ font-size: 3.75rem;
+ line-height: 1.16;
+ margin-bottom: 1.5rem;
+`;
+
+const Tagline = styled(Beta)`
+ margin-bottom: 2rem;
+`;
+
+export default withContext(Hero);
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
new file mode 100644
index 000000000..037cfa675
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const InlineCode = styled.code`
+ background-color: #eceff9;
+ padding: 0.1875rem;
+`;
+
+export default InlineCode;
diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
new file mode 100644
index 000000000..df1fdc53b
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const StyledList = styled.ul`
+ list-style-type: none;
+ margin: 0;
+ padding-inline-start: 0.2rem;
+`;
+
+const StyledItem = styled.li`
+ :before {
+ content: '';
+ border: 1px solid black;
+ width: 0.6875rem;
+ height: 0.6875rem;
+ display: inline-block;
+ transform: rotate(45deg);
+ margin-right: 1.09375rem;
+ }
+`;
+
+interface ListProps {
+ items: Array<string>;
+}
+
+function List(props: ListProps) {
+ const items = props.items;
+ const listItems = items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>);
+
+ return <StyledList>{listItems}</StyledList>;
+}
+
+export default List;
diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx
new file mode 100644
index 000000000..8046abc91
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Main.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+
+import { Alpha } from './Typography';
+
+const StyledMain = styled.div`
+ padding-top: 6.25rem;
+ padding-bottom: 6.25rem;
+`;
+
+const Title = styled(Alpha)`
+ color: ${props => props.color};
+ margin-bottom: 6.25rem;
+`;
+
+interface MainProps extends Props {
+ children: React.ReactNode;
+}
+
+function Main(props: MainProps) {
+ return (
+ <StyledMain>
+ <Title as="h2" color={props.colors.main}>
+ Get started
+ </Title>
+ {props.children}
+ </StyledMain>
+ );
+}
+
+export default withContext(Main);
diff --git a/packages/dev-tools-pages/ts/components/MetaTags.tsx b/packages/dev-tools-pages/ts/components/MetaTags.tsx
new file mode 100644
index 000000000..9bb33f7ab
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/MetaTags.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+import { withContext, Props } from './withContext';
+
+interface MetaTagsProps extends Props {
+ imgSrc?: string;
+}
+
+function MetaTags(props: MetaTagsProps) {
+ const { title, imgSrc = '/images/og_image.png' } = props;
+ const description = props.tagline;
+ return (
+ <Helmet>
+ <title>{props.title}</title>
+ <meta name="description" content={description} />
+ <link rel="shortcut icon" href={`/favicons/${props.name}.ico`} />
+ <meta property="og:title" content={title} />
+ <meta property="og:description" content={description} />
+ <meta property="og:type" content="website" />
+ <meta property="og:image" content={imgSrc} />
+ <meta name="twitter:site" content="@0xproject" />
+ <meta name="twitter:image" content={imgSrc} />
+ </Helmet>
+ );
+}
+
+export default withContext(MetaTags);
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
new file mode 100644
index 000000000..1efbe1f61
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
+
+import {withContext, Props} from './withContext';
+
+const StyledTabList = styled(TabList)`
+ text-transform: uppercase;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+`;
+
+const StyledTab = styled(Tab)`
+ height: 2.5rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ float: left;
+ &:not(:first-of-type) {
+ margin-left: .25rem;
+ }
+ &:focus, &:hover {
+ color: red;
+ outline: 0;
+ }
+`;
+
+const Root = styled.div<{primaryColor: string;}>`
+ ${StyledTab} {
+ background-color: ${props => props.primaryColor};
+ }
+ ${StyledTab}[aria-selected="true"] {
+ background-color: #F1F2F7;
+ }
+`;
+
+interface TabsProps extends Props {
+ children: React.ReactNode;
+}
+
+function Tabs(props: TabsProps) {
+ return (
+ <Root primaryColor={props.colors.secondary}>
+ <ReactTabs>
+ <StyledTabList>
+ { React.Children.map(props.children, child => {
+ const {props} = React.cloneElement(child as React.ReactElement<any>);
+ return <StyledTab>{props.title}</StyledTab>
+ }) }
+ </StyledTabList>
+
+ { React.Children.map(props.children, child => (
+ <TabPanel>{child}</TabPanel>
+ )) }
+ </ReactTabs>
+ </Root>
+ )
+}
+
+interface TabBlockProps {
+ title: string;
+ children: React.ReactNode;
+}
+
+function TabBlock(props: TabBlockProps) {
+ return (
+ <React.Fragment>
+ {props.children}
+ </React.Fragment>
+ )
+}
+
+const ContextTabs = withContext(Tabs);
+
+export {ContextTabs as Tabs, TabBlock}; \ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
new file mode 100644
index 000000000..3ce18df3b
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Alpha = styled.h2`
+ font-size: 1.75rem;
+ line-height: 1;
+`;
+
+const Beta = styled.h3`
+ font-size: 1.25rem;
+ line-height: 1.65;
+`;
+
+const Small = styled.p`
+ font-size: 0.875rem;
+`;
+
+export { Alpha, Beta, Small };
diff --git a/packages/dev-tools-pages/ts/components/meta_tags.tsx b/packages/dev-tools-pages/ts/components/meta_tags.tsx
deleted file mode 100644
index f6c43d23f..000000000
--- a/packages/dev-tools-pages/ts/components/meta_tags.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-export interface MetaTagsProps {
- title: string;
- description: string;
- imgSrc?: string;
-}
-
-export const MetaTags: React.StatelessComponent<MetaTagsProps> = ({ title, description, imgSrc }) => (
- <Helmet>
- <title>{title}</title>
- <meta name="description" content={description} />
- <meta property="og:title" content={title} />
- <meta property="og:description" content={description} />
- <meta property="og:type" content="website" />
- <meta property="og:image" content={imgSrc} />
- <meta name="twitter:site" content="@0xproject" />
- <meta name="twitter:image" content={imgSrc} />
- </Helmet>
-);
-
-MetaTags.defaultProps = {
- imgSrc: '/images/og_image.png',
-};
diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx
deleted file mode 100644
index 754eca40e..000000000
--- a/packages/dev-tools-pages/ts/components/ui/button.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { darken, saturate } from 'polished';
-import * as React from 'react';
-import styled from 'styled-components';
-
-/**
- * AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS
- * SEE: https://www.styled-components.com/docs/basics#coming-from-css
- */
-export interface ButtonProps {
- backgroundColor?: string;
- borderColor?: string;
- width?: string;
- padding?: string;
- type?: string;
- isDisabled?: boolean;
- onClick?: (event: React.MouseEvent<HTMLElement>) => void;
- className?: string;
-}
-
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
- <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
- {children}
- </button>
-);
-
-const darkenOnHoverAmount = 0.1;
-const darkenOnActiveAmount = 0.2;
-const saturateOnFocusAmount = 0.2;
-export const Button = styled(PlainButton)`
- cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
- transition: background-color, opacity 0.5s ease;
- padding: ${props => props.padding};
- border-radius: 3px;
- outline: none;
- width: ${props => props.width};
- background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')};
- border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')};
- &:hover {
- background-color: ${props =>
- !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important;
- }
- &:active {
- background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')};
- }
- &:disabled {
- opacity: 0.5;
- }
- &:focus {
- background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)};
- }
-`;
-
-Button.defaultProps = {
- backgroundColor: 'red',
- width: 'auto',
- isDisabled: false,
- padding: '1em 2.2em',
-};
-Button.displayName = 'Button';
diff --git a/packages/dev-tools-pages/ts/components/ui/container.tsx b/packages/dev-tools-pages/ts/components/ui/container.tsx
deleted file mode 100644
index f2ae68b70..000000000
--- a/packages/dev-tools-pages/ts/components/ui/container.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-type StringOrNum = string | number;
-
-export type ContainerTag = 'div' | 'span';
-
-export interface ContainerProps {
- marginTop?: StringOrNum;
- marginBottom?: StringOrNum;
- marginRight?: StringOrNum;
- marginLeft?: StringOrNum;
- padding?: StringOrNum;
- paddingTop?: StringOrNum;
- paddingBottom?: StringOrNum;
- paddingRight?: StringOrNum;
- paddingLeft?: StringOrNum;
- backgroundColor?: string;
- borderRadius?: StringOrNum;
- maxWidth?: StringOrNum;
- maxHeight?: StringOrNum;
- width?: StringOrNum;
- height?: StringOrNum;
- minWidth?: StringOrNum;
- minHeight?: StringOrNum;
- isHidden?: boolean;
- className?: string;
- position?: 'absolute' | 'fixed' | 'relative' | 'unset';
- display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
- top?: string;
- left?: string;
- right?: string;
- bottom?: string;
- zIndex?: number;
- Tag?: ContainerTag;
- cursor?: string;
- id?: string;
- onClick?: (event: React.MouseEvent<HTMLElement>) => void;
- overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
-}
-
-export const Container: React.StatelessComponent<ContainerProps> = props => {
- const { children, className, Tag, isHidden, id, onClick, ...style } = props;
- const visibility = isHidden ? 'hidden' : undefined;
- return (
- <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
- {children}
- </Tag>
- );
-};
-
-Container.defaultProps = {
- Tag: 'div',
-};
-
-Container.displayName = 'Container';
diff --git a/packages/dev-tools-pages/ts/components/ui/text.tsx b/packages/dev-tools-pages/ts/components/ui/text.tsx
deleted file mode 100644
index 8e314beae..000000000
--- a/packages/dev-tools-pages/ts/components/ui/text.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { colors } from '@0xproject/react-shared';
-import { darken } from 'polished';
-import * as React from 'react';
-import styled from 'styled-components';
-
-export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
-
-export interface TextProps {
- className?: string;
- Tag?: TextTag;
- fontSize?: string;
- fontFamily?: string;
- fontStyle?: string;
- fontColor?: string;
- lineHeight?: string;
- minHeight?: string;
- center?: boolean;
- fontWeight?: number | string;
- textDecorationLine?: string;
- onClick?: (event: React.MouseEvent<HTMLElement>) => void;
- hoverColor?: string;
- noWrap?: boolean;
- display?: string;
-}
-
-const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
- <Tag className={className} onClick={onClick}>
- {children}
- </Tag>
-);
-
-export const Text = styled(PlainText)`
- font-family: ${props => props.fontFamily};
- font-style: ${props => props.fontStyle};
- font-weight: ${props => props.fontWeight};
- font-size: ${props => props.fontSize};
- text-decoration-line: ${props => props.textDecorationLine};
- ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
- ${props => (props.center ? 'text-align: center' : '')};
- color: ${props => props.fontColor};
- ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
- ${props => (props.onClick ? 'cursor: pointer' : '')};
- transition: color 0.5s ease;
- ${props => (props.noWrap ? 'white-space: nowrap' : '')};
- ${props => (props.display ? `display: ${props.display}` : '')};
- &:hover {
- ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor || 'black')}` : '')};
- }
-`;
-
-Text.defaultProps = {
- fontFamily: 'Roboto',
- fontStyle: 'normal',
- fontWeight: 400,
- fontColor: colors.black,
- fontSize: '15px',
- lineHeight: '1.5em',
- textDecorationLine: 'none',
- Tag: 'div',
- noWrap: false,
-};
-
-Text.displayName = 'Text';
-
-export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
-
-Title.defaultProps = {
- Tag: 'h2',
- fontSize: '20px',
- fontWeight: 600,
- fontColor: colors.black,
-};
-
-Title.displayName = 'Title';
diff --git a/packages/dev-tools-pages/ts/components/withContext.tsx b/packages/dev-tools-pages/ts/components/withContext.tsx
new file mode 100644
index 000000000..d38c0afe4
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/withContext.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import ThemeContext from '../context';
+
+interface Props {
+ title?: string;
+ name?: string;
+ subtitle?: string;
+ tagline?: string;
+ icon?: React.ReactNode;
+ colors?: any;
+}
+
+function withContext(WrappedComponent: any) {
+ function ComponentWithContext(props: any) {
+ return <ThemeContext.Consumer>{data => <WrappedComponent {...data} {...props} />}</ThemeContext.Consumer>;
+ }
+
+ return ComponentWithContext;
+}
+
+export default withContext;
+export { withContext, Props };
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
new file mode 100644
index 000000000..63a051481
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/compiler.svg';
+
+export default {
+ title: 'sol-compiler',
+ name: 'compiler',
+ subtitle: 'Solidity compilation that just works',
+ tagline: 'Seamlessly compile an entire solidity project and generate customisable artifacts',
+ icon: Icon,
+ colors: {
+ main: '#1EADCD',
+ secondary: '#D1F4FC',
+ link: '#D1F4FC',
+ },
+};
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
new file mode 100644
index 000000000..4bf2b6ba7
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/cov.svg';
+
+export default {
+ title: 'sol-cov',
+ name: 'cov',
+ subtitle: 'Solidity code coverage',
+ tagline: "Don't get caught with your pants down",
+ icon: Icon,
+ colors: {
+ main: '#BB9200',
+ secondary: '#F1DB8D',
+ link: '#D7AE1B',
+ },
+};
diff --git a/packages/dev-tools-pages/ts/context/index.tsx b/packages/dev-tools-pages/ts/context/index.tsx
new file mode 100644
index 000000000..54556a3fd
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/index.tsx
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ThemeContext = createContext({});
+
+export default ThemeContext;
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
new file mode 100644
index 000000000..d8982c56f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/profiler.svg';
+
+export default {
+ title: 'sol-profiler',
+ name: 'profiler',
+ subtitle: 'Gas profiling for Solidity',
+ tagline: "Implement data-guided optimizations by profiling your contrat's gas usage",
+ icon: Icon,
+ colors: {
+ main: '#FF7144',
+ secondary: '#FED7CB',
+ link: '#EB8666',
+ },
+};
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
new file mode 100644
index 000000000..22289091d
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/trace.svg';
+
+export default {
+ title: 'sol-trace',
+ name: 'trace',
+ subtitle: 'Human-readable stack traces',
+ tagline: 'Immediately locate Solidity errors and rapidly debug failed transactions',
+ icon: Icon,
+ colors: {
+ main: '#5C80FF',
+ secondary: '#CDD8FF',
+ link: '#557AFF',
+ },
+};
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
new file mode 100644
index 000000000..1a2a1769a
--- /dev/null
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -0,0 +1,76 @@
+import { createGlobalStyle } from 'styled-components';
+import styledNormalize from 'styled-normalize';
+import hljsStyles from 'highlight.js/styles/github-gist.css';
+
+import { withContext } from 'ts/components/withContext';
+
+const BaseStyles = createGlobalStyle`
+ ${styledNormalize}
+ ${hljsStyles}
+
+ @font-face {
+ font-family: "Maison Neue";
+ src: url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
+ font-weight: 300;
+ font-display: swap;
+ unicode-range: U+20-7E;
+ }
+ @font-face {
+ font-family: "Maison Neue";
+ src: url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
+ font-weight: 500;
+ font-display: swap;
+ unicode-range: U+20-7E;
+ }
+ @font-face {
+ font-family: "Maison Neue Mono";
+ src: url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
+ font-weight: 300;
+ font-display: optional;
+ unicode-range: U+20-7E;
+ }
+
+ html {
+ font-size: 100%;
+ box-sizing: border-box;
+ }
+
+ *, *::before, *::after {
+ box-sizing: inherit;
+ }
+
+ body {
+ font-family: "Maison Neue", system-ui, sans-serif;
+ font-weight: 300;
+ font-size: 1rem;
+ line-height: 1.8;
+ }
+
+ a {
+ color: ${(props: any) => props.colors.link};
+ text-decoration: none;
+
+ &:hover {
+ color: red; //what should this be?
+ }
+ }
+
+ h1, h2, h3, h4 {
+ font-weight: 500;
+ margin: 0;
+ }
+
+ p {
+ margin-top: 0;
+ margin-bottom: 1em;
+ &:not([class]):last-of-type {
+ margin-bottom: 0;
+ }
+ }
+
+ code {
+ font-family: "Maison Neue Mono", monospace;
+ }
+`;
+
+export default withContext(BaseStyles);
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
index d0890161c..da026a198 100644
--- a/packages/dev-tools-pages/ts/globals.d.ts
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -7,3 +7,13 @@ declare module '*.json' {
export default json;
/* tslint:enable */
}
+
+declare module '*.css' {
+ const css: any;
+ export default css;
+}
+
+declare module '*.svg' {
+ const svg: any;
+ export default svg;
+}
diff --git a/packages/dev-tools-pages/ts/icons/logos/0x.svg b/packages/dev-tools-pages/ts/icons/logos/0x.svg
new file mode 100644
index 000000000..1856389db
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/0x.svg
@@ -0,0 +1 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M9.20465 34.4904c2.38415 1.3926 5.13725 2.2736 8.08905 2.4725 4.0871.2558 7.9188-.8242 11.1261-2.8704 1.5894-1.0232 3.0085-2.2737 4.229-3.7231-.9934-1.3926-2.0719-2.842-3.2072-4.3199-.3123-.3979-.6245-.7958-.9367-1.1937-1.1921 1.9042-2.9518 3.4389-4.9953 4.4052l-3.1789-3.0978-11.12605 8.3272zM2.44955 9.30988C1.08718 11.6972.235696 14.3971.0370167 17.3244-.218428 21.417.860116 25.2821 2.90368 28.4652c1.02177 1.5916 2.27062 3.0126 3.71814 4.2347 1.39075-.9947 2.83827-2.0747 4.31418-3.2115.3974-.3127.7947-.6253 1.1921-.9379-1.9017-1.2221-3.43434-2.9841-4.39936-5.0304l3.12206-3.1831L2.44955 9.30988zM27.7954 2.51741C25.4112 1.12481 22.6581.243776 19.7063.0448336 15.6192-.23937 11.7591.840605 8.55184 2.91529 6.96241 3.93843 5.54327 5.18893 4.32281 6.63837c.9934 1.3926 2.07194 2.84204 3.20725 4.31993.31221.3979.62442.7957.93663 1.1936 1.22046-1.9041 2.95181-3.43884 5.02371-4.40514l2.9802 2.87044 11.3248-8.09979zM34.5788 27.6126c1.334-2.3589 2.1855-5.0304 2.3842-7.9293.2554-4.0925-.8231-7.9293-2.8667-11.14077-1.0218-1.59154-2.2706-3.01256-3.7181-4.23464-1.3908.99472-2.8383 2.07469-4.3142 3.21151-.3974.31262-.7947.62525-1.1921.93787 1.9301 1.22208 3.4627 2.98413 4.4277 5.03043l.0284.0568-3.0085 3.1263 8.2593 10.9418z"/></svg> \ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/icons/logos/compiler.svg b/packages/dev-tools-pages/ts/icons/logos/compiler.svg
new file mode 100644
index 000000000..43c338f29
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/compiler.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 28V15V0H15H28V15V28H15H0ZM26 13V2H15V13H26ZM15 15H26V26H15V15ZM13 13V2H2V13H13ZM2 15H13V26H2V15Z" />
+</svg>
diff --git a/packages/dev-tools-pages/ts/icons/logos/cov.svg b/packages/dev-tools-pages/ts/icons/logos/cov.svg
new file mode 100644
index 000000000..2c4dffb83
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/cov.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H28V28H0V0ZM2 2V26H26V16H12V2H2ZM14 2V14H26V2H14Z"/>
+</svg>
diff --git a/packages/dev-tools-pages/ts/icons/logos/profiler.svg b/packages/dev-tools-pages/ts/icons/logos/profiler.svg
new file mode 100644
index 000000000..c3ea61294
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/profiler.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2H26V9H2V2ZM2 11V26H26V11H2ZM0 0H2H26H28V2V26V28H26H2H0V26V2V0Z" />
+</svg>
diff --git a/packages/dev-tools-pages/ts/icons/logos/trace.svg b/packages/dev-tools-pages/ts/icons/logos/trace.svg
new file mode 100644
index 000000000..c207b24cb
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/trace.svg
@@ -0,0 +1 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 15H2V2h24v13H10zm0 2H2v9h8v-9zm2 9h14v-9H12v9zm-2 2H0V0h28v28H10z"/></svg> \ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx
index 4591c6d76..b185e270a 100644
--- a/packages/dev-tools-pages/ts/index.tsx
+++ b/packages/dev-tools-pages/ts/index.tsx
@@ -1,17 +1,37 @@
import * as React from 'react';
import { render } from 'react-dom';
-import { MetaTags } from 'ts/components/meta_tags';
-import { Landing } from 'ts/pages/landing';
+import { Router, Link } from '@reach/router';
-import 'basscss/css/basscss.css';
+import Trace from 'ts/pages/Trace';
+import Compiler from 'ts/pages/Compiler';
+import Cov from 'ts/pages/Cov';
+import Profiler from 'ts/pages/Profiler';
-const DOCUMENT_TITLE = '';
-const DOCUMENT_DESCRIPTION = '';
+const Index = (props: any) => (
+ <ul>
+ <li>
+ <Link to="/trace">sol-trace</Link>
+ </li>
+ <li>
+ <Link to="/compiler">sol-compiler</Link>
+ </li>
+ <li>
+ <Link to="/cov">sol-cov</Link>
+ </li>
+ <li>
+ <Link to="/profiler">sol-profiler</Link>
+ </li>
+ </ul>
+);
-render(
- <div>
- <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
- <Landing />
- </div>,
- document.getElementById('app'),
+const App = () => (
+ <Router>
+ <Trace path="/trace" />
+ <Compiler path="/compiler" />
+ <Cov path="/cov" />
+ <Profiler path="/profiler" />
+ <Index default />
+ </Router>
);
+
+render(<App />, document.getElementById('app'));
diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/pages/Base.tsx
new file mode 100644
index 000000000..7bb578611
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Base.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import ThemeContext from 'ts/context';
+import GlobalStyles from 'ts/globalStyles';
+import MetaTags from 'ts/components/MetaTags';
+import Header from 'ts/components/Header';
+import Hero from 'ts/components/Hero';
+import Footer from 'ts/components/Footer';
+
+interface BaseProps {
+ context: any;
+ children: React.ReactNode;
+}
+
+function Base(props: BaseProps) {
+ return (
+ <ThemeContext.Provider value={props.context}>
+ <MetaTags />
+ <GlobalStyles />
+ <Header />
+ <Hero />
+ {props.children}
+ <Footer />
+ </ThemeContext.Provider>
+ );
+}
+
+export default Base;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
new file mode 100644
index 000000000..2a91c465f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/compiler';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+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';
+
+function Compiler(props: any) {
+ return (
+ <Base context={context}>
+ <Container>
+ <Main>
+ <ContentBlock title="Required steps">
+ <List items={['Step 1', 'Step 2']} />
+ </ContentBlock>
+ <ContentBlock title="Prerequisites">
+ <Code>npm install @0x/sol-trace --save</Code>
+ <p>
+ Sol-trace is a subprovider that needs to be prepended to your{' '}
+ <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+ specific ArtifactAdapter. Sol-trace ships with the{' '}
+ <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+ <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+ also write your own and support any artifact format.
+ </p>
+ </ContentBlock>
+
+ <ContentBlock title="Installation">
+ <Tabs>
+ <TabBlock title="Sol-compiler">
+ <Code language="js">
+ {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+ </Code>
+ </TabBlock>
+ <TabBlock title="Truffle">Truffle</TabBlock>
+ <TabBlock title="Custom">Custom</TabBlock>
+ </Tabs>
+ </ContentBlock>
+ </Main>
+ </Container>
+ </Base>
+ );
+}
+
+export default Compiler;
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
new file mode 100644
index 000000000..a0acfb869
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/cov';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+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';
+
+function Cov(props: any) {
+ return (
+ <Base context={context}>
+ <Container>
+ <Main>
+ <ContentBlock title="Required steps">
+ <List items={['Step 1', 'Step 2']} />
+ </ContentBlock>
+ <ContentBlock title="Prerequisites">
+ <Code>npm install @0x/sol-trace --save</Code>
+ <p>
+ Sol-trace is a subprovider that needs to be prepended to your{' '}
+ <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+ specific ArtifactAdapter. Sol-trace ships with the{' '}
+ <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+ <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+ also write your own and support any artifact format.
+ </p>
+ </ContentBlock>
+
+ <ContentBlock title="Installation">
+ <Tabs>
+ <TabBlock title="Sol-compiler">
+ <Code language="js">
+ {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+ </Code>
+ </TabBlock>
+ <TabBlock title="Truffle">Truffle</TabBlock>
+ <TabBlock title="Custom">Custom</TabBlock>
+ </Tabs>
+ </ContentBlock>
+ </Main>
+ </Container>
+ </Base>
+ );
+}
+
+export default Cov;
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
new file mode 100644
index 000000000..ad2219c5e
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/profiler';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+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';
+
+function Profiler(props: any) {
+ return (
+ <Base context={context}>
+ <Container>
+ <Main>
+ <ContentBlock title="Required steps">
+ <List items={['Step 1', 'Step 2']} />
+ </ContentBlock>
+ <ContentBlock title="Prerequisites">
+ <Code>npm install @0x/sol-trace --save</Code>
+ <p>
+ Sol-trace is a subprovider that needs to be prepended to your{' '}
+ <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+ specific ArtifactAdapter. Sol-trace ships with the{' '}
+ <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+ <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+ also write your own and support any artifact format.
+ </p>
+ </ContentBlock>
+
+ <ContentBlock title="Installation">
+ <Tabs>
+ <TabBlock title="Sol-compiler">
+ <Code language="js">
+ {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+ </Code>
+ </TabBlock>
+ <TabBlock title="Truffle">Truffle</TabBlock>
+ <TabBlock title="Custom">Custom</TabBlock>
+ </Tabs>
+ </ContentBlock>
+ </Main>
+ </Container>
+ </Base>
+ );
+}
+
+export default Profiler;
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
new file mode 100644
index 000000000..797ec6f49
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/trace';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+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';
+
+function Trace(props: any) {
+ return (
+ <Base context={context}>
+ <Container>
+ <Main>
+ <ContentBlock title="Required steps">
+ <List items={['Step 1', 'Step 2']} />
+ </ContentBlock>
+ <ContentBlock title="Prerequisites">
+ <Code>npm install @0x/sol-trace --save</Code>
+ <p>
+ Sol-trace is a subprovider that needs to be prepended to your{' '}
+ <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+ specific ArtifactAdapter. Sol-trace ships with the{' '}
+ <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+ <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+ also write your own and support any artifact format.
+ </p>
+ </ContentBlock>
+
+ <ContentBlock title="Installation">
+ <Tabs>
+ <TabBlock title="Sol-compiler">
+ <Code language="js">
+ {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+ </Code>
+ </TabBlock>
+ <TabBlock title="Truffle">Truffle</TabBlock>
+ <TabBlock title="Custom">Custom</TabBlock>
+ </Tabs>
+ </ContentBlock>
+ </Main>
+ </Container>
+ </Base>
+ );
+}
+
+export default Trace;
diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx
deleted file mode 100644
index a70a9de46..000000000
--- a/packages/dev-tools-pages/ts/pages/landing.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Button } from '../components/ui/button';
-import { Container } from '../components/ui/container';
-import { Text } from '../components/ui/text';
-
-interface LandingProps {}
-
-interface LandingState {}
-
-export class Landing extends React.Component<LandingProps, LandingState> {
- constructor(props: LandingProps) {
- super(props);
- }
- public render(): React.ReactNode {
- return (
- <Container id="landing" className="clearfix">
- <Container className="mx-auto p4" width="200px">
- <Button>
- <Text fontColor="white">Click me!</Text>
- </Button>
- </Container>
- </Container>
- );
- }
-}
diff --git a/packages/dev-tools-pages/ts/utils/utils.ts b/packages/dev-tools-pages/ts/utils/utils.ts
deleted file mode 100644
index b274706a2..000000000
--- a/packages/dev-tools-pages/ts/utils/utils.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as bowser from 'bowser';
-import * as _ from 'lodash';
-
-export const utils = {
- getColSize(items: number): number {
- const bassCssGridSize = 12; // Source: http://basscss.com/#basscss-grid
- const colSize = bassCssGridSize / items;
- if (!_.isInteger(colSize)) {
- throw new Error(`Number of cols must be divisible by ${bassCssGridSize}`);
- }
- return colSize;
- },
- getCurrentBaseUrl(): string {
- const port = window.location.port;
- const hasPort = !_.isUndefined(port);
- const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
- return baseUrl;
- },
- onPageLoadPromise: new Promise<void>((resolve, _reject) => {
- if (document.readyState === 'complete') {
- resolve();
- return;
- }
- window.onload = () => resolve();
- }),
- openUrl(url: string): void {
- window.open(url, '_blank');
- },
- isMobileOperatingSystem(): boolean {
- return bowser.mobile;
- },
-};
diff --git a/packages/dev-tools-pages/webpack.config.js b/packages/dev-tools-pages/webpack.config.js
index 6dfcf74e7..a016c6b04 100644
--- a/packages/dev-tools-pages/webpack.config.js
+++ b/packages/dev-tools-pages/webpack.config.js
@@ -48,6 +48,10 @@ const config = {
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
+ {
+ test: /\.svg$/,
+ loaders: ['react-svg-loader'],
+ },
],
},
optimization: {
@@ -60,6 +64,8 @@ const config = {
devServer: {
port: 3572,
disableHostCheck: true,
+ overlay: true,
+ historyApiFallback: true,
},
};