From 59743d32daeb4679bb213a153815851a9ea6c115 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 17 Oct 2018 13:44:13 -0700 Subject: feat: create dogfood url and deployment workflow --- packages/instant/.discharge.json | 13 ++++ packages/instant/README.md | 12 +++ packages/instant/package.json | 2 + yarn.lock | 161 ++++++++++++++++++++++++++++++++++++++- 4 files changed, 184 insertions(+), 4 deletions(-) create mode 100644 packages/instant/.discharge.json diff --git a/packages/instant/.discharge.json b/packages/instant/.discharge.json new file mode 100644 index 000000000..3de085cf9 --- /dev/null +++ b/packages/instant/.discharge.json @@ -0,0 +1,13 @@ +{ + "domain": "0x-instant-dogfood", + "build_command": "yarn build:umd:prod", + "upload_directory": "public", + "index_key": "index.html", + "error_key": "index.html", + "trailing_slashes": true, + "cache": 3600, + "aws_profile": "default", + "aws_region": "us-east-1", + "cdn": false, + "dns_configured": true +} diff --git a/packages/instant/README.md b/packages/instant/README.md index 25aca9d3b..2437835c8 100644 --- a/packages/instant/README.md +++ b/packages/instant/README.md @@ -46,6 +46,18 @@ The package is also available as a UMD module named `zeroExInstant`. ``` +## Deploying + +You can deploy a work-in-progress version of 0x Instant at http://0x-instant-dogfood.s3-website-us-east-1.amazonaws.com for easy sharing. + +To build and deploy the site run + +``` +yarn deploy +``` + +**NOTE: On deploying the site, it will say the site is available at a non-existent URL. Please ignore and use the (now updated) URL above.** + ## Contributing We welcome improvements and fixes from the wider community! To report bugs within this package, please create an issue in this repository. diff --git a/packages/instant/package.json b/packages/instant/package.json index 0c4b470fa..f7892e614 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -22,6 +22,7 @@ "rebuild_and_test": "run-s clean build test", "test:circleci": "yarn test:coverage", "clean": "shx rm -rf lib coverage scripts", + "deploy": "discharge deploy", "manual:postpublish": "yarn build; node ./scripts/postpublish.js" }, "config": { @@ -60,6 +61,7 @@ }, "devDependencies": { "@0xproject/tslint-config": "^1.0.8", + "@static/discharge": "^1.2.2", "@types/enzyme": "^3.1.14", "@types/enzyme-adapter-react-16": "^1.0.3", "@types/jest": "^23.3.5", diff --git a/yarn.lock b/yarn.lock index b4f48b8ac..37ddba841 100644 --- a/yarn.lock +++ b/yarn.lock @@ -857,12 +857,35 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" +"@samverschueren/stream-to-observable@^0.3.0": + version "0.3.0" + resolved "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f" + dependencies: + any-observable "^0.3.0" + "@sinonjs/formatio@^2.0.0": version "2.0.0" resolved "http://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz#84db7e9eb5531df18a8c5e0bfb6e449e55e654b2" dependencies: samsam "1.3.0" +"@static/discharge@^1.2.2": + version "1.2.2" + resolved "https://registry.npmjs.org/@static/discharge/-/discharge-1.2.2.tgz#dc941e0c02c421b338b83ac2e59e140d7214c971" + dependencies: + aws-sdk "^2.304.0" + execa "^1.0.0" + glob "^7.1.3" + inquirer "^6.2.0" + listr "^0.14.1" + lodash.differenceby "^4.8.0" + lodash.intersectionby "^4.7.0" + lodash.intersectionwith "^4.4.0" + log-symbols "^2.2.0" + meow "^5.0.0" + mime "^2.3.1" + update-notifier "^2.5.0" + "@types/accounting@^0.4.1": version "0.4.1" resolved "https://registry.yarnpkg.com/@types/accounting/-/accounting-0.4.1.tgz#865d9f5694fd7c438fba34eb4bc82eec6f34cdd5" @@ -1721,6 +1744,10 @@ antlr4@4.7.0: version "4.7.0" resolved "https://registry.yarnpkg.com/antlr4/-/antlr4-4.7.0.tgz#297f956ddc06f83397fc0990ecf2e0cf20bfbbee" +any-observable@^0.3.0: + version "0.3.0" + resolved "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b" + any-promise@1.3.0, any-promise@^1.0.0, any-promise@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f" @@ -2010,6 +2037,20 @@ aws-sdk@^2.127.0: uuid "3.1.0" xml2js "0.4.19" +aws-sdk@^2.304.0: + version "2.336.0" + resolved "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.336.0.tgz#b15371aff3e30ba77b74968c086375594be897c9" + dependencies: + buffer "4.9.1" + events "1.1.1" + ieee754 "1.1.8" + jmespath "0.15.0" + querystring "0.2.0" + sax "1.2.1" + url "0.10.3" + uuid "3.1.0" + xml2js "0.4.19" + aws-sign2@~0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f" @@ -3430,6 +3471,10 @@ chardet@^0.4.0: version "0.4.2" resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2" +chardet@^0.7.0: + version "0.7.0" + resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" + charset@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/charset/-/charset-1.0.1.tgz#8d59546c355be61049a8fa9164747793319852bd" @@ -5754,6 +5799,18 @@ execa@^0.9.0: signal-exit "^3.0.0" strip-eof "^1.0.0" +execa@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8" + dependencies: + cross-spawn "^6.0.0" + get-stream "^4.0.0" + is-stream "^1.1.0" + npm-run-path "^2.0.0" + p-finally "^1.0.0" + signal-exit "^3.0.0" + strip-eof "^1.0.0" + exenv@^1.2.1: version "1.2.2" resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" @@ -5875,6 +5932,14 @@ external-editor@^2.0.4, external-editor@^2.1.0: iconv-lite "^0.4.17" tmp "^0.0.33" +external-editor@^3.0.0: + version "3.0.3" + resolved "https://registry.npmjs.org/external-editor/-/external-editor-3.0.3.tgz#5866db29a97826dbe4bf3afd24070ead9ea43a27" + dependencies: + chardet "^0.7.0" + iconv-lite "^0.4.24" + tmp "^0.0.33" + extglob@^0.3.1: version "0.3.2" resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1" @@ -6410,7 +6475,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" @@ -6545,6 +6610,12 @@ get-stream@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14" +get-stream@^4.0.0: + version "4.1.0" + resolved "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5" + dependencies: + pump "^3.0.0" + get-value@^2.0.3, get-value@^2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28" @@ -6697,6 +6768,17 @@ glob@^5.0.15: once "^1.3.0" path-is-absolute "^1.0.0" +glob@^7.1.3: + version "7.1.3" + resolved "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1" + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + glob@~3.1.21: version "3.1.21" resolved "https://registry.yarnpkg.com/glob/-/glob-3.1.21.tgz#d29e0a055dea5138f4d07ed40e8982e83c2066cd" @@ -7324,7 +7406,7 @@ iconv-lite@0.4.19: version "0.4.19" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b" -iconv-lite@0.4.24: +iconv-lite@0.4.24, iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" dependencies: @@ -7527,6 +7609,24 @@ inquirer@^5.1.0: strip-ansi "^4.0.0" through "^2.3.6" +inquirer@^6.2.0: + version "6.2.0" + resolved "https://registry.npmjs.org/inquirer/-/inquirer-6.2.0.tgz#51adcd776f661369dc1e894859c2560a224abdd8" + dependencies: + ansi-escapes "^3.0.0" + chalk "^2.0.0" + cli-cursor "^2.1.0" + cli-width "^2.0.0" + external-editor "^3.0.0" + figures "^2.0.0" + lodash "^4.17.10" + mute-stream "0.0.7" + run-async "^2.2.0" + rxjs "^6.1.0" + string-width "^2.1.0" + strip-ansi "^4.0.0" + through "^2.3.6" + intel@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/intel/-/intel-1.2.0.tgz#11d1147eb6b3f4582bdf5337b37d541584e9e41e" @@ -7838,6 +7938,12 @@ is-object@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470" +is-observable@^1.1.0: + version "1.1.0" + resolved "https://registry.npmjs.org/is-observable/-/is-observable-1.1.0.tgz#b3e986c8f44de950867cab5403f5a3465005975e" + dependencies: + symbol-observable "^1.1.0" + is-odd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-2.0.0.tgz#7646624671fd7ea558ccd9a2795182f2958f1b24" @@ -8994,6 +9100,19 @@ listr-update-renderer@^0.2.0: log-update "^1.0.2" strip-ansi "^3.0.1" +listr-update-renderer@^0.4.0: + version "0.4.0" + resolved "https://registry.npmjs.org/listr-update-renderer/-/listr-update-renderer-0.4.0.tgz#344d980da2ca2e8b145ba305908f32ae3f4cc8a7" + dependencies: + chalk "^1.1.3" + cli-truncate "^0.2.1" + elegant-spinner "^1.0.1" + figures "^1.7.0" + indent-string "^3.0.0" + log-symbols "^1.0.2" + log-update "^1.0.2" + strip-ansi "^3.0.1" + listr-verbose-renderer@^0.4.0: version "0.4.1" resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#8206f4cf6d52ddc5827e5fd14989e0e965933a35" @@ -9024,6 +9143,20 @@ listr@^0.12.0: stream-to-observable "^0.1.0" strip-ansi "^3.0.1" +listr@^0.14.1: + version "0.14.2" + resolved "https://registry.npmjs.org/listr/-/listr-0.14.2.tgz#cbe44b021100a15376addfc2d79349ee430bfe14" + dependencies: + "@samverschueren/stream-to-observable" "^0.3.0" + is-observable "^1.1.0" + is-promise "^2.1.0" + is-stream "^1.1.0" + listr-silent-renderer "^1.1.1" + listr-update-renderer "^0.4.0" + listr-verbose-renderer "^0.4.0" + p-map "^1.1.1" + rxjs "^6.1.0" + load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" @@ -9645,6 +9778,20 @@ meow@^4.0.0: redent "^2.0.0" trim-newlines "^2.0.0" +meow@^5.0.0: + version "5.0.0" + resolved "https://registry.npmjs.org/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4" + dependencies: + camelcase-keys "^4.0.0" + decamelize-keys "^1.0.0" + loud-rejection "^1.0.0" + minimist-options "^3.0.1" + normalize-package-data "^2.3.4" + read-pkg-up "^3.0.0" + redent "^2.0.0" + trim-newlines "^2.0.0" + yargs-parser "^10.0.0" + merge-descriptors@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" @@ -13051,6 +13198,12 @@ rxjs@^5.5.2: dependencies: symbol-observable "1.0.1" +rxjs@^6.1.0: + version "6.3.3" + resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55" + dependencies: + tslib "^1.9.0" + safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853" @@ -15147,7 +15300,7 @@ upath@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/upath/-/upath-1.0.4.tgz#ee2321ba0a786c50973db043a50b7bcba822361d" -update-notifier@^2.3.0: +update-notifier@^2.3.0, update-notifier@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6" dependencies: @@ -16302,7 +16455,7 @@ yallist@^3.0.0, yallist@^3.0.2: version "3.0.2" resolved "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9" -yargs-parser@10.x, yargs-parser@^10.1.0: +yargs-parser@10.x, yargs-parser@^10.0.0, yargs-parser@^10.1.0: version "10.1.0" resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8" dependencies: -- cgit v1.2.3 From 91ca80b248ac75b0d8258dd4dfc7a6e0c36c572b Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 17 Oct 2018 14:01:32 -0700 Subject: prettify discharge file --- packages/instant/.discharge.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/instant/.discharge.json b/packages/instant/.discharge.json index 3de085cf9..9ade97d01 100644 --- a/packages/instant/.discharge.json +++ b/packages/instant/.discharge.json @@ -1,13 +1,13 @@ { - "domain": "0x-instant-dogfood", - "build_command": "yarn build:umd:prod", - "upload_directory": "public", - "index_key": "index.html", - "error_key": "index.html", - "trailing_slashes": true, - "cache": 3600, - "aws_profile": "default", - "aws_region": "us-east-1", - "cdn": false, - "dns_configured": true + "domain": "0x-instant-dogfood", + "build_command": "yarn build:umd:prod", + "upload_directory": "public", + "index_key": "index.html", + "error_key": "index.html", + "trailing_slashes": true, + "cache": 3600, + "aws_profile": "default", + "aws_region": "us-east-1", + "cdn": false, + "dns_configured": true } -- cgit v1.2.3 From 4b348e1e603ec45e1e4bf39533b4b204423cafa0 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 11:09:23 -0700 Subject: quoteState -> quoteRequestState --- packages/instant/src/components/instant_heading.tsx | 10 +++++----- packages/instant/src/containers/selected_asset_amount_input.ts | 6 +++--- .../instant/src/containers/selected_asset_instant_heading.ts | 4 ++-- packages/instant/src/redux/actions.ts | 4 ++-- packages/instant/src/redux/reducer.ts | 10 +++++----- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index a36d35a93..9dd13299c 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -13,7 +13,7 @@ export interface InstantHeadingProps { selectedAssetAmount?: BigNumber; totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; - quoteState: AsyncProcessState; + quoteRequestState: AsyncProcessState; } const Placeholder = () => ( @@ -42,8 +42,8 @@ const displayUsdAmount = ({ return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, ); }; -const loadingOrAmount = (quoteState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => { - if (quoteState === AsyncProcessState.PENDING) { +const loadingOrAmount = (quoteRequestState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => { + if (quoteRequestState === AsyncProcessState.PENDING) { return ( …loading @@ -73,11 +73,11 @@ export const InstantHeading: React.StatelessComponent = pro - {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))} + {loadingOrAmount(props.quoteRequestState, displaytotalEthBaseAmount(props))} - {loadingOrAmount(props.quoteState, displayUsdAmount(props))} + {loadingOrAmount(props.quoteRequestState, displayUsdAmount(props))} diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 0810b093a..aca6a09d4 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -44,13 +44,13 @@ const updateBuyQuoteAsync = async ( const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals); // mark quote as pending - dispatch(actions.updateBuyQuoteStatePending()); + dispatch(actions.updateBuyquoteRequestStatePending()); let newBuyQuote: BuyQuote | undefined; try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); } catch (error) { - dispatch(actions.updateBuyQuoteStateFailure()); + dispatch(actions.updateBuyquoteRequestStateFailure()); errorUtil.errorFlasher.flashNewError(dispatch, error); return; } @@ -76,7 +76,7 @@ const mapDispatchToProps = ( if (!_.isUndefined(value) && !_.isUndefined(assetData)) { // even if it's debounced, give them the illusion it's loading - dispatch(actions.updateBuyQuoteStatePending()); + dispatch(actions.updateBuyquoteRequestStatePending()); // tslint:disable-next-line:no-floating-promises debouncedUpdateBuyQuoteAsync(dispatch, assetData, value); } diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts index 0509db5da..43127582c 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -15,14 +15,14 @@ interface ConnectedState { selectedAssetAmount?: BigNumber; totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; - quoteState: AsyncProcessState; + quoteRequestState: AsyncProcessState; } const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({ selectedAssetAmount: state.selectedAssetAmount, totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(), ethUsdPrice: state.ethUsdPrice, - quoteState: state.quoteState, + quoteRequestState: state.quoteRequestState, }); export const SelectedAssetInstantHeading: React.ComponentClass = connect(mapStateToProps)( diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index 9c154c66f..b4aa4f4cb 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -38,8 +38,8 @@ export const actions = { updatebuyOrderState: (buyState: AsyncProcessState) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState), updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote), - updateBuyQuoteStatePending: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING), - updateBuyQuoteStateFailure: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_FAILURE), + updateBuyquoteRequestStatePending: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING), + updateBuyquoteRequestStateFailure: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_FAILURE), setError: (error?: any) => createAction(ActionTypes.SET_ERROR, error), hideError: () => createAction(ActionTypes.HIDE_ERROR), clearError: () => createAction(ActionTypes.CLEAR_ERROR), diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 05aa37420..d2256ef54 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -17,7 +17,7 @@ export interface State { buyOrderState: AsyncProcessState; ethUsdPrice?: BigNumber; latestBuyQuote?: BuyQuote; - quoteState: AsyncProcessState; + quoteRequestState: AsyncProcessState; latestError?: any; latestErrorDisplay: LatestErrorDisplay; } @@ -31,7 +31,7 @@ export const INITIAL_STATE: State = { latestBuyQuote: undefined, latestError: undefined, latestErrorDisplay: LatestErrorDisplay.Hidden, - quoteState: AsyncProcessState.NONE, + quoteRequestState: AsyncProcessState.NONE, }; export const reducer = (state: State = INITIAL_STATE, action: Action): State => { @@ -50,19 +50,19 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => return { ...state, latestBuyQuote: action.data, - quoteState: AsyncProcessState.SUCCESS, + quoteRequestState: AsyncProcessState.SUCCESS, }; case ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING: return { ...state, latestBuyQuote: undefined, - quoteState: AsyncProcessState.PENDING, + quoteRequestState: AsyncProcessState.PENDING, }; case ActionTypes.UPDATE_BUY_QUOTE_STATE_FAILURE: return { ...state, latestBuyQuote: undefined, - quoteState: AsyncProcessState.FAILURE, + quoteRequestState: AsyncProcessState.FAILURE, }; case ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE: return { -- cgit v1.2.3 From 3f0059d4bb7de5bc31fde228142b4bc0370fc22f Mon Sep 17 00:00:00 2001 From: Alex Browne Date: Thu, 18 Oct 2018 13:10:49 -0700 Subject: chore: Update list of published packages in top-level README --- README.md | 54 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 31 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 0be459d81..78e1689d0 100644 --- a/README.md +++ b/README.md @@ -20,29 +20,37 @@ If you're developing on 0x now or are interested in using 0x infrastructure in t ### Published Packages -| Package | Version | Description | -| -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -| [`0x.js`](/packages/0x.js) | [![npm](https://img.shields.io/npm/v/0x.js.svg)](https://www.npmjs.com/package/0x.js) | A Javascript library for interacting with the 0x protocol | -| [`@0x/abi-gen`](/packages/abi-gen) | [![npm](https://img.shields.io/npm/v/@0x/abi-gen.svg)](https://www.npmjs.com/package/@0x/abi-gen) | Tool to generate TS wrappers from smart contract ABIs | -| [`@0x/assert`](/packages/assert) | [![npm](https://img.shields.io/npm/v/@0x/assert.svg)](https://www.npmjs.com/package/@0x/assert) | Type and schema assertions used by our packages | -| [`@0x/asset-buyer`](/packages/asset-buyer) | [![npm](https://img.shields.io/npm/v/@0x/asset-buyer.svg)](https://www.npmjs.com/package/@0x/asset-buyer) | Convenience package for discovering and buying assets with Ether. | -| [`@0x/base-contract`](/packages/base-contract) | [![npm](https://img.shields.io/npm/v/@0x/base-contract.svg)](https://www.npmjs.com/package/@0x/base-contract) | BaseContract used by auto-generated `abi-gen` wrapper contracts | -| [`@0x/connect`](/packages/connect) | [![npm](https://img.shields.io/npm/v/@0x/connect.svg)](https://www.npmjs.com/package/@0x/connect) | A Javascript library for interacting with the Standard Relayer API | -| [`@0x/dev-utils`](/packages/dev-utils) | [![npm](https://img.shields.io/npm/v/@0x/dev-utils.svg)](https://www.npmjs.com/package/@0x/dev-utils) | Dev utils to be shared across 0x projects and packages | -| [`@0x/json-schemas`](/packages/json-schemas) | [![npm](https://img.shields.io/npm/v/@0x/json-schemas.svg)](https://www.npmjs.com/package/@0x/json-schemas) | 0x-related json schemas | -| [`@0x/monorepo-scripts`](/packages/monorepo-scripts) | [![npm](https://img.shields.io/npm/v/@0x/monorepo-scripts.svg)](https://www.npmjs.com/package/@0x/monorepo-scripts) | Monorepo scripts | -| [`@0x/order-utils`](/packages/order-utils) | [![npm](https://img.shields.io/npm/v/@0x/order-utils.svg)](https://www.npmjs.com/package/@0x/order-utils) | A set of utilities for generating, parsing, signing and validating 0x orders. | -| [`@0x/react-docs`](/packages/react-docs) | [![npm](https://img.shields.io/npm/v/@0x/react-docs.svg)](https://www.npmjs.com/package/@0x/react-docs) | React documentation component for rendering TypeDoc & Doxity generated JSON | -| [`@0x/react-shared`](/packages/react-shared) | [![npm](https://img.shields.io/npm/v/@0x/react-shared.svg)](https://www.npmjs.com/package/@0x/react-shared) | 0x shared react components | -| [`@0x/sol-compiler`](/packages/sol-compiler) | [![npm](https://img.shields.io/npm/v/@0x/sol-compiler.svg)](https://www.npmjs.com/package/@0x/sol-compiler) | A thin wrapper around Solc.js that outputs artifacts, resolves imports, only re-compiles when needed, and other niceties. | -| [`@0x/sol-cov`](/packages/sol-cov) | [![npm](https://img.shields.io/npm/v/@0x/sol-cov.svg)](https://www.npmjs.com/package/@0x/sol-cov) | Solidity test coverage tool | -| [`@0x/sra-spec`](/packages/sra-spec) | [![npm](https://img.shields.io/npm/v/@0x/sra-spec.svg)](https://www.npmjs.com/package/@0x/sra-spec) | OpenAPI specification for the standard relayer API | -| [`@0x/subproviders`](/packages/subproviders) | [![npm](https://img.shields.io/npm/v/@0x/subproviders.svg)](https://www.npmjs.com/package/@0x/subproviders) | Useful web3 subproviders (e.g LedgerSubprovider) | -| [`@0x/tslint-config`](/packages/tslint-config) | [![npm](https://img.shields.io/npm/v/@0x/tslint-config.svg)](https://www.npmjs.com/package/@0x/tslint-config) | Custom 0x development TSLint rules | -| [`@0x/types`](/packages/types) | [![npm](https://img.shields.io/npm/v/@0x/types.svg)](https://www.npmjs.com/package/@0x/types) | Shared type declarations | -| [`@0x/typescript-typings`](/packages/typescript-typings) | [![npm](https://img.shields.io/npm/v/@0x/typescript-typings.svg)](https://www.npmjs.com/package/@0x/typescript-typings) | Repository of types for external packages | -| [`@0x/utils`](/packages/utils) | [![npm](https://img.shields.io/npm/v/@0x/utils.svg)](https://www.npmjs.com/package/@0x/utils) | Shared utilities | -| [`@0x/web3-wrapper`](/packages/web3-wrapper) | [![npm](https://img.shields.io/npm/v/@0x/web3-wrapper.svg)](https://www.npmjs.com/package/@0x/web3-wrapper) | Web3 wrapper | +| Package | Version | Description | +| -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | +| [`0x.js`](/packages/0x.js) | [![npm](https://img.shields.io/npm/v/0x.js.svg)](https://www.npmjs.com/package/0x.js) | A Javascript library for interacting with the 0x protocol | +| [`@0x/abi-gen`](/packages/abi-gen) | [![npm](https://img.shields.io/npm/v/@0x/abi-gen.svg)](https://www.npmjs.com/package/@0x/abi-gen) | Tool to generate TS wrappers from smart contract ABIs | +| [`@0x/abi-gen-wrappers`](/packages/abi-gen-wrappers) | [![npm](https://img.shields.io/npm/v/@0x/abi-gen-wrappers.svg)](https://www.npmjs.com/package/@0x/abi-gen-wrappers) | Low-level 0x smart contract wrappers generated using @0x/abi-gen | +| [`@0x/assert`](/packages/assert) | [![npm](https://img.shields.io/npm/v/@0x/assert.svg)](https://www.npmjs.com/package/@0x/assert) | Type and schema assertions used by our packages | +| [`@0x/asset-buyer`](/packages/asset-buyer) | [![npm](https://img.shields.io/npm/v/@0x/asset-buyer.svg)](https://www.npmjs.com/package/@0x/asset-buyer) | Convenience package for discovering and buying assets with Ether | +| [`@0x/base-contract`](/packages/base-contract) | [![npm](https://img.shields.io/npm/v/@0x/base-contract.svg)](https://www.npmjs.com/package/@0x/base-contract) | BaseContract used by auto-generated `abi-gen` wrapper contracts | +| [`@0x/connect`](/packages/connect) | [![npm](https://img.shields.io/npm/v/@0x/connect.svg)](https://www.npmjs.com/package/@0x/connect) | A Javascript library for interacting with the Standard Relayer API | +| [`@0x/contract-addresses`](/packages/contract-addresses) | [![npm](https://img.shields.io/npm/v/@0x/contract-addresses.svg)](https://www.npmjs.com/package/@0x/contract-addresses) | Used to get known addresses of deployed 0x contracts | +| [`@0x/contract-artifacts`](/packages/contract-artifacts) | [![npm](https://img.shields.io/npm/v/@0x/contract-artifacts.svg)](https://www.npmjs.com/package/@0x/contract-artifacts) | 0x smart contract compilation artifacts | +| [`@0x/contract-wrappers`](/packages/contract-wrappers) | [![npm](https://img.shields.io/npm/v/@0x/contract-wrappers.svg)](https://www.npmjs.com/package/@0x/contract-wrappers) | Smart TS wrappers for 0x smart contracts | +| [`@0x/dev-utils`](/packages/dev-utils) | [![npm](https://img.shields.io/npm/v/@0x/dev-utils.svg)](https://www.npmjs.com/package/@0x/dev-utils) | Dev utils to be shared across 0x projects and packages | +| [`@0x/fill-scenarios`](/packages/fill-scenarios) | [![npm](https://img.shields.io/npm/v/@0x/fill-scenarios.svg)](https://www.npmjs.com/package/@0x/fill-scenarios) | 0x order fill scenario generation | +| [`@0x/json-schemas`](/packages/json-schemas) | [![npm](https://img.shields.io/npm/v/@0x/json-schemas.svg)](https://www.npmjs.com/package/@0x/json-schemas) | 0x-related json schemas | +| [`@0x/migrations`](/packages/migrations) | [![npm](https://img.shields.io/npm/v/@0x/migrations.svg)](https://www.npmjs.com/package/@0x/migrations) | 0x smart contract migrations | +| [`@0x/order-utils`](/packages/order-utils) | [![npm](https://img.shields.io/npm/v/@0x/order-utils.svg)](https://www.npmjs.com/package/@0x/order-utils) | A set of utilities for generating, parsing, signing and validating 0x orders | +| [`@0x/order-watcher`](/packages/order-watcher) | [![npm](https://img.shields.io/npm/v/@0x/order-watcher.svg)](https://www.npmjs.com/package/@0x/order-watcher) | An order watcher daemon that watches for order validity | +| [`@0x/react-docs`](/packages/react-docs) | [![npm](https://img.shields.io/npm/v/@0x/react-docs.svg)](https://www.npmjs.com/package/@0x/react-docs) | React documentation component for rendering TypeDoc & Doxity generated JSON | +| [`@0x/react-shared`](/packages/react-shared) | [![npm](https://img.shields.io/npm/v/@0x/react-shared.svg)](https://www.npmjs.com/package/@0x/react-shared) | 0x shared react components | +| [`@0x/sol-compiler`](/packages/sol-compiler) | [![npm](https://img.shields.io/npm/v/@0x/sol-compiler.svg)](https://www.npmjs.com/package/@0x/sol-compiler) | A thin wrapper around Solc.js that outputs artifacts, resolves imports, only re-compiles when needed, and other niceties | +| [`@0x/sol-cov`](/packages/sol-cov) | [![npm](https://img.shields.io/npm/v/@0x/sol-cov.svg)](https://www.npmjs.com/package/@0x/sol-cov) | Solidity test coverage tool | +| [`@0x/sol-doc`](/packages/sol-doc) | [![npm](https://img.shields.io/npm/v/@0x/sol-doc.svg)](https://www.npmjs.com/package/@0x/sol-doc) | Solidity documentation generator | +| [`@0x/sol-resolver`](/packages/sol-resolver) | [![npm](https://img.shields.io/npm/v/@0x/sol-resolver.svg)](https://www.npmjs.com/package/@0x/sol-resolver) | Import resolver for smart contracts dependencies | +| [`@0x/sra-spec`](/packages/sra-spec) | [![npm](https://img.shields.io/npm/v/@0x/sra-spec.svg)](https://www.npmjs.com/package/@0x/sra-spec) | OpenAPI specification for the standard relayer API | +| [`@0x/subproviders`](/packages/subproviders) | [![npm](https://img.shields.io/npm/v/@0x/subproviders.svg)](https://www.npmjs.com/package/@0x/subproviders) | Useful web3 subproviders (e.g. LedgerSubprovider) | +| [`@0x/tslint-config`](/packages/tslint-config) | [![npm](https://img.shields.io/npm/v/@0x/tslint-config.svg)](https://www.npmjs.com/package/@0x/tslint-config) | Custom 0x development TSLint rules | +| [`@0x/types`](/packages/types) | [![npm](https://img.shields.io/npm/v/@0x/types.svg)](https://www.npmjs.com/package/@0x/types) | Shared type declarations | +| [`@0x/typescript-typings`](/packages/typescript-typings) | [![npm](https://img.shields.io/npm/v/@0x/typescript-typings.svg)](https://www.npmjs.com/package/@0x/typescript-typings) | Repository of types for external packages | +| [`@0x/utils`](/packages/utils) | [![npm](https://img.shields.io/npm/v/@0x/utils.svg)](https://www.npmjs.com/package/@0x/utils) | Shared utilities | +| [`@0x/web3-wrapper`](/packages/web3-wrapper) | [![npm](https://img.shields.io/npm/v/@0x/web3-wrapper.svg)](https://www.npmjs.com/package/@0x/web3-wrapper) | Web3 wrapper | ### Private Packages -- cgit v1.2.3 From 12b6877aeb0a6bcddab4193b62cd10347b8c328b Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 13:31:11 -0700 Subject: Pulsating holder element showing, even if amount is empty --- .../instant/src/components/amount_placeholder.tsx | 29 ++++++ .../instant/src/components/animations/pulse.tsx | 15 +++ .../instant/src/components/instant_heading.tsx | 112 ++++++++++----------- packages/instant/src/components/ui/container.tsx | 2 + 4 files changed, 101 insertions(+), 57 deletions(-) create mode 100644 packages/instant/src/components/amount_placeholder.tsx create mode 100644 packages/instant/src/components/animations/pulse.tsx diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx new file mode 100644 index 000000000..54639effb --- /dev/null +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Pulse } from './animations/pulse'; + +import { Text } from './ui'; + +export interface AmountPlaceholderProps { + pulsating: boolean; +} + +const PlainPlaceholder = () => ( + + — + +); + +export const AmountPlaceholder: React.StatelessComponent = props => { + if (props.pulsating) { + return ( + + + + ); + } else { + return ; + } +}; diff --git a/packages/instant/src/components/animations/pulse.tsx b/packages/instant/src/components/animations/pulse.tsx new file mode 100644 index 000000000..01d6ea070 --- /dev/null +++ b/packages/instant/src/components/animations/pulse.tsx @@ -0,0 +1,15 @@ +import { keyframes, styled } from '../../style/theme'; + +const pulsingKeyframes = keyframes` + 0%, 100% { + opacity: 0.2; + } + 50% { + opacity: 100; + } +`; +export const Pulse = styled.div` + animation-name: ${pulsingKeyframes} + animation-duration: 2s; + animation-iteration-count: infinite; +`; diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 9dd13299c..9ca4ce598 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -7,6 +7,7 @@ import { ColorOption } from '../style/theme'; import { AsyncProcessState } from '../types'; import { format } from '../util/format'; +import { AmountPlaceholder } from './amount_placeholder'; import { Container, Flex, Text } from './ui'; export interface InstantHeadingProps { @@ -16,70 +17,67 @@ export interface InstantHeadingProps { quoteRequestState: AsyncProcessState; } -const Placeholder = () => ( - - — - -); -const displaytotalEthBaseAmount = ({ - selectedAssetAmount, - totalEthBaseAmount, -}: InstantHeadingProps): React.ReactNode => { - if (_.isUndefined(selectedAssetAmount)) { - return '0 ETH'; +export class InstantHeading extends React.Component { + public render(): React.ReactNode { + const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow(); + return ( + + + + I want to buy + + + + + + {placeholderAmountToAlwaysShow || this._ethAmount()} + {placeholderAmountToAlwaysShow || this._dollarAmount()} + + + + ); } - return format.ethBaseAmount(totalEthBaseAmount, 4, ); -}; -const displayUsdAmount = ({ - totalEthBaseAmount, - selectedAssetAmount, - ethUsdPrice, -}: InstantHeadingProps): React.ReactNode => { - if (_.isUndefined(selectedAssetAmount)) { - return '$0.00'; + private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined { + if (this.props.quoteRequestState === AsyncProcessState.PENDING) { + return ; + } + if (_.isUndefined(this.props.selectedAssetAmount)) { + return ; + } + return undefined; } - return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, ); -}; -const loadingOrAmount = (quoteRequestState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => { - if (quoteRequestState === AsyncProcessState.PENDING) { + private _ethAmount(): React.ReactNode { return ( - - …loading + + {format.ethBaseAmount(this.props.totalEthBaseAmount, 4, )} ); - } else { - return amount; } -}; -export const InstantHeading: React.StatelessComponent = props => ( - - - - I want to buy + private _dollarAmount(): React.ReactNode { + return ( + + {format.ethBaseAmountInUsd( + this.props.totalEthBaseAmount, + this.props.ethUsdPrice, + 2, + , + )} - - - - - - - {loadingOrAmount(props.quoteRequestState, displaytotalEthBaseAmount(props))} - - - - {loadingOrAmount(props.quoteRequestState, displayUsdAmount(props))} - - - - -); + ); + } +} diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 02b16e39f..5e2218c68 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -27,6 +27,7 @@ export interface ContainerProps { backgroundColor?: ColorOption; hasBoxShadow?: boolean; zIndex?: number; + opacity?: number; } const PlainContainer: React.StatelessComponent = ({ children, className }) => ( @@ -54,6 +55,7 @@ export const Container = styled(PlainContainer)` ${props => cssRuleIfExists(props, 'border-top')} ${props => cssRuleIfExists(props, 'border-bottom')} ${props => cssRuleIfExists(props, 'z-index')} + ${props => cssRuleIfExists(props, 'opacity')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; -- cgit v1.2.3 From 94ace00e0cfd550bccf33f85441ce1dad33f1348 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 13:38:04 -0700 Subject: fix camel casing of updateBuyOrderState --- packages/instant/src/containers/selected_asset_amount_input.ts | 2 +- packages/instant/src/containers/selected_asset_buy_button.ts | 6 +++--- packages/instant/src/redux/actions.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index aca6a09d4..2a1e5e457 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -72,7 +72,7 @@ const mapDispatchToProps = ( // invalidate the last buy quote. dispatch(actions.updateLatestBuyQuote(undefined)); // reset our buy state - dispatch(actions.updatebuyOrderState(AsyncProcessState.NONE)); + dispatch(actions.updateBuyOrderState(AsyncProcessState.NONE)); if (!_.isUndefined(value) && !_.isUndefined(assetData)) { // even if it's debounced, give them the illusion it's loading diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index 4a8e31525..4d3315b1a 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -44,9 +44,9 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): }); const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({ - onClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)), - onBuySuccess: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.SUCCESS)), - onBuyFailure: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.FAILURE)), + onClick: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.PENDING)), + onBuySuccess: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.SUCCESS)), + onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.FAILURE)), }); export const SelectedAssetBuyButton: React.ComponentClass = connect( diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index b4aa4f4cb..016dc29dc 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -35,7 +35,7 @@ export enum ActionTypes { export const actions = { updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price), updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount), - updatebuyOrderState: (buyState: AsyncProcessState) => + updateBuyOrderState: (buyState: AsyncProcessState) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState), updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote), updateBuyquoteRequestStatePending: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING), -- cgit v1.2.3 From 9aa67538231cc4ff71fd0f8ebe4dc66b1bcc4937 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 13:42:59 -0700 Subject: Rename update function to set function since it doesnt take a parameter --- packages/instant/src/containers/selected_asset_amount_input.ts | 6 +++--- packages/instant/src/redux/actions.ts | 8 ++++---- packages/instant/src/redux/reducer.ts | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 2a1e5e457..e55c8b991 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -44,13 +44,13 @@ const updateBuyQuoteAsync = async ( const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals); // mark quote as pending - dispatch(actions.updateBuyquoteRequestStatePending()); + dispatch(actions.setQuoteRequestStatePending()); let newBuyQuote: BuyQuote | undefined; try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); } catch (error) { - dispatch(actions.updateBuyquoteRequestStateFailure()); + dispatch(actions.setQuoteRequestStateFailure()); errorUtil.errorFlasher.flashNewError(dispatch, error); return; } @@ -76,7 +76,7 @@ const mapDispatchToProps = ( if (!_.isUndefined(value) && !_.isUndefined(assetData)) { // even if it's debounced, give them the illusion it's loading - dispatch(actions.updateBuyquoteRequestStatePending()); + dispatch(actions.setQuoteRequestStatePending()); // tslint:disable-next-line:no-floating-promises debouncedUpdateBuyQuoteAsync(dispatch, assetData, value); } diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index 016dc29dc..e52a79e76 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -25,8 +25,8 @@ export enum ActionTypes { UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT', UPDATE_SELECTED_ASSET_BUY_STATE = 'UPDATE_SELECTED_ASSET_BUY_STATE', UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE', - UPDATE_BUY_QUOTE_STATE_PENDING = 'UPDATE_BUY_QUOTE_STATE_PENDING', - UPDATE_BUY_QUOTE_STATE_FAILURE = 'UPDATE_BUY_QUOTE_STATE_FAILURE', + SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING', + SET_QUOTE_REQUEST_STATE_FAILURE = 'SET_QUOTE_REQUEST_STATE_FAILURE', SET_ERROR = 'SET_ERROR', HIDE_ERROR = 'HIDE_ERROR', CLEAR_ERROR = 'CLEAR_ERROR', @@ -38,8 +38,8 @@ export const actions = { updateBuyOrderState: (buyState: AsyncProcessState) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState), updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote), - updateBuyquoteRequestStatePending: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING), - updateBuyquoteRequestStateFailure: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_FAILURE), + setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING), + setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE), setError: (error?: any) => createAction(ActionTypes.SET_ERROR, error), hideError: () => createAction(ActionTypes.HIDE_ERROR), clearError: () => createAction(ActionTypes.CLEAR_ERROR), diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index d2256ef54..6c278099f 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -52,13 +52,13 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => latestBuyQuote: action.data, quoteRequestState: AsyncProcessState.SUCCESS, }; - case ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING: + case ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING: return { ...state, latestBuyQuote: undefined, quoteRequestState: AsyncProcessState.PENDING, }; - case ActionTypes.UPDATE_BUY_QUOTE_STATE_FAILURE: + case ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE: return { ...state, latestBuyQuote: undefined, -- cgit v1.2.3 From b4af27dd4462a001904ac6d69e43aac9fd7bb69a Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 13:48:28 -0700 Subject: Moved LatestErrorDisplay to types file and gave generic name --- packages/instant/src/containers/latest_error.tsx | 5 +++-- packages/instant/src/redux/reducer.ts | 16 ++++++---------- packages/instant/src/types.ts | 4 ++++ 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index 08ea418e7..413cf16ad 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -3,7 +3,8 @@ import * as React from 'react'; import { connect } from 'react-redux'; import { SlidingError } from '../components/sliding_error'; -import { LatestErrorDisplay, State } from '../redux/reducer'; +import { State } from '../redux/reducer'; +import { DisplayStatus } from '../types'; import { errorUtil } from '../util/error'; export interface LatestErrorComponentProps { @@ -29,7 +30,7 @@ export interface LatestErrorProps {} const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ assetData: state.selectedAssetData, latestError: state.latestError, - slidingDirection: state.latestErrorDisplay === LatestErrorDisplay.Present ? 'up' : 'down', + slidingDirection: state.latestErrorDisplay === DisplayStatus.Present ? 'up' : 'down', }); export const LatestError = connect(mapStateToProps)(LatestErrorComponent); diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 6c278099f..2d50dd4b9 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -3,14 +3,10 @@ import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import { zrxAssetData } from '../constants'; -import { AsyncProcessState } from '../types'; +import { AsyncProcessState, DisplayStatus } from '../types'; import { Action, ActionTypes } from './actions'; -export enum LatestErrorDisplay { - Present, - Hidden, -} export interface State { selectedAssetData?: string; selectedAssetAmount?: BigNumber; @@ -19,7 +15,7 @@ export interface State { latestBuyQuote?: BuyQuote; quoteRequestState: AsyncProcessState; latestError?: any; - latestErrorDisplay: LatestErrorDisplay; + latestErrorDisplay: DisplayStatus; } export const INITIAL_STATE: State = { @@ -30,7 +26,7 @@ export const INITIAL_STATE: State = { ethUsdPrice: undefined, latestBuyQuote: undefined, latestError: undefined, - latestErrorDisplay: LatestErrorDisplay.Hidden, + latestErrorDisplay: DisplayStatus.Hidden, quoteRequestState: AsyncProcessState.NONE, }; @@ -73,18 +69,18 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => return { ...state, latestError: action.data, - latestErrorDisplay: LatestErrorDisplay.Present, + latestErrorDisplay: DisplayStatus.Present, }; case ActionTypes.HIDE_ERROR: return { ...state, - latestErrorDisplay: LatestErrorDisplay.Hidden, + latestErrorDisplay: DisplayStatus.Hidden, }; case ActionTypes.CLEAR_ERROR: return { ...state, latestError: undefined, - latestErrorDisplay: LatestErrorDisplay.Hidden, + latestErrorDisplay: DisplayStatus.Hidden, }; default: return state; diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index 8e3bb9b37..013ada27b 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -7,6 +7,10 @@ export enum AsyncProcessState { SUCCESS = 'Success', FAILURE = 'Failure', } +export enum DisplayStatus { + Present, + Hidden, +} export type FunctionType = (...args: any[]) => any; export type ActionCreatorsMapObject = ObjectMap; -- cgit v1.2.3 From 8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 14:51:45 -0700 Subject: feat(instant): Indicate that order details section is loading by having pulsing placeholder --- .../instant/src/components/amount_placeholder.tsx | 17 +++++++----- .../instant/src/components/instant_heading.tsx | 13 +++++++--- packages/instant/src/components/order_details.tsx | 30 ++++++++++++++++++---- .../containers/latest_buy_quote_order_details.ts | 3 +++ 4 files changed, 47 insertions(+), 16 deletions(-) diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx index 54639effb..23a00895a 100644 --- a/packages/instant/src/components/amount_placeholder.tsx +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -6,24 +6,27 @@ import { Pulse } from './animations/pulse'; import { Text } from './ui'; -export interface AmountPlaceholderProps { - pulsating: boolean; +export interface PlainPlaceholder { + color: ColorOption; } - -const PlainPlaceholder = () => ( - +export const PlainPlaceholder: React.StatelessComponent = props => ( + — ); +export interface AmountPlaceholderProps { + color: ColorOption; + pulsating: boolean; +} export const AmountPlaceholder: React.StatelessComponent = props => { if (props.pulsating) { return ( - + ); } else { - return ; + return ; } }; diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 9ca4ce598..6a4c850f2 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -17,6 +17,7 @@ export interface InstantHeadingProps { quoteRequestState: AsyncProcessState; } +const placeholderColor = ColorOption.white; export class InstantHeading extends React.Component { public render(): React.ReactNode { const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow(); @@ -52,10 +53,10 @@ export class InstantHeading extends React.Component { private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { - return ; + return ; } if (_.isUndefined(this.props.selectedAssetAmount)) { - return ; + return ; } return undefined; } @@ -63,7 +64,11 @@ export class InstantHeading extends React.Component { private _ethAmount(): React.ReactNode { return ( - {format.ethBaseAmount(this.props.totalEthBaseAmount, 4, )} + {format.ethBaseAmount( + this.props.totalEthBaseAmount, + 4, + , + )} ); } @@ -75,7 +80,7 @@ export class InstantHeading extends React.Component { this.props.totalEthBaseAmount, this.props.ethUsdPrice, 2, - , + , )} ); diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index ad4a87714..f48f27edb 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -7,11 +7,13 @@ import { oc } from 'ts-optchain'; import { ColorOption } from '../style/theme'; import { format } from '../util/format'; +import { AmountPlaceholder } from './amount_placeholder'; import { Container, Flex, Text } from './ui'; export interface OrderDetailsProps { buyQuoteInfo?: BuyQuoteInfo; ethUsdPrice?: BigNumber; + isLoading: boolean; } export class OrderDetails extends React.Component { @@ -39,13 +41,20 @@ export class OrderDetails extends React.Component { ethAmount={ethAssetPrice} ethUsdPrice={ethUsdPrice} isEthAmountInBaseUnits={false} + isLoading={this.props.isLoading} + /> + - ); @@ -58,6 +67,7 @@ export interface EthAmountRowProps { isEthAmountInBaseUnits?: boolean; ethUsdPrice?: BigNumber; shouldEmphasize?: boolean; + isLoading: boolean; } export const EthAmountRow: React.StatelessComponent = ({ @@ -66,15 +76,19 @@ export const EthAmountRow: React.StatelessComponent = ({ isEthAmountInBaseUnits, ethUsdPrice, shouldEmphasize, + isLoading, }) => { - const fontWeight = shouldEmphasize ? 700 : 400; + // TODO: put in private function const usdFormatter = isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; - const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount; - const usdPriceSection = _.isUndefined(ethUsdPrice) ? null : ( + const shouldHideUsdPriceSection = _.isUndefined(ethUsdPrice) || _.isUndefined(ethAmount); + const usdPriceSection = shouldHideUsdPriceSection ? null : ( ({usdFormatter(ethAmount, ethUsdPrice)}) ); + + const fontWeight = shouldEmphasize ? 700 : 400; + const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount; return ( @@ -84,7 +98,13 @@ export const EthAmountRow: React.StatelessComponent = ({ {usdPriceSection} - {ethFormatter(ethAmount)} + {ethFormatter( + ethAmount, + 4, + + + , + )} diff --git a/packages/instant/src/containers/latest_buy_quote_order_details.ts b/packages/instant/src/containers/latest_buy_quote_order_details.ts index 597bf3088..092aaaf20 100644 --- a/packages/instant/src/containers/latest_buy_quote_order_details.ts +++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts @@ -8,18 +8,21 @@ import { oc } from 'ts-optchain'; import { State } from '../redux/reducer'; import { OrderDetails } from '../components/order_details'; +import { AsyncProcessState } from '../types'; export interface LatestBuyQuoteOrderDetailsProps {} interface ConnectedState { buyQuoteInfo?: BuyQuoteInfo; ethUsdPrice?: BigNumber; + isLoading: boolean; } const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({ // use the worst case quote info buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(), ethUsdPrice: state.ethUsdPrice, + isLoading: state.quoteRequestState === AsyncProcessState.PENDING, }); export const LatestBuyQuoteOrderDetails: React.ComponentClass = connect( -- cgit v1.2.3 From 8ff5e1926993979229783cfb03d38aabd6f2f3d3 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 15:27:34 -0700 Subject: Move USD section into helper function --- packages/instant/src/components/order_details.tsx | 88 +++++++++++------------ 1 file changed, 42 insertions(+), 46 deletions(-) diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index f48f27edb..9a0dbc47a 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -15,7 +15,6 @@ export interface OrderDetailsProps { ethUsdPrice?: BigNumber; isLoading: boolean; } - export class OrderDetails extends React.Component { public render(): React.ReactNode { const { buyQuoteInfo, ethUsdPrice } = this.props; @@ -70,51 +69,48 @@ export interface EthAmountRowProps { isLoading: boolean; } -export const EthAmountRow: React.StatelessComponent = ({ - rowLabel, - ethAmount, - isEthAmountInBaseUnits, - ethUsdPrice, - shouldEmphasize, - isLoading, -}) => { - // TODO: put in private function - const usdFormatter = isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; - const shouldHideUsdPriceSection = _.isUndefined(ethUsdPrice) || _.isUndefined(ethAmount); - const usdPriceSection = shouldHideUsdPriceSection ? null : ( - - ({usdFormatter(ethAmount, ethUsdPrice)}) - - ); +export class EthAmountRow extends React.Component { + public static defaultProps = { + shouldEmphasize: false, + isEthAmountInBaseUnits: true, + }; + public static displayName = 'EthAmountRow'; + public render(): React.ReactNode { + const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props; - const fontWeight = shouldEmphasize ? 700 : 400; - const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount; - return ( - - - - {rowLabel} - - - {usdPriceSection} + const fontWeight = shouldEmphasize ? 700 : 400; + const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount; + return ( + + - {ethFormatter( - ethAmount, - 4, - - - , - )} + {rowLabel} - - - - ); -}; - -EthAmountRow.defaultProps = { - shouldEmphasize: false, - isEthAmountInBaseUnits: true, -}; - -EthAmountRow.displayName = 'EthAmountRow'; + + {this._usdSection()} + + {ethFormatter( + ethAmount, + 4, + + + , + )} + + + + + ); + } + private _usdSection(): React.ReactNode { + const usdFormatter = this.props.isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; + const shouldHideUsdPriceSection = _.isUndefined(this.props.ethUsdPrice) || _.isUndefined(this.props.ethAmount); + return shouldHideUsdPriceSection ? null : ( + + + ({usdFormatter(this.props.ethAmount, this.props.ethUsdPrice)}) + + + ); + } +} -- cgit v1.2.3 From a42347a776e2fa14fa898a354190f8b75bbe2fb2 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 15:28:24 -0700 Subject: Allow more than 1 class per file Felt silly that refactoring a component defined as a function to a class with a helper function caused a tslint violation --- packages/instant/tslint.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/instant/tslint.json b/packages/instant/tslint.json index abe874a6d..08b76be97 100644 --- a/packages/instant/tslint.json +++ b/packages/instant/tslint.json @@ -2,6 +2,7 @@ "extends": ["@0x/tslint-config"], "rules": { "custom-no-magic-numbers": false, - "semicolon": [true, "always", "ignore-bound-class-methods"] + "semicolon": [true, "always", "ignore-bound-class-methods"], + "max-classes-per-file": false } } -- cgit v1.2.3 From aa0e07b0581a645c3d2ea035d3acf28a74de0384 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 15:30:14 -0700 Subject: pulsating -> isPulsating --- packages/instant/src/components/amount_placeholder.tsx | 4 ++-- packages/instant/src/components/instant_heading.tsx | 8 ++++---- packages/instant/src/components/order_details.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx index 23a00895a..e27d0ba81 100644 --- a/packages/instant/src/components/amount_placeholder.tsx +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -17,10 +17,10 @@ export const PlainPlaceholder: React.StatelessComponent = prop export interface AmountPlaceholderProps { color: ColorOption; - pulsating: boolean; + isPulsating: boolean; } export const AmountPlaceholder: React.StatelessComponent = props => { - if (props.pulsating) { + if (props.isPulsating) { return ( diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 6a4c850f2..e2ef2d668 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -53,10 +53,10 @@ export class InstantHeading extends React.Component { private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { - return ; + return ; } if (_.isUndefined(this.props.selectedAssetAmount)) { - return ; + return ; } return undefined; } @@ -67,7 +67,7 @@ export class InstantHeading extends React.Component { {format.ethBaseAmount( this.props.totalEthBaseAmount, 4, - , + , )} ); @@ -80,7 +80,7 @@ export class InstantHeading extends React.Component { this.props.totalEthBaseAmount, this.props.ethUsdPrice, 2, - , + , )} ); diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index 9a0dbc47a..a7971e1fd 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -93,7 +93,7 @@ export class EthAmountRow extends React.Component { ethAmount, 4, - + , )} -- cgit v1.2.3 From ff1f0a967802529e5ee50a7ff52d67bae1252b51 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 15:31:18 -0700 Subject: undefined -> null to follow convention --- packages/instant/src/components/instant_heading.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index e2ef2d668..48cda7f88 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -51,14 +51,14 @@ export class InstantHeading extends React.Component { ); } - private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined { + private _placeholderAmountToAlwaysShow(): React.ReactNode | null { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { return ; } if (_.isUndefined(this.props.selectedAssetAmount)) { return ; } - return undefined; + return null; } private _ethAmount(): React.ReactNode { -- cgit v1.2.3 From ad6dc8e891059f00f2ddda1884bbc78c1e47ea24 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 18 Oct 2018 16:04:30 -0700 Subject: fix: refactor ZeroExInstant state creation logic and fix bug --- packages/instant/src/components/zero_ex_instant.tsx | 9 ++++++--- packages/instant/src/redux/reducer.ts | 1 - packages/instant/src/redux/store.ts | 3 +-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index 5b75a7556..a67c0f412 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -29,8 +29,7 @@ export class ZeroExInstant extends React.Component { additionalAssetMetaDataMap: {}, }; public store: Store; - constructor(props: ZeroExInstantProps) { - super(props); + private static _createPartialStoreStateFromProps(props: ZeroExInstantProps): Partial { // TODO: Provider needs to not be hard-coded to injected web3. const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(getProvider(), props.sraApiUrl); const completeAssetMetaDataMap = { @@ -42,7 +41,11 @@ export class ZeroExInstant extends React.Component { selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap), assetMetaDataMap: completeAssetMetaDataMap, }; - this.store = store.create(storeStateFromProps); + return storeStateFromProps; + } + constructor(props: ZeroExInstantProps) { + super(props); + this.store = store.create(ZeroExInstant._createPartialStoreStateFromProps(this.props)); // tslint:disable-next-line:no-floating-promises asyncData.fetchAndDispatchToStore(this.store); } diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 657bd0e40..83422be45 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -36,7 +36,6 @@ export const INITIAL_STATE: State = { quoteState: AsyncProcessState.NONE, }; -// TODO: Figure out why there is an INITIAL_STATE key in the store... export const reducer = (state: State = INITIAL_STATE, action: Action): State => { switch (action.type) { case ActionTypes.UPDATE_ETH_USD_PRICE: diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts index 505234299..88d964bbc 100644 --- a/packages/instant/src/redux/store.ts +++ b/packages/instant/src/redux/store.ts @@ -9,10 +9,9 @@ export type Store = ReduxStore; export const store = { create: (withState: Partial): Store => { const allInitialState = { - INITIAL_STATE, + ...INITIAL_STATE, ...withState, }; return createStore(reducer, allInitialState, devToolsEnhancer({})); }, }; - -- cgit v1.2.3 From 7a8adf9db5a83c3f44d6fe9e84e00ff1ec1e88e0 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 18 Oct 2018 16:35:59 -0700 Subject: feat: use color from metaData instead of default primaryColor --- .../instant/src/components/zero_ex_instant.tsx | 6 ++-- .../containers/selected_asset_theme_provider.ts | 32 ++++++++++++++++++++++ 2 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 packages/instant/src/containers/selected_asset_theme_provider.ts diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index a67c0f412..c59c838a2 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -3,12 +3,12 @@ import { ObjectMap } from '@0x/types'; import * as React from 'react'; import { Provider } from 'react-redux'; +import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider'; import { assetMetaDataMap } from '../data/asset_meta_data_map'; import { asyncData } from '../redux/async_data'; import { State } from '../redux/reducer'; import { store, Store } from '../redux/store'; import { fonts } from '../style/fonts'; -import { theme, ThemeProvider } from '../style/theme'; import { AssetMetaData } from '../types'; import { assetUtils } from '../util/asset'; import { getProvider } from '../util/provider'; @@ -53,9 +53,9 @@ export class ZeroExInstant extends React.Component { public render(): React.ReactNode { return ( - + - + ); } diff --git a/packages/instant/src/containers/selected_asset_theme_provider.ts b/packages/instant/src/containers/selected_asset_theme_provider.ts new file mode 100644 index 000000000..6e6b83d73 --- /dev/null +++ b/packages/instant/src/containers/selected_asset_theme_provider.ts @@ -0,0 +1,32 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; + +import { State } from '../redux/reducer'; +import { Theme, theme as defaultTheme, ThemeProvider } from '../style/theme'; +import { Asset } from '../types'; + +export interface SelectedAssetThemeProviderProps {} + +interface ConnectedState { + theme: Theme; +} + +const getTheme = (asset?: Asset): Theme => { + if (!_.isUndefined(asset) && !_.isUndefined(asset.metaData.primaryColor)) { + return { + ...defaultTheme, + primaryColor: asset.metaData.primaryColor, + }; + } + return defaultTheme; +}; + +const mapStateToProps = (state: State, _ownProps: SelectedAssetThemeProviderProps): ConnectedState => { + const theme = getTheme(state.selectedAsset); + return { theme }; +}; + +export const SelectedAssetThemeProvider: React.ComponentClass = connect( + mapStateToProps, +)(ThemeProvider); -- cgit v1.2.3 From 7bc2df56023641c27de62bc7e9a8953767cbc076 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 18 Oct 2018 17:42:32 -0700 Subject: feat: add network to state and use it where relevant --- packages/instant/public/index.html | 2 +- .../instant/src/components/zero_ex_instant.tsx | 41 ++++++++++++++-------- packages/instant/src/redux/reducer.ts | 13 +++++-- packages/instant/src/redux/store.ts | 10 ++---- packages/instant/src/util/asset.ts | 14 ++++---- 5 files changed, 48 insertions(+), 32 deletions(-) diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html index 1f6a0a9e9..14555fc64 100644 --- a/packages/instant/public/index.html +++ b/packages/instant/public/index.html @@ -25,7 +25,7 @@
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index c59c838a2..142e74dae 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -4,12 +4,11 @@ import * as React from 'react'; import { Provider } from 'react-redux'; import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider'; -import { assetMetaDataMap } from '../data/asset_meta_data_map'; import { asyncData } from '../redux/async_data'; -import { State } from '../redux/reducer'; +import { INITIAL_STATE, State } from '../redux/reducer'; import { store, Store } from '../redux/store'; import { fonts } from '../style/fonts'; -import { AssetMetaData } from '../types'; +import { AssetMetaData, Network } from '../types'; import { assetUtils } from '../util/asset'; import { getProvider } from '../util/provider'; @@ -17,35 +16,49 @@ import { ZeroExInstantContainer } from './zero_ex_instant_container'; fonts.include(); -export interface ZeroExInstantProps { +export type ZeroExInstantProps = ZeroExInstantRequiredProps & Partial; + +export interface ZeroExInstantRequiredProps { // TODO: Change API when we allow the selection of different assetDatas assetData: string; - sraApiUrl: string; + // TODO: Allow for a function that returns orders + liquiditySource: string; +} + +export interface ZeroExInstantOptionalProps { additionalAssetMetaDataMap: ObjectMap; + network: Network; } export class ZeroExInstant extends React.Component { - public static defaultProps = { - additionalAssetMetaDataMap: {}, - }; public store: Store; - private static _createPartialStoreStateFromProps(props: ZeroExInstantProps): Partial { + private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State { + // Create merged object such that properties in props override default settings + const optionalPropsWithDefaults: ZeroExInstantOptionalProps = { + additionalAssetMetaDataMap: props.additionalAssetMetaDataMap || {}, + network: props.network || state.network, + }; + const { network } = optionalPropsWithDefaults; // TODO: Provider needs to not be hard-coded to injected web3. - const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(getProvider(), props.sraApiUrl); + const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(getProvider(), props.liquiditySource, { + networkId: network, + }); const completeAssetMetaDataMap = { ...props.additionalAssetMetaDataMap, - ...assetMetaDataMap, + ...state.assetMetaDataMap, }; - const storeStateFromProps: Partial = { + const storeStateFromProps: State = { + ...state, assetBuyer, - selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap), + network, + selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, network), assetMetaDataMap: completeAssetMetaDataMap, }; return storeStateFromProps; } constructor(props: ZeroExInstantProps) { super(props); - this.store = store.create(ZeroExInstant._createPartialStoreStateFromProps(this.props)); + this.store = store.create(ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE)); // tslint:disable-next-line:no-floating-promises asyncData.fetchAndDispatchToStore(this.store); } diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 83422be45..e9e0a85e0 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -3,7 +3,8 @@ import { ObjectMap } from '@0x/types'; import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; -import { Asset, AssetMetaData, AsyncProcessState } from '../types'; +import { assetMetaDataMap } from '../data/asset_meta_data_map'; +import { Asset, AssetMetaData, AsyncProcessState, Network } from '../types'; import { assetUtils } from '../util/asset'; import { Action, ActionTypes } from './actions'; @@ -13,6 +14,7 @@ export enum LatestErrorDisplay { Hidden, } export interface State { + network: Network; assetBuyer?: AssetBuyer; assetMetaDataMap: ObjectMap; selectedAsset?: Asset; @@ -26,8 +28,9 @@ export interface State { } export const INITIAL_STATE: State = { + network: Network.Mainnet, selectedAssetAmount: undefined, - assetMetaDataMap: {}, + assetMetaDataMap, buyOrderState: AsyncProcessState.NONE, ethUsdPrice: undefined, latestBuyQuote: undefined, @@ -92,7 +95,11 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => const newSelectedAssetData = action.data; let newSelectedAsset: Asset | undefined; if (!_.isUndefined(newSelectedAssetData)) { - newSelectedAsset = assetUtils.createAssetFromAssetData(newSelectedAssetData, state.assetMetaDataMap); + newSelectedAsset = assetUtils.createAssetFromAssetData( + newSelectedAssetData, + state.assetMetaDataMap, + state.network, + ); } return { ...state, diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts index 88d964bbc..01deb8690 100644 --- a/packages/instant/src/redux/store.ts +++ b/packages/instant/src/redux/store.ts @@ -2,16 +2,12 @@ import * as _ from 'lodash'; import { createStore, Store as ReduxStore } from 'redux'; import { devToolsEnhancer } from 'redux-devtools-extension/developmentOnly'; -import { INITIAL_STATE, reducer, State } from './reducer'; +import { reducer, State } from './reducer'; export type Store = ReduxStore; export const store = { - create: (withState: Partial): Store => { - const allInitialState = { - ...INITIAL_STATE, - ...withState, - }; - return createStore(reducer, allInitialState, devToolsEnhancer({})); + create: (state: State): Store => { + return createStore(reducer, state, devToolsEnhancer({})); }, }; diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts index a105a7c2b..d50efb5d1 100644 --- a/packages/instant/src/util/asset.ts +++ b/packages/instant/src/util/asset.ts @@ -6,17 +6,17 @@ import { assetDataNetworkMapping } from '../data/asset_data_network_mapping'; import { Asset, AssetMetaData, Network, ZeroExInstantError } from '../types'; export const assetUtils = { - createAssetFromAssetData: (assetData: string, assetMetaDataMap: ObjectMap): Asset => { + createAssetFromAssetData: ( + assetData: string, + assetMetaDataMap: ObjectMap, + network: Network, + ): Asset => { return { assetData, - metaData: assetUtils.getMetaDataOrThrow(assetData, assetMetaDataMap), + metaData: assetUtils.getMetaDataOrThrow(assetData, assetMetaDataMap, network), }; }, - getMetaDataOrThrow: ( - assetData: string, - metaDataMap: ObjectMap, - network: Network = Network.Mainnet, - ): AssetMetaData => { + getMetaDataOrThrow: (assetData: string, metaDataMap: ObjectMap, network: Network): AssetMetaData => { let mainnetAssetData: string | undefined = assetData; if (network !== Network.Mainnet) { mainnetAssetData = assetUtils.getAssociatedAssetDataIfExists(assetData, network); -- cgit v1.2.3 From f3a6800306a6fd40f19d15318b9fdac4dcdf76c8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 18 Oct 2018 18:08:49 -0700 Subject: fix: dont force NFTs to uppercase their name --- packages/instant/src/util/asset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts index d50efb5d1..698107538 100644 --- a/packages/instant/src/util/asset.ts +++ b/packages/instant/src/util/asset.ts @@ -39,7 +39,7 @@ export const assetUtils = { case AssetProxyId.ERC20: return metaData.symbol.toUpperCase(); case AssetProxyId.ERC721: - return metaData.name.toUpperCase(); + return metaData.name; default: return defaultName; } -- cgit v1.2.3 From ee6bb229e0f912e2ccd9aff70ebf82d98b312251 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 09:44:27 +0100 Subject: Don't show topBar menu items in sidebar on wiki --- packages/website/ts/pages/wiki/wiki.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index fdca61e39..e62300ddf 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -73,10 +73,14 @@ export class Wiki extends React.Component { {this._renderWikiArticles()} ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const sidebar = _.isUndefined(this.state.articlesBySection) ? (
) : ( - + ); return ( Date: Fri, 19 Oct 2018 09:44:52 +0100 Subject: fix: Make sure page scrollable on mobile --- packages/website/ts/pages/documentation/developers_page.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 934a4cc36..918a3a635 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -1,4 +1,4 @@ -import { colors, constants as sharedConstants } from '@0x/react-shared'; +import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); @@ -71,6 +71,7 @@ export class DevelopersPage extends React.Component Date: Fri, 19 Oct 2018 09:56:34 +0100 Subject: copy: Networked liquidity -> shared liquidity --- packages/website/translations/chinese.json | 4 ++-- packages/website/translations/english.json | 4 ++-- packages/website/translations/korean.json | 4 ++-- packages/website/translations/russian.json | 4 ++-- packages/website/translations/spanish.json | 4 ++-- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- packages/website/ts/pages/documentation/docs_home.tsx | 4 ++-- packages/website/ts/types.ts | 4 ++-- 8 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 2d3ad6974..4f779282f 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -85,8 +85,8 @@ "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", - "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Access the shared liquidity pool using the Standard Relayer API", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Access the shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index fab8ed56b..510b3a05b 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -89,8 +89,8 @@ "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", - "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 8470bf9a0..be7d00228 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -85,8 +85,8 @@ "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", - "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index b2bc151ab..d75b2a459 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -85,8 +85,8 @@ "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", - "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index fefb92447..a64db197c 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -86,8 +86,8 @@ "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", - "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index f5d21535a..b279566e0 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -24,7 +24,7 @@ const gettingStartedKeyToLinkInfo2: ALink[] = [ to: `${WebsitePaths.Wiki}#Ethereum-Development`, }, { - title: Key.UseSharedLiquidity, + title: Key.UseNetworkedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, ]; diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 74fd0135c..a8dcff43b 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -37,9 +37,9 @@ const TUTORIALS: TutorialInfo[] = [ }, { iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', - description: Key.UseSharedLiquidityDescription, + description: Key.UseNetworkedLiquidityDescription, link: { - title: Key.UseSharedLiquidity, + title: Key.UseNetworkedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, }, diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index f85317c7b..d3bdd880e 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -468,8 +468,8 @@ export enum Key { DevelopOnEthereumDescription = 'DEVELOP_ON_ETHEREUM_DESCRIPTION', OrderBasics = 'ORDER_BASICS', OrderBasicsDescription = 'ORDER_BASICS_DESCRIPTION', - UseSharedLiquidity = 'USE_SHARED_LIQUIDITY', - UseSharedLiquidityDescription = 'USE_SHARED_LIQUIDITY_DESCRIPTION', + UseNetworkedLiquidity = 'USE_NETWORKED_LIQUIDITY', + UseNetworkedLiquidityDescription = 'USE_NETWORKED_LIQUIDITY_DESCRIPTION', ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION', Sandbox = 'SANDBOX', Github = 'GITHUB', -- cgit v1.2.3 From 0eb9769cd41f86333670b2f77b01c0e9c203a499 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 10:00:30 +0100 Subject: Switch tutorial descriptions --- packages/website/translations/chinese.json | 4 ++-- packages/website/translations/english.json | 4 ++-- packages/website/translations/korean.json | 4 ++-- packages/website/translations/russian.json | 4 ++-- packages/website/translations/spanish.json | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 4f779282f..95b9bda62 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -80,9 +80,9 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "开发人员", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", - "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 510b3a05b..465bd49b4 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -84,9 +84,9 @@ "ROCKETCHAT": "rocket.chat", "TRADE_CALL_TO_ACTION": "trade on 0x", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", - "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index be7d00228..5485e5583 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -80,9 +80,9 @@ "ROCKETCHAT": "Rocket.chat", "DEVELOPERS": "개발자", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", - "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index d75b2a459..a2e2a8cef 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -80,9 +80,9 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "Для разработчиков", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", - "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index a64db197c..acbc59c3d 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -81,9 +81,9 @@ "HOME": "rocket.chat", "ROCKETCHAT": "desarrolladores", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", - "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", -- cgit v1.2.3 From c26b3f5dfcea86b1885dcf2070580baec82430ea Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 10:05:19 +0100 Subject: copy: consistently name ERCdEX with correct capitalization --- packages/website/ts/pages/documentation/docs_home.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index a8dcff43b..cf229cb3b 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -194,7 +194,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { }, { description: - "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", + "ERCdEX's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", link: { title: 'Aquaduct', to: 'https://www.npmjs.com/package/aqueduct', @@ -219,26 +219,26 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { }, }, { - description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", + description: "The ERCdEX Trade Widget let's any website provide token liquidity to it's users", link: { to: 'https://github.com/ERCdEX/widget', - title: 'ERCdex Widget', + title: 'ERCdEX Widget', shouldOpenInNewTab: true, }, }, { - description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", + description: "ERCdEX's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", link: { to: 'https://github.com/ERCdEX/java', - title: 'ERCdex Java SDK', + title: 'ERCdEX Java SDK', shouldOpenInNewTab: true, }, }, { - description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", + description: "ERCdEX's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", link: { to: 'https://github.com/ERCdEX/python', - title: 'ERCdex Python SDK', + title: 'ERCdEX Python SDK', shouldOpenInNewTab: true, }, }, -- cgit v1.2.3 From a60cf44d4581ee898482de235aeccec3eab412f7 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 10:16:01 +0100 Subject: style: fix doc reference package name capitalization --- packages/react-shared/src/components/markdown_section.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index e6a7d80d5..42c910c11 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -48,7 +48,7 @@ export class MarkdownSection extends React.Component -- cgit v1.2.3 From da0c5dd9d3e92b48a87585d4c08e2e9bd1279090 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 10:35:34 +0100 Subject: chore: Fix scroll issue by bumping version and installing from new branch --- packages/react-docs/package.json | 2 +- packages/react-shared/package.json | 2 +- packages/website/package.json | 2 +- yarn.lock | 10 +++++----- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 04e1387c6..d3ccfa8da 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -50,7 +50,7 @@ "react": "^16.4.2", "react-dom": "^16.4.2", "react-markdown": "^3.2.2", - "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state", + "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", "react-tooltip": "^3.2.7", "semver": "5.5.0", "styled-components": "^3.3.0" diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index 488586f89..7a150bf35 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -55,7 +55,7 @@ "react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162", "react-markdown": "^3.2.2", "react-router-dom": "^4.1.1", - "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state", + "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", "styled-components": "^3.3.0", "valid-url": "^1.0.9" }, diff --git a/packages/website/package.json b/packages/website/package.json index 777790ca9..771b1b908 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -52,7 +52,7 @@ "react-helmet": "^5.2.0", "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", - "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state", + "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", "react-tooltip": "^3.2.7", "react-typist": "^2.0.4", "redux": "^3.6.0", diff --git a/yarn.lock b/yarn.lock index 2c01768f4..5975458e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12394,9 +12394,9 @@ react-router@^4.2.0: prop-types "^15.5.4" warning "^3.0.0" -react-scroll@0xproject/react-scroll#similar-to-pr-330-but-with-replace-state: - version "1.7.10" - resolved "https://codeload.github.com/0xproject/react-scroll/tar.gz/0f625b270d7e966313cac8b811c0ae807b37e170" +react-scroll@0xproject/react-scroll#pr-330-and-replace-state: + version "1.7.11" + resolved "https://codeload.github.com/0xproject/react-scroll/tar.gz/d2afc2729dc09980e4113d8c38a1b012ba180d81" dependencies: lodash.throttle "^4.1.1" prop-types "^15.5.8" @@ -16094,8 +16094,8 @@ websocket@^1.0.24, websocket@^1.0.25: yaeti "^0.0.6" "websocket@git://github.com/frozeman/WebSocket-Node.git#browserifyCompatible": - version "1.0.24" - resolved "git://github.com/frozeman/WebSocket-Node.git#7004c39c42ac98875ab61126e5b4a925430f592c" + version "1.0.26" + resolved "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2" dependencies: debug "^2.2.0" nan "^2.3.3" -- cgit v1.2.3 From 26cd5ec1493adab55cbaf0801b0725ca99b8fc8e Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 10:46:55 +0100 Subject: style: accomodate different scrollbar widths on Firefox vs. Chrome/Safari --- packages/website/ts/pages/documentation/developers_page.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 918a3a635..9e4f6d413 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -6,13 +6,14 @@ import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ScreenWidths } from 'ts/types'; +import { BrowserType, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = 80; -const SCROLLER_WIDTH = 4; +const browserType = utils.getBrowserType(); +const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4; export interface DevelopersPageProps { location: Location; -- cgit v1.2.3 From 7742df8614e6fd8c0508e29aec47bc86f9359a8b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 11:27:42 +0100 Subject: chore: Replace state with styled-components for hover detection --- .../ts/pages/documentation/developers_page.tsx | 140 ++++++++++----------- 1 file changed, 69 insertions(+), 71 deletions(-) diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 9e4f6d413..4ea688529 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -6,6 +6,7 @@ import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { styled } from 'ts/style/theme'; import { BrowserType, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -14,6 +15,7 @@ const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = 80; const browserType = utils.getBrowserType(); const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4; +const SIDEBAR_PADDING = 22; export interface DevelopersPageProps { location: Location; @@ -25,11 +27,70 @@ export interface DevelopersPageProps { } export interface DevelopersPageState { - isHoveringSidebar: boolean; - isHoveringMainContent: boolean; isSidebarScrolling: boolean; } +const isUserOnMobile = sharedUtils.isUserOnMobile(); + +const scrollableContainerStyles = ` + position: absolute; + top: 80px; + left: 0px; + bottom: 0px; + right: 0px; + overflow-x: hidden; + overflow-y: scroll; + min-height: calc(100vh - ${TOP_BAR_HEIGHT}px); + -webkit-overflow-scrolling: touch; +`; + +interface SidebarContainerProps { + className?: string; +} + +const SidebarContainer = + styled.div < + SidebarContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 27px; + padding-bottom: 100px; + padding-left: ${SIDEBAR_PADDING}px; + padding-right: ${SIDEBAR_PADDING}px; + overflow: hidden; + &:hover { + overflow: auto; + padding-right: ${SIDEBAR_PADDING - SCROLLER_WIDTH}px; + } +`; + +interface MainContentContainerProps { + className?: string; +} + +const MainContentContainer = + styled.div < + MainContentContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 0px; + padding-left: 50px; + padding-right: 50px; + overflow: ${isUserOnMobile ? 'auto' : 'hidden'}; + &:hover { + padding-right: ${50 - SCROLLER_WIDTH}px; + overflow: auto; + } + @media (max-width: 40em) { + padding-left: 20px; + padding-right: 20px; + &:hover { + padding-right: ${20 - SCROLLER_WIDTH}px; + overflow: auto; + } + } +`; + export class DevelopersPage extends React.Component { private readonly _throttledScreenWidthUpdate: () => void; private readonly _throttledSidebarScrolling: () => void; @@ -39,8 +100,6 @@ export class DevelopersPage extends React.Component - + -
-
- {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} -
-
+ + {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} + -
+ {this.props.mainContent} -
+ ); } - private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { - if (isHovering !== this.state.isHoveringSidebar) { - this.setState({ - isHoveringSidebar: isHovering, - }); - } - } - private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { - if (isHovering !== this.state.isHoveringMainContent) { - this.setState({ - isHoveringMainContent: isHovering, - }); - } - } private _onSidebarScroll(_event: React.FormEvent): void { this.setState({ isSidebarScrolling: true, -- cgit v1.2.3 From a7a17c85dce26c8384165b821f0bf60ce531b987 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 11:48:15 +0100 Subject: chore: improve sidebar scroll --- packages/website/ts/pages/documentation/developers_page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 4ea688529..0bbc6252d 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -40,8 +40,8 @@ const scrollableContainerStyles = ` right: 0px; overflow-x: hidden; overflow-y: scroll; - min-height: calc(100vh - ${TOP_BAR_HEIGHT}px); -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; `; interface SidebarContainerProps { -- cgit v1.2.3 From 724f3b9cf7fb3a740d56e28c5375665b944919f3 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 12:25:31 +0100 Subject: Improve sidebar logic to handle MS Edge, Firefox differences between Windows & Mac --- .../ts/pages/documentation/developers_page.tsx | 30 +++++++++++++++++----- packages/website/ts/types.ts | 2 ++ packages/website/ts/utils/utils.ts | 4 +++ 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 0bbc6252d..30b79552f 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -7,14 +7,31 @@ import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; import { styled } from 'ts/style/theme'; -import { BrowserType, ScreenWidths } from 'ts/types'; +import { BrowserType, OperatingSystemType, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = 80; const browserType = utils.getBrowserType(); -const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4; +let SCROLLBAR_WIDTH; +switch (browserType) { + case BrowserType.Firefox: + // HACK: Firefox doesn't allow styling of their scrollbar's. + // Source: https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox + const os = utils.getOperatingSystem(); + SCROLLBAR_WIDTH = os === OperatingSystemType.Windows ? 17 : 15; + break; + + case BrowserType.Edge: + // Edge's scrollbar is placed outside of the div content and doesn't + // need to be accounted for + SCROLLBAR_WIDTH = 0; + break; + + default: + SCROLLBAR_WIDTH = 4; +} const SIDEBAR_PADDING = 22; export interface DevelopersPageProps { @@ -34,13 +51,14 @@ const isUserOnMobile = sharedUtils.isUserOnMobile(); const scrollableContainerStyles = ` position: absolute; - top: 80px; + top: ${TOP_BAR_HEIGHT}px; left: 0px; bottom: 0px; right: 0px; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; + /* Required for hide/show onHover of scrollbar on Microsoft Edge */ -ms-overflow-style: -ms-autohiding-scrollbar; `; @@ -60,7 +78,7 @@ const SidebarContainer = overflow: hidden; &:hover { overflow: auto; - padding-right: ${SIDEBAR_PADDING - SCROLLER_WIDTH}px; + padding-right: ${SIDEBAR_PADDING - SCROLLBAR_WIDTH}px; } `; @@ -78,14 +96,14 @@ const MainContentContainer = padding-right: 50px; overflow: ${isUserOnMobile ? 'auto' : 'hidden'}; &:hover { - padding-right: ${50 - SCROLLER_WIDTH}px; + padding-right: ${50 - SCROLLBAR_WIDTH}px; overflow: auto; } @media (max-width: 40em) { padding-left: 20px; padding-right: 20px; &:hover { - padding-right: ${20 - SCROLLER_WIDTH}px; + padding-right: ${20 - SCROLLBAR_WIDTH}px; overflow: auto; } } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index d3bdd880e..22bfd2cb4 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -590,6 +590,8 @@ export enum BrowserType { Chrome = 'Chrome', Firefox = 'Firefox', Opera = 'Opera', + Safari = 'Safari', + Edge = 'Edge', Other = 'Other', } diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index d4ad5f611..87aa48018 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -413,6 +413,10 @@ export const utils = { return BrowserType.Firefox; } else if (bowser.opera) { return BrowserType.Opera; + } else if (bowser.msedge) { + return BrowserType.Edge; + } else if (bowser.safari) { + return BrowserType.Safari; } else { return BrowserType.Other; } -- cgit v1.2.3 From 977e20edc3d94e2b95cf6e1e82eecdde2311eb7f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 13:27:16 +0100 Subject: style: make sure sideBar bottom padding is on scrollable content, not container --- packages/website/ts/pages/documentation/developers_page.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 30b79552f..401f65df3 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -72,7 +72,6 @@ const SidebarContainer = ` ${scrollableContainerStyles} padding-top: 27px; - padding-bottom: 100px; padding-left: ${SIDEBAR_PADDING}px; padding-right: ${SIDEBAR_PADDING}px; overflow: hidden; @@ -163,7 +162,9 @@ export class DevelopersPage extends React.Component - {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} + + {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} + Date: Fri, 19 Oct 2018 14:04:17 +0100 Subject: style: Switch out homepage image with improved one from Ben --- .../website/public/images/landing/0x_homepage.svg | 57 +++------------------- 1 file changed, 6 insertions(+), 51 deletions(-) diff --git a/packages/website/public/images/landing/0x_homepage.svg b/packages/website/public/images/landing/0x_homepage.svg index 061ac8939..d2ccef8f4 100644 --- a/packages/website/public/images/landing/0x_homepage.svg +++ b/packages/website/public/images/landing/0x_homepage.svg @@ -1,24 +1,18 @@ - - - - - - - - - - + + + + + - @@ -56,7 +50,6 @@ - @@ -89,7 +82,6 @@ - @@ -116,7 +108,6 @@ - @@ -143,11 +134,10 @@ - - + @@ -170,7 +160,6 @@ - @@ -197,7 +186,6 @@ - @@ -224,7 +212,6 @@ - @@ -251,7 +238,6 @@ - @@ -277,109 +263,78 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- cgit v1.2.3 From 16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 14:05:37 +0100 Subject: chore: fix dropdown bug on Firefox and reduced duplicate code --- .../components/dropdowns/developers_drop_down.tsx | 46 +++++++++++----------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index b279566e0..6e85c1499 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -89,26 +89,22 @@ export class DevelopersDropDown extends React.Component - - {this._renderTitle('Getting started')} - - - {this._renderLinkSection(gettingStartedKeyToLinkInfo1)} - - {this._renderLinkSection(gettingStartedKeyToLinkInfo2)} + + + {this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')} + {this._renderLinkSection(gettingStartedKeyToLinkInfo2)} - - - {this._renderTitle('Popular docs')} - {this._renderLinkSection(popularDocsToLinkInfos)} + + + {this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')} - {this._renderTitle('Useful links')} - {this._renderLinkSection(usefulLinksToLinkInfo)} + {this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')} @@ -127,16 +123,7 @@ export class DevelopersDropDown extends React.Component - - {title.toUpperCase()} - - - ); - } - private _renderLinkSection(links: ALink[]): React.ReactNode { + private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode { const numLinks = links.length; let i = 0; const renderLinks = _.map(links, (link: ALink) => { @@ -159,6 +146,17 @@ export class DevelopersDropDown extends React.Component ); }); - return {renderLinks}; + return ( + + + {!_.isEmpty(title) && ( + + {title.toUpperCase()} + + )} + + {renderLinks} + + ); } } -- cgit v1.2.3 From 3f2b6482c3e0abcc2b6dc1a3caef767c01a446b3 Mon Sep 17 00:00:00 2001 From: Leonid Logvinov Date: Fri, 19 Oct 2018 15:34:31 +0200 Subject: Fix the package versions in release notes --- packages/monorepo-scripts/src/prepublish_checks.ts | 2 +- packages/monorepo-scripts/src/publish.ts | 10 +++++----- packages/monorepo-scripts/src/publish_release_notes.ts | 2 +- .../monorepo-scripts/src/utils/github_release_utils.ts | 18 +++++++++--------- packages/monorepo-scripts/src/utils/utils.ts | 2 +- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/monorepo-scripts/src/prepublish_checks.ts b/packages/monorepo-scripts/src/prepublish_checks.ts index 683c26094..5f603ebc7 100644 --- a/packages/monorepo-scripts/src/prepublish_checks.ts +++ b/packages/monorepo-scripts/src/prepublish_checks.ts @@ -11,7 +11,7 @@ import { utils } from './utils/utils'; async function prepublishChecksAsync(): Promise { const shouldIncludePrivate = false; - const updatedPublicPackages = await utils.getUpdatedPackagesAsync(shouldIncludePrivate); + const updatedPublicPackages = await utils.getPackagesToPublishAsync(shouldIncludePrivate); await checkCurrentVersionMatchesLatestPublishedNPMPackageAsync(updatedPublicPackages); await checkChangelogFormatAsync(updatedPublicPackages); diff --git a/packages/monorepo-scripts/src/publish.ts b/packages/monorepo-scripts/src/publish.ts index b7131e69e..854a72b86 100644 --- a/packages/monorepo-scripts/src/publish.ts +++ b/packages/monorepo-scripts/src/publish.ts @@ -34,12 +34,12 @@ async function confirmAsync(message: string): Promise { (async () => { // Fetch public, updated Lerna packages const shouldIncludePrivate = true; - const allUpdatedPackages = await utils.getUpdatedPackagesAsync(shouldIncludePrivate); - if (_.isEmpty(allUpdatedPackages)) { + const allPackagesToPublish = await utils.getPackagesToPublishAsync(shouldIncludePrivate); + if (_.isEmpty(allPackagesToPublish)) { utils.log('No packages need publishing'); process.exit(0); } - const packagesWithDocs = getPackagesWithDocs(allUpdatedPackages); + const packagesWithDocs = getPackagesWithDocs(allPackagesToPublish); if (!configs.IS_LOCAL_PUBLISH) { await confirmAsync( @@ -49,12 +49,12 @@ async function confirmAsync(message: string): Promise { } // Update CHANGELOGs - const updatedPublicPackages = _.filter(allUpdatedPackages, pkg => !pkg.packageJson.private); + const updatedPublicPackages = _.filter(allPackagesToPublish, pkg => !pkg.packageJson.private); const updatedPublicPackageNames = _.map(updatedPublicPackages, pkg => pkg.packageJson.name); utils.log(`Will update CHANGELOGs and publish: \n${updatedPublicPackageNames.join('\n')}\n`); const packageToNextVersion = await updateChangeLogsAsync(updatedPublicPackages); - const updatedPrivatePackages = _.filter(allUpdatedPackages, pkg => pkg.packageJson.private); + const updatedPrivatePackages = _.filter(allPackagesToPublish, pkg => pkg.packageJson.private); _.each(updatedPrivatePackages, pkg => { const currentVersion = pkg.packageJson.version; const packageName = pkg.packageJson.name; diff --git a/packages/monorepo-scripts/src/publish_release_notes.ts b/packages/monorepo-scripts/src/publish_release_notes.ts index 297eb3d50..d2082521c 100644 --- a/packages/monorepo-scripts/src/publish_release_notes.ts +++ b/packages/monorepo-scripts/src/publish_release_notes.ts @@ -22,7 +22,7 @@ const args = yargs let packages; if (_.isUndefined(args.packages)) { const shouldIncludePrivate = false; - packages = await utils.getUpdatedPackagesAsync(shouldIncludePrivate); + packages = await utils.getPackagesToPublishAsync(shouldIncludePrivate); } else { const packageNames = args.packages.split(' '); packages = await utils.getPackagesByNameAsync(packageNames); diff --git a/packages/monorepo-scripts/src/utils/github_release_utils.ts b/packages/monorepo-scripts/src/utils/github_release_utils.ts index 43c52ec2d..7434d397e 100644 --- a/packages/monorepo-scripts/src/utils/github_release_utils.ts +++ b/packages/monorepo-scripts/src/utils/github_release_utils.ts @@ -12,7 +12,7 @@ import { utils } from './utils'; const publishReleaseAsync = promisify(publishRelease); // tslint:disable-next-line:completed-docs -export async function publishReleaseNotesAsync(updatedPublishPackages: Package[], isDryRun: boolean): Promise { +export async function publishReleaseNotesAsync(packagesToPublish: Package[], isDryRun: boolean): Promise { // Git push a tag representing this publish (publish-{commit-hash}) (truncate hash) const result = await execAsync('git log -n 1 --pretty=format:"%H"', { cwd: constants.monorepoRootPath }); const latestGitCommit = result.stdout; @@ -40,12 +40,8 @@ export async function publishReleaseNotesAsync(updatedPublishPackages: Package[] let assets: string[] = []; let aggregateNotes = ''; - _.each(updatedPublishPackages, pkg => { - const notes = getReleaseNotesForPackage(pkg.packageJson.name, pkg.packageJson.version); - if (_.isEmpty(notes)) { - return; // don't include it - } - aggregateNotes += `### ${pkg.packageJson.name}@${pkg.packageJson.version}\n${notes}\n\n`; + _.each(packagesToPublish, pkg => { + aggregateNotes += getReleaseNotesForPackage(pkg.packageJson.name); const packageAssets = _.get(pkg.packageJson, 'config.postpublish.assets'); if (!_.isUndefined(packageAssets)) { @@ -92,7 +88,7 @@ function adjustAssetPaths(assets: string[]): string[] { return finalAssets; } -function getReleaseNotesForPackage(packageName: string, version: string): string { +function getReleaseNotesForPackage(packageName: string): string { const packageNameWithoutNamespace = packageName.replace('@0x/', ''); const changelogJSONPath = path.join( constants.monorepoRootPath, @@ -115,5 +111,9 @@ function getReleaseNotesForPackage(packageName: string, version: string): string } notes += `\n`; }); - return notes; + if (_.isEmpty(notes)) { + return ''; // don't include it + } + const releaseNotesSection = `### ${packageName}@${latestLog.version}\n${notes}\n\n`; + return releaseNotesSection; } diff --git a/packages/monorepo-scripts/src/utils/utils.ts b/packages/monorepo-scripts/src/utils/utils.ts index 5e2e877c7..44ff971e8 100644 --- a/packages/monorepo-scripts/src/utils/utils.ts +++ b/packages/monorepo-scripts/src/utils/utils.ts @@ -61,7 +61,7 @@ export const utils = { }); return updatedPackages; }, - async getUpdatedPackagesAsync(shouldIncludePrivate: boolean): Promise { + async getPackagesToPublishAsync(shouldIncludePrivate: boolean): Promise { const updatedPublicPackages = await utils.getLernaUpdatedPackagesAsync(shouldIncludePrivate); const updatedPackageNames = _.map(updatedPublicPackages, pkg => pkg.name); -- cgit v1.2.3 From 90ba8e0e8df2ccd2907adfcb143ed954b9d0b4c5 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 17:09:13 +0100 Subject: Remove unused listeners --- packages/react-docs/src/components/doc_reference.tsx | 10 ---------- packages/website/ts/pages/wiki/wiki.tsx | 8 -------- 2 files changed, 18 deletions(-) diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx index 00b1286a4..85547576b 100644 --- a/packages/react-docs/src/components/doc_reference.tsx +++ b/packages/react-docs/src/components/doc_reference.tsx @@ -52,12 +52,6 @@ export interface DocReferenceProps { export interface DocReferenceState {} export class DocReference extends React.Component { - public componentDidMount(): void { - window.addEventListener('hashchange', this._onHashChanged.bind(this), false); - } - public componentWillUnmount(): void { - window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); - } public componentDidUpdate(prevProps: DocReferenceProps, _prevState: DocReferenceState): void { if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) { const hash = window.location.hash.slice(1); @@ -323,8 +317,4 @@ export class DocReference extends React.Component ); } - private _onHashChanged(_event: any): void { - const hash = window.location.hash.slice(1); - sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); - } } diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index e62300ddf..a35404e33 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -49,9 +49,6 @@ export class Wiki extends React.Component { isHoveringSidebar: false, }; } - public componentDidMount(): void { - window.addEventListener('hashchange', this._onHashChanged.bind(this), false); - } public componentWillMount(): void { // tslint:disable-next-line:no-floating-promises this._fetchArticlesBySectionAsync(); @@ -59,7 +56,6 @@ export class Wiki extends React.Component { public componentWillUnmount(): void { this._isUnmounted = true; clearTimeout(this._wikiBackoffTimeoutId); - window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); } public render(): React.ReactNode { const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) @@ -198,8 +194,4 @@ export class Wiki extends React.Component { } return sectionNameToLinks; } - private _onHashChanged(_event: any): void { - const hash = window.location.hash.slice(1); - sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); - } } -- cgit v1.2.3 From d129c922edd8bc0319273488b23a5257d736502d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 17:22:33 +0100 Subject: Use media module --- packages/website/ts/pages/documentation/developers_page.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 401f65df3..361dbc86e 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -6,6 +6,7 @@ import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { media } from 'ts/style/media'; import { styled } from 'ts/style/theme'; import { BrowserType, OperatingSystemType, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; @@ -98,14 +99,14 @@ const MainContentContainer = padding-right: ${50 - SCROLLBAR_WIDTH}px; overflow: auto; } - @media (max-width: 40em) { + ${media.small` padding-left: 20px; padding-right: 20px; &:hover { padding-right: ${20 - SCROLLBAR_WIDTH}px; overflow: auto; } - } + `} `; export class DevelopersPage extends React.Component { -- cgit v1.2.3 From 48f1e6057c878a948d21ed7d2214c7792c648f75 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 19 Oct 2018 09:23:58 -0700 Subject: chore: run linter --- packages/instant/src/util/asset.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts index 698107538..4e3b2b946 100644 --- a/packages/instant/src/util/asset.ts +++ b/packages/instant/src/util/asset.ts @@ -1,4 +1,3 @@ -import { assetDataUtils } from '@0x/order-utils'; import { AssetProxyId, ObjectMap } from '@0x/types'; import * as _ from 'lodash'; -- cgit v1.2.3 From 0de654bbd52f7d4702cec9f1a9a5a2cbb793181b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 17:40:55 +0100 Subject: fix: scroll lag on doc reference and wiki pages by using react-scroll `spy` and only updating the sidebar menu items whose active state had changed --- packages/react-shared/src/components/link.tsx | 16 ++- .../src/components/nested_sidebar_menu.tsx | 119 --------------------- packages/react-shared/src/index.ts | 1 - .../website/ts/components/nested_sidebar_menu.tsx | 92 ++++++++++++++++ .../website/ts/pages/documentation/doc_page.tsx | 2 +- .../website/ts/pages/documentation/docs_home.tsx | 3 +- packages/website/ts/pages/wiki/wiki.tsx | 2 +- 7 files changed, 111 insertions(+), 124 deletions(-) delete mode 100644 packages/react-shared/src/components/nested_sidebar_menu.tsx create mode 100644 packages/website/ts/components/nested_sidebar_menu.tsx diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 5a456109b..089e6e2ba 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -7,7 +7,7 @@ import * as validUrl from 'valid-url'; import { LinkType } from '../types'; import { constants } from '../utils/constants'; -interface LinkProps { +interface BaseLinkProps { to: string; shouldOpenInNewTab?: boolean; className?: string; @@ -18,6 +18,12 @@ interface LinkProps { fontColor?: string; } +interface ScrollLinkProps extends BaseLinkProps { + onActivityChanged?: (isActive: boolean) => void; +} + +type LinkProps = BaseLinkProps & ScrollLinkProps; + export interface LinkState {} /** @@ -103,11 +109,14 @@ export class Link extends React.Component { {this.props.children} @@ -119,6 +128,11 @@ export class Link extends React.Component { throw new Error(`Unrecognized LinkType: ${type}`); } } + private _onActivityChanged(isActive: boolean): void { + if (this.props.onActivityChanged) { + this.props.onActivityChanged(isActive); + } + } // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events. // We do however rely on these events being propagated in certain scenarios (e.g when the link // is within a dropdown we want to close upon being clicked). Because of this, we register the diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx deleted file mode 100644 index 196c91af1..000000000 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import { ObjectMap } from '@0x/types'; -import * as _ from 'lodash'; -import MenuItem from 'material-ui/MenuItem'; -import * as React from 'react'; - -import { ALink, Styles } from '../types'; -import { colors } from '../utils/colors'; -import { utils } from '../utils/utils'; - -import { Link } from './link'; - -export interface NestedSidebarMenuProps { - sectionNameToLinks: ObjectMap; - sidebarHeader?: React.ReactNode; - shouldReformatMenuItemNames?: boolean; -} - -export interface NestedSidebarMenuState { - scrolledToId?: string; -} - -const styles: Styles = { - menuItem: { - minHeight: 0, - paddingLeft: 8, - borderRadius: 6, - }, - menuItemInnerDiv: { - color: colors.grey800, - fontSize: 14, - lineHeight: 2, - padding: 0, - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - }, -}; - -export class NestedSidebarMenu extends React.Component { - public static defaultProps: Partial = { - shouldReformatMenuItemNames: true, - }; - private _urlIntervalCheckId: number | undefined = undefined; - constructor(props: NestedSidebarMenuProps) { - super(props); - this.state = {}; - } - public componentDidMount(): void { - this._urlIntervalCheckId = window.setInterval(() => { - const scrollId = location.hash.slice(1); - if (scrollId !== this.state.scrolledToId) { - this.setState({ - scrolledToId: scrollId, - }); - } - }, 200); - } - public componentWillUnmount(): void { - window.clearInterval(this._urlIntervalCheckId); - } - public render(): React.ReactNode { - const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => { - const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); - // tslint:disable-next-line:no-unused-variable - return ( -
-
- {finalSectionName.toUpperCase()} -
- {this._renderMenuItems(links)} -
- ); - }); - return ( -
- {this.props.sidebarHeader} -
{navigation}
-
- ); - } - private _renderMenuItems(links: ALink[]): React.ReactNode[] { - const scrolledToId = this.state.scrolledToId; - const menuItems = _.map(links, link => { - const finalMenuItemName = this.props.shouldReformatMenuItemNames - ? utils.convertDashesToSpaces(link.title) - : link.title; - let menuItemStyle = styles.menuItem; - let menuItemInnerDivStyle = styles.menuItemInnerDiv; - const isScrolledTo = link.to === scrolledToId; - if (isScrolledTo) { - menuItemStyle = { - ...menuItemStyle, - backgroundColor: colors.lightLinkBlue, - }; - menuItemInnerDivStyle = { - ...menuItemInnerDivStyle, - color: colors.white, - fontWeight: 'bold', - }; - } - return ( -
- - - - {finalMenuItemName} - - - -
- ); - }); - return menuItems; - } -} diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index e33b09f19..a693f2a36 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -2,7 +2,6 @@ export { AnchorTitle } from './components/anchor_title'; export { MarkdownLinkBlock } from './components/markdown_link_block'; export { MarkdownCodeBlock } from './components/markdown_code_block'; export { MarkdownSection } from './components/markdown_section'; -export { NestedSidebarMenu } from './components/nested_sidebar_menu'; export { SectionHeader } from './components/section_header'; export { Link } from './components/link'; diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx new file mode 100644 index 000000000..7de91bf8c --- /dev/null +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -0,0 +1,92 @@ +import { ALink, colors, Link, utils as sharedUtils } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; +import { Text } from 'ts/components/ui/text'; + +export interface NestedSidebarMenuProps { + sectionNameToLinks: ObjectMap; + sidebarHeader?: React.ReactNode; + shouldReformatMenuItemNames?: boolean; +} + +export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { + const navigation = _.map(props.sectionNameToLinks, (links: ALink[], sectionName: string) => { + const finalSectionName = sharedUtils.convertCamelCaseToSpaces(sectionName); + const menuItems = _.map(links, (link, i) => { + const menuItemTitle = props.shouldReformatMenuItemNames + ? _.capitalize(sharedUtils.convertDashesToSpaces(link.title)) + : link.title; + const finalLink = { + ...link, + title: menuItemTitle, + }; + return ; + }); + // tslint:disable-next-line:no-unused-variable + return ( +
+
+ {finalSectionName.toUpperCase()} +
+ {menuItems} +
+ ); + }); + return ( +
+ {props.sidebarHeader} +
{navigation}
+
+ ); +}; + +export interface MenuItemProps { + link: ALink; +} + +export interface MenuItemState { + isActive: boolean; +} + +export class MenuItem extends React.Component { + constructor(props: MenuItemProps) { + super(props); + const isActive = window.location.hash.slice(1) === props.link.to; + this.state = { + isActive, + }; + } + public render(): React.ReactNode { + const isActive = this.state.isActive; + return ( + + + + ); + } + private _onActivityChanged(isActive: boolean): void { + this.setState({ + isActive, + }); + } +} diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 7157abfc9..28bf2dba1 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -6,13 +6,13 @@ import { SupportedDocJson, TypeDocUtils, } from '@0x/react-docs'; -import { NestedSidebarMenu } from '@0x/react-shared'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import semverSort = require('semver-sort'); import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; import { Container } from 'ts/components/ui/container'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index cf229cb3b..298b7ecf3 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -1,8 +1,9 @@ -import { ALink, colors, Link, NestedSidebarMenu } from '@0x/react-shared'; +import { ALink, colors, Link } from '@0x/react-shared'; import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import * as React from 'react'; import { OverviewContent } from 'ts/components/documentation/overview_content'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; import { Button } from 'ts/components/ui/button'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index a35404e33..76df4f06f 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -5,7 +5,6 @@ import { HeaderSizes, Link, MarkdownSection, - NestedSidebarMenu, utils as sharedUtils, } from '@0x/react-shared'; import { ObjectMap } from '@0x/types'; @@ -13,6 +12,7 @@ import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; -- cgit v1.2.3 From bce90318687b38c35af75cd78bf3ee69271b42ad Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 17:44:49 +0100 Subject: chore: use `colors` module --- packages/website/ts/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index 7de91bf8c..f83833d69 100644 --- a/packages/website/ts/components/nested_sidebar_menu.tsx +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -70,7 +70,7 @@ export class MenuItem extends React.Component { borderRadius="4px" padding="0.4em 6px" width="100%" - backgroundColor={isActive ? colors.lightLinkBlue : 'rgb(245, 245, 245)'} + backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100} fontSize="14px" textAlign="left" > -- cgit v1.2.3 From 66465816ca049118d58ca34bada241fd146f2656 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 10:19:48 -0700 Subject: Getting rid of displayName, and rename usdSection -> _renderUsdSection --- packages/instant/src/components/order_details.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index a7971e1fd..704009d89 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -74,7 +74,6 @@ export class EthAmountRow extends React.Component { shouldEmphasize: false, isEthAmountInBaseUnits: true, }; - public static displayName = 'EthAmountRow'; public render(): React.ReactNode { const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props; @@ -87,7 +86,7 @@ export class EthAmountRow extends React.Component { {rowLabel} - {this._usdSection()} + {this._renderUsdSection()} {ethFormatter( ethAmount, @@ -102,7 +101,7 @@ export class EthAmountRow extends React.Component { ); } - private _usdSection(): React.ReactNode { + private _renderUsdSection(): React.ReactNode { const usdFormatter = this.props.isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; const shouldHideUsdPriceSection = _.isUndefined(this.props.ethUsdPrice) || _.isUndefined(this.props.ethAmount); return shouldHideUsdPriceSection ? null : ( -- cgit v1.2.3 From 2f4e498a099ebbd8078139f90a054941e427de15 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 10:32:37 -0700 Subject: Refactor to make placeholder logic more straightforward --- packages/instant/src/components/instant_heading.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 48cda7f88..265c3e0a5 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -20,7 +20,6 @@ export interface InstantHeadingProps { const placeholderColor = ColorOption.white; export class InstantHeading extends React.Component { public render(): React.ReactNode { - const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow(); return ( { - {placeholderAmountToAlwaysShow || this._ethAmount()} - {placeholderAmountToAlwaysShow || this._dollarAmount()} + + {this._placeholderOrAmount(this._ethAmount.bind(this))} + + {this._placeholderOrAmount(this._dollarAmount.bind(this))} ); } - private _placeholderAmountToAlwaysShow(): React.ReactNode | null { + private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { return ; } if (_.isUndefined(this.props.selectedAssetAmount)) { return ; } - return null; + return amountFunction(); } private _ethAmount(): React.ReactNode { -- cgit v1.2.3 From 6588cf919ef70f54754b1428df51e967b817788a Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 10:34:44 -0700 Subject: dont export PlainPlaceholder --- packages/instant/src/components/amount_placeholder.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx index e27d0ba81..6ef8f0ac3 100644 --- a/packages/instant/src/components/amount_placeholder.tsx +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -6,10 +6,10 @@ import { Pulse } from './animations/pulse'; import { Text } from './ui'; -export interface PlainPlaceholder { +interface PlainPlaceholder { color: ColorOption; } -export const PlainPlaceholder: React.StatelessComponent = props => ( +const PlainPlaceholder: React.StatelessComponent = props => ( — -- cgit v1.2.3 From ce4da870d79a589913d1660de8cf012b894357c6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 19:38:12 +0100 Subject: chore: use Text --- packages/website/ts/components/nested_sidebar_menu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index f83833d69..021e3f0e5 100644 --- a/packages/website/ts/components/nested_sidebar_menu.tsx +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -27,9 +27,9 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { // tslint:disable-next-line:no-unused-variable return (
-
+ {finalSectionName.toUpperCase()} -
+ {menuItems}
); -- cgit v1.2.3 From b49e5c76e485beead2554027a3ff8af101bce1d5 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 19:38:20 +0100 Subject: Use em for all --- packages/website/ts/components/nested_sidebar_menu.tsx | 2 +- packages/website/ts/pages/documentation/docs_home.tsx | 2 +- packages/website/ts/pages/wiki/wiki.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index 021e3f0e5..db7d55261 100644 --- a/packages/website/ts/components/nested_sidebar_menu.tsx +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -68,7 +68,7 @@ export class MenuItem extends React.Component { >