diff options
Diffstat (limited to 'packages/website/ts/components/dialogs/blockchain_err_dialog.tsx')
| -rw-r--r-- | packages/website/ts/components/dialogs/blockchain_err_dialog.tsx | 166 |
1 files changed, 0 insertions, 166 deletions
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx deleted file mode 100644 index 1c47903db..000000000 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ /dev/null @@ -1,166 +0,0 @@ -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<BlockchainErrDialogProps, undefined> { - public render(): React.ReactNode { - const dialogActions = [ - <FlatButton - key="blockchainErrOk" - label="Ok" - primary={true} - onClick={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)} - />, - ]; - - const hasWalletAddress = this.props.userAddress !== ''; - return ( - <Dialog - title={this._getTitle(hasWalletAddress)} - titleStyle={{ fontWeight: 100 }} - actions={dialogActions} - open={this.props.isOpen} - contentStyle={{ width: 400 }} - onRequestClose={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)} - autoScrollBodyContent={true} - > - <div className="pt2" style={{ color: colors.grey700 }}> - {this._renderExplanation(hasWalletAddress)} - </div> - </Dialog> - ); - } - 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 ( - <div> - You were disconnected from the backing Ethereum node. If using{' '} - <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank"> - Metamask - </a>{' '} - or{' '} - <a href={constants.URL_MIST_DOWNLOAD} target="_blank"> - Mist - </a>{' '} - try refreshing the page. If using a locally hosted Ethereum node, make sure it's still running. - </div> - ); - } - private _renderDefaultTokenNotInTokenRegistry(): React.ReactNode { - 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(): React.ReactNode { - return <div>We encountered an unexpected error. Please try refreshing the page.</div>; - } - private _renderNoWalletFoundExplanation(): React.ReactNode { - return ( - <div> - <div> - 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: - </div> - <h4>1. Metamask chrome extension</h4> - <div> - You can install the{' '} - <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank"> - Metamask - </a>{' '} - Chrome extension Ethereum wallet. Once installed and set up, refresh this page. - <div className="pt1"> - <span className="bold">Note:</span> If you already have Metamask installed, make sure it is - unlocked. - </div> - </div> - <h4>Parity Signer</h4> - <div> - The{' '} - <a href={constants.URL_PARITY_CHROME_STORE} target="_blank"> - Parity Signer Chrome extension - </a>{' '} - 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. - </div> - <div className="pt2"> - <span className="bold">Note:</span> 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. - </div> - </div> - ); - } - private _renderContractsNotDeployedExplanation(): React.ReactNode { - return ( - <div> - <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{' '} - {Networks.Kovan} testnet (network Id: {constants.NETWORK_ID_KOVAN}) or ${constants.MAINNET_NAME}{' '} - (network Id: ${constants.NETWORK_ID_MAINNET}). - </div> - <h4>Metamask</h4> - <div> - If you are using{' '} - <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank"> - Metamask - </a> - , you can switch networks in the top left corner of the extension popover. - </div> - <h4>Parity Signer</h4> - <div> - If using the{' '} - <a href={constants.URL_PARITY_CHROME_STORE} target="_blank"> - Parity Signer Chrome extension - </a> - , 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. - </div> - </div> - ); - } -} |