diff options
Diffstat (limited to 'packages')
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 Binary files differnew file mode 100644 index 000000000..e43c5fc8a --- /dev/null +++ b/packages/dev-tools-pages/public/favicons/compiler.ico diff --git a/packages/dev-tools-pages/public/favicons/cov.ico b/packages/dev-tools-pages/public/favicons/cov.ico Binary files differnew file mode 100644 index 000000000..4f1172186 --- /dev/null +++ b/packages/dev-tools-pages/public/favicons/cov.ico diff --git a/packages/dev-tools-pages/public/favicons/profiler.ico b/packages/dev-tools-pages/public/favicons/profiler.ico Binary files differnew file mode 100644 index 000000000..65d38812b --- /dev/null +++ b/packages/dev-tools-pages/public/favicons/profiler.ico diff --git a/packages/dev-tools-pages/public/favicons/trace.ico b/packages/dev-tools-pages/public/favicons/trace.ico Binary files differnew file mode 100644 index 000000000..af00455d4 --- /dev/null +++ b/packages/dev-tools-pages/public/favicons/trace.ico 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 Binary files differdeleted file mode 100755 index 68c493c4f..000000000 --- a/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png +++ /dev/null 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 Binary files differdeleted file mode 100755 index a5abb0eb3..000000000 --- a/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png +++ /dev/null diff --git a/packages/dev-tools-pages/public/images/favicon/favicon.ico b/packages/dev-tools-pages/public/images/favicon/favicon.ico Binary files differdeleted file mode 100755 index b7ada2a1c..000000000 --- a/packages/dev-tools-pages/public/images/favicon/favicon.ico +++ /dev/null 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, }, }; |
