diff options
Diffstat (limited to 'packages/website/ts/components')
37 files changed, 451 insertions, 451 deletions
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index 9a5cd90d7..900d0e193 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -31,7 +31,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp const hasWalletAddress = this.props.userAddress !== ''; return ( <Dialog - title={this.getTitle(hasWalletAddress)} + title={this._getTitle(hasWalletAddress)} titleStyle={{fontWeight: 100}} actions={dialogActions} open={this.props.isOpen} @@ -40,12 +40,12 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp autoScrollBodyContent={true} > <div className="pt2" style={{color: colors.grey700}}> - {this.renderExplanation(hasWalletAddress)} + {this._renderExplanation(hasWalletAddress)} </div> </Dialog> ); } - private getTitle(hasWalletAddress: boolean) { + private _getTitle(hasWalletAddress: boolean) { if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) { return '0x smart contracts not found'; } else if (!hasWalletAddress) { @@ -56,18 +56,18 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp return 'Unexpected error'; } } - private renderExplanation(hasWalletAddress: boolean) { + private _renderExplanation(hasWalletAddress: boolean) { if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) { - return this.renderContractsNotDeployedExplanation(); + return this._renderContractsNotDeployedExplanation(); } else if (!hasWalletAddress) { - return this.renderNoWalletFoundExplanation(); + return this._renderNoWalletFoundExplanation(); } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) { - return this.renderDisconnectedFromNode(); + return this._renderDisconnectedFromNode(); } else { - return this.renderUnexpectedErrorExplanation(); + return this._renderUnexpectedErrorExplanation(); } } - private renderDisconnectedFromNode() { + private _renderDisconnectedFromNode() { return ( <div> You were disconnected from the backing Ethereum node. @@ -78,14 +78,14 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp </div> ); } - private renderUnexpectedErrorExplanation() { + private _renderUnexpectedErrorExplanation() { return ( <div> We encountered an unexpected error. Please try refreshing the page. </div> ); } - private renderNoWalletFoundExplanation() { + private _renderNoWalletFoundExplanation() { return ( <div> <div> @@ -122,7 +122,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp </div> ); } - private renderContractsNotDeployedExplanation() { + private _renderContractsNotDeployedExplanation() { return ( <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 c65db1d4a..d78cbdc29 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -37,13 +37,13 @@ export class EthWethConversionDialog extends <FlatButton key="cancel" label="Cancel" - onTouchTap={this.onCancel.bind(this)} + onTouchTap={this._onCancel.bind(this)} />, <FlatButton key="convert" label="Convert" primary={true} - onTouchTap={this.onConvertClick.bind(this)} + onTouchTap={this._onConvertClick.bind(this)} />, ]; const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH'; @@ -55,11 +55,11 @@ export class EthWethConversionDialog extends contentStyle={{width: 448}} open={this.props.isOpen} > - {this.renderConversionDialogBody()} + {this._renderConversionDialogBody()} </Dialog> ); } - private renderConversionDialogBody() { + 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.'; @@ -71,14 +71,14 @@ export class EthWethConversionDialog extends </div> <div className="mx-auto" style={{maxWidth: 312}}> <div className="flex"> - {this.renderCurrency(isWrappedVersion)} + {this._renderCurrency(isWrappedVersion)} <div style={{paddingTop: 68}}> <i style={{fontSize: 28, color: colors.darkBlue}} className="zmdi zmdi-arrow-right" /> </div> - {this.renderCurrency(!isWrappedVersion)} + {this._renderCurrency(!isWrappedVersion)} </div> <div className="pt2 mx-auto" @@ -91,14 +91,14 @@ export class EthWethConversionDialog extends shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} shouldCheckBalance={true} shouldCheckAllowance={false} - onChange={this.onValueChange.bind(this)} + onChange={this._onValueChange.bind(this)} amount={this.state.value} onVisitBalancesPageClick={this.props.onCancelled} /> : <EthAmountInput balance={this.props.etherBalance} amount={this.state.value} - onChange={this.onValueChange.bind(this)} + onChange={this._onValueChange.bind(this)} shouldCheckBalance={true} shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} onVisitBalancesPageClick={this.props.onCancelled} @@ -112,7 +112,7 @@ export class EthWethConversionDialog extends {this.props.direction === Side.Receive && <div className="right" - onClick={this.onMaxClick.bind(this)} + onClick={this._onMaxClick.bind(this)} style={{color: colors.darkBlue, textDecoration: 'underline', cursor: 'pointer'}} > Max @@ -124,7 +124,7 @@ export class EthWethConversionDialog extends </div> ); } - private renderCurrency(isWrappedVersion: boolean) { + private _renderCurrency(isWrappedVersion: boolean) { const name = isWrappedVersion ? 'Wrapped Ether' : 'Ether'; const iconUrl = isWrappedVersion ? '/images/token_icons/ether_erc20.png' : '/images/ether.png'; const symbol = isWrappedVersion ? 'WETH' : 'ETH'; @@ -145,18 +145,18 @@ export class EthWethConversionDialog extends </div> ); } - private onMaxClick() { + private _onMaxClick() { this.setState({ value: this.props.tokenState.balance, }); } - private onValueChange(isValid: boolean, amount?: BigNumber) { + private _onValueChange(isValid: boolean, amount?: BigNumber) { this.setState({ value: amount, hasErrors: !isValid, }); } - private onConvertClick() { + private _onConvertClick() { if (this.state.hasErrors) { this.setState({ shouldShowIncompleteErrs: true, @@ -169,7 +169,7 @@ export class EthWethConversionDialog extends this.props.onComplete(this.props.direction, value); } } - private onCancel() { + private _onCancel() { this.setState({ value: undefined, }); diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index ddd1f2cf2..cc68ef2df 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -62,7 +62,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, <FlatButton key="ledgerConnectCancel" label="Cancel" - onTouchTap={this.onClose.bind(this)} + onTouchTap={this._onClose.bind(this)} />, ]; const dialogTitle = this.state.stepIndex === LedgerSteps.CONNECT ? @@ -74,22 +74,22 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, titleStyle={{fontWeight: 100}} actions={dialogActions} open={this.props.isOpen} - onRequestClose={this.onClose.bind(this)} + onRequestClose={this._onClose.bind(this)} autoScrollBodyContent={true} bodyStyle={{paddingBottom: 0}} > <div style={{color: colors.grey700, paddingTop: 1}}> {this.state.stepIndex === LedgerSteps.CONNECT && - this.renderConnectStep() + this._renderConnectStep() } {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && - this.renderSelectAddressStep() + this._renderSelectAddressStep() } </div> </Dialog> ); } - private renderConnectStep() { + private _renderConnectStep() { return ( <div> <div className="h4 pt3"> @@ -113,7 +113,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, labelReady="Connect to Ledger" labelLoading="Connecting..." labelComplete="Connected!" - onClickAsyncFn={this.onConnectLedgerClickAsync.bind(this, true)} + onClickAsyncFn={this._onConnectLedgerClickAsync.bind(this, true)} /> {this.state.didConnectFail && <div className="pt2 left-align" style={{color: colors.red200}}> @@ -124,13 +124,13 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, </div> ); } - private renderSelectAddressStep() { + private _renderSelectAddressStep() { return ( <div> <div> <Table bodyStyle={{height: 300}} - onRowSelection={this.onAddressSelected.bind(this)} + onRowSelection={this._onAddressSelected.bind(this)} > <TableHeader displaySelectAll={false}> <TableRow> @@ -139,7 +139,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, </TableRow> </TableHeader> <TableBody> - {this.renderAddressTableRows()} + {this._renderAddressTableRows()} </TableBody> </Table> </div> @@ -151,7 +151,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, floatingLabelText="Update path derivation (advanced)" value={this.state.derivationPath} errorText={this.state.derivationErrMsg} - onChange={this.onDerivationPathChanged.bind(this)} + onChange={this._onDerivationPathChanged.bind(this)} /> </div> <div className="pl2" style={{paddingTop: 28}}> @@ -159,14 +159,14 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, labelReady="Update" labelLoading="Updating..." labelComplete="Updated!" - onClickAsyncFn={this.onFetchAddressesForDerivationPathAsync.bind(this, true)} + onClickAsyncFn={this._onFetchAddressesForDerivationPathAsync.bind(this, true)} /> </div> </div> </div> ); } - private renderAddressTableRows() { + private _renderAddressTableRows() { const rows = _.map(this.state.userAddresses, (userAddress: string, i: number) => { const balance = this.state.addressBalances[i]; const addressTooltipId = `address-${userAddress}`; @@ -201,14 +201,14 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, }); return rows; } - private onClose() { + private _onClose() { this.setState({ didConnectFail: false, }); const isOpen = false; this.props.toggleDialogFn(isOpen); } - private onAddressSelected(selectedRowIndexes: number[]) { + private _onAddressSelected(selectedRowIndexes: number[]) { const selectedRowIndex = selectedRowIndexes[0]; this.props.blockchain.updateLedgerDerivationIndex(selectedRowIndex); const selectedAddress = this.state.userAddresses[selectedRowIndex]; @@ -222,13 +222,13 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, const isOpen = false; this.props.toggleDialogFn(isOpen); } - private async onFetchAddressesForDerivationPathAsync() { + private async _onFetchAddressesForDerivationPathAsync() { const currentlySetPath = this.props.blockchain.getLedgerDerivationPathIfExists(); if (currentlySetPath === this.state.derivationPath) { return; } this.props.blockchain.updateLedgerDerivationPathIfExists(this.state.derivationPath); - const didSucceed = await this.fetchAddressesAndBalancesAsync(); + const didSucceed = await this._fetchAddressesAndBalancesAsync(); if (!didSucceed) { this.setState({ derivationErrMsg: 'Failed to connect to Ledger.', @@ -236,11 +236,11 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, } return didSucceed; } - private async fetchAddressesAndBalancesAsync() { + private async _fetchAddressesAndBalancesAsync() { let userAddresses: string[]; const addressBalances: BigNumber[] = []; try { - userAddresses = await this.getUserAddressesAsync(); + userAddresses = await this._getUserAddressesAsync(); for (const address of userAddresses) { const balance = await this.props.blockchain.getBalanceInEthAsync(address); addressBalances.push(balance); @@ -258,7 +258,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, }); return true; } - private onDerivationPathChanged(e: any, derivationPath: string) { + private _onDerivationPathChanged(e: any, derivationPath: string) { let derivationErrMsg = ''; if (!_.startsWith(derivationPath, VALID_ETHEREUM_DERIVATION_PATH_PREFIX)) { derivationErrMsg = 'Must be valid Ethereum path.'; @@ -269,8 +269,8 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, derivationErrMsg, }); } - private async onConnectLedgerClickAsync() { - const didSucceed = await this.fetchAddressesAndBalancesAsync(); + private async _onConnectLedgerClickAsync() { + const didSucceed = await this._fetchAddressesAndBalancesAsync(); if (didSucceed) { this.setState({ stepIndex: LedgerSteps.SELECT_ADDRESS, @@ -278,7 +278,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, } return didSucceed; } - private async getUserAddressesAsync(): Promise<string[]> { + private async _getUserAddressesAsync(): Promise<string[]> { let userAddresses: string[]; userAddresses = await this.props.blockchain.getUserAccountsAsync(); diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx index 0f3516993..9a85ea8b1 100644 --- a/packages/website/ts/components/dialogs/send_dialog.tsx +++ b/packages/website/ts/components/dialogs/send_dialog.tsx @@ -36,14 +36,14 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState <FlatButton key="cancelTransfer" label="Cancel" - onTouchTap={this.onCancel.bind(this)} + onTouchTap={this._onCancel.bind(this)} />, <FlatButton key="sendTransfer" - disabled={this.hasErrors()} + disabled={this._hasErrors()} label="Send" primary={true} - onTouchTap={this.onSendClick.bind(this)} + onTouchTap={this._onSendClick.bind(this)} />, ]; return ( @@ -53,17 +53,17 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState actions={transferDialogActions} open={this.props.isOpen} > - {this.renderSendDialogBody()} + {this._renderSendDialogBody()} </Dialog> ); } - private renderSendDialogBody() { + private _renderSendDialogBody() { return ( <div className="mx-auto" style={{maxWidth: 300}}> <div style={{height: 80}}> <AddressInput initialAddress={this.state.recipient} - updateAddress={this.onRecipientChange.bind(this)} + updateAddress={this._onRecipientChange.bind(this)} isRequired={true} label={'Recipient address'} hintText={'Address'} @@ -76,27 +76,27 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} shouldCheckBalance={true} shouldCheckAllowance={false} - onChange={this.onValueChange.bind(this)} + onChange={this._onValueChange.bind(this)} amount={this.state.value} onVisitBalancesPageClick={this.props.onCancelled} /> </div> ); } - private onRecipientChange(recipient?: string) { + private _onRecipientChange(recipient?: string) { this.setState({ shouldShowIncompleteErrs: false, recipient, }); } - private onValueChange(isValid: boolean, amount?: BigNumber) { + private _onValueChange(isValid: boolean, amount?: BigNumber) { this.setState({ isAmountValid: isValid, value: amount, }); } - private onSendClick() { - if (this.hasErrors()) { + private _onSendClick() { + if (this._hasErrors()) { this.setState({ shouldShowIncompleteErrs: true, }); @@ -109,13 +109,13 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState this.props.onComplete(this.state.recipient, value); } } - private onCancel() { + private _onCancel() { this.setState({ value: undefined, }); this.props.onCancelled(); } - private hasErrors() { + private _hasErrors() { 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 f17893a83..9e00b4110 100644 --- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx +++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx @@ -41,12 +41,12 @@ export class TrackTokenConfirmationDialog extends <FlatButton key="trackNo" label="No" - onTouchTap={this.onTrackConfirmationRespondedAsync.bind(this, false)} + onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)} />, <FlatButton key="trackYes" label="Yes" - onTouchTap={this.onTrackConfirmationRespondedAsync.bind(this, true)} + onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)} />, ]} open={this.props.isOpen} @@ -64,7 +64,7 @@ export class TrackTokenConfirmationDialog extends </Dialog> ); } - private async onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) { + private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) { if (!didUserAcceptTracking) { this.props.onToggleDialog(didUserAcceptTracking); return; diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index f45b72d9b..f2aee9d6d 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -59,13 +59,13 @@ export class EthWethConversionButton extends labelStyle={labelStyle} disabled={this.props.isDisabled || this.state.isEthConversionHappening} label={this.state.isEthConversionHappening ? inProgressLabel : callToActionLabel} - onClick={this.toggleConversionDialog.bind(this)} + onClick={this._toggleConversionDialog.bind(this)} /> <EthWethConversionDialog direction={this.props.direction} isOpen={this.state.isEthConversionDialogVisible} - onComplete={this.onConversionAmountSelectedAsync.bind(this)} - onCancelled={this.toggleConversionDialog.bind(this)} + onComplete={this._onConversionAmountSelectedAsync.bind(this)} + onCancelled={this._toggleConversionDialog.bind(this)} etherBalance={this.props.userEtherBalance} token={this.props.ethToken} tokenState={this.props.ethTokenState} @@ -73,16 +73,16 @@ export class EthWethConversionButton extends </div> ); } - private toggleConversionDialog() { + private _toggleConversionDialog() { this.setState({ isEthConversionDialogVisible: !this.state.isEthConversionDialogVisible, }); } - private async onConversionAmountSelectedAsync(direction: Side, value: BigNumber) { + private async _onConversionAmountSelectedAsync(direction: Side, value: BigNumber) { this.setState({ isEthConversionHappening: true, }); - this.toggleConversionDialog(); + this._toggleConversionDialog(); const token = this.props.ethToken; const tokenState = this.props.ethTokenState; let balance = tokenState.balance; diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index bdd4664e8..934df9176 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -61,7 +61,7 @@ interface EthWrappersState { export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersState> { constructor(props: EthWrappersProps) { super(props); - const outdatedWETHAddresses = this.getOutdatedWETHAddresses(); + const outdatedWETHAddresses = this._getOutdatedWETHAddresses(); const outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded = {}; const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {}; _.each(outdatedWETHAddresses, outdatedWETHAddress => { @@ -79,7 +79,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt public componentDidMount() { window.scrollTo(0, 0); // tslint:disable-next-line:no-floating-promises - this.fetchOutdatedWETHStateAsync(); + this._fetchOutdatedWETHStateAsync(); } public render() { const tokens = _.values(this.props.tokenByAddress); @@ -90,7 +90,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt const etherscanUrl = utils.getEtherScanLinkIfExists( etherToken.address, this.props.networkId, EtherscanLinkSuffixes.Address, ); - const tokenLabel = this.renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH); + const tokenLabel = this._renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH); return ( <div className="clearfix lg-px4 md-px4 sm-px2" style={{minHeight: 600}}> <div className="relative"> @@ -125,7 +125,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableHeaderColumn>ETH Token</TableHeaderColumn> <TableHeaderColumn>Balance</TableHeaderColumn> <TableHeaderColumn className="center"> - {this.renderActionColumnTitle(isBidirectional)} + {this._renderActionColumnTitle(isBidirectional)} </TableHeaderColumn> </TableRow> </TableHeader> @@ -162,7 +162,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt </TableRow> <TableRow key="WETH"> <TableRowColumn className="py1"> - {this.renderTokenLink(tokenLabel, etherscanUrl)} + {this._renderTokenLink(tokenLabel, etherscanUrl)} </TableRowColumn> <TableRowColumn> {wethBalance.toFixed(PRECISION)} WETH @@ -207,12 +207,12 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableHeaderColumn>WETH Version</TableHeaderColumn> <TableHeaderColumn>Balance</TableHeaderColumn> <TableHeaderColumn className="center"> - {this.renderActionColumnTitle(!isBidirectional)} + {this._renderActionColumnTitle(!isBidirectional)} </TableHeaderColumn> </TableRow> </TableHeader> <TableBody displayRowCheckbox={false}> - {this.renderOutdatedWeths(etherToken, etherTokenState)} + {this._renderOutdatedWeths(etherToken, etherTokenState)} </TableBody> </Table> </div> @@ -220,7 +220,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt </div> ); } - private renderActionColumnTitle(isBidirectional: boolean) { + private _renderActionColumnTitle(isBidirectional: boolean) { let iconClass = 'zmdi-long-arrow-right'; let leftSymbol = 'WETH'; let rightSymbol = 'ETH'; @@ -242,7 +242,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt </div> ); } - private renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState) { + private _renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState) { const rows = _.map(configs.OUTDATED_WRAPPED_ETHERS, (outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => { const outdatedWETHIfExists = outdatedWETHByNetworkId[this.props.networkId]; @@ -269,17 +269,17 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH, ).toFixed(PRECISION) : undefined; - const onConversionSuccessful = this.onOutdatedConversionSuccessfulAsync.bind( + const onConversionSuccessful = this._onOutdatedConversionSuccessfulAsync.bind( this, outdatedWETHIfExists.address, ); const etherscanUrl = utils.getEtherScanLinkIfExists( outdatedWETHIfExists.address, this.props.networkId, EtherscanLinkSuffixes.Address, ); - const tokenLabel = this.renderToken(dateRange, outdatedEtherToken.address, OUTDATED_WETH_ICON_PATH); + const tokenLabel = this._renderToken(dateRange, outdatedEtherToken.address, OUTDATED_WETH_ICON_PATH); return ( <TableRow key={`weth-${outdatedWETHIfExists.address}`}> <TableRowColumn className="py1"> - {this.renderTokenLink(tokenLabel, etherscanUrl)} + {this._renderTokenLink(tokenLabel, etherscanUrl)} </TableRowColumn> <TableRowColumn> {isStateLoaded ? @@ -305,7 +305,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt }); return rows; } - private renderTokenLink(tokenLabel: React.ReactNode, etherscanUrl: string) { + private _renderTokenLink(tokenLabel: React.ReactNode, etherscanUrl: string) { return ( <span> {_.isUndefined(etherscanUrl) ? @@ -317,7 +317,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt </span> ); } - private renderToken(name: string, address: string, imgPath: string) { + private _renderToken(name: string, address: string, imgPath: string) { const tooltipId = `tooltip-${address}`; return ( <div className="flex"> @@ -340,7 +340,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt </div> ); } - private async onOutdatedConversionSuccessfulAsync(outdatedWETHAddress: string) { + private async _onOutdatedConversionSuccessfulAsync(outdatedWETHAddress: string) { this.setState({ outdatedWETHAddressToIsStateLoaded: { ...this.state.outdatedWETHAddressToIsStateLoaded, @@ -364,8 +364,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt }, }); } - private async fetchOutdatedWETHStateAsync() { - const outdatedWETHAddresses = this.getOutdatedWETHAddresses(); + private async _fetchOutdatedWETHStateAsync() { + const outdatedWETHAddresses = this._getOutdatedWETHAddresses(); const outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded = {}; const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {}; for (const address of outdatedWETHAddresses) { @@ -383,7 +383,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt outdatedWETHAddressToIsStateLoaded, }); } - private getOutdatedWETHAddresses(): string[] { + private _getOutdatedWETHAddresses(): string[] { const outdatedWETHAddresses = _.compact(_.map(configs.OUTDATED_WRAPPED_ETHERS, outdatedWrappedEtherByNetwork => { const outdatedWrappedEtherIfExists = outdatedWrappedEtherByNetwork[this.props.networkId]; diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 73850f3b9..abb46f7f2 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -66,7 +66,7 @@ interface FillOrderState { } export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { - private validator: SchemaValidator; + private _validator: SchemaValidator; constructor(props: FillOrderProps) { super(props); this.state = { @@ -87,12 +87,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { isConfirmingTokenTracking: false, tokensToTrack: [], }; - this.validator = new SchemaValidator(); + this._validator = new SchemaValidator(); } public componentWillMount() { if (!_.isEmpty(this.state.orderJSON)) { // tslint:disable-next-line:no-floating-promises - this.validateFillOrderFireAndForgetAsync(this.state.orderJSON); + this._validateFillOrderFireAndForgetAsync(this.state.orderJSON); } } public componentDidMount() { @@ -115,15 +115,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { tokenByAddress={this.props.tokenByAddress} networkId={this.props.networkId} orderJSON={this.state.orderJSON} - onFillOrderJSONChanged={this.onFillOrderJSONChanged.bind(this)} + onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)} /> - {this.renderOrderJsonNotices()} + {this._renderOrderJsonNotices()} </div> } <div> {!_.isUndefined(this.state.parsedOrder) && this.state.didOrderValidationRun && this.state.areAllInvolvedTokensTracked && - this.renderVisualOrder() + this._renderVisualOrder() } </div> {this.props.isOrderInUrl && @@ -140,17 +140,17 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { tokenByAddress={this.props.tokenByAddress} networkId={this.props.networkId} orderJSON={this.state.orderJSON} - onFillOrderJSONChanged={this.onFillOrderJSONChanged.bind(this)} + onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)} /> </CardText> </Card> - {this.renderOrderJsonNotices()} + {this._renderOrderJsonNotices()} </div> } </div> <FillWarningDialog isOpen={this.state.isFillWarningDialogOpen} - onToggleDialog={this.onFillWarningClosed.bind(this)} + onToggleDialog={this._onFillWarningClosed.bind(this)} /> <TrackTokenConfirmationDialog userAddress={this.props.userAddress} @@ -160,12 +160,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { dispatcher={this.props.dispatcher} tokens={this.state.tokensToTrack} isOpen={this.state.isConfirmingTokenTracking} - onToggleDialog={this.onToggleTrackConfirmDialog.bind(this)} + onToggleDialog={this._onToggleTrackConfirmDialog.bind(this)} /> </div> ); } - private renderOrderJsonNotices() { + private _renderOrderJsonNotices() { return ( <div> {!_.isUndefined(this.props.initialOrder) && !this.state.didOrderValidationRun && @@ -182,7 +182,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { </div> ); } - private renderVisualOrder() { + private _renderVisualOrder() { const takerTokenAddress = this.state.parsedOrder.taker.token.address; const takerToken = this.props.tokenByAddress[takerTokenAddress]; const orderTakerAmount = new BigNumber(this.state.parsedOrder.taker.amount); @@ -211,7 +211,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { let orderReceiveAmount = 0; if (!_.isUndefined(this.props.orderFillAmount)) { const orderReceiveAmountBigNumber = exchangeRate.mul(this.props.orderFillAmount); - orderReceiveAmount = this.formatCurrencyAmount(orderReceiveAmountBigNumber, makerToken.decimals); + orderReceiveAmount = this._formatCurrencyAmount(orderReceiveAmountBigNumber, makerToken.decimals); } const isUserMaker = !_.isUndefined(this.state.parsedOrder) && this.state.parsedOrder.maker.address === this.props.userAddress; @@ -261,7 +261,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { <div className="clearfix mx-auto relative" style={{width: 235, height: 108}}> <TokenAmountInput label="Fill amount" - onChange={this.onFillAmountChange.bind(this)} + onChange={this._onFillAmountChange.bind(this)} shouldShowIncompleteErrs={false} token={fillToken} tokenState={fillTokenState} @@ -284,12 +284,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { style={{width: '100%'}} disabled={this.state.isCancelling} label={this.state.isCancelling ? 'Cancelling order...' : 'Cancel order'} - onClick={this.onCancelOrderClickFireAndForgetAsync.bind(this)} + onClick={this._onCancelOrderClickFireAndForgetAsync.bind(this)} /> {this.state.didCancelOrderSucceed && <Alert type={AlertTypes.SUCCESS} - message={this.renderCancelSuccessMsg()} + message={this._renderCancelSuccessMsg()} /> } </div> : @@ -298,7 +298,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { style={{width: '100%'}} disabled={this.state.isFilling} label={this.state.isFilling ? 'Filling order...' : 'Fill order'} - onClick={this.onFillOrderClick.bind(this)} + onClick={this._onFillOrderClick.bind(this)} /> {!_.isEmpty(this.state.globalErrMsg) && <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} /> @@ -306,7 +306,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { {this.state.didFillOrderSucceed && <Alert type={AlertTypes.SUCCESS} - message={this.renderFillSuccessMsg()} + message={this._renderFillSuccessMsg()} /> } </div> @@ -315,7 +315,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { </div> ); } - private renderFillSuccessMsg() { + private _renderFillSuccessMsg() { return ( <div> Order successfully filled. See the trade details in your{' '} @@ -328,45 +328,45 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { </div> ); } - private renderCancelSuccessMsg() { + private _renderCancelSuccessMsg() { return ( <div> Order successfully cancelled. </div> ); } - private onFillOrderClick() { + private _onFillOrderClick() { if (!this.state.isMakerTokenAddressInRegistry || !this.state.isTakerTokenAddressInRegistry) { this.setState({ isFillWarningDialogOpen: true, }); } else { // tslint:disable-next-line:no-floating-promises - this.onFillOrderClickFireAndForgetAsync(); + this._onFillOrderClickFireAndForgetAsync(); } } - private onFillWarningClosed(didUserCancel: boolean) { + private _onFillWarningClosed(didUserCancel: boolean) { this.setState({ isFillWarningDialogOpen: false, }); if (!didUserCancel) { // tslint:disable-next-line:no-floating-promises - this.onFillOrderClickFireAndForgetAsync(); + this._onFillOrderClickFireAndForgetAsync(); } } - private onFillAmountChange(isValid: boolean, amount?: BigNumber) { + private _onFillAmountChange(isValid: boolean, amount?: BigNumber) { this.props.dispatcher.updateOrderFillAmount(amount); } - private onFillOrderJSONChanged(event: any) { + private _onFillOrderJSONChanged(event: any) { const orderJSON = event.target.value; this.setState({ didOrderValidationRun: _.isEmpty(orderJSON) && _.isEmpty(this.state.orderJSONErrMsg), didFillOrderSucceed: false, }); // tslint:disable-next-line:no-floating-promises - this.validateFillOrderFireAndForgetAsync(orderJSON); + this._validateFillOrderFireAndForgetAsync(orderJSON); } - private async checkForUntrackedTokensAndAskToAdd() { + private async _checkForUntrackedTokensAndAskToAdd() { if (!_.isEmpty(this.state.orderJSONErrMsg)) { return; } @@ -410,12 +410,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { }); } } - private async validateFillOrderFireAndForgetAsync(orderJSON: string) { + private async _validateFillOrderFireAndForgetAsync(orderJSON: string) { let orderJSONErrMsg = ''; let parsedOrder: Order; try { const order = JSON.parse(orderJSON); - const validationResult = this.validator.validate(order, orderSchema); + const validationResult = this._validator.validate(order, orderSchema); if (validationResult.errors.length > 0) { orderJSONErrMsg = 'Submitted order JSON is not a valid order'; utils.consoleLog(`Unexpected order JSON validation error: ${validationResult.errors.join(', ')}`); @@ -508,9 +508,9 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { unavailableTakerAmount, }); - await this.checkForUntrackedTokensAndAskToAdd(); + await this._checkForUntrackedTokensAndAskToAdd(); } - private async onFillOrderClickFireAndForgetAsync(): Promise<void> { + private async _onFillOrderClickFireAndForgetAsync(): Promise<void> { if (!_.isEmpty(this.props.blockchainErr) || _.isEmpty(this.props.userAddress)) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); return; @@ -601,7 +601,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { return; } } - private async onCancelOrderClickFireAndForgetAsync(): Promise<void> { + private async _onCancelOrderClickFireAndForgetAsync(): Promise<void> { if (!_.isEmpty(this.props.blockchainErr) || _.isEmpty(this.props.userAddress)) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); return; @@ -684,12 +684,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { return; } } - private formatCurrencyAmount(amount: BigNumber, decimals: number): number { + private _formatCurrencyAmount(amount: BigNumber, decimals: number): number { const unitAmount = ZeroEx.toUnitAmount(amount, decimals); const roundedUnitAmount = Math.round(unitAmount.toNumber() * 100000) / 100000; return roundedUnitAmount; } - private onToggleTrackConfirmDialog(didConfirmTokenTracking: boolean) { + private _onToggleTrackConfirmDialog(didConfirmTokenTracking: boolean) { if (!didConfirmTokenTracking) { this.setState({ orderJSON: '', diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 0f65405d9..4b9942276 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -133,20 +133,20 @@ export class Footer extends React.Component<FooterProps, FooterState> { <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4"> <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> - {this.renderHeader(Sections.Documentation)} - {_.map(menuItemsBySection[Sections.Documentation], this.renderMenuItem.bind(this))} + {this._renderHeader(Sections.Documentation)} + {_.map(menuItemsBySection[Sections.Documentation], this._renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2"> <div className="lg-right md-right sm-center"> - {this.renderHeader(Sections.Community)} - {_.map(menuItemsBySection[Sections.Community], this.renderMenuItem.bind(this))} + {this._renderHeader(Sections.Community)} + {_.map(menuItemsBySection[Sections.Community], this._renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> - {this.renderHeader(Sections.Organization)} - {_.map(menuItemsBySection[Sections.Organization], this.renderMenuItem.bind(this))} + {this._renderHeader(Sections.Organization)} + {_.map(menuItemsBySection[Sections.Organization], this._renderMenuItem.bind(this))} </div> </div> </div> @@ -154,14 +154,14 @@ export class Footer extends React.Component<FooterProps, FooterState> { </div> ); } - private renderIcon(fileName: string) { + private _renderIcon(fileName: string) { return ( <div style={{height: ICON_DIMENSION, width: ICON_DIMENSION}}> <img src={`/images/social/${fileName}`} style={{width: ICON_DIMENSION}} /> </div> ); } - private renderMenuItem(item: FooterMenuItem) { + private _renderMenuItem(item: FooterMenuItem) { const iconIfExists = titleToIcon[item.title]; return ( <div @@ -180,7 +180,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { <div className="sm-mx-auto" style={{width: 65}}> <div className="flex"> <div className="pr1"> - {this.renderIcon(iconIfExists)} + {this._renderIcon(iconIfExists)} </div> <div>{item.title}</div> </div> @@ -196,7 +196,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { <div> {!_.isUndefined(iconIfExists) && <div className="pr1"> - {this.renderIcon(iconIfExists)} + {this._renderIcon(iconIfExists)} </div> } {item.title} @@ -206,7 +206,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { </div> ); } - private renderHeader(title: string) { + private _renderHeader(title: string) { const headerStyle = { textTransform: 'uppercase', color: colors.grey400, diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index 51edd2308..407070607 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -47,7 +47,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt public static defaultProps: Partial<AssetPickerProps> = { tokenVisibility: TokenVisibility.ALL, }; - private dialogConfigsByAssetView: {[assetView: string]: DialogConfigs}; + private _dialogConfigsByAssetView: {[assetView: string]: DialogConfigs}; constructor(props: AssetPickerProps) { super(props); this.state = { @@ -56,7 +56,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt chosenTrackTokenAddress: undefined, isAddingTokenToTracked: false, }; - this.dialogConfigsByAssetView = { + this._dialogConfigsByAssetView = { [AssetViews.ASSET_PICKER]: { title: 'Select token', isModal: false, @@ -74,19 +74,19 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt <FlatButton key="noTracking" label="No" - onTouchTap={this.onTrackConfirmationRespondedAsync.bind(this, false)} + onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)} />, <FlatButton key="yesTrack" label="Yes" - onTouchTap={this.onTrackConfirmationRespondedAsync.bind(this, true)} + onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)} />, ], }, }; } public render() { - const dialogConfigs: DialogConfigs = this.dialogConfigsByAssetView[this.state.assetView]; + const dialogConfigs: DialogConfigs = this._dialogConfigsByAssetView[this.state.assetView]; return ( <Dialog title={dialogConfigs.title} @@ -94,25 +94,25 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt modal={dialogConfigs.isModal} open={this.props.isOpen} actions={dialogConfigs.actions} - onRequestClose={this.onCloseDialog.bind(this)} + onRequestClose={this._onCloseDialog.bind(this)} > {this.state.assetView === AssetViews.ASSET_PICKER && - this.renderAssetPicker() + this._renderAssetPicker() } {this.state.assetView === AssetViews.NEW_TOKEN_FORM && <NewTokenForm blockchain={this.props.blockchain} - onNewTokenSubmitted={this.onNewTokenSubmitted.bind(this)} + onNewTokenSubmitted={this._onNewTokenSubmitted.bind(this)} tokenByAddress={this.props.tokenByAddress} /> } {this.state.assetView === AssetViews.CONFIRM_TRACK_TOKEN && - this.renderConfirmTrackToken() + this._renderConfirmTrackToken() } </Dialog> ); } - private renderConfirmTrackToken() { + private _renderConfirmTrackToken() { const token = this.props.tokenByAddress[this.state.chosenTrackTokenAddress]; return ( <TrackTokenConfirmation @@ -123,17 +123,17 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt /> ); } - private renderAssetPicker() { + private _renderAssetPicker() { return ( <div className="clearfix flex flex-wrap" style={{overflowY: 'auto', maxWidth: 720, maxHeight: 356, marginBottom: 10}} > - {this.renderGridTiles()} + {this._renderGridTiles()} </div> ); } - private renderGridTiles() { + private _renderGridTiles() { let isHovered; let tileStyles; const gridTiles = _.map(this.props.tokenByAddress, (token: Token, address: string) => { @@ -151,9 +151,9 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt key={address} style={{width: TILE_DIMENSION, height: TILE_DIMENSION, ...tileStyles}} className="p2 mx-auto" - onClick={this.onChooseToken.bind(this, address)} - onMouseEnter={this.onToggleHover.bind(this, address, true)} - onMouseLeave={this.onToggleHover.bind(this, address, false)} + onClick={this._onChooseToken.bind(this, address)} + onMouseEnter={this._onToggleHover.bind(this, address, true)} + onMouseLeave={this._onToggleHover.bind(this, address, false)} > <div className="p1 center"> <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} /> @@ -174,9 +174,9 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt key={otherTokenKey} style={{width: TILE_DIMENSION, height: TILE_DIMENSION, ...tileStyles}} className="p2 mx-auto" - onClick={this.onCustomAssetChosen.bind(this)} - onMouseEnter={this.onToggleHover.bind(this, otherTokenKey, true)} - onMouseLeave={this.onToggleHover.bind(this, otherTokenKey, false)} + onClick={this._onCustomAssetChosen.bind(this)} + onMouseEnter={this._onToggleHover.bind(this, otherTokenKey, true)} + onMouseLeave={this._onToggleHover.bind(this, otherTokenKey, false)} > <div className="p1 center"> <i @@ -190,19 +190,19 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt } return gridTiles; } - private onToggleHover(address: string, isHovered: boolean) { + private _onToggleHover(address: string, isHovered: boolean) { const hoveredAddress = isHovered ? address : undefined; this.setState({ hoveredAddress, }); } - private onCloseDialog() { + private _onCloseDialog() { this.setState({ assetView: AssetViews.ASSET_PICKER, }); this.props.onTokenChosen(this.props.currentTokenAddress); } - private onChooseToken(tokenAddress: string) { + private _onChooseToken(tokenAddress: string) { const token = this.props.tokenByAddress[tokenAddress]; if (token.isTracked) { this.props.onTokenChosen(tokenAddress); @@ -213,12 +213,12 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt }); } } - private onCustomAssetChosen() { + private _onCustomAssetChosen() { this.setState({ assetView: AssetViews.NEW_TOKEN_FORM, }); } - private onNewTokenSubmitted(newToken: Token, newTokenState: TokenState) { + private _onNewTokenSubmitted(newToken: Token, newTokenState: TokenState) { this.props.dispatcher.updateTokenStateByAddress({ [newToken.address]: newTokenState, }); @@ -229,14 +229,14 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt }); this.props.onTokenChosen(newToken.address); } - private async onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) { + private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) { if (!didUserAcceptTracking) { this.setState({ isAddingTokenToTracked: false, assetView: AssetViews.ASSET_PICKER, chosenTrackTokenAddress: undefined, }); - this.onCloseDialog(); + this._onCloseDialog(); return; } this.setState({ diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index 5479f0f83..7a25609b8 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -63,7 +63,7 @@ interface GenerateOrderFormState { } export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, GenerateOrderFormState> { - private validator: SchemaValidator; + private _validator: SchemaValidator; constructor(props: GenerateOrderFormProps) { super(props); this.state = { @@ -71,7 +71,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G shouldShowIncompleteErrs: false, signingState: SigningState.UNSIGNED, }; - this.validator = new SchemaValidator(); + this._validator = new SchemaValidator(); } public componentDidMount() { window.scrollTo(0, 0); @@ -113,7 +113,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G token={depositToken} tokenState={depositTokenState} amount={this.props.sideToAssetToken[Side.Deposit].amount} - onChange={this.onTokenAmountChange.bind(this, depositToken, Side.Deposit)} + onChange={this._onTokenAmountChange.bind(this, depositToken, Side.Deposit)} shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} shouldCheckBalance={true} shouldCheckAllowance={true} @@ -144,7 +144,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G token={receiveToken} tokenState={receiveTokenState} amount={this.props.sideToAssetToken[Side.Receive].amount} - onChange={this.onTokenAmountChange.bind(this, receiveToken, Side.Receive)} + onChange={this._onTokenAmountChange.bind(this, receiveToken, Side.Receive)} shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} shouldCheckBalance={false} shouldCheckAllowance={false} @@ -165,7 +165,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G <IdenticonAddressInput label="Taker" initialAddress={this.props.orderTakerAddress} - updateOrderAddress={this.updateOrderAddress.bind(this)} + updateOrderAddress={this._updateOrderAddress.bind(this)} /> <div className="pt3"> <div className="pl1"> @@ -189,7 +189,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G labelReady="Sign hash" labelLoading="Signing..." labelComplete="Hash signed!" - onClickAsyncFn={this.onSignClickedAsync.bind(this)} + onClickAsyncFn={this._onSignClickedAsync.bind(this)} /> </div> {this.state.globalErrMsg !== '' && @@ -202,7 +202,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G titleStyle={{fontWeight: 100}} modal={false} open={this.state.signingState === SigningState.SIGNED} - onRequestClose={this.onCloseOrderJSONDialog.bind(this)} + onRequestClose={this._onCloseOrderJSONDialog.bind(this)} > <OrderJSON exchangeContractIfExists={exchangeContractIfExists} @@ -222,10 +222,10 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G </div> ); } - private onTokenAmountChange(token: Token, side: Side, isValid: boolean, amount?: BigNumber) { + private _onTokenAmountChange(token: Token, side: Side, isValid: boolean, amount?: BigNumber) { this.props.dispatcher.updateChosenAssetToken(side, {address: token.address, amount}); } - private onCloseOrderJSONDialog() { + private _onCloseOrderJSONDialog() { // Upon closing the order JSON dialog, we update the orderSalt stored in the Redux store // with a new value so that if a user signs the identical order again, the newly signed // orderHash will not collide with the previously generated orderHash. @@ -234,7 +234,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G signingState: SigningState.UNSIGNED, }); } - private async onSignClickedAsync(): Promise<boolean> { + private async _onSignClickedAsync(): Promise<boolean> { if (this.props.blockchainErr !== BlockchainErrs.NoError) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); return false; @@ -249,7 +249,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G debitToken.amount.gt(0) && receiveAmount.gt(0) && this.props.userAddress !== '' && debitBalance.gte(debitToken.amount) && debitAllowance.gte(debitToken.amount)) { - const didSignSuccessfully = await this.signTransactionAsync(); + const didSignSuccessfully = await this._signTransactionAsync(); if (didSignSuccessfully) { this.setState({ globalErrMsg: '', @@ -270,7 +270,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G return false; } } - private async signTransactionAsync(): Promise<boolean> { + private async _signTransactionAsync(): Promise<boolean> { this.setState({ signingState: SigningState.SIGNING, }); @@ -308,7 +308,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G this.props.userAddress, hashData.makerFee, hashData.takerFee, hashData.feeRecipientAddress, signatureData, this.props.tokenByAddress, hashData.orderSalt); - const validationResult = this.validator.validate(order, orderSchema); + const validationResult = this._validator.validate(order, orderSchema); if (validationResult.errors.length > 0) { globalErrMsg = 'Order signing failed. Please refresh and try again'; utils.consoleLog(`Unexpected error occured: Order validation failed: @@ -331,7 +331,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G }); return globalErrMsg === ''; } - private updateOrderAddress(address?: string): void { + private _updateOrderAddress(address?: string): void { if (!_.isUndefined(address)) { this.props.dispatcher.updateOrderTakerAddress(address); } diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx index 6c3c01d0d..fe40854cb 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -53,7 +53,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor floatingLabelText={<RequiredLabel label="Name" />} value={this.state.name} errorText={this.state.nameErrText} - onChange={this.onTokenNameChanged.bind(this)} + onChange={this._onTokenNameChanged.bind(this)} /> </div> <div> @@ -63,7 +63,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor floatingLabelText={<RequiredLabel label="Symbol" />} value={this.state.symbol} errorText={this.state.symbolErrText} - onChange={this.onTokenSymbolChanged.bind(this)} + onChange={this._onTokenSymbolChanged.bind(this)} /> </div> <div> @@ -72,7 +72,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor label="Contract address" initialAddress="" shouldShowIncompleteErrs={this.state.shouldShowAddressIncompleteErr} - updateAddress={this.onTokenAddressChanged.bind(this)} + updateAddress={this._onTokenAddressChanged.bind(this)} /> </div> <div> @@ -82,7 +82,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor floatingLabelText={<RequiredLabel label="Decimals" />} value={this.state.decimals} errorText={this.state.decimalsErrText} - onChange={this.onTokenDecimalsChanged.bind(this)} + onChange={this._onTokenDecimalsChanged.bind(this)} /> </div> <div className="pt2 mx-auto" style={{width: 120}}> @@ -90,7 +90,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor labelReady="Add" labelLoading="Adding..." labelComplete="Added!" - onClickAsyncFn={this.onAddNewTokenClickAsync.bind(this)} + onClickAsyncFn={this._onAddNewTokenClickAsync.bind(this)} /> </div> {this.state.globalErrMsg !== '' && @@ -99,11 +99,11 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor </div> ); } - private async onAddNewTokenClickAsync() { + private async _onAddNewTokenClickAsync() { // Trigger validation of name and symbol - this.onTokenNameChanged(undefined, this.state.name); - this.onTokenSymbolChanged(undefined, this.state.symbol); - this.onTokenDecimalsChanged(undefined, this.state.decimals); + this._onTokenNameChanged(undefined, this.state.name); + this._onTokenSymbolChanged(undefined, this.state.symbol); + this._onTokenDecimalsChanged(undefined, this.state.decimals); const isAddressIncomplete = this.state.address === ''; let doesContractExist = false; @@ -160,7 +160,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor }; this.props.onNewTokenSubmitted(newToken, newTokenState); } - private onTokenNameChanged(e: any, name: string) { + private _onTokenNameChanged(e: any, name: string) { let nameErrText = ''; const maxLength = 30; const tokens = _.values(this.props.tokenByAddress); @@ -168,7 +168,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor const tokenWithNameExists = !_.isUndefined(tokenWithNameIfExists); if (name === '') { nameErrText = 'Name is required'; - } else if (!this.isValidName(name)) { + } else if (!this._isValidName(name)) { nameErrText = 'Name should only contain letters, digits and spaces'; } else if (name.length > maxLength) { nameErrText = `Max length is ${maxLength}`; @@ -181,14 +181,14 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor nameErrText, }); } - private onTokenSymbolChanged(e: any, symbol: string) { + private _onTokenSymbolChanged(e: any, symbol: string) { let symbolErrText = ''; const maxLength = 5; const tokens = _.values(this.props.tokenByAddress); const tokenWithSymbolExists = !_.isUndefined(_.find(tokens, {symbol})); if (symbol === '') { symbolErrText = 'Symbol is required'; - } else if (!this.isLetters(symbol)) { + } else if (!this._isLetters(symbol)) { symbolErrText = 'Can only include letters'; } else if (symbol.length > maxLength) { symbolErrText = `Max length is ${maxLength}`; @@ -201,12 +201,12 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor symbolErrText, }); } - private onTokenDecimalsChanged(e: any, decimals: string) { + private _onTokenDecimalsChanged(e: any, decimals: string) { let decimalsErrText = ''; const maxLength = 2; if (decimals === '') { decimalsErrText = 'Decimals is required'; - } else if (!this.isInteger(decimals)) { + } else if (!this._isInteger(decimals)) { decimalsErrText = 'Must be an integer'; } else if (decimals.length > maxLength) { decimalsErrText = `Max length is ${maxLength}`; @@ -217,20 +217,20 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor decimalsErrText, }); } - private onTokenAddressChanged(address?: string) { + private _onTokenAddressChanged(address?: string) { if (!_.isUndefined(address)) { this.setState({ address, }); } } - private isValidName(input: string) { + private _isValidName(input: string) { return /^[a-z0-9 ]+$/i.test(input); } - private isInteger(input: string) { + private _isInteger(input: string) { return /^[0-9]+$/i.test(input); } - private isLetters(input: string) { + private _isLetters(input: string) { return /^[a-zA-Z]+$/i.test(input); } } diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx index a17b6e3f5..343eecc42 100644 --- a/packages/website/ts/components/inputs/address_input.tsx +++ b/packages/website/ts/components/inputs/address_input.tsx @@ -54,12 +54,12 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu floatingLabelText={label} errorText={this.state.errMsg} value={this.state.address} - onChange={this.onOrderTakerAddressUpdated.bind(this)} + onChange={this._onOrderTakerAddressUpdated.bind(this)} /> </div> ); } - private onOrderTakerAddressUpdated(e: any) { + private _onOrderTakerAddressUpdated(e: any) { const address = e.target.value.toLowerCase(); const isValidAddress = addressUtils.isAddress(address) || address === ''; const errMsg = isValidAddress ? '' : 'Invalid ethereum address'; diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 1c39a37d7..2404a1e31 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -46,8 +46,8 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow <div> <Toggle disabled={this.state.isSpinnerVisible} - toggled={this.isAllowanceSet()} - onToggle={this.onToggleAllowanceAsync.bind(this, this.props.token)} + toggled={this._isAllowanceSet()} + onToggle={this._onToggleAllowanceAsync.bind(this, this.props.token)} /> </div> {this.state.isSpinnerVisible && @@ -58,7 +58,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow </div> ); } - private async onToggleAllowanceAsync() { + private async _onToggleAllowanceAsync() { if (this.props.userAddress === '') { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); return false; @@ -69,7 +69,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow }); let newAllowanceAmountInBaseUnits = new BigNumber(0); - if (!this.isAllowanceSet()) { + if (!this._isAllowanceSet()) { newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS; } try { @@ -88,7 +88,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow await errorReporter.reportAsync(err); } } - private isAllowanceSet() { + private _isAllowanceSet() { return !this.props.tokenState.allowance.eq(0); } } diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index 61ab34f25..91cc36e0c 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -35,7 +35,7 @@ export class BalanceBoundedInput extends super(props); const amountString = this.props.amount ? this.props.amount.toString() : ''; this.state = { - errMsg: this.validate(amountString, props.balance), + errMsg: this._validate(amountString, props.balance), amountString, }; } @@ -57,14 +57,14 @@ export class BalanceBoundedInput extends if (shouldResetState) { const amountString = nextProps.amount.toString(); this.setState({ - errMsg: this.validate(amountString, nextProps.balance), + errMsg: this._validate(amountString, nextProps.balance), amountString, }); } } else if (isCurrentAmountNumeric) { const amountString = ''; this.setState({ - errMsg: this.validate(amountString, nextProps.balance), + errMsg: this._validate(amountString, nextProps.balance), amountString, }); } @@ -87,13 +87,13 @@ export class BalanceBoundedInput extends errorText={errorText} value={this.state.amountString} hintText={<span style={{textTransform: 'capitalize'}}>amount</span>} - onChange={this.onValueChange.bind(this)} + onChange={this._onValueChange.bind(this)} underlineStyle={{width: 'calc(100% + 50px)'}} /> ); } - private onValueChange(e: any, amountString: string) { - const errMsg = this.validate(amountString, this.props.balance); + private _onValueChange(e: any, amountString: string) { + const errMsg = this._validate(amountString, this.props.balance); this.setState({ amountString, errMsg, @@ -106,7 +106,7 @@ export class BalanceBoundedInput extends } }); } - private validate(amountString: string, balance: BigNumber): InputErrMsg { + private _validate(amountString: string, balance: BigNumber): InputErrMsg { if (!utils.isNumeric(amountString)) { return amountString !== '' ? 'Must be a number' : ''; } @@ -118,14 +118,14 @@ export class BalanceBoundedInput extends return ( <span> Insufficient balance.{' '} - {this.renderIncreaseBalanceLink()} + {this._renderIncreaseBalanceLink()} </span> ); } const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount); return errMsg; } - private renderIncreaseBalanceLink() { + private _renderIncreaseBalanceLink() { if (this.props.shouldHideVisitBalancesLink) { return null; } diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx index 3dcd2b4f3..da5bc9805 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -30,7 +30,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou label={this.props.label} balance={this.props.balance} amount={amount} - onChange={this.onChange.bind(this)} + onChange={this._onChange.bind(this)} shouldCheckBalance={this.props.shouldCheckBalance} shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs} onVisitBalancesPageClick={this.props.onVisitBalancesPageClick} @@ -42,7 +42,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou </div> ); } - private onChange(isValid: boolean, amount?: BigNumber) { + private _onChange(isValid: boolean, amount?: BigNumber) { const baseUnitAmountIfExists = _.isUndefined(amount) ? undefined : ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH); diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx index d3d3d258d..fe471e39b 100644 --- a/packages/website/ts/components/inputs/expiration_input.tsx +++ b/packages/website/ts/components/inputs/expiration_input.tsx @@ -17,11 +17,11 @@ interface ExpirationInputState { } export class ExpirationInput extends React.Component<ExpirationInputProps, ExpirationInputState> { - private earliestPickableMoment: moment.Moment; + private _earliestPickableMoment: moment.Moment; constructor(props: ExpirationInputProps) { super(props); // Set the earliest pickable date to today at 00:00, so users can only pick the current or later dates - this.earliestPickableMoment = moment().startOf('day'); + this._earliestPickableMoment = moment().startOf('day'); const expirationMoment = utils.convertToMomentFromUnixTimestamp(props.orderExpiryTimestamp); const initialOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec(); const didUserSetExpiry = !initialOrderExpiryTimestamp.eq(props.orderExpiryTimestamp); @@ -42,8 +42,8 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir mode="landscape" autoOk={true} value={date} - onChange={this.onDateChanged.bind(this)} - shouldDisableDate={this.shouldDisableDate.bind(this)} + onChange={this._onDateChanged.bind(this)} + shouldDisableDate={this._shouldDisableDate.bind(this)} /> <div className="absolute" @@ -58,7 +58,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir hintText="Time" autoOk={true} value={time} - onChange={this.onTimeChanged.bind(this)} + onChange={this._onTimeChanged.bind(this)} /> <div className="absolute" @@ -68,7 +68,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir </div> </div> <div - onClick={this.clearDates.bind(this)} + onClick={this._clearDates.bind(this)} className="col col-1 pt2" style={{textAlign: 'right'}} > @@ -77,10 +77,10 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir </div> ); } - private shouldDisableDate(date: Date): boolean { - return moment(date).startOf('day').isBefore(this.earliestPickableMoment); + private _shouldDisableDate(date: Date): boolean { + return moment(date).startOf('day').isBefore(this._earliestPickableMoment); } - private clearDates() { + private _clearDates() { this.setState({ dateMoment: undefined, timeMoment: undefined, @@ -88,7 +88,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec(); this.props.updateOrderExpiry(defaultDateTime); } - private onDateChanged(e: any, date: Date) { + private _onDateChanged(e: any, date: Date) { const dateMoment = moment(date); this.setState({ dateMoment, @@ -96,7 +96,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment); this.props.updateOrderExpiry(timestamp); } - private onTimeChanged(e: any, time: Date) { + private _onTimeChanged(e: any, time: Date) { const timeMoment = moment(time); this.setState({ timeMoment, diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx index 25e7b5009..4dc96a062 100644 --- a/packages/website/ts/components/inputs/hash_input.tsx +++ b/packages/website/ts/components/inputs/hash_input.tsx @@ -27,7 +27,7 @@ interface HashInputState {} export class HashInput extends React.Component<HashInputProps, HashInputState> { public render() { - const msgHashHex = this.props.blockchainIsLoaded ? this.generateMessageHashHex() : ''; + const msgHashHex = this.props.blockchainIsLoaded ? this._generateMessageHashHex() : ''; return ( <div> <FakeTextField label={this.props.label}> @@ -43,7 +43,7 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> { </div> ); } - private generateMessageHashHex() { + private _generateMessageHashHex() { const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists(); const hashData = this.props.hashData; const order: Order = { diff --git a/packages/website/ts/components/inputs/identicon_address_input.tsx b/packages/website/ts/components/inputs/identicon_address_input.tsx index 9e4bc58ea..0f220f955 100644 --- a/packages/website/ts/components/inputs/identicon_address_input.tsx +++ b/packages/website/ts/components/inputs/identicon_address_input.tsx @@ -38,14 +38,14 @@ export class IdenticonAddressInput extends React.Component<IdenticonAddressInput hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..." shouldHideLabel={true} initialAddress={this.props.initialAddress} - updateAddress={this.updateAddress.bind(this)} + updateAddress={this._updateAddress.bind(this)} /> </div> </div> </div> ); } - private updateAddress(address?: string): void { + private _updateAddress(address?: string): void { this.setState({ address, }); diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index c9728dc5f..84117e843 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -33,8 +33,8 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok label={this.props.label} amount={amount} balance={ZeroEx.toUnitAmount(this.props.tokenState.balance, this.props.token.decimals)} - onChange={this.onChange.bind(this)} - validate={this.validate.bind(this)} + onChange={this._onChange.bind(this)} + validate={this._validate.bind(this)} shouldCheckBalance={this.props.shouldCheckBalance} shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs} onVisitBalancesPageClick={this.props.onVisitBalancesPageClick} @@ -45,14 +45,14 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok </div> ); } - private onChange(isValid: boolean, amount?: BigNumber) { + private _onChange(isValid: boolean, amount?: BigNumber) { let baseUnitAmount; if (!_.isUndefined(amount)) { baseUnitAmount = ZeroEx.toBaseUnitAmount(amount, this.props.token.decimals); } this.props.onChange(isValid, baseUnitAmount); } - private validate(amount: BigNumber): InputErrMsg { + private _validate(amount: BigNumber): InputErrMsg { if (this.props.shouldCheckAllowance && amount.gt(this.props.tokenState.allowance)) { return ( <span> diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx index 7008da12f..ba348dade 100644 --- a/packages/website/ts/components/inputs/token_input.tsx +++ b/packages/website/ts/components/inputs/token_input.tsx @@ -52,9 +52,9 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState <Paper zDepth={1} style={{cursor: 'pointer'}} - onMouseEnter={this.onToggleHover.bind(this, true)} - onMouseLeave={this.onToggleHover.bind(this, false)} - onClick={this.onAssetClicked.bind(this)} + onMouseEnter={this._onToggleHover.bind(this, true)} + onMouseLeave={this._onToggleHover.bind(this, false)} + onClick={this._onAssetClicked.bind(this)} > <div className="mx-auto pt2" @@ -73,13 +73,13 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState dispatcher={this.props.dispatcher} isOpen={this.state.isPickerOpen} currentTokenAddress={this.props.assetToken.address} - onTokenChosen={this.onTokenChosen.bind(this)} + onTokenChosen={this._onTokenChosen.bind(this)} tokenByAddress={this.props.tokenByAddress} /> </div> ); } - private onTokenChosen(tokenAddress: string) { + private _onTokenChosen(tokenAddress: string) { const assetToken: AssetToken = { address: tokenAddress, amount: this.props.assetToken.amount, @@ -89,12 +89,12 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState isPickerOpen: false, }); } - private onToggleHover(isHoveringIcon: boolean) { + private _onToggleHover(isHoveringIcon: boolean) { this.setState({ isHoveringIcon, }); } - private onAssetClicked() { + private _onAssetClicked() { if (this.props.blockchainErr !== BlockchainErrs.NoError) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); return; diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx index 340e5d91f..21ec9ba93 100644 --- a/packages/website/ts/components/order_json.tsx +++ b/packages/website/ts/components/order_json.tsx @@ -36,7 +36,7 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> { shareLink: '', }; // tslint:disable-next-line:no-floating-promises - this.setShareLinkAsync(); + this._setShareLinkAsync(); } public render() { const order = utils.generateOrder(this.props.networkId, this.props.exchangeContractIfExists, @@ -88,21 +88,21 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> { <div> <i style={{cursor: 'pointer', fontSize: 29}} - onClick={this.shareViaFacebook.bind(this)} + onClick={this._shareViaFacebook.bind(this)} className="zmdi zmdi-facebook-box" /> </div> <div className="pl1" style={{position: 'relative', width: 28}}> <i style={{cursor: 'pointer', fontSize: 32, position: 'absolute', top: -2, left: 8}} - onClick={this.shareViaEmailAsync.bind(this)} + onClick={this._shareViaEmailAsync.bind(this)} className="zmdi zmdi-email" /> </div> <div className="pl1"> <i style={{cursor: 'pointer', fontSize: 29}} - onClick={this.shareViaTwitterAsync.bind(this)} + onClick={this._shareViaTwitterAsync.bind(this)} className="zmdi zmdi-twitter-box" /> </div> @@ -111,32 +111,32 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> { </div> ); } - private async shareViaTwitterAsync() { + private async _shareViaTwitterAsync() { const tweetText = encodeURIComponent(`Fill my order using the 0x protocol: ${this.state.shareLink}`); window.open(`https://twitter.com/intent/tweet?text=${tweetText}`, 'Share your order', 'width=500,height=400'); } - private async shareViaFacebook() { + private async _shareViaFacebook() { (window as any).FB.ui({ display: 'popup', href: this.state.shareLink, method: 'share', }, _.noop); } - private async shareViaEmailAsync() { + private async _shareViaEmailAsync() { const encodedSubject = encodeURIComponent('Let\'s trade using the 0x protocol'); const encodedBody = encodeURIComponent(`I generated an order with the 0x protocol. You can see and fill it here: ${this.state.shareLink}`); const mailToLink = `mailto:mail@example.org?subject=${encodedSubject}&body=${encodedBody}`; window.open(mailToLink, '_blank'); } - private async setShareLinkAsync() { - const shareLink = await this.generateShareLinkAsync(); + private async _setShareLinkAsync() { + const shareLink = await this._generateShareLinkAsync(); this.setState({ shareLink, }); } - private async generateShareLinkAsync(): Promise<string> { - const longUrl = encodeURIComponent(this.getOrderUrl()); + private async _generateShareLinkAsync(): Promise<string> { + const longUrl = encodeURIComponent(this._getOrderUrl()); const bitlyRequestUrl = `${constants.URL_BITLY_API}/v3/shorten?access_token=${configs.BITLY_ACCESS_TOKEN}&longUrl=${longUrl}`; const response = await fetch(bitlyRequestUrl); @@ -150,7 +150,7 @@ You can see and fill it here: ${this.state.shareLink}`); } return (bodyObj).data.url; } - private getOrderUrl() { + private _getOrderUrl() { const order = utils.generateOrder(this.props.networkId, this.props.exchangeContractIfExists, this.props.sideToAssetToken, this.props.orderExpiryTimestamp, this.props.orderTakerAddress, this.props.orderMakerAddress, this.props.orderMakerFee, this.props.orderTakerFee, diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx index 939dae6f7..574862dfc 100644 --- a/packages/website/ts/components/portal.tsx +++ b/packages/website/ts/components/portal.tsx @@ -70,9 +70,9 @@ interface PortalAllState { } export class Portal extends React.Component<PortalAllProps, PortalAllState> { - private blockchain: Blockchain; - private sharedOrderIfExists: Order; - private throttledScreenWidthUpdate: () => void; + private _blockchain: Blockchain; + private _sharedOrderIfExists: Order; + private _throttledScreenWidthUpdate: () => void; public static hasAlreadyDismissedWethNotice() { const didDismissWethNotice = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE); const hasAlreadyDismissedWethNotice = !_.isUndefined(didDismissWethNotice) && @@ -81,8 +81,8 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { } constructor(props: PortalAllProps) { super(props); - this.sharedOrderIfExists = this.getSharedOrderIfExists(); - this.throttledScreenWidthUpdate = _.throttle(this.updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this._sharedOrderIfExists = this._getSharedOrderIfExists(); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); const isViewingBalances = _.includes(props.location.pathname, `${WebsitePaths.Portal}/balances`); const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice(); @@ -100,15 +100,15 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { }; } public componentDidMount() { - window.addEventListener('resize', this.throttledScreenWidthUpdate); + window.addEventListener('resize', this._throttledScreenWidthUpdate); window.scrollTo(0, 0); } public componentWillMount() { - this.blockchain = new Blockchain(this.props.dispatcher); + this._blockchain = new Blockchain(this.props.dispatcher); } public componentWillUnmount() { - this.blockchain.destroy(); - window.removeEventListener('resize', this.throttledScreenWidthUpdate); + this._blockchain.destroy(); + window.removeEventListener('resize', this._throttledScreenWidthUpdate); // We re-set the entire redux state when the portal is unmounted so that when it is re-rendered // the initialization process always occurs from the same base state. This helps avoid // initialization inconsistencies (i.e While the portal was unrendered, the user might have @@ -118,19 +118,19 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { public componentWillReceiveProps(nextProps: PortalAllProps) { if (nextProps.networkId !== this.state.prevNetworkId) { // tslint:disable-next-line:no-floating-promises - this.blockchain.networkIdUpdatedFireAndForgetAsync(nextProps.networkId); + this._blockchain.networkIdUpdatedFireAndForgetAsync(nextProps.networkId); this.setState({ prevNetworkId: nextProps.networkId, }); } if (nextProps.userAddress !== this.state.prevUserAddress) { // tslint:disable-next-line:no-floating-promises - this.blockchain.userAddressUpdatedFireAndForgetAsync(nextProps.userAddress); + this._blockchain.userAddressUpdatedFireAndForgetAsync(nextProps.userAddress); if (!_.isEmpty(nextProps.userAddress) && nextProps.blockchainIsLoaded) { const tokens = _.values(nextProps.tokenByAddress); // tslint:disable-next-line:no-floating-promises - this.updateBalanceAndAllowanceWithLoadingScreenAsync(tokens); + this._updateBalanceAndAllowanceWithLoadingScreenAsync(tokens); } this.setState({ prevUserAddress: nextProps.userAddress, @@ -138,7 +138,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { } if (nextProps.nodeVersion !== this.state.prevNodeVersion) { // tslint:disable-next-line:no-floating-promises - this.blockchain.nodeVersionUpdatedFireAndForgetAsync(nextProps.nodeVersion); + this._blockchain.nodeVersionUpdatedFireAndForgetAsync(nextProps.nodeVersion); } if (nextProps.location.pathname !== this.state.prevPathname) { const isViewingBalances = _.includes(nextProps.location.pathname, `${WebsitePaths.Portal}/balances`); @@ -206,23 +206,23 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { <Switch> <Route path={`${WebsitePaths.Portal}/weth`} - render={this.renderEthWrapper.bind(this)} + render={this._renderEthWrapper.bind(this)} /> <Route path={`${WebsitePaths.Portal}/fill`} - render={this.renderFillOrder.bind(this)} + render={this._renderFillOrder.bind(this)} /> <Route path={`${WebsitePaths.Portal}/balances`} - render={this.renderTokenBalances.bind(this)} + render={this._renderTokenBalances.bind(this)} /> <Route path={`${WebsitePaths.Portal}/trades`} - component={this.renderTradeHistory.bind(this)} + component={this._renderTradeHistory.bind(this)} /> <Route path={`${WebsitePaths.Home}`} - render={this.renderGenerateOrderForm.bind(this)} + render={this._renderGenerateOrderForm.bind(this)} /> </Switch> : <Loading /> @@ -233,7 +233,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { } </Paper> <BlockchainErrDialog - blockchain={this.blockchain} + blockchain={this._blockchain} blockchainErr={this.props.blockchainErr} isOpen={this.props.shouldBlockchainErrDialogBeOpen} userAddress={this.props.userAddress} @@ -242,11 +242,11 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { /> <WrappedEthSectionNoticeDialog isOpen={this.state.isWethNoticeDialogOpen} - onToggleDialog={this.onWethNoticeAccepted.bind(this)} + onToggleDialog={this._onWethNoticeAccepted.bind(this)} /> <PortalDisclaimerDialog isOpen={this.state.isDisclaimerDialogOpen} - onToggleDialog={this.onPortalDisclaimerAccepted.bind(this)} + onToggleDialog={this._onPortalDisclaimerAccepted.bind(this)} /> <FlashMessage dispatcher={this.props.dispatcher} @@ -257,11 +257,11 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { </div> ); } - private renderEthWrapper() { + private _renderEthWrapper() { return ( <EthWrappers networkId={this.props.networkId} - blockchain={this.blockchain} + blockchain={this._blockchain} dispatcher={this.props.dispatcher} tokenByAddress={this.props.tokenByAddress} tokenStateByAddress={this.props.tokenStateByAddress} @@ -270,7 +270,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { /> ); } - private renderTradeHistory() { + private _renderTradeHistory() { return ( <TradeHistory tokenByAddress={this.props.tokenByAddress} @@ -279,10 +279,10 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { /> ); } - private renderTokenBalances() { + private _renderTokenBalances() { return ( <TokenBalances - blockchain={this.blockchain} + blockchain={this._blockchain} blockchainErr={this.props.blockchainErr} blockchainIsLoaded={this.props.blockchainIsLoaded} dispatcher={this.props.dispatcher} @@ -295,16 +295,16 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { /> ); } - private renderFillOrder(match: any, location: Location, history: History) { + private _renderFillOrder(match: any, location: Location, history: History) { const initialFillOrder = !_.isUndefined(this.props.userSuppliedOrderCache) ? this.props.userSuppliedOrderCache : - this.sharedOrderIfExists; + this._sharedOrderIfExists; return ( <FillOrder - blockchain={this.blockchain} + blockchain={this._blockchain} blockchainErr={this.props.blockchainErr} initialOrder={initialFillOrder} - isOrderInUrl={!_.isUndefined(this.sharedOrderIfExists)} + isOrderInUrl={!_.isUndefined(this._sharedOrderIfExists)} orderFillAmount={this.props.orderFillAmount} networkId={this.props.networkId} userAddress={this.props.userAddress} @@ -314,28 +314,28 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { /> ); } - private renderGenerateOrderForm(match: any, location: Location, history: History) { + private _renderGenerateOrderForm(match: any, location: Location, history: History) { return ( <GenerateOrderForm - blockchain={this.blockchain} + blockchain={this._blockchain} hashData={this.props.hashData} dispatcher={this.props.dispatcher} /> ); } - private onPortalDisclaimerAccepted() { + private _onPortalDisclaimerAccepted() { localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set'); this.setState({ isDisclaimerDialogOpen: false, }); } - private onWethNoticeAccepted() { + private _onWethNoticeAccepted() { localStorage.setItem(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE, 'set'); this.setState({ isWethNoticeDialogOpen: false, }); } - private getSharedOrderIfExists(): Order { + private _getSharedOrderIfExists(): Order { const queryString = window.location.search; if (queryString.length === 0) { return; @@ -362,13 +362,13 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { } return order; } - private updateScreenWidth() { + private _updateScreenWidth() { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); } - private async updateBalanceAndAllowanceWithLoadingScreenAsync(tokens: Token[]) { + private async _updateBalanceAndAllowanceWithLoadingScreenAsync(tokens: Token[]) { this.props.dispatcher.updateBlockchainIsLoaded(false); - await this.blockchain.updateTokenBalancesAndAllowancesAsync(tokens); + await this._blockchain.updateTokenBalancesAndAllowancesAsync(tokens); this.props.dispatcher.updateBlockchainIsLoaded(true); } } diff --git a/packages/website/ts/components/portal_menu.tsx b/packages/website/ts/components/portal_menu.tsx index 822c4d0d7..a6125d842 100644 --- a/packages/website/ts/components/portal_menu.tsx +++ b/packages/website/ts/components/portal_menu.tsx @@ -23,7 +23,7 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState to={`${WebsitePaths.Portal}`} onClick={this.props.onClick.bind(this)} > - {this.renderMenuItemWithIcon('Generate order', 'zmdi-arrow-right-top')} + {this._renderMenuItemWithIcon('Generate order', 'zmdi-arrow-right-top')} </MenuItem> <MenuItem style={this.props.menuItemStyle} @@ -31,7 +31,7 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState to={`${WebsitePaths.Portal}/fill`} onClick={this.props.onClick.bind(this)} > - {this.renderMenuItemWithIcon('Fill order', 'zmdi-arrow-left-bottom')} + {this._renderMenuItemWithIcon('Fill order', 'zmdi-arrow-left-bottom')} </MenuItem> <MenuItem style={this.props.menuItemStyle} @@ -39,7 +39,7 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState to={`${WebsitePaths.Portal}/balances`} onClick={this.props.onClick.bind(this)} > - {this.renderMenuItemWithIcon('Balances', 'zmdi-balance-wallet')} + {this._renderMenuItemWithIcon('Balances', 'zmdi-balance-wallet')} </MenuItem> <MenuItem style={this.props.menuItemStyle} @@ -47,7 +47,7 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState to={`${WebsitePaths.Portal}/trades`} onClick={this.props.onClick.bind(this)} > - {this.renderMenuItemWithIcon('Trade history', 'zmdi-format-list-bulleted')} + {this._renderMenuItemWithIcon('Trade history', 'zmdi-format-list-bulleted')} </MenuItem> <MenuItem style={this.props.menuItemStyle} @@ -55,12 +55,12 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState to={`${WebsitePaths.Portal}/weth`} onClick={this.props.onClick.bind(this)} > - {this.renderMenuItemWithIcon('Wrap ETH', 'zmdi-circle-o')} + {this._renderMenuItemWithIcon('Wrap ETH', 'zmdi-circle-o')} </MenuItem> </div> ); } - private renderMenuItemWithIcon(title: string, iconName: string) { + private _renderMenuItemWithIcon(title: string, iconName: string) { return ( <div className="flex" style={{fontWeight: 100}}> <div className="pr1 pl2"> diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx index 23e61e77e..30395c08e 100644 --- a/packages/website/ts/components/send_button.tsx +++ b/packages/website/ts/components/send_button.tsx @@ -39,28 +39,28 @@ export class SendButton extends React.Component<SendButtonProps, SendButtonState labelStyle={labelStyle} disabled={this.state.isSending} label={this.state.isSending ? 'Sending...' : 'Send'} - onClick={this.toggleSendDialog.bind(this)} + onClick={this._toggleSendDialog.bind(this)} /> <SendDialog isOpen={this.state.isSendDialogVisible} - onComplete={this.onSendAmountSelectedAsync.bind(this)} - onCancelled={this.toggleSendDialog.bind(this)} + onComplete={this._onSendAmountSelectedAsync.bind(this)} + onCancelled={this._toggleSendDialog.bind(this)} token={this.props.token} tokenState={this.props.tokenState} /> </div> ); } - private toggleSendDialog() { + private _toggleSendDialog() { this.setState({ isSendDialogVisible: !this.state.isSendDialogVisible, }); } - private async onSendAmountSelectedAsync(recipient: string, value: BigNumber) { + private async _onSendAmountSelectedAsync(recipient: string, value: BigNumber) { this.setState({ isSending: true, }); - this.toggleSendDialog(); + this._toggleSendDialog(); const token = this.props.token; const tokenState = this.props.tokenState; let balance = tokenState.balance; diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 2e2ad74e3..208cd54e1 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -133,7 +133,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 = [ @@ -141,7 +141,7 @@ 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.NETWORK_ID_TESTNET; @@ -239,7 +239,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala labelReady="Request" labelLoading="Sending..." labelComplete="Sent!" - onClickAsyncFn={this.faucetRequestAsync.bind(this, true)} + onClickAsyncFn={this._faucetRequestAsync.bind(this, true)} /> </TableRowColumn> } @@ -249,7 +249,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala <RaisedButton label="Request" style={{width: '100%'}} - onTouchTap={this.onDharmaDialogToggle.bind(this)} + onTouchTap={this._onDharmaDialogToggle.bind(this)} /> </TableRowColumn> } @@ -266,7 +266,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala <FloatingActionButton mini={true} zDepth={0} - onClick={this.onAddTokenClicked.bind(this)} + onClick={this._onAddTokenClicked.bind(this)} > <ContentAdd /> </FloatingActionButton> @@ -275,7 +275,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala <FloatingActionButton mini={true} zDepth={0} - onClick={this.onRemoveTokenClicked.bind(this)} + onClick={this._onRemoveTokenClicked.bind(this)} > <ContentRemove /> </FloatingActionButton> @@ -319,7 +319,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala </TableRow> </TableHeader> <TableBody displayRowCheckbox={false}> - {this.renderTokenTableRows()} + {this._renderTokenTableRows()} </TableBody> </Table> <Dialog @@ -327,9 +327,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala 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" @@ -340,7 +340,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala actions={dharmaDialogActions} open={this.state.isDharmaDialogVisible} > - {this.renderDharmaLoanFrame()} + {this._renderDharmaLoanFrame()} </Dialog> <AssetPicker userAddress={this.props.userAddress} @@ -349,14 +349,14 @@ 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() { + private _renderTokenTableRows() { if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== BlockchainErrs.NoError) { return ''; } @@ -372,11 +372,11 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala ); 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); @@ -388,14 +388,14 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala colSpan={tokenColSpan} > {_.isUndefined(tokenLink) ? - this.renderTokenName(token) : + this._renderTokenName(token) : <a href={tokenLink} target="_blank" style={{textDecoration: 'none'}}> - {this.renderTokenName(token)} + {this._renderTokenName(token)} </a> } </TableRowColumn> <TableRowColumn style={{paddingRight: 3, paddingLeft: 3}}> - {this.renderAmount(tokenState.balance, token.decimals)} {token.symbol} + {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" /> @@ -408,7 +408,7 @@ 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> @@ -420,7 +420,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala labelReady="Mint" labelLoading={<span style={{fontSize: 12}}>Minting...</span>} labelComplete="Minted!" - onClickAsyncFn={this.onMintTestTokensAsync.bind(this, token)} + onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)} /> } {token.symbol === ZRX_TOKEN_SYMBOL && this.props.networkId === constants.NETWORK_ID_TESTNET && @@ -428,7 +428,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala labelReady="Request" labelLoading="Sending..." labelComplete="Sent!" - onClickAsyncFn={this.faucetRequestAsync.bind(this, false)} + onClickAsyncFn={this._faucetRequestAsync.bind(this, false)} /> } </TableRowColumn> @@ -441,14 +441,14 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala 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, @@ -477,16 +477,16 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala isTokenPickerOpen: false, }); } - 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"> @@ -502,7 +502,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala </div> ); } - private renderErrorDialogBody() { + private _renderErrorDialogBody() { switch (this.state.errorType) { case BalanceErrs.incorrectNetworkForFaucet: return ( @@ -550,7 +550,7 @@ 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'}}> @@ -568,12 +568,12 @@ 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); @@ -597,7 +597,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala 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; @@ -646,23 +646,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 onAddTokenClicked() { + private _onAddTokenClicked() { this.setState({ isTokenPickerOpen: true, isAddingToken: true, }); } - private onRemoveTokenClicked() { + private _onRemoveTokenClicked() { this.setState({ isTokenPickerOpen: true, isAddingToken: false, diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx index 025ed3635..eec48b21a 100644 --- a/packages/website/ts/components/top_bar.tsx +++ b/packages/website/ts/components/top_bar.tsx @@ -127,7 +127,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="Whitepaper" /> </a>, ]; - const bottomBorderStyle = this.shouldDisplayBottomBar() ? styles.bottomBar : {}; + const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {}; const fullWidthClasses = isFullWidthPage ? 'pr4' : ''; const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; const menuClasses = `col col-${isFullWidthPage ? '4' : '5'} ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`; @@ -147,7 +147,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </div> <div className={`col col-${isFullWidthPage ? '8' : '9'} lg-hide md-hide`} /> <div className={`col col-${isFullWidthPage ? '6' : '5'} sm-hide xs-hide`} /> - {!this.isViewingPortal() && + {!this._isViewingPortal() && <div className={menuClasses} > @@ -183,37 +183,37 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { } {this.props.blockchainIsLoaded && !_.isEmpty(this.props.userAddress) && <div className="col col-5"> - {this.renderUser()} + {this._renderUser()} </div> } - {!this.isViewingPortal() && + {!this._isViewingPortal() && <div className={`col ${isFullWidthPage ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`} > <div style={menuIconStyle}> <i className="zmdi zmdi-menu" - onClick={this.onMenuButtonClick.bind(this)} + onClick={this._onMenuButtonClick.bind(this)} /> </div> </div> } </div> - {this.renderDrawer()} + {this._renderDrawer()} </div> ); } - private renderDrawer() { + private _renderDrawer() { return ( <Drawer open={this.state.isDrawerOpen} docked={false} openSecondary={true} - onRequestChange={this.onMenuButtonClick.bind(this)} + onRequestChange={this._onMenuButtonClick.bind(this)} > - {this.renderPortalMenu()} - {this.renderDocsMenu()} - {this.renderWiki()} + {this._renderPortalMenu()} + {this._renderDocsMenu()} + {this._renderWiki()} <div className="pl1 py1 mt3" style={{backgroundColor: colors.lightGrey}}>Website</div> <Link to={WebsitePaths.Home} className="text-decoration-none"> <MenuItem className="py2">Home</MenuItem> @@ -221,22 +221,22 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none"> <MenuItem className="py2">Wiki</MenuItem> </Link> - {!this.isViewing0xjsDocs() && + {!this._isViewing0xjsDocs() && <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> <MenuItem className="py2">0x.js Docs</MenuItem> </Link> } - {!this.isViewingConnectDocs() && + {!this._isViewingConnectDocs() && <Link to={WebsitePaths.Connect} className="text-decoration-none"> <MenuItem className="py2">0x Connect Docs</MenuItem> </Link> } - {!this.isViewingSmartContractsDocs() && + {!this._isViewingSmartContractsDocs() && <Link to={WebsitePaths.SmartContracts} className="text-decoration-none"> <MenuItem className="py2">Smart Contract Docs</MenuItem> </Link> } - {!this.isViewingPortal() && + {!this._isViewingPortal() && <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none"> <MenuItem className="py2">Portal DApp</MenuItem> </Link> @@ -261,7 +261,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none"> <MenuItem className="py2" - onTouchTap={this.onMenuButtonClick.bind(this)} + onTouchTap={this._onMenuButtonClick.bind(this)} > FAQ </MenuItem> @@ -269,8 +269,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </Drawer> ); } - private renderDocsMenu() { - if (!this.isViewing0xjsDocs() && !this.isViewingSmartContractsDocs() && !this.isViewingConnectDocs() + private _renderDocsMenu() { + if (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingConnectDocs() || _.isUndefined(this.props.menu)) { return; } @@ -283,7 +283,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { topLevelMenu={this.props.menu} menuSubsectionsBySection={this.props.menuSubsectionsBySection} shouldDisplaySectionHeaders={false} - onMenuItemClick={this.onMenuButtonClick.bind(this)} + onMenuItemClick={this._onMenuButtonClick.bind(this)} selectedVersion={this.props.docsVersion} docPath={this.props.docsInfo.websitePath} versions={this.props.availableDocVersions} @@ -291,8 +291,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </div> ); } - private renderWiki() { - if (!this.isViewingWiki()) { + private _renderWiki() { + if (!this._isViewingWiki()) { return; } @@ -303,13 +303,13 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { topLevelMenu={this.props.menuSubsectionsBySection} menuSubsectionsBySection={this.props.menuSubsectionsBySection} shouldDisplaySectionHeaders={false} - onMenuItemClick={this.onMenuButtonClick.bind(this)} + onMenuItemClick={this._onMenuButtonClick.bind(this)} /> </div> ); } - private renderPortalMenu() { - if (!this.isViewingPortal()) { + private _renderPortalMenu() { + if (!this._isViewingPortal()) { return; } @@ -318,12 +318,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>Portal DApp</div> <PortalMenu menuItemStyle={{color: 'black'}} - onClick={this.onMenuButtonClick.bind(this)} + onClick={this._onMenuButtonClick.bind(this)} /> </div> ); } - private renderUser() { + private _renderUser() { const userAddress = this.props.userAddress; const identiconDiameter = 26; return ( @@ -345,31 +345,31 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </div> ); } - private onMenuButtonClick() { + private _onMenuButtonClick() { this.setState({ isDrawerOpen: !this.state.isDrawerOpen, }); } - private isViewingPortal() { + private _isViewingPortal() { return _.includes(this.props.location.pathname, WebsitePaths.Portal); } - private isViewingFAQ() { + private _isViewingFAQ() { return _.includes(this.props.location.pathname, WebsitePaths.FAQ); } - private isViewing0xjsDocs() { + private _isViewing0xjsDocs() { return _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs); } - private isViewingConnectDocs() { + private _isViewingConnectDocs() { return _.includes(this.props.location.pathname, WebsitePaths.Connect); } - private isViewingSmartContractsDocs() { + private _isViewingSmartContractsDocs() { return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts); } - private isViewingWiki() { + private _isViewingWiki() { return _.includes(this.props.location.pathname, WebsitePaths.Wiki); } - private shouldDisplayBottomBar() { - return this.isViewingWiki() || this.isViewing0xjsDocs() || this.isViewingFAQ() || - this.isViewingSmartContractsDocs() || this.isViewingConnectDocs(); + private _shouldDisplayBottomBar() { + return this._isViewingWiki() || this._isViewing0xjsDocs() || this._isViewingFAQ() || + this._isViewingSmartContractsDocs() || this._isViewingConnectDocs(); } } diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx index 59f85a03d..aa41b9392 100644 --- a/packages/website/ts/components/trade_history/trade_history.tsx +++ b/packages/website/ts/components/trade_history/trade_history.tsx @@ -20,19 +20,19 @@ interface TradeHistoryState { } export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistoryState> { - private fillPollingIntervalId: number; + private _fillPollingIntervalId: number; public constructor(props: TradeHistoryProps) { super(props); - const sortedFills = this.getSortedFills(); + const sortedFills = this._getSortedFills(); this.state = { sortedFills, }; } public componentWillMount() { - this.startPollingForFills(); + this._startPollingForFills(); } public componentWillUnmount() { - this.stopPollingForFills(); + this._stopPollingForFills(); } public componentDidMount() { window.scrollTo(0, 0); @@ -43,15 +43,15 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor <h3>Trade history</h3> <Divider /> <div className="pt2" style={{height: 608, overflow: 'scroll'}}> - {this.renderTrades()} + {this._renderTrades()} </div> </div> ); } - private renderTrades() { - const numNonCustomFills = this.numFillsWithoutCustomERC20Tokens(); + private _renderTrades() { + const numNonCustomFills = this._numFillsWithoutCustomERC20Tokens(); if (numNonCustomFills === 0) { - return this.renderEmptyNotice(); + return this._renderEmptyNotice(); } return _.map(this.state.sortedFills, (fill, index) => { @@ -66,14 +66,14 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor ); }); } - private renderEmptyNotice() { + private _renderEmptyNotice() { return ( <Paper className="mt1 p2 mx-auto center" style={{width: '80%'}}> No filled orders yet. </Paper> ); } - private numFillsWithoutCustomERC20Tokens() { + private _numFillsWithoutCustomERC20Tokens() { let numNonCustomFills = 0; const tokens = _.values(this.props.tokenByAddress); _.each(this.state.sortedFills, fill => { @@ -93,9 +93,9 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor }); return numNonCustomFills; } - private startPollingForFills() { - this.fillPollingIntervalId = window.setInterval(() => { - const sortedFills = this.getSortedFills(); + private _startPollingForFills() { + this._fillPollingIntervalId = window.setInterval(() => { + const sortedFills = this._getSortedFills(); if (!utils.deepEqual(sortedFills, this.state.sortedFills)) { this.setState({ sortedFills, @@ -103,10 +103,10 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor } }, FILL_POLLING_INTERVAL); } - private stopPollingForFills() { - clearInterval(this.fillPollingIntervalId); + private _stopPollingForFills() { + clearInterval(this._fillPollingIntervalId); } - private getSortedFills() { + private _getSortedFills() { const fillsByHash = tradeHistoryStorage.getUserFillsByHash(this.props.userAddress, this.props.networkId); const fills = _.values(fillsByHash); const sortedFills = _.sortBy(fills, [(fill: Fill) => fill.blockTimestamp * -1]); diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx index d2a334df9..3586a96a5 100644 --- a/packages/website/ts/components/trade_history/trade_history_item.tsx +++ b/packages/website/ts/components/trade_history/trade_history_item.tsx @@ -54,7 +54,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra > <div className="clearfix"> <div className="col col-12 lg-col-1 md-col-1 pt2 lg-pl3 md-pl3"> - {this.renderDate()} + {this._renderDate()} </div> <div className="col col-12 lg-col-6 md-col-6 lg-pl3 md-pl3" @@ -80,7 +80,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra className={amountColClassNames} style={amountColStyle} > - {this.renderAmounts(makerToken, takerToken)} + {this._renderAmounts(makerToken, takerToken)} </div> <div className="col col-12 lg-col-1 md-col-1 lg-pr3 md-pr3 lg-py3 md-py3 sm-pb1 sm-center"> <div className="pt1 lg-right md-right sm-mx-auto" style={{width: 13}}> @@ -95,7 +95,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra </Paper> ); } - private renderAmounts(makerToken: Token, takerToken: Token) { + private _renderAmounts(makerToken: Token, takerToken: Token) { const fill = this.props.fill; const filledTakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledTakerTokenAmount, takerToken.decimals); const filledMakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledMakerTokenAmount, takerToken.decimals); @@ -133,14 +133,14 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra style={{color: colors.green400, fontSize: 16}} > <span>+{' '}</span> - {this.renderAmount(receiveAmount, receiveToken.symbol, receiveToken.decimals)} + {this._renderAmount(receiveAmount, receiveToken.symbol, receiveToken.decimals)} </div> <div className="pb1 inline-block" style={{color: colors.red200, fontSize: 16}} > <span>-{' '}</span> - {this.renderAmount(givenAmount, givenToken.symbol, givenToken.decimals)} + {this._renderAmount(givenAmount, givenToken.symbol, givenToken.decimals)} </div> <div style={{color: colors.grey400, fontSize: 14}}> {exchangeRate.toFixed(PRECISION)} {givenToken.symbol}/{receiveToken.symbol} @@ -148,7 +148,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra </div> ); } - private renderDate() { + private _renderDate() { const blockMoment = moment.unix(this.props.fill.blockTimestamp); if (!blockMoment.isValid()) { return null; @@ -170,7 +170,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra </div> ); } - private renderAmount(amount: BigNumber, symbol: string, decimals: number) { + private _renderAmount(amount: BigNumber, symbol: string, decimals: number) { const unitAmount = ZeroEx.toUnitAmount(amount, decimals); return ( <span> diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx index cf4396047..fae51860e 100644 --- a/packages/website/ts/components/ui/badge.tsx +++ b/packages/website/ts/components/ui/badge.tsx @@ -42,14 +42,14 @@ export class Badge extends React.Component<BadgeProps, BadgeState> { <div className="p1 center" style={badgeStyle} - onMouseOver={this.setHoverState.bind(this, true)} - onMouseOut={this.setHoverState.bind(this, false)} + onMouseOver={this._setHoverState.bind(this, true)} + onMouseOut={this._setHoverState.bind(this, false)} > {this.props.title} </div> ); } - private setHoverState(isHovering: boolean) { + private _setHoverState(isHovering: boolean) { this.setState({ isHovering, }); diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx index 3c50430df..754f5d456 100644 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ b/packages/website/ts/components/ui/copy_icon.tsx @@ -15,8 +15,8 @@ interface CopyIconState { } export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> { - private copyTooltipTimeoutId: number; - private copyable: HTMLInputElement; + private _copyTooltipTimeoutId: number; + private _copyable: HTMLInputElement; constructor(props: CopyIconProps) { super(props); this.state = { @@ -25,25 +25,25 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> { } public componentDidUpdate() { // Remove tooltip if hover away - if (!this.state.isHovering && this.copyTooltipTimeoutId) { - clearInterval(this.copyTooltipTimeoutId); - this.hideTooltip(); + if (!this.state.isHovering && this._copyTooltipTimeoutId) { + clearInterval(this._copyTooltipTimeoutId); + this._hideTooltip(); } } public render() { return ( <div className="inline-block"> - <CopyToClipboard text={this.props.data} onCopy={this.onCopy.bind(this)}> + <CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}> <div className="inline flex" style={{cursor: 'pointer', color: colors.amber600}} - ref={this.setRefToProperty.bind(this)} + ref={this._setRefToProperty.bind(this)} data-tip={true} data-for="copy" data-event="click" data-iscapture={true} // This let's the click event continue to propogate - onMouseOver={this.setHoverState.bind(this, true)} - onMouseOut={this.setHoverState.bind(this, false)} + onMouseOver={this._setHoverState.bind(this, true)} + onMouseOut={this._setHoverState.bind(this, false)} > <div> <i style={{fontSize: 15}} className="zmdi zmdi-copy" /> @@ -57,25 +57,25 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> { </div> ); } - private setRefToProperty(el: HTMLInputElement) { - this.copyable = el; + private _setRefToProperty(el: HTMLInputElement) { + this._copyable = el; } - private setHoverState(isHovering: boolean) { + private _setHoverState(isHovering: boolean) { this.setState({ isHovering, }); } - private onCopy() { - if (this.copyTooltipTimeoutId) { - clearInterval(this.copyTooltipTimeoutId); + private _onCopy() { + if (this._copyTooltipTimeoutId) { + clearInterval(this._copyTooltipTimeoutId); } const tooltipLifespanMs = 1000; - this.copyTooltipTimeoutId = window.setTimeout(() => { - this.hideTooltip(); + this._copyTooltipTimeoutId = window.setTimeout(() => { + this._hideTooltip(); }, tooltipLifespanMs); } - private hideTooltip() { - ReactTooltip.hide(ReactDOM.findDOMNode(this.copyable)); + private _hideTooltip() { + ReactTooltip.hide(ReactDOM.findDOMNode(this._copyable)); } } diff --git a/packages/website/ts/components/ui/drop_down_menu_item.tsx b/packages/website/ts/components/ui/drop_down_menu_item.tsx index 55347cb98..ee26e004e 100644 --- a/packages/website/ts/components/ui/drop_down_menu_item.tsx +++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx @@ -28,8 +28,8 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro menuItemStyle: DEFAULT_STYLE, isNightVersion: false, }; - private isHovering: boolean; - private popoverCloseCheckIntervalId: number; + private _isHovering: boolean; + private _popoverCloseCheckIntervalId: number; constructor(props: DropDownMenuItemProps) { super(props); this.state = { @@ -37,20 +37,20 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro }; } public componentDidMount() { - this.popoverCloseCheckIntervalId = window.setInterval(() => { - this.checkIfShouldClosePopover(); + this._popoverCloseCheckIntervalId = window.setInterval(() => { + this._checkIfShouldClosePopover(); }, CHECK_CLOSE_POPOVER_INTERVAL_MS); } public componentWillUnmount() { - window.clearInterval(this.popoverCloseCheckIntervalId); + window.clearInterval(this._popoverCloseCheckIntervalId); } public render() { const colorStyle = this.props.isNightVersion ? 'white' : this.props.style.color; return ( <div style={{...this.props.style, color: colorStyle}} - onMouseEnter={this.onHover.bind(this)} - onMouseLeave={this.onHoverOff.bind(this)} + onMouseEnter={this._onHover.bind(this)} + onMouseLeave={this._onHoverOff.bind(this)} > <div className="flex relative"> <div style={{paddingRight: 10}}> @@ -65,12 +65,12 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro anchorEl={this.state.anchorEl} anchorOrigin={{horizontal: 'middle', vertical: 'bottom'}} targetOrigin={{horizontal: 'middle', vertical: 'top'}} - onRequestClose={this.closePopover.bind(this)} + onRequestClose={this._closePopover.bind(this)} useLayerForClickAway={false} > <div - onMouseEnter={this.onHover.bind(this)} - onMouseLeave={this.onHoverOff.bind(this)} + onMouseEnter={this._onHover.bind(this)} + onMouseLeave={this._onHoverOff.bind(this)} > <Menu style={{color: colors.grey}}> {this.props.subMenuItems} @@ -80,11 +80,11 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro </div> ); } - private onHover(event: React.FormEvent<HTMLInputElement>) { - this.isHovering = true; - this.checkIfShouldOpenPopover(event); + private _onHover(event: React.FormEvent<HTMLInputElement>) { + this._isHovering = true; + this._checkIfShouldOpenPopover(event); } - private checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>) { + private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>) { if (this.state.isDropDownOpen) { return; // noop } @@ -94,16 +94,16 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro anchorEl: event.currentTarget, }); } - private onHoverOff(event: React.FormEvent<HTMLInputElement>) { - this.isHovering = false; + private _onHoverOff(event: React.FormEvent<HTMLInputElement>) { + this._isHovering = false; } - private checkIfShouldClosePopover() { - if (!this.state.isDropDownOpen || this.isHovering) { + private _checkIfShouldClosePopover() { + if (!this.state.isDropDownOpen || this._isHovering) { return; // noop } - this.closePopover(); + this._closePopover(); } - private closePopover() { + private _closePopover() { this.setState({ isDropDownOpen: false, }); diff --git a/packages/website/ts/components/ui/flash_message.tsx b/packages/website/ts/components/ui/flash_message.tsx index ab4edbbb0..c0c00463e 100644 --- a/packages/website/ts/components/ui/flash_message.tsx +++ b/packages/website/ts/components/ui/flash_message.tsx @@ -26,7 +26,7 @@ export class FlashMessage extends React.Component<FlashMessageProps, FlashMessag open={true} message={this.props.flashMessage} autoHideDuration={this.props.showDurationMs} - onRequestClose={this.onClose.bind(this)} + onRequestClose={this._onClose.bind(this)} bodyStyle={this.props.bodyStyle} /> ); @@ -34,7 +34,7 @@ export class FlashMessage extends React.Component<FlashMessageProps, FlashMessag return null; } } - private onClose() { + private _onClose() { this.props.dispatcher.hideFlashMessage(); } } diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index 08e8bc9ce..852975ef6 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -35,8 +35,8 @@ export class LifeCycleRaisedButton extends backgroundColor: colors.white, labelColor: colors.darkGrey, }; - private buttonTimeoutId: number; - private didUnmount: boolean; + private _buttonTimeoutId: number; + private _didUnmount: boolean; constructor(props: LifeCycleRaisedButtonProps) { super(props); this.state = { @@ -44,8 +44,8 @@ export class LifeCycleRaisedButton extends }; } public componentWillUnmount() { - clearTimeout(this.buttonTimeoutId); - this.didUnmount = true; + clearTimeout(this._buttonTimeoutId); + this._didUnmount = true; } public render() { if (this.props.isHidden) { @@ -83,14 +83,14 @@ export class LifeCycleRaisedButton extends buttonState: ButtonState.LOADING, }); const didSucceed = await this.props.onClickAsyncFn(); - if (this.didUnmount) { + if (this._didUnmount) { return; // noop since unmount called before async callback returned. } if (didSucceed) { this.setState({ buttonState: ButtonState.COMPLETE, }); - this.buttonTimeoutId = window.setTimeout(() => { + this._buttonTimeoutId = window.setTimeout(() => { this.setState({ buttonState: ButtonState.READY, }); diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/menu_item.tsx index c7ce7439f..3ec993476 100644 --- a/packages/website/ts/components/ui/menu_item.tsx +++ b/packages/website/ts/components/ui/menu_item.tsx @@ -35,15 +35,15 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { onClick={this.props.onClick.bind(this)} className={`mx-auto ${this.props.className}`} style={menuItemStyles} - onMouseEnter={this.onToggleHover.bind(this, true)} - onMouseLeave={this.onToggleHover.bind(this, false)} + onMouseEnter={this._onToggleHover.bind(this, true)} + onMouseLeave={this._onToggleHover.bind(this, false)} > {this.props.children} </div> </Link> ); } - private onToggleHover(isHovering: boolean) { + private _onToggleHover(isHovering: boolean) { this.setState({ isHovering, }); diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx index 124e7018c..2adefbda3 100644 --- a/packages/website/ts/components/ui/swap_icon.tsx +++ b/packages/website/ts/components/ui/swap_icon.tsx @@ -27,8 +27,8 @@ export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> { className="mx-auto pt4" style={{cursor: 'pointer', height: 50, width: 37.5}} onClick={this.props.swapTokensFn} - onMouseEnter={this.onToggleHover.bind(this, true)} - onMouseLeave={this.onToggleHover.bind(this, false)} + onMouseEnter={this._onToggleHover.bind(this, true)} + onMouseLeave={this._onToggleHover.bind(this, false)} > <i style={swapStyles} @@ -37,7 +37,7 @@ export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> { </div> ); } - private onToggleHover(isHovering: boolean) { + private _onToggleHover(isHovering: boolean) { this.setState({ isHovering, }); diff --git a/packages/website/ts/components/visual_order.tsx b/packages/website/ts/components/visual_order.tsx index a7be6f780..708317be6 100644 --- a/packages/website/ts/components/visual_order.tsx +++ b/packages/website/ts/components/visual_order.tsx @@ -42,13 +42,13 @@ export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderSt </div> <div className="col col-2 center pt1"> <div className="pb1"> - {this.renderAmount(this.props.takerAssetToken, this.props.takerToken)} + {this._renderAmount(this.props.takerAssetToken, this.props.takerToken)} </div> <div className="lg-p2 md-p2 sm-p1"> <img src="/images/trade_arrows.png" style={{width: 47}} /> </div> <div className="pt1"> - {this.renderAmount(this.props.makerAssetToken, this.props.makerToken)} + {this._renderAmount(this.props.makerAssetToken, this.props.makerToken)} </div> </div> <div className="col col-5 center"> @@ -65,7 +65,7 @@ export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderSt </div> ); } - private renderAmount(assetToken: AssetToken, token: Token) { + private _renderAmount(assetToken: AssetToken, token: Token) { const unitAmount = ZeroEx.toUnitAmount(assetToken.amount, token.decimals); return ( <div style={{fontSize: 13}}> |