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

15 files changed, 45 insertions, 99 deletions

diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index 7353a8767..e71a0f7d1 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/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';
 
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index 5836fec0e..8a242cd33 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/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';
diff --git a/packages/website/ts/components/dropdowns/network_drop_down.tsx b/packages/website/ts/components/dropdowns/network_drop_down.tsx
index 28ec28ed5..b569807dd 100644
--- a/packages/website/ts/components/dropdowns/network_drop_down.tsx
+++ b/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 }}>
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index 698b30815..7ac5d5c9c 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/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 {
-    EtherscanLinkSuffixes,
-    OutdatedWrappedEtherByNetworkId,
-    Side,
-    Token,
-    TokenByAddress,
-    TokenState,
-} from 'ts/types';
+import { 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,
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index d7eecbcd3..e9127288d 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/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);
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx
index e14991993..ad78357f0 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/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',
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index a2e75dfed..7fe303cf4 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/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);
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 9065ba2d8..7e7596fd7 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/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
diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx
index 6373d4900..c837ed60e 100644
--- a/packages/website/ts/components/top_bar/provider_picker.tsx
+++ b/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 }}>
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 58b699b77..0161da2d3 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/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';
 
diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx
index 3bab29691..6b8d7c7b5 100644
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/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;
diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx
deleted file mode 100644
index 3e1c545be..000000000
--- a/packages/website/ts/components/ui/badge.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Styles } from '@0xproject/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-const styles: Styles = {
-    badge: {
-        width: 50,
-        fontSize: 11,
-        height: 10,
-        borderRadius: 5,
-        lineHeight: 0.9,
-        fontFamily: 'Roboto Mono',
-        marginLeft: 3,
-        marginRight: 3,
-    },
-};
-
-interface BadgeProps {
-    title: string;
-    backgroundColor: string;
-}
-
-interface BadgeState {
-    isHovering: boolean;
-}
-
-export class Badge extends React.Component<BadgeProps, BadgeState> {
-    constructor(props: BadgeProps) {
-        super(props);
-        this.state = {
-            isHovering: false,
-        };
-    }
-    public render() {
-        const badgeStyle = {
-            ...styles.badge,
-            backgroundColor: this.props.backgroundColor,
-            opacity: this.state.isHovering ? 0.7 : 1,
-        };
-        return (
-            <div
-                className="p1 center"
-                style={badgeStyle}
-                onMouseOver={this._setHoverState.bind(this, true)}
-                onMouseOut={this._setHoverState.bind(this, false)}
-            >
-                {this.props.title}
-            </div>
-        );
-    }
-    private _setHoverState(isHovering: boolean) {
-        this.setState({
-            isHovering,
-        });
-    }
-}
diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx
index b75d97e39..f449a8e75 100644
--- a/packages/website/ts/components/ui/ethereum_address.tsx
+++ b/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 {
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index e7fc51070..040b84a0b 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/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,
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index e120523fd..3d94903d1 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/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,