diff options
Diffstat (limited to 'packages/website/ts/components')
62 files changed, 354 insertions, 321 deletions
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index 1c3b7458d..7156e700b 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -18,7 +18,7 @@ interface BlockchainErrDialogProps { } export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProps, undefined> { - public render() { + public render(): React.ReactNode { const dialogActions = [ <FlatButton key="blockchainErrOk" @@ -45,7 +45,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp </Dialog> ); } - private _getTitle(hasWalletAddress: boolean) { + private _getTitle(hasWalletAddress: boolean): string { if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) { return '0x smart contracts not found'; } else if (!hasWalletAddress) { @@ -58,7 +58,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp return 'Unexpected error'; } } - private _renderExplanation(hasWalletAddress: boolean) { + private _renderExplanation(hasWalletAddress: boolean): React.ReactNode { if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) { return this._renderContractsNotDeployedExplanation(); } else if (!hasWalletAddress) { @@ -71,7 +71,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp return this._renderUnexpectedErrorExplanation(); } } - private _renderDisconnectedFromNode() { + private _renderDisconnectedFromNode(): React.ReactNode { return ( <div> You were disconnected from the backing Ethereum node. If using{' '} @@ -86,7 +86,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp </div> ); } - private _renderDefaultTokenNotInTokenRegistry() { + private _renderDefaultTokenNotInTokenRegistry(): React.ReactNode { return ( <div> The TokenRegistry deployed on your network does not contain the needed default tokens for 0x Portal to @@ -96,10 +96,10 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp </div> ); } - private _renderUnexpectedErrorExplanation() { + private _renderUnexpectedErrorExplanation(): React.ReactNode { return <div>We encountered an unexpected error. Please try refreshing the page.</div>; } - private _renderNoWalletFoundExplanation() { + private _renderNoWalletFoundExplanation(): React.ReactNode { return ( <div> <div> @@ -137,7 +137,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp </div> ); } - private _renderContractsNotDeployedExplanation() { + private _renderContractsNotDeployedExplanation(): React.ReactNode { 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 42ca1713d..069a75560 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -47,14 +47,14 @@ export class EthWethConversionDialog extends React.Component< ethTokenBalance: new BigNumber(0), }; } - public componentWillMount() { + public componentWillMount(): void { // tslint:disable-next-line:no-floating-promises this._fetchEthTokenBalanceAsync(); } - public componentWillUnmount() { + public componentWillUnmount(): void { this._isUnmounted = true; } - public render() { + public render(): React.ReactNode { const convertDialogActions = [ <FlatButton key="cancel" label="Cancel" onTouchTap={this._onCancel.bind(this)} />, <FlatButton key="convert" label="Convert" primary={true} onTouchTap={this._onConvertClick.bind(this)} />, @@ -72,7 +72,7 @@ export class EthWethConversionDialog extends React.Component< </Dialog> ); } - private _renderConversionDialogBody() { + private _renderConversionDialogBody(): React.ReactNode { const explanation = this.props.direction === Side.Deposit ? 'Convert your Ether into a tokenized, tradable form.' @@ -137,7 +137,7 @@ export class EthWethConversionDialog extends React.Component< </div> ); } - private _renderCurrency(isWrappedVersion: boolean) { + private _renderCurrency(isWrappedVersion: boolean): React.ReactNode { const name = isWrappedVersion ? 'Wrapped Ether' : 'Ether'; const iconUrl = isWrappedVersion ? '/images/token_icons/ether_erc20.png' : '/images/ether.png'; const symbol = isWrappedVersion ? 'WETH' : 'ETH'; @@ -155,18 +155,18 @@ export class EthWethConversionDialog extends React.Component< </div> ); } - private _onMaxClick() { + private _onMaxClick(): void { this.setState({ value: this.state.ethTokenBalance, }); } - private _onValueChange(isValid: boolean, amount?: BigNumber) { + private _onValueChange(isValid: boolean, amount?: BigNumber): void { this.setState({ value: amount, hasErrors: !isValid, }); } - private _onConvertClick() { + private _onConvertClick(): void { if (this.state.hasErrors) { this.setState({ shouldShowIncompleteErrs: true, @@ -179,13 +179,13 @@ export class EthWethConversionDialog extends React.Component< this.props.onComplete(this.props.direction, value); } } - private _onCancel() { + private _onCancel(): void { this.setState({ value: undefined, }); this.props.onCancelled(); } - private async _fetchEthTokenBalanceAsync() { + private async _fetchEthTokenBalanceAsync(): Promise<void> { const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; const [balance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( userAddressIfExists, diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index a72d33183..3c839d6f5 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -59,7 +59,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, preferredNetworkId: props.networkId, }; } - public render() { + public render(): React.ReactNode { const dialogActions = [ <FlatButton key="ledgerConnectCancel" label="Cancel" onTouchTap={this._onClose.bind(this)} />, ]; @@ -82,7 +82,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, </Dialog> ); } - private _renderConnectStep() { + private _renderConnectStep(): React.ReactNode { const networkIds = _.values(sharedConstants.NETWORK_ID_BY_NAME); return ( <div> @@ -122,7 +122,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, </div> ); } - private _renderSelectAddressStep() { + private _renderSelectAddressStep(): React.ReactNode { return ( <div> <div> @@ -159,7 +159,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, </div> ); } - private _renderAddressTableRows() { + private _renderAddressTableRows(): React.ReactNode { const rows = _.map(this.state.userAddresses, (userAddress: string, i: number) => { const balanceInWei = this.state.addressBalances[i]; const addressTooltipId = `address-${userAddress}`; @@ -189,7 +189,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, }); return rows; } - private _onClose() { + private _onClose(): void { this.setState({ connectionErrMsg: '', stepIndex: LedgerSteps.CONNECT, @@ -197,7 +197,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, const isOpen = false; this.props.toggleDialogFn(isOpen); } - private _onAddressSelected(selectedRowIndexes: number[]) { + private _onAddressSelected(selectedRowIndexes: number[]): void { const selectedRowIndex = selectedRowIndexes[0]; const selectedAddress = this.state.userAddresses[selectedRowIndex]; const selectAddressBalance = this.state.addressBalances[selectedRowIndex]; @@ -228,7 +228,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, } return didSucceed; } - private async _fetchAddressesAndBalancesAsync() { + private async _fetchAddressesAndBalancesAsync(): Promise<boolean> { let userAddresses: string[]; const addressBalances: BigNumber[] = []; try { @@ -250,7 +250,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, }); return true; } - private _onDerivationPathChanged(e: any, derivationPath: string) { + private _onDerivationPathChanged(e: any, derivationPath: string): void { let derivationErrMsg = ''; if (!_.startsWith(derivationPath, VALID_ETHEREUM_DERIVATION_PATH_PREFIX)) { derivationErrMsg = 'Must be valid Ethereum path.'; @@ -261,7 +261,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, derivationErrMsg, }); } - private async _onConnectLedgerClickAsync() { + private async _onConnectLedgerClickAsync(): Promise<boolean> { const isU2FSupported = await utils.isU2FSupportedAsync(); if (!isU2FSupported) { logUtils.log(`U2F not supported in this browser`); @@ -295,7 +295,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, } return userAddresses; } - private _onSelectedNetworkUpdated(e: any, index: number, networkId: number) { + private _onSelectedNetworkUpdated(e: any, index: number, networkId: number): void { this.setState({ preferredNetworkId: networkId, }); diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx index b31667121..41a17fe96 100644 --- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx +++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx @@ -8,7 +8,7 @@ interface PortalDisclaimerDialogProps { onToggleDialog: () => void; } -export function PortalDisclaimerDialog(props: PortalDisclaimerDialogProps) { +export const PortalDisclaimerDialog = (props: PortalDisclaimerDialogProps) => { return ( <Dialog title="0x Portal Disclaimer" @@ -33,4 +33,4 @@ export function PortalDisclaimerDialog(props: PortalDisclaimerDialogProps) { </div> </Dialog> ); -} +}; diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx index 2af7fd7ac..421f18b4f 100644 --- a/packages/website/ts/components/dialogs/send_dialog.tsx +++ b/packages/website/ts/components/dialogs/send_dialog.tsx @@ -35,7 +35,7 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState isAmountValid: false, }; } - public render() { + public render(): React.ReactNode { const transferDialogActions = [ <FlatButton key="cancelTransfer" label="Cancel" onTouchTap={this._onCancel.bind(this)} />, <FlatButton @@ -57,7 +57,7 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState </Dialog> ); } - private _renderSendDialogBody() { + private _renderSendDialogBody(): React.ReactNode { return ( <div className="mx-auto" style={{ maxWidth: 300 }}> <div style={{ height: 80 }}> @@ -86,19 +86,19 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState </div> ); } - private _onRecipientChange(recipient?: string) { + private _onRecipientChange(recipient?: string): void { this.setState({ shouldShowIncompleteErrs: false, recipient, }); } - private _onValueChange(isValid: boolean, amount?: BigNumber) { + private _onValueChange(isValid: boolean, amount?: BigNumber): void { this.setState({ isAmountValid: isValid, value: amount, }); } - private _onSendClick() { + private _onSendClick(): void { if (this._hasErrors()) { this.setState({ shouldShowIncompleteErrs: true, @@ -112,13 +112,13 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState this.props.onComplete(this.state.recipient, value); } } - private _onCancel() { + private _onCancel(): void { this.setState({ value: undefined, }); this.props.onCancelled(); } - private _hasErrors() { + private _hasErrors(): boolean { 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 bb7e3ed1a..ac0b27cdc 100644 --- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx +++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx @@ -33,7 +33,7 @@ export class TrackTokenConfirmationDialog extends React.Component< isAddingTokenToTracked: false, }; } - public render() { + public render(): React.ReactNode { const tokens = this.props.tokens; return ( <Dialog @@ -66,7 +66,7 @@ export class TrackTokenConfirmationDialog extends React.Component< </Dialog> ); } - private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) { + private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean): Promise<void> { if (!didUserAcceptTracking) { this.props.onToggleDialog(didUserAcceptTracking); return; diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx index 6ac9cf917..ce86df856 100644 --- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx +++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx @@ -9,7 +9,7 @@ interface U2fNotSupportedDialogProps { onToggleDialog: () => void; } -export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) { +export const U2fNotSupportedDialog = (props: U2fNotSupportedDialogProps) => { return ( <Dialog title="U2F Not Supported" @@ -43,4 +43,4 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) { </div> </Dialog> ); -} +}; diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx index 9e91ff12d..78b270c1e 100644 --- a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx +++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx @@ -8,7 +8,7 @@ interface WrappedEthSectionNoticeDialogProps { onToggleDialog: () => void; } -export function WrappedEthSectionNoticeDialog(props: WrappedEthSectionNoticeDialogProps) { +export const WrappedEthSectionNoticeDialog = (props: WrappedEthSectionNoticeDialogProps) => { return ( <Dialog title="Dedicated Wrapped Ether Section" @@ -30,4 +30,4 @@ export function WrappedEthSectionNoticeDialog(props: WrappedEthSectionNoticeDial </div> </Dialog> ); -} +}; diff --git a/packages/website/ts/components/dropdowns/network_drop_down.tsx b/packages/website/ts/components/dropdowns/network_drop_down.tsx index b569807dd..2fd2785d1 100644 --- a/packages/website/ts/components/dropdowns/network_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/network_drop_down.tsx @@ -13,7 +13,7 @@ interface NetworkDropDownProps { interface NetworkDropDownState {} export class NetworkDropDown extends React.Component<NetworkDropDownProps, NetworkDropDownState> { - public render() { + public render(): React.ReactNode { return ( <div className="mx-auto" style={{ width: 120 }}> <DropDownMenu value={this.props.selectedNetworkId} onChange={this.props.updateSelectedNetwork}> @@ -22,7 +22,7 @@ export class NetworkDropDown extends React.Component<NetworkDropDownProps, Netwo </div> ); } - private _renderDropDownItems() { + private _renderDropDownItems(): React.ReactNode { const items = _.map(this.props.avialableNetworkIds, networkId => { const networkName = sharedConstants.NETWORK_NAME_BY_ID[networkId]; const primaryText = ( diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index 586d260fb..e8db42a7a 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -46,7 +46,7 @@ export class EthWethConversionButton extends React.Component< isEthConversionHappening: false, }; } - public render() { + public render(): React.ReactNode { const labelStyle = this.state.isEthConversionHappening ? { fontSize: 10 } : {}; let callToActionLabel; let inProgressLabel; @@ -81,12 +81,12 @@ export class EthWethConversionButton extends React.Component< </div> ); } - private _toggleConversionDialog() { + private _toggleConversionDialog(): void { this.setState({ isEthConversionDialogVisible: !this.state.isEthConversionDialogVisible, }); } - private async _onConversionAmountSelectedAsync(direction: Side, value: BigNumber) { + private async _onConversionAmountSelectedAsync(direction: Side, value: BigNumber): Promise<void> { this.setState({ isEthConversionHappening: true, }); diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 59afeb50b..f19b05861 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -65,7 +65,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt }, }; } - public componentWillReceiveProps(nextProps: EthWrappersProps) { + public componentWillReceiveProps(nextProps: EthWrappersProps): void { if ( nextProps.userAddress !== this.props.userAddress || nextProps.networkId !== this.props.networkId || @@ -75,15 +75,15 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt this._fetchWETHStateAsync(); } } - public componentDidMount() { + public componentDidMount(): void { window.scrollTo(0, 0); // tslint:disable-next-line:no-floating-promises this._fetchWETHStateAsync(); } - public componentWillUnmount() { + public componentWillUnmount(): void { this._isUnmounted = true; } - public render() { + public render(): React.ReactNode { const etherToken = this._getEthToken(); const wethBalance = ZeroEx.toUnitAmount(this.state.ethTokenState.balance, constants.DECIMAL_PLACES_ETH); const isBidirectional = true; @@ -222,7 +222,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt </div> ); } - private _renderActionColumnTitle(isBidirectional: boolean) { + private _renderActionColumnTitle(isBidirectional: boolean): React.ReactNode { let iconClass = 'zmdi-long-arrow-right'; let leftSymbol = 'WETH'; let rightSymbol = 'ETH'; @@ -241,7 +241,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt </div> ); } - private _renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState) { + private _renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState): React.ReactNode { const rows = _.map( configs.OUTDATED_WRAPPED_ETHERS, (outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => { @@ -313,7 +313,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): React.ReactNode { return ( <span> {_.isUndefined(etherscanUrl) ? ( @@ -326,7 +326,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): React.ReactNode { 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): Promise<void> { const currentOutdatedWETHState = this.state.outdatedWETHStateByAddress[outdatedWETHAddress]; this.setState({ outdatedWETHStateByAddress: { @@ -368,7 +368,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt }, }); } - private async _fetchWETHStateAsync() { + private async _fetchWETHStateAsync(): Promise<void> { const tokens = _.values(this.props.tokenByAddress); const wethToken = _.find(tokens, token => token.symbol === 'WETH'); const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; @@ -414,12 +414,12 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt ); return outdatedWETHAddresses; } - private _getEthToken() { + private _getEthToken(): Token { const tokens = _.values(this.props.tokenByAddress); const etherToken = _.find(tokens, { symbol: 'WETH' }); return etherToken; } - private async _refetchEthTokenStateAsync() { + private async _refetchEthTokenStateAsync(): Promise<void> { const etherToken = this._getEthToken(); const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index ea94e0987..59c32cebc 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -82,19 +82,19 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { tokensToTrack: [], }; } - public componentWillMount() { + public componentWillMount(): void { if (!_.isEmpty(this.state.orderJSON)) { // tslint:disable-next-line:no-floating-promises this._validateFillOrderFireAndForgetAsync(this.state.orderJSON); } } - public componentDidMount() { + public componentDidMount(): void { window.scrollTo(0, 0); } - public componentWillUnmount() { + public componentWillUnmount(): void { this._isUnmounted = true; } - public render() { + public render(): React.ReactNode { return ( <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}> <h3>Fill an order</h3> @@ -159,7 +159,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { </div> ); } - private _renderOrderJsonNotices() { + private _renderOrderJsonNotices(): React.ReactNode { return ( <div> {!_.isUndefined(this.props.initialOrder) && @@ -177,7 +177,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { </div> ); } - private _renderVisualOrder() { + private _renderVisualOrder(): React.ReactNode { const takerTokenAddress = this.state.parsedOrder.signedOrder.takerTokenAddress; const takerToken = this.props.tokenByAddress[takerTokenAddress]; const orderTakerAmount = new BigNumber(this.state.parsedOrder.signedOrder.takerTokenAmount); @@ -306,7 +306,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { </div> ); } - private _renderFillSuccessMsg() { + private _renderFillSuccessMsg(): React.ReactNode { return ( <div> Order successfully filled. See the trade details in your{' '} @@ -316,10 +316,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { </div> ); } - private _renderCancelSuccessMsg() { + private _renderCancelSuccessMsg(): React.ReactNode { return <div>Order successfully cancelled.</div>; } - private _onFillOrderClick() { + private _onFillOrderClick(): void { if (!this.state.isMakerTokenAddressInRegistry || !this.state.isTakerTokenAddressInRegistry) { this.setState({ isFillWarningDialogOpen: true, @@ -329,7 +329,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { this._onFillOrderClickFireAndForgetAsync(); } } - private _onFillWarningClosed(didUserCancel: boolean) { + private _onFillWarningClosed(didUserCancel: boolean): void { this.setState({ isFillWarningDialogOpen: false, }); @@ -338,10 +338,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { this._onFillOrderClickFireAndForgetAsync(); } } - private _onFillAmountChange(isValid: boolean, amount?: BigNumber) { + private _onFillAmountChange(isValid: boolean, amount?: BigNumber): void { this.props.dispatcher.updateOrderFillAmount(amount); } - private _onFillOrderJSONChanged(event: any) { + private _onFillOrderJSONChanged(event: any): void { const orderJSON = event.target.value; this.setState({ didOrderValidationRun: _.isEmpty(orderJSON) && _.isEmpty(this.state.orderJSONErrMsg), @@ -350,7 +350,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { // tslint:disable-next-line:no-floating-promises this._validateFillOrderFireAndForgetAsync(orderJSON); } - private async _checkForUntrackedTokensAndAskToAdd() { + private async _checkForUntrackedTokensAndAskToAddAsync(): Promise<void> { if (!_.isEmpty(this.state.orderJSONErrMsg)) { return; } @@ -396,7 +396,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { }); } } - private async _validateFillOrderFireAndForgetAsync(orderJSON: string) { + private async _validateFillOrderFireAndForgetAsync(orderJSON: string): Promise<void> { let orderJSONErrMsg = ''; let parsedOrder: Order; let orderHash: string; @@ -491,7 +491,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { unavailableTakerAmount, }); - await this._checkForUntrackedTokensAndAskToAdd(); + await this._checkForUntrackedTokensAndAskToAddAsync(); } private async _onFillOrderClickFireAndForgetAsync(): Promise<void> { if (this.props.blockchainErr !== BlockchainErrs.NoError || _.isEmpty(this.props.userAddress)) { @@ -650,7 +650,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { const roundedUnitAmount = Math.round(unitAmount.toNumber() * 100000) / 100000; return roundedUnitAmount; } - private _onToggleTrackConfirmDialog(didConfirmTokenTracking: boolean) { + private _onToggleTrackConfirmDialog(didConfirmTokenTracking: boolean): void { if (!didConfirmTokenTracking) { this.setState({ orderJSON: '', diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx index 7d5351ec4..97297d5a1 100644 --- a/packages/website/ts/components/fill_order_json.tsx +++ b/packages/website/ts/components/fill_order_json.tsx @@ -19,7 +19,7 @@ interface FillOrderJSONProps { interface FillOrderJSONState {} export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrderJSONState> { - public render() { + public render(): React.ReactNode { const tokenAddresses = _.keys(this.props.tokenByAddress); const exchangeContract = this.props.blockchain.getExchangeContractAddressIfExists(); const hintSideToAssetToken = { diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx index d3215a6c1..83095b1d3 100644 --- a/packages/website/ts/components/fill_warning_dialog.tsx +++ b/packages/website/ts/components/fill_warning_dialog.tsx @@ -8,7 +8,7 @@ interface FillWarningDialogProps { onToggleDialog: (didUserCancel: boolean) => void; } -export function FillWarningDialog(props: FillWarningDialogProps) { +export const FillWarningDialog = (props: FillWarningDialogProps) => { const didCancel = true; return ( <Dialog @@ -42,4 +42,4 @@ export function FillWarningDialog(props: FillWarningDialogProps) { </div> </Dialog> ); -} +}; diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/token_send_completed.tsx index a3b056758..bb5adfa4e 100644 --- a/packages/website/ts/components/flash_messages/token_send_completed.tsx +++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx @@ -16,7 +16,7 @@ interface TokenSendCompletedProps { interface TokenSendCompletedState {} export class TokenSendCompleted extends React.Component<TokenSendCompletedProps, TokenSendCompletedState> { - public render() { + public render(): React.ReactNode { const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) && ( <a style={{ color: colors.white }} href={`${this.props.etherScanLinkIfExists}`} target="_blank"> Verify on Etherscan diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx index 188f1f9a6..2a6d2a64b 100644 --- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx +++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx @@ -9,7 +9,7 @@ interface TransactionSubmittedProps { interface TransactionSubmittedState {} export class TransactionSubmitted extends React.Component<TransactionSubmittedProps, TransactionSubmittedState> { - public render() { + public render(): React.ReactNode { if (_.isUndefined(this.props.etherScanLinkIfExists)) { return <div>Transaction submitted to the network</div>; } else { diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 487b039b2..c44e41084 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -50,7 +50,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { selectedLanguage: props.translate.getLanguage(), }; } - public render() { + public render(): React.ReactNode { const menuItemsBySection: MenuItemsBySection = { [Key.Documentation]: [ { @@ -180,14 +180,14 @@ export class Footer extends React.Component<FooterProps, FooterState> { </div> ); } - private _renderIcon(fileName: string) { + private _renderIcon(fileName: string): React.ReactNode { 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): React.ReactNode { const titleToIcon: { [title: string]: string } = { [this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png', [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png', @@ -222,7 +222,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { </div> ); } - private _renderHeader(key: Key) { + private _renderHeader(key: Key): React.ReactNode { const headerStyle = { color: colors.grey400, letterSpacing: 2, @@ -235,7 +235,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { </div> ); } - private _updateLanguage(e: any, index: number, value: Language) { + private _updateLanguage(e: any, index: number, value: Language): void { this.setState({ selectedLanguage: value, }); diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index 69fb32a21..d7cc554c4 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -79,7 +79,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt }, }; } - public render() { + public render(): React.ReactNode { const dialogConfigs: DialogConfigs = this._dialogConfigsByAssetView[this.state.assetView]; return ( <Dialog @@ -102,7 +102,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt </Dialog> ); } - private _renderConfirmTrackToken() { + private _renderConfirmTrackToken(): React.ReactNode { const token = this.props.tokenByAddress[this.state.chosenTrackTokenAddress]; return ( <TrackTokenConfirmation @@ -113,7 +113,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt /> ); } - private _renderAssetPicker() { + private _renderAssetPicker(): React.ReactNode { return ( <div className="clearfix flex flex-wrap" @@ -128,7 +128,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt </div> ); } - private _renderGridTiles() { + private _renderGridTiles(): React.ReactNode { let isHovered; let tileStyles; const gridTiles = _.map(this.props.tokenByAddress, (token: Token, address: string) => { @@ -195,19 +195,19 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt } return gridTiles; } - private _onToggleHover(address: string, isHovered: boolean) { + private _onToggleHover(address: string, isHovered: boolean): void { const hoveredAddress = isHovered ? address : undefined; this.setState({ hoveredAddress, }); } - private _onCloseDialog() { + private _onCloseDialog(): void { this.setState({ assetView: AssetViews.ASSET_PICKER, }); this.props.onTokenChosen(this.props.currentTokenAddress); } - private _onChooseToken(tokenAddress: string) { + private _onChooseToken(tokenAddress: string): void { const token = this.props.tokenByAddress[tokenAddress]; if (token.isTracked) { this.props.onTokenChosen(tokenAddress); @@ -218,12 +218,12 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt }); } } - private _onCustomAssetChosen() { + private _onCustomAssetChosen(): void { this.setState({ assetView: AssetViews.NEW_TOKEN_FORM, }); } - private _onNewTokenSubmitted(newToken: Token) { + private _onNewTokenSubmitted(newToken: Token): void { trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newToken); this.props.dispatcher.addTokenToTokenByAddress(newToken); this.setState({ @@ -231,7 +231,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt }); this.props.onTokenChosen(newToken.address); } - private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) { + private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean): Promise<void> { if (!didUserAcceptTracking) { this.setState({ isAddingTokenToTracked: false, 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 eb76cb529..d46c29058 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -63,10 +63,10 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G signingState: SigningState.UNSIGNED, }; } - public componentDidMount() { + public componentDidMount(): void { window.scrollTo(0, 0); } - public render() { + public render(): React.ReactNode { const dispatcher = this.props.dispatcher; const depositTokenAddress = this.props.sideToAssetToken[Side.Deposit].address; const depositToken = this.props.tokenByAddress[depositTokenAddress]; @@ -214,13 +214,13 @@ 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): void { this.props.dispatcher.updateChosenAssetToken(side, { address: token.address, amount, }); } - private _onCloseOrderJSONDialog() { + private _onCloseOrderJSONDialog(): void { // 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. 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 e7f3b93c6..10f71b430 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -42,7 +42,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor decimalsErrText: '', }; } - public render() { + public render(): React.ReactNode { return ( <div className="mx-auto pb2" style={{ width: 256 }}> <div> @@ -96,7 +96,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor </div> ); } - private async _onAddNewTokenClickAsync() { + private async _onAddNewTokenClickAsync(): Promise<void> { // Trigger validation of name and symbol this._onTokenNameChanged(undefined, this.state.name); this._onTokenSymbolChanged(undefined, this.state.symbol); @@ -152,7 +152,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor }; this.props.onNewTokenSubmitted(newToken); } - private _onTokenNameChanged(e: any, name: string) { + private _onTokenNameChanged(e: any, name: string): void { let nameErrText = ''; const maxLength = 30; const tokens = _.values(this.props.tokenByAddress); @@ -173,7 +173,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor nameErrText, }); } - private _onTokenSymbolChanged(e: any, symbol: string) { + private _onTokenSymbolChanged(e: any, symbol: string): void { let symbolErrText = ''; const maxLength = 5; const tokens = _.values(this.props.tokenByAddress); @@ -193,7 +193,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor symbolErrText, }); } - private _onTokenDecimalsChanged(e: any, decimals: string) { + private _onTokenDecimalsChanged(e: any, decimals: string): void { let decimalsErrText = ''; const maxLength = 2; if (decimals === '') { @@ -209,20 +209,20 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor decimalsErrText, }); } - private _onTokenAddressChanged(address?: string) { + private _onTokenAddressChanged(address?: string): void { if (!_.isUndefined(address)) { this.setState({ address, }); } } - private _isValidName(input: string) { + private _isValidName(input: string): boolean { return /^[a-z0-9 ]+$/i.test(input); } - private _isInteger(input: string) { + private _isInteger(input: string): boolean { return /^[0-9]+$/i.test(input); } - private _isAlphanumeric(input: string) { + private _isAlphanumeric(input: string): boolean { return /^[a-zA-Z0-9]+$/i.test(input); } } diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx index 7ca4af968..39ec72f8a 100644 --- a/packages/website/ts/components/inputs/address_input.tsx +++ b/packages/website/ts/components/inputs/address_input.tsx @@ -29,14 +29,14 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu errMsg: '', }; } - public componentWillReceiveProps(nextProps: AddressInputProps) { + public componentWillReceiveProps(nextProps: AddressInputProps): void { if (nextProps.shouldShowIncompleteErrs && this.props.isRequired && this.state.address === '') { this.setState({ errMsg: 'Address is required', }); } } - public render() { + public render(): React.ReactNode { const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label; const labelDisplay = this.props.shouldHideLabel ? 'hidden' : 'block'; const hintText = this.props.hintText ? this.props.hintText : ''; @@ -57,7 +57,7 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu </div> ); } - private _onOrderTakerAddressUpdated(e: any) { + private _onOrderTakerAddressUpdated(e: any): void { 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 cfe75b751..48c7f9f57 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -63,7 +63,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow prevAllowance: props.tokenState.allowance, }; } - public componentWillReceiveProps(nextProps: AllowanceToggleProps) { + public componentWillReceiveProps(nextProps: AllowanceToggleProps): void { if (!nextProps.tokenState.allowance.eq(this.state.prevAllowance)) { this.setState({ isSpinnerVisible: false, @@ -71,7 +71,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow }); } } - public render() { + public render(): React.ReactNode { return ( <div className="flex"> <div> @@ -128,7 +128,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow await errorReporter.reportAsync(err); } } - private _isAllowanceSet() { + private _isAllowanceSet(): boolean { 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 e9b8dd369..68b77cfc3 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -46,7 +46,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp amountString, }; } - public componentWillReceiveProps(nextProps: BalanceBoundedInputProps) { + public componentWillReceiveProps(nextProps: BalanceBoundedInputProps): void { if (nextProps === this.props) { return; } @@ -76,7 +76,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp }); } } - public render() { + public render(): React.ReactNode { let errorText; if (this.props.shouldShowErrs) { errorText = @@ -104,7 +104,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp /> ); } - private _onValueChange(e: any, amountString: string) { + private _onValueChange(e: any, amountString: string): void { const errMsg = this._validate(amountString, this.props.balance); this.setState( { @@ -135,7 +135,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount); return errMsg; } - private _renderIncreaseBalanceLink() { + private _renderIncreaseBalanceLink(): React.ReactNode { 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 f3a879065..c3822a80b 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -29,7 +29,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou shouldShowUnderline: true, style: { height: 63 }, }; - public render() { + public render(): React.ReactNode { const amount = this.props.amount ? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) : undefined; @@ -52,7 +52,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou </div> ); } - private _onChange(isValid: boolean, amount?: BigNumber) { + private _onChange(isValid: boolean, amount?: BigNumber): void { 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 e473648d2..5c68080fe 100644 --- a/packages/website/ts/components/inputs/expiration_input.tsx +++ b/packages/website/ts/components/inputs/expiration_input.tsx @@ -30,7 +30,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir timeMoment: didUserSetExpiry ? expirationMoment : undefined, }; } - public render() { + public render(): React.ReactNode { const date = this.state.dateMoment ? this.state.dateMoment.toDate() : undefined; const time = this.state.timeMoment ? this.state.timeMoment.toDate() : undefined; return ( @@ -72,7 +72,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir .startOf('day') .isBefore(this._earliestPickableMoment); } - private _clearDates() { + private _clearDates(): void { this.setState({ dateMoment: undefined, timeMoment: undefined, @@ -80,7 +80,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): void { const dateMoment = moment(date); this.setState({ dateMoment, @@ -88,7 +88,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): void { 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 28305637d..37d4af138 100644 --- a/packages/website/ts/components/inputs/hash_input.tsx +++ b/packages/website/ts/components/inputs/hash_input.tsx @@ -27,7 +27,7 @@ interface HashInputProps { interface HashInputState {} export class HashInput extends React.Component<HashInputProps, HashInputState> { - public render() { + public render(): React.ReactNode { const msgHashHex = this.props.blockchainIsLoaded ? this._generateMessageHashHex() : ''; return ( <div> @@ -40,7 +40,7 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> { </div> ); } - private _generateMessageHashHex() { + private _generateMessageHashHex(): string { 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 4cf9af64d..a4dc01ba8 100644 --- a/packages/website/ts/components/inputs/identicon_address_input.tsx +++ b/packages/website/ts/components/inputs/identicon_address_input.tsx @@ -23,7 +23,7 @@ export class IdenticonAddressInput extends React.Component<IdenticonAddressInput address: props.initialAddress, }; } - public render() { + public render(): React.ReactNode { const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label; return ( <div className="relative" style={{ width: '100%' }}> diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index 9e638b67b..9a74bdd51 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -52,14 +52,14 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok isBalanceAndAllowanceLoaded: false, }; } - public componentWillMount() { + public componentWillMount(): void { // tslint:disable-next-line:no-floating-promises this._fetchBalanceAndAllowanceAsync(this.props.token.address, this.props.userAddress); } - public componentWillUnmount() { + public componentWillUnmount(): void { this._isUnmounted = true; } - public componentWillReceiveProps(nextProps: TokenAmountInputProps) { + public componentWillReceiveProps(nextProps: TokenAmountInputProps): void { if ( nextProps.userAddress !== this.props.userAddress || nextProps.networkId !== this.props.networkId || @@ -70,7 +70,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok this._fetchBalanceAndAllowanceAsync(nextProps.token.address, nextProps.userAddress); } } - public render() { + public render(): React.ReactNode { const amount = this.props.amount ? ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals) : undefined; @@ -98,7 +98,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok </div> ); } - private _onChange(isValid: boolean, amount?: BigNumber) { + private _onChange(isValid: boolean, amount?: BigNumber): void { let baseUnitAmount; if (!_.isUndefined(amount)) { baseUnitAmount = ZeroEx.toBaseUnitAmount(amount, this.props.token.decimals); @@ -122,7 +122,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok return undefined; } } - private async _fetchBalanceAndAllowanceAsync(tokenAddress: string, userAddress: string) { + private async _fetchBalanceAndAllowanceAsync(tokenAddress: string, userAddress: string): Promise<void> { this.setState({ isBalanceAndAllowanceLoaded: false, }); diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx index 545e9a095..c2c4dd63b 100644 --- a/packages/website/ts/components/inputs/token_input.tsx +++ b/packages/website/ts/components/inputs/token_input.tsx @@ -38,7 +38,7 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState isPickerOpen: false, }; } - public render() { + public render(): React.ReactNode { const token = this.props.tokenByAddress[this.props.assetToken.address]; const iconStyles = { cursor: 'pointer', @@ -76,7 +76,7 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState </div> ); } - private _onTokenChosen(tokenAddress: string) { + private _onTokenChosen(tokenAddress: string): void { const assetToken: AssetToken = { address: tokenAddress, amount: this.props.assetToken.amount, @@ -86,12 +86,12 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState isPickerOpen: false, }); } - private _onToggleHover(isHoveringIcon: boolean) { + private _onToggleHover(isHoveringIcon: boolean): void { this.setState({ isHoveringIcon, }); } - private _onAssetClicked() { + private _onAssetClicked(): void { if (this.props.blockchainErr !== BlockchainErrs.NoError) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); return; diff --git a/packages/website/ts/components/legacy_portal/legacy_portal.tsx b/packages/website/ts/components/legacy_portal/legacy_portal.tsx index c45b20365..002b258fb 100644 --- a/packages/website/ts/components/legacy_portal/legacy_portal.tsx +++ b/packages/website/ts/components/legacy_portal/legacy_portal.tsx @@ -79,7 +79,7 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta private _blockchain: Blockchain; private _sharedOrderIfExists: Order; private _throttledScreenWidthUpdate: () => void; - public static hasAlreadyDismissedWethNotice() { + public static hasAlreadyDismissedWethNotice(): boolean { const didDismissWethNotice = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE); const hasAlreadyDismissedWethNotice = !_.isUndefined(didDismissWethNotice) && !_.isEmpty(didDismissWethNotice); return hasAlreadyDismissedWethNotice; @@ -105,14 +105,14 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta isLedgerDialogOpen: false, }; } - public componentDidMount() { + public componentDidMount(): void { window.addEventListener('resize', this._throttledScreenWidthUpdate); window.scrollTo(0, 0); } - public componentWillMount() { + public componentWillMount(): void { this._blockchain = new Blockchain(this.props.dispatcher); } - public componentWillUnmount() { + public componentWillUnmount(): void { 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 @@ -121,7 +121,7 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta // become disconnected from their backing Ethereum node, changes user accounts, etc...) this.props.dispatcher.resetState(); } - public componentWillReceiveProps(nextProps: LegacyPortalProps) { + public componentWillReceiveProps(nextProps: LegacyPortalProps): void { if (nextProps.networkId !== this.state.prevNetworkId) { // tslint:disable-next-line:no-floating-promises this._blockchain.networkIdUpdatedFireAndForgetAsync(nextProps.networkId); @@ -150,7 +150,7 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta }); } } - public render() { + public render(): React.ReactNode { const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind( this.props.dispatcher, ); @@ -276,12 +276,12 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta </div> ); } - public onToggleLedgerDialog() { + public onToggleLedgerDialog(): void { this.setState({ isLedgerDialogOpen: !this.state.isLedgerDialogOpen, }); } - private _renderEthWrapper() { + private _renderEthWrapper(): React.ReactNode { return ( <EthWrappers networkId={this.props.networkId} @@ -294,7 +294,7 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta /> ); } - private _renderTradeHistory() { + private _renderTradeHistory(): React.ReactNode { return ( <TradeHistory tokenByAddress={this.props.tokenByAddress} @@ -303,7 +303,7 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta /> ); } - private _renderTokenBalances() { + private _renderTokenBalances(): React.ReactNode { const allTokens = _.values(this.props.tokenByAddress); const trackedTokens = _.filter(allTokens, t => t.isTracked); return ( @@ -322,7 +322,7 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta /> ); } - private _renderFillOrder(match: any, location: Location, history: History) { + private _renderFillOrder(match: any, location: Location, history: History): React.ReactNode { const initialFillOrder = !_.isUndefined(this.props.userSuppliedOrderCache) ? this.props.userSuppliedOrderCache : this._sharedOrderIfExists; @@ -341,7 +341,7 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta /> ); } - private _renderGenerateOrderForm(match: any, location: Location, history: History) { + private _renderGenerateOrderForm(match: any, location: Location, history: History): React.ReactNode { return ( <GenerateOrderForm blockchain={this._blockchain} @@ -350,13 +350,13 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta /> ); } - private _onPortalDisclaimerAccepted() { + private _onPortalDisclaimerAccepted(): void { localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set'); this.setState({ isDisclaimerDialogOpen: false, }); } - private _onWethNoticeAccepted() { + private _onWethNoticeAccepted(): void { localStorage.setItem(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE, 'set'); this.setState({ isWethNoticeDialogOpen: false, @@ -388,7 +388,7 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta } return order; } - private _updateScreenWidth() { + private _updateScreenWidth(): void { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); } diff --git a/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx b/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx index 94113f066..7469ca14e 100644 --- a/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx +++ b/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx @@ -15,7 +15,7 @@ export class LegacyPortalMenu extends React.Component<LegacyPortalMenuProps, Leg public static defaultProps: Partial<LegacyPortalMenuProps> = { onClick: _.noop, }; - public render() { + public render(): React.ReactNode { return ( <div> <MenuItem @@ -61,7 +61,7 @@ export class LegacyPortalMenu extends React.Component<LegacyPortalMenuProps, Leg </div> ); } - private _renderMenuItemWithIcon(title: string, iconName: string) { + private _renderMenuItemWithIcon(title: string, iconName: string): React.ReactNode { return ( <div className="flex" style={{ fontWeight: 100 }}> <div className="pr1 pl2"> diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx index 02b88b888..6feefea50 100644 --- a/packages/website/ts/components/order_json.tsx +++ b/packages/website/ts/components/order_json.tsx @@ -38,7 +38,7 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> { // tslint:disable-next-line:no-floating-promises this._setShareLinkAsync(); } - public render() { + public render(): React.ReactNode { const order = utils.generateOrder( this.props.exchangeContractIfExists, this.props.sideToAssetToken, @@ -116,11 +116,11 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> { </div> ); } - private async _shareViaTwitterAsync() { + private _shareViaTwitterAsync(): void { 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 _shareViaFacebook(): void { (window as any).FB.ui( { display: 'popup', @@ -130,14 +130,14 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> { _.noop, ); } - private async _shareViaEmailAsync() { + private _shareViaEmailAsync(): void { 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() { + private async _setShareLinkAsync(): Promise<void> { const shareLink = await this._generateShareLinkAsync(); this.setState({ shareLink, @@ -159,7 +159,7 @@ You can see and fill it here: ${this.state.shareLink}`); } return bodyObj.data.url; } - private _getOrderUrl() { + private _getOrderUrl(): string { const order = utils.generateOrder( this.props.exchangeContractIfExists, this.props.sideToAssetToken, diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 4cbc65ce4..e572b7911 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -102,14 +102,14 @@ export class Portal extends React.Component<PortalProps, PortalState> { isLedgerDialogOpen: false, }; } - public componentDidMount() { + public componentDidMount(): void { window.addEventListener('resize', this._throttledScreenWidthUpdate); window.scrollTo(0, 0); } - public componentWillMount() { + public componentWillMount(): void { this._blockchain = new Blockchain(this.props.dispatcher); } - public componentWillUnmount() { + public componentWillUnmount(): void { 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 @@ -118,7 +118,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { // become disconnected from their backing Ethereum node, changed user accounts, etc...) this.props.dispatcher.resetState(); } - public componentWillReceiveProps(nextProps: PortalProps) { + public componentWillReceiveProps(nextProps: PortalProps): void { if (nextProps.networkId !== this.state.prevNetworkId) { // tslint:disable-next-line:no-floating-promises this._blockchain.networkIdUpdatedFireAndForgetAsync(nextProps.networkId); @@ -144,7 +144,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { }); } } - public render() { + public render(): React.ReactNode { const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind( this.props.dispatcher, ); @@ -241,7 +241,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { </div> ); } - private _onTokenChosen(tokenAddress: string) { + private _onTokenChosen(tokenAddress: string): void { if (_.isEmpty(tokenAddress)) { this.setState({ tokenManagementState: TokenManagementState.None, @@ -269,28 +269,28 @@ export class Portal extends React.Component<PortalProps, PortalState> { tokenManagementState: TokenManagementState.None, }); } - private _onToggleLedgerDialog() { + private _onToggleLedgerDialog(): void { this.setState({ isLedgerDialogOpen: !this.state.isLedgerDialogOpen, }); } - private _onAddToken() { + private _onAddToken(): void { this.setState({ tokenManagementState: TokenManagementState.Add, }); } - private _onRemoveToken() { + private _onRemoveToken(): void { this.setState({ tokenManagementState: TokenManagementState.Remove, }); } - private _onPortalDisclaimerAccepted() { + private _onPortalDisclaimerAccepted(): void { localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set'); this.setState({ isDisclaimerDialogOpen: false, }); } - private _updateScreenWidth() { + private _updateScreenWidth(): void { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); } diff --git a/packages/website/ts/components/redirecter.tsx b/packages/website/ts/components/redirecter.tsx index 2e705af58..629522bbb 100644 --- a/packages/website/ts/components/redirecter.tsx +++ b/packages/website/ts/components/redirecter.tsx @@ -5,6 +5,6 @@ interface RedirecterProps { location: string; } -export function Redirecter(props: RedirecterProps) { +export function Redirecter(props: RedirecterProps): void { window.location.href = constants.URL_ANGELLIST; } diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index d88a59d15..5964dcd56 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -47,7 +47,7 @@ const styles: Styles = { width: '100%', boxSizing: 'border-box', }, - dailyTradeVolumeLabel: { + weeklyTradeVolumeLabel: { fontSize: 14, color: colors.mediumBlue, }, @@ -80,9 +80,9 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( <div className="py1" style={styles.relayerNameLabel}> {props.relayerInfo.name} </div> - <div style={styles.dailyTradeVolumeLabel}>{props.relayerInfo.dailyTxnVolume}</div> + <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div> <div className="py1" style={styles.subLabel}> - Daily Trade Volume + Weekly Trade Volume </div> <TopTokens tokens={props.relayerInfo.topTokens} networkId={props.networkId} /> <div className="py1" style={styles.subLabel}> @@ -109,14 +109,14 @@ class ImgWithFallback extends React.Component<ImgWithFallbackProps, ImgWithFallb imageLoadFailed: false, }; } - public render() { + public render(): React.ReactNode { if (this.state.imageLoadFailed || _.isUndefined(this.props.src)) { return <img src={this.props.fallbackSrc} style={this.props.style} />; } else { return <img src={this.props.src} onError={this._onError.bind(this)} style={this.props.style} />; } } - private _onError() { + private _onError(): void { this.setState({ imageLoadFailed: true, }); diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index dffd0f83f..d4fd6aeaf 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -48,14 +48,14 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde error: undefined, }; } - public componentWillMount() { + public componentWillMount(): void { // tslint:disable-next-line:no-floating-promises this._fetchRelayerInfosAsync(); } - public componentWillUnmount() { + public componentWillUnmount(): void { this._isUnmounted = true; } - public render() { + public render(): React.ReactNode { const readyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos); if (!readyToRender) { return ( diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index db4d3a211..03c70c9dd 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -26,21 +26,54 @@ export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTo {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo, index: number) => { const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel }; const style = index !== 0 ? firstItemStyle : styles.tokenLabel; - return ( - <a - key={tokenInfo.address} - href={tokenLinkFromToken(tokenInfo, props.networkId)} - target="_blank" - style={style} - > - {tokenInfo.symbol} - </a> - ); + return <TokenLink tokenInfo={tokenInfo} style={style} networkId={props.networkId} />; })} </div> ); }; -function tokenLinkFromToken(tokenInfo: WebsiteBackendTokenInfo, networkId: number) { +interface TokenLinkProps { + tokenInfo: WebsiteBackendTokenInfo; + style: React.CSSProperties; + networkId: number; +} +interface TokenLinkState { + isHovering: boolean; +} + +class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> { + constructor(props: TokenLinkProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + const style = { + ...this.props.style, + cursor: 'pointer', + opacity: this.state.isHovering ? 0.5 : 1, + }; + return ( + <a + key={this.props.tokenInfo.address} + href={tokenLinkFromToken(this.props.tokenInfo, this.props.networkId)} + target="_blank" + style={style} + onMouseEnter={this._onToggleHover.bind(this, true)} + onMouseLeave={this._onToggleHover.bind(this, false)} + > + {this.props.tokenInfo.symbol} + </a> + ); + } + private _onToggleHover(isHovering: boolean): void { + this.setState({ + isHovering, + }); + } +} + +function tokenLinkFromToken(tokenInfo: WebsiteBackendTokenInfo, networkId: number): string { return sharedUtils.getEtherScanLinkIfExists(tokenInfo.address, networkId, EtherscanLinkSuffixes.Address); } diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx index 79c103e05..8486dbd8b 100644 --- a/packages/website/ts/components/send_button.tsx +++ b/packages/website/ts/components/send_button.tsx @@ -33,7 +33,7 @@ export class SendButton extends React.Component<SendButtonProps, SendButtonState isSending: false, }; } - public render() { + public render(): React.ReactNode { const labelStyle = this.state.isSending ? { fontSize: 10 } : {}; return ( <div> @@ -57,12 +57,12 @@ export class SendButton extends React.Component<SendButtonProps, SendButtonState </div> ); } - private _toggleSendDialog() { + private _toggleSendDialog(): void { this.setState({ isSendDialogVisible: !this.state.isSendDialogVisible, }); } - private async _onSendAmountSelectedAsync(recipient: string, value: BigNumber) { + private async _onSendAmountSelectedAsync(recipient: string, value: BigNumber): Promise<void> { this.setState({ isSending: true, }); diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx index a0ea869fb..bf46caad9 100644 --- a/packages/website/ts/components/sidebar_header.tsx +++ b/packages/website/ts/components/sidebar_header.tsx @@ -12,7 +12,7 @@ interface SidebarHeaderProps { interface SidebarHeaderState {} export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> { - public render() { + public render(): React.ReactNode { return ( <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}> <div className="flex" style={{ fontSize: 25 }}> diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 618b5fe8f..83948e5c2 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -99,15 +99,15 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala trackedTokenStateByAddress: initialTrackedTokenStateByAddress, }; } - public componentWillMount() { + public componentWillMount(): void { const trackedTokenAddresses = _.keys(this.state.trackedTokenStateByAddress); // tslint:disable-next-line:no-floating-promises this._fetchBalancesAndAllowancesAsync(trackedTokenAddresses); } - public componentWillUnmount() { + public componentWillUnmount(): void { this._isUnmounted = true; } - public componentWillReceiveProps(nextProps: TokenBalancesProps) { + public componentWillReceiveProps(nextProps: TokenBalancesProps): void { if (nextProps.userEtherBalanceInWei !== this.props.userEtherBalanceInWei) { if (this.state.isBalanceSpinnerVisible) { const receivedAmountInWei = nextProps.userEtherBalanceInWei.minus(this.props.userEtherBalanceInWei); @@ -153,10 +153,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala this._fetchBalancesAndAllowancesAsync(newTokenAddresses); } } - public componentDidMount() { + public componentDidMount(): void { window.scrollTo(0, 0); } - public render() { + public render(): React.ReactNode { const errorDialogActions = [ <FlatButton key="errorOkBtn" @@ -294,7 +294,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala </div> ); } - private _renderTokenTableRows() { + private _renderTokenTableRows(): React.ReactNode { if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== BlockchainErrs.NoError) { return ''; } @@ -313,7 +313,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala ); return tableRows; } - private _renderTokenRow(tokenColSpan: number, actionPaddingX: number, token: Token) { + private _renderTokenRow(tokenColSpan: number, actionPaddingX: number, token: Token): React.ReactNode { const tokenState = this.state.trackedTokenStateByAddress[token.address]; const tokenLink = sharedUtils.getEtherScanLinkIfExists( token.address, @@ -411,7 +411,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala </TableRow> ); } - private _onAssetTokenPicked(tokenAddress: string) { + private _onAssetTokenPicked(tokenAddress: string): void { if (_.isEmpty(tokenAddress)) { this.setState({ isTokenPickerOpen: false, @@ -439,16 +439,16 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala isTokenPickerOpen: false, }); } - private _onSendFailed() { + private _onSendFailed(): void { this.setState({ errorType: BalanceErrs.sendFailed, }); } - private _renderAmount(amount: BigNumber, decimals: number) { + private _renderAmount(amount: BigNumber, decimals: number): React.ReactNode { const unitAmount = ZeroEx.toUnitAmount(amount, decimals); return unitAmount.toNumber().toFixed(configs.AMOUNT_DISPLAY_PRECSION); } - private _renderTokenName(token: Token) { + private _renderTokenName(token: Token): React.ReactNode { const tooltipId = `tooltip-${token.address}`; return ( <div className="flex"> @@ -460,7 +460,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala </div> ); } - private _renderErrorDialogBody() { + private _renderErrorDialogBody(): React.ReactNode { switch (this.state.errorType) { case BalanceErrs.incorrectNetworkForFaucet: return ( @@ -499,7 +499,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala throw utils.spawnSwitchErr('errorType', this.state.errorType); } } - private _onErrorOccurred(errorType: BalanceErrs) { + private _onErrorOccurred(errorType: BalanceErrs): void { this.setState({ errorType, }); @@ -577,24 +577,24 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala } return true; } - private _onErrorDialogToggle(isOpen: boolean) { + private _onErrorDialogToggle(isOpen: boolean): void { this.setState({ errorType: undefined, }); } - private _onAddTokenClicked() { + private _onAddTokenClicked(): void { this.setState({ isTokenPickerOpen: true, isAddingToken: true, }); } - private _onRemoveTokenClicked() { + private _onRemoveTokenClicked(): void { this.setState({ isTokenPickerOpen: true, isAddingToken: false, }); } - private async _startPollingZrxBalanceAsync() { + private async _startPollingZrxBalanceAsync(): Promise<void> { const tokens = _.values(this.props.tokenByAddress); const zrxToken = _.find(tokens, t => t.symbol === ZRX_TOKEN_SYMBOL); @@ -609,7 +609,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala isZRXSpinnerVisible: false, }); } - private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]) { + private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]): Promise<void> { const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress; const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; for (const tokenAddress of tokenAddresses) { @@ -629,7 +629,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala }); } } - private _getInitialTrackedTokenStateByAddress(trackedTokens: Token[]) { + private _getInitialTrackedTokenStateByAddress(trackedTokens: Token[]): TokenStateByAddress { const trackedTokenStateByAddress: TokenStateByAddress = {}; _.each(trackedTokens, token => { trackedTokenStateByAddress[token.address] = { @@ -640,7 +640,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala }); return trackedTokenStateByAddress; } - private async _refetchTokenStateAsync(tokenAddress: string) { + private async _refetchTokenStateAsync(tokenAddress: string): Promise<void> { const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( userAddressIfExists, diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index dc6ade841..bebaa5341 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -35,7 +35,7 @@ const styles: Styles = { }; export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> { - public render() { + public render(): React.ReactNode { const isAddressAvailable = !_.isEmpty(this.props.userAddress); const isExternallyInjectedProvider = this.props.providerType === ProviderType.Injected && this.props.injectedProviderName !== '0x Public'; @@ -83,7 +83,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi </div> ); } - public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean) { + public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean): React.ReactNode { if (hasInjectedProvider || hasLedgerProvider) { return ( <ProviderPicker diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx index b986da873..1ecb8389c 100644 --- a/packages/website/ts/components/top_bar/provider_picker.tsx +++ b/packages/website/ts/components/top_bar/provider_picker.tsx @@ -19,7 +19,7 @@ interface ProviderPickerProps { interface ProviderPickerState {} export class ProviderPicker extends React.Component<ProviderPickerProps, ProviderPickerState> { - public render() { + public render(): React.ReactNode { const isLedgerSelected = this.props.providerType === ProviderType.Ledger; const menuStyle = { padding: 10, @@ -46,7 +46,7 @@ export class ProviderPicker extends React.Component<ProviderPickerProps, Provide </div> ); } - private _renderLabel(title: string, shouldShowNetwork: boolean) { + private _renderLabel(title: string, shouldShowNetwork: boolean): React.ReactNode { const label = ( <div className="flex"> <div style={{ fontSize: 14 }}>{title}</div> @@ -55,7 +55,7 @@ export class ProviderPicker extends React.Component<ProviderPickerProps, Provide ); return label; } - private _renderNetwork() { + private _renderNetwork(): React.ReactNode { const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; return ( <div className="flex" style={{ marginTop: 1 }}> @@ -70,7 +70,7 @@ export class ProviderPicker extends React.Component<ProviderPickerProps, Provide </div> ); } - private _onProviderRadioChanged(value: string) { + private _onProviderRadioChanged(value: string): void { if (value === ProviderType.Ledger) { this.props.onToggleLedgerDialog(); } else { diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 5a1b50310..5fde007d6 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -83,7 +83,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { style: {}, isNightVersion: false, }; - public static heightForDisplayType(displayType: TopBarDisplayType) { + public static heightForDisplayType(displayType: TopBarDisplayType): number { const result = displayType === TopBarDisplayType.Expanded ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; return result + 1; } @@ -93,7 +93,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { isDrawerOpen: false, }; } - public render() { + public render(): React.ReactNode { const isNightVersion = this.props.isNightVersion; const isExpandedDisplayType = this.props.displayType === TopBarDisplayType.Expanded; const parentClassNames = `flex mx-auto ${isExpandedDisplayType ? 'pl3 py1' : 'max-width-4'}`; @@ -278,7 +278,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </div> ); } - private _renderDrawer() { + private _renderDrawer(): React.ReactNode { return ( <Drawer open={this.state.isDrawerOpen} @@ -447,51 +447,51 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </div> ); } - private _onMenuButtonClick() { + private _onMenuButtonClick(): void { this.setState({ isDrawerOpen: !this.state.isDrawerOpen, }); } - private _isViewingPortal() { + private _isViewingPortal(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Portal); } - private _isViewingFAQ() { + private _isViewingFAQ(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.FAQ); } - private _isViewing0xjsDocs() { + private _isViewing0xjsDocs(): boolean { return ( _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs) || _.includes(this.props.location.pathname, WebsiteLegacyPaths.ZeroExJs) ); } - private _isViewingConnectDocs() { + private _isViewingConnectDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Connect); } - private _isViewingSmartContractsDocs() { + private _isViewingSmartContractsDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts); } - private _isViewingWeb3WrapperDocs() { + private _isViewingWeb3WrapperDocs(): boolean { return ( _.includes(this.props.location.pathname, WebsitePaths.Web3Wrapper) || _.includes(this.props.location.pathname, WebsiteLegacyPaths.Web3Wrapper) ); } - private _isViewingSolCompilerDocs() { + private _isViewingSolCompilerDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.SolCompiler); } - private _isViewingJsonSchemasDocs() { + private _isViewingJsonSchemasDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.JSONSchemas); } - private _isViewingSolCovDocs() { + private _isViewingSolCovDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.SolCov); } - private _isViewingSubprovidersDocs() { + private _isViewingSubprovidersDocs(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Subproviders); } - private _isViewingWiki() { + private _isViewingWiki(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Wiki); } - private _shouldDisplayBottomBar() { + private _shouldDisplayBottomBar(): boolean { return ( this._isViewingWiki() || this._isViewing0xjsDocs() || diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx index c0e674b17..2e4254cfa 100644 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -26,7 +26,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM className: '', isNightVersion: false, }; - public render() { + public render(): React.ReactNode { const primaryStyles = this.props.isPrimary ? { borderRadius: 4, diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx index 8c5ba7e6f..294fb8590 100644 --- a/packages/website/ts/components/track_token_confirmation.tsx +++ b/packages/website/ts/components/track_token_confirmation.tsx @@ -15,7 +15,7 @@ interface TrackTokenConfirmationProps { interface TrackTokenConfirmationState {} export class TrackTokenConfirmation extends React.Component<TrackTokenConfirmationProps, TrackTokenConfirmationState> { - public render() { + public render(): React.ReactNode { const isMultipleTokens = this.props.tokens.length > 1; const allTokens = _.values(this.props.tokenByAddress); return ( diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx index 635358627..1ca9d866f 100644 --- a/packages/website/ts/components/trade_history/trade_history.tsx +++ b/packages/website/ts/components/trade_history/trade_history.tsx @@ -28,16 +28,16 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor sortedFills, }; } - public componentWillMount() { + public componentWillMount(): void { this._startPollingForFills(); } - public componentWillUnmount() { + public componentWillUnmount(): void { this._stopPollingForFills(); } - public componentDidMount() { + public componentDidMount(): void { window.scrollTo(0, 0); } - public render() { + public render(): React.ReactNode { return ( <div className="lg-px4 md-px4 sm-px2"> <h3>Trade history</h3> @@ -48,7 +48,7 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor </div> ); } - private _renderTrades() { + private _renderTrades(): React.ReactNode { const numNonCustomFills = this._numFillsWithoutCustomERC20Tokens(); if (numNonCustomFills === 0) { return this._renderEmptyNotice(); @@ -66,14 +66,14 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor ); }); } - private _renderEmptyNotice() { + private _renderEmptyNotice(): React.ReactNode { return ( <Paper className="mt1 p2 mx-auto center" style={{ width: '80%' }}> No filled orders yet. </Paper> ); } - private _numFillsWithoutCustomERC20Tokens() { + private _numFillsWithoutCustomERC20Tokens(): number { let numNonCustomFills = 0; const tokens = _.values(this.props.tokenByAddress); _.each(this.state.sortedFills, fill => { @@ -93,7 +93,7 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor }); return numNonCustomFills; } - private _startPollingForFills() { + private _startPollingForFills(): void { this._fillPollingIntervalId = window.setInterval(() => { const sortedFills = this._getSortedFills(); if (!utils.deepEqual(sortedFills, this.state.sortedFills)) { @@ -103,10 +103,10 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor } }, FILL_POLLING_INTERVAL); } - private _stopPollingForFills() { + private _stopPollingForFills(): void { clearInterval(this._fillPollingIntervalId); } - private _getSortedFills() { + private _getSortedFills(): Fill[] { 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 dbe72259b..adca4d58c 100644 --- a/packages/website/ts/components/trade_history/trade_history_item.tsx +++ b/packages/website/ts/components/trade_history/trade_history_item.tsx @@ -23,7 +23,7 @@ interface TradeHistoryItemProps { interface TradeHistoryItemState {} export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, TradeHistoryItemState> { - public render() { + public render(): React.ReactNode { const fill = this.props.fill; const tokens = _.values(this.props.tokenByAddress); const takerToken = _.find(tokens, token => { @@ -88,7 +88,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra </Paper> ); } - private _renderAmounts(makerToken: Token, takerToken: Token) { + private _renderAmounts(makerToken: Token, takerToken: Token): React.ReactNode { const fill = this.props.fill; const filledTakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledTakerTokenAmount, takerToken.decimals); const filledMakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledMakerTokenAmount, takerToken.decimals); @@ -136,7 +136,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra </div> ); } - private _renderDate() { + private _renderDate(): React.ReactNode { const blockMoment = moment.unix(this.props.fill.blockTimestamp); if (!blockMoment.isValid()) { return null; @@ -159,7 +159,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): React.ReactNode { const unitAmount = ZeroEx.toUnitAmount(amount, decimals); return ( <span> diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx index f81939255..b571d8c1c 100644 --- a/packages/website/ts/components/ui/alert.tsx +++ b/packages/website/ts/components/ui/alert.tsx @@ -7,7 +7,7 @@ interface AlertProps { message: string | React.ReactNode; } -export function Alert(props: AlertProps) { +export const Alert = (props: AlertProps) => { const isAlert = props.type === AlertTypes.ERROR; const errMsgStyles = { background: isAlert ? colors.red200 : colors.lightestGreen, @@ -22,4 +22,4 @@ export function Alert(props: AlertProps) { {props.message} </div> ); -} +}; diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx index d58e50815..2c2941067 100644 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ b/packages/website/ts/components/ui/copy_icon.tsx @@ -23,14 +23,14 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> { isHovering: false, }; } - public componentDidUpdate() { + public componentDidUpdate(): void { // Remove tooltip if hover away if (!this.state.isHovering && this._copyTooltipTimeoutId) { clearInterval(this._copyTooltipTimeoutId); this._hideTooltip(); } } - public render() { + public render(): React.ReactNode { return ( <div className="inline-block"> <CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}> @@ -55,15 +55,15 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> { </div> ); } - private _setRefToProperty(el: HTMLInputElement) { + private _setRefToProperty(el: HTMLInputElement): void { this._copyable = el; } - private _setHoverState(isHovering: boolean) { + private _setHoverState(isHovering: boolean): void { this.setState({ isHovering, }); } - private _onCopy() { + private _onCopy(): void { if (this._copyTooltipTimeoutId) { clearInterval(this._copyTooltipTimeoutId); } @@ -73,7 +73,7 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> { this._hideTooltip(); }, tooltipLifespanMs); } - private _hideTooltip() { + private _hideTooltip(): void { ReactTooltip.hide(ReactDOM.findDOMNode(this._copyable)); } } diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 63b9eec0b..98a495581 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -35,15 +35,15 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { isDropDownOpen: false, }; } - public componentDidMount() { + public componentDidMount(): void { this._popoverCloseCheckIntervalId = window.setInterval(() => { this._checkIfShouldClosePopover(); }, CHECK_CLOSE_POPOVER_INTERVAL_MS); } - public componentWillUnmount() { + public componentWillUnmount(): void { window.clearInterval(this._popoverCloseCheckIntervalId); } - public componentWillReceiveProps(nextProps: DropDownProps) { + public componentWillReceiveProps(nextProps: DropDownProps): void { // HACK: If the popoverContent is updated to a different dimension and the users // mouse is no longer above it, the dropdown can enter an inconsistent state where // it believes the user is still hovering over it. In order to remedy this, we @@ -52,7 +52,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { // dropdowns from having dynamic content. this._onHoverOff(); } - public render() { + public render(): React.ReactNode { return ( <div style={{ ...this.props.style, width: 'fit-content', height: '100%' }} @@ -77,11 +77,11 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { </div> ); } - private _onHover(event: React.FormEvent<HTMLInputElement>) { + private _onHover(event: React.FormEvent<HTMLInputElement>): void { this._isHovering = true; this._checkIfShouldOpenPopover(event); } - private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>) { + private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void { if (this.state.isDropDownOpen) { return; // noop } @@ -91,16 +91,16 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { anchorEl: event.currentTarget, }); } - private _onHoverOff() { + private _onHoverOff(): void { this._isHovering = false; } - private _checkIfShouldClosePopover() { + private _checkIfShouldClosePopover(): void { if (!this.state.isDropDownOpen || this._isHovering) { return; // noop } this._closePopover(); } - private _closePopover() { + private _closePopover(): void { this.setState({ isDropDownOpen: false, }); diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx index c1154d3d6..1b032c112 100644 --- a/packages/website/ts/components/ui/etherscan_icon.tsx +++ b/packages/website/ts/components/ui/etherscan_icon.tsx @@ -35,6 +35,6 @@ export const EtherScanIcon = (props: EtherScanIconProps) => { ); }; -function renderIcon() { +function renderIcon(): React.ReactNode { return <i style={{ color: colors.amber600 }} className="zmdi zmdi-open-in-new" />; } diff --git a/packages/website/ts/components/ui/fake_text_field.tsx b/packages/website/ts/components/ui/fake_text_field.tsx index 646ae98f6..ac3c30fec 100644 --- a/packages/website/ts/components/ui/fake_text_field.tsx +++ b/packages/website/ts/components/ui/fake_text_field.tsx @@ -21,7 +21,7 @@ interface FakeTextFieldProps { children?: any; } -export function FakeTextField(props: FakeTextFieldProps) { +export const FakeTextField = (props: FakeTextFieldProps) => { return ( <div className="relative"> {props.label !== '' && <InputLabel text={props.label} />} @@ -31,4 +31,4 @@ export function FakeTextField(props: FakeTextFieldProps) { <hr style={styles.hr} /> </div> ); -} +}; diff --git a/packages/website/ts/components/ui/flash_message.tsx b/packages/website/ts/components/ui/flash_message.tsx index 2cb1fc764..2b866676d 100644 --- a/packages/website/ts/components/ui/flash_message.tsx +++ b/packages/website/ts/components/ui/flash_message.tsx @@ -19,7 +19,7 @@ export class FlashMessage extends React.Component<FlashMessageProps, FlashMessag showDurationMs: SHOW_DURATION_MS, bodyStyle: {}, }; - public render() { + public render(): React.ReactNode { if (!_.isUndefined(this.props.flashMessage)) { return ( <Snackbar @@ -34,7 +34,7 @@ export class FlashMessage extends React.Component<FlashMessageProps, FlashMessag return null; } } - private _onClose() { + private _onClose(): void { this.props.dispatcher.hideFlashMessage(); } } diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx index bad6c2a78..83c86a144 100644 --- a/packages/website/ts/components/ui/identicon.tsx +++ b/packages/website/ts/components/ui/identicon.tsx @@ -15,7 +15,7 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> { public static defaultProps: Partial<IdenticonProps> = { style: {}, }; - public render() { + public render(): React.ReactNode { let address = this.props.address; if (_.isEmpty(address)) { address = constants.NULL_ADDRESS; diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index c85e11884..b06978f16 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -42,11 +42,11 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton buttonState: ButtonState.READY, }; } - public componentWillUnmount() { + public componentWillUnmount(): void { clearTimeout(this._buttonTimeoutId); this._didUnmount = true; } - public render() { + public render(): React.ReactNode { if (this.props.isHidden) { return <span />; } @@ -77,7 +77,7 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton /> ); } - public async onClickAsync() { + public async onClickAsync(): Promise<void> { this.setState({ buttonState: ButtonState.LOADING, }); diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/menu_item.tsx index 3482f436c..64c0dc49d 100644 --- a/packages/website/ts/components/ui/menu_item.tsx +++ b/packages/website/ts/components/ui/menu_item.tsx @@ -24,7 +24,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { isHovering: false, }; } - public render() { + public render(): React.ReactNode { const menuItemStyles = { cursor: 'pointer', opacity: this.state.isHovering ? 0.5 : 1, @@ -43,7 +43,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { </Link> ); } - private _onToggleHover(isHovering: boolean) { + private _onToggleHover(isHovering: boolean): void { this.setState({ isHovering, }); diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx index 3d94903d1..0d86a6db5 100644 --- a/packages/website/ts/components/ui/party.tsx +++ b/packages/website/ts/components/ui/party.tsx @@ -27,7 +27,7 @@ export class Party extends React.Component<PartyProps, PartyState> { identiconStyle: {}, identiconDiameter: IDENTICON_DIAMETER, }; - public render() { + public render(): React.ReactNode { const label = this.props.label; const address = this.props.address; const identiconDiameter = this.props.identiconDiameter; diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx index e465a8074..4a6000d1b 100644 --- a/packages/website/ts/components/ui/swap_icon.tsx +++ b/packages/website/ts/components/ui/swap_icon.tsx @@ -17,7 +17,7 @@ export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> { isHovering: false, }; } - public render() { + public render(): React.ReactNode { const swapStyles = { color: this.state.isHovering ? colors.amber600 : colors.amber800, fontSize: 50, @@ -34,7 +34,7 @@ export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> { </div> ); } - private _onToggleHover(isHovering: boolean) { + private _onToggleHover(isHovering: boolean): void { this.setState({ isHovering, }); diff --git a/packages/website/ts/components/ui/token_icon.tsx b/packages/website/ts/components/ui/token_icon.tsx index ff57a96de..a9ad567ef 100644 --- a/packages/website/ts/components/ui/token_icon.tsx +++ b/packages/website/ts/components/ui/token_icon.tsx @@ -11,7 +11,7 @@ interface TokenIconProps { interface TokenIconState {} export class TokenIcon extends React.Component<TokenIconProps, TokenIconState> { - public render() { + public render(): React.ReactNode { const token = this.props.token; const diameter = this.props.diameter; return ( diff --git a/packages/website/ts/components/visual_order.tsx b/packages/website/ts/components/visual_order.tsx index 3bf464e92..76a283547 100644 --- a/packages/website/ts/components/visual_order.tsx +++ b/packages/website/ts/components/visual_order.tsx @@ -20,7 +20,7 @@ interface VisualOrderProps { interface VisualOrderState {} export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderState> { - public render() { + public render(): React.ReactNode { const allTokens = _.values(this.props.tokenByAddress); const makerImage = this.props.makerToken.iconUrl; const takerImage = this.props.takerToken.iconUrl; @@ -62,7 +62,7 @@ export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderSt </div> ); } - private _renderAmount(assetToken: AssetToken, token: Token) { + private _renderAmount(assetToken: AssetToken, token: Token): React.ReactNode { const unitAmount = ZeroEx.toUnitAmount(assetToken.amount, token.decimals); return ( <div style={{ fontSize: 13 }}> diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 079c0e3b3..95f31582e 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -162,15 +162,15 @@ export class Wallet extends React.Component<WalletProps, WalletState> { isHoveringSidebar: false, }; } - public componentWillMount() { + public componentWillMount(): void { const trackedTokenAddresses = _.keys(this.state.trackedTokenStateByAddress); // tslint:disable-next-line:no-floating-promises this._fetchBalancesAndAllowancesAsync(trackedTokenAddresses); } - public componentWillUnmount() { + public componentWillUnmount(): void { this._isUnmounted = true; } - public componentWillReceiveProps(nextProps: WalletProps) { + public componentWillReceiveProps(nextProps: WalletProps): void { if ( nextProps.userAddress !== this.props.userAddress || nextProps.networkId !== this.props.networkId || @@ -196,11 +196,11 @@ export class Wallet extends React.Component<WalletProps, WalletState> { this._fetchBalancesAndAllowancesAsync(newTokenAddresses); } } - public render() { + public render(): React.ReactNode { const isReadyToRender = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; return <div style={styles.root}>{isReadyToRender && this._renderRows()}</div>; } - private _renderRows() { + private _renderRows(): React.ReactNode { const isAddressAvailable = !_.isEmpty(this.props.userAddress); return ( <List style={styles.list}> @@ -210,7 +210,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { </List> ); } - private _renderDisconnectedHeaderRows() { + private _renderDisconnectedHeaderRows(): React.ReactElement<{}> { const userAddress = this.props.userAddress; const primaryText = 'wallet'; return ( @@ -223,7 +223,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { /> ); } - private _renderDisconnectedRows() { + private _renderDisconnectedRows(): React.ReactElement<{}> { return ( <WalletDisconnectedItem key={DISCONNECTED_ITEM_KEY} @@ -233,7 +233,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { /> ); } - private _renderConnectedHeaderRows() { + private _renderConnectedHeaderRows(): React.ReactElement<{}> { const userAddress = this.props.userAddress; const primaryText = utils.getAddressBeginAndEnd(userAddress); return ( @@ -246,7 +246,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { /> ); } - private _renderBody() { + private _renderBody(): React.ReactElement<{}> { const bodyStyle: React.CSSProperties = { ...styles.bodyInnerDiv, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', @@ -263,17 +263,17 @@ export class Wallet extends React.Component<WalletProps, WalletState> { </ListItem> ); } - private _onSidebarHover(event: React.FormEvent<HTMLInputElement>) { + private _onSidebarHover(event: React.FormEvent<HTMLInputElement>): void { this.setState({ isHoveringSidebar: true, }); } - private _onSidebarHoverOff() { + private _onSidebarHoverOff(): void { this.setState({ isHoveringSidebar: false, }); } - private _renderFooterRows() { + private _renderFooterRows(): React.ReactElement<{}> { return ( <ListItem key={FOOTER_ITEM_KEY} @@ -302,7 +302,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { /> ); } - private _renderEthRows() { + private _renderEthRows(): React.ReactNode { const primaryText = this._renderAmount( this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH, @@ -352,7 +352,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { </div> ); } - private _renderTokenRows() { + private _renderTokenRows(): React.ReactNode { const trackedTokens = this.props.trackedTokens; const trackedTokensStartingWithEtherToken = trackedTokens.sort( firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL) @@ -361,7 +361,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { ); return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); } - private _renderTokenRow(token: Token, index: number) { + private _renderTokenRow(token: Token, index: number): React.ReactNode { const tokenState = this.state.trackedTokenStateByAddress[token.address]; const tokenLink = sharedUtils.getEtherScanLinkIfExists( token.address, @@ -415,7 +415,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { </div> ); } - private _renderAccessoryItems(config: AccessoryItemConfig) { + private _renderAccessoryItems(config: AccessoryItemConfig): React.ReactElement<{}> { const shouldShowWrappedEtherAction = !_.isUndefined(config.wrappedEtherDirection); const shouldShowToggle = !_.isUndefined(config.allowanceToggleConfig); return ( @@ -431,7 +431,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { </div> ); } - private _renderAllowanceToggle(config: AllowanceToggleConfig) { + private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode { return ( <AllowanceToggle networkId={this.props.networkId} @@ -446,13 +446,13 @@ export class Wallet extends React.Component<WalletProps, WalletState> { /> ); } - private _renderAmount(amount: BigNumber, decimals: number, symbol: string) { + private _renderAmount(amount: BigNumber, decimals: number, symbol: string): React.ReactNode { const unitAmount = ZeroEx.toUnitAmount(amount, decimals); const formattedAmount = unitAmount.toPrecision(TOKEN_AMOUNT_DISPLAY_PRECISION); const result = `${formattedAmount} ${symbol}`; return <div style={styles.amountLabel}>{result}</div>; } - private _renderValue(amount: BigNumber, decimals: number, price?: BigNumber) { + private _renderValue(amount: BigNumber, decimals: number, price?: BigNumber): React.ReactNode { if (_.isUndefined(price)) { return null; } @@ -462,7 +462,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const result = `$${formattedAmount}`; return result; } - private _renderTokenIcon(token: Token, tokenLink?: string) { + private _renderTokenIcon(token: Token, tokenLink?: string): React.ReactElement<{}> { const tooltipId = `tooltip-${token.address}`; const tokenIcon = <TokenIcon token={token} diameter={ICON_DIMENSION} />; if (_.isUndefined(tokenLink)) { @@ -475,7 +475,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { ); } } - private _renderWrappedEtherButton(wrappedEtherDirection: Side) { + private _renderWrappedEtherButton(wrappedEtherDirection: Side): React.ReactNode { const isWrappedEtherDirectionOpen = this.state.wrappedEtherDirection === wrappedEtherDirection; let buttonLabel; let buttonIcon; @@ -510,7 +510,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { /> ); } - private _getInitialTrackedTokenStateByAddress(tokenAddresses: string[]) { + private _getInitialTrackedTokenStateByAddress(tokenAddresses: string[]): TokenStateByAddress { const trackedTokenStateByAddress: TokenStateByAddress = {}; _.each(tokenAddresses, tokenAddress => { trackedTokenStateByAddress[tokenAddress] = { @@ -521,7 +521,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { }); return trackedTokenStateByAddress; } - private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]) { + private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]): Promise<void> { const balanceAndAllowanceTupleByAddress: ItemByAddress<BigNumber[]> = {}; const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; for (const tokenAddress of tokenAddresses) { @@ -554,7 +554,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { }); } } - private async _refetchTokenStateAsync(tokenAddress: string) { + private async _refetchTokenStateAsync(tokenAddress: string): Promise<void> { await this._fetchBalancesAndAllowancesAsync([tokenAddress]); } private async _getPriceByAddressAsync(tokenAddresses: string[]): Promise<ItemByAddress<BigNumber>> { @@ -584,17 +584,17 @@ export class Wallet extends React.Component<WalletProps, WalletState> { return {}; } } - private _openWrappedEtherActionRow(wrappedEtherDirection: Side) { + private _openWrappedEtherActionRow(wrappedEtherDirection: Side): void { this.setState({ wrappedEtherDirection, }); } - private _closeWrappedEtherActionRow() { + private _closeWrappedEtherActionRow(): void { this.setState({ wrappedEtherDirection: undefined, }); } - private _getEthToken() { + private _getEthToken(): Token { const tokens = _.values(this.props.tokenByAddress); const etherToken = _.find(tokens, { symbol: ETHER_TOKEN_SYMBOL }); return etherToken; diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index a38163770..2ed924bcd 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -64,7 +64,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther isEthConversionHappening: false, }; } - public render() { + public render(): React.ReactNode { const etherBalanceInEth = ZeroEx.toUnitAmount(this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH); const isWrappingEth = this.props.direction === Side.Deposit; const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1'; @@ -116,20 +116,20 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther /> ); } - private _onValueChange(isValid: boolean, amount?: BigNumber) { + private _onValueChange(isValid: boolean, amount?: BigNumber): void { this.setState({ currentInputAmount: amount, currentInputHasErrors: !isValid, }); } - private _renderIsEthConversionHappeningSpinner() { + private _renderIsEthConversionHappeningSpinner(): React.ReactElement<{}> { return this.state.isEthConversionHappening ? ( <div className="pl1" style={{ paddingTop: 10 }}> <i className="zmdi zmdi-spinner zmdi-hc-spin" /> </div> ) : null; } - private _renderWrapEtherConfirmationButton() { + private _renderWrapEtherConfirmationButton(): React.ReactElement<{}> { const isWrappingEth = this.props.direction === Side.Deposit; const labelText = isWrappingEth ? 'wrap' : 'unwrap'; return ( @@ -138,13 +138,13 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther backgroundColor={colors.wrapEtherConfirmationButton} label={labelText} labelStyle={styles.wrapEtherConfirmationButtonLabel} - onClick={this._wrapEtherConfirmationAction.bind(this)} + onClick={this._wrapEtherConfirmationActionAsync.bind(this)} disabled={this.state.isEthConversionHappening} /> </div> ); } - private async _wrapEtherConfirmationAction() { + private async _wrapEtherConfirmationActionAsync(): Promise<void> { this.setState({ isEthConversionHappening: true, }); |