diff options
Diffstat (limited to 'packages/website')
44 files changed, 601 insertions, 414 deletions
diff --git a/packages/website/README.md b/packages/website/README.md index 7d3187781..042df52de 100644 --- a/packages/website/README.md +++ b/packages/website/README.md @@ -58,11 +58,11 @@ yarn lint ##### Toolkit -* [Material Design Icon Font](http://zavoloklom.github.io/material-design-iconic-font/icons.html#directional) -* [BassCSS toolkit](http://basscss.com/) -* [Material-UI component library](http://www.material-ui.com/#/) +* [Material Design Icon Font](http://zavoloklom.github.io/material-design-iconic-font/icons.html#directional) +* [BassCSS toolkit](http://basscss.com/) +* [Material-UI component library](http://www.material-ui.com/#/) ##### Recommended Atom packages: -* [atom-typescript](https://atom.io/packages/atom-typescript) -* [linter-tslint](https://atom.io/packages/linter-tslint) +* [atom-typescript](https://atom.io/packages/atom-typescript) +* [linter-tslint](https://atom.io/packages/linter-tslint) diff --git a/packages/website/md/docs/0xjs/installation.md b/packages/website/md/docs/0xjs/installation.md index 5f5c9137e..ac0a47699 100644 --- a/packages/website/md/docs/0xjs/installation.md +++ b/packages/website/md/docs/0xjs/installation.md @@ -18,7 +18,7 @@ import { ZeroEx } from '0x.js'; **Install** -Download the UMD module from our [releases page](https://github.com/0xProject/0x.js/releases) and add it to your project. +Download the UMD module from our [releases page](https://github.com/0xProject/0x-monorepo/releases) and add it to your project. **Import** diff --git a/packages/website/md/docs/0xjs/introduction.md b/packages/website/md/docs/0xjs/introduction.md index 7bad3eaa9..008376d33 100644 --- a/packages/website/md/docs/0xjs/introduction.md +++ b/packages/website/md/docs/0xjs/introduction.md @@ -1 +1 @@ -Welcome to the [0x.js](https://github.com/0xProject/0x.js) documentation! 0x.js is a Javascript library for interacting with the 0x protocol. With it, you can easily make calls to the 0x smart contracts as well as any ERC20 token. Functionality includes generating, signing, filling and cancelling orders, verifying an orders signature, setting or checking a users ERC20 token balance/allowance and much more. +Welcome to the [0x.js](https://github.com/0xProject/0x-monorepo) documentation! 0x.js is a Javascript library for interacting with the 0x protocol. With it, you can easily make calls to the 0x smart contracts as well as any ERC20 token. Functionality includes generating, signing, filling and cancelling orders, verifying an orders signature, setting or checking a users ERC20 token balance/allowance and much more. diff --git a/packages/website/md/docs/connect/installation.md b/packages/website/md/docs/connect/installation.md index 184fa6e0d..950bf92ca 100644 --- a/packages/website/md/docs/connect/installation.md +++ b/packages/website/md/docs/connect/installation.md @@ -12,4 +12,4 @@ import { HttpClient } from '@0xproject/connect'; ### Wiki -Check out our [0x Connect introduction tutorial](https://0xproject.com/wiki#Intro-Tutorial:-Connect) for information on how to integrate relayers into your application. +Check out our [0x Connect introduction tutorial](https://0xproject.com/wiki#Intro-Tutorial) for information on how to integrate relayers into your application. diff --git a/packages/website/md/docs/connect/introduction.md b/packages/website/md/docs/connect/introduction.md index 533e1481a..4e3039442 100644 --- a/packages/website/md/docs/connect/introduction.md +++ b/packages/website/md/docs/connect/introduction.md @@ -1 +1 @@ -Welcome to the [0x Connect](https://github.com/0xProject/0x.js/tree/development/packages/connect) documentation! 0x Connect is a Javascript library that makes it easy to interact with relayers that conform to the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api). Functionality includes getting supported token pairs from a relayer, getting orders filtered by different attributes, getting individual orders specified by order hash, getting orderbooks for specific token pairs, getting fee information, and submitting orders. +Welcome to the [0x Connect](https://github.com/0xProject/0x-monorepo/tree/development/packages/connect) documentation! 0x Connect is a Javascript library that makes it easy to interact with relayers that conform to the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api). Functionality includes getting supported token pairs from a relayer, getting orders filtered by different attributes, getting individual orders specified by order hash, getting orderbooks for specific token pairs, getting fee information, and submitting orders. diff --git a/packages/website/md/docs/smart_contracts/introduction.md b/packages/website/md/docs/smart_contracts/introduction.md index 20396289b..566a573b6 100644 --- a/packages/website/md/docs/smart_contracts/introduction.md +++ b/packages/website/md/docs/smart_contracts/introduction.md @@ -2,7 +2,7 @@ Welcome to the [0x smart contracts](https://github.com/0xProject/contracts) docu ### Helpful wiki articles: -* [Overview of 0x protocol architecture](https://0xproject.com/wiki#Architecture) -* [0x smart contract interactions](https://0xproject.com/wiki#Contract-Interactions) -* [Deployed smart contract addresses](https://0xproject.com/wiki#Deployed-Addresses) -* [0x protocol message format](https://0xproject.com/wiki#Message-Format) +* [Overview of 0x protocol architecture](https://0xproject.com/wiki#Architecture) +* [0x smart contract interactions](https://0xproject.com/wiki#Contract-Interactions) +* [Deployed smart contract addresses](https://0xproject.com/wiki#Deployed-Addresses) +* [0x protocol message format](https://0xproject.com/wiki#Message-Format) diff --git a/packages/website/package.json b/packages/website/package.json index 1d313390a..ca1b596f3 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,6 +1,6 @@ { "name": "@0xproject/website", - "version": "0.0.16", + "version": "0.0.17", "private": true, "description": "Website and 0x portal dapp", "scripts": { @@ -18,9 +18,9 @@ "author": "Fabio Berger", "license": "Apache-2.0", "dependencies": { - "0x.js": "^0.32.4", - "@0xproject/subproviders": "^0.5.0", - "@0xproject/utils": "^0.3.4", + "0x.js": "^0.33.0", + "@0xproject/subproviders": "^0.6.0", + "@0xproject/utils": "^0.4.0", "accounting": "^0.4.1", "basscss": "^8.0.3", "blockies": "^0.0.2", @@ -43,10 +43,10 @@ "react-document-title": "^2.0.3", "react-dom": "15.6.1", "react-ga": "^2.4.1", - "react-highlight": "^0.10.0", + "react-highlight": "0xproject/react-highlight", "react-html5video": "^2.1.0", "react-inlinesvg": "^0.5.5", - "react-markdown": "^2.5.0", + "react-markdown": "^3.2.2", "react-recaptcha": "^2.3.2", "react-redux": "^5.0.3", "react-router-dom": "^4.1.1", @@ -87,6 +87,7 @@ "copy-webpack-plugin": "^4.0.1", "copyfiles": "^1.2.0", "css-loader": "0.23.x", + "ethers-typescript-typings": "^0.0.2", "exports-loader": "0.6.x", "imports-loader": "0.6.x", "json-loader": "^0.5.4", @@ -98,7 +99,7 @@ "tslint": "5.8.0", "tslint-config-0xproject": "^0.0.2", "typescript": "2.7.1", - "web3-typescript-typings": "^0.9.11", + "web3-typescript-typings": "^0.10.0", "webpack": "^3.1.0", "webpack-dev-middleware": "^1.10.0", "webpack-dev-server": "^2.5.0" diff --git a/packages/website/public/images/doc_icons/connect.png b/packages/website/public/images/doc_icons/connect.png Binary files differindex ba9bb8a3a..244f504b3 100644 --- a/packages/website/public/images/doc_icons/connect.png +++ b/packages/website/public/images/doc_icons/connect.png diff --git a/packages/website/public/images/doc_icons/contracts.png b/packages/website/public/images/doc_icons/contracts.png Binary files differindex f5c6545ca..03956f162 100644 --- a/packages/website/public/images/doc_icons/contracts.png +++ b/packages/website/public/images/doc_icons/contracts.png diff --git a/packages/website/public/images/doc_icons/zeroExJs.png b/packages/website/public/images/doc_icons/zeroExJs.png Binary files differindex 029777ffe..fe0c49a0f 100644 --- a/packages/website/public/images/doc_icons/zeroExJs.png +++ b/packages/website/public/images/doc_icons/zeroExJs.png diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 85b4e892f..156dc44e8 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -69,14 +69,6 @@ export class Blockchain { private _cachedProviderNetworkId: number; private _ledgerSubprovider: LedgerWalletSubprovider; private _defaultGasPrice: BigNumber; - private static async _onPageLoadAsync(): Promise<void> { - if (document.readyState === 'complete') { - return; // Already loaded - } - return new Promise<void>((resolve, reject) => { - window.onload = () => resolve(); - }); - } private static _getNameGivenProvider(provider: Web3.Provider): string { if (!_.isUndefined((provider as any).isMetaMask)) { return constants.PROVIDER_NAME_METAMASK; @@ -710,7 +702,7 @@ export class Blockchain { return tokenByAddress; } private async _onPageLoadInitFireAndForgetAsync() { - await Blockchain._onPageLoadAsync(); // wait for page to load + await utils.onPageLoadAsync(); // wait for page to load // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in // order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 2723c2218..b2b2d2ebd 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -319,7 +319,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { shouldDisplaySectionHeaders={false} onMenuItemClick={this._onMenuButtonClick.bind(this)} selectedVersion={this.props.docsVersion} - docPath={this.props.docsInfo.websitePath} versions={this.props.availableDocVersions} /> </div> diff --git a/packages/website/ts/containers/about.tsx b/packages/website/ts/containers/about.ts index ce8fd3afb..ce8fd3afb 100644 --- a/packages/website/ts/containers/about.tsx +++ b/packages/website/ts/containers/about.ts diff --git a/packages/website/ts/containers/connect_documentation.tsx b/packages/website/ts/containers/connect_documentation.ts index 5c5d26b44..6a5ba1f99 100644 --- a/packages/website/ts/containers/connect_documentation.tsx +++ b/packages/website/ts/containers/connect_documentation.ts @@ -2,15 +2,14 @@ import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; -import { Documentation as DocumentationComponent, DocumentationAllProps } from 'ts/pages/documentation/documentation'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocsInfoConfig, Environments, WebsitePaths } from 'ts/types'; +import { DocPackages, DocsInfoConfig, Environments, SupportedDocJson, WebsitePaths } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -import { typeDocUtils } from 'ts/utils/typedoc_utils'; /* tslint:disable:no-var-requires */ const IntroMarkdown = require('md/docs/connect/introduction'); @@ -25,16 +24,11 @@ const connectDocSections = { types: constants.TYPES_SECTION_NAME, }; -const s3BucketName = - configs.ENVIRONMENT === Environments.DEVELOPMENT ? 'staging-connect-docs-jsons' : 'connect-docs-jsons'; -const docsJsonRoot = `https://s3.amazonaws.com/${s3BucketName}`; - const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.Connect, + type: SupportedDocJson.TypeDoc, displayName: '0x Connect', - subPackageName: 'connect', - packageUrl: 'https://github.com/0xProject/0x.js', - websitePath: WebsitePaths.Connect, - docsJsonRoot, + packageUrl: 'https://github.com/0xProject/0x-monorepo', menu: { introduction: [connectDocSections.introduction], install: [connectDocSections.installation], @@ -77,7 +71,6 @@ const docsInfoConfig: DocsInfoConfig = { menuSubsectionToVersionWhenIntroduced: {}, sections: connectDocSections, visibleConstructors: [connectDocSections.httpClient, connectDocSections.webSocketOrderbookChannel], - convertToDocAgnosticFormatFn: typeDocUtils.convertToDocAgnosticFormat.bind(typeDocUtils), }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -92,7 +85,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: DocumentationAllProps): ConnectedState => ({ +const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, @@ -103,6 +96,6 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const Documentation: React.ComponentClass<DocumentationAllProps> = connect(mapStateToProps, mapDispatchToProps)( - DocumentationComponent, +export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( + DocPageComponent, ); diff --git a/packages/website/ts/containers/faq.tsx b/packages/website/ts/containers/faq.ts index b539e33c9..b539e33c9 100644 --- a/packages/website/ts/containers/faq.tsx +++ b/packages/website/ts/containers/faq.ts diff --git a/packages/website/ts/containers/generate_order_form.tsx b/packages/website/ts/containers/generate_order_form.ts index 8c5deb690..8c5deb690 100644 --- a/packages/website/ts/containers/generate_order_form.tsx +++ b/packages/website/ts/containers/generate_order_form.ts diff --git a/packages/website/ts/containers/landing.tsx b/packages/website/ts/containers/landing.ts index a620bb12e..a620bb12e 100644 --- a/packages/website/ts/containers/landing.tsx +++ b/packages/website/ts/containers/landing.ts diff --git a/packages/website/ts/containers/not_found.tsx b/packages/website/ts/containers/not_found.ts index dd151e2c8..dd151e2c8 100644 --- a/packages/website/ts/containers/not_found.tsx +++ b/packages/website/ts/containers/not_found.ts diff --git a/packages/website/ts/containers/portal.tsx b/packages/website/ts/containers/portal.ts index befa16bdb..befa16bdb 100644 --- a/packages/website/ts/containers/portal.tsx +++ b/packages/website/ts/containers/portal.ts diff --git a/packages/website/ts/containers/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts new file mode 100644 index 000000000..a839529aa --- /dev/null +++ b/packages/website/ts/containers/smart_contracts_documentation.ts @@ -0,0 +1,98 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { + DocPackages, + DocsInfoConfig, + Networks, + SmartContractDocSections as Sections, + SupportedDocJson, + WebsitePaths, +} from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown = require('md/docs/smart_contracts/introduction'); +/* tslint:enable:no-var-requires */ + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.SmartContracts, + type: SupportedDocJson.Doxity, + displayName: '0x Smart Contracts', + packageUrl: 'https://github.com/0xProject/contracts', + menu: { + introduction: [Sections.Introduction], + contracts: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy], + }, + sectionNameToMarkdown: { + [Sections.Introduction]: IntroMarkdown, + }, + sections: { + Introduction: Sections.Introduction, + Exchange: Sections.Exchange, + TokenTransferProxy: Sections.TokenTransferProxy, + TokenRegistry: Sections.TokenRegistry, + ZRXToken: Sections.ZRXToken, + }, + visibleConstructors: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy], + contractsByVersionByNetworkId: { + '1.0.0': { + [Networks.Mainnet]: { + [Sections.Exchange]: '0x12459c951127e0c374ff9105dda097662a027093', + [Sections.TokenTransferProxy]: '0x8da0d80f5007ef1e431dd2127178d224e32c2ef4', + [Sections.ZRXToken]: '0xe41d2489571d322189246dafa5ebde1f4699f498', + [Sections.TokenRegistry]: '0x926a74c5c36adf004c87399e65f75628b0f98d2c', + }, + [Networks.Ropsten]: { + [Sections.Exchange]: '0x479cc461fecd078f766ecc58533d6f69580cf3ac', + [Sections.TokenTransferProxy]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', + [Sections.ZRXToken]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', + [Sections.TokenRegistry]: '0x6b1a50f0bb5a7995444bd3877b22dc89c62843ed', + }, + [Networks.Kovan]: { + [Sections.Exchange]: '0x90fe2af704b34e0224bf2299c838e04d4dcf1364', + [Sections.TokenTransferProxy]: '0x087Eed4Bc1ee3DE49BeFbd66C662B434B15d49d4', + [Sections.ZRXToken]: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570', + [Sections.TokenRegistry]: '0xf18e504561f4347bea557f3d4558f559dddbae7f', + }, + [Networks.Rinkeby]: { + [Sections.Exchange]: '0x1d16ef40fac01cec8adac2ac49427b9384192c05', + [Sections.TokenTransferProxy]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', + [Sections.ZRXToken]: '0x00f58d6d585f84b2d7267940cede30ce2fe6eae8', + [Sections.TokenRegistry]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', + }, + }, + }, +}; +const docsInfo = new DocsInfo(docsInfoConfig); + +interface ConnectedState { + docsVersion: string; + availableDocVersions: string[]; + translate: Translate; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; + docsInfo: DocsInfo; +} + +const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + translate: state.translate, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), + docsInfo, +}); + +export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( + DocPageComponent, +); diff --git a/packages/website/ts/containers/smart_contracts_documentation.tsx b/packages/website/ts/containers/smart_contracts_documentation.tsx deleted file mode 100644 index c4731f929..000000000 --- a/packages/website/ts/containers/smart_contracts_documentation.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; -import { DocsInfo } from 'ts/pages/documentation/docs_info'; -import { Documentation as DocumentationComponent, DocumentationAllProps } from 'ts/pages/documentation/documentation'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocsInfoConfig, SmartContractDocSections as Sections, WebsitePaths } from 'ts/types'; -import { doxityUtils } from 'ts/utils/doxity_utils'; -import { Translate } from 'ts/utils/translate'; - -/* tslint:disable:no-var-requires */ -const IntroMarkdown = require('md/docs/smart_contracts/introduction'); -/* tslint:enable:no-var-requires */ - -const docsInfoConfig: DocsInfoConfig = { - displayName: '0x Smart Contracts', - packageUrl: 'https://github.com/0xProject/contracts', - websitePath: WebsitePaths.SmartContracts, - docsJsonRoot: 'https://s3.amazonaws.com/smart-contracts-docs-json', - menu: { - introduction: [Sections.Introduction], - contracts: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy], - }, - sectionNameToMarkdown: { - [Sections.Introduction]: IntroMarkdown, - }, - sections: { - Introduction: Sections.Introduction, - Exchange: Sections.Exchange, - TokenTransferProxy: Sections.TokenTransferProxy, - TokenRegistry: Sections.TokenRegistry, - ZRXToken: Sections.ZRXToken, - }, - visibleConstructors: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy], - convertToDocAgnosticFormatFn: doxityUtils.convertToDocAgnosticFormat.bind(doxityUtils), -}; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - translate: Translate; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; - docsInfo: DocsInfo; -} - -const mapStateToProps = (state: State, ownProps: DocumentationAllProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), - docsInfo, -}); - -export const Documentation: React.ComponentClass<DocumentationAllProps> = connect(mapStateToProps, mapDispatchToProps)( - DocumentationComponent, -); diff --git a/packages/website/ts/containers/wiki.tsx b/packages/website/ts/containers/wiki.ts index 2cb87d0a1..2cb87d0a1 100644 --- a/packages/website/ts/containers/wiki.tsx +++ b/packages/website/ts/containers/wiki.ts diff --git a/packages/website/ts/containers/zero_ex_js_documentation.tsx b/packages/website/ts/containers/zero_ex_js_documentation.ts index a32a87f7f..d0d697e70 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.tsx +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -2,15 +2,14 @@ import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; -import { Documentation as DocumentationComponent, DocumentationAllProps } from 'ts/pages/documentation/documentation'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocsInfoConfig, Environments, WebsitePaths } from 'ts/types'; +import { DocPackages, DocsInfoConfig, Environments, SupportedDocJson, WebsitePaths } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -import { typeDocUtils } from 'ts/utils/typedoc_utils'; /* tslint:disable:no-var-requires */ const IntroMarkdown = require('md/docs/0xjs/introduction'); @@ -37,15 +36,11 @@ const zeroExJsDocSections = { types: constants.TYPES_SECTION_NAME, }; -const s3BucketName = configs.ENVIRONMENT === Environments.DEVELOPMENT ? 'staging-0xjs-docs-jsons' : '0xjs-docs-jsons'; -const docsJsonRoot = `https://s3.amazonaws.com/${s3BucketName}`; - const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.ZeroExJs, + type: SupportedDocJson.TypeDoc, displayName: '0x.js', - packageUrl: 'https://github.com/0xProject/0x.js', - subPackageName: '0x.js', - websitePath: WebsitePaths.ZeroExJs, - docsJsonRoot, + packageUrl: 'https://github.com/0xProject/0x-monorepo', menu: { introduction: [zeroExJsDocSections.introduction], install: [zeroExJsDocSections.installation], @@ -69,7 +64,8 @@ const docsInfoConfig: DocsInfoConfig = { [zeroExJsDocSections.versioning]: versioningMarkdown, }, // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( + // currently no way to extract the re-exported types from index.ts via TypeDoc :( Make sure to only + // ADD types here, DO NOT REMOVE types since they might still be needed for older supported versions publicTypes: [ 'Order', 'SignedOrder', @@ -106,6 +102,7 @@ const docsInfoConfig: DocsInfoConfig = { 'ApprovalContractEventArgs', 'TokenContractEventArgs', 'ZeroExConfig', + 'TransactionReceipt', 'TransactionReceiptWithDecodedLogs', 'LogWithDecodedArgs', 'EtherTokenEvents', @@ -128,17 +125,33 @@ const docsInfoConfig: DocsInfoConfig = { 'FilterObject', ], sectionNameToModulePath: { - [zeroExJsDocSections.zeroEx]: ['"src/0x"'], - [zeroExJsDocSections.exchange]: ['"src/contract_wrappers/exchange_wrapper"'], - [zeroExJsDocSections.tokenRegistry]: ['"src/contract_wrappers/token_registry_wrapper"'], - [zeroExJsDocSections.token]: ['"src/contract_wrappers/token_wrapper"'], - [zeroExJsDocSections.etherToken]: ['"src/contract_wrappers/ether_token_wrapper"'], + [zeroExJsDocSections.zeroEx]: ['"0x.js/src/0x"', '"src/0x"'], + [zeroExJsDocSections.exchange]: [ + '"0x.js/src/contract_wrappers/exchange_wrapper"', + '"src/contract_wrappers/exchange_wrapper"', + ], + [zeroExJsDocSections.tokenRegistry]: [ + '"0x.js/src/contract_wrappers/token_registry_wrapper"', + '"src/contract_wrappers/token_registry_wrapper"', + ], + [zeroExJsDocSections.token]: [ + '"0x.js/src/contract_wrappers/token_wrapper"', + '"src/contract_wrappers/token_wrapper"', + ], + [zeroExJsDocSections.etherToken]: [ + '"0x.js/src/contract_wrappers/ether_token_wrapper"', + '"src/contract_wrappers/ether_token_wrapper"', + ], [zeroExJsDocSections.proxy]: [ - '"src/contract_wrappers/proxy_wrapper"', + '"0x.js/src/contract_wrappers/proxy_wrapper"', + '"0x.js/src/contract_wrappers/token_transfer_proxy_wrapper"', '"src/contract_wrappers/token_transfer_proxy_wrapper"', ], - [zeroExJsDocSections.orderWatcher]: ['"src/order_watcher/order_state_watcher"'], - [zeroExJsDocSections.types]: ['"src/types"'], + [zeroExJsDocSections.orderWatcher]: [ + '"0x.js/src/order_watcher/order_state_watcher"', + '"src/order_watcher/order_state_watcher"', + ], + [zeroExJsDocSections.types]: ['"0x.js/src/types"', '"src/types"', '"types/src/index"'], }, menuSubsectionToVersionWhenIntroduced: { [zeroExJsDocSections.etherToken]: '0.7.1', @@ -147,7 +160,6 @@ const docsInfoConfig: DocsInfoConfig = { }, sections: zeroExJsDocSections, visibleConstructors: [zeroExJsDocSections.zeroEx], - convertToDocAgnosticFormatFn: typeDocUtils.convertToDocAgnosticFormat.bind(typeDocUtils), }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -162,7 +174,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: DocumentationAllProps): ConnectedState => ({ +const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({ docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, docsInfo, @@ -173,6 +185,6 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const Documentation: React.ComponentClass<DocumentationAllProps> = connect(mapStateToProps, mapDispatchToProps)( - DocumentationComponent, +export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( + DocPageComponent, ); diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx index 23cfd96bd..5f177e97e 100644 --- a/packages/website/ts/pages/documentation/comment.tsx +++ b/packages/website/ts/pages/documentation/comment.tsx @@ -15,7 +15,7 @@ const defaultProps = { export const Comment: React.SFC<CommentProps> = (props: CommentProps) => { return ( <div className={`${props.className} comment`}> - <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} /> + <ReactMarkdown source={props.comment} renderers={{ code: MarkdownCodeBlock }} /> </div> ); }; diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx new file mode 100644 index 000000000..098df5bfd --- /dev/null +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -0,0 +1,143 @@ +import findVersions = require('find-versions'); +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle = require('react-document-title'); +import semverSort = require('semver-sort'); +import { TopBar } from 'ts/components/top_bar/top_bar'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { Documentation } from 'ts/pages/documentation/documentation'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { DocAgnosticFormat, DocPackages, DoxityDocObj, Environments, MenuSubsectionsBySection } from 'ts/types'; +import { configs } from 'ts/utils/configs'; +import { constants } from 'ts/utils/constants'; +import { docUtils } from 'ts/utils/doc_utils'; +import { Translate } from 'ts/utils/translate'; + +const ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH = '0.32.4'; + +const isDevelopment = configs.ENVIRONMENT === Environments.DEVELOPMENT; +const docIdToS3BucketName: { [id: string]: string } = { + [DocPackages.ZeroExJs]: isDevelopment ? 'staging-0xjs-docs-jsons' : '0xjs-docs-jsons', + [DocPackages.SmartContracts]: 'smart-contracts-docs-json', + [DocPackages.Connect]: isDevelopment ? 'staging-connect-docs-jsons' : 'connect-docs-jsons', +}; + +const docIdToSubpackageName: { [id: string]: string } = { + [DocPackages.ZeroExJs]: '0x.js', + [DocPackages.Connect]: 'connect', + [DocPackages.SmartContracts]: 'contracts', +}; + +export interface DocPageProps { + location: Location; + dispatcher: Dispatcher; + docsVersion: string; + availableDocVersions: string[]; + docsInfo: DocsInfo; + translate: Translate; +} + +interface DocPageState { + docAgnosticFormat?: DocAgnosticFormat; +} + +export class DocPage extends React.Component<DocPageProps, DocPageState> { + private _isUnmounted: boolean; + constructor(props: DocPageProps) { + super(props); + this._isUnmounted = false; + this.state = { + docAgnosticFormat: undefined, + }; + } + public componentWillMount() { + const pathName = this.props.location.pathname; + const lastSegment = pathName.substr(pathName.lastIndexOf('/') + 1); + const versions = findVersions(lastSegment); + const preferredVersionIfExists = versions.length > 0 ? versions[0] : undefined; + // tslint:disable-next-line:no-floating-promises + this._fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists); + } + public componentWillUnmount() { + this._isUnmounted = true; + } + + public render() { + const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) + ? {} + : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); + const sourceUrl = this._getSourceUrl(); + return ( + <div> + <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} /> + <TopBar + blockchainIsLoaded={false} + location={this.props.location} + docsVersion={this.props.docsVersion} + availableDocVersions={this.props.availableDocVersions} + menu={this.props.docsInfo.getMenu(this.props.docsVersion)} + menuSubsectionsBySection={menuSubsectionsBySection} + docsInfo={this.props.docsInfo} + translate={this.props.translate} + /> + <Documentation + location={this.props.location} + docsVersion={this.props.docsVersion} + availableDocVersions={this.props.availableDocVersions} + docsInfo={this.props.docsInfo} + docAgnosticFormat={this.state.docAgnosticFormat} + menuSubsectionsBySection={menuSubsectionsBySection} + sourceUrl={sourceUrl} + /> + </div> + ); + } + private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> { + const s3BucketName = docIdToS3BucketName[this.props.docsInfo.id]; + const docsJsonRoot = `${constants.S3_BUCKET_ROOT}/${s3BucketName}`; + const versionToFileName = await docUtils.getVersionToFileNameAsync(docsJsonRoot); + const versions = _.keys(versionToFileName); + this.props.dispatcher.updateAvailableDocVersions(versions); + const sortedVersions = semverSort.desc(versions); + const latestVersion = sortedVersions[0]; + + let versionToFetch = latestVersion; + if (!_.isUndefined(preferredVersionIfExists)) { + const preferredVersionFileNameIfExists = versionToFileName[preferredVersionIfExists]; + if (!_.isUndefined(preferredVersionFileNameIfExists)) { + versionToFetch = preferredVersionIfExists; + } + } + this.props.dispatcher.updateCurrentDocsVersion(versionToFetch); + + const versionFileNameToFetch = versionToFileName[versionToFetch]; + const versionDocObj = await docUtils.getJSONDocFileAsync(versionFileNameToFetch, docsJsonRoot); + const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj); + + if (!this._isUnmounted) { + this.setState({ + docAgnosticFormat, + }); + } + } + private _getSourceUrl() { + const url = this.props.docsInfo.packageUrl; + let pkg = docIdToSubpackageName[this.props.docsInfo.id]; + let tagPrefix = pkg; + const packagesWithNamespace = ['connect']; + if (_.includes(packagesWithNamespace, pkg)) { + tagPrefix = `@0xproject/${pkg}`; + } + // HACK: The following three lines exist for backward compatibility reasons + // Before exporting types from other packages as part of the 0x.js interface, + // all TypeDoc generated paths omitted the topLevel `0x.js` segment. Now it + // adds it, and for that reason, we need to make sure we don't add it twice in + // the source links we generate. + const semvers = semverSort.desc([this.props.docsVersion, ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH]); + const isVersionAfterTopLevelPathChange = semvers[0] !== ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH; + pkg = this.props.docsInfo.id === DocPackages.ZeroExJs && isVersionAfterTopLevelPathChange ? '' : `/${pkg}`; + + const sourceUrl = `${url}/blob/${tagPrefix}%40${this.props.docsVersion}/packages${pkg}`; + return sourceUrl; + } +} diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts index 4b1ec122a..31e151fe8 100644 --- a/packages/website/ts/pages/documentation/docs_info.ts +++ b/packages/website/ts/pages/documentation/docs_info.ts @@ -1,33 +1,37 @@ import compareVersions = require('compare-versions'); import * as _ from 'lodash'; import { + ContractsByVersionByNetworkId, DocAgnosticFormat, DocsInfoConfig, DocsMenu, DoxityDocObj, MenuSubsectionsBySection, SectionsMap, + SupportedDocJson, TypeDocNode, } from 'ts/types'; +import { doxityUtils } from 'ts/utils/doxity_utils'; +import { typeDocUtils } from 'ts/utils/typedoc_utils'; export class DocsInfo { + public id: string; + public type: SupportedDocJson; public displayName: string; public packageUrl: string; - public subPackageName?: string; - public websitePath: string; - public docsJsonRoot: string; public menu: DocsMenu; public sections: SectionsMap; public sectionNameToMarkdown: { [sectionName: string]: string }; + public contractsByVersionByNetworkId?: ContractsByVersionByNetworkId; private _docsInfo: DocsInfoConfig; constructor(config: DocsInfoConfig) { + this.id = config.id; + this.type = config.type; this.displayName = config.displayName; this.packageUrl = config.packageUrl; - this.subPackageName = config.subPackageName; - this.websitePath = config.websitePath; - this.docsJsonRoot = config.docsJsonRoot; this.sections = config.sections; this.sectionNameToMarkdown = config.sectionNameToMarkdown; + this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId; this._docsInfo = config; } public isPublicType(typeName: string): boolean { @@ -106,6 +110,10 @@ export class DocsInfo { return _.includes(this._docsInfo.visibleConstructors, sectionName); } public convertToDocAgnosticFormat(docObj: DoxityDocObj | TypeDocNode): DocAgnosticFormat { - return this._docsInfo.convertToDocAgnosticFormatFn(docObj, this); + if (this.type === SupportedDocJson.Doxity) { + return doxityUtils.convertToDocAgnosticFormat(docObj as DoxityDocObj); + } else { + return typeDocUtils.convertToDocAgnosticFormat(docObj as TypeDocNode, this); + } } } diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 285471166..699bef7a8 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -1,11 +1,7 @@ -import findVersions = require('find-versions'); import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; -import DocumentTitle = require('react-document-title'); import { scroller } from 'react-scroll'; -import semverSort = require('semver-sort'); -import { TopBar } from 'ts/components/top_bar/top_bar'; import { Badge } from 'ts/components/ui/badge'; import { Comment } from 'ts/pages/documentation/comment'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; @@ -17,29 +13,27 @@ import { TypeDefinition } from 'ts/pages/documentation/type_definition'; import { MarkdownSection } from 'ts/pages/shared/markdown_section'; import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu'; import { SectionHeader } from 'ts/pages/shared/section_header'; -import { Dispatcher } from 'ts/redux/dispatcher'; import { AddressByContractName, DocAgnosticFormat, DoxityDocObj, EtherscanLinkSuffixes, Event, + MenuSubsectionsBySection, Networks, Property, SolidityMethod, Styles, + SupportedDocJson, TypeDefinitionByName, TypescriptMethod, } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; -import { docUtils } from 'ts/utils/doc_utils'; -import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; const TOP_BAR_HEIGHT = 60; -const SCROLL_TOP_ID = 'docsScrollTop'; const networkNameToColor: { [network: string]: string } = { [Networks.Kovan]: colors.purple, @@ -48,20 +42,18 @@ const networkNameToColor: { [network: string]: string } = { [Networks.Rinkeby]: colors.darkYellow, }; -export interface DocumentationAllProps { - source: string; +export interface DocumentationProps { location: Location; - dispatcher: Dispatcher; docsVersion: string; availableDocVersions: string[]; docsInfo: DocsInfo; - translate: Translate; -} - -interface DocumentationState { docAgnosticFormat?: DocAgnosticFormat; + menuSubsectionsBySection: MenuSubsectionsBySection; + sourceUrl: string; } +interface DocumentationState {} + const styles: Styles = { mainContainers: { position: 'absolute', @@ -81,57 +73,18 @@ const styles: Styles = { }, }; -export class Documentation extends React.Component<DocumentationAllProps, DocumentationState> { - private _isUnmounted: boolean; - constructor(props: DocumentationAllProps) { - super(props); - this._isUnmounted = false; - this.state = { - docAgnosticFormat: undefined, - }; - } - public componentWillMount() { - const pathName = this.props.location.pathname; - const lastSegment = pathName.substr(pathName.lastIndexOf('/') + 1); - const versions = findVersions(lastSegment); - const preferredVersionIfExists = versions.length > 0 ? versions[0] : undefined; - // tslint:disable-next-line:no-floating-promises - this._fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists); - } - public componentWillUnmount() { - this._isUnmounted = true; +export class Documentation extends React.Component<DocumentationProps, DocumentationState> { + public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) { + if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) { + const hash = this.props.location.hash.slice(1); + utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID); + } } public render() { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) - ? {} - : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); return ( <div> - <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - docsVersion={this.props.docsVersion} - availableDocVersions={this.props.availableDocVersions} - menu={this.props.docsInfo.getMenu(this.props.docsVersion)} - menuSubsectionsBySection={menuSubsectionsBySection} - docsInfo={this.props.docsInfo} - translate={this.props.translate} - /> - {_.isUndefined(this.state.docAgnosticFormat) ? ( - <div className="col col-12" style={styles.mainContainers}> - <div - className="relative sm-px2 sm-pt2 sm-m1" - style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} - > - <div className="center pb2"> - <CircularProgress size={40} thickness={5} /> - </div> - <div className="center pt2" style={{ paddingBottom: 11 }}> - Loading documentation... - </div> - </div> - </div> + {_.isUndefined(this.props.docAgnosticFormat) ? ( + this._renderLoading() ) : ( <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}> <div @@ -155,8 +108,7 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume versions={this.props.availableDocVersions} title={this.props.docsInfo.displayName} topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)} - menuSubsectionsBySection={menuSubsectionsBySection} - docPath={this.props.docsInfo.websitePath} + menuSubsectionsBySection={this.props.menuSubsectionsBySection} /> </div> </div> @@ -164,8 +116,12 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume className="relative col lg-col-9 md-col-9 sm-col-12 col-12" style={{ backgroundColor: colors.white }} > - <div id="documentation" style={styles.mainContainers} className="absolute px1"> - <div id={SCROLL_TOP_ID} /> + <div + id={configs.SCROLL_CONTAINER_ID} + style={styles.mainContainers} + className="absolute px1" + > + <div id={configs.SCROLL_TOP_ID} /> {this._renderDocumentation()} </div> </div> @@ -175,11 +131,28 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume </div> ); } + private _renderLoading() { + return ( + <div className="col col-12" style={styles.mainContainers}> + <div + className="relative sm-px2 sm-pt2 sm-m1" + style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} + > + <div className="center pb2"> + <CircularProgress size={40} thickness={5} /> + </div> + <div className="center pt2" style={{ paddingBottom: 11 }}> + Loading documentation... + </div> + </div> + </div> + ); + } private _renderDocumentation(): React.ReactNode { const subMenus = _.values(this.props.docsInfo.getMenu()); const orderedSectionNames = _.flatten(subMenus); - const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.state.docAgnosticFormat); + const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat); const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName)); return renderedSections; @@ -196,7 +169,7 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume ); } - const docSection = this.state.docAgnosticFormat[sectionName]; + const docSection = this.props.docAgnosticFormat[sectionName]; if (_.isUndefined(docSection)) { return null; } @@ -278,7 +251,13 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume ); } private _renderNetworkBadgesIfExists(sectionName: string) { - const networkToAddressByContractName = configs.CONTRACT_ADDRESS[this.props.docsVersion]; + if (this.props.docsInfo.type !== SupportedDocJson.Doxity) { + return null; + } + + const networkToAddressByContractName = this.props.docsInfo.contractsByVersionByNetworkId[ + this.props.docsVersion + ]; const badges = _.map( networkToAddressByContractName, (addressByContractName: AddressByContractName, networkName: string) => { @@ -326,8 +305,7 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume <SourceLink version={this.props.docsVersion} source={property.source} - baseUrl={this.props.docsInfo.packageUrl} - subPackageName={this.props.docsInfo.subPackageName} + sourceUrl={this.props.sourceUrl} /> )} {property.comment && <Comment comment={property.comment} className="py2" />} @@ -348,54 +326,8 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume typeDefinitionByName={typeDefinitionByName} libraryVersion={this.props.docsVersion} docsInfo={this.props.docsInfo} + sourceUrl={this.props.sourceUrl} /> ); } - private _scrollToHash(): void { - const hashWithPrefix = this.props.location.hash; - let hash = hashWithPrefix.slice(1); - if (_.isEmpty(hash)) { - hash = SCROLL_TOP_ID; // scroll to the top - } - - scroller.scrollTo(hash, { - duration: 0, - offset: 0, - containerId: 'documentation', - }); - } - private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> { - const versionToFileName = await docUtils.getVersionToFileNameAsync(this.props.docsInfo.docsJsonRoot); - const versions = _.keys(versionToFileName); - this.props.dispatcher.updateAvailableDocVersions(versions); - const sortedVersions = semverSort.desc(versions); - const latestVersion = sortedVersions[0]; - - let versionToFetch = latestVersion; - if (!_.isUndefined(preferredVersionIfExists)) { - const preferredVersionFileNameIfExists = versionToFileName[preferredVersionIfExists]; - if (!_.isUndefined(preferredVersionFileNameIfExists)) { - versionToFetch = preferredVersionIfExists; - } - } - this.props.dispatcher.updateCurrentDocsVersion(versionToFetch); - - const versionFileNameToFetch = versionToFileName[versionToFetch]; - const versionDocObj = await docUtils.getJSONDocFileAsync( - versionFileNameToFetch, - this.props.docsInfo.docsJsonRoot, - ); - const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj); - - if (!this._isUnmounted) { - this.setState( - { - docAgnosticFormat, - }, - () => { - this._scrollToHash(); - }, - ); - } - } } diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx index 0e53e38e7..e62c9ecbd 100644 --- a/packages/website/ts/pages/documentation/event_definition.tsx +++ b/packages/website/ts/pages/documentation/event_definition.tsx @@ -25,9 +25,10 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event } public render() { const event = this.props.event; + const id = `${this.props.sectionName}-${event.name}`; return ( <div - id={`${this.props.sectionName}-${event.name}`} + id={id} className="pb2" style={{ overflow: 'hidden', width: '100%' }} onMouseOver={this._setAnchorVisibility.bind(this, true)} @@ -36,7 +37,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event <AnchorTitle headerSize={HeaderSizes.H3} title={`Event ${event.name}`} - id={event.name} + id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> <div style={{ fontSize: 16 }}> diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index 1bc6aa4f4..d2c96bf8c 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -15,6 +15,7 @@ interface MethodBlockProps { libraryVersion: string; typeDefinitionByName: TypeDefinitionByName; docsInfo: DocsInfo; + sourceUrl: string; } interface MethodBlockState { @@ -80,8 +81,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt <SourceLink version={this.props.libraryVersion} source={(method as TypescriptMethod).source} - baseUrl={this.props.docsInfo.packageUrl} - subPackageName={this.props.docsInfo.subPackageName} + sourceUrl={this.props.sourceUrl} /> )} {method.comment && <Comment comment={method.comment} className="py2" />} diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx index 6588ee39e..31f80aba3 100644 --- a/packages/website/ts/pages/documentation/source_link.tsx +++ b/packages/website/ts/pages/documentation/source_link.tsx @@ -5,22 +5,13 @@ import { colors } from 'ts/utils/colors'; interface SourceLinkProps { source: Source; - baseUrl: string; + sourceUrl: string; version: string; - subPackageName: string; } -const packagesWithNamespace = ['connect']; - export function SourceLink(props: SourceLinkProps) { const src = props.source; - const url = props.baseUrl; - const pkg = props.subPackageName; - let tagPrefix = pkg; - if (_.includes(packagesWithNamespace, pkg)) { - tagPrefix = `@0xproject/${pkg}`; - } - const sourceCodeUrl = `${url}/blob/${tagPrefix}%40${props.version}/packages/${pkg}/${src.fileName}#L${src.line}`; + const sourceCodeUrl = `${props.sourceUrl}/${src.fileName}#L${src.line}`; return ( <div className="pt2" style={{ fontSize: 14 }}> <a href={sourceCodeUrl} target="_blank" className="underline" style={{ color: colors.grey }}> diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx index d46eec76c..02bf63258 100644 --- a/packages/website/ts/pages/documentation/type_definition.tsx +++ b/packages/website/ts/pages/documentation/type_definition.tsx @@ -113,7 +113,9 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef <code className="hljs">{codeSnippet}</code> </pre> </div> - {customType.comment && <Comment comment={customType.comment} className="py2" />} + <div style={{ maxWidth: 620 }}> + {customType.comment && <Comment comment={customType.comment} className="py2" />} + </div> </div> ); } diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx index 98ca3aee6..6dfb74554 100644 --- a/packages/website/ts/pages/shared/markdown_code_block.tsx +++ b/packages/website/ts/pages/shared/markdown_code_block.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import * as HighLight from 'react-highlight'; interface MarkdownCodeBlockProps { - literal: string; + value: string; language: string; } @@ -13,12 +13,12 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed. public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) { - return nextProps.literal !== this.props.literal || nextProps.language !== this.props.language; + return nextProps.value !== this.props.value || nextProps.language !== this.props.language; } public render() { return ( <span style={{ fontSize: 14 }}> - <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight> + <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight> </span> ); } diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx new file mode 100644 index 000000000..e4553c87f --- /dev/null +++ b/packages/website/ts/pages/shared/markdown_link_block.tsx @@ -0,0 +1,46 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { configs } from 'ts/utils/configs'; +import { utils } from 'ts/utils/utils'; + +interface MarkdownLinkBlockProps { + href: string; +} + +interface MarkdownLinkBlockState {} + +export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> { + // Re-rendering a linkBlock causes it to remain unclickable. + // We therefore noop re-renders on this component if it's props haven't changed. + public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) { + return nextProps.href !== this.props.href; + } + public render() { + const href = this.props.href; + const isLinkToSection = _.startsWith(href, '#'); + // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons + if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) { + return ( + <a href={href} target="_blank" rel="nofollow noreferrer noopener"> + {this.props.children} + </a> + ); + } else if (isLinkToSection) { + return ( + <a + style={{ cursor: 'pointer', textDecoration: 'underline' }} + onClick={this._onHashUrlClick.bind(this, href)} + > + {this.props.children} + </a> + ); + } else { + return <a href={href}>{this.props.children}</a>; + } + } + private _onHashUrlClick(href: string) { + const hash = href.split('#')[1]; + utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID); + utils.setUrlHash(hash); + } +} diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx index 4d7d8b4ca..7253072d9 100644 --- a/packages/website/ts/pages/shared/markdown_section.tsx +++ b/packages/website/ts/pages/shared/markdown_section.tsx @@ -5,6 +5,7 @@ import * as ReactMarkdown from 'react-markdown'; import { Element as ScrollElement } from 'react-scroll'; import { AnchorTitle } from 'ts/pages/shared/anchor_title'; import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; +import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block'; import { HeaderSizes } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; @@ -64,7 +65,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd </div> </div> <hr style={{ border: `1px solid ${colors.lightestGrey}` }} /> - <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} /> + <ReactMarkdown + source={this.props.markdownContent} + escapeHtml={false} + renderers={{ + code: MarkdownCodeBlock, + link: MarkdownLinkBlock, + }} + /> </ScrollElement> </div> ); diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index ba794ee9f..82a40eb7e 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -16,7 +16,6 @@ interface NestedSidebarMenuProps { onMenuItemClick?: () => void; selectedVersion?: string; versions?: string[]; - docPath?: string; } interface NestedSidebarMenuState {} @@ -69,13 +68,8 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N <div> {this._renderEmblem()} {!_.isUndefined(this.props.versions) && - !_.isUndefined(this.props.selectedVersion) && - !_.isUndefined(this.props.docPath) && ( - <VersionDropDown - selectedVersion={this.props.selectedVersion} - versions={this.props.versions} - docPath={this.props.docPath} - /> + !_.isUndefined(this.props.selectedVersion) && ( + <VersionDropDown selectedVersion={this.props.selectedVersion} versions={this.props.versions} /> )} <div className="pl1">{navigation}</div> </div> @@ -92,14 +86,14 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N docs </div> </div> - <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 14, height: 17 }}> + <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}> | </div> <div className="flex"> <div> - <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="24" /> + <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" /> </div> - <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}> + <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}> {this.props.title} </div> </div> diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx index a5f5f52cf..52a1f30d9 100644 --- a/packages/website/ts/pages/shared/section_header.tsx +++ b/packages/website/ts/pages/shared/section_header.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Element as ScrollElement } from 'react-scroll'; import { AnchorTitle } from 'ts/pages/shared/anchor_title'; import { HeaderSizes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; interface SectionHeaderProps { @@ -34,7 +35,19 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe <ScrollElement name={id}> <AnchorTitle headerSize={this.props.headerSize} - title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>} + title={ + <span + style={{ + textTransform: 'uppercase', + color: colors.grey, + fontFamily: 'Roboto Mono', + fontWeight: 300, + fontSize: 27, + }} + > + {sectionName} + </span> + } id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx index b922e1048..1b4dbb375 100644 --- a/packages/website/ts/pages/shared/version_drop_down.tsx +++ b/packages/website/ts/pages/shared/version_drop_down.tsx @@ -2,11 +2,11 @@ import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; +import { utils } from 'ts/utils/utils'; interface VersionDropDownProps { selectedVersion: string; versions: string[]; - docPath: string; } interface VersionDropDownState {} @@ -31,7 +31,15 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi }); return items; } - private _updateSelectedVersion(e: any, index: number, value: string) { - window.location.href = `${this.props.docPath}/${value}${window.location.hash}`; + private _updateSelectedVersion(e: any, index: number, semver: string) { + let path = window.location.pathname; + const lastChar = path[path.length - 1]; + if (_.isFinite(_.parseInt(lastChar))) { + const pathSections = path.split('/'); + pathSections.pop(); + path = pathSections.join('/'); + } + const baseUrl = utils.getCurrentBaseUrl(); + window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`; } } diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 56c3be0fe..4bb6052a2 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -135,11 +135,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> { }} > <div - id="documentation" + id={configs.SCROLL_CONTAINER_ID} style={{ ...mainContainersStyle, overflow: 'auto' }} className="absolute" > - <div id="0xProtocolWiki" /> + <div id={configs.SCROLL_TOP_ID} /> <div id="wiki" style={{ paddingRight: 2 }}> {this._renderWikiArticles()} </div> @@ -188,19 +188,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> { </div> ); } - private _scrollToHash(): void { - const hashWithPrefix = this.props.location.hash; - let hash = hashWithPrefix.slice(1); - if (_.isEmpty(hash)) { - hash = '0xProtocolWiki'; // scroll to the top - } - - scroller.scrollTo(hash, { - duration: 0, - offset: 0, - containerId: 'documentation', - }); - } private async _fetchArticlesBySectionAsync(): Promise<void> { const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`; const response = await fetch(endpoint); @@ -224,8 +211,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> { { articlesBySection, }, - () => { - this._scrollToHash(); + async () => { + await utils.onPageLoadAsync(); + const hash = this.props.location.hash.slice(1); + utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID); }, ); } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index f6413eec5..28663270e 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -308,7 +308,7 @@ export interface TypeDocNode { returns?: string; declaration: TypeDocNode; flags?: TypeDocFlags; - indexSignature?: TypeDocNode[]; + indexSignature?: TypeDocNode | TypeDocNode[]; // TypeDocNode in TypeDoc <V0.9.0, TypeDocNode[] in >V0.9.0 signatures?: TypeDocNode[]; parameters?: TypeDocNode[]; typeParameter?: TypeDocNode[]; @@ -627,20 +627,39 @@ export interface SectionsMap { [sectionName: string]: string; } +export enum DocPackages { + Connect = 'CONNECT', + ZeroExJs = 'ZERO_EX_JS', + SmartContracts = 'SMART_CONTRACTS', +} + +export enum SupportedDocJson { + Doxity = 'DOXITY', + TypeDoc = 'TYPEDOC', +} + +export interface ContractsByVersionByNetworkId { + [version: string]: { + [networkName: string]: { + [contractName: string]: string; + }; + }; +} + export interface DocsInfoConfig { + id: string; + type: SupportedDocJson; displayName: string; packageUrl: string; - websitePath: string; - docsJsonRoot: string; menu: DocsMenu; sections: SectionsMap; sectionNameToMarkdown: { [sectionName: string]: string }; visibleConstructors: string[]; - convertToDocAgnosticFormatFn: (docObj: DoxityDocObj | TypeDocNode, docsInfo?: any) => DocAgnosticFormat; subPackageName?: string; publicTypes?: string[]; sectionNameToModulePath?: { [sectionName: string]: string[] }; menuSubsectionToVersionWhenIntroduced?: { [sectionName: string]: string }; + contractsByVersionByNetworkId?: ContractsByVersionByNetworkId; } export interface TimestampMsRange { diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 8e359f8bd..388fc8530 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -1,12 +1,5 @@ import * as _ from 'lodash'; -import { - ContractAddresses, - Environments, - Networks, - OutdatedWrappedEtherByNetworkId, - PublicNodeUrlsByNetworkId, - SmartContractDocSections, -} from 'ts/types'; +import { ContractAddresses, Environments, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types'; const BASE_URL = window.location.origin; const isDevelopment = _.includes( @@ -19,34 +12,6 @@ export const configs = { BACKEND_BASE_URL: 'https://website-api.0xproject.com', BASE_URL, BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208', - CONTRACT_ADDRESS: { - '1.0.0': { - [Networks.Mainnet]: { - [SmartContractDocSections.Exchange]: '0x12459c951127e0c374ff9105dda097662a027093', - [SmartContractDocSections.TokenTransferProxy]: '0x8da0d80f5007ef1e431dd2127178d224e32c2ef4', - [SmartContractDocSections.ZRXToken]: '0xe41d2489571d322189246dafa5ebde1f4699f498', - [SmartContractDocSections.TokenRegistry]: '0x926a74c5c36adf004c87399e65f75628b0f98d2c', - }, - [Networks.Ropsten]: { - [SmartContractDocSections.Exchange]: '0x479cc461fecd078f766ecc58533d6f69580cf3ac', - [SmartContractDocSections.TokenTransferProxy]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', - [SmartContractDocSections.ZRXToken]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', - [SmartContractDocSections.TokenRegistry]: '0x6b1a50f0bb5a7995444bd3877b22dc89c62843ed', - }, - [Networks.Kovan]: { - [SmartContractDocSections.Exchange]: '0x90fe2af704b34e0224bf2299c838e04d4dcf1364', - [SmartContractDocSections.TokenTransferProxy]: '0x087Eed4Bc1ee3DE49BeFbd66C662B434B15d49d4', - [SmartContractDocSections.ZRXToken]: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570', - [SmartContractDocSections.TokenRegistry]: '0xf18e504561f4347bea557f3d4558f559dddbae7f', - }, - [Networks.Rinkeby]: { - [SmartContractDocSections.Exchange]: '0x1d16ef40fac01cec8adac2ac49427b9384192c05', - [SmartContractDocSections.TokenTransferProxy]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', - [SmartContractDocSections.ZRXToken]: '0x00f58d6d585f84b2d7267940cede30ce2fe6eae8', - [SmartContractDocSections.TokenRegistry]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', - }, - }, - } as ContractAddresses, DEFAULT_DERIVATION_PATH: `44'/60'/0'`, // WARNING: ZRX & WETH MUST always be default trackedTokens DEFAULT_TRACKED_TOKEN_SYMBOLS: ['WETH', 'ZRX'], @@ -129,6 +94,8 @@ export const configs = { [3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`], [4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`], } as PublicNodeUrlsByNetworkId, + SCROLL_CONTAINER_ID: 'documentation', + SCROLL_TOP_ID: 'pageScrollTop', SHOULD_DEPRECATE_OLD_WETH_TOKEN: true, SYMBOLS_OF_MINTABLE_KOVAN_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'], SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS: [ diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 6af821dbe..3476b7375 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -42,6 +42,7 @@ export const constants = { PROVIDER_NAME_GENERIC: 'Injected Web3', PROVIDER_NAME_PUBLIC: '0x Public', ROLLBAR_ACCESS_TOKEN: 'a6619002b51c4464928201e6ea94de65', + S3_BUCKET_ROOT: 'https://s3.amazonaws.com', SUCCESS_STATUS: 200, UNAVAILABLE_STATUS: 503, TAKER_FEE: new BigNumber(0), diff --git a/packages/website/ts/utils/typedoc_utils.ts b/packages/website/ts/utils/typedoc_utils.ts index 11ec8da58..ce7df4dbb 100644 --- a/packages/website/ts/utils/typedoc_utils.ts +++ b/packages/website/ts/utils/typedoc_utils.ts @@ -4,6 +4,7 @@ import { CustomType, CustomTypeChild, DocAgnosticFormat, + DocPackages, DocSection, IndexSignature, KindString, @@ -40,18 +41,17 @@ export const typeDocUtils = { isPrivateOrProtectedProperty(propertyName: string): boolean { return _.startsWith(propertyName, '_'); }, - getModuleDefinitionBySectionNameIfExists( - versionDocObj: TypeDocNode, - modulePaths: string[], - ): TypeDocNode | undefined { - const modules = versionDocObj.children; - for (const mod of modules) { - if (_.includes(modulePaths, mod.name)) { - const moduleWithName = mod; - return moduleWithName; - } - } - return undefined; + getModuleDefinitionsBySectionName(versionDocObj: TypeDocNode, configModulePaths: string[]): TypeDocNode[] { + const moduleDefinitions: TypeDocNode[] = []; + const jsonModules = versionDocObj.children; + _.each(jsonModules, jsonMod => { + _.each(configModulePaths, configModulePath => { + if (_.includes(configModulePath, jsonMod.name)) { + moduleDefinitions.push(jsonMod); + } + }); + }); + return moduleDefinitions; }, convertToDocAgnosticFormat(typeDocJson: TypeDocNode, docsInfo: DocsInfo): DocAgnosticFormat { const subMenus = _.values(docsInfo.getMenu()); @@ -62,12 +62,23 @@ export const typeDocUtils = { if (_.isUndefined(modulePathsIfExists)) { return; // no-op } - const packageDefinitionIfExists = typeDocUtils.getModuleDefinitionBySectionNameIfExists( - typeDocJson, - modulePathsIfExists, - ); - if (_.isUndefined(packageDefinitionIfExists)) { + const packageDefinitions = typeDocUtils.getModuleDefinitionsBySectionName(typeDocJson, modulePathsIfExists); + let packageDefinitionWithMergedChildren; + if (_.isEmpty(packageDefinitions)) { return; // no-op + } else if (packageDefinitions.length === 1) { + packageDefinitionWithMergedChildren = packageDefinitions[0]; + } else { + // HACK: For now, if there are two modules to display in a single section, + // we simply concat the children. This works for our limited use-case where + // we want to display types stored in two files under a single section + packageDefinitionWithMergedChildren = packageDefinitions[0]; + for (let i = 1; i < packageDefinitions.length; i++) { + packageDefinitionWithMergedChildren.children = [ + ...packageDefinitionWithMergedChildren.children, + ...packageDefinitions[i].children, + ]; + } } // Since the `types.ts` file is the only file that does not export a module/class but @@ -76,10 +87,10 @@ export const typeDocUtils = { let entities; let packageComment = ''; if (sectionName === docsInfo.sections.types) { - entities = packageDefinitionIfExists.children; + entities = packageDefinitionWithMergedChildren.children; } else { - entities = packageDefinitionIfExists.children[0].children; - const commentObj = packageDefinitionIfExists.children[0].comment; + entities = packageDefinitionWithMergedChildren.children[0].children; + const commentObj = packageDefinitionWithMergedChildren.children[0].comment; packageComment = !_.isUndefined(commentObj) ? commentObj.shortText : packageComment; } @@ -108,7 +119,7 @@ export const typeDocUtils = { isConstructor, docsInfo.sections, sectionName, - docsInfo.subPackageName, + docsInfo.id, ); docSection.constructors.push(constructor); break; @@ -121,7 +132,7 @@ export const typeDocUtils = { isConstructor, docsInfo.sections, sectionName, - docsInfo.subPackageName, + docsInfo.id, ); docSection.methods.push(method); } @@ -133,7 +144,7 @@ export const typeDocUtils = { entity, docsInfo.sections, sectionName, - docsInfo.subPackageName, + docsInfo.id, ); docSection.properties.push(property); } @@ -149,7 +160,7 @@ export const typeDocUtils = { entity, docsInfo.sections, sectionName, - docsInfo.subPackageName, + docsInfo.id, ); docSection.types.push(customType); } @@ -161,21 +172,24 @@ export const typeDocUtils = { }); return docSection; }, - _convertCustomType( - entity: TypeDocNode, - sections: SectionsMap, - sectionName: string, - subPackageName: string, - ): CustomType { + _convertCustomType(entity: TypeDocNode, sections: SectionsMap, sectionName: string, docId: string): CustomType { const typeIfExists = !_.isUndefined(entity.type) - ? typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName) + ? typeDocUtils._convertType(entity.type, sections, sectionName, docId) : undefined; const isConstructor = false; const methodIfExists = !_.isUndefined(entity.declaration) - ? typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, subPackageName) + ? typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, docId) : undefined; - const indexSignatureIfExists = !_.isUndefined(entity.indexSignature) - ? typeDocUtils._convertIndexSignature(entity.indexSignature[0], sections, sectionName, subPackageName) + const doesIndexSignatureExist = !_.isUndefined(entity.indexSignature); + const isIndexSignatureArray = _.isArray(entity.indexSignature); + // HACK: TypeDoc Versions <0.9.0 indexSignature is of type TypeDocNode[] + // Versions >0.9.0 have it as type TypeDocNode + const indexSignature = + doesIndexSignatureExist && isIndexSignatureArray + ? (entity.indexSignature as TypeDocNode[])[0] + : (entity.indexSignature as TypeDocNode); + const indexSignatureIfExists = doesIndexSignatureExist + ? typeDocUtils._convertIndexSignature(indexSignature, sections, sectionName, docId) : undefined; const commentIfExists = !_.isUndefined(entity.comment) && !_.isUndefined(entity.comment.shortText) @@ -185,7 +199,7 @@ export const typeDocUtils = { const childrenIfExist = !_.isUndefined(entity.children) ? _.map(entity.children, (child: TypeDocNode) => { const childTypeIfExists = !_.isUndefined(child.type) - ? typeDocUtils._convertType(child.type, sections, sectionName, subPackageName) + ? typeDocUtils._convertType(child.type, sections, sectionName, docId) : undefined; const c: CustomTypeChild = { name: child.name, @@ -212,27 +226,22 @@ export const typeDocUtils = { entity: TypeDocNode, sections: SectionsMap, sectionName: string, - subPackageName: string, + docId: string, ): IndexSignature { const key = entity.parameters[0]; const indexSignature = { keyName: key.name, - keyType: typeDocUtils._convertType(key.type, sections, sectionName, subPackageName), + keyType: typeDocUtils._convertType(key.type, sections, sectionName, docId), valueName: entity.type.name, }; return indexSignature; }, - _convertProperty( - entity: TypeDocNode, - sections: SectionsMap, - sectionName: string, - subPackageName: string, - ): Property { + _convertProperty(entity: TypeDocNode, sections: SectionsMap, sectionName: string, docId: string): Property { const source = entity.sources[0]; const commentIfExists = !_.isUndefined(entity.comment) ? entity.comment.shortText : undefined; const property = { name: entity.name, - type: typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName), + type: typeDocUtils._convertType(entity.type, sections, sectionName, docId), source: { fileName: source.fileName, line: source.line, @@ -246,7 +255,7 @@ export const typeDocUtils = { isConstructor: boolean, sections: SectionsMap, sectionName: string, - subPackageName: string, + docId: string, ): TypescriptMethod { const signature = entity.signatures[0]; const source = entity.sources[0]; @@ -258,7 +267,7 @@ export const typeDocUtils = { let callPath; if (isConstructor || entity.name === '__type') { callPath = ''; - } else if (subPackageName === '0x.js') { + } else if (docId === DocPackages.ZeroExJs) { const topLevelInterface = isStatic ? 'ZeroEx.' : 'zeroEx.'; callPath = !_.isUndefined(sections.zeroEx) && sectionName !== sections.zeroEx @@ -269,12 +278,12 @@ export const typeDocUtils = { } const parameters = _.map(signature.parameters, param => { - return typeDocUtils._convertParameter(param, sections, sectionName, subPackageName); + return typeDocUtils._convertParameter(param, sections, sectionName, docId); }); - const returnType = typeDocUtils._convertType(signature.type, sections, sectionName, subPackageName); + const returnType = typeDocUtils._convertType(signature.type, sections, sectionName, docId); const typeParameter = _.isUndefined(signature.typeParameter) ? undefined - : typeDocUtils._convertTypeParameter(signature.typeParameter[0], sections, sectionName, subPackageName); + : typeDocUtils._convertTypeParameter(signature.typeParameter[0], sections, sectionName, docId); const method = { isConstructor, @@ -297,21 +306,16 @@ export const typeDocUtils = { entity: TypeDocNode, sections: SectionsMap, sectionName: string, - subPackageName: string, + docId: string, ): TypeParameter { - const type = typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName); + const type = typeDocUtils._convertType(entity.type, sections, sectionName, docId); const parameter = { name: entity.name, type, }; return parameter; }, - _convertParameter( - entity: TypeDocNode, - sections: SectionsMap, - sectionName: string, - subPackageName: string, - ): Parameter { + _convertParameter(entity: TypeDocNode, sections: SectionsMap, sectionName: string, docId: string): Parameter { let comment = '<No comment>'; if (entity.comment && entity.comment.shortText) { comment = entity.comment.shortText; @@ -321,7 +325,7 @@ export const typeDocUtils = { const isOptional = !_.isUndefined(entity.flags.isOptional) ? entity.flags.isOptional : false; - const type = typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName); + const type = typeDocUtils._convertType(entity.type, sections, sectionName, docId); const parameter = { name: entity.name, @@ -331,17 +335,17 @@ export const typeDocUtils = { }; return parameter; }, - _convertType(entity: TypeDocType, sections: SectionsMap, sectionName: string, subPackageName: string): Type { + _convertType(entity: TypeDocType, sections: SectionsMap, sectionName: string, docId: string): Type { const typeArguments = _.map(entity.typeArguments, typeArgument => { - return typeDocUtils._convertType(typeArgument, sections, sectionName, subPackageName); + return typeDocUtils._convertType(typeArgument, sections, sectionName, docId); }); const types = _.map(entity.types, t => { - return typeDocUtils._convertType(t, sections, sectionName, subPackageName); + return typeDocUtils._convertType(t, sections, sectionName, docId); }); const isConstructor = false; const methodIfExists = !_.isUndefined(entity.declaration) - ? typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, subPackageName) + ? typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, docId) : undefined; const elementTypeIfExists = !_.isUndefined(entity.elementType) diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index c38f84c92..a1e045af7 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -4,6 +4,7 @@ import deepEqual = require('deep-equal'); import isMobile = require('is-mobile'); import * as _ from 'lodash'; import * as moment from 'moment'; +import { scroller } from 'react-scroll'; import { EtherscanLinkSuffixes, Networks, @@ -290,4 +291,30 @@ export const utils = { ); return isTestNetwork; }, + getCurrentBaseUrl() { + const port = window.location.port; + const hasPort = !_.isUndefined(port); + const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`; + return baseUrl; + }, + scrollToHash(hash: string, containerId: string): void { + let finalHash = hash; + if (_.isEmpty(hash)) { + finalHash = configs.SCROLL_TOP_ID; // scroll to the top + } + + scroller.scrollTo(finalHash, { + duration: 0, + offset: 0, + containerId, + }); + }, + async onPageLoadAsync(): Promise<void> { + if (document.readyState === 'complete') { + return; // Already loaded + } + return new Promise<void>((resolve, reject) => { + window.onload = () => resolve(); + }); + }, }; diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 38b177d0b..99f465bc2 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -13,5 +13,9 @@ "*": ["node_modules/@types/*", "*"] } }, - "include": ["./ts/**/*", "../../node_modules/web3-typescript-typings/index.d.ts"] + "include": [ + "./ts/**/*", + "../../node_modules/web3-typescript-typings/index.d.ts", + "../../node_modules/ethers-typescript-typings/index.d.ts" + ] } |
