Add lifecycle messages
This commit is contained in:
@@ -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,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@@ -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>
|
||||||
);
|
);
|
36
packages/website/ts/containers/inputs/eth_amount_input.ts
Normal file
36
packages/website/ts/containers/inputs/eth_amount_input.ts
Normal 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,
|
||||||
|
);
|
Reference in New Issue
Block a user