diff options
Diffstat (limited to 'packages/website/ts/components/dialogs')
8 files changed, 167 insertions, 240 deletions
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index 900d0e193..f555ca6b1 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -2,11 +2,11 @@ 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'; +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; @@ -32,14 +32,14 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp return ( <Dialog title={this._getTitle(hasWalletAddress)} - titleStyle={{fontWeight: 100}} + titleStyle={{ fontWeight: 100 }} actions={dialogActions} open={this.props.isOpen} - contentStyle={{width: 400}} + contentStyle={{ width: 400 }} onRequestClose={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)} autoScrollBodyContent={true} > - <div className="pt2" style={{color: colors.grey700}}> + <div className="pt2" style={{ color: colors.grey700 }}> {this._renderExplanation(hasWalletAddress)} </div> </Dialog> @@ -70,54 +70,55 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp private _renderDisconnectedFromNode() { return ( <div> - You were disconnected from the backing Ethereum node. - {' '}If using <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank"> + 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. + </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 _renderUnexpectedErrorExplanation() { - return ( - <div> - We encountered an unexpected error. Please try refreshing the page. - </div> - ); + return <div>We encountered an unexpected error. Please try refreshing the page.</div>; } private _renderNoWalletFoundExplanation() { 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: + 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. + </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. + <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{' '} - {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.'} + 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.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> - {' '}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. + <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> ); @@ -126,15 +127,12 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp 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 - {' '}{constants.TESTNET_NAME} testnet (network Id: {constants.NETWORK_ID_TESTNET}) - {configs.IS_MAINNET_ENABLED ? - ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).` : - `.` - } + 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}).` + : `.`} </div> <h4>Metamask</h4> <div> @@ -145,13 +143,14 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp </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{' '} - {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.' - } + 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.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.'} </div> </div> ); 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 d78cbdc29..ae4328976 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -2,10 +2,10 @@ import BigNumber from 'bignumber.js'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; 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'; -import {colors} from 'ts/utils/colors'; +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'; +import { colors } from 'ts/utils/colors'; interface EthWethConversionDialogProps { direction: Side; @@ -23,8 +23,10 @@ interface EthWethConversionDialogState { hasErrors: boolean; } -export class EthWethConversionDialog extends - React.Component<EthWethConversionDialogProps, EthWethConversionDialogState> { +export class EthWethConversionDialog extends React.Component< + EthWethConversionDialogProps, + EthWethConversionDialogState +> { constructor() { super(); this.state = { @@ -34,25 +36,16 @@ export class EthWethConversionDialog extends } public render() { const convertDialogActions = [ - <FlatButton - key="cancel" - label="Cancel" - onTouchTap={this._onCancel.bind(this)} - />, - <FlatButton - key="convert" - label="Convert" - primary={true} - onTouchTap={this._onConvertClick.bind(this)} - />, + <FlatButton key="cancel" label="Cancel" onTouchTap={this._onCancel.bind(this)} />, + <FlatButton key="convert" label="Convert" primary={true} 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} - titleStyle={{fontWeight: 100}} + titleStyle={{ fontWeight: 100 }} actions={convertDialogActions} - contentStyle={{width: 448}} + contentStyle={{ width: 448 }} open={this.props.isOpen} > {this._renderConversionDialogBody()} @@ -60,31 +53,24 @@ export class EthWethConversionDialog extends ); } private _renderConversionDialogBody() { - 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 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; return ( <div> - <div className="pb2"> - {explanation} - </div> - <div className="mx-auto" style={{maxWidth: 312}}> + <div className="pb2">{explanation}</div> + <div className="mx-auto" style={{ maxWidth: 312 }}> <div className="flex"> {this._renderCurrency(isWrappedVersion)} - <div style={{paddingTop: 68}}> - <i - style={{fontSize: 28, color: colors.darkBlue}} - className="zmdi zmdi-arrow-right" - /> + <div style={{ paddingTop: 68 }}> + <i style={{ fontSize: 28, color: colors.darkBlue }} className="zmdi zmdi-arrow-right" /> </div> {this._renderCurrency(!isWrappedVersion)} </div> - <div - className="pt2 mx-auto" - style={{width: 245}} - > - {this.props.direction === Side.Receive ? + <div className="pt2 mx-auto" style={{ width: 245 }}> + {this.props.direction === Side.Receive ? ( <TokenAmountInput token={this.props.token} tokenState={this.props.tokenState} @@ -94,7 +80,8 @@ export class EthWethConversionDialog extends onChange={this._onValueChange.bind(this)} amount={this.state.value} onVisitBalancesPageClick={this.props.onCancelled} - /> : + /> + ) : ( <EthAmountInput balance={this.props.etherBalance} amount={this.state.value} @@ -103,21 +90,22 @@ export class EthWethConversionDialog extends shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} onVisitBalancesPageClick={this.props.onCancelled} /> - } - <div - className="pt1" - style={{fontSize: 12}} - > + )} + <div className="pt1" style={{ fontSize: 12 }}> <div className="left">1 ETH = 1 WETH</div> - {this.props.direction === Side.Receive && + {this.props.direction === Side.Receive && ( <div className="right" onClick={this._onMaxClick.bind(this)} - style={{color: colors.darkBlue, textDecoration: 'underline', cursor: 'pointer'}} + style={{ + color: colors.darkBlue, + textDecoration: 'underline', + cursor: 'pointer', + }} > Max </div> - } + )} </div> </div> </div> @@ -130,16 +118,13 @@ export class EthWethConversionDialog extends const symbol = isWrappedVersion ? 'WETH' : 'ETH'; return ( <div className="mx-auto pt2"> - <div - className="center" - style={{color: colors.darkBlue}} - > + <div className="center" style={{ color: colors.darkBlue }}> {name} </div> <div className="center py2"> - <img src={iconUrl} style={{width: 60}} /> + <img src={iconUrl} style={{ width: 60 }} /> </div> - <div className="center" style={{fontSize: 12}}> + <div className="center" style={{ fontSize: 12 }}> ({symbol}) </div> </div> diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index cc68ef2df..ae7117a70 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -2,24 +2,17 @@ import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; -import { - Table, - TableBody, - TableHeader, - TableHeaderColumn, - TableRow, - TableRowColumn, -} from 'material-ui/Table'; +import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; import TextField from 'material-ui/TextField'; import * as React from 'react'; 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'; +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'; const VALID_ETHEREUM_DERIVATION_PATH_PREFIX = `44'/60'`; @@ -59,32 +52,23 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, } public render() { const dialogActions = [ - <FlatButton - key="ledgerConnectCancel" - label="Cancel" - onTouchTap={this._onClose.bind(this)} - />, + <FlatButton key="ledgerConnectCancel" label="Cancel" onTouchTap={this._onClose.bind(this)} />, ]; - const dialogTitle = this.state.stepIndex === LedgerSteps.CONNECT ? - 'Connect to your Ledger' : - 'Select desired address'; + const dialogTitle = + this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address'; return ( <Dialog title={dialogTitle} - titleStyle={{fontWeight: 100}} + titleStyle={{ fontWeight: 100 }} actions={dialogActions} open={this.props.isOpen} onRequestClose={this._onClose.bind(this)} autoScrollBodyContent={true} - bodyStyle={{paddingBottom: 0}} + bodyStyle={{ paddingBottom: 0 }} > - <div style={{color: colors.grey700, paddingTop: 1}}> - {this.state.stepIndex === LedgerSteps.CONNECT && - this._renderConnectStep() - } - {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && - this._renderSelectAddressStep() - } + <div style={{ color: colors.grey700, paddingTop: 1 }}> + {this.state.stepIndex === LedgerSteps.CONNECT && this._renderConnectStep()} + {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && this._renderSelectAddressStep()} </div> </Dialog> ); @@ -92,19 +76,15 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, private _renderConnectStep() { return ( <div> - <div className="h4 pt3"> - Follow these instructions before proceeding: - </div> + <div className="h4 pt3">Follow these instructions before proceeding:</div> <ol> - <li className="pb1"> - Connect your Ledger Nano S & Open the Ethereum application - </li> - <li className="pb1"> - Verify that Browser Support is enabled in Settings - </li> + <li className="pb1">Connect your Ledger Nano S & Open the Ethereum application</li> + <li className="pb1">Verify that Browser Support is enabled in Settings</li> <li className="pb1"> If no Browser Support is found in settings, verify that you have{' '} - <a href="https://www.ledgerwallet.com/apps/manager" target="_blank">Firmware >1.2</a> + <a href="https://www.ledgerwallet.com/apps/manager" target="_blank"> + Firmware >1.2 + </a> </li> </ol> <div className="center pb3"> @@ -115,11 +95,11 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, labelComplete="Connected!" onClickAsyncFn={this._onConnectLedgerClickAsync.bind(this, true)} /> - {this.state.didConnectFail && - <div className="pt2 left-align" style={{color: colors.red200}}> + {this.state.didConnectFail && ( + <div className="pt2 left-align" style={{ color: colors.red200 }}> Failed to connect. Follow the instructions and try again. </div> - } + )} </div> </div> ); @@ -128,33 +108,28 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, return ( <div> <div> - <Table - bodyStyle={{height: 300}} - onRowSelection={this._onAddressSelected.bind(this)} - > + <Table bodyStyle={{ height: 300 }} onRowSelection={this._onAddressSelected.bind(this)}> <TableHeader displaySelectAll={false}> <TableRow> <TableHeaderColumn colSpan={2}>Address</TableHeaderColumn> <TableHeaderColumn>Balance</TableHeaderColumn> </TableRow> </TableHeader> - <TableBody> - {this._renderAddressTableRows()} - </TableBody> + <TableBody>{this._renderAddressTableRows()}</TableBody> </Table> </div> - <div className="flex pt2" style={{height: 100}}> - <div className="overflow-hidden" style={{width: 180}}> + <div className="flex pt2" style={{ height: 100 }}> + <div className="overflow-hidden" style={{ width: 180 }}> <TextField floatingLabelFixed={true} - floatingLabelStyle={{color: colors.grey}} + floatingLabelStyle={{ color: colors.grey }} floatingLabelText="Update path derivation (advanced)" value={this.state.derivationPath} errorText={this.state.derivationErrMsg} onChange={this._onDerivationPathChanged.bind(this)} /> </div> - <div className="pl2" style={{paddingTop: 28}}> + <div className="pl2" style={{ paddingTop: 28 }}> <LifeCycleRaisedButton labelReady="Update" labelLoading="Updating..." @@ -177,21 +152,15 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, const isKovanNetwork = networkName === 'Kovan'; const balanceString = `${balance.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`; return ( - <TableRow key={userAddress} style={{height: 40}}> + <TableRow key={userAddress} style={{ height: 40 }}> <TableRowColumn colSpan={2}> - <div - data-tip={true} - data-for={addressTooltipId} - > + <div data-tip={true} data-for={addressTooltipId}> {userAddress} </div> <ReactTooltip id={addressTooltipId}>{userAddress}</ReactTooltip> </TableRowColumn> <TableRowColumn> - <div - data-tip={true} - data-for={balanceTooltipId} - > + <div data-tip={true} data-for={balanceTooltipId}> {balanceString} </div> <ReactTooltip id={balanceTooltipId}>{balanceString}</ReactTooltip> diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx index ffe55794f..3ecc454a0 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 * as React from 'react'; -import {colors} from 'ts/utils/colors'; +import { colors } from 'ts/utils/colors'; interface PortalDisclaimerDialogProps { isOpen: boolean; @@ -12,31 +12,23 @@ export function PortalDisclaimerDialog(props: PortalDisclaimerDialogProps) { return ( <Dialog title="0x Portal Disclaimer" - titleStyle={{fontWeight: 100}} - actions={[ - <FlatButton - key="portalAgree" - label="I Agree" - onTouchTap={props.onToggleDialog} - />, - ]} + titleStyle={{ fontWeight: 100 }} + actions={[<FlatButton key="portalAgree" label="I Agree" onTouchTap={props.onToggleDialog} />]} open={props.isOpen} onRequestClose={props.onToggleDialog} autoScrollBodyContent={true} modal={true} > - <div className="pt2" style={{color: colors.grey700}}> + <div className="pt2" style={{ color: colors.grey700 }}> <div> - 0x Portal is a free software-based tool intended to help users to - buy and sell ERC20-compatible blockchain tokens through the 0x protocol - on a purely peer-to-peer basis. 0x portal is not a regulated marketplace, - exchange or intermediary of any kind, and therefore, you should only use - 0x portal to exchange tokens that are not securities, commodity interests, - or any other form of regulated instrument. 0x has not attempted to screen - or otherwise limit the tokens that you may enter in 0x Portal. By clicking - “I Agree” below, you understand that you are solely responsible for using 0x - Portal and buying and selling tokens using 0x Portal in compliance with all - applicable laws and regulations. + 0x Portal is a free software-based tool intended to help users to buy and sell ERC20-compatible + blockchain tokens through the 0x protocol on a purely peer-to-peer basis. 0x portal is not a + regulated marketplace, exchange or intermediary of any kind, and therefore, you should only use 0x + portal to exchange tokens that are not securities, commodity interests, or any other form of + regulated instrument. 0x has not attempted to screen or otherwise limit the tokens that you may + enter in 0x Portal. By clicking “I Agree” below, you understand that you are solely responsible for + using 0x Portal and buying and selling tokens using 0x Portal in compliance with all applicable laws + and regulations. </div> </div> </Dialog> diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx index 9a85ea8b1..cd29b34e6 100644 --- a/packages/website/ts/components/dialogs/send_dialog.tsx +++ b/packages/website/ts/components/dialogs/send_dialog.tsx @@ -3,9 +3,9 @@ import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; -import {AddressInput} from 'ts/components/inputs/address_input'; -import {TokenAmountInput} from 'ts/components/inputs/token_amount_input'; -import {Token, TokenState} from 'ts/types'; +import { AddressInput } from 'ts/components/inputs/address_input'; +import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; +import { Token, TokenState } from 'ts/types'; interface SendDialogProps { onComplete: (recipient: string, value: BigNumber) => void; @@ -33,11 +33,7 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState } public render() { const transferDialogActions = [ - <FlatButton - key="cancelTransfer" - label="Cancel" - onTouchTap={this._onCancel.bind(this)} - />, + <FlatButton key="cancelTransfer" label="Cancel" onTouchTap={this._onCancel.bind(this)} />, <FlatButton key="sendTransfer" disabled={this._hasErrors()} @@ -49,7 +45,7 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState return ( <Dialog title="I want to send" - titleStyle={{fontWeight: 100}} + titleStyle={{ fontWeight: 100 }} actions={transferDialogActions} open={this.props.isOpen} > @@ -59,8 +55,8 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState } private _renderSendDialogBody() { return ( - <div className="mx-auto" style={{maxWidth: 300}}> - <div style={{height: 80}}> + <div className="mx-auto" style={{ maxWidth: 300 }}> + <div style={{ height: 80 }}> <AddressInput initialAddress={this.state.recipient} updateAddress={this._onRecipientChange.bind(this)} @@ -116,8 +112,6 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState this.props.onCancelled(); } private _hasErrors() { - return _.isUndefined(this.state.recipient) || - _.isUndefined(this.state.value) || - !this.state.isAmountValid; + return _.isUndefined(this.state.recipient) || _.isUndefined(this.state.value) || !this.state.isAmountValid; } } 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 9e00b4110..3f29d46f8 100644 --- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx +++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx @@ -2,11 +2,11 @@ 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 {TrackTokenConfirmation} from 'ts/components/track_token_confirmation'; -import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage'; -import {Dispatcher} from 'ts/redux/dispatcher'; -import {Token, TokenByAddress} from 'ts/types'; +import { Blockchain } from 'ts/blockchain'; +import { TrackTokenConfirmation } from 'ts/components/track_token_confirmation'; +import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { Token, TokenByAddress } from 'ts/types'; interface TrackTokenConfirmationDialogProps { tokens: Token[]; @@ -23,8 +23,10 @@ interface TrackTokenConfirmationDialogState { isAddingTokenToTracked: boolean; } -export class TrackTokenConfirmationDialog extends - React.Component<TrackTokenConfirmationDialogProps, TrackTokenConfirmationDialogState> { +export class TrackTokenConfirmationDialog extends React.Component< + TrackTokenConfirmationDialogProps, + TrackTokenConfirmationDialogState +> { constructor(props: TrackTokenConfirmationDialogProps) { super(props); this.state = { @@ -36,7 +38,7 @@ export class TrackTokenConfirmationDialog extends return ( <Dialog title="Tracking confirmation" - titleStyle={{fontWeight: 100}} + titleStyle={{ fontWeight: 100 }} actions={[ <FlatButton key="trackNo" @@ -81,10 +83,9 @@ export class TrackTokenConfirmationDialog extends trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry); this.props.dispatcher.updateTokenByAddress([newTokenEntry]); - const [ - balance, - allowance, - ] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(token.address); + const [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync( + token.address, + ); this.props.dispatcher.updateTokenStateByAddress({ [token.address]: { balance, 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 ff884a94e..098e3e26d 100644 --- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx +++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx @@ -1,8 +1,8 @@ import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; -import {colors} from 'ts/utils/colors'; -import {constants} from 'ts/utils/constants'; +import { colors } from 'ts/utils/colors'; +import { constants } from 'ts/utils/constants'; interface U2fNotSupportedDialogProps { isOpen: boolean; @@ -13,24 +13,16 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) { return ( <Dialog title="U2F Not Supported" - titleStyle={{fontWeight: 100}} - actions={[ - <FlatButton - key="u2fNo" - label="Ok" - onTouchTap={props.onToggleDialog.bind(this)} - />, - ]} + titleStyle={{ fontWeight: 100 }} + actions={[<FlatButton key="u2fNo" label="Ok" onTouchTap={props.onToggleDialog.bind(this)} />]} open={props.isOpen} onRequestClose={props.onToggleDialog.bind(this)} autoScrollBodyContent={true} > - <div className="pt2" style={{color: colors.grey700}}> + <div className="pt2" style={{ color: colors.grey700 }}> <div> - It looks like your browser does not support U2F connections - required for us to communicate with your hardware wallet. - Please use a browser that supports U2F connections and try - again. + It looks like your browser does not support U2F connections required for us to communicate with your + hardware wallet. Please use a browser that supports U2F connections and try again. </div> <div> <ul> @@ -41,7 +33,7 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) { <a href={constants.URL_FIREFOX_U2F_ADDON} target="_blank" - style={{textDecoration: 'underline'}} + style={{ textDecoration: 'underline' }} > this extension </a>. diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx index 3f485ce4f..9e91ff12d 100644 --- a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx +++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx @@ -1,6 +1,6 @@ import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; -import {colors} from 'material-ui/styles'; +import { colors } from 'material-ui/styles'; import * as React from 'react'; interface WrappedEthSectionNoticeDialogProps { @@ -12,25 +12,20 @@ export function WrappedEthSectionNoticeDialog(props: WrappedEthSectionNoticeDial return ( <Dialog title="Dedicated Wrapped Ether Section" - titleStyle={{fontWeight: 100}} + titleStyle={{ fontWeight: 100 }} actions={[ - <FlatButton - key="acknowledgeWrapEthSection" - label="Sounds good" - onTouchTap={props.onToggleDialog} - />, + <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onTouchTap={props.onToggleDialog} />, ]} open={props.isOpen} onRequestClose={props.onToggleDialog} autoScrollBodyContent={true} modal={true} > - <div className="pt2" style={{color: colors.grey700}}> + <div className="pt2" style={{ color: colors.grey700 }}> <div> - We have recently updated the Wrapped Ether token (WETH) used by 0x Portal. - Don't worry, unwrapping Ether tied to the old Wrapped Ether token can - be done at any time by clicking on the "Wrap ETH" section in the menu - to the left. + We have recently updated the Wrapped Ether token (WETH) used by 0x Portal. Don't worry, unwrapping + Ether tied to the old Wrapped Ether token can be done at any time by clicking on the "Wrap ETH" + section in the menu to the left. </div> </div> </Dialog> |