Add lifecycle messages

This commit is contained in:
fragosti
2018-07-19 06:57:00 -07:00
parent dead04dce8
commit 52a6e6357b
3 changed files with 56 additions and 17 deletions

View File

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

View File

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

View File

@@ -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,
);