Add missing entries for Ropsten and Rinkeby testnets, added Ropsten to Ledger network dropdown

6 files changed, 32 insertions, 23 deletions

diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 13c997ba6..543d5d8ca 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -112,7 +112,7 @@ export class Blockchain {
             // injected into their browser.
             provider = new ProviderEngine();
             provider.addProvider(new FilterSubprovider());
-            const networkId = configs.IS_MAINNET_ENABLED ? constants.NETWORK_ID_MAINNET : constants.NETWORK_ID_TESTNET;
+            const networkId = configs.IS_MAINNET_ENABLED ? constants.NETWORK_ID_MAINNET : constants.NETWORK_ID_KOVAN;
             provider.addProvider(new RedundantRPCSubprovider(configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId]));
             provider.start();
         }
@@ -710,7 +710,7 @@ export class Blockchain {
         const provider = await Blockchain._getProviderAsync(injectedWeb3, networkIdIfExists);
         this.networkId = !_.isUndefined(networkIdIfExists)
             ? networkIdIfExists
-            : configs.IS_MAINNET_ENABLED ? constants.NETWORK_ID_MAINNET : constants.NETWORK_ID_TESTNET;
+            : configs.IS_MAINNET_ENABLED ? constants.NETWORK_ID_MAINNET : constants.NETWORK_ID_KOVAN;
         this._dispatcher.updateNetworkId(this.networkId);
         const zeroExConfigs = {
             networkId: this.networkId,
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index f555ca6b1..3908d987e 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -3,7 +3,7 @@ import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
-import { BlockchainErrs } from 'ts/types';
+import { BlockchainErrs, Networks } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
@@ -129,7 +129,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
                 <div>
                     The 0x smart contracts are not deployed on the Ethereum network you are currently connected to
                     (network Id: {this.props.networkId}). In order to use the 0x portal dApp, please connect to the{' '}
-                    {constants.TESTNET_NAME} testnet (network Id: {constants.NETWORK_ID_TESTNET})
+                    {Networks.kovan} testnet (network Id: {constants.NETWORK_ID_KOVAN})
                     {configs.IS_MAINNET_ENABLED
                         ? ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).`
                         : `.`}
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index 7dc1e2620..510025774 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -10,7 +10,7 @@ import { Blockchain } from 'ts/blockchain';
 import { NetworkDropDown } from 'ts/components/dropdowns/network_drop_down';
 import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { ProviderType } from 'ts/types';
+import { ProviderType, Networks } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
@@ -97,7 +97,11 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
                     <NetworkDropDown
                         updateSelectedNetwork={this._onSelectedNetworkUpdated.bind(this)}
                         selectedNetworkId={this.state.preferredNetworkId}
-                        avialableNetworkIds={[1, 42]}
+                        avialableNetworkIds={[
+                            constants.NETWORK_ID_BY_NAME[Networks.mainnet],
+                            constants.NETWORK_ID_BY_NAME[Networks.kovan],
+                            constants.NETWORK_ID_BY_NAME[Networks.ropsten],
+                        ]}
                     />
                 </div>
                 <div className="center pb3">
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 5b450c772..ecafe5432 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -27,6 +27,7 @@ import {
     BlockchainCallErrs,
     BlockchainErrs,
     EtherscanLinkSuffixes,
+    Networks,
     ScreenWidths,
     Styles,
     Token,
@@ -155,13 +156,13 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                 onTouchTap={this._onDharmaDialogToggle.bind(this, false)}
             />,
         ];
-        const isTestNetwork = this.props.networkId === constants.NETWORK_ID_TESTNET;
+        const isKovanTestNetwork = this.props.networkId === constants.NETWORK_ID_KOVAN;
         const dharmaButtonColumnStyle = {
             paddingLeft: 3,
-            display: isTestNetwork ? 'table-cell' : 'none',
+            display: isKovanTestNetwork ? 'table-cell' : 'none',
         };
         const stubColumnStyle = {
-            display: isTestNetwork ? 'none' : 'table-cell',
+            display: isKovanTestNetwork ? 'none' : 'table-cell',
         };
         const allTokenRowHeight = _.size(this.props.tokenByAddress) * TOKEN_TABLE_ROW_HEIGHT;
         const tokenTableHeight =
@@ -180,10 +181,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                                   smart contract so you can start trading that token.';
         return (
             <div className="lg-px4 md-px4 sm-px1 pb2">
-                <h3>{isTestNetwork ? 'Test ether' : 'Ether'}</h3>
+                <h3>{isKovanTestNetwork ? 'Test ether' : 'Ether'}</h3>
                 <Divider />
                 <div className="pt2 pb2">
-                    {isTestNetwork
+                    {isKovanTestNetwork
                         ? 'In order to try out the 0x Portal Dapp, request some test ether to pay for \
                         gas costs. It might take a bit of time for the test ether to show up.'
                         : 'Ether must be converted to Ether Tokens in order to be tradable via 0x. \
@@ -195,12 +196,12 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                             <TableHeaderColumn>Currency</TableHeaderColumn>
                             <TableHeaderColumn>Balance</TableHeaderColumn>
                             <TableRowColumn className="sm-hide xs-hide" style={stubColumnStyle} />
-                            {isTestNetwork && (
+                            {isKovanTestNetwork && (
                                 <TableHeaderColumn style={{ paddingLeft: 3 }}>
                                     {isSmallScreen ? 'Faucet' : 'Request from faucet'}
                                 </TableHeaderColumn>
                             )}
-                            {isTestNetwork && (
+                            {isKovanTestNetwork && (
                                 <TableHeaderColumn style={dharmaButtonColumnStyle}>
                                     {isSmallScreen ? 'Loan' : 'Request Dharma loan'}
                                     <HelpTooltip style={{ paddingLeft: 4 }} explanation={dharmaLoanExplanation} />
@@ -222,7 +223,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                                 )}
                             </TableRowColumn>
                             <TableRowColumn className="sm-hide xs-hide" style={stubColumnStyle} />
-                            {isTestNetwork && (
+                            {isKovanTestNetwork && (
                                 <TableRowColumn style={{ paddingLeft: 3 }}>
                                     <LifeCycleRaisedButton
                                         labelReady="Request"
@@ -232,7 +233,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                                     />
                                 </TableRowColumn>
                             )}
-                            {isTestNetwork && (
+                            {isKovanTestNetwork && (
                                 <TableRowColumn style={dharmaButtonColumnStyle}>
                                     <RaisedButton
                                         label="Request"
@@ -246,7 +247,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                 </Table>
                 <div className="clearfix" style={{ paddingBottom: 1 }}>
                     <div className="col col-10">
-                        <h3 className="pt2">{isTestNetwork ? 'Test tokens' : 'Tokens'}</h3>
+                        <h3 className="pt2">{isKovanTestNetwork ? 'Test tokens' : 'Tokens'}</h3>
                     </div>
                     <div className="col col-1 pt3 align-right">
                         <FloatingActionButton mini={true} zDepth={0} onClick={this._onAddTokenClicked.bind(this)}>
@@ -261,7 +262,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                 </div>
                 <Divider />
                 <div className="pt2 pb2">
-                    {isTestNetwork
+                    {isKovanTestNetwork
                         ? "Mint some test tokens you'd like to use to generate or fill an order using 0x."
                         : "Set trading permissions for a token you'd like to start trading."}
                 </div>
@@ -391,7 +392,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                         />
                     )}
                     {token.symbol === ZRX_TOKEN_SYMBOL &&
-                        this.props.networkId === constants.NETWORK_ID_TESTNET && (
+                        this.props.networkId === constants.NETWORK_ID_KOVAN && (
                             <LifeCycleRaisedButton
                                 labelReady="Request"
                                 labelLoading="Sending..."
@@ -477,9 +478,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
             case BalanceErrs.incorrectNetworkForFaucet:
                 return (
                     <div>
-                        Our faucet can only send test Ether to addresses on the {constants.TESTNET_NAME} testnet
-                        (networkId {constants.NETWORK_ID_TESTNET}). Please make sure you are connected to the{' '}
-                        {constants.TESTNET_NAME} testnet and try requesting ether again.
+                        Our faucet can only send test Ether to addresses on the {Networks.kovan} testnet (networkId{' '}
+                        {constants.NETWORK_ID_KOVAN}). Please make sure you are connected to the {Networks.kovan}{' '}
+                        testnet and try requesting ether again.
                     </div>
                 );
 
@@ -568,7 +569,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
 
         // If on another network other then the testnet our faucet serves test ether
         // from, we must show user an error message
-        if (this.props.blockchain.networkId !== constants.NETWORK_ID_TESTNET) {
+        if (this.props.blockchain.networkId !== constants.NETWORK_ID_KOVAN) {
             this.setState({
                 errorType: BalanceErrs.incorrectNetworkForFaucet,
             });
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 3d37a89ab..1e46be0be 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -120,6 +120,8 @@ export const configs = {
     PUBLIC_NODE_URLS_BY_NETWORK_ID: {
         [1]: [`https://mainnet.infura.io/${INFURA_API_KEY}`, 'https://mainnet.0xproject.com'],
         [42]: [`https://kovan.infura.io/${INFURA_API_KEY}`, 'https://kovan.0xproject.com'],
+        [3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`],
+        [4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`],
     } as PublicNodeUrlsByNetworkId,
     SHOULD_DEPRECATE_OLD_WETH_TOKEN: true,
     SYMBOLS_OF_MINTABLE_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'],
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index dded82114..4d6cb06c9 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -10,6 +10,8 @@ export const constants = {
         1: 4145578,
         42: 3117574,
         50: 0,
+        3: 1719261,
+        4: 1570919,
     } as { [networkId: number]: number },
     HOME_SCROLL_DURATION_MS: 500,
     HTTP_NO_CONTENT_STATUS_CODE: 204,
@@ -19,7 +21,7 @@ export const constants = {
     MAINNET_NAME: 'Main network',
     MINT_AMOUNT: new BigNumber('100000000000000000000'),
     NETWORK_ID_MAINNET: 1,
-    NETWORK_ID_TESTNET: 42,
+    NETWORK_ID_KOVAN: 42,
     NETWORK_ID_TESTRPC: 50,
     NETWORK_NAME_BY_ID: {
         1: Networks.mainnet,