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 --- packages/website/ts/components/token_balances.tsx | 313 +++++++++------------- 1 file changed, 124 insertions(+), 189 deletions(-) (limited to 'packages/website/ts/components/token_balances.tsx') diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 208cd54e1..913eb8a78 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -1,4 +1,4 @@ -import {ZeroEx} from '0x.js'; +import { ZeroEx } from '0x.js'; import BigNumber from 'bignumber.js'; import DharmaLoanFrame from 'dharma-loan-frame'; import * as _ from 'lodash'; @@ -9,26 +9,19 @@ import FloatingActionButton from 'material-ui/FloatingActionButton'; import RaisedButton from 'material-ui/RaisedButton'; import ContentAdd from 'material-ui/svg-icons/content/add'; import ContentRemove from 'material-ui/svg-icons/content/remove'; -import { - Table, - TableBody, - TableHeader, - TableHeaderColumn, - TableRow, - TableRowColumn, -} from 'material-ui/Table'; +import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); import firstBy = require('thenby'); -import {Blockchain} from 'ts/blockchain'; -import {AssetPicker} from 'ts/components/generate_order/asset_picker'; -import {AllowanceToggle} from 'ts/components/inputs/allowance_toggle'; -import {SendButton} from 'ts/components/send_button'; -import {HelpTooltip} from 'ts/components/ui/help_tooltip'; -import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button'; -import {TokenIcon} from 'ts/components/ui/token_icon'; -import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage'; -import {Dispatcher} from 'ts/redux/dispatcher'; +import { Blockchain } from 'ts/blockchain'; +import { AssetPicker } from 'ts/components/generate_order/asset_picker'; +import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle'; +import { SendButton } from 'ts/components/send_button'; +import { HelpTooltip } from 'ts/components/ui/help_tooltip'; +import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button'; +import { TokenIcon } from 'ts/components/ui/token_icon'; +import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage'; +import { Dispatcher } from 'ts/redux/dispatcher'; import { BalanceErrs, BlockchainCallErrs, @@ -41,11 +34,11 @@ import { TokenStateByAddress, TokenVisibility, } from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {configs} from 'ts/utils/configs'; -import {constants} from 'ts/utils/constants'; -import {errorReporter} from 'ts/utils/error_reporter'; -import {utils} from 'ts/utils/utils'; +import { colors } from 'ts/utils/colors'; +import { configs } from 'ts/utils/configs'; +import { constants } from 'ts/utils/constants'; +import { errorReporter } from 'ts/utils/error_reporter'; +import { utils } from 'ts/utils/utils'; const ETHER_ICON_PATH = '/images/ether.png'; const ETHER_TOKEN_SYMBOL = 'WETH'; @@ -153,16 +146,17 @@ export class TokenBalances extends React.Component \ you can request a loan from the Dharma Loan
\ network. Your loan should be funded in 5
\ minutes or less.'; - const allowanceExplanation = '0x smart contracts require access to your
\ + const allowanceExplanation = + '0x smart contracts require access to your
\ token balances in order to execute trades.
\ Toggling sets an allowance for the
\ smart contract so you can start trading that token.'; @@ -171,70 +165,47 @@ export class TokenBalances extends React.Component{isTestNetwork ? 'Test ether' : 'Ether'}
- {isTestNetwork ? - 'In order to try out the 0x Portal Dapp, request some test ether to pay for \ - gas costs. It might take a bit of time for the test ether to show up.' : - 'Ether must be converted to Ether Tokens in order to be tradable via 0x. \ - You can convert between Ether and Ether Tokens by clicking the "convert" button below.' - } + {isTestNetwork + ? 'In order to try out the 0x Portal Dapp, request some test ether to pay for \ + gas costs. It might take a bit of time for the test ether to show up.' + : 'Ether must be converted to Ether Tokens in order to be tradable via 0x. \ + You can convert between Ether and Ether Tokens by clicking the "convert" button below.'}
- +
Currency Balance - - { - isTestNetwork && - + + {isTestNetwork && ( + {isSmallScreen ? 'Faucet' : 'Request from faucet'} - } - { - isTestNetwork && - + )} + {isTestNetwork && ( + {isSmallScreen ? 'Loan' : 'Request Dharma loan'} - + - } + )} - + {this.props.userEtherBalance.toFixed(PRECISION)} ETH - {this.state.isBalanceSpinnerVisible && + {this.state.isBalanceSpinnerVisible && ( - } + )} - - { - isTestNetwork && - + + {isTestNetwork && ( + - } - { - isTestNetwork && + )} + {isTestNetwork && ( - } + )}
-
+
-

- {isTestNetwork ? 'Test tokens' : 'Tokens'} -

+

{isTestNetwork ? 'Test tokens' : 'Tokens'}

- +
- +
- {isTestNetwork ? - 'Mint some test tokens you\'d like to use to generate or fill an order using 0x.' : - 'Set trading permissions for a token you\'d like to start trading.' - } + {isTestNetwork + ? "Mint some test tokens you'd like to use to generate or fill an order using 0x." + : "Set trading permissions for a token you'd like to start trading."}
- +
- - Token - - Balance + Token + Balance
Allowance
- +
- - Action - - {this.props.screenWidth !== ScreenWidths.Sm && - - Send - - } + Action + {this.props.screenWidth !== ScreenWidths.Sm && Send}
- - {this._renderTokenTableRows()} - + {this._renderTokenTableRows()}
t.isTracked); const trackedTokensStartingWithEtherToken = trackedTokens.sort( - firstBy((t: Token) => (t.symbol !== ETHER_TOKEN_SYMBOL)) - .thenBy((t: Token) => (t.symbol !== ZRX_TOKEN_SYMBOL)) - .thenBy('address'), + firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL) + .thenBy((t: Token) => t.symbol !== ZRX_TOKEN_SYMBOL) + .thenBy('address'), ); const tableRows = _.map( trackedTokensStartingWithEtherToken, @@ -378,29 +318,33 @@ export class TokenBalances extends React.Component - - {_.isUndefined(tokenLink) ? - this._renderTokenName(token) : - + + + {_.isUndefined(tokenLink) ? ( + this._renderTokenName(token) + ) : ( + {this._renderTokenName(token)} - } + )} - + {this._renderAmount(tokenState.balance, token.decimals)} {token.symbol} - {this.state.isZRXSpinnerVisible && token.symbol === ZRX_TOKEN_SYMBOL && - - - - } + {this.state.isZRXSpinnerVisible && + token.symbol === ZRX_TOKEN_SYMBOL && ( + + + + )} - - {isMintable && + + {isMintable && ( Minting...} + labelLoading={Minting...} labelComplete="Minted!" onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)} /> - } - {token.symbol === ZRX_TOKEN_SYMBOL && this.props.networkId === constants.NETWORK_ID_TESTNET && - - } + )} + {token.symbol === ZRX_TOKEN_SYMBOL && + this.props.networkId === constants.NETWORK_ID_TESTNET && ( + + )} - {this.props.screenWidth !== ScreenWidths.Sm && + {this.props.screenWidth !== ScreenWidths.Sm && ( - } + )} ); } @@ -491,11 +437,7 @@ export class TokenBalances extends React.Component -
+
{token.name}
{token.address} @@ -507,39 +449,31 @@ export class TokenBalances extends React.Component - Our faucet can only send test Ether to addresses on the {constants.TESTNET_NAME} - {' '}testnet (networkId {constants.NETWORK_ID_TESTNET}). Please make sure you are - {' '}connected to the {constants.TESTNET_NAME} testnet and try requesting ether again. + Our faucet can only send test Ether to addresses on the {constants.TESTNET_NAME} testnet + (networkId {constants.NETWORK_ID_TESTNET}). Please make sure you are connected to the{' '} + {constants.TESTNET_NAME} testnet and try requesting ether again.
); case BalanceErrs.faucetRequestFailed: return (
- An unexpected error occurred while trying to request test Ether from our faucet. - {' '}Please refresh the page and try again. + An unexpected error occurred while trying to request test Ether from our faucet. Please refresh + the page and try again.
); case BalanceErrs.faucetQueueIsFull: - return ( -
- Our test Ether faucet queue is full. Please try requesting test Ether again later. -
- ); + return
Our test Ether faucet queue is full. Please try requesting test Ether again later.
; case BalanceErrs.mintingFailed: - return ( -
- Minting your test tokens failed unexpectedly. Please refresh the page and try again. -
- ); + return
Minting your test tokens failed unexpectedly. Please refresh the page and try again.
; case BalanceErrs.allowanceSettingFailed: return (
- An unexpected error occurred while trying to set your test token allowance. - {' '}Please refresh the page and try again. + An unexpected error occurred while trying to set your test token allowance. Please refresh the + page and try again.
); @@ -553,9 +487,9 @@ export class TokenBalances extends React.Component - We apologize -- Dharma loan requests are not available on - mobile yet. Please try again through your desktop browser. +

+ We apologize -- Dharma loan requests are not available on mobile yet. Please try again through your + desktop browser.

); } else { @@ -619,9 +553,10 @@ export class TokenBalances extends React.Component ${responseBody}`); - const errorType = response.status === constants.UNAVAILABLE_STATUS ? - BalanceErrs.faucetQueueIsFull : - BalanceErrs.faucetRequestFailed; + const errorType = + response.status === constants.UNAVAILABLE_STATUS + ? BalanceErrs.faucetQueueIsFull + : BalanceErrs.faucetRequestFailed; this.setState({ errorType, }); -- cgit