Add lifecycle messages

packages/website/ts/blockchain.ts

@@ -35,7 +35,7 @@ import * as moment from 'moment';
 import * as React from 'react';
 import contract = require('truffle-contract');
 import { BlockchainWatcher } from 'ts/blockchain_watcher';
-import { TokenSendCompleted } from 'ts/components/flash_messages/token_send_completed';
+import { AssetSendCompleted } from 'ts/components/flash_messages/asset_send_completed';
 import { TransactionSubmitted } from 'ts/components/flash_messages/transaction_submitted';
 import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
 import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage';
@@ -293,14 +293,15 @@ export class Blockchain {
             EtherscanLinkSuffixes.Tx,
         );
         // TODO
-        // this._dispatcher.showFlashMessage(
-        //     React.createElement(TokenSendCompleted, {
-        //         etherScanLinkIfExists,
-        //         token,
-        //         toAddress,
-        //         amountInBaseUnits,
-        //     }),
-        // );
+        this._dispatcher.showFlashMessage(
+            React.createElement(AssetSendCompleted, {
+                etherScanLinkIfExists,
+                toAddress,
+                amountInBaseUnits,
+                decimals: constants.DECIMAL_PLACES_ETH,
+                symbol: constants.ETHER_SYMBOL,
+            }),
+        );
     }
     public async transferAsync(token: Token, toAddress: string, amountInBaseUnits: BigNumber): Promise<void> {
         utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
@@ -323,11 +324,12 @@ export class Blockchain {
             EtherscanLinkSuffixes.Tx,
         );
         this._dispatcher.showFlashMessage(
-            React.createElement(TokenSendCompleted, {
+            React.createElement(AssetSendCompleted, {
                 etherScanLinkIfExists,
-                token,
                 toAddress,
                 amountInBaseUnits,
+                decimals: token.decimals,
+                symbol: token.symbol,
             }),
         );
     }

packages/website/ts/components/flash_messages/asset_send_completed.tsx

@@ -6,27 +6,28 @@ import * as React from 'react';
 import { Token } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
-interface TokenSendCompletedProps {
+interface AssetSendCompletedProps {
     etherScanLinkIfExists?: string;
-    token: Token;
     toAddress: string;
     amountInBaseUnits: BigNumber;
+    decimals: number;
+    symbol: string;
 }
 
-interface TokenSendCompletedState {}
+interface AssetSendCompletedState {}
 
-export class TokenSendCompleted extends React.Component<TokenSendCompletedProps, TokenSendCompletedState> {
+export class AssetSendCompleted extends React.Component<AssetSendCompletedProps, AssetSendCompletedState> {
     public render(): React.ReactNode {
         const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) && (
             <a style={{ color: colors.white }} href={`${this.props.etherScanLinkIfExists}`} target="_blank">
                 Verify on Etherscan
             </a>
         );
-        const amountInUnits = Web3Wrapper.toUnitAmount(this.props.amountInBaseUnits, this.props.token.decimals);
+        const amountInUnits = Web3Wrapper.toUnitAmount(this.props.amountInBaseUnits, this.props.decimals);
         const truncatedAddress = utils.getAddressBeginAndEnd(this.props.toAddress);
         return (
             <div>
-                {`Sent ${amountInUnits} ${this.props.token.symbol} to ${truncatedAddress}: `}
+                {`Sent ${amountInUnits} ${this.props.symbol} to ${truncatedAddress}: `}
                 {etherScanLink}
             </div>
         );

packages/website/ts/containers/inputs/eth_amount_input.ts

@@ -0,0 +1,36 @@
+import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { State } from 'ts/redux/reducer';
+import { ValidatedBigNumberCallback } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+import { EthAmountInput as EthAmountInputComponent } from 'ts/components/inputs/eth_amount_input';
+
+interface EthAmountInputProps {
+    label?: string;
+    amount?: BigNumber;
+    hintText?: string;
+    onChange: ValidatedBigNumberCallback;
+    onErrorMsgChange?: (errorMsg: React.ReactNode) => void;
+    shouldShowIncompleteErrs: boolean;
+    shouldCheckBalance: boolean;
+    shouldShowErrs?: boolean;
+    shouldShowUnderline?: boolean;
+    style?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    inputHintStyle?: React.CSSProperties;
+}
+
+interface ConnectedState {
+    balance: BigNumber;
+}
+
+const mapStateToProps = (state: State, _ownProps: EthAmountInputProps): ConnectedState => ({
+    balance: Web3Wrapper.toUnitAmount(state.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH),
+});
+
+export const EthAmountInput: React.ComponentClass<EthAmountInputProps> = connect(mapStateToProps)(
+    EthAmountInputComponent,
+);