aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
diff options
context:
space:
mode:
authorHsuan Lee <boczeratul@gmail.com>2019-03-06 17:46:50 +0800
committerHsuan Lee <boczeratul@gmail.com>2019-03-06 17:46:50 +0800
commit35703539d0f2b4ddb3b11d0de8c9634af59ab71f (patch)
treeae3731221dbbb3a6fa40060a8d916cfd3f738289 /packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
parent92a1fde5b1ecd81b07cdb5bf0c9c1cd3544799db (diff)
downloaddexon-0x-contracts-stable.tar.gz
dexon-0x-contracts-stable.tar.zst
dexon-0x-contracts-stable.zip
Deploy @dexon-foundation/0x.jsstable
Diffstat (limited to 'packages/website/ts/components/dialogs/blockchain_err_dialog.tsx')
-rw-r--r--packages/website/ts/components/dialogs/blockchain_err_dialog.tsx166
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>
- );
- }
-}