From 943c378309a84ed142852c6584b53958df7817c8 Mon Sep 17 00:00:00 2001
From: Xianny <8582774+xianny@users.noreply.github.com>
Date: Fri, 11 Jan 2019 10:04:30 -0800
Subject: Implement tslint enum-naming to enforce PascalCase on enum members
 (#1474)

---
 .../ts/components/dialogs/ledger_config_dialog.tsx | 18 +++++-----
 packages/website/ts/components/fill_order.tsx      |  8 ++---
 .../ts/components/generate_order/asset_picker.tsx  | 42 +++++++++++-----------
 .../generate_order/generate_order_form.tsx         | 20 +++++------
 .../components/generate_order/new_token_form.tsx   |  2 +-
 .../components/inputs/allowance_state_toggle.tsx   |  2 +-
 packages/website/ts/components/portal/portal.tsx   |  4 +--
 packages/website/ts/components/token_balances.tsx  | 22 ++++++------
 packages/website/ts/components/ui/alert.tsx        |  2 +-
 .../ts/components/ui/lifecycle_raised_button.tsx   | 24 ++++++-------
 10 files changed, 72 insertions(+), 72 deletions(-)

(limited to 'packages/website/ts/components')

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,
             });
         }
     }
-- 
cgit