diff options
Diffstat (limited to 'packages/website/ts/components/dialogs')
6 files changed, 35 insertions, 33 deletions
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index 963bd4388..9a5cd90d7 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -1,10 +1,10 @@ import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; -import {colors} from 'material-ui/styles'; 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'; @@ -46,22 +46,22 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp ); } private getTitle(hasWalletAddress: boolean) { - if (this.props.blockchainErr === BlockchainErrs.A_CONTRACT_NOT_DEPLOYED_ON_NETWORK) { + 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.DISCONNECTED_FROM_ETHEREUM_NODE) { + } 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.A_CONTRACT_NOT_DEPLOYED_ON_NETWORK) { + if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) { return this.renderContractsNotDeployedExplanation(); } else if (!hasWalletAddress) { return this.renderNoWalletFoundExplanation(); - } else if (this.props.blockchainErr === BlockchainErrs.DISCONNECTED_FROM_ETHEREUM_NODE) { + } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) { return this.renderDisconnectedFromNode(); } else { return this.renderUnexpectedErrorExplanation(); @@ -71,9 +71,9 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp return ( <div> You were disconnected from the backing Ethereum node. - {' '}If using <a href={constants.METAMASK_CHROME_STORE_URL} target="_blank"> + {' '}If using <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank"> Metamask - </a> or <a href={constants.MIST_DOWNLOAD_URL} target="_blank">Mist</a> try refreshing + </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> ); @@ -97,7 +97,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp <h4>1. Metamask chrome extension</h4> <div> You can install the{' '} - <a href={constants.METAMASK_CHROME_STORE_URL} target="_blank"> + <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"> @@ -107,11 +107,11 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp </div> <h4>Parity Signer</h4> <div> - The <a href={constants.PARITY_CHROME_STORE_URL} target="_blank">Parity Signer + 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{' '} - {configs.isMainnetEnabled && '`parity ui` or'} `parity --chain kovan ui`{' '} - in order to connect to {configs.isMainnetEnabled ? 'mainnet or Kovan respectively.' : 'Kovan.'} + {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.'} </div> <div className="pt2"> <span className="bold">Note:</span> @@ -130,24 +130,24 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp {' '}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.TESTNET_NETWORK_ID}) - {configs.isMainnetEnabled ? - ` or ${constants.MAINNET_NAME} (network Id: ${constants.MAINNET_NETWORK_ID}).` : + {' '}{constants.TESTNET_NAME} testnet (network Id: {constants.NETWORK_ID_TESTNET}) + {configs.IS_MAINNET_ENABLED ? + ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).` : `.` } </div> <h4>Metamask</h4> <div> If you are using{' '} - <a href={constants.METAMASK_CHROME_STORE_URL} target="_blank"> + <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.PARITY_CHROME_STORE_URL} target="_blank">Parity Signer + 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{' '} - {configs.isMainnetEnabled ? + {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.' diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx index c8bdced9b..44c23e4b0 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -5,8 +5,7 @@ import * as React from 'react'; import {EthAmountInput} from 'ts/components/inputs/eth_amount_input'; import {TokenAmountInput} from 'ts/components/inputs/token_amount_input'; import {Side, Token, TokenState} from 'ts/types'; - -const DARK_BLUE = '#4D5481'; +import {colors} from 'ts/utils/colors'; interface EthWethConversionDialogProps { direction: Side; @@ -47,7 +46,7 @@ export class EthWethConversionDialog extends onTouchTap={this.onConvertClick.bind(this)} />, ]; - const title = this.props.direction === Side.deposit ? 'Wrap ETH' : 'Unwrap WETH'; + const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH'; return ( <Dialog title={title} @@ -61,10 +60,10 @@ export class EthWethConversionDialog extends ); } private renderConversionDialogBody() { - const explanation = this.props.direction === Side.deposit ? + const explanation = this.props.direction === Side.Deposit ? 'Convert your Ether into a tokenized, tradable form.' : 'Convert your Wrapped Ether back into it\'s native form.'; - const isWrappedVersion = this.props.direction === Side.receive; + const isWrappedVersion = this.props.direction === Side.Receive; return ( <div> <div className="pb2"> @@ -75,7 +74,7 @@ export class EthWethConversionDialog extends {this.renderCurrency(isWrappedVersion)} <div style={{paddingTop: 68}}> <i - style={{fontSize: 28, color: DARK_BLUE}} + style={{fontSize: 28, color: colors.darkBlue}} className="zmdi zmdi-arrow-right" /> </div> @@ -85,7 +84,7 @@ export class EthWethConversionDialog extends className="pt2 mx-auto" style={{width: 245}} > - {this.props.direction === Side.receive ? + {this.props.direction === Side.Receive ? <TokenAmountInput token={this.props.token} tokenState={this.props.tokenState} @@ -124,7 +123,7 @@ export class EthWethConversionDialog extends <div className="mx-auto pt2"> <div className="center" - style={{color: DARK_BLUE}} + style={{color: colors.darkBlue}} > {name} </div> diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index d3c95a011..ddd1f2cf2 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -2,7 +2,6 @@ import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; -import {colors} from 'material-ui/styles'; import { Table, TableBody, @@ -17,6 +16,8 @@ import ReactTooltip = require('react-tooltip'); import {Blockchain} from 'ts/blockchain'; import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button'; import {Dispatcher} from 'ts/redux/dispatcher'; +import {colors} from 'ts/utils/colors'; +import {configs} from 'ts/utils/configs'; import {constants} from 'ts/utils/constants'; import {utils} from 'ts/utils/utils'; @@ -52,7 +53,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, stepIndex: LedgerSteps.CONNECT, userAddresses: [], addressBalances: [], - derivationPath: constants.DEFAULT_DERIVATION_PATH, + derivationPath: configs.DEFAULT_DERIVATION_PATH, derivationErrMsg: '', }; } @@ -146,7 +147,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, <div className="overflow-hidden" style={{width: 180}}> <TextField floatingLabelFixed={true} - floatingLabelStyle={{color: colors.grey500}} + floatingLabelStyle={{color: colors.grey}} floatingLabelText="Update path derivation (advanced)" value={this.state.derivationPath} errorText={this.state.derivationErrMsg} @@ -170,7 +171,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, const balance = this.state.addressBalances[i]; const addressTooltipId = `address-${userAddress}`; const balanceTooltipId = `balance-${userAddress}`; - const networkName = constants.networkNameById[this.props.networkId]; + const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId]; // We specifically prefix kovan ETH. // TODO: We should probably add prefixes for all networks const isKovanNetwork = networkName === 'Kovan'; diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx index bfff7fbb5..2f824ab44 100644 --- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx +++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx @@ -1,7 +1,7 @@ import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; -import {colors} from 'material-ui/styles'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; interface PortalDisclaimerDialogProps { isOpen: boolean; diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx index 2d45009d5..f17893a83 100644 --- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx +++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx @@ -73,7 +73,9 @@ export class TrackTokenConfirmationDialog extends isAddingTokenToTracked: true, }); for (const token of this.props.tokens) { - const newTokenEntry = _.assign({}, token); + const newTokenEntry = { + ...token, + }; newTokenEntry.isTracked = true; trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry); diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx index 09c32c997..ff884a94e 100644 --- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx +++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx @@ -1,7 +1,7 @@ import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; -import {colors} from 'material-ui/styles'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; import {constants} from 'ts/utils/constants'; interface U2fNotSupportedDialogProps { @@ -39,7 +39,7 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) { <li> Firefox with{' '} <a - href={constants.FIREFOX_U2F_ADDON} + href={constants.URL_FIREFOX_U2F_ADDON} target="_blank" style={{textDecoration: 'underline'}} > |