0x: The Protocol for Trading Tokens

From ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 11:23:16 -0800 Subject: feat: have basic code syntax highlighting working --- packages/website/package.json | 2 + packages/website/public/index.html | 217 ++++++++++++--------- .../ts/pages/documentation/developers_page.tsx | 4 + packages/website/ts/pages/instant/code_demo.tsx | 45 +++++ packages/website/ts/pages/instant/configurator.tsx | 7 +- yarn.lock | 128 +++++++++++- 6 files changed, 308 insertions(+), 95 deletions(-) create mode 100644 packages/website/ts/pages/instant/code_demo.tsx diff --git a/packages/website/package.json b/packages/website/package.json index dc10c7b1c..7d5c81858 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -54,6 +54,7 @@ "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", + "react-syntax-highlighter": "^10.1.1", "react-tooltip": "^3.2.7", "react-typist": "^2.0.4", "redux": "^3.6.0", @@ -83,6 +84,7 @@ "@types/react-helmet": "^5.0.6", "@types/react-redux": "^4.4.37", "@types/react-scroll": "1.5.3", + "@types/react-syntax-highlighter": "^0.0.8", "@types/react-tap-event-plugin": "0.0.30", "@types/redux": "^3.6.0", "@types/web3-provider-engine": "^14.0.0", diff --git a/packages/website/public/index.html b/packages/website/public/index.html index a8a61f8ad..538eca6d9 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -1,95 +1,132 @@ + + + + + + + + + 0x: The Protocol for Trading Tokens + + + + + + + + + + - - - - - - - - - 0x: The Protocol for Trading Tokens - - - - - - - - - - - + + + + + + + - - - - + + +

+ +

+ + + - - -

- -

- - - - - - - - - - - - \ No newline at end of file + t._e = []; + t.ready = function(f) { + t._e.push(f); + }; + return t; + })(document, 'script', 'twitter-wjs'); + + + + + + + + + diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index a84be7bfe..fcca2b6ad 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -2,6 +2,7 @@ import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/ import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle from 'react-document-title'; +import { Helmet } from 'react-helmet'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { Container } from 'ts/components/ui/container'; @@ -146,6 +147,9 @@ export class DevelopersPage extends React.Component + + + = props => { + const codeString = ` + + + + +`; + return ( + + {codeString} + + ); +}; diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index c836739bb..2314f968f 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; +import { CodeDemo } from 'ts/pages/instant/code_demo'; import { colors } from 'ts/style/colors'; export interface ConfiguratorProps { @@ -8,5 +9,9 @@ export interface ConfiguratorProps { } export const Configurator = (props: ConfiguratorProps) => ( - + + + + + ); diff --git a/yarn.lock b/yarn.lock index a7a55a7b3..e07aa724d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1531,6 +1531,12 @@ dependencies: "@types/react" "*" +"@types/react-syntax-highlighter@^0.0.8": + version "0.0.8" + resolved "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-0.0.8.tgz#ed44e2ead992c513327bcf2ede5eda7daa981421" + dependencies: + "@types/react" "*" + "@types/react-tap-event-plugin@0.0.30": version "0.0.30" resolved "https://registry.yarnpkg.com/@types/react-tap-event-plugin/-/react-tap-event-plugin-0.0.30.tgz#123f35080412f489b6770c5a65c159ff96654cb5" @@ -1906,6 +1912,10 @@ aes-js@^0.2.3: version "0.2.4" resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d" +aes-js@^3.1.1: + version "3.1.2" + resolved "https://registry.npmjs.org/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a" + agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0: version "4.2.1" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9" @@ -3351,7 +3361,7 @@ bs-logger@0.x: dependencies: fast-json-stable-stringify "^2.0.0" -bs58@=4.0.1: +bs58@=4.0.1, bs58@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a" dependencies: @@ -3374,6 +3384,14 @@ bs58check@^1.0.8: bs58 "^3.1.0" create-hash "^1.1.0" +bs58check@^2.1.2: + version "2.1.2" + resolved "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc" + dependencies: + bs58 "^4.0.0" + create-hash "^1.1.0" + safe-buffer "^5.1.2" + bser@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" @@ -4079,6 +4097,12 @@ combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5, combined- dependencies: delayed-stream "~1.0.0" +comma-separated-tokens@^1.0.0: + version "1.0.5" + resolved "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.5.tgz#b13793131d9ea2d2431cf5b507ddec258f0ce0db" + dependencies: + trim "0.0.1" + commander@2.11.0: version "2.11.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563" @@ -5970,6 +5994,19 @@ ethereumjs-wallet@0.6.0: utf8 "^2.1.1" uuid "^2.0.1" +ethereumjs-wallet@~0.6.0: + version "0.6.2" + resolved "https://registry.npmjs.org/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda" + dependencies: + aes-js "^3.1.1" + bs58check "^2.1.2" + ethereumjs-util "^5.2.0" + hdkey "^1.0.0" + safe-buffer "^5.1.2" + scrypt.js "^0.2.0" + utf8 "^3.0.0" + uuid "^3.3.2" + ethers@~4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.4.tgz#d3f85e8b27f4b59537e06526439b0fb15b44dc65" @@ -6318,6 +6355,12 @@ fastparse@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8" +fault@^1.0.2: + version "1.0.2" + resolved "https://registry.npmjs.org/fault/-/fault-1.0.2.tgz#c3d0fec202f172a3a4d414042ad2bb5e2a3ffbaa" + dependencies: + format "^0.2.2" + faye-websocket@^0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4" @@ -6616,6 +6659,10 @@ format-util@^1.0.3: version "1.0.3" resolved "https://registry.npmjs.org/format-util/-/format-util-1.0.3.tgz#032dca4a116262a12c43f4c3ec8566416c5b2d95" +format@^0.2.2: + version "0.2.2" + resolved "https://registry.npmjs.org/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b" + forwarded@~0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84" @@ -6778,7 +6825,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep: ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default" ethereumjs-util "^5.2.0" ethereumjs-vm "2.3.5" - ethereumjs-wallet "0.6.0" + ethereumjs-wallet "~0.6.0" fake-merkle-patricia-tree "~1.0.1" heap "~0.2.6" js-scrypt "^0.2.0" @@ -7478,6 +7525,19 @@ hash.js@1.1.3, hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.0" +hast-util-parse-selector@^2.2.0: + version "2.2.1" + resolved "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.1.tgz#4ddbae1ae12c124e3eb91b581d2556441766f0ab" + +hastscript@^5.0.0: + version "5.0.0" + resolved "https://registry.npmjs.org/hastscript/-/hastscript-5.0.0.tgz#fee10382c1bc4ba3f1be311521d368c047d2c43a" + dependencies: + comma-separated-tokens "^1.0.0" + hast-util-parse-selector "^2.2.0" + property-information "^5.0.1" + space-separated-tokens "^1.0.0" + hawk@3.1.3, hawk@~3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4" @@ -7503,6 +7563,14 @@ hdkey@^0.7.0, hdkey@^0.7.1: coinstring "^2.0.0" secp256k1 "^3.0.1" +hdkey@^1.0.0: + version "1.1.0" + resolved "https://registry.npmjs.org/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29" + dependencies: + coinstring "^2.0.0" + safe-buffer "^5.1.1" + secp256k1 "^3.0.1" + he@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" @@ -7518,7 +7586,7 @@ heap@~0.2.6: version "0.2.6" resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.6.tgz#087e1f10b046932fc8594dd9e6d378afc9d1e5ac" -highlight.js@^9.0.0, highlight.js@^9.11.0: +highlight.js@^9.0.0, highlight.js@^9.11.0, highlight.js@~9.12.0: version "9.12.0" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e" @@ -9875,6 +9943,13 @@ lowercase-keys@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f" +lowlight@~1.9.1: + version "1.9.2" + resolved "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz#0b9127e3cec2c3021b7795dd81005c709a42fdd1" + dependencies: + fault "^1.0.2" + highlight.js "~9.12.0" + lru-cache@2: version "2.7.3" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952" @@ -11443,6 +11518,17 @@ parse-entities@^1.1.0: is-decimal "^1.0.0" is-hexadecimal "^1.0.0" +parse-entities@^1.1.2: + version "1.2.0" + resolved "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.0.tgz#9deac087661b2e36814153cb78d7e54a4c5fd6f4" + dependencies: + character-entities "^1.0.0" + character-entities-legacy "^1.0.0" + character-reference-invalid "^1.0.0" + is-alphanumerical "^1.0.0" + is-decimal "^1.0.0" + is-hexadecimal "^1.0.0" + parse-filepath@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/parse-filepath/-/parse-filepath-1.0.2.tgz#a632127f53aaf3d15876f5872f3ffac763d6c891" @@ -12021,7 +12107,7 @@ pretty-hrtime@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" -prismjs@^1.15.0: +prismjs@^1.15.0, prismjs@^1.8.4, prismjs@~1.15.0: version "1.15.0" resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz#8801d332e472091ba8def94976c8877ad60398d9" optionalDependencies: @@ -12121,6 +12207,12 @@ prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, loose-envify "^1.3.1" object-assign "^4.1.1" +property-information@^5.0.1: + version "5.0.1" + resolved "https://registry.npmjs.org/property-information/-/property-information-5.0.1.tgz#c3b09f4f5750b1634c0b24205adbf78f18bdf94f" + dependencies: + xtend "^4.0.1" + proto-list@~1.2.1: version "1.2.4" resolved "http://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849" @@ -12584,6 +12676,16 @@ react-side-effect@^1.0.2, react-side-effect@^1.1.0: exenv "^1.2.1" shallowequal "^1.0.1" +react-syntax-highlighter@^10.1.1: + version "10.1.1" + resolved "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-10.1.1.tgz#1bf7ad4f2f16d2978b04594407b670671b4d3316" + dependencies: + babel-runtime "^6.18.0" + highlight.js "~9.12.0" + lowlight "~1.9.1" + prismjs "^1.8.4" + refractor "^2.4.1" + react-tabs@^2.0.0: version "2.2.2" resolved "https://registry.npmjs.org/react-tabs/-/react-tabs-2.2.2.tgz#2f2935da379889484751d1df47c1b639e5ee835d" @@ -12909,6 +13011,14 @@ redux@^3.6.0: loose-envify "^1.1.0" symbol-observable "^1.0.3" +refractor@^2.4.1: + version "2.6.2" + resolved "https://registry.npmjs.org/refractor/-/refractor-2.6.2.tgz#8e0877ab8864165275aafeea5d9c8eebe871552f" + dependencies: + hastscript "^5.0.0" + parse-entities "^1.1.2" + prismjs "~1.15.0" + regenerate@^1.2.1: version "1.3.3" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f" @@ -14093,6 +14203,12 @@ source-map@~0.2.0: dependencies: amdefine ">=0.0.4" +space-separated-tokens@^1.0.0: + version "1.1.2" + resolved "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.2.tgz#e95ab9d19ae841e200808cd96bc7bd0adbbb3412" + dependencies: + trim "0.0.1" + sparkles@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3" @@ -15622,6 +15738,10 @@ utf8@^2.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96" +utf8@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1" + util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" -- cgit From 6f394128d46420b336fb50a07f638b12bbb55eec Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 13:01:41 -0800 Subject: feat: improve styling of code demo component --- packages/website/ts/pages/instant/code_demo.tsx | 131 +++++++++++++++++++-- packages/website/ts/pages/instant/configurator.tsx | 7 +- 2 files changed, 126 insertions(+), 12 deletions(-) diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 9764227a1..b029cc368 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -1,24 +1,145 @@ import * as React from 'react'; import SyntaxHighlighter from 'react-syntax-highlighter'; import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs'; +import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; import { Container } from 'ts/components/ui/container'; const CustomPre = styled.pre` + margin: 0px; + line-height: 24px; code { background-color: inherit !important; border-radius: 0px; font-family: 'Roboto Mono', sans-serif; border: none; } + .lsl { + background-color: #2a2a2a !important; + color: #999; + height: 100%; + text-align: center; + padding-right: 5px !important; + padding-left: 5px; + margin-right: 5px; + line-height: 25px; + padding-top: 10px; + } + .xml { + position: relative; + top: 10px; + } `; +const customStyle = { + 'hljs-comment': { + color: '#7e7887', + }, + 'hljs-quote': { + color: '#7e7887', + }, + 'hljs-variable': { + color: '#be4678', + }, + 'hljs-template-variable': { + color: '#be4678', + }, + 'hljs-attribute': { + color: '#be4678', + }, + 'hljs-regexp': { + color: '#be4678', + }, + 'hljs-link': { + color: '#be4678', + }, + 'hljs-tag': { + color: '#61f5ff', + }, + 'hljs-name': { + color: '#61f5ff', + }, + 'hljs-selector-id': { + color: '#be4678', + }, + 'hljs-selector-class': { + color: '#be4678', + }, + 'hljs-number': { + color: '#c994ff', + }, + 'hljs-meta': { + color: '#aa573c', + }, + 'hljs-built_in': { + color: '#aa573c', + }, + 'hljs-builtin-name': { + color: '#aa573c', + }, + 'hljs-literal': { + color: '#aa573c', + }, + 'hljs-type': { + color: '#aa573c', + }, + 'hljs-params': { + color: '#aa573c', + }, + 'hljs-string': { + color: '#bcff88', + }, + 'hljs-symbol': { + color: '#2a9292', + }, + 'hljs-bullet': { + color: '#2a9292', + }, + 'hljs-title': { + color: '#576ddb', + }, + 'hljs-section': { + color: '#576ddb', + }, + 'hljs-keyword': { + color: '#955ae7', + }, + 'hljs-selector-tag': { + color: '#955ae7', + }, + 'hljs-deletion': { + color: '#19171c', + display: 'inline-block', + width: '100%', + backgroundColor: '#be4678', + }, + 'hljs-addition': { + color: '#19171c', + display: 'inline-block', + width: '100%', + backgroundColor: '#2a9292', + }, + hljs: { + display: 'block', + overflowX: 'auto', + background: colors.instantSecondaryBackground, + color: 'white', + fontSize: '12px', + }, + 'hljs-emphasis': { + fontStyle: 'italic', + }, + 'hljs-strong': { + fontWeight: 'bold', + }, +}; + export interface CodeDemoProps {} export const CodeDemo: React.StatelessComponent = props => { const codeString = ` - + `; return ( - + {codeString} ); diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 2314f968f..09a51d0bb 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -9,9 +9,8 @@ export interface ConfiguratorProps { } export const Configurator = (props: ConfiguratorProps) => ( - - - - + + Forms + ); -- cgit From 09e2157639ad2d986b80f5480a1e9188a56ff3f9 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 13:45:29 -0800 Subject: feat: factor out ActionLink component from features --- packages/website/ts/pages/instant/action_link.tsx | 51 +++++++++++++++++++++++ packages/website/ts/pages/instant/features.tsx | 40 ++---------------- 2 files changed, 54 insertions(+), 37 deletions(-) create mode 100644 packages/website/ts/pages/instant/action_link.tsx diff --git a/packages/website/ts/pages/instant/action_link.tsx b/packages/website/ts/pages/instant/action_link.tsx new file mode 100644 index 000000000..8a0bf24ff --- /dev/null +++ b/packages/website/ts/pages/instant/action_link.tsx @@ -0,0 +1,51 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { colors } from 'ts/style/colors'; +import { utils } from 'ts/utils/utils'; + +export interface ActionLinkProps { + displayText: string; + linkSrc?: string; + onClick?: () => void; + fontSize?: number; + color?: string; + className?: string; +} + +export class ActionLink extends React.Component { + public static defaultProps = { + fontSize: 16, + color: colors.white, + }; + public render(): React.ReactNode { + const { displayText, fontSize, color, className } = this.props; + return ( + + + + {displayText} + + + + + + + ); + } + + private _handleClick = (event: React.MouseEvent) => { + if (!_.isUndefined(this.props.onClick)) { + this.props.onClick(); + } else if (!_.isUndefined(this.props.linkSrc)) { + utils.openUrl(this.props.linkSrc); + } + }; +} diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index 9c1668c1c..6c6835311 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -2,6 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; +import { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link'; import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; @@ -61,17 +62,11 @@ export const Features = (props: FeatureProps) => { ); }; -interface LinkInfo { - displayText: string; - linkSrc?: string; - onClick?: () => void; -} - interface FeatureItemProps { imgSrc: string; title: string; description: string; - linkInfos: LinkInfo[]; + linkInfos: ActionLinkProps[]; screenWidth: ScreenWidths; } @@ -95,36 +90,7 @@ const FeatureItem = (props: FeatureItemProps) => { - {_.map(linkInfos, linkInfo => { - const onClick = (event: React.MouseEvent) => { - if (!_.isUndefined(linkInfo.onClick)) { - linkInfo.onClick(); - } else if (!_.isUndefined(linkInfo.linkSrc)) { - utils.openUrl(linkInfo.linkSrc); - } - }; - return ( - - - - {linkInfo.displayText} - - - - - - - ); - })} + {_.map(linkInfos, linkInfo => )} ); -- cgit From a41dfa9ae0924a342324e49d9a3eba22fb255667 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 13:45:40 -0800 Subject: feat: implement configurator layout --- packages/website/ts/pages/instant/code_demo.tsx | 6 ++++- packages/website/ts/pages/instant/configurator.tsx | 27 +++++++++++++++++++--- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index b029cc368..4f44a6160 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -9,6 +9,10 @@ import { Container } from 'ts/components/ui/container'; const CustomPre = styled.pre` margin: 0px; line-height: 24px; + overflow: hidden; + width: 600px; + height: 500px; + border-radius: 4px; code { background-color: inherit !important; border-radius: 0px; @@ -22,7 +26,7 @@ const CustomPre = styled.pre` text-align: center; padding-right: 5px !important; padding-left: 5px; - margin-right: 5px; + margin-right: 15px; line-height: 25px; padding-top: 10px; } diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 09a51d0bb..29a3e2b1e 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { ActionLink } from 'ts/pages/instant/action_link'; import { CodeDemo } from 'ts/pages/instant/code_demo'; import { colors } from 'ts/style/colors'; @@ -9,8 +11,27 @@ export interface ConfiguratorProps { } export const Configurator = (props: ConfiguratorProps) => ( - - Forms - + + + + + 0x Instant Configurator + + + + + + + + Code Snippet + + + + + ); -- cgit From 0af07bcf49f62aeeed4aa5ae7bf0e4d5835836e9 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 14:10:12 -0800 Subject: feat: move instant base config to types file --- .../src/components/zero_ex_instant_provider.tsx | 20 ++------------------ packages/instant/src/types.ts | 17 +++++++++++++++++ 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index e006a5a5f..a57dd7993 100644 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -11,7 +11,7 @@ import { asyncData } from '../redux/async_data'; import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer'; import { store, Store } from '../redux/store'; import { fonts } from '../style/fonts'; -import { AccountState, AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types'; +import { AccountState, AffiliateInfo, AssetMetaData, Network, ZeroExInstantBaseConfig } from '../types'; import { analytics, disableAnalytics } from '../util/analytics'; import { assetUtils } from '../util/asset'; import { errorFlasher } from '../util/error_flasher'; @@ -20,23 +20,7 @@ import { Heartbeater } from '../util/heartbeater'; import { generateAccountHeartbeater, generateBuyQuoteHeartbeater } from '../util/heartbeater_factory'; import { providerStateFactory } from '../util/provider_state_factory'; -export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps & - Partial; - -export interface ZeroExInstantProviderRequiredProps { - orderSource: OrderSource; -} - -export interface ZeroExInstantProviderOptionalProps { - provider: Provider; - availableAssetDatas: string[]; - defaultAssetBuyAmount: number; - defaultSelectedAssetData: string; - additionalAssetMetaDataMap: ObjectMap; - networkId: Network; - affiliateInfo: AffiliateInfo; - shouldDisableAnalyticsTracking: boolean; -} +export type ZeroExInstantProviderProps = ZeroExInstantBaseConfig; export class ZeroExInstantProvider extends React.Component { private readonly _store: Store; diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index 999d50fed..233390bf5 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -167,3 +167,20 @@ export enum ProviderType { Cipher = 'CIPHER', Fallback = 'FALLBACK', } + +export interface ZeroExInstantRequiredBaseConfig { + orderSource: OrderSource; +} + +export interface ZeroExInstantOptionalBaseConfig { + provider: Provider; + availableAssetDatas: string[]; + defaultAssetBuyAmount: number; + defaultSelectedAssetData: string; + additionalAssetMetaDataMap: ObjectMap; + networkId: Network; + affiliateInfo: AffiliateInfo; + shouldDisableAnalyticsTracking: boolean; +} + +export type ZeroExInstantBaseConfig = ZeroExInstantRequiredBaseConfig & Partial; -- cgit From f80768cae0c2fdb71237bbdddecc67aec1c1f67f Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 15:57:35 -0800 Subject: feat: add Select component and use for configurator --- packages/website/ts/components/ui/container.tsx | 33 +++- packages/website/ts/components/ui/select.tsx | 168 +++++++++++++++++++++ packages/website/ts/pages/instant/action_link.tsx | 2 +- packages/website/ts/pages/instant/code_demo.tsx | 3 - .../website/ts/pages/instant/config_generator.tsx | 38 +++++ packages/website/ts/pages/instant/configurator.tsx | 70 ++++++--- packages/website/ts/pages/instant/features.tsx | 2 +- 7 files changed, 285 insertions(+), 31 deletions(-) create mode 100644 packages/website/ts/components/ui/select.tsx create mode 100644 packages/website/ts/pages/instant/config_generator.tsx diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 7eab2a50f..cd0ed9986 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -1,6 +1,9 @@ import { TextAlignProperty } from 'csstype'; +import { darken } from 'polished'; import * as React from 'react'; +import { styled } from 'ts/style/theme'; + type StringOrNum = string | number; export type ContainerTag = 'div' | 'span'; @@ -17,10 +20,13 @@ export interface ContainerProps { paddingLeft?: StringOrNum; backgroundColor?: string; background?: string; + border?: string; + borderTop?: string; borderRadius?: StringOrNum; borderBottomLeftRadius?: StringOrNum; borderBottomRightRadius?: StringOrNum; borderBottom?: StringOrNum; + borderColor?: string; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; @@ -42,10 +48,23 @@ export interface ContainerProps { id?: string; onClick?: (event: React.MouseEvent) => void; overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; + shouldDarkenOnHover?: boolean; + shouldAddBoxShadowOnHover?: boolean; } -export const Container: React.StatelessComponent = props => { - const { children, className, Tag, isHidden, id, onClick, ...style } = props; +export const PlainContainer: React.StatelessComponent = props => { + const { + children, + className, + Tag, + isHidden, + id, + onClick, + shouldDarkenOnHover, + shouldAddBoxShadowOnHover, + // tslint:disable-next-line:trailing-comma + ...style + } = props; const visibility = isHidden ? 'hidden' : undefined; return ( @@ -54,6 +73,16 @@ export const Container: React.StatelessComponent = props => { ); }; +export const Container = styled(PlainContainer)` + &:hover { + ${props => + props.shouldDarkenOnHover + ? `background-color: ${props.backgroundColor ? darken(0.05, props.backgroundColor) : 'none'} !important` + : ''}; + ${props => (props.shouldAddBoxShadowOnHover ? 'box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)' : '')}; + } +`; + Container.defaultProps = { Tag: 'div', }; diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx new file mode 100644 index 000000000..abf202c67 --- /dev/null +++ b/packages/website/ts/components/ui/select.tsx @@ -0,0 +1,168 @@ +import { colors } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { zIndex } from 'ts/style/z_index'; + +import { Container } from './container'; +import { Overlay } from './overlay'; +import { Text } from './text'; + +export interface SelectItemConfig { + text: string; + onClick?: () => void; +} + +export interface SelectProps { + value: string; + label?: string; + items: SelectItemConfig[]; + onOpen?: () => void; + border?: string; + fontSize?: string; + iconSize?: number; + textColor?: string; + labelColor?: string; + backgroundColor?: string; +} + +export interface SelectState { + isOpen: boolean; +} + +export class Select extends React.Component { + public static defaultProps = { + items: [] as SelectItemConfig[], + textColor: colors.black, + backgroundColor: colors.white, + fontSize: '16px', + iconSize: 25, + }; + public state: SelectState = { + isOpen: false, + }; + public render(): React.ReactNode { + const { value, label, items, border, textColor, labelColor, backgroundColor, fontSize, iconSize } = this.props; + const { isOpen } = this.state; + const hasItems = !_.isEmpty(items); + const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px'; + return ( + + {isOpen && ( + + )} + + + + + {value} + + + {label && ( + + {label} + + )} + {hasItems && ( + + + + )} + + + + {isOpen && ( + + {_.map(items, (item, index) => ( + + ))} + + )} + + + ); + } + private readonly _handleDropdownClick = (): void => { + if (_.isEmpty(this.props.items)) { + return; + } + const isOpen = !this.state.isOpen; + this.setState({ + isOpen, + }); + + if (isOpen && this.props.onOpen) { + this.props.onOpen(); + } + }; + private readonly _closeDropdown = (): void => { + this.setState({ + isOpen: false, + }); + }; +} + +export interface SelectItemProps extends SelectItemConfig { + text: string; + onClick?: () => void; + isLast: boolean; + backgroundColor?: string; + border?: string; + textColor?: string; + fontSize?: string; +} + +export const SelectItem: React.StatelessComponent = ({ + text, + onClick, + isLast, + border, + backgroundColor, + textColor, + fontSize, +}) => ( + + + {text} + + +); diff --git a/packages/website/ts/pages/instant/action_link.tsx b/packages/website/ts/pages/instant/action_link.tsx index 8a0bf24ff..5612dc25b 100644 --- a/packages/website/ts/pages/instant/action_link.tsx +++ b/packages/website/ts/pages/instant/action_link.tsx @@ -41,7 +41,7 @@ export class ActionLink extends React.Component { ); } - private _handleClick = (event: React.MouseEvent) => { + private readonly _handleClick = (event: React.MouseEvent) => { if (!_.isUndefined(this.props.onClick)) { this.props.onClick(); } else if (!_.isUndefined(this.props.linkSrc)) { diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 4f44a6160..e9ecad40d 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -1,11 +1,8 @@ import * as React from 'react'; import SyntaxHighlighter from 'react-syntax-highlighter'; -import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; -import { Container } from 'ts/components/ui/container'; - const CustomPre = styled.pre` margin: 0px; line-height: 24px; diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx new file mode 100644 index 000000000..d63975e31 --- /dev/null +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -0,0 +1,38 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Container } from 'ts/components/ui/container'; +import { Select, SelectItemConfig } from 'ts/components/ui/select'; + +import { ZeroExInstantBaseConfig } from '../../../../instant/src/types'; + +export interface ConfigGeneratorProps { + value: ZeroExInstantBaseConfig; + onConfigChange: (config: ZeroExInstantBaseConfig) => void; +} + +const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrelay.xyz/v2/']; + +export class ConfigGenerator extends React.Component { + public render(): React.ReactNode { + const { value } = this.props; + return ( + + + + + - + {this._renderTokenMultiSelectOrSpinner()} ); } + private readonly _getTokenSelectorProps = (): ConfigGeneratorSectionProps => { + if (_.isUndefined(this.props.value.availableAssetDatas)) { + return { + title: 'What tokens can users buy?', + actionText: 'Unselect All', + onActionTextClick: this._handleUnselectAllClick, + }; + } + return { + title: 'What tokens can users buy?', + actionText: 'Select All', + onActionTextClick: this._handleSelectAllClick, + }; + }; private readonly _generateItems = (): SelectItemConfig[] => { return _.map(SRA_ENDPOINTS, endpoint => ({ text: endpoint, onClick: this._handleSRASelection.bind(this, endpoint), })); }; + private readonly _getAllKnownAssetDatas = (): string[] => { + return _.map(this.state.allKnownTokens, token => assetDataUtils.encodeERC20AssetData(token.address)); + }; private readonly _handleSRASelection = (sraEndpoint: string) => { - const newConfig = { + const newConfig: ZeroExInstantBaseConfig = { ...this.props.value, orderSource: sraEndpoint, }; this.props.onConfigChange(newConfig); }; + private readonly _handleSelectAllClick = () => { + const newConfig: ZeroExInstantBaseConfig = { + ...this.props.value, + availableAssetDatas: undefined, + }; + this.props.onConfigChange(newConfig); + }; + private readonly _handleUnselectAllClick = () => { + const newConfig: ZeroExInstantBaseConfig = { + ...this.props.value, + availableAssetDatas: [], + }; + this.props.onConfigChange(newConfig); + }; private readonly _handleTokenClick = (assetData: string) => { const { value } = this.props; - let newAvailableAssetDatas = []; - if (_.includes(value.availableAssetDatas, assetData)) { + const { allKnownTokens } = this.state; + let newAvailableAssetDatas: string[] = []; + const availableAssetDatas = value.availableAssetDatas; + if (_.isUndefined(availableAssetDatas)) { + // It being undefined means it's all tokens. + const allKnownAssetDatas = this._getAllKnownAssetDatas(); + newAvailableAssetDatas = _.pull(allKnownAssetDatas, assetData); + } else if (!_.includes(availableAssetDatas, assetData)) { // Add it - newAvailableAssetDatas = [...value.availableAssetDatas, assetData]; + newAvailableAssetDatas = [...availableAssetDatas, assetData]; } else { // Remove it - newAvailableAssetDatas = _.remove(value.availableAssetDatas, assetData); + newAvailableAssetDatas = _.pull(availableAssetDatas, assetData); } - const newConfig = { + const newConfig: ZeroExInstantBaseConfig = { ...this.props.value, availableAssetDatas: newAvailableAssetDatas, }; this.props.onConfigChange(newConfig); }; - private _setAllKnownTokens = async (callback: () => void): Promise => { + private readonly _setAllKnownTokens = async (callback: () => void): Promise => { const tokenInfos = await backendClient.getTokenInfosAsync(); const allKnownTokens = _.reduce( tokenInfos, @@ -101,7 +139,7 @@ export class ConfigGenerator extends React.Component { ); this.setState({ allKnownTokens }, callback); }; - private _setAvailableAssetsFromOrderProvider = async (): Promise => { + private readonly _setAvailableAssetsFromOrderProvider = async (): Promise => { const { value } = this.props; if (!_.isUndefined(value.orderSource) && _.isString(value.orderSource)) { this.setState({ isLoadingAvailableTokens: true }); @@ -119,13 +157,23 @@ export class ConfigGenerator extends React.Component { this.setState({ availableTokens, isLoadingAvailableTokens: false }); } }; - private _renderTokenMultiSelectOrSpinner = (): React.ReactNode => { + private readonly _renderTokenMultiSelectOrSpinner = (): React.ReactNode => { const { value } = this.props; const { availableTokens, isLoadingAvailableTokens } = this.state; + const multiSelectHeight = '200px'; if (isLoadingAvailableTokens) { return ( - - + + + + + Loading... ); } @@ -133,15 +181,24 @@ export class ConfigGenerator extends React.Component { const assetData = assetDataUtils.encodeERC20AssetData(token.address); return { value: assetDataUtils.encodeERC20AssetData(token.address), - displayText: ( - - {token.symbol} - {token.name} - + renderItemContent: (isSelected: boolean) => ( + + + + + + {token.symbol} — {token.name} + + ), onClick: this._handleTokenClick.bind(this, assetData), }; }); - return ; + return ; }; } @@ -151,13 +208,23 @@ export interface ConfigGeneratorSectionProps { onActionTextClick?: () => void; } -export const ConfigGeneratorSection: React.StatelessComponent = props => ( +export const ConfigGeneratorSection: React.StatelessComponent = ({ + title, + actionText, + onActionTextClick, + children, +}) => ( - + - {props.title} + {title} + {actionText && ( + + {actionText} + + )} - {props.children} + {children} ); diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index cf9985675..f4987c0de 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -18,9 +18,10 @@ export interface ConfiguratorState { } export class Configurator extends React.Component { - public state = { + public state: ConfiguratorState = { instantConfig: { orderSource: 'https://api.radarrelay.com/0x/v2/', + availableAssetDatas: [], }, }; public render(): React.ReactNode { diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index 1e187c9da..c88958bbf 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -90,7 +90,11 @@ const FeatureItem = (props: FeatureItemProps) => { - {_.map(linkInfos, linkInfo => )} + {_.map(linkInfos, linkInfo => ( + + + + ))} ); -- cgit From 9e69257b0db8ce959c0209d4389f9e3a753839bd Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 30 Nov 2018 11:08:49 -0800 Subject: feat: implement code generation --- packages/website/ts/pages/instant/code_demo.tsx | 34 ++++++------------- packages/website/ts/pages/instant/configurator.tsx | 38 +++++++++++++++++++++- packages/website/ts/pages/instant/features.tsx | 4 +-- 3 files changed, 49 insertions(+), 27 deletions(-) diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index e9ecad40d..fa0cebc62 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -6,7 +6,7 @@ import { styled } from 'ts/style/theme'; const CustomPre = styled.pre` margin: 0px; line-height: 24px; - overflow: hidden; + overflow: scroll; width: 600px; height: 500px; border-radius: 4px; @@ -123,7 +123,7 @@ const customStyle = { }, hljs: { display: 'block', - overflowX: 'auto', + overflowX: 'hidden', background: colors.instantSecondaryBackground, color: 'white', fontSize: '12px', @@ -136,26 +136,12 @@ const customStyle = { }, }; -export interface CodeDemoProps {} +export interface CodeDemoProps { + children: string; +} -export const CodeDemo: React.StatelessComponent = props => { - const codeString = ` - - - - -`; - return ( - - {codeString} - - ); -}; +export const CodeDemo: React.StatelessComponent = props => ( + + {props.children} + +); diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index f4987c0de..0fb6d7ef8 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; @@ -26,6 +27,7 @@ export class Configurator extends React.Component { }; public render(): React.ReactNode { const { hash } = this.props; + const codeToDisplay = this._generateCodeDemoCode(); return ( { - + {codeToDisplay} ); @@ -57,4 +59,38 @@ export class Configurator extends React.Component { instantConfig: config, }); }; + private readonly _generateCodeDemoCode = (): string => { + const { instantConfig } = this.state; + console.log(instantConfig.availableAssetDatas); + return ` + + + + + `; + }; + private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { + const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); + if (availableAssetDatas.length < 2) { + return `[${stringAvailableAssetDatas.join(', ')}]`; + } + return `[\n\t\t\t${stringAvailableAssetDatas.join(', \n\t\t\t')}\n\t\t]`; + }; } diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index c88958bbf..230a8496b 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -91,8 +91,8 @@ const FeatureItem = (props: FeatureItemProps) => { {_.map(linkInfos, linkInfo => ( - - + + ))} -- cgit From 4b6ac96a8db908b02a352357592dfef986e23fdc Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 30 Nov 2018 16:01:16 -0800 Subject: fix: use correct styles even when syntax highlighter component removes classnames on second render --- packages/website/ts/pages/instant/code_demo.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index fa0cebc62..20eb6b8d1 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -8,7 +8,8 @@ const CustomPre = styled.pre` line-height: 24px; overflow: scroll; width: 600px; - height: 500px; + height: 100%; + max-height: 800px; border-radius: 4px; code { background-color: inherit !important; @@ -16,7 +17,7 @@ const CustomPre = styled.pre` font-family: 'Roboto Mono', sans-serif; border: none; } - .lsl { + code:first-of-type { background-color: #2a2a2a !important; color: #999; height: 100%; @@ -27,7 +28,7 @@ const CustomPre = styled.pre` line-height: 25px; padding-top: 10px; } - .xml { + code:last-of-type { position: relative; top: 10px; } -- cgit From a192b309f339f451d647f4b9f71eac2d6684f738 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 12:24:37 -0800 Subject: feat: implement basic feeRecipient address in config generator --- packages/website/ts/components/ui/input.tsx | 6 ++- .../website/ts/pages/instant/config_generator.tsx | 22 +++++++- .../instant/config_generator_address_input.tsx | 60 ++++++++++++++++++++++ packages/website/ts/pages/instant/configurator.tsx | 19 ++++--- 4 files changed, 96 insertions(+), 11 deletions(-) create mode 100644 packages/website/ts/pages/instant/config_generator_address_input.tsx diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index e5f4f6c70..1f56c814f 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -8,6 +8,7 @@ export interface InputProps { width?: string; fontSize?: string; fontColor?: string; + border?: string; placeholderColor?: string; placeholder?: string; backgroundColor?: string; @@ -23,9 +24,11 @@ export const Input = styled(PlainInput)` width: ${props => props.width}; padding: 0.8em 1.2em; border-radius: 3px; + box-sizing: border-box; font-family: 'Roboto Mono'; color: ${props => props.fontColor}; - border: none; + border: ${props => props.border}; + outline: none; background-color: ${props => props.backgroundColor}; &::placeholder { color: ${props => props.placeholderColor}; @@ -38,6 +41,7 @@ Input.defaultProps = { fontColor: colors.darkestGrey, placeholderColor: colors.darkGrey, fontSize: '12px', + border: 'none', }; Input.displayName = 'Input'; diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index d1ea66557..9c3161dcc 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -11,6 +11,7 @@ import { MultiSelect } from 'ts/components/ui/multi_select'; import { Select, SelectItemConfig } from 'ts/components/ui/select'; import { Spinner } from 'ts/components/ui/spinner'; import { Text } from 'ts/components/ui/text'; +import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input'; import { colors } from 'ts/style/colors'; import { WebsiteBackendTokenInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; @@ -32,7 +33,7 @@ export interface ConfigGeneratorState { const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrelay.xyz/v2/']; -export class ConfigGenerator extends React.Component { +export class ConfigGenerator extends React.Component { public state: ConfigGeneratorState = { isLoadingAvailableTokens: true, allKnownTokens: {}, @@ -52,12 +53,18 @@ export class ConfigGenerator extends React.Component { } return ( - + + {hasError && ( + + + {errMsg} + + + )} + + ); + } + + private _handleChange = (event: React.ChangeEvent): void => { + const address = event.target.value; + const isValidAddress = addressUtils.isAddress(address.toLowerCase()) || address === ''; + const errMsg = isValidAddress ? '' : 'Please enter a valid Ethereum address'; + this.setState({ + errMsg, + }); + this.props.onChange(address); + }; +} diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 0fb6d7ef8..e72f07a70 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -23,6 +23,10 @@ export class Configurator extends React.Component { instantConfig: { orderSource: 'https://api.radarrelay.com/0x/v2/', availableAssetDatas: [], + affiliateInfo: { + feeRecipient: '', + feePercentage: 0.1, + }, }, }; public render(): React.ReactNode { @@ -61,7 +65,6 @@ export class Configurator extends React.Component { }; private readonly _generateCodeDemoCode = (): string => { const { instantConfig } = this.state; - console.log(instantConfig.availableAssetDatas); return ` @@ -69,18 +72,18 @@ export class Configurator extends React.Component { -- cgit From de1c296d280266d71aeebcfc7050de639536513c Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 12:54:29 -0800 Subject: feat: add fee percentage slier --- .../website/ts/pages/instant/config_generator.tsx | 28 ++++++++++++++++++++++ .../instant/config_generator_address_input.tsx | 2 +- packages/website/ts/pages/instant/configurator.tsx | 2 +- 3 files changed, 30 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 9c3161dcc..8b56834ea 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -3,6 +3,7 @@ import { getContractAddressesForNetworkOrThrow } from '@0x/contract-addresses'; import { assetDataUtils } from '@0x/order-utils'; import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; +import Slider from 'material-ui/Slider'; import * as React from 'react'; import { CheckMark } from 'ts/components/ui/check_mark'; @@ -65,6 +66,19 @@ export class ConfigGenerator extends React.Component + + + ); } @@ -91,6 +105,9 @@ export class ConfigGenerator extends React.Component { return _.map(this.state.allKnownTokens, token => assetDataUtils.encodeERC20AssetData(token.address)); }; + private readonly _handleAffiliatePercentageLearnMoreClick = (): void => { + window.open('/wiki#Learn-About-Affiliate-Fees', '_blank'); + }; private readonly _handleSRASelection = (sraEndpoint: string) => { const newConfig: ZeroExInstantBaseConfig = { ...this.props.value, @@ -109,6 +126,17 @@ export class ConfigGenerator extends React.Component { + const oldConfig: ZeroExInstantBaseConfig = this.props.value; + const newConfig: ZeroExInstantBaseConfig = { + ...oldConfig, + affiliateInfo: { + feeRecipient: oldConfig.affiliateInfo.feeRecipient, + feePercentage: value, + }, + }; + this.props.onConfigChange(newConfig); + }; private readonly _handleSelectAllClick = () => { const newConfig: ZeroExInstantBaseConfig = { ...this.props.value, diff --git a/packages/website/ts/pages/instant/config_generator_address_input.tsx b/packages/website/ts/pages/instant/config_generator_address_input.tsx index dbda547cd..de2640f48 100644 --- a/packages/website/ts/pages/instant/config_generator_address_input.tsx +++ b/packages/website/ts/pages/instant/config_generator_address_input.tsx @@ -48,7 +48,7 @@ export class ConfigGeneratorAddressInput extends React.Component< ); } - private _handleChange = (event: React.ChangeEvent): void => { + private readonly _handleChange = (event: React.ChangeEvent): void => { const address = event.target.value; const isValidAddress = addressUtils.isAddress(address.toLowerCase()) || address === ''; const errMsg = isValidAddress ? '' : 'Please enter a valid Ethereum address'; diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index e72f07a70..0ce1d9810 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -25,7 +25,7 @@ export class Configurator extends React.Component { availableAssetDatas: [], affiliateInfo: { feeRecipient: '', - feePercentage: 0.1, + feePercentage: 0.01, }, }, }; -- cgit From 50bfbda79a312651581f03614c1b4f4cbbe49cf1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 14:30:38 -0800 Subject: feat: add fee percentage slider --- packages/website/ts/pages/instant/code_demo.tsx | 2 +- .../website/ts/pages/instant/config_generator.tsx | 27 ++++++++++++++---- .../instant/config_generator_address_input.tsx | 14 ++++------ packages/website/ts/pages/instant/configurator.tsx | 32 +++++++++++----------- 4 files changed, 44 insertions(+), 31 deletions(-) diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 20eb6b8d1..e57e39dff 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -20,7 +20,7 @@ const CustomPre = styled.pre` code:first-of-type { background-color: #2a2a2a !important; color: #999; - height: 100%; + min-height: 100%; text-align: center; padding-right: 5px !important; padding-left: 5px; diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 8b56834ea..efd1be096 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -53,14 +53,14 @@ export class ConfigGenerator extends React.Component + - {hasError && ( - - - {errMsg} - - - )} + + + {errMsg} + + ); } diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 0ce1d9810..5700bdc1d 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -46,7 +46,7 @@ export class Configurator extends React.Component { - + Code Snippet @@ -66,34 +66,34 @@ export class Configurator extends React.Component { private readonly _generateCodeDemoCode = (): string => { const { instantConfig } = this.state; return ` - - - - + + + - `; + }, 'body'); + +`; }; private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); if (availableAssetDatas.length < 2) { return `[${stringAvailableAssetDatas.join(', ')}]`; } - return `[\n\t\t\t${stringAvailableAssetDatas.join(', \n\t\t\t')}\n\t\t]`; + return `[\n\t\t${stringAvailableAssetDatas.join(', \n\t\t')}\n ]`; }; } -- cgit From d8a3fc0be012ff88a851d2f388662b4aaaec5199 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 15:07:24 -0800 Subject: feat: make (optional) label inline --- packages/website/ts/pages/instant/config_generator.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index efd1be096..08aaa1d81 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -267,11 +267,12 @@ export const ConfigGeneratorSection: React.StatelessComponent - + {title} {isOptional && ( - + + {' '} (optional) )} -- cgit From 48bfe9274079be308df754f19dcd0030f014b93c Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 16:47:52 -0800 Subject: feat: create more dank slider --- packages/website/package.json | 2 + .../website/ts/pages/instant/config_generator.tsx | 9 +- .../ts/pages/instant/fee_percentage_slider.tsx | 81 ++++++++++++++ yarn.lock | 120 +++++++++++++++++++-- 4 files changed, 199 insertions(+), 13 deletions(-) create mode 100644 packages/website/ts/pages/instant/fee_percentage_slider.tsx diff --git a/packages/website/package.json b/packages/website/package.json index c02e1eee2..5d2e563e9 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -48,6 +48,7 @@ "numeral": "^2.0.6", "polished": "^1.9.2", "query-string": "^6.0.0", + "rc-slider": "^8.6.3", "react": "^16.4.2", "react-copy-to-clipboard": "^5.0.0", "react-document-title": "^2.0.3", @@ -80,6 +81,7 @@ "@types/node": "*", "@types/numeral": "^0.0.22", "@types/query-string": "^5.1.0", + "@types/rc-slider": "^8.6.0", "@types/react": "^16.4.2", "@types/react-copy-to-clipboard": "^4.2.0", "@types/react-dom": "^16.0.7", diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 08aaa1d81..facda850e 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -3,7 +3,6 @@ import { getContractAddressesForNetworkOrThrow } from '@0x/contract-addresses'; import { assetDataUtils } from '@0x/order-utils'; import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; -import Slider from 'material-ui/Slider'; import * as React from 'react'; import { CheckMark } from 'ts/components/ui/check_mark'; @@ -13,6 +12,7 @@ import { Select, SelectItemConfig } from 'ts/components/ui/select'; import { Spinner } from 'ts/components/ui/spinner'; import { Text } from 'ts/components/ui/text'; import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input'; +import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider'; import { colors } from 'ts/style/colors'; import { WebsiteBackendTokenInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; @@ -71,10 +71,7 @@ export class ConfigGenerator extends React.Component - @@ -126,7 +123,7 @@ export class ConfigGenerator extends React.Component { + private readonly _handleAffiliatePercentageChange = (value: number) => { const oldConfig: ZeroExInstantBaseConfig = this.props.value; const newConfig: ZeroExInstantBaseConfig = { ...oldConfig, diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx new file mode 100644 index 000000000..e57319ed5 --- /dev/null +++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx @@ -0,0 +1,81 @@ +import Slider from 'rc-slider'; +import 'rc-slider/assets/index.css'; +import * as React from 'react'; + +import { Text } from 'ts/components/ui/text'; +import { colors } from 'ts/style/colors'; +import { injectGlobal, styled } from 'ts/style/theme'; + +const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider); + +injectGlobal` + .rc-slider-tooltip-inner { + box-shadow: none !important; + background-color: ${colors.white} !important; + border-radius: 4px !important; + padding: 3px 12px !important; + height: auto !important; + position: relative; + top: 7px; + &: after { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(136, 183, 213, 0); + border-width: 6px; + bottom: 100%; + left: 100%; + border-bottom-color: ${colors.white}; + margin-left: -60%; + } + } +`; + +const StyledSlider = styled(SliderWithTooltip)` + .rc-slider-tooltip-inner { + background-color: ${colors.white}; + box-shadow: none; + padding: 3px; + } +`; + +export interface FeePercentageSliderProps { + value: number; + onChange: (value: number) => void; +} + +export class FeePercentageSlider extends React.Component { + public render(): React.ReactNode { + return ( + + ); + } + private readonly _feePercentageSliderFormatter = (value: number): React.ReactNode => { + return {`${(value * 100).toFixed(2)}%`}; + }; +} diff --git a/yarn.lock b/yarn.lock index ed01009aa..c64f666e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1457,6 +1457,19 @@ version "5.1.0" resolved "https://registry.yarnpkg.com/@types/query-string/-/query-string-5.1.0.tgz#7f40cdea49ddafa0ea4f3db35fb6c24d3bfd4dcc" +"@types/rc-slider@^8.6.0": + version "8.6.0" + resolved "https://registry.npmjs.org/@types/rc-slider/-/rc-slider-8.6.0.tgz#7f061a920b067825c8455cf481c57b0927889c72" + dependencies: + "@types/rc-tooltip" "*" + "@types/react" "*" + +"@types/rc-tooltip@*": + version "3.7.0" + resolved "https://registry.npmjs.org/@types/rc-tooltip/-/rc-tooltip-3.7.0.tgz#6dc9898dc426495baea1b786e5dbde8980bf9737" + dependencies: + "@types/react" "*" + "@types/react-addons-linked-state-mixin@*": version "0.14.19" resolved "https://registry.yarnpkg.com/@types/react-addons-linked-state-mixin/-/react-addons-linked-state-mixin-0.14.19.tgz#7ef00a5618a089da4a99e1f58c9aa4c1781d46d5" @@ -1898,6 +1911,12 @@ acorn@^6.0.2: version "6.0.4" resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.0.4.tgz#77377e7353b72ec5104550aa2d2097a2fd40b754" +add-dom-event-listener@^1.1.0: + version "1.1.0" + resolved "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz#6a92db3a0dd0abc254e095c0f1dc14acbbaae310" + dependencies: + object-assign "4.x" + aes-js@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d" @@ -2856,7 +2875,7 @@ babel-register@^6.26.0: mkdirp "^0.5.1" source-map-support "^0.4.15" -babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0: +babel-runtime@6.x, babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" dependencies: @@ -4147,10 +4166,20 @@ compare-versions@^3.0.1: version "3.1.0" resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.1.0.tgz#43310256a5c555aaed4193c04d8f154cf9c6efd5" +component-classes@^1.2.5: + version "1.2.6" + resolved "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz#c642394c3618a4d8b0b8919efccbbd930e5cd691" + dependencies: + component-indexof "0.0.3" + component-emitter@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6" +component-indexof@0.0.3: + version "0.0.3" + resolved "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz#11d091312239eb8f32c8f25ae9cb002ffe8d3c24" + compressible@~2.0.13: version "2.0.13" resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.13.tgz#0d1020ab924b2fdb4d6279875c7d6daba6baa7a9" @@ -4597,6 +4626,13 @@ crypto-random-string@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e" +css-animation@^1.3.2: + version "1.5.0" + resolved "https://registry.npmjs.org/css-animation/-/css-animation-1.5.0.tgz#c96b9097a5ef74a7be8480b45cc44e4ec6ca2bf5" + dependencies: + babel-runtime "6.x" + component-classes "^1.2.5" + css-color-keywords@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" @@ -5216,6 +5252,10 @@ doctrine@^2.1.0: dependencies: esutils "^2.0.2" +dom-align@^1.7.0: + version "1.8.0" + resolved "https://registry.npmjs.org/dom-align/-/dom-align-1.8.0.tgz#c0e89b5b674c6e836cd248c52c2992135f093654" + dom-helpers@^3.2.0, dom-helpers@^3.2.1, dom-helpers@^3.3.1: version "3.3.1" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6" @@ -9767,7 +9807,7 @@ lodash.isequal@^4.0.0, lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" -lodash.keys@^3.0.0: +lodash.keys@^3.0.0, lodash.keys@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a" dependencies: @@ -11091,14 +11131,14 @@ oauth-sign@~0.9.0: version "0.9.0" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455" +object-assign@4.x, object-assign@^4, object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" + object-assign@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2" -object-assign@^4, object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" - object-copy@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c" @@ -12231,7 +12271,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.2: +prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.2: version "15.6.2" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" dependencies: @@ -12531,6 +12571,66 @@ raw-loader@^0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa" +rc-align@^2.4.0: + version "2.4.3" + resolved "https://registry.npmjs.org/rc-align/-/rc-align-2.4.3.tgz#b9b3c2a6d68adae71a8e1d041cd5e3b2a655f99a" + dependencies: + babel-runtime "^6.26.0" + dom-align "^1.7.0" + prop-types "^15.5.8" + rc-util "^4.0.4" + +rc-animate@2.x: + version "2.6.0" + resolved "https://registry.npmjs.org/rc-animate/-/rc-animate-2.6.0.tgz#ca8440d042781af7a1329d84f97ea94794c5ec15" + dependencies: + babel-runtime "6.x" + classnames "^2.2.6" + css-animation "^1.3.2" + prop-types "15.x" + raf "^3.4.0" + react-lifecycles-compat "^3.0.4" + +rc-slider@^8.6.3: + version "8.6.3" + resolved "https://registry.npmjs.org/rc-slider/-/rc-slider-8.6.3.tgz#1ca0e0bd2863252741de75e7bf8c9f2cfcffccb7" + dependencies: + babel-runtime "6.x" + classnames "^2.2.5" + prop-types "^15.5.4" + rc-tooltip "^3.7.0" + rc-util "^4.0.4" + shallowequal "^1.0.1" + warning "^3.0.0" + +rc-tooltip@^3.7.0: + version "3.7.3" + resolved "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.3.tgz#280aec6afcaa44e8dff0480fbaff9e87fc00aecc" + dependencies: + babel-runtime "6.x" + prop-types "^15.5.8" + rc-trigger "^2.2.2" + +rc-trigger@^2.2.2: + version "2.6.2" + resolved "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.6.2.tgz#a9c09ba5fad63af3b2ec46349c7db6cb46657001" + dependencies: + babel-runtime "6.x" + classnames "^2.2.6" + prop-types "15.x" + rc-align "^2.4.0" + rc-animate "2.x" + rc-util "^4.4.0" + +rc-util@^4.0.4, rc-util@^4.4.0: + version "4.6.0" + resolved "https://registry.npmjs.org/rc-util/-/rc-util-4.6.0.tgz#ba33721783192ec4f3afb259e182b04e55deb7f6" + dependencies: + add-dom-event-listener "^1.1.0" + babel-runtime "6.x" + prop-types "^15.5.10" + shallowequal "^0.2.2" + rc@^1.0.1, rc@^1.1.6, rc@^1.1.7: version "1.2.6" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.6.tgz#eb18989c6d4f4f162c399f79ddd29f3835568092" @@ -13907,6 +14007,12 @@ sha3@^1.1.0: dependencies: nan "2.10.0" +shallowequal@^0.2.2: + version "0.2.2" + resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e" + dependencies: + lodash.keys "^3.1.2" + shallowequal@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.0.2.tgz#1561dbdefb8c01408100319085764da3fcf83f8f" -- cgit From 1ce84f9bb2b537b5cf5161fa5c5fe930d3981cd6 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 16:51:55 -0800 Subject: fix: address to lowercase and explore the docs leads to correct wiki --- packages/website/ts/pages/instant/configurator.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 5700bdc1d..725b02fae 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -51,7 +51,7 @@ export class Configurator extends React.Component { Code Snippet - + {codeToDisplay} @@ -74,7 +74,7 @@ export class Configurator extends React.Component { liquiditySource: '${instantConfig.orderSource}',${ !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient ? `\n affiliateInfo: { - feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}', + feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}', feePercentage: ${instantConfig.affiliateInfo.feePercentage} }` : '' -- cgit From db21ae3af1513f696b5c5ec0f4a1a3434cb4546d Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 17:29:31 -0800 Subject: feat: fetch asset meta data from the asset meta data map --- .../website/ts/pages/instant/config_generator.tsx | 54 +++++++++------------- 1 file changed, 23 insertions(+), 31 deletions(-) diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index facda850e..671b1f6df 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -18,7 +18,8 @@ import { WebsiteBackendTokenInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; -import { ZeroExInstantBaseConfig } from '../../../../instant/src/types'; +import { assetMetaDataMap } from '../../../../instant/src/data/asset_meta_data_map'; +import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../instant/src/types'; export interface ConfigGeneratorProps { value: ZeroExInstantBaseConfig; @@ -28,8 +29,7 @@ export interface ConfigGeneratorProps { export interface ConfigGeneratorState { isLoadingAvailableTokens: boolean; // Address to token info - allKnownTokens: ObjectMap; - availableTokens?: WebsiteBackendTokenInfo[]; + availableTokens?: ObjectMap; } const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrelay.xyz/v2/']; @@ -37,10 +37,9 @@ const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrel export class ConfigGenerator extends React.Component { public state: ConfigGeneratorState = { isLoadingAvailableTokens: true, - allKnownTokens: {}, }; public componentDidMount(): void { - this._setAllKnownTokens(this._setAvailableAssetsFromOrderProvider); + this._setAvailableAssetsFromOrderProvider(); } public componentDidUpdate(prevProps: ConfigGeneratorProps): void { if (prevProps.value.orderSource !== this.props.value.orderSource) { @@ -99,9 +98,6 @@ export class ConfigGenerator extends React.Component { - return _.map(this.state.allKnownTokens, token => assetDataUtils.encodeERC20AssetData(token.address)); - }; private readonly _handleAffiliatePercentageLearnMoreClick = (): void => { window.open('/wiki#Learn-About-Affiliate-Fees', '_blank'); }; @@ -150,16 +146,19 @@ export class ConfigGenerator extends React.Component { const { value } = this.props; - const { allKnownTokens } = this.state; let newAvailableAssetDatas: string[] = []; + const allKnownAssetDatas = _.keys(this.state.availableTokens); const availableAssetDatas = value.availableAssetDatas; if (_.isUndefined(availableAssetDatas)) { // It being undefined means it's all tokens. - const allKnownAssetDatas = this._getAllKnownAssetDatas(); newAvailableAssetDatas = _.pull(allKnownAssetDatas, assetData); } else if (!_.includes(availableAssetDatas, assetData)) { // Add it newAvailableAssetDatas = [...availableAssetDatas, assetData]; + if (newAvailableAssetDatas.length === allKnownAssetDatas.length) { + // If all tokens are manually selected, just show none. + newAvailableAssetDatas = undefined; + } } else { // Remove it newAvailableAssetDatas = _.pull(availableAssetDatas, assetData); @@ -170,18 +169,6 @@ export class ConfigGenerator extends React.Component void): Promise => { - const tokenInfos = await backendClient.getTokenInfosAsync(); - const allKnownTokens = _.reduce( - tokenInfos, - (acc, tokenInfo) => { - acc[tokenInfo.address] = tokenInfo; - return acc; - }, - {} as ObjectMap, - ); - this.setState({ allKnownTokens }, callback); - }; private readonly _setAvailableAssetsFromOrderProvider = async (): Promise => { const { value } = this.props; if (!_.isUndefined(value.orderSource) && _.isString(value.orderSource)) { @@ -191,11 +178,16 @@ export class ConfigGenerator extends React.Component { - const address = assetDataUtils.decodeAssetDataOrThrow(assetData).tokenAddress; - return this.state.allKnownTokens[address]; - }), + const availableTokens = _.reduce( + assetDatas, + (acc, assetData) => { + const metaDataIfExists = assetMetaDataMap[assetData] as ERC20AssetMetaData; + if (metaDataIfExists) { + acc[assetData] = metaDataIfExists; + } + return acc; + }, + {} as ObjectMap, ); this.setState({ availableTokens, isLoadingAvailableTokens: false }); } @@ -220,10 +212,10 @@ export class ConfigGenerator extends React.Component ); } - const items = _.map(availableTokens, token => { - const assetData = assetDataUtils.encodeERC20AssetData(token.address); + const items = _.map(_.keys(availableTokens), assetData => { + const metaData = availableTokens[assetData]; return { - value: assetDataUtils.encodeERC20AssetData(token.address), + value: assetData, renderItemContent: (isSelected: boolean) => ( @@ -234,7 +226,7 @@ export class ConfigGenerator extends React.Component - {token.symbol} — {token.name} + {metaData.symbol.toUpperCase()} — {metaData.name} ), -- cgit From cd44dc7beb1697ec76dccba4711b3ce8057ba6e4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 17:37:32 -0800 Subject: polish: make configurator inputs look more like mocks --- packages/website/ts/components/ui/input.tsx | 4 +++- packages/website/ts/components/ui/select.tsx | 4 ++-- packages/website/ts/pages/instant/config_generator_address_input.tsx | 1 + 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index 1f56c814f..d21b9fd0e 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -9,6 +9,7 @@ export interface InputProps { fontSize?: string; fontColor?: string; border?: string; + padding?: string; placeholderColor?: string; placeholder?: string; backgroundColor?: string; @@ -22,7 +23,7 @@ const PlainInput: React.StatelessComponent = ({ value, className, pl export const Input = styled(PlainInput)` font-size: ${props => props.fontSize}; width: ${props => props.width}; - padding: 0.8em 1.2em; + padding: ${props => props.padding}; border-radius: 3px; box-sizing: border-box; font-family: 'Roboto Mono'; @@ -42,6 +43,7 @@ Input.defaultProps = { placeholderColor: colors.darkGrey, fontSize: '12px', border: 'none', + padding: '0.8em 1.2em', }; Input.displayName = 'Input'; diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx index 743b082b0..e4fb50f59 100644 --- a/packages/website/ts/components/ui/select.tsx +++ b/packages/website/ts/components/ui/select.tsx @@ -65,7 +65,7 @@ export class Select extends React.Component { hasBoxShadow={isOpen} border={border} backgroundColor={backgroundColor} - padding="0.8em" + padding="0.5em 0.8em" width="100%" > @@ -79,7 +79,7 @@ export class Select extends React.Component { )} {hasItems && ( - + Date: Mon, 3 Dec 2018 17:52:35 -0800 Subject: feat: update relayer list --- .../website/ts/pages/instant/config_generator.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 671b1f6df..4e25e3437 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -32,7 +32,11 @@ export interface ConfigGeneratorState { availableTokens?: ObjectMap; } -const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrelay.xyz/v2/']; +const SRA_ENDPOINTS = [ + 'https://api.radarrelay.com/0x/v2/', + 'https://api.sharkrelay.com/sra/v2/', + 'https://sra.bamboorelay.com/0x/v2/', +]; export class ConfigGenerator extends React.Component { public state: ConfigGeneratorState = { @@ -212,6 +216,20 @@ export class ConfigGenerator extends React.Component ); } + const availableAssetDatas = _.keys(availableTokens); + if (availableAssetDatas.length === 0) { + return ( + + No tokens available. Try another endpoint? + + ); + } const items = _.map(_.keys(availableTokens), assetData => { const metaData = availableTokens[assetData]; return { -- cgit From ea4155e5fa69fe488eb183255f7ba64c9c07855b Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 18:00:30 -0800 Subject: fix: change liquiditySource to orderSource --- packages/website/ts/pages/instant/configurator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 725b02fae..9f1fa8359 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -71,7 +71,7 @@ export class Configurator extends React.Component { - - - + + + -`; + }, 'body'); + + +`; }; private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); if (availableAssetDatas.length < 2) { return `[${stringAvailableAssetDatas.join(', ')}]`; } - return `[\n\t\t${stringAvailableAssetDatas.join(', \n\t\t')}\n ]`; + return `[\n ${stringAvailableAssetDatas.join( + ', \n ', + )}\n ]`; }; } -- cgit From f576f78b4a18e45ff2ed55ab840c0bacce87ad7c Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 11:22:49 -0800 Subject: fix: do not show select all if no tokens are available --- packages/website/ts/pages/instant/config_generator.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 4e25e3437..f2c9c698b 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -83,6 +83,11 @@ export class ConfigGenerator extends React.Component { + if (_.isEmpty(this.state.availableTokens)) { + return { + title: 'What tokens can users buy?', + }; + } if (_.isUndefined(this.props.value.availableAssetDatas)) { return { title: 'What tokens can users buy?', -- cgit From b7d804e9491349ca2ec61b812e744e1739542edd Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 11:26:51 -0800 Subject: fix: make select box-shadow darker --- packages/website/ts/components/ui/container.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 4b76ce8be..c2ae9ad9c 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -77,15 +77,17 @@ export const PlainContainer: React.StatelessComponent = props => ); }; +const BOX_SHADOW = '0px 3px 10px rgba(0, 0, 0, 0.3)'; + export const Container = styled(PlainContainer)` box-sizing: border-box; - ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; + ${props => (props.hasBoxShadow ? `box-shadow: ${BOX_SHADOW}` : '')}; &:hover { ${props => props.shouldDarkenOnHover ? `background-color: ${props.backgroundColor ? darken(0.05, props.backgroundColor) : 'none'} !important` : ''}; - ${props => (props.shouldAddBoxShadowOnHover ? 'box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)' : '')}; + ${props => (props.shouldAddBoxShadowOnHover ? `box-shadow: ${BOX_SHADOW}` : '')}; } `; -- cgit From 36f22ba069968ad50df9b6f1c2fda798dd5c95bb Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 12:23:25 -0800 Subject: fix: reset available tokens when sra endpoint is changed --- packages/website/ts/pages/instant/config_generator.tsx | 7 ++++++- .../website/ts/pages/instant/config_generator_address_input.tsx | 4 ++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index f2c9c698b..34c242348 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -48,6 +48,11 @@ export class ConfigGenerator extends React.Component { + private readonly _handleAffiliateAddressChange = (address: string, isValid: boolean) => { const oldConfig: ZeroExInstantBaseConfig = this.props.value; const newConfig: ZeroExInstantBaseConfig = { ...oldConfig, diff --git a/packages/website/ts/pages/instant/config_generator_address_input.tsx b/packages/website/ts/pages/instant/config_generator_address_input.tsx index c208fe52a..ccbaf4482 100644 --- a/packages/website/ts/pages/instant/config_generator_address_input.tsx +++ b/packages/website/ts/pages/instant/config_generator_address_input.tsx @@ -9,7 +9,7 @@ import { Text } from 'ts/components/ui/text'; export interface ConfigGeneratorAddressInputProps { value?: string; - onChange?: (address: string) => void; + onChange?: (address: string, isValid: boolean) => void; } export interface ConfigGeneratorAddressInputState { @@ -54,6 +54,6 @@ export class ConfigGeneratorAddressInput extends React.Component< this.setState({ errMsg, }); - this.props.onChange(address); + this.props.onChange(address, isValidAddress); }; } -- cgit From 110d05f6457d2286c3a6d455d17745b1c8a2e0b4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 12:43:39 -0800 Subject: fix: use WebsitePaths type and update wiki link to new link --- packages/website/ts/pages/instant/config_generator.tsx | 4 ++-- packages/website/ts/pages/instant/configurator.tsx | 7 ++++++- packages/website/ts/pages/instant/features.tsx | 8 ++++---- packages/website/ts/pages/instant/instant.tsx | 4 ++-- packages/website/ts/pages/instant/need_more.tsx | 4 ++-- 5 files changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 34c242348..ac404718f 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -14,7 +14,7 @@ import { Text } from 'ts/components/ui/text'; import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input'; import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider'; import { colors } from 'ts/style/colors'; -import { WebsiteBackendTokenInfo } from 'ts/types'; +import { WebsitePaths } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; @@ -113,7 +113,7 @@ export class ConfigGenerator extends React.Component { - window.open('/wiki#Learn-About-Affiliate-Fees', '_blank'); + window.open(`${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, '_blank'); }; private readonly _handleSRASelection = (sraEndpoint: string) => { const newConfig: ZeroExInstantBaseConfig = { diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index e3766057e..d19a5b4fe 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -7,6 +7,7 @@ import { ActionLink } from 'ts/pages/instant/action_link'; import { CodeDemo } from 'ts/pages/instant/code_demo'; import { ConfigGenerator } from 'ts/pages/instant/config_generator'; import { colors } from 'ts/style/colors'; +import { WebsitePaths } from 'ts/types'; import { ZeroExInstantBaseConfig } from '../../../../instant/src/types'; @@ -51,7 +52,11 @@ export class Configurator extends React.Component { Code Snippet - + {codeToDisplay} diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index 230a8496b..6c2656021 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -6,7 +6,7 @@ import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; import { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link'; import { colors } from 'ts/style/colors'; -import { ScreenWidths } from 'ts/types'; +import { ScreenWidths, WebsitePaths } from 'ts/types'; import { utils } from 'ts/utils/utils'; export interface FeatureProps { @@ -22,7 +22,7 @@ export const Features = (props: FeatureProps) => { }; const exploreTheDocsLinkInfo = { displayText: 'Explore the docs', - linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Get-Started`, + linkSrc: `${WebsitePaths.Wiki}#Get-Started-With-Instant`, }; const tokenLinkInfos = isSmallScreen ? [getStartedLinkInfo] : [getStartedLinkInfo, exploreTheDocsLinkInfo]; return ( @@ -41,7 +41,7 @@ export const Features = (props: FeatureProps) => { linkInfos={[ { displayText: 'Learn about affiliate fees', - linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Learn-About-Affiliate-Fees`, + linkSrc: `${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, }, ]} screenWidth={props.screenWidth} @@ -53,7 +53,7 @@ export const Features = (props: FeatureProps) => { linkInfos={[ { displayText: 'Explore AssetBuyer', - linkSrc: `${utils.getCurrentBaseUrl()}/docs/asset-buyer`, + linkSrc: `${WebsitePaths.Docs}/asset-buyer`, }, ]} screenWidth={props.screenWidth} diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx index fa6bd1c33..d72585bfa 100644 --- a/packages/website/ts/pages/instant/instant.tsx +++ b/packages/website/ts/pages/instant/instant.tsx @@ -14,7 +14,7 @@ import { NeedMore } from 'ts/pages/instant/need_more'; import { Screenshots } from 'ts/pages/instant/screenshots'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; -import { ScreenWidths } from 'ts/types'; +import { ScreenWidths, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -67,7 +67,7 @@ export class Instant extends React.Component { } private readonly _onGetStartedClick = () => { if (this._isSmallScreen()) { - utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#Get-Started`); + utils.openUrl(`${WebsitePaths.Wiki}#Get-Started-With-Instant`); } else { this._scrollToConfigurator(); } diff --git a/packages/website/ts/pages/instant/need_more.tsx b/packages/website/ts/pages/instant/need_more.tsx index e6d5c3694..70aea7363 100644 --- a/packages/website/ts/pages/instant/need_more.tsx +++ b/packages/website/ts/pages/instant/need_more.tsx @@ -4,7 +4,7 @@ import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; -import { ScreenWidths } from 'ts/types'; +import { ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -58,5 +58,5 @@ const onGetInTouchClick = () => { utils.openUrl(constants.URL_ZEROEX_CHAT); }; const onDocsClick = () => { - utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#Get-Started`); + utils.openUrl(`${WebsitePaths.Wiki}#Get-Started-With-Instant`); }; -- cgit From 3e4b77757e3db5e79fc589475170d49a90c8375e Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 12:49:37 -0800 Subject: hack: make min-height of line-number container 98% to prevent scrollbar from appearing in code demo --- packages/website/ts/pages/instant/code_demo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index e57e39dff..4fe1928f5 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -20,7 +20,7 @@ const CustomPre = styled.pre` code:first-of-type { background-color: #2a2a2a !important; color: #999; - min-height: 100%; + min-height: 98%; text-align: center; padding-right: 5px !important; padding-left: 5px; -- cgit From cb9f7a06646014511591bfb110c9013bb40ea667 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 12:53:09 -0800 Subject: chore: remove shark relay from possible SRA endpoints --- packages/website/ts/pages/instant/config_generator.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index ac404718f..b320d2600 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -32,11 +32,7 @@ export interface ConfigGeneratorState { availableTokens?: ObjectMap; } -const SRA_ENDPOINTS = [ - 'https://api.radarrelay.com/0x/v2/', - 'https://api.sharkrelay.com/sra/v2/', - 'https://sra.bamboorelay.com/0x/v2/', -]; +const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://sra.bamboorelay.com/0x/v2/']; export class ConfigGenerator extends React.Component { public state: ConfigGeneratorState = { -- cgit From 01e1e5ac3b5ae970ade80efb5e71212ddb33eb93 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 12:59:16 -0800 Subject: chore: fix linter issues --- packages/website/ts/pages/instant/config_generator.tsx | 3 ++- packages/website/ts/pages/instant/features.tsx | 1 - packages/website/ts/pages/instant/fee_percentage_slider.tsx | 11 +---------- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index b320d2600..fe70ef04c 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -15,7 +15,6 @@ import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_a import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; -import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; import { assetMetaDataMap } from '../../../../instant/src/data/asset_meta_data_map'; @@ -39,10 +38,12 @@ export class ConfigGenerator extends React.Component void; -- cgit From 8ad114c5e585adb5afee2815b4afd0609830ebe3 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 14:11:28 -0800 Subject: fix: instant linting issues --- packages/instant/src/components/zero_ex_instant_provider.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index bdc531617..8b75cdfc4 100644 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -1,6 +1,4 @@ -import { ObjectMap } from '@0x/types'; import { BigNumber } from '@0x/utils'; -import { Provider } from 'ethereum-types'; import * as _ from 'lodash'; import * as React from 'react'; import { Provider as ReduxProvider } from 'react-redux'; @@ -13,8 +11,6 @@ import { store, Store } from '../redux/store'; import { fonts } from '../style/fonts'; import { AccountState, - AffiliateInfo, - AssetMetaData, Network, QuoteFetchOrigin, ZeroExInstantBaseConfig, -- cgit From ce013489ecf86ac7ad51e2f2cd435b18d6054993 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 14:30:31 -0800 Subject: feat: add copy code feature --- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/pages/instant/code_demo.tsx | 20 +++++++++++++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index c2ae9ad9c..ae00851e5 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -44,6 +44,7 @@ export interface ContainerProps { right?: string; bottom?: string; zIndex?: number; + float?: 'right' | 'left'; Tag?: ContainerTag; cursor?: string; id?: string; diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 4fe1928f5..9a04fceed 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -1,5 +1,10 @@ import * as React from 'react'; +import * as CopyToClipboard from 'react-copy-to-clipboard'; import SyntaxHighlighter from 'react-syntax-highlighter'; + +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; @@ -142,7 +147,16 @@ export interface CodeDemoProps { } export const CodeDemo: React.StatelessComponent = props => ( - - {props.children} - + + + + + + + + {props.children} + + ); -- cgit From 5c29b918df4ac8b0f7914e8da10fa1ae530ff4e8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 15:45:23 -0800 Subject: chore: run linter --- packages/website/ts/pages/instant/code_demo.tsx | 1 - packages/website/ts/pages/instant/fee_percentage_slider.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 9a04fceed..c5e565d61 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -4,7 +4,6 @@ import SyntaxHighlighter from 'react-syntax-highlighter'; import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx index 6256c6cb3..4c92883cb 100644 --- a/packages/website/ts/pages/instant/fee_percentage_slider.tsx +++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; -import { injectGlobal, styled } from 'ts/style/theme'; +import { injectGlobal } from 'ts/style/theme'; const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider); // tslint:disable-next-line:no-unused-expression -- cgit From 1f8c09779d57ec0243e3c8d15e9e461c6d491018 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 5 Dec 2018 12:34:24 -0800 Subject: chore: make default fee percentage in configurator 0 --- packages/website/ts/pages/instant/configurator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index d19a5b4fe..a6c792edf 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -26,7 +26,7 @@ export class Configurator extends React.Component { availableAssetDatas: undefined, affiliateInfo: { feeRecipient: '', - feePercentage: 0.01, + feePercentage: 0, }, }, }; -- cgit From fb221e4ca9eec6a66130e3f8230457a1fcee20f8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 5 Dec 2018 12:41:57 -0800 Subject: feat: notify user they've copied to clipboard on copy --- packages/website/ts/pages/instant/code_demo.tsx | 43 +++++++++++++++++-------- 1 file changed, 29 insertions(+), 14 deletions(-) diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index c5e565d61..b7a9f5b17 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -145,17 +145,32 @@ export interface CodeDemoProps { children: string; } -export const CodeDemo: React.StatelessComponent = props => ( - - - - - - - - {props.children} - - -); +export interface CodeDemoState { + didCopyCode: boolean; +} + +export class CodeDemo extends React.Component { + public state: CodeDemoState = { + didCopyCode: false, + }; + public render(): React.ReactNode { + const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy'; + return ( + + + + + + + + {this.props.children} + + + ); + } + private readonly _handleCopyClick = () => { + this.setState({ didCopyCode: true }); + }; +} -- cgit From b7603bef192dac4a3e87a365f77dc87c61dbd4f8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 5 Dec 2018 12:44:23 -0800 Subject: fix: ensure copy button is above code --- packages/website/ts/pages/instant/code_demo.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index b7a9f5b17..1bc1980e7 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -6,6 +6,7 @@ import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; +import { zIndex } from 'ts/style/z_index'; const CustomPre = styled.pre` margin: 0px; @@ -157,7 +158,7 @@ export class CodeDemo extends React.Component { const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy'; return ( - +