From e744e4cd989bd3ae1070c59f7baa8097f18b8b06 Mon Sep 17 00:00:00 2001 From: Leonid Logvinov Date: Fri, 22 Dec 2017 15:05:32 +0100 Subject: Apply prettier config --- .../components/dialogs/blockchain_err_dialog.tsx | 97 ++++--- .../dialogs/eth_weth_conversion_dialog.tsx | 89 +++--- .../ts/components/dialogs/ledger_config_dialog.tsx | 99 +++---- .../dialogs/portal_disclaimer_dialog.tsx | 32 +-- .../website/ts/components/dialogs/send_dialog.tsx | 22 +- .../dialogs/track_token_confirmation_dialog.tsx | 25 +- .../dialogs/u2f_not_supported_dialog.tsx | 24 +- .../dialogs/wrapped_eth_section_notice_dialog.tsx | 19 +- .../ts/components/eth_weth_conversion_button.tsx | 33 ++- packages/website/ts/components/eth_wrappers.tsx | 268 ++++++++---------- packages/website/ts/components/fill_order.tsx | 235 +++++++--------- packages/website/ts/components/fill_order_json.tsx | 36 ++- .../website/ts/components/fill_warning_dialog.tsx | 16 +- .../flash_messages/token_send_completed.tsx | 23 +- .../flash_messages/transaction_submitted.tsx | 8 +- packages/website/ts/components/footer.tsx | 87 +++--- .../ts/components/generate_order/asset_picker.tsx | 76 ++--- .../generate_order/generate_order_form.tsx | 92 +++--- .../components/generate_order/new_token_form.tsx | 47 ++-- .../website/ts/components/inputs/address_input.tsx | 20 +- .../ts/components/inputs/allowance_toggle.tsx | 16 +- .../ts/components/inputs/balance_bounded_input.tsx | 65 ++--- .../ts/components/inputs/eth_amount_input.tsx | 26 +- .../ts/components/inputs/expiration_input.tsx | 26 +- .../website/ts/components/inputs/hash_input.tsx | 16 +- .../components/inputs/identicon_address_input.tsx | 17 +- .../ts/components/inputs/token_amount_input.tsx | 28 +- .../website/ts/components/inputs/token_input.tsx | 23 +- packages/website/ts/components/order_json.tsx | 115 ++++---- packages/website/ts/components/portal.tsx | 115 ++++---- packages/website/ts/components/portal_menu.tsx | 12 +- packages/website/ts/components/send_button.tsx | 16 +- packages/website/ts/components/token_balances.tsx | 313 ++++++++------------- packages/website/ts/components/top_bar.tsx | 162 +++++------ .../website/ts/components/top_bar_menu_item.tsx | 30 +- .../ts/components/track_token_confirmation.tsx | 32 +-- .../ts/components/trade_history/trade_history.tsx | 12 +- .../trade_history/trade_history_item.tsx | 65 ++--- packages/website/ts/components/ui/alert.tsx | 6 +- packages/website/ts/components/ui/badge.tsx | 2 +- packages/website/ts/components/ui/copy_icon.tsx | 38 ++- .../ts/components/ui/drop_down_menu_item.tsx | 29 +- .../website/ts/components/ui/ethereum_address.tsx | 13 +- .../website/ts/components/ui/etherscan_icon.tsx | 35 +-- .../website/ts/components/ui/fake_text_field.tsx | 6 +- .../website/ts/components/ui/flash_message.tsx | 4 +- packages/website/ts/components/ui/help_tooltip.tsx | 4 +- packages/website/ts/components/ui/identicon.tsx | 18 +- packages/website/ts/components/ui/input_label.tsx | 6 +- .../ts/components/ui/lifecycle_raised_button.tsx | 21 +- packages/website/ts/components/ui/loading.tsx | 21 +- packages/website/ts/components/ui/menu_item.tsx | 4 +- packages/website/ts/components/ui/party.tsx | 126 ++++----- .../website/ts/components/ui/required_label.tsx | 6 +- .../website/ts/components/ui/simple_loading.tsx | 11 +- packages/website/ts/components/ui/swap_icon.tsx | 9 +- packages/website/ts/components/ui/token_icon.tsx | 14 +- packages/website/ts/components/visual_order.tsx | 12 +- 58 files changed, 1275 insertions(+), 1547 deletions(-) (limited to 'packages/website/ts/components') 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 -
+
{this._renderExplanation(hasWalletAddress)}
@@ -70,54 +70,55 @@ export class BlockchainErrDialog extends React.Component - You were disconnected from the backing Ethereum node. - {' '}If using + 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. + {' '} + or{' '} + + Mist + {' '} + try refreshing the page. If using a locally hosted Ethereum node, make sure it's still running.
); } private _renderUnexpectedErrorExplanation() { - return ( -
- We encountered an unexpected error. Please try refreshing the page. -
- ); + return
We encountered an unexpected error. Please try refreshing the page.
; } private _renderNoWalletFoundExplanation() { 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: + 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. + {' '} + Chrome extension Ethereum wallet. Once installed and set up, refresh this page.
- Note: - {' '}If you already have Metamask installed, make sure it is unlocked. + 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{' '} - {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{' '} + + Parity Signer Chrome extension + {' '} + 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.'}
- 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. + 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.
); @@ -126,15 +127,12 @@ export class BlockchainErrDialog extends React.Component
- 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}).` + : `.`}

Metamask

@@ -145,13 +143,14 @@ export class BlockchainErrDialog extends React.Component

Parity Signer

- If using the Parity Signer - Chrome extension, 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{' '} + + Parity Signer Chrome extension + , 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.'}
); 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 { +export class EthWethConversionDialog extends React.Component< + EthWethConversionDialogProps, + EthWethConversionDialogState +> { constructor() { super(); this.state = { @@ -34,25 +36,16 @@ export class EthWethConversionDialog extends } public render() { const convertDialogActions = [ - , - , + , + , ]; - const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH'; + const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH'; return ( {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 (
-
- {explanation} -
-
+
{explanation}
+
{this._renderCurrency(isWrappedVersion)} -
- +
+
{this._renderCurrency(!isWrappedVersion)}
-
- {this.props.direction === Side.Receive ? +
+ {this.props.direction === Side.Receive ? ( : + /> + ) : ( - } -
+ )} +
1 ETH = 1 WETH
- {this.props.direction === Side.Receive && + {this.props.direction === Side.Receive && (
Max
- } + )}
@@ -130,16 +118,13 @@ export class EthWethConversionDialog extends const symbol = isWrappedVersion ? 'WETH' : 'ETH'; return (
-
+
{name}
- +
-
+
({symbol})
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, + , ]; - 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 ( -
- {this.state.stepIndex === LedgerSteps.CONNECT && - this._renderConnectStep() - } - {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && - this._renderSelectAddressStep() - } +
+ {this.state.stepIndex === LedgerSteps.CONNECT && this._renderConnectStep()} + {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && this._renderSelectAddressStep()}
); @@ -92,19 +76,15 @@ export class LedgerConfigDialog extends React.Component -
- Follow these instructions before proceeding: -
+
Follow these instructions before proceeding:
    -
  1. - Connect your Ledger Nano S & Open the Ethereum application -
    2. -
  2. - Verify that Browser Support is enabled in Settings -
    3. +
  3. Connect your Ledger Nano S & Open the Ethereum application
    4. +
  4. Verify that Browser Support is enabled in Settings
  5. If no Browser Support is found in settings, verify that you have{' '} - Firmware >1.2 + + Firmware >1.2 +
@@ -115,11 +95,11 @@ export class LedgerConfigDialog extends React.Component - {this.state.didConnectFail && -
+ {this.state.didConnectFail && ( +
Failed to connect. Follow the instructions and try again.
- } + )}
); @@ -128,33 +108,28 @@ export class LedgerConfigDialog extends React.Component
- +
Address Balance - - {this._renderAddressTableRows()} - + {this._renderAddressTableRows()}
-
-
+
+
-
+
+ -
+
{userAddress}
{userAddress} -
+
{balanceString}
{balanceString} 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 ( , - ]} + titleStyle={{ fontWeight: 100 }} + actions={[]} open={props.isOpen} onRequestClose={props.onToggleDialog} autoScrollBodyContent={true} modal={true} > -
+
- 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.
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, + , @@ -59,8 +55,8 @@ export class SendDialog extends React.Component -
+
+
{ +export class TrackTokenConfirmationDialog extends React.Component< + TrackTokenConfirmationDialogProps, + TrackTokenConfirmationDialogState +> { constructor(props: TrackTokenConfirmationDialogProps) { super(props); this.state = { @@ -36,7 +38,7 @@ export class TrackTokenConfirmationDialog extends return ( , - ]} + titleStyle={{ fontWeight: 100 }} + actions={[]} open={props.isOpen} onRequestClose={props.onToggleDialog.bind(this)} autoScrollBodyContent={true} > -
+
- 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.