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} from 'ts/types'; import {colors} from 'ts/utils/colors'; import {configs} from 'ts/utils/configs'; import {constants} from 'ts/utils/constants'; interface BlockchainErrDialogProps { blockchain: Blockchain; blockchainErr: BlockchainErrs; isOpen: boolean; userAddress: string; toggleDialogFn: (isOpen: boolean) => void; networkId: number; } export class BlockchainErrDialog extends React.Component { public render() { const dialogActions = [ , ]; const hasWalletAddress = this.props.userAddress !== ''; return (
{this.renderExplanation(hasWalletAddress)}
); } private getTitle(hasWalletAddress: boolean) { if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) { return '0x smart contracts not found'; } else if (!hasWalletAddress) { return 'Enable wallet communication'; } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) { return 'Disconnected from Ethereum network'; } else { return 'Unexpected error'; } } private renderExplanation(hasWalletAddress: boolean) { if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) { return this.renderContractsNotDeployedExplanation(); } else if (!hasWalletAddress) { return this.renderNoWalletFoundExplanation(); } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) { return this.renderDisconnectedFromNode(); } else { return this.renderUnexpectedErrorExplanation(); } } private renderDisconnectedFromNode() { return (
You were disconnected from the backing Ethereum node. {' '}If using Metamask or Mist try refreshing {' '}the page. If using a locally hosted Ethereum node, make sure it's still running.
); } private renderUnexpectedErrorExplanation() { return (
We encountered an unexpected error. Please try refreshing the page.
); } private renderNoWalletFoundExplanation() { return (
We were unable to access an Ethereum wallet you control. In order to interact {' '}with the 0x portal dApp, we need a way to interact with one of your Ethereum wallets. {' '}There are two easy ways you can enable us to do that:

1. Metamask chrome extension

You can install the{' '} Metamask Chrome extension Ethereum wallet. Once installed and set up, refresh this page.
Note: {' '}If you already have Metamask installed, make sure it is unlocked.

Parity Signer

The Parity Signer Chrome extension{' '}lets you connect to a locally running Parity node. Make sure you have started your local Parity node with{' '} {configs.IS_MAINNET_ENABLED && '`parity ui` or'} `parity --chain kovan ui`{' '} in order to connect to {configs.IS_MAINNET_ENABLED ? 'mainnet or Kovan respectively.' : 'Kovan.'}
Note: {' '}If you have done one of the above steps and are still seeing this message, {' '}we might still be unable to retrieve an Ethereum address by calling `web3.eth.accounts`. {' '}Make sure you have created at least one Ethereum address.
); } private renderContractsNotDeployedExplanation() { return (
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}) {configs.IS_MAINNET_ENABLED ? ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).` : `.` }

Metamask

If you are using{' '} Metamask , you can switch networks in the top left corner of the extension popover.

Parity Signer

If using the Parity Signer Chrome extension, make sure to start your local Parity node with{' '} {configs.IS_MAINNET_ENABLED ? '`parity ui` or `parity --chain Kovan ui` in order to connect to mainnet \ or Kovan respectively.' : '`parity --chain kovan ui` in order to connect to Kovan.' }
); } }