diff options
Diffstat (limited to 'packages/website/ts/components')
10 files changed, 72 insertions, 72 deletions
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index e15a2dd94..527353aa0 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -20,8 +20,8 @@ import { utils } from 'ts/utils/utils'; const VALID_ETHEREUM_DERIVATION_PATH_PREFIX = `44'/60'`; enum LedgerSteps { - CONNECT, - SELECT_ADDRESS, + Connect, + SelectAddress, } interface LedgerConfigDialogProps { @@ -52,7 +52,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, const derivationPathIfExists = props.blockchain.getLedgerDerivationPathIfExists(); this.state = { connectionErrMsg: '', - stepIndex: LedgerSteps.CONNECT, + stepIndex: LedgerSteps.Connect, userAddresses: [], addressBalances: [], derivationPath: _.isUndefined(derivationPathIfExists) @@ -67,7 +67,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, <FlatButton key="ledgerConnectCancel" label="Cancel" onClick={this._onClose.bind(this)} />, ]; const dialogTitle = - this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address'; + this.state.stepIndex === LedgerSteps.Connect ? 'Connect to your Ledger' : 'Select desired address'; return ( <Dialog title={dialogTitle} @@ -79,8 +79,8 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, bodyStyle={{ paddingBottom: 0 }} > <div style={{ color: colors.grey700, paddingTop: 1 }}> - {this.state.stepIndex === LedgerSteps.CONNECT && this._renderConnectStep()} - {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && this._renderSelectAddressStep()} + {this.state.stepIndex === LedgerSteps.Connect && this._renderConnectStep()} + {this.state.stepIndex === LedgerSteps.SelectAddress && this._renderSelectAddressStep()} </div> </Dialog> ); @@ -195,7 +195,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, private _onClose(): void { this.setState({ connectionErrMsg: '', - stepIndex: LedgerSteps.CONNECT, + stepIndex: LedgerSteps.Connect, }); const isOpen = false; this.props.toggleDialogFn(isOpen); @@ -210,7 +210,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, this.props.blockchain.fetchTokenInformationAsync(); this.props.dispatcher.updateUserWeiBalance(selectAddressBalance); this.setState({ - stepIndex: LedgerSteps.CONNECT, + stepIndex: LedgerSteps.Connect, }); const isOpen = false; this.props.toggleDialogFn(isOpen); @@ -284,7 +284,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, const didSucceed = await this._fetchAddressesAndBalancesAsync(); if (didSucceed) { this.setState({ - stepIndex: LedgerSteps.SELECT_ADDRESS, + stepIndex: LedgerSteps.SelectAddress, connectionErrMsg: '', }); } diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 2fa2b94a0..7fee8c4df 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -182,7 +182,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { </div> )} {!_.isEmpty(this.state.orderJSONErrMsg) && ( - <Alert type={AlertTypes.ERROR} message={this.state.orderJSONErrMsg} /> + <Alert type={AlertTypes.Error} message={this.state.orderJSONErrMsg} /> )} </div> ); @@ -298,7 +298,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { onClick={this._onCancelOrderClickFireAndForgetAsync.bind(this)} /> {this.state.didCancelOrderSucceed && ( - <Alert type={AlertTypes.SUCCESS} message={this._renderCancelSuccessMsg()} /> + <Alert type={AlertTypes.Success} message={this._renderCancelSuccessMsg()} /> )} </div> ) : ( @@ -310,10 +310,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { onClick={this._onFillOrderClick.bind(this)} /> {!_.isEmpty(this.state.globalErrMsg) && ( - <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} /> + <Alert type={AlertTypes.Error} message={this.state.globalErrMsg} /> )} {this.state.didFillOrderSucceed && ( - <Alert type={AlertTypes.SUCCESS} message={this._renderFillSuccessMsg()} /> + <Alert type={AlertTypes.Success} message={this._renderFillSuccessMsg()} /> )} </div> )} diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index e6ecd2ec8..d3f11f962 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -18,9 +18,9 @@ import { utils } from 'ts/utils/utils'; const TOKEN_ICON_DIMENSION = 100; const TILE_DIMENSION = 146; enum AssetViews { - ASSET_PICKER = 'ASSET_PICKER', - NEW_TOKEN_FORM = 'NEW_TOKEN_FORM', - CONFIRM_TRACK_TOKEN = 'CONFIRM_TRACK_TOKEN', + AssetPicker = 'ASSET_PICKER', + NewTokenForm = 'NEW_TOKEN_FORM', + ConfirmTrackToken = 'CONFIRM_TRACK_TOKEN', } interface AssetPickerProps { @@ -44,29 +44,29 @@ interface AssetPickerState { export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerState> { public static defaultProps: Partial<AssetPickerProps> = { - tokenVisibility: TokenVisibility.ALL, + tokenVisibility: TokenVisibility.All, }; private readonly _dialogConfigsByAssetView: { [assetView: string]: DialogConfigs }; constructor(props: AssetPickerProps) { super(props); this.state = { - assetView: AssetViews.ASSET_PICKER, + assetView: AssetViews.AssetPicker, hoveredAddress: undefined, chosenTrackTokenAddress: undefined, isAddingTokenToTracked: false, }; this._dialogConfigsByAssetView = { - [AssetViews.ASSET_PICKER]: { + [AssetViews.AssetPicker]: { title: 'Select token', isModal: false, actions: [], }, - [AssetViews.NEW_TOKEN_FORM]: { + [AssetViews.NewTokenForm]: { title: 'Add an ERC20 token', isModal: false, actions: [], }, - [AssetViews.CONFIRM_TRACK_TOKEN]: { + [AssetViews.ConfirmTrackToken]: { title: 'Tracking confirmation', isModal: true, actions: [ @@ -95,15 +95,15 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt autoScrollBodyContent={true} onRequestClose={this._onCloseDialog.bind(this)} > - {this.state.assetView === AssetViews.ASSET_PICKER && this._renderAssetPicker()} - {this.state.assetView === AssetViews.NEW_TOKEN_FORM && ( + {this.state.assetView === AssetViews.AssetPicker && this._renderAssetPicker()} + {this.state.assetView === AssetViews.NewTokenForm && ( <NewTokenForm blockchain={this.props.blockchain} onNewTokenSubmitted={this._onNewTokenSubmitted.bind(this)} tokenByAddress={this.props.tokenByAddress} /> )} - {this.state.assetView === AssetViews.CONFIRM_TRACK_TOKEN && this._renderConfirmTrackToken()} + {this.state.assetView === AssetViews.ConfirmTrackToken && this._renderConfirmTrackToken()} </Dialog> ); } @@ -138,19 +138,19 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt const allTokens = _.values(this.props.tokenByAddress); // filter tokens based on visibility specified in props, do not show ZRX or ETHER as tracked or untracked const filteredTokens = - this.props.tokenVisibility === TokenVisibility.ALL + this.props.tokenVisibility === TokenVisibility.All ? allTokens : _.filter(allTokens, token => { return ( token.symbol !== constants.ZRX_TOKEN_SYMBOL && token.symbol !== constants.ETHER_TOKEN_SYMBOL && - ((this.props.tokenVisibility === TokenVisibility.TRACKED && utils.isTokenTracked(token)) || - (this.props.tokenVisibility === TokenVisibility.UNTRACKED && + ((this.props.tokenVisibility === TokenVisibility.Tracked && utils.isTokenTracked(token)) || + (this.props.tokenVisibility === TokenVisibility.Untracked && !utils.isTokenTracked(token))) ); }); // if we are showing tracked tokens, sort by date added, otherwise sort by symbol - const sortKey = this.props.tokenVisibility === TokenVisibility.TRACKED ? 'trackedTimestamp' : 'symbol'; + const sortKey = this.props.tokenVisibility === TokenVisibility.Tracked ? 'trackedTimestamp' : 'symbol'; const sortedTokens = filteredTokens.sort(firstBy(sortKey)); if (_.isEmpty(sortedTokens)) { return <div className="mx-auto p4 h2">No tokens to remove.</div>; @@ -188,7 +188,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt cursor: 'pointer', opacity: isHovered ? 0.6 : 1, }; - if (this.props.tokenVisibility !== TokenVisibility.TRACKED) { + if (this.props.tokenVisibility !== TokenVisibility.Tracked) { gridTiles.push( <div key={otherTokenKey} @@ -222,7 +222,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt } private _onCloseDialog(): void { this.setState({ - assetView: AssetViews.ASSET_PICKER, + assetView: AssetViews.AssetPicker, }); this.props.onTokenChosen(this.props.currentTokenAddress); } @@ -232,21 +232,21 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt this.props.onTokenChosen(tokenAddress); } else { this.setState({ - assetView: AssetViews.CONFIRM_TRACK_TOKEN, + assetView: AssetViews.ConfirmTrackToken, chosenTrackTokenAddress: tokenAddress, }); } } private _onCustomAssetChosen(): void { this.setState({ - assetView: AssetViews.NEW_TOKEN_FORM, + assetView: AssetViews.NewTokenForm, }); } private _onNewTokenSubmitted(newToken: Token): void { trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newToken); this.props.dispatcher.addTokenToTokenByAddress(newToken); this.setState({ - assetView: AssetViews.ASSET_PICKER, + assetView: AssetViews.AssetPicker, }); this.props.onTokenChosen(newToken.address); } @@ -254,7 +254,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt const resetState: AssetPickerState = { ...this.state, isAddingTokenToTracked: false, - assetView: AssetViews.ASSET_PICKER, + assetView: AssetViews.AssetPicker, chosenTrackTokenAddress: undefined, }; if (!didUserAcceptTracking) { 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 8afbee977..0f70aa18f 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -36,9 +36,9 @@ import { errorReporter } from 'ts/utils/error_reporter'; import { utils } from 'ts/utils/utils'; enum SigningState { - UNSIGNED, - SIGNING, - SIGNED, + Unsigned, + Signing, + Signed, } interface GenerateOrderFormProps { @@ -76,7 +76,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G this.state = { globalErrMsg: '', shouldShowIncompleteErrs: false, - signingState: SigningState.UNSIGNED, + signingState: SigningState.Unsigned, }; } public componentDidMount(): void { @@ -207,7 +207,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G /> </div> {this.state.globalErrMsg !== '' && ( - <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} /> + <Alert type={AlertTypes.Error} message={this.state.globalErrMsg} /> )} </div> </div> @@ -215,7 +215,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G title="Order JSON" titleStyle={{ fontWeight: 100 }} modal={false} - open={this.state.signingState === SigningState.SIGNED} + open={this.state.signingState === SigningState.Signed} onRequestClose={this._onCloseOrderJSONDialog.bind(this)} > <OrderJSON @@ -247,7 +247,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G // orderHash will not collide with the previously generated orderHash. this.props.dispatcher.updateOrderSalt(generatePseudoRandomSalt()); this.setState({ - signingState: SigningState.UNSIGNED, + signingState: SigningState.Unsigned, }); } private async _onSignClickedAsync(): Promise<boolean> { @@ -305,13 +305,13 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G } private async _signTransactionAsync(): Promise<PortalOrder | undefined> { this.setState({ - signingState: SigningState.SIGNING, + signingState: SigningState.Signing, }); const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists(); if (_.isUndefined(exchangeAddress)) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); this.setState({ - signingState: SigningState.UNSIGNED, + signingState: SigningState.Unsigned, }); return undefined; } @@ -371,7 +371,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G } } this.setState({ - signingState: globalErrMsg === '' ? SigningState.SIGNED : SigningState.UNSIGNED, + signingState: globalErrMsg === '' ? SigningState.Signed : SigningState.Unsigned, globalErrMsg, }); return order; 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 b8cd88b18..ce684d177 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -93,7 +93,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor onClickAsyncFn={this._onAddNewTokenClickAsync.bind(this)} /> </div> - {this.state.globalErrMsg !== '' && <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />} + {this.state.globalErrMsg !== '' && <Alert type={AlertTypes.Error} message={this.state.globalErrMsg} />} </div> ); } diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 5396295d2..3a78d32f3 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -150,7 +150,7 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr } logUtils.log(`Unexpected error encountered: ${err}`); logUtils.log(err.stack); - this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed); + this.props.onErrorOccurred(BalanceErrs.AllowanceSettingFailed); errorReporter.report(err); } } diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 6d7c90573..59cf2db71 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -229,8 +229,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { const isAssetPickerDialogOpen = this.state.tokenManagementState !== TokenManagementState.None; const tokenVisibility = this.state.tokenManagementState === TokenManagementState.Add - ? TokenVisibility.UNTRACKED - : TokenVisibility.TRACKED; + ? TokenVisibility.Untracked + : TokenVisibility.Tracked; return ( <Container> <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} /> diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 2ed0229c8..e8f2a6461 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -303,7 +303,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala currentTokenAddress={''} onTokenChosen={this._onAssetTokenPicked.bind(this)} tokenByAddress={this.props.tokenByAddress} - tokenVisibility={this.state.isAddingToken ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED} + tokenVisibility={this.state.isAddingToken ? TokenVisibility.Untracked : TokenVisibility.Tracked} /> </div> ); @@ -439,7 +439,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala } private _onSendFailed(): void { this.setState({ - errorType: BalanceErrs.sendFailed, + errorType: BalanceErrs.SendFailed, }); } private _renderAmount(amount: BigNumber, decimals: number): React.ReactNode { @@ -460,7 +460,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala } private _renderErrorDialogBody(): React.ReactNode { switch (this.state.errorType) { - case BalanceErrs.incorrectNetworkForFaucet: + case BalanceErrs.IncorrectNetworkForFaucet: return ( <div> Our faucet can only send test Ether to addresses on testnets. Please make sure you are connected @@ -468,7 +468,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala </div> ); - case BalanceErrs.faucetRequestFailed: + case BalanceErrs.FaucetRequestFailed: return ( <div> An unexpected error occurred while trying to request test Ether from our faucet. Please refresh @@ -476,13 +476,13 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala </div> ); - case BalanceErrs.faucetQueueIsFull: + case BalanceErrs.FaucetQueueIsFull: return <div>Our test Ether faucet queue is full. Please try requesting test Ether again later.</div>; - case BalanceErrs.mintingFailed: + case BalanceErrs.MintingFailed: return <div>Minting your test tokens failed unexpectedly. Please refresh the page and try again.</div>; - case BalanceErrs.allowanceSettingFailed: + case BalanceErrs.AllowanceSettingFailed: return ( <div> An unexpected error occurred while trying to set your test token allowance. Please refresh the @@ -521,7 +521,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala logUtils.log(`Unexpected error encountered: ${err}`); logUtils.log(err.stack); this.setState({ - errorType: BalanceErrs.mintingFailed, + errorType: BalanceErrs.MintingFailed, }); errorReporter.report(err); return false; @@ -537,7 +537,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala // from, we must show user an error message if (!utils.isTestNetwork(this.props.blockchain.networkId)) { this.setState({ - errorType: BalanceErrs.incorrectNetworkForFaucet, + errorType: BalanceErrs.IncorrectNetworkForFaucet, }); return false; } @@ -553,8 +553,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala logUtils.log(`Unexpected status code: ${response.status} -> ${responseBody}`); const errorType = response.status === constants.UNAVAILABLE_STATUS - ? BalanceErrs.faucetQueueIsFull - : BalanceErrs.faucetRequestFailed; + ? BalanceErrs.FaucetQueueIsFull + : BalanceErrs.FaucetRequestFailed; this.setState({ errorType, }); diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx index 32e0f1be8..c7a5b9030 100644 --- a/packages/website/ts/components/ui/alert.tsx +++ b/packages/website/ts/components/ui/alert.tsx @@ -8,7 +8,7 @@ interface AlertProps { } export const Alert = (props: AlertProps) => { - const isAlert = props.type === AlertTypes.ERROR; + const isAlert = props.type === AlertTypes.Error; const errMsgStyles = { background: isAlert ? colors.red200 : colors.lightestGreen, color: colors.white, diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index a8daf4102..f004dd47f 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -6,9 +6,9 @@ import * as React from 'react'; const COMPLETE_STATE_SHOW_LENGTH_MS = 2000; enum ButtonState { - READY, - LOADING, - COMPLETE, + Ready, + Loading, + Complete, } interface LifeCycleRaisedButtonProps { @@ -38,7 +38,7 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton constructor(props: LifeCycleRaisedButtonProps) { super(props); this.state = { - buttonState: ButtonState.READY, + buttonState: ButtonState.Ready, }; } public componentWillUnmount(): void { @@ -52,13 +52,13 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton let label; switch (this.state.buttonState) { - case ButtonState.READY: + case ButtonState.Ready: label = this.props.labelReady; break; - case ButtonState.LOADING: + case ButtonState.Loading: label = this.props.labelLoading; break; - case ButtonState.COMPLETE: + case ButtonState.Complete: label = this.props.labelComplete; break; default: @@ -72,13 +72,13 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton backgroundColor={this.props.backgroundColor} labelColor={this.props.labelColor} onClick={this.onClickAsync.bind(this)} - disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY} + disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.Ready} /> ); } public async onClickAsync(): Promise<void> { this.setState({ - buttonState: ButtonState.LOADING, + buttonState: ButtonState.Loading, }); const didSucceed = await this.props.onClickAsyncFn(); if (this._didUnmount) { @@ -86,16 +86,16 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton } if (didSucceed) { this.setState({ - buttonState: ButtonState.COMPLETE, + buttonState: ButtonState.Complete, }); this._buttonTimeoutId = window.setTimeout(() => { this.setState({ - buttonState: ButtonState.READY, + buttonState: ButtonState.Ready, }); }, COMPLETE_STATE_SHOW_LENGTH_MS); } else { this.setState({ - buttonState: ButtonState.READY, + buttonState: ButtonState.Ready, }); } } |