Move Documentation to the @0xproject/react-docs package

packages/react-docs/.npmignore

@@ -0,0 +1,5 @@
+.*
+yarn-error.log
+/src/
+/scripts/
+tsconfig.json

packages/react-docs/CHANGELOG.md

@@ -0,0 +1,3 @@
+# CHANGELOG
+
+## vX.X.X - _TBD, 2018_

packages/react-docs/README.md

@@ -0,0 +1,47 @@
+## @0xproject/react-docs
+
+A full-page React component for rendering beautiful documentation generated with [TypeDoc](http://typedoc.org/) or [Doxity](https://github.com/0xproject/doxity).
+
+## Installation
+
+```bash
+yarn add @0xproject/react-docs
+```
+
+## Contributing
+
+We strongly encourage that the community help us make improvements and determine the future direction of the protocol. To report bugs within this package, please create an issue in this repository.
+
+Please read our [contribution guidelines](../../CONTRIBUTING.md) before getting started.
+
+### Install Dependencies
+
+If you don't have yarn workspaces enabled (Yarn < v1.0) - enable them:
+
+```bash
+yarn config set workspaces-experimental true
+```
+
+Then install dependencies
+
+```bash
+yarn install
+```
+
+### Build
+
+```bash
+yarn build
+```
+
+### Lint
+
+```bash
+yarn lint
+```
+
+### Run Tests
+
+```bash
+yarn test
+```

packages/react-docs/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@0xproject/react-docs",
+  "version": "0.0.1",
+  "description": "React documentation component for rendering TypeDoc & Doxity generated JSON",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "lint": "tslint --project . 'src/ts/**/*.ts' 'src/ts/**/*.tsx'",
+    "build": "tsc",
+    "build:watch": "tsc -w",
+    "clean": "shx rm -rf lib"
+  },
+  "author": "Fabio Berger",
+  "license": "MIT",
+  "devDependencies": {
+    "@0xproject/tslint-config": "^0.4.9",
+    "@types/lodash": "^4.14.86",
+    "@types/node": "^8.0.53",
+    "@types/material-ui": "0.18.0",
+    "@types/react": "^15.0.15",
+    "@types/react-dom": "^0.14.23",
+    "shx": "^0.2.2",
+    "tslint": "^5.9.1",
+    "typescript": "2.7.1"
+  },
+  "dependencies": {
+    "@0xproject/react-shared": "^0.0.1",
+    "basscss": "^8.0.3",
+    "compare-versions": "^3.0.1",
+    "react-tooltip": "^3.2.7",
+    "material-ui": "^0.17.1",
+    "react": "15.6.1",
+    "react-dom": "15.6.1",
+    "lodash": "^4.17.4",
+    "react-tap-event-plugin": "^2.0.1"
+  }
+}

packages/react-docs/scripts/postpublish.js

@@ -0,0 +1,5 @@
+const postpublish_utils = require('../../../scripts/postpublish_utils');
+const packageJSON = require('../package.json');
+
+const subPackageName = packageJSON.name;
+postpublish_utils.standardPostPublishAsync(subPackageName);

packages/react-docs/src/ts/components/badge.tsx

@@ -15,12 +15,12 @@ const styles: Styles = {
     },
 };
 
-interface BadgeProps {
+export interface BadgeProps {
     title: string;
     backgroundColor: string;
 }
 
-interface BadgeState {
+export interface BadgeState {
     isHovering: boolean;
 }
 

packages/react-docs/src/ts/components/comment.tsx

@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import * as ReactMarkdown from 'react-markdown';
 
-interface CommentProps {
+export interface CommentProps {
     comment: string;
     className?: string;
 }

packages/react-docs/src/ts/components/custom_enum.tsx

@@ -1,11 +1,12 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { CustomType } from 'ts/types';
+
-import { utils } from 'ts/utils/utils';
+import { CustomType } from '../types';
+import { utils } from '../utils/utils';
 
 const STRING_ENUM_CODE_PREFIX = ' strEnum(';
 
-interface CustomEnumProps {
+export interface CustomEnumProps {
     type: CustomType;
 }
 

packages/react-docs/src/ts/components/docs_info.ts

@@ -1,6 +1,7 @@
 import { MenuSubsectionsBySection } from '@0xproject/react-shared';
 import compareVersions = require('compare-versions');
 import * as _ from 'lodash';
+
 import {
     ContractsByVersionByNetworkId,
     DocAgnosticFormat,
@@ -10,9 +11,9 @@ import {
     SectionsMap,
     SupportedDocJson,
     TypeDocNode,
-} from 'ts/types';
+} from '../types';
-import { doxityUtils } from 'ts/utils/doxity_utils';
+import { doxityUtils } from '../utils/doxity_utils';
-import { typeDocUtils } from 'ts/utils/typedoc_utils';
+import { typeDocUtils } from '../utils/typedoc_utils';
 
 export class DocsInfo {
     public id: string;

packages/react-docs/src/ts/components/documentation.tsx

@@ -1,9 +1,11 @@
 import {
     colors,
     constants as sharedConstants,
+    EtherscanLinkSuffixes,
     MarkdownSection,
     MenuSubsectionsBySection,
     NestedSidebarMenu,
+    Networks,
     SectionHeader,
     Styles,
     utils as sharedUtils,
@@ -12,29 +14,28 @@ import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 import { scroller } from 'react-scroll';
-import { Badge } from 'ts/components/ui/badge';
+
-import { Comment } from 'ts/pages/documentation/comment';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { EventDefinition } from 'ts/pages/documentation/event_definition';
-import { MethodBlock } from 'ts/pages/documentation/method_block';
-import { SourceLink } from 'ts/pages/documentation/source_link';
-import { Type } from 'ts/pages/documentation/type';
-import { TypeDefinition } from 'ts/pages/documentation/type_definition';
 import {
     AddressByContractName,
     DocAgnosticFormat,
     DoxityDocObj,
-    EtherscanLinkSuffixes,
     Event,
-    Networks,
     Property,
     SolidityMethod,
     SupportedDocJson,
     TypeDefinitionByName,
     TypescriptMethod,
-} from 'ts/types';
+} from '../types';
-import { constants } from 'ts/utils/constants';
+import { utils } from '../utils/utils';
-import { utils } from 'ts/utils/utils';
+
+import { Badge } from './badge';
+import { Comment } from './comment';
+import { DocsInfo } from './docs_info';
+import { EventDefinition } from './event_definition';
+import { MethodBlock } from './method_block';
+import { SourceLink } from './source_link';
+import { Type } from './type';
+import { TypeDefinition } from './type_definition';
 
 const TOP_BAR_HEIGHT = 60;
 
@@ -55,7 +56,7 @@ export interface DocumentationProps {
     sourceUrl: string;
 }
 
-interface DocumentationState {}
+export interface DocumentationState {}
 
 const styles: Styles = {
     mainContainers: {
@@ -268,9 +269,9 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                 if (_.isUndefined(contractAddress)) {
                     return null;
                 }
-                const linkIfExists = utils.getEtherScanLinkIfExists(
+                const linkIfExists = sharedUtils.getEtherScanLinkIfExists(
                     contractAddress,
-                    constants.NETWORK_ID_BY_NAME[networkName],
+                    sharedConstants.NETWORK_ID_BY_NAME[networkName],
                     EtherscanLinkSuffixes.Address,
                 );
                 return (

packages/react-docs/src/ts/components/enum.tsx

@@ -1,8 +1,9 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { EnumValue } from 'ts/types';
 
-interface EnumProps {
+import { EnumValue } from '../types';
+
+export interface EnumProps {
     values: EnumValue[];
 }
 

packages/react-docs/src/ts/components/event_definition.tsx

@@ -1,17 +1,19 @@
 import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { Type } from 'ts/pages/documentation/type';
-import { Event, EventArg } from 'ts/types';
 
-interface EventDefinitionProps {
+import { Event, EventArg } from '../types';
+
+import { DocsInfo } from './docs_info';
+import { Type } from './type';
+
+export interface EventDefinitionProps {
     event: Event;
     sectionName: string;
     docsInfo: DocsInfo;
 }
 
-interface EventDefinitionState {
+export interface EventDefinitionState {
     shouldShowAnchor: boolean;
 }
 

packages/react-docs/src/ts/components/interface.tsx

@@ -1,11 +1,13 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { MethodSignature } from 'ts/pages/documentation/method_signature';
-import { Type } from 'ts/pages/documentation/type';
-import { CustomType, TypeDocTypes } from 'ts/types';
 
-interface InterfaceProps {
+import { CustomType, TypeDocTypes } from '../types';
+
+import { DocsInfo } from './docs_info';
+import { MethodSignature } from './method_signature';
+import { Type } from './type';
+
+export interface InterfaceProps {
     type: CustomType;
     sectionName: string;
     docsInfo: DocsInfo;

packages/react-docs/src/ts/components/method_block.tsx

@@ -1,14 +1,16 @@
 import { AnchorTitle, colors, HeaderSizes, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Comment } from 'ts/pages/documentation/comment';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { MethodSignature } from 'ts/pages/documentation/method_signature';
-import { SourceLink } from 'ts/pages/documentation/source_link';
-import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
-import { typeDocUtils } from 'ts/utils/typedoc_utils';
 
-interface MethodBlockProps {
+import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from '../types';
+import { typeDocUtils } from '../utils/typedoc_utils';
+
+import { Comment } from './comment';
+import { DocsInfo } from './docs_info';
+import { MethodSignature } from './method_signature';
+import { SourceLink } from './source_link';
+
+export interface MethodBlockProps {
     method: SolidityMethod | TypescriptMethod;
     sectionName: string;
     libraryVersion: string;
@@ -17,7 +19,7 @@ interface MethodBlockProps {
     sourceUrl: string;
 }
 
-interface MethodBlockState {
+export interface MethodBlockState {
     shouldShowAnchor: boolean;
 }
 

packages/react-docs/src/ts/components/method_signature.tsx

@@ -1,12 +1,14 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { Type } from 'ts/pages/documentation/type';
-import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
-import { constants } from 'ts/utils/constants';
 
-interface MethodSignatureProps {
+import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from '../types';
+import { constants } from '../utils/constants';
+
+import { DocsInfo } from './docs_info';
+import { Type } from './type';
+
+export interface MethodSignatureProps {
     method: TypescriptMethod | SolidityMethod;
     sectionName: string;
     shouldHideMethodName?: boolean;

packages/react-docs/src/ts/components/source_link.tsx

@@ -1,9 +1,10 @@
 import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Source } from 'ts/types';
 
-interface SourceLinkProps {
+import { Source } from '../types';
+
+export interface SourceLinkProps {
     source: Source;
     sourceUrl: string;
     version: string;

packages/react-docs/src/ts/components/type.tsx

@@ -3,11 +3,13 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
 import * as ReactTooltip from 'react-tooltip';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
+
-import { TypeDefinition } from 'ts/pages/documentation/type_definition';
+import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '../types';
-import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from 'ts/types';
+import { constants } from '../utils/constants';
-import { constants } from 'ts/utils/constants';
+import { utils } from '../utils/utils';
-import { utils } from 'ts/utils/utils';
+
+import { DocsInfo } from './docs_info';
+import { TypeDefinition } from './type_definition';
 
 // Some types reference other libraries. For these types, we want to link the user to the relevant documentation.
 const typeToUrl: { [typeName: string]: string } = {
@@ -34,7 +36,7 @@ const typeToSection: { [typeName: string]: string } = {
     OrderStateWatcher: 'orderWatcher',
 };
 
-interface TypeProps {
+export interface TypeProps {
     type: TypeDef;
     docsInfo: DocsInfo;
     sectionName: string;
@@ -181,7 +183,7 @@ export function Type(props: TypeProps): any {
                 duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
                 containerId={sharedConstants.DOCS_CONTAINER_ID}
             >
-                {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ? (
+                {_.isUndefined(typeDefinition) || sharedUtils.isUserOnMobile() ? (
                     <span
                         onClick={sharedUtils.setUrlHash.bind(null, typeDefinitionAnchorId)}
                         style={{ color: colors.lightBlueA700, cursor: 'pointer' }}

packages/react-docs/src/ts/components/type_definition.tsx

@@ -1,24 +1,26 @@
 import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Comment } from 'ts/pages/documentation/comment';
-import { CustomEnum } from 'ts/pages/documentation/custom_enum';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { Enum } from 'ts/pages/documentation/enum';
-import { Interface } from 'ts/pages/documentation/interface';
-import { MethodSignature } from 'ts/pages/documentation/method_signature';
-import { Type } from 'ts/pages/documentation/type';
-import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from 'ts/types';
-import { utils } from 'ts/utils/utils';
 
-interface TypeDefinitionProps {
+import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from '../types';
+import { utils } from '../utils/utils';
+
+import { Comment } from './comment';
+import { CustomEnum } from './custom_enum';
+import { DocsInfo } from './docs_info';
+import { Enum } from './enum';
+import { Interface } from './interface';
+import { MethodSignature } from './method_signature';
+import { Type } from './type';
+
+export interface TypeDefinitionProps {
     sectionName: string;
     customType: CustomType;
     shouldAddId?: boolean;
     docsInfo: DocsInfo;
 }
 
-interface TypeDefinitionState {
+export interface TypeDefinitionState {
     shouldShowAnchor: boolean;
 }
 

packages/react-docs/src/ts/globals.d.ts

@@ -0,0 +1,7 @@
+declare module 'react-tooltip';
+
+// compare-version declarations
+declare function compareVersions(firstVersion: string, secondVersion: string): number;
+declare module 'compare-versions' {
+    export = compareVersions;
+}

packages/react-docs/src/ts/index.ts

@@ -0,0 +1,20 @@
+export { Documentation } from './components/documentation';
+export { DocsInfo } from './components/docs_info';
+
+// Exported to give users of this library added flexibility if they want to build
+// a docs page from scratch using the individual components.
+export { Badge } from './components/badge';
+export { Comment } from './components/comment';
+export { CustomEnum } from './components/custom_enum';
+export { Enum } from './components/enum';
+export { EventDefinition } from './components/event_definition';
+export { Interface } from './components/interface';
+export { MethodBlock } from './components/method_block';
+export { MethodSignature } from './components/method_signature';
+export { SourceLink } from './components/source_link';
+export { TypeDefinition } from './components/type_definition';
+export { Type } from './components/type';
+
+export { DocsInfoConfig, DocAgnosticFormat, DoxityDocObj, DocsMenu, SupportedDocJson, TypeDocNode } from './types';
+
+export { constants } from './utils/constants';

packages/react-docs/src/ts/types.ts

@@ -0,0 +1,266 @@
+export interface DocsInfoConfig {
+    id: string;
+    type: SupportedDocJson;
+    displayName: string;
+    packageUrl: string;
+    menu: DocsMenu;
+    sections: SectionsMap;
+    sectionNameToMarkdown: { [sectionName: string]: string };
+    visibleConstructors: string[];
+    subPackageName?: string;
+    publicTypes?: string[];
+    sectionNameToModulePath?: { [sectionName: string]: string[] };
+    menuSubsectionToVersionWhenIntroduced?: { [sectionName: string]: string };
+    contractsByVersionByNetworkId?: ContractsByVersionByNetworkId;
+}
+
+export interface DocsMenu {
+    [sectionName: string]: string[];
+}
+
+export interface SectionsMap {
+    [sectionName: string]: string;
+}
+
+export interface TypeDocType {
+    type: TypeDocTypes;
+    value: string;
+    name: string;
+    types: TypeDocType[];
+    typeArguments?: TypeDocType[];
+    declaration: TypeDocNode;
+    elementType?: TypeDocType;
+}
+
+export interface TypeDocFlags {
+    isStatic?: boolean;
+    isOptional?: boolean;
+    isPublic?: boolean;
+}
+
+export interface TypeDocGroup {
+    title: string;
+    children: number[];
+}
+
+export interface TypeDocNode {
+    id?: number;
+    name?: string;
+    kind?: string;
+    defaultValue?: string;
+    kindString?: string;
+    type?: TypeDocType;
+    fileName?: string;
+    line?: number;
+    comment?: TypeDocNode;
+    text?: string;
+    shortText?: string;
+    returns?: string;
+    declaration: TypeDocNode;
+    flags?: TypeDocFlags;
+    indexSignature?: TypeDocNode | TypeDocNode[]; // TypeDocNode in TypeDoc <V0.9.0, TypeDocNode[] in >V0.9.0
+    signatures?: TypeDocNode[];
+    parameters?: TypeDocNode[];
+    typeParameter?: TypeDocNode[];
+    sources?: TypeDocNode[];
+    children?: TypeDocNode[];
+    groups?: TypeDocGroup[];
+}
+
+export enum TypeDocTypes {
+    Intrinsic = 'intrinsic',
+    Reference = 'reference',
+    Array = 'array',
+    StringLiteral = 'stringLiteral',
+    Reflection = 'reflection',
+    Union = 'union',
+    TypeParameter = 'typeParameter',
+    Intersection = 'intersection',
+    Unknown = 'unknown',
+}
+
+// Exception: We don't make the values uppercase because these KindString's need to
+// match up those returned by TypeDoc
+export enum KindString {
+    Constructor = 'Constructor',
+    Property = 'Property',
+    Method = 'Method',
+    Interface = 'Interface',
+    TypeAlias = 'Type alias',
+    Variable = 'Variable',
+    Function = 'Function',
+    Enumeration = 'Enumeration',
+}
+
+export interface DocAgnosticFormat {
+    [sectionName: string]: DocSection;
+}
+
+export interface DocSection {
+    comment: string;
+    constructors: Array<TypescriptMethod | SolidityMethod>;
+    methods: Array<TypescriptMethod | SolidityMethod>;
+    properties: Property[];
+    types: CustomType[];
+    events?: Event[];
+}
+
+export interface TypescriptMethod extends BaseMethod {
+    source?: Source;
+    isStatic?: boolean;
+    typeParameter?: TypeParameter;
+}
+
+export interface SolidityMethod extends BaseMethod {
+    isConstant?: boolean;
+    isPayable?: boolean;
+}
+
+export interface Source {
+    fileName: string;
+    line: number;
+}
+
+export interface Parameter {
+    name: string;
+    comment: string;
+    isOptional: boolean;
+    type: Type;
+}
+
+export interface TypeParameter {
+    name: string;
+    type: Type;
+}
+
+export interface Type {
+    name: string;
+    typeDocType: TypeDocTypes;
+    value?: string;
+    typeArguments?: Type[];
+    elementType?: ElementType;
+    types?: Type[];
+    method?: TypescriptMethod;
+}
+
+export interface ElementType {
+    name: string;
+    typeDocType: TypeDocTypes;
+}
+
+export interface IndexSignature {
+    keyName: string;
+    keyType: Type;
+    valueName: string;
+}
+
+export interface CustomType {
+    name: string;
+    kindString: string;
+    type?: Type;
+    method?: TypescriptMethod;
+    indexSignature?: IndexSignature;
+    defaultValue?: string;
+    comment?: string;
+    children?: CustomTypeChild[];
+}
+
+export interface CustomTypeChild {
+    name: string;
+    type?: Type;
+    defaultValue?: string;
+}
+
+export interface Event {
+    name: string;
+    eventArgs: EventArg[];
+}
+
+export interface EventArg {
+    isIndexed: boolean;
+    name: string;
+    type: Type;
+}
+
+export interface Property {
+    name: string;
+    type: Type;
+    source?: Source;
+    comment?: string;
+}
+
+export interface BaseMethod {
+    isConstructor: boolean;
+    name: string;
+    returnComment?: string | undefined;
+    callPath: string;
+    parameters: Parameter[];
+    returnType: Type;
+    comment?: string;
+}
+
+export interface TypeDefinitionByName {
+    [typeName: string]: CustomType;
+}
+
+export enum SupportedDocJson {
+    Doxity = 'DOXITY',
+    TypeDoc = 'TYPEDOC',
+}
+
+export interface ContractsByVersionByNetworkId {
+    [version: string]: {
+        [networkName: string]: {
+            [contractName: string]: string;
+        };
+    };
+}
+
+export interface DoxityDocObj {
+    [contractName: string]: DoxityContractObj;
+}
+
+export interface DoxityContractObj {
+    title: string;
+    fileName: string;
+    name: string;
+    abiDocs: DoxityAbiDoc[];
+}
+
+export interface DoxityAbiDoc {
+    constant: boolean;
+    inputs: DoxityInput[];
+    name: string;
+    outputs: DoxityOutput[];
+    payable: boolean;
+    type: string;
+    details?: string;
+    return?: string;
+}
+
+export interface DoxityOutput {
+    name: string;
+    type: string;
+}
+
+export interface DoxityInput {
+    name: string;
+    type: string;
+    description: string;
+    indexed?: boolean;
+}
+
+export interface AddressByContractName {
+    [contractName: string]: string;
+}
+
+export interface EnumValue {
+    name: string;
+    defaultValue?: string;
+}
+
+export enum AbiTypes {
+    Constructor = 'constructor',
+    Function = 'function',
+    Event = 'event',
+}

packages/react-docs/src/ts/utils/constants.ts

@@ -0,0 +1,9 @@
+export const constants = {
+    TYPES_SECTION_NAME: 'types',
+    URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
+    URL_WEB3_DECODED_LOG_ENTRY_EVENT:
+        'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',
+    URL_WEB3_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L127',
+    URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150',
+    URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
+};

packages/react-docs/src/ts/utils/doxity_utils.ts

@@ -1,4 +1,5 @@
 import * as _ from 'lodash';
+
 import {
     AbiTypes,
     DocAgnosticFormat,
@@ -13,7 +14,7 @@ import {
     SolidityMethod,
     Type,
     TypeDocTypes,
-} from 'ts/types';
+} from '../types';
 
 export const doxityUtils = {
     convertToDocAgnosticFormat(doxityDocObj: DoxityDocObj): DocAgnosticFormat {

packages/react-docs/src/ts/utils/typedoc_utils.ts

@@ -1,10 +1,10 @@
 import * as _ from 'lodash';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
+
+import { DocsInfo } from '../components/docs_info';
 import {
     CustomType,
     CustomTypeChild,
     DocAgnosticFormat,
-    DocPackages,
     DocSection,
     IndexSignature,
     KindString,
@@ -16,8 +16,8 @@ import {
     TypeDocType,
     TypeParameter,
     TypescriptMethod,
-} from 'ts/types';
+} from '../types';
-import { utils } from 'ts/utils/utils';
+import { utils } from '../utils/utils';
 
 export const typeDocUtils = {
     isType(entity: TypeDocNode): boolean {
@@ -267,7 +267,8 @@ export const typeDocUtils = {
         let callPath;
         if (isConstructor || entity.name === '__type') {
             callPath = '';
-        } else if (docId === DocPackages.ZeroExJs) {
+            // TODO: Get rid of this 0x-specific logic
+        } else if (docId === 'ZERO_EX_JS') {
             const topLevelInterface = isStatic ? 'ZeroEx.' : 'zeroEx.';
             callPath =
                 !_.isUndefined(sections.zeroEx) && sectionName !== sections.zeroEx

packages/react-docs/src/ts/utils/utils.ts

@@ -0,0 +1,10 @@
+export const utils = {
+    consoleLog(message: string) {
+        /* tslint:disable */
+        console.log(message);
+        /* tslint:enable */
+    },
+    spawnSwitchErr(name: string, value: any) {
+        return new Error(`Unexpected switch value: ${value} encountered for ${name}`);
+    },
+};

packages/react-docs/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "extends": "../../tsconfig",
+    "compilerOptions": {
+        "outDir": "./lib/",
+        "jsx": "react",
+        "baseUrl": "./",
+        "strictNullChecks": false,
+        "noImplicitThis": false,
+        "paths": {
+            "*": ["node_modules/@types/*", "*"]
+        }
+    },
+    "include": ["./src/ts/**/*"]
+}

packages/react-docs/tslint.json

@@ -0,0 +1,9 @@
+{
+    "extends": ["@0xproject/tslint-config"],
+    "rules": {
+        "no-implicit-dependencies": false,
+        "no-object-literal-type-assertion": false,
+        "completed-docs": false,
+        "prefer-function-over-method": false
+    }
+}

packages/react-shared/package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "basscss": "^8.0.3",
+    "is-mobile": "^0.2.2",
     "material-ui": "^0.17.1",
     "react": "15.6.1",
     "react-dom": "15.6.1",

packages/react-shared/src/ts/globals.d.ts

@@ -1 +1,7 @@
 declare module 'react-highlight';
+
+// is-mobile declarations
+declare function isMobile(): boolean;
+declare module 'is-mobile' {
+    export = isMobile;
+}

packages/react-shared/src/ts/index.ts

@@ -5,7 +5,7 @@ export { MarkdownSection } from './components/markdown_section';
 export { NestedSidebarMenu } from './components/nested_sidebar_menu';
 export { SectionHeader } from './components/section_header';
 
-export { HeaderSizes, Styles, MenuSubsectionsBySection } from './types';
+export { HeaderSizes, Styles, MenuSubsectionsBySection, EtherscanLinkSuffixes, Networks } from './types';
 
 export { utils } from './utils/utils';
 export { constants } from './utils/constants';

packages/react-shared/src/ts/types.ts

@@ -11,3 +11,15 @@ export enum HeaderSizes {
 export interface MenuSubsectionsBySection {
     [section: string]: string[];
 }
+
+export enum EtherscanLinkSuffixes {
+    Address = 'address',
+    Tx = 'tx',
+}
+
+export enum Networks {
+    Mainnet = 'Mainnet',
+    Kovan = 'Kovan',
+    Ropsten = 'Ropsten',
+    Rinkeby = 'Rinkeby',
+}

packages/react-shared/src/ts/utils/constants.ts

@@ -1,6 +1,20 @@
+import { Networks } from '../types';
+
 export const constants = {
     DOCS_SCROLL_DURATION_MS: 0,
     DOCS_CONTAINER_ID: 'documentation',
     SCROLL_CONTAINER_ID: 'documentation',
     SCROLL_TOP_ID: 'pageScrollTop',
+    NETWORK_NAME_BY_ID: {
+        1: Networks.Mainnet,
+        3: Networks.Ropsten,
+        4: Networks.Rinkeby,
+        42: Networks.Kovan,
+    } as { [symbol: number]: string },
+    NETWORK_ID_BY_NAME: {
+        [Networks.Mainnet]: 1,
+        [Networks.Ropsten]: 3,
+        [Networks.Rinkeby]: 4,
+        [Networks.Kovan]: 42,
+    } as { [networkName: string]: number },
 };

packages/react-shared/src/ts/utils/utils.ts

@@ -1,6 +1,9 @@
+import isMobile = require('is-mobile');
 import * as _ from 'lodash';
 import { scroller } from 'react-scroll';
 
+import { EtherscanLinkSuffixes, Networks } from '../types';
+
 import { constants } from './constants';
 
 export const utils = {
@@ -19,6 +22,10 @@ export const utils = {
             containerId,
         });
     },
+    isUserOnMobile(): boolean {
+        const isUserOnMobile = isMobile();
+        return isUserOnMobile;
+    },
     getIdFromName(name: string) {
         const id = name.replace(/ /g, '-');
         return id;
@@ -29,4 +36,12 @@ export const utils = {
         const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
         return baseUrl;
     },
+    getEtherScanLinkIfExists(addressOrTxHash: string, networkId: number, suffix: EtherscanLinkSuffixes): string {
+        const networkName = constants.NETWORK_NAME_BY_ID[networkId];
+        if (_.isUndefined(networkName)) {
+            return undefined;
+        }
+        const etherScanPrefix = networkName === Networks.Mainnet ? '' : `${networkName.toLowerCase()}.`;
+        return `https://${etherScanPrefix}etherscan.io/${suffix}/${addressOrTxHash}`;
+    },
 };

packages/website/package.json

@@ -18,6 +18,7 @@
     "author": "Fabio Berger",
     "license": "Apache-2.0",
     "dependencies": {
+        "@0xproject/react-docs": "^0.0.1",
         "@0xproject/react-shared": "^0.0.1",
         "@0xproject/subproviders": "^0.6.0",
         "@0xproject/utils": "^0.4.0",
@@ -25,14 +26,12 @@
         "accounting": "^0.4.1",
         "basscss": "^8.0.3",
         "blockies": "^0.0.2",
-        "compare-versions": "^3.0.1",
         "dateformat": "^2.0.0",
         "deep-equal": "^1.0.1",
         "dharma-loan-frame": "^0.0.12",
         "ethereumjs-tx": "^1.3.3",
         "ethereumjs-util": "^5.1.1",
         "find-versions": "^2.0.0",
-        "is-mobile": "^0.2.2",
         "jsonschema": "^1.2.0",
         "less": "^2.7.2",
         "lodash": "^4.17.4",

packages/website/ts/blockchain.ts

@@ -15,6 +15,7 @@ import {
     TransactionReceiptWithDecodedLogs,
     ZeroEx,
 } from '0x.js';
+import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import {
     InjectedWeb3Subprovider,
     ledgerEthereumBrowserClientFactoryAsync,
@@ -35,7 +36,6 @@ import {
     BlockchainCallErrs,
     BlockchainErrs,
     ContractInstance,
-    EtherscanLinkSuffixes,
     Order as PortalOrder,
     ProviderType,
     Side,
@@ -271,7 +271,11 @@ export class Blockchain {
             },
         );
         await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
-        const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
+        const etherScanLinkIfExists = sharedUtils.getEtherScanLinkIfExists(
+            txHash,
+            this.networkId,
+            EtherscanLinkSuffixes.Tx,
+        );
         this._dispatcher.showFlashMessage(
             React.createElement(TokenSendCompleted, {
                 etherScanLinkIfExists,
@@ -542,7 +546,11 @@ export class Blockchain {
     private async _showEtherScanLinkAndAwaitTransactionMinedAsync(
         txHash: string,
     ): Promise<TransactionReceiptWithDecodedLogs> {
-        const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
+        const etherScanLinkIfExists = sharedUtils.getEtherScanLinkIfExists(
+            txHash,
+            this.networkId,
+            EtherscanLinkSuffixes.Tx,
+        );
         this._dispatcher.showFlashMessage(
             React.createElement(TransactionSubmitted, {
                 etherScanLinkIfExists,

packages/website/ts/components/dialogs/blockchain_err_dialog.tsx

@@ -1,10 +1,10 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Networks } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
-import { BlockchainErrs, Networks } from 'ts/types';
+import { BlockchainErrs } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 

packages/website/ts/components/dialogs/ledger_config_dialog.tsx

@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
@@ -82,7 +82,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         );
     }
     private _renderConnectStep() {
-        const networkIds = _.values(constants.NETWORK_ID_BY_NAME);
+        const networkIds = _.values(sharedConstants.NETWORK_ID_BY_NAME);
         return (
             <div>
                 <div className="h4 pt3">Follow these instructions before proceeding:</div>
@@ -163,7 +163,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
             const balance = this.state.addressBalances[i];
             const addressTooltipId = `address-${userAddress}`;
             const balanceTooltipId = `balance-${userAddress}`;
-            const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+            const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
             // We specifically prefix kovan ETH.
             // TODO: We should probably add prefixes for all networks
             const isKovanNetwork = networkName === 'Kovan';

packages/website/ts/components/dropdowns/network_drop_down.tsx

@@ -1,8 +1,8 @@
+import { constants as sharedConstants } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import DropDownMenu from 'material-ui/DropDownMenu';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
-import { constants } from 'ts/utils/constants';
 
 interface NetworkDropDownProps {
     updateSelectedNetwork: (e: any, index: number, value: number) => void;
@@ -24,7 +24,7 @@ export class NetworkDropDown extends React.Component<NetworkDropDownProps, Netwo
     }
     private _renderDropDownItems() {
         const items = _.map(this.props.avialableNetworkIds, networkId => {
-            const networkName = constants.NETWORK_NAME_BY_ID[networkId];
+            const networkName = sharedConstants.NETWORK_NAME_BY_ID[networkId];
             const primaryText = (
                 <div className="flex">
                     <div className="pr1" style={{ width: 14, paddingTop: 2 }}>

packages/website/ts/components/eth_wrappers.tsx

@@ -1,5 +1,5 @@
 import { ZeroEx } from '0x.js';
-import { colors } from '@0xproject/react-shared';
+import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Divider from 'material-ui/Divider';
@@ -10,14 +10,7 @@ import ReactTooltip = require('react-tooltip');
 import { Blockchain } from 'ts/blockchain';
 import { EthWethConversionButton } from 'ts/components/eth_weth_conversion_button';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import {
+import { OutdatedWrappedEtherByNetworkId, Side, Token, TokenByAddress, TokenState } from 'ts/types';
-    EtherscanLinkSuffixes,
-    OutdatedWrappedEtherByNetworkId,
-    Side,
-    Token,
-    TokenByAddress,
-    TokenState,
-} from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
@@ -99,7 +92,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
         const etherToken = this._getEthToken();
         const wethBalance = ZeroEx.toUnitAmount(this.state.ethTokenState.balance, constants.DECIMAL_PLACES_ETH);
         const isBidirectional = true;
-        const etherscanUrl = utils.getEtherScanLinkIfExists(
+        const etherscanUrl = sharedUtils.getEtherScanLinkIfExists(
             etherToken.address,
             this.props.networkId,
             EtherscanLinkSuffixes.Address,
@@ -281,7 +274,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                     this,
                     outdatedWETHIfExists.address,
                 );
-                const etherscanUrl = utils.getEtherScanLinkIfExists(
+                const etherscanUrl = sharedUtils.getEtherScanLinkIfExists(
                     outdatedWETHIfExists.address,
                     this.props.networkId,
                     EtherscanLinkSuffixes.Address,

packages/website/ts/components/fill_order.tsx

@@ -1,5 +1,5 @@
 import { Order as ZeroExOrder, ZeroEx } from '0x.js';
-import { colors } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as accounting from 'accounting';
 import * as _ from 'lodash';
@@ -537,7 +537,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             });
             return;
         }
-        const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+        const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
         const eventLabel = `${parsedOrder.metadata.takerToken.symbol}-${networkName}`;
         try {
             const orderFilledAmount: BigNumber = await this.props.blockchain.fillOrderAsync(
@@ -623,7 +623,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             });
             return;
         }
-        const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+        const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
         const eventLabel = `${parsedOrder.metadata.makerToken.symbol}-${networkName}`;
         try {
             await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount);

packages/website/ts/components/generate_order/generate_order_form.tsx

@@ -1,3 +1,4 @@
+import { constants as sharedConstants } from '@0xproject/react-shared';
 import { ECSignature, Order, ZeroEx } from '0x.js';
 import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
@@ -253,7 +254,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
         ) {
             const didSignSuccessfully = await this._signTransactionAsync();
             if (didSignSuccessfully) {
-                const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+                const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
                 const eventLabel = `${this.props.tokenByAddress[debitToken.address].symbol}-${networkName}`;
                 ReactGA.event({
                     category: 'Portal',

packages/website/ts/components/inputs/allowance_toggle.tsx

@@ -1,3 +1,4 @@
+import { constants as sharedConstants } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Toggle from 'material-ui/Toggle';
@@ -76,7 +77,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
         if (!this._isAllowanceSet()) {
             newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
         }
-        const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+        const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
         const eventLabel = `${this.props.token.symbol}-${networkName}`;
         try {
             await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);

packages/website/ts/components/token_balances.tsx

@@ -1,5 +1,12 @@
 import { ZeroEx } from '0x.js';
-import { colors, Styles } from '@0xproject/react-shared';
+import {
+    colors,
+    constants as sharedConstants,
+    EtherscanLinkSuffixes,
+    Networks,
+    Styles,
+    utils as sharedUtils,
+} from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import DharmaLoanFrame from 'dharma-loan-frame';
 import * as _ from 'lodash';
@@ -27,8 +34,6 @@ import {
     BalanceErrs,
     BlockchainCallErrs,
     BlockchainErrs,
-    EtherscanLinkSuffixes,
-    Networks,
     ScreenWidths,
     Token,
     TokenByAddress,
@@ -117,7 +122,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         if (nextProps.userEtherBalance !== this.props.userEtherBalance) {
             if (this.state.isBalanceSpinnerVisible) {
                 const receivedAmount = nextProps.userEtherBalance.minus(this.props.userEtherBalance);
-                const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+                const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
                 this.props.dispatcher.showFlashMessage(`Received ${receivedAmount.toString(10)} ${networkName} Ether`);
             }
             this.setState({
@@ -357,17 +362,20 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
     }
     private _renderTokenRow(tokenColSpan: number, actionPaddingX: number, token: Token) {
         const tokenState = this.state.trackedTokenStateByAddress[token.address];
-        const tokenLink = utils.getEtherScanLinkIfExists(
+        const tokenLink = sharedUtils.getEtherScanLinkIfExists(
             token.address,
             this.props.networkId,
             EtherscanLinkSuffixes.Address,
         );
         const isMintable =
             (_.includes(configs.SYMBOLS_OF_MINTABLE_KOVAN_TOKENS, token.symbol) &&
-                this.props.networkId === constants.NETWORK_ID_BY_NAME[Networks.Kovan]) ||
+                this.props.networkId === sharedConstants.NETWORK_ID_BY_NAME[Networks.Kovan]) ||
             (_.includes(configs.SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS, token.symbol) &&
                 _.includes(
-                    [constants.NETWORK_ID_BY_NAME[Networks.Rinkeby], constants.NETWORK_ID_BY_NAME[Networks.Ropsten]],
+                    [
+                        sharedConstants.NETWORK_ID_BY_NAME[Networks.Rinkeby],
+                        sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten],
+                    ],
                     this.props.networkId,
                 ));
         return (
@@ -539,7 +547,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         }
     }
     private _renderDharmaLoanFrame() {
-        if (utils.isUserOnMobile()) {
+        if (sharedUtils.isUserOnMobile()) {
             return (
                 <h4 style={{ textAlign: 'center' }}>
                     We apologize -- Dharma loan requests are not available on mobile yet. Please try again through your

packages/website/ts/components/top_bar/provider_picker.tsx

@@ -1,3 +1,4 @@
+import { constants as sharedConstants } from '@0xproject/react-shared';
 import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
@@ -56,7 +57,7 @@ export class ProviderPicker extends React.Component<ProviderPickerProps, Provide
         return label;
     }
     private _renderNetwork() {
-        const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+        const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
         return (
             <div className="flex" style={{ marginTop: 1 }}>
                 <div className="relative" style={{ width: 14, paddingLeft: 14 }}>

packages/website/ts/components/top_bar/top_bar.tsx

@@ -1,3 +1,4 @@
+import { DocsInfo, DocsMenu } from '@0xproject/react-docs';
 import { colors, MenuSubsectionsBySection, NestedSidebarMenu, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
@@ -12,9 +13,8 @@ import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
 import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
 import { DropDown } from 'ts/components/ui/drop_down';
 import { Identicon } from 'ts/components/ui/identicon';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, DocsMenu, Key, ProviderType, WebsitePaths } from 'ts/types';
+import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 

packages/website/ts/components/trade_history/trade_history_item.tsx

@@ -1,5 +1,5 @@
 import { ZeroEx } from '0x.js';
-import { colors } from '@0xproject/react-shared';
+import { colors, EtherscanLinkSuffixes } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
@@ -8,7 +8,7 @@ import * as React from 'react';
 import * as ReactTooltip from 'react-tooltip';
 import { EtherScanIcon } from 'ts/components/ui/etherscan_icon';
 import { Party } from 'ts/components/ui/party';
-import { EtherscanLinkSuffixes, Fill, Token, TokenByAddress } from 'ts/types';
+import { Fill, Token, TokenByAddress } from 'ts/types';
 
 const PRECISION = 5;
 const IDENTICON_DIAMETER = 40;

packages/website/ts/components/ui/ethereum_address.tsx

@@ -1,7 +1,7 @@
+import { EtherscanLinkSuffixes } from '@0xproject/react-shared';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import { EtherScanIcon } from 'ts/components/ui/etherscan_icon';
-import { EtherscanLinkSuffixes } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
 interface EthereumAddressProps {

packages/website/ts/components/ui/etherscan_icon.tsx

@@ -1,8 +1,7 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
-import { EtherscanLinkSuffixes } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
 interface EtherScanIconProps {
@@ -12,7 +11,7 @@ interface EtherScanIconProps {
 }
 
 export const EtherScanIcon = (props: EtherScanIconProps) => {
-    const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
+    const etherscanLinkIfExists = sharedUtils.getEtherScanLinkIfExists(
         props.addressOrTxHash,
         props.networkId,
         EtherscanLinkSuffixes.Address,

packages/website/ts/components/ui/party.tsx

@@ -1,10 +1,9 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import { EthereumAddress } from 'ts/components/ui/ethereum_address';
 import { Identicon } from 'ts/components/ui/identicon';
-import { EtherscanLinkSuffixes } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
 const IMAGE_DIMENSION = 100;
@@ -43,7 +42,7 @@ export class Party extends React.Component<PartyProps, PartyState> {
             width: IMAGE_DIMENSION,
             height: IMAGE_DIMENSION,
         };
-        const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
+        const etherscanLinkIfExists = sharedUtils.getEtherScanLinkIfExists(
             this.props.address,
             this.props.networkId,
             EtherscanLinkSuffixes.Address,

packages/website/ts/containers/connect_documentation.ts

@@ -1,12 +1,12 @@
+import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
 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, Environments, SupportedDocJson, WebsitePaths } from 'ts/types';
+import { DocPackages, Environments, WebsitePaths } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
@@ -21,7 +21,7 @@ const connectDocSections = {
     installation: 'installation',
     httpClient: 'httpClient',
     webSocketOrderbookChannel: 'webSocketOrderbookChannel',
-    types: constants.TYPES_SECTION_NAME,
+    types: docConstants.TYPES_SECTION_NAME,
 };
 
 const docsInfoConfig: DocsInfoConfig = {

packages/website/ts/containers/smart_contracts_documentation.ts

@@ -1,19 +1,13 @@
+import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
+import { Networks } from '@0xproject/react-shared';
 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 {
+import { DocPackages, SmartContractDocSections as Sections, WebsitePaths } from 'ts/types';
-    DocPackages,
-    DocsInfoConfig,
-    Networks,
-    SmartContractDocSections as Sections,
-    SupportedDocJson,
-    WebsitePaths,
-} from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 
 /* tslint:disable:no-var-requires */

packages/website/ts/containers/zero_ex_js_documentation.ts

@@ -1,12 +1,12 @@
+import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
 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, Environments, SupportedDocJson, WebsitePaths } from 'ts/types';
+import { DocPackages, Environments, WebsitePaths } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
@@ -33,7 +33,7 @@ const zeroExJsDocSections = {
     etherToken: 'etherToken',
     proxy: 'proxy',
     orderWatcher: 'orderWatcher',
-    types: constants.TYPES_SECTION_NAME,
+    types: docConstants.TYPES_SECTION_NAME,
 };
 
 const docsInfoConfig: DocsInfoConfig = {

packages/website/ts/globals.d.ts

@@ -27,12 +27,6 @@ declare module 'find-versions' {
     export = findVersions;
 }
 
-// compare-version declarations
-declare function compareVersions(firstVersion: string, secondVersion: string): number;
-declare module 'compare-versions' {
-    export = compareVersions;
-}
-
 // semver-sort declarations
 declare module 'semver-sort' {
     const desc: (versions: string[]) => string[];
@@ -115,12 +109,6 @@ declare module 'blockies' {
     export = blockies;
 }
 
-// is-mobile declarations
-declare function isMobile(): boolean;
-declare module 'is-mobile' {
-    export = isMobile;
-}
-
 // web3-provider-engine declarations
 declare class Subprovider {}
 declare module 'web3-provider-engine/subproviders/subprovider' {

packages/website/ts/pages/documentation/doc_page.tsx

@@ -1,3 +1,4 @@
+import { DocAgnosticFormat, DocsInfo, Documentation, DoxityDocObj } from '@0xproject/react-docs';
 import { MenuSubsectionsBySection } from '@0xproject/react-shared';
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
@@ -5,10 +6,8 @@ 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 } from 'ts/types';
+import { DocPackages, Environments } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { docUtils } from 'ts/utils/doc_utils';

packages/website/ts/types.ts

@@ -225,11 +225,6 @@ export enum AlertTypes {
     SUCCESS,
 }
 
-export enum EtherscanLinkSuffixes {
-    Address = 'address',
-    Tx = 'tx',
-}
-
 export enum BlockchainErrs {
     AContractNotDeployedOnNetwork = 'A_CONTRACT_NOT_DEPLOYED_ON_NETWORK',
     DisconnectedFromEthereumNode = 'DISCONNECTED_FROM_ETHEREUM_NODE',
@@ -243,24 +238,6 @@ export enum BlockchainCallErrs {
     TokenAddressIsInvalid = 'TOKEN_ADDRESS_IS_INVALID',
 }
 
-// Exception: We don't make the values uppercase because these KindString's need to
-// match up those returned by TypeDoc
-export enum KindString {
-    Constructor = 'Constructor',
-    Property = 'Property',
-    Method = 'Method',
-    Interface = 'Interface',
-    TypeAlias = 'Type alias',
-    Variable = 'Variable',
-    Function = 'Function',
-    Enumeration = 'Enumeration',
-}
-
-export interface EnumValue {
-    name: string;
-    defaultValue?: string;
-}
-
 export enum Environments {
     DEVELOPMENT,
     PRODUCTION,
@@ -268,170 +245,6 @@ export enum Environments {
 
 export type ContractInstance = any; // TODO: add type definition for Contract
 
-export interface TypeDocType {
-    type: TypeDocTypes;
-    value: string;
-    name: string;
-    types: TypeDocType[];
-    typeArguments?: TypeDocType[];
-    declaration: TypeDocNode;
-    elementType?: TypeDocType;
-}
-
-export interface TypeDocFlags {
-    isStatic?: boolean;
-    isOptional?: boolean;
-    isPublic?: boolean;
-}
-
-export interface TypeDocGroup {
-    title: string;
-    children: number[];
-}
-
-export interface TypeDocNode {
-    id?: number;
-    name?: string;
-    kind?: string;
-    defaultValue?: string;
-    kindString?: string;
-    type?: TypeDocType;
-    fileName?: string;
-    line?: number;
-    comment?: TypeDocNode;
-    text?: string;
-    shortText?: string;
-    returns?: string;
-    declaration: TypeDocNode;
-    flags?: TypeDocFlags;
-    indexSignature?: TypeDocNode | TypeDocNode[]; // TypeDocNode in TypeDoc <V0.9.0, TypeDocNode[] in >V0.9.0
-    signatures?: TypeDocNode[];
-    parameters?: TypeDocNode[];
-    typeParameter?: TypeDocNode[];
-    sources?: TypeDocNode[];
-    children?: TypeDocNode[];
-    groups?: TypeDocGroup[];
-}
-
-export enum TypeDocTypes {
-    Intrinsic = 'intrinsic',
-    Reference = 'reference',
-    Array = 'array',
-    StringLiteral = 'stringLiteral',
-    Reflection = 'reflection',
-    Union = 'union',
-    TypeParameter = 'typeParameter',
-    Intersection = 'intersection',
-    Unknown = 'unknown',
-}
-
-export interface DocAgnosticFormat {
-    [sectionName: string]: DocSection;
-}
-
-export interface DocSection {
-    comment: string;
-    constructors: Array<TypescriptMethod | SolidityMethod>;
-    methods: Array<TypescriptMethod | SolidityMethod>;
-    properties: Property[];
-    types: CustomType[];
-    events?: Event[];
-}
-
-export interface Event {
-    name: string;
-    eventArgs: EventArg[];
-}
-
-export interface EventArg {
-    isIndexed: boolean;
-    name: string;
-    type: Type;
-}
-
-export interface Property {
-    name: string;
-    type: Type;
-    source?: Source;
-    comment?: string;
-}
-
-export interface BaseMethod {
-    isConstructor: boolean;
-    name: string;
-    returnComment?: string | undefined;
-    callPath: string;
-    parameters: Parameter[];
-    returnType: Type;
-    comment?: string;
-}
-
-export interface TypescriptMethod extends BaseMethod {
-    source?: Source;
-    isStatic?: boolean;
-    typeParameter?: TypeParameter;
-}
-
-export interface SolidityMethod extends BaseMethod {
-    isConstant?: boolean;
-    isPayable?: boolean;
-}
-
-export interface Source {
-    fileName: string;
-    line: number;
-}
-
-export interface Parameter {
-    name: string;
-    comment: string;
-    isOptional: boolean;
-    type: Type;
-}
-
-export interface TypeParameter {
-    name: string;
-    type: Type;
-}
-
-export interface Type {
-    name: string;
-    typeDocType: TypeDocTypes;
-    value?: string;
-    typeArguments?: Type[];
-    elementType?: ElementType;
-    types?: Type[];
-    method?: TypescriptMethod;
-}
-
-export interface ElementType {
-    name: string;
-    typeDocType: TypeDocTypes;
-}
-
-export interface IndexSignature {
-    keyName: string;
-    keyType: Type;
-    valueName: string;
-}
-
-export interface CustomType {
-    name: string;
-    kindString: string;
-    type?: Type;
-    method?: TypescriptMethod;
-    indexSignature?: IndexSignature;
-    defaultValue?: string;
-    comment?: string;
-    children?: CustomTypeChild[];
-}
-
-export interface CustomTypeChild {
-    name: string;
-    type?: Type;
-    defaultValue?: string;
-}
-
 export interface FAQQuestion {
     prompt: string;
     answer: React.ReactNode;
@@ -500,10 +313,6 @@ export interface BlogPost {
     url: string;
 }
 
-export interface TypeDefinitionByName {
-    [typeName: string]: CustomType;
-}
-
 export interface Article {
     section: string;
     title: string;
@@ -527,40 +336,6 @@ export enum TokenVisibility {
     TRACKED = 'TRACKED',
 }
 
-export interface DoxityDocObj {
-    [contractName: string]: DoxityContractObj;
-}
-
-export interface DoxityContractObj {
-    title: string;
-    fileName: string;
-    name: string;
-    abiDocs: DoxityAbiDoc[];
-}
-
-export interface DoxityAbiDoc {
-    constant: boolean;
-    inputs: DoxityInput[];
-    name: string;
-    outputs: DoxityOutput[];
-    payable: boolean;
-    type: string;
-    details?: string;
-    return?: string;
-}
-
-export interface DoxityOutput {
-    name: string;
-    type: string;
-}
-
-export interface DoxityInput {
-    name: string;
-    type: string;
-    description: string;
-    indexed?: boolean;
-}
-
 export interface VersionToFileName {
     [version: string]: string;
 }
@@ -570,29 +345,6 @@ export enum Docs {
     SmartContracts,
 }
 
-export interface ContractAddresses {
-    [version: string]: {
-        [network: string]: AddressByContractName;
-    };
-}
-
-export interface AddressByContractName {
-    [contractName: string]: string;
-}
-
-export enum Networks {
-    Mainnet = 'Mainnet',
-    Kovan = 'Kovan',
-    Ropsten = 'Ropsten',
-    Rinkeby = 'Rinkeby',
-}
-
-export enum AbiTypes {
-    Constructor = 'constructor',
-    Function = 'function',
-    Event = 'event',
-}
-
 export enum WebsitePaths {
     Portal = '/portal',
     Wiki = '/wiki',
@@ -605,49 +357,12 @@ export enum WebsitePaths {
     Connect = '/docs/connect',
 }
 
-export interface DocsMenu {
-    [sectionName: string]: string[];
-}
-
-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;
-    menu: DocsMenu;
-    sections: SectionsMap;
-    sectionNameToMarkdown: { [sectionName: string]: string };
-    visibleConstructors: string[];
-    subPackageName?: string;
-    publicTypes?: string[];
-    sectionNameToModulePath?: { [sectionName: string]: string[] };
-    menuSubsectionToVersionWhenIntroduced?: { [sectionName: string]: string };
-    contractsByVersionByNetworkId?: ContractsByVersionByNetworkId;
-}
-
 export interface TimestampMsRange {
     startTimestampMs: number;
     endTimestampMs: number;

packages/website/ts/utils/configs.ts

@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import { ContractAddresses, Environments, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types';
+import { Environments, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types';
 
 const BASE_URL = window.location.origin;
 const isDevelopment = _.includes(

packages/website/ts/utils/constants.ts

@@ -1,5 +1,5 @@
+import { Networks } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
-import { Networks } from 'ts/types';
 
 export const constants = {
     DECIMAL_PLACES_ETH: 18,
@@ -21,18 +21,6 @@ export const constants = {
     NETWORK_ID_MAINNET: 1,
     NETWORK_ID_KOVAN: 42,
     NETWORK_ID_TESTRPC: 50,
-    NETWORK_NAME_BY_ID: {
-        1: Networks.Mainnet,
-        3: Networks.Ropsten,
-        4: Networks.Rinkeby,
-        42: Networks.Kovan,
-    } as { [symbol: number]: string },
-    NETWORK_ID_BY_NAME: {
-        [Networks.Mainnet]: 1,
-        [Networks.Ropsten]: 3,
-        [Networks.Rinkeby]: 4,
-        [Networks.Kovan]: 42,
-    } as { [networkName: string]: number },
     NULL_ADDRESS: '0x0000000000000000000000000000000000000000',
     PROVIDER_NAME_LEDGER: 'Ledger',
     PROVIDER_NAME_METAMASK: 'Metamask',
@@ -45,7 +33,6 @@ export const constants = {
     UNAVAILABLE_STATUS: 503,
     TAKER_FEE: new BigNumber(0),
     TESTNET_NAME: 'Kovan',
-    TYPES_SECTION_NAME: 'types',
     PROJECT_URL_ETHFINEX: 'https://www.bitfinex.com/ethfinex',
     PROJECT_URL_AMADEUS: 'http://amadeusrelay.org',
     PROJECT_URL_DDEX: 'https://ddex.io',
@@ -70,7 +57,6 @@ export const constants = {
     PROJECT_URL_OPEN_ANX: 'https://www.openanx.org',
     PROJECT_URL_IDT: 'https://kinalpha.com',
     URL_ANGELLIST: 'https://angel.co/0xproject/jobs',
-    URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
     URL_BITLY_API: 'https://api-ssl.bitly.com',
     URL_BLOG: 'https://blog.0xproject.com/latest',
     URL_DISCOURSE_FORUM: 'https://forum.0xproject.com',
@@ -85,11 +71,6 @@ export const constants = {
     URL_REDDIT: 'https://reddit.com/r/0xproject',
     URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md',
     URL_TWITTER: 'https://twitter.com/0xproject',
-    URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
-    URL_WEB3_DECODED_LOG_ENTRY_EVENT:
-        'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',
-    URL_WEB3_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L127',
-    URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150',
     URL_WETH_IO: 'https://weth.io/',
     URL_ZEROEX_CHAT: 'https://chat.0xproject.com',
 };

packages/website/ts/utils/doc_utils.ts

@@ -1,6 +1,7 @@
+import { DoxityDocObj, TypeDocNode } from '@0xproject/react-docs';
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
-import { DoxityDocObj, S3FileObject, TypeDocNode, VersionToFileName } from 'ts/types';
+import { S3FileObject, VersionToFileName } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 import convert = require('xml-js');
 

packages/website/ts/utils/utils.ts

@@ -1,19 +1,10 @@
 import { ECSignature, ExchangeContractErrs, ZeroEx, ZeroExError } from '0x.js';
+import { constants as sharedConstants, EtherscanLinkSuffixes, Networks } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import deepEqual = require('deep-equal');
-import isMobile = require('is-mobile');
 import * as _ from 'lodash';
 import * as moment from 'moment';
-import {
+import { Order, ScreenWidths, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
-    EtherscanLinkSuffixes,
-    Networks,
-    Order,
-    ScreenWidths,
-    Side,
-    SideToAssetToken,
-    Token,
-    TokenByAddress,
-} from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import * as u2f from 'ts/vendor/u2f_api';
@@ -139,18 +130,6 @@ export const utils = {
             return ScreenWidths.Sm;
         }
     },
-    isUserOnMobile(): boolean {
-        const isUserOnMobile = isMobile();
-        return isUserOnMobile;
-    },
-    getEtherScanLinkIfExists(addressOrTxHash: string, networkId: number, suffix: EtherscanLinkSuffixes): string {
-        const networkName = constants.NETWORK_NAME_BY_ID[networkId];
-        if (_.isUndefined(networkName)) {
-            return undefined;
-        }
-        const etherScanPrefix = networkName === Networks.Mainnet ? '' : `${networkName.toLowerCase()}.`;
-        return `https://${etherScanPrefix}etherscan.io/${suffix}/${addressOrTxHash}`;
-    },
     async isU2FSupportedAsync(): Promise<boolean> {
         const w = window as any;
         return new Promise((resolve: (isSupported: boolean) => void) => {
@@ -275,9 +254,9 @@ export const utils = {
     isTestNetwork(networkId: number): boolean {
         const isTestNetwork = _.includes(
             [
-                constants.NETWORK_ID_BY_NAME[Networks.Kovan],
+                sharedConstants.NETWORK_ID_BY_NAME[Networks.Kovan],
-                constants.NETWORK_ID_BY_NAME[Networks.Rinkeby],
+                sharedConstants.NETWORK_ID_BY_NAME[Networks.Rinkeby],
-                constants.NETWORK_ID_BY_NAME[Networks.Ropsten],
+                sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten],
             ],
             networkId,
         );