Add error popover if TokenRegistry on network user is browsing on don't include the requisite default tokens for 0x Portal to function

packages/website/ts/blockchain.ts

@@ -544,6 +544,22 @@ export class Blockchain {
             ? {}
             : trackedTokenStorage.getTrackedTokensByAddress(this._userAddressIfExists, this.networkId);
         const tokenRegistryTokens = _.values(tokenRegistryTokensByAddress);
+        const tokenRegistryTokenSymbols = _.map(tokenRegistryTokens, t => t.symbol);
+        const defaultTrackedTokensInRegistry = _.intersection(
+            tokenRegistryTokenSymbols,
+            configs.DEFAULT_TRACKED_TOKEN_SYMBOLS,
+        );
+        if (defaultTrackedTokensInRegistry.length !== configs.DEFAULT_TRACKED_TOKEN_SYMBOLS.length) {
+            this._dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+            this._dispatcher.encounteredBlockchainError(BlockchainErrs.DefaultTokensNotInTokenRegistry);
+            const err = new Error(
+                `Default tracked tokens (${JSON.stringify(
+                    configs.DEFAULT_TRACKED_TOKEN_SYMBOLS,
+                )}) not found in tokenRegistry: ${JSON.stringify(tokenRegistryTokens)}`,
+            );
+            await errorReporter.reportAsync(err);
+            return;
+        }
         if (_.isEmpty(trackedTokensByAddress)) {
             _.each(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, symbol => {
                 const token = _.find(tokenRegistryTokens, t => t.symbol === symbol);

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

@@ -52,6 +52,8 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
             return 'Enable wallet communication';
         } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
             return 'Disconnected from Ethereum network';
+        } else if (this.props.blockchainErr === BlockchainErrs.DefaultTokensNotInTokenRegistry) {
+            return 'Default TokenRegistry tokens missing';
         } else {
             return 'Unexpected error';
         }
@@ -63,6 +65,8 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
             return this._renderNoWalletFoundExplanation();
         } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
             return this._renderDisconnectedFromNode();
+        } else if (this.props.blockchainErr === BlockchainErrs.DefaultTokensNotInTokenRegistry) {
+            return this._renderDefaultTokenNotInTokenRegistry();
         } else {
             return this._renderUnexpectedErrorExplanation();
         }
@@ -82,6 +86,16 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
             </div>
         );
     }
+    private _renderDefaultTokenNotInTokenRegistry() {
+        return (
+            <div>
+                The TokenRegistry deployed on your network does not contain the needed default tokens for 0x Portal to
+                operate. Please try one of the supported networks (Mainnet, Kovan, Ropsten, Rinkeby). If on a local
+                Testnet, make sure the TokenRegistry contract is deployed and loaded with some default tokens (i.e WETH
+                & ZRX).
+            </div>
+        );
+    }
     private _renderUnexpectedErrorExplanation() {
         return <div>We encountered an unexpected error. Please try refreshing the page.</div>;
     }

packages/website/ts/types.ts

@@ -223,6 +223,7 @@ export enum AlertTypes {
 export enum BlockchainErrs {
     AContractNotDeployedOnNetwork = 'A_CONTRACT_NOT_DEPLOYED_ON_NETWORK',
     DisconnectedFromEthereumNode = 'DISCONNECTED_FROM_ETHEREUM_NODE',
+    DefaultTokensNotInTokenRegistry = 'DEFAULT_TOKENS_NOT_IN_TOKEN_REGISTRY',
     NoError = 'NO_ERROR',
 }