import { colors, Networks } from '@0x/react-shared'; 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 { 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(): React.ReactNode { const dialogActions = [ , ]; const hasWalletAddress = this.props.userAddress !== ''; return (
{this._renderExplanation(hasWalletAddress)}
); } private _getTitle(hasWalletAddress: boolean): string { 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 if (this.props.blockchainErr === BlockchainErrs.DefaultTokensNotInTokenRegistry) { return 'Default TokenRegistry tokens missing'; } else { return 'Unexpected error'; } } private _renderExplanation(hasWalletAddress: boolean): React.ReactNode { 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 if (this.props.blockchainErr === BlockchainErrs.DefaultTokensNotInTokenRegistry) { return this._renderDefaultTokenNotInTokenRegistry(); } else { return this._renderUnexpectedErrorExplanation(); } } private _renderDisconnectedFromNode(): React.ReactNode { 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 _renderDefaultTokenNotInTokenRegistry(): React.ReactNode { return (
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).
); } private _renderUnexpectedErrorExplanation(): React.ReactNode { return
We encountered an unexpected error. Please try refreshing the page.
; } private _renderNoWalletFoundExplanation(): React.ReactNode { 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 `parity ui` or `parity --chain kovan ui` in order to connect to mainnet or Kovan respectively.
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(): React.ReactNode { 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{' '} {Networks.Kovan} testnet (network Id: {constants.NETWORK_ID_KOVAN}) 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 `parity ui` or `parity --chain Kovan ui` in order to connect to mainnet \ or Kovan respectively.
); } }