diff options
Diffstat (limited to 'packages/website/ts/components/token_balances.tsx')
-rw-r--r-- | packages/website/ts/components/token_balances.tsx | 436 |
1 files changed, 171 insertions, 265 deletions
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index ae5ef9222..2cef413c7 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -1,5 +1,5 @@ -import {ZeroEx} from '0x.js'; -import BigNumber from 'bignumber.js'; +import { ZeroEx } from '0x.js'; +import { BigNumber } from '@0xproject/utils'; import DharmaLoanFrame from 'dharma-loan-frame'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; @@ -7,31 +7,21 @@ import Divider from 'material-ui/Divider'; import FlatButton from 'material-ui/FlatButton'; import FloatingActionButton from 'material-ui/FloatingActionButton'; import RaisedButton from 'material-ui/RaisedButton'; -import {colors} from 'material-ui/styles'; 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 QueryString = require('query-string'); +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 {EthWethConversionButton} from 'ts/components/eth_weth_conversion_button'; -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, @@ -44,10 +34,11 @@ import { TokenStateByAddress, TokenVisibility, } from 'ts/types'; -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'; @@ -117,7 +108,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala if (!_.isUndefined(this.state.currentZrxBalance) && !nextZrxTokenBalance.eq(this.state.currentZrxBalance)) { if (this.state.isZRXSpinnerVisible) { const receivedAmount = nextZrxTokenBalance.minus(this.state.currentZrxBalance); - const receiveAmountInUnits = ZeroEx.toUnitAmount(receivedAmount, 18); + const receiveAmountInUnits = ZeroEx.toUnitAmount(receivedAmount, constants.DECIMAL_PLACES_ZRX); this.props.dispatcher.showFlashMessage(`Received ${receiveAmountInUnits.toString(10)} Kovan ZRX`); } this.setState({ @@ -135,7 +126,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala key="errorOkBtn" label="Ok" primary={true} - onTouchTap={this.onErrorDialogToggle.bind(this, false)} + onTouchTap={this._onErrorDialogToggle.bind(this, false)} />, ]; const dharmaDialogActions = [ @@ -143,10 +134,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala key="dharmaCloseBtn" label="Close" primary={true} - onTouchTap={this.onDharmaDialogToggle.bind(this, false)} + onTouchTap={this._onDharmaDialogToggle.bind(this, false)} />, ]; - const isTestNetwork = this.props.networkId === constants.TESTNET_NETWORK_ID; + const isTestNetwork = this.props.networkId === constants.NETWORK_ID_TESTNET; const dharmaButtonColumnStyle = { paddingLeft: 3, display: isTestNetwork ? 'table-cell' : 'none', @@ -155,194 +146,141 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala display: isTestNetwork ? 'none' : 'table-cell', }; const allTokenRowHeight = _.size(this.props.tokenByAddress) * TOKEN_TABLE_ROW_HEIGHT; - const tokenTableHeight = allTokenRowHeight < MAX_TOKEN_TABLE_HEIGHT ? - allTokenRowHeight : - MAX_TOKEN_TABLE_HEIGHT; - const isSmallScreen = this.props.screenWidth === ScreenWidths.SM; + const tokenTableHeight = + allTokenRowHeight < MAX_TOKEN_TABLE_HEIGHT ? allTokenRowHeight : MAX_TOKEN_TABLE_HEIGHT; + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const tokenColSpan = isSmallScreen ? TOKEN_COL_SPAN_SM : TOKEN_COL_SPAN_LG; - const dharmaLoanExplanation = 'If you need access to larger amounts of ether,<br> \ + const dharmaLoanExplanation = + 'If you need access to larger amounts of ether,<br> \ you can request a loan from the Dharma Loan<br> \ network. Your loan should be funded in 5<br> \ minutes or less.'; - const allowanceExplanation = '0x smart contracts require access to your<br> \ + const allowanceExplanation = + '0x smart contracts require access to your<br> \ token balances in order to execute trades.<br> \ - Toggling permissions sets an allowance for the<br> \ + Toggling sets an allowance for the<br> \ smart contract so you can start trading that token.'; return ( <div className="lg-px4 md-px4 sm-px1 pb2"> <h3>{isTestNetwork ? 'Test ether' : 'Ether'}</h3> <Divider /> <div className="pt2 pb2"> - {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 from the "Wrap ETH" tab.'} </div> - <Table - selectable={false} - style={styles.bgColor} - > + <Table selectable={false} style={styles.bgColor}> <TableHeader displaySelectAll={false} adjustForCheckbox={false}> <TableRow> <TableHeaderColumn>Currency</TableHeaderColumn> <TableHeaderColumn>Balance</TableHeaderColumn> - <TableRowColumn - className="sm-hide xs-hide" - style={stubColumnStyle} - /> - { - isTestNetwork && - <TableHeaderColumn - style={{paddingLeft: 3}} - > + <TableRowColumn className="sm-hide xs-hide" style={stubColumnStyle} /> + {isTestNetwork && ( + <TableHeaderColumn style={{ paddingLeft: 3 }}> {isSmallScreen ? 'Faucet' : 'Request from faucet'} </TableHeaderColumn> - } - { - isTestNetwork && - <TableHeaderColumn - style={dharmaButtonColumnStyle} - > + )} + {isTestNetwork && ( + <TableHeaderColumn style={dharmaButtonColumnStyle}> {isSmallScreen ? 'Loan' : 'Request Dharma loan'} - <HelpTooltip - style={{paddingLeft: 4}} - explanation={dharmaLoanExplanation} - /> + <HelpTooltip style={{ paddingLeft: 4 }} explanation={dharmaLoanExplanation} /> </TableHeaderColumn> - } + )} </TableRow> </TableHeader> <TableBody displayRowCheckbox={false}> <TableRow key="ETH"> <TableRowColumn className="py1"> - <img - style={{width: ICON_DIMENSION, height: ICON_DIMENSION}} - src={ETHER_ICON_PATH} - /> + <img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} /> </TableRowColumn> <TableRowColumn> {this.props.userEtherBalance.toFixed(PRECISION)} ETH - {this.state.isBalanceSpinnerVisible && + {this.state.isBalanceSpinnerVisible && ( <span className="pl1"> <i className="zmdi zmdi-spinner zmdi-hc-spin" /> </span> - } + )} </TableRowColumn> - <TableRowColumn - className="sm-hide xs-hide" - style={stubColumnStyle} - /> - { - isTestNetwork && - <TableRowColumn style={{paddingLeft: 3}}> + <TableRowColumn className="sm-hide xs-hide" style={stubColumnStyle} /> + {isTestNetwork && ( + <TableRowColumn style={{ paddingLeft: 3 }}> <LifeCycleRaisedButton labelReady="Request" labelLoading="Sending..." labelComplete="Sent!" - onClickAsyncFn={this.faucetRequestAsync.bind(this, true)} + onClickAsyncFn={this._faucetRequestAsync.bind(this, true)} /> </TableRowColumn> - } - { - isTestNetwork && + )} + {isTestNetwork && ( <TableRowColumn style={dharmaButtonColumnStyle}> <RaisedButton label="Request" - style={{width: '100%'}} - onTouchTap={this.onDharmaDialogToggle.bind(this)} + style={{ width: '100%' }} + onTouchTap={this._onDharmaDialogToggle.bind(this)} /> </TableRowColumn> - } + )} </TableRow> </TableBody> </Table> - <div className="clearfix" style={{paddingBottom: 1}}> + <div className="clearfix" style={{ paddingBottom: 1 }}> <div className="col col-10"> - <h3 className="pt2"> - {isTestNetwork ? 'Test tokens' : 'Tokens'} - </h3> + <h3 className="pt2">{isTestNetwork ? 'Test tokens' : 'Tokens'}</h3> </div> <div className="col col-1 pt3 align-right"> - <FloatingActionButton - mini={true} - zDepth={0} - onClick={this.onAddTokenClicked.bind(this)} - > + <FloatingActionButton mini={true} zDepth={0} onClick={this._onAddTokenClicked.bind(this)}> <ContentAdd /> </FloatingActionButton> </div> <div className="col col-1 pt3 align-right"> - <FloatingActionButton - mini={true} - zDepth={0} - onClick={this.onRemoveTokenClicked.bind(this)} - > + <FloatingActionButton mini={true} zDepth={0} onClick={this._onRemoveTokenClicked.bind(this)}> <ContentRemove /> </FloatingActionButton> </div> </div> <Divider /> <div className="pt2 pb2"> - {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."} </div> - <Table - selectable={false} - bodyStyle={{height: tokenTableHeight}} - style={styles.bgColor} - > + <Table selectable={false} bodyStyle={{ height: tokenTableHeight }} style={styles.bgColor}> <TableHeader displaySelectAll={false} adjustForCheckbox={false}> <TableRow> - <TableHeaderColumn - colSpan={tokenColSpan} - > - Token - </TableHeaderColumn> - <TableHeaderColumn style={{paddingLeft: 3}}>Balance</TableHeaderColumn> - <TableHeaderColumn> - <div className="inline-block">{!isSmallScreen && 'Trade '}Permissions</div> - <HelpTooltip - style={{paddingLeft: 4}} - explanation={allowanceExplanation} - /> - </TableHeaderColumn> + <TableHeaderColumn colSpan={tokenColSpan}>Token</TableHeaderColumn> + <TableHeaderColumn style={{ paddingLeft: 3 }}>Balance</TableHeaderColumn> <TableHeaderColumn> - Action + <div className="inline-block">Allowance</div> + <HelpTooltip style={{ paddingLeft: 4 }} explanation={allowanceExplanation} /> </TableHeaderColumn> - {this.props.screenWidth !== ScreenWidths.SM && - <TableHeaderColumn> - Send - </TableHeaderColumn> - } + <TableHeaderColumn>Action</TableHeaderColumn> + {this.props.screenWidth !== ScreenWidths.Sm && <TableHeaderColumn>Send</TableHeaderColumn>} </TableRow> </TableHeader> - <TableBody displayRowCheckbox={false}> - {this.renderTokenTableRows()} - </TableBody> + <TableBody displayRowCheckbox={false}>{this._renderTokenTableRows()}</TableBody> </Table> <Dialog title="Oh oh" - titleStyle={{fontWeight: 100}} + titleStyle={{ fontWeight: 100 }} actions={errorDialogActions} open={!_.isUndefined(this.state.errorType)} - onRequestClose={this.onErrorDialogToggle.bind(this, false)} + onRequestClose={this._onErrorDialogToggle.bind(this, false)} > - {this.renderErrorDialogBody()} + {this._renderErrorDialogBody()} </Dialog> <Dialog title="Request Dharma Loan" - titleStyle={{fontWeight: 100, backgroundColor: 'rgb(250, 250, 250)'}} - bodyStyle={{backgroundColor: 'rgb(37, 37, 37)'}} - actionsContainerStyle={{backgroundColor: 'rgb(250, 250, 250)'}} + titleStyle={{ fontWeight: 100, backgroundColor: colors.white }} + bodyStyle={{ backgroundColor: colors.dharmaDarkGrey }} + actionsContainerStyle={{ backgroundColor: colors.white }} autoScrollBodyContent={true} actions={dharmaDialogActions} open={this.state.isDharmaDialogVisible} > - {this.renderDharmaLoanFrame()} + {this._renderDharmaLoanFrame()} </Dialog> <AssetPicker userAddress={this.props.userAddress} @@ -351,58 +289,62 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala dispatcher={this.props.dispatcher} isOpen={this.state.isTokenPickerOpen} currentTokenAddress={''} - onTokenChosen={this.onAssetTokenPicked.bind(this)} + onTokenChosen={this._onAssetTokenPicked.bind(this)} tokenByAddress={this.props.tokenByAddress} tokenVisibility={this.state.isAddingToken ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED} /> </div> ); } - private renderTokenTableRows() { - if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== '') { + private _renderTokenTableRows() { + if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== BlockchainErrs.NoError) { return ''; } - const isSmallScreen = this.props.screenWidth === ScreenWidths.SM; + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const tokenColSpan = isSmallScreen ? TOKEN_COL_SPAN_SM : TOKEN_COL_SPAN_LG; const actionPaddingX = isSmallScreen ? 2 : 24; const allTokens = _.values(this.props.tokenByAddress); const trackedTokens = _.filter(allTokens, t => 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, - this.renderTokenRow.bind(this, tokenColSpan, actionPaddingX), + this._renderTokenRow.bind(this, tokenColSpan, actionPaddingX), ); return tableRows; } - private renderTokenRow(tokenColSpan: number, actionPaddingX: number, token: Token) { + private _renderTokenRow(tokenColSpan: number, actionPaddingX: number, token: Token) { const tokenState = this.props.tokenStateByAddress[token.address]; - const tokenLink = utils.getEtherScanLinkIfExists(token.address, this.props.networkId, - EtherscanLinkSuffixes.address); - const isMintable = _.includes(configs.symbolsOfMintableTokens, token.symbol) && - this.props.networkId !== constants.MAINNET_NETWORK_ID; + const tokenLink = utils.getEtherScanLinkIfExists( + token.address, + this.props.networkId, + EtherscanLinkSuffixes.Address, + ); + const isMintable = + _.includes(configs.SYMBOLS_OF_MINTABLE_TOKENS, token.symbol) && + this.props.networkId !== constants.NETWORK_ID_MAINNET; return ( - <TableRow key={token.address} style={{height: TOKEN_TABLE_ROW_HEIGHT}}> - <TableRowColumn - colSpan={tokenColSpan} - > - {_.isUndefined(tokenLink) ? - this.renderTokenName(token) : - <a href={tokenLink} target="_blank" style={{textDecoration: 'none'}}> - {this.renderTokenName(token)} + <TableRow key={token.address} style={{ height: TOKEN_TABLE_ROW_HEIGHT }}> + <TableRowColumn colSpan={tokenColSpan}> + {_.isUndefined(tokenLink) ? ( + this._renderTokenName(token) + ) : ( + <a href={tokenLink} target="_blank" style={{ textDecoration: 'none' }}> + {this._renderTokenName(token)} </a> - } + )} </TableRowColumn> - <TableRowColumn style={{paddingRight: 3, paddingLeft: 3}}> - {this.renderAmount(tokenState.balance, token.decimals)} {token.symbol} - {this.state.isZRXSpinnerVisible && token.symbol === ZRX_TOKEN_SYMBOL && - <span className="pl1"> - <i className="zmdi zmdi-spinner zmdi-hc-spin" /> - </span> - } + <TableRowColumn style={{ paddingRight: 3, paddingLeft: 3 }}> + {this._renderAmount(tokenState.balance, token.decimals)} {token.symbol} + {this.state.isZRXSpinnerVisible && + token.symbol === ZRX_TOKEN_SYMBOL && ( + <span className="pl1"> + <i className="zmdi zmdi-spinner zmdi-hc-spin" /> + </span> + )} </TableRowColumn> <TableRowColumn> <AllowanceToggle @@ -410,57 +352,49 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala dispatcher={this.props.dispatcher} token={token} tokenState={tokenState} - onErrorOccurred={this.onErrorOccurred.bind(this)} + onErrorOccurred={this._onErrorOccurred.bind(this)} userAddress={this.props.userAddress} /> </TableRowColumn> - <TableRowColumn - style={{paddingLeft: actionPaddingX, paddingRight: actionPaddingX}} - > - {isMintable && + <TableRowColumn style={{ paddingLeft: actionPaddingX, paddingRight: actionPaddingX }}> + {isMintable && ( <LifeCycleRaisedButton labelReady="Mint" - labelLoading={<span style={{fontSize: 12}}>Minting...</span>} + labelLoading={<span style={{ fontSize: 12 }}>Minting...</span>} labelComplete="Minted!" - onClickAsyncFn={this.onMintTestTokensAsync.bind(this, token)} + onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)} /> - } - {token.symbol === ETHER_TOKEN_SYMBOL && - <EthWethConversionButton - blockchain={this.props.blockchain} - dispatcher={this.props.dispatcher} - ethToken={this.getWrappedEthToken()} - ethTokenState={tokenState} - userEtherBalance={this.props.userEtherBalance} - onError={this.onEthWethConversionFailed.bind(this)} - /> - } - {token.symbol === ZRX_TOKEN_SYMBOL && this.props.networkId === constants.TESTNET_NETWORK_ID && - <LifeCycleRaisedButton - labelReady="Request" - labelLoading="Sending..." - labelComplete="Sent!" - onClickAsyncFn={this.faucetRequestAsync.bind(this, false)} - /> - } + )} + {token.symbol === ZRX_TOKEN_SYMBOL && + this.props.networkId === constants.NETWORK_ID_TESTNET && ( + <LifeCycleRaisedButton + labelReady="Request" + labelLoading="Sending..." + labelComplete="Sent!" + onClickAsyncFn={this._faucetRequestAsync.bind(this, false)} + /> + )} </TableRowColumn> - {this.props.screenWidth !== ScreenWidths.SM && + {this.props.screenWidth !== ScreenWidths.Sm && ( <TableRowColumn - style={{paddingLeft: actionPaddingX, paddingRight: actionPaddingX}} + style={{ + paddingLeft: actionPaddingX, + paddingRight: actionPaddingX, + }} > <SendButton blockchain={this.props.blockchain} dispatcher={this.props.dispatcher} token={token} tokenState={tokenState} - onError={this.onSendFailed.bind(this)} + onError={this._onSendFailed.bind(this)} /> </TableRowColumn> - } + )} </TableRow> ); } - private onAssetTokenPicked(tokenAddress: string) { + private _onAssetTokenPicked(tokenAddress: string) { if (_.isEmpty(tokenAddress)) { this.setState({ isTokenPickerOpen: false, @@ -468,13 +402,14 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala return; } const token = this.props.tokenByAddress[tokenAddress]; - const isDefaultTrackedToken = _.includes(configs.defaultTrackedTokenSymbols, token.symbol); + const isDefaultTrackedToken = _.includes(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, token.symbol); if (!this.state.isAddingToken && !isDefaultTrackedToken) { if (token.isRegistered) { // Remove the token from tracked tokens - const newToken = _.assign({}, token, { + const newToken = { + ...token, isTracked: false, - }); + }; this.props.dispatcher.updateTokenByAddress([newToken]); } else { this.props.dispatcher.removeTokenToTokenByAddress(token); @@ -488,82 +423,57 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala isTokenPickerOpen: false, }); } - private onEthWethConversionFailed() { - this.setState({ - errorType: BalanceErrs.wethConversionFailed, - }); - } - private onSendFailed() { + private _onSendFailed() { this.setState({ errorType: BalanceErrs.sendFailed, }); } - private renderAmount(amount: BigNumber, decimals: number) { + private _renderAmount(amount: BigNumber, decimals: number) { const unitAmount = ZeroEx.toUnitAmount(amount, decimals); return unitAmount.toNumber().toFixed(PRECISION); } - private renderTokenName(token: Token) { + private _renderTokenName(token: Token) { const tooltipId = `tooltip-${token.address}`; return ( <div className="flex"> <TokenIcon token={token} diameter={ICON_DIMENSION} /> - <div - data-tip={true} - data-for={tooltipId} - className="mt2 ml2 sm-hide xs-hide" - > + <div data-tip={true} data-for={tooltipId} className="mt2 ml2 sm-hide xs-hide"> {token.name} </div> <ReactTooltip id={tooltipId}>{token.address}</ReactTooltip> </div> ); } - private renderErrorDialogBody() { + private _renderErrorDialogBody() { switch (this.state.errorType) { case BalanceErrs.incorrectNetworkForFaucet: return ( <div> - Our faucet can only send test Ether to addresses on the {constants.TESTNET_NAME} - {' '}testnet (networkId {constants.TESTNET_NETWORK_ID}). 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. </div> ); case BalanceErrs.faucetRequestFailed: return ( <div> - 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. </div> ); case BalanceErrs.faucetQueueIsFull: - return ( - <div> - Our test Ether faucet queue is full. Please try requesting test Ether again later. - </div> - ); + return <div>Our test Ether faucet queue is full. Please try requesting test Ether again later.</div>; case BalanceErrs.mintingFailed: - return ( - <div> - Minting your test tokens failed unexpectedly. Please refresh the page and try again. - </div> - ); - - case BalanceErrs.wethConversionFailed: - return ( - <div> - Converting between Ether and Ether Tokens failed unexpectedly. - Please refresh the page and try again. - </div> - ); + return <div>Minting your test tokens failed unexpectedly. Please refresh the page and try again.</div>; case BalanceErrs.allowanceSettingFailed: return ( <div> - 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. </div> ); @@ -574,12 +484,12 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala throw utils.spawnSwitchErr('errorType', this.state.errorType); } } - private renderDharmaLoanFrame() { + private _renderDharmaLoanFrame() { if (utils.isUserOnMobile()) { return ( <h4 style={{ textAlign: 'center' }}> - 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. </h4> ); } else { @@ -592,20 +502,20 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala ); } } - private onErrorOccurred(errorType: BalanceErrs) { + private _onErrorOccurred(errorType: BalanceErrs) { this.setState({ errorType, }); } - private async onMintTestTokensAsync(token: Token): Promise<boolean> { + private async _onMintTestTokensAsync(token: Token): Promise<boolean> { try { await this.props.blockchain.mintTestTokensAsync(token); const amount = ZeroEx.toUnitAmount(constants.MINT_AMOUNT, token.decimals); this.props.dispatcher.showFlashMessage(`Successfully minted ${amount.toString(10)} ${token.symbol}`); return true; } catch (err) { - const errMsg = '' + err; - if (_.includes(errMsg, BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES)) { + const errMsg = `${err}`; + if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); return false; } @@ -614,14 +524,14 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala } utils.consoleLog(`Unexpected error encountered: ${err}`); utils.consoleLog(err.stack); - await errorReporter.reportAsync(err); this.setState({ errorType: BalanceErrs.mintingFailed, }); + await errorReporter.reportAsync(err); return false; } } - private async faucetRequestAsync(isEtherRequest: boolean): Promise<boolean> { + private async _faucetRequestAsync(isEtherRequest: boolean): Promise<boolean> { if (this.props.userAddress === '') { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); return false; @@ -629,7 +539,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala // If on another network other then the testnet our faucet serves test ether // from, we must show user an error message - if (this.props.blockchain.networkId !== constants.TESTNET_NETWORK_ID) { + if (this.props.blockchain.networkId !== constants.NETWORK_ID_TESTNET) { this.setState({ errorType: BalanceErrs.incorrectNetworkForFaucet, }); @@ -639,17 +549,18 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala await utils.sleepAsync(ARTIFICIAL_FAUCET_REQUEST_DELAY); const segment = isEtherRequest ? 'ether' : 'zrx'; - const response = await fetch(`${constants.ETHER_FAUCET_ENDPOINT}/${segment}/${this.props.userAddress}`); + const response = await fetch(`${constants.URL_ETHER_FAUCET}/${segment}/${this.props.userAddress}`); const responseBody = await response.text(); if (response.status !== constants.SUCCESS_STATUS) { utils.consoleLog(`Unexpected status code: ${response.status} -> ${responseBody}`); - await errorReporter.reportAsync(new Error(`Faucet returned non-200: ${JSON.stringify(response)}`)); - 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, }); + await errorReporter.reportAsync(new Error(`Faucet returned non-200: ${JSON.stringify(response)}`)); return false; } @@ -670,28 +581,23 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala } return true; } - private onErrorDialogToggle(isOpen: boolean) { + private _onErrorDialogToggle(isOpen: boolean) { this.setState({ errorType: undefined, }); } - private onDharmaDialogToggle() { + private _onDharmaDialogToggle() { this.setState({ isDharmaDialogVisible: !this.state.isDharmaDialogVisible, }); } - private getWrappedEthToken() { - const tokens = _.values(this.props.tokenByAddress); - const wrappedEthToken = _.find(tokens, {symbol: ETHER_TOKEN_SYMBOL}); - return wrappedEthToken; - } - private onAddTokenClicked() { + private _onAddTokenClicked() { this.setState({ isTokenPickerOpen: true, isAddingToken: true, }); } - private onRemoveTokenClicked() { + private _onRemoveTokenClicked() { this.setState({ isTokenPickerOpen: true, isAddingToken: false, |