From 52a6e6357b521e3e290103ba31ab91e9ede79d5c Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 19 Jul 2018 06:57:00 -0700 Subject: [PATCH] Add lifecycle messages --- packages/website/ts/blockchain.ts | 24 +++++++------ ...completed.tsx => asset_send_completed.tsx} | 13 +++---- .../ts/containers/inputs/eth_amount_input.ts | 36 +++++++++++++++++++ 3 files changed, 56 insertions(+), 17 deletions(-) rename packages/website/ts/components/flash_messages/{token_send_completed.tsx => asset_send_completed.tsx} (72%) create mode 100644 packages/website/ts/containers/inputs/eth_amount_input.ts diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 5d497dfb1a..133cd1f2c1 100644 --- a/packages/website/ts/blockchain.ts +++ b/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 { 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, }), ); } diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/asset_send_completed.tsx similarity index 72% rename from packages/website/ts/components/flash_messages/token_send_completed.tsx rename to packages/website/ts/components/flash_messages/asset_send_completed.tsx index f3f1ea2fc0..2c48f501b6 100644 --- a/packages/website/ts/components/flash_messages/token_send_completed.tsx +++ b/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 { +export class AssetSendCompleted extends React.Component { public render(): React.ReactNode { const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) && ( Verify on Etherscan ); - 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 (
- {`Sent ${amountInUnits} ${this.props.token.symbol} to ${truncatedAddress}: `} + {`Sent ${amountInUnits} ${this.props.symbol} to ${truncatedAddress}: `} {etherScanLink}
); diff --git a/packages/website/ts/containers/inputs/eth_amount_input.ts b/packages/website/ts/containers/inputs/eth_amount_input.ts new file mode 100644 index 0000000000..9ef903b555 --- /dev/null +++ b/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 = connect(mapStateToProps)( + EthAmountInputComponent, +);