From dead04dce8b26a09cb0b451711517bcb4dea182c Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 19 Jul 2018 04:11:44 -0700 Subject: WIP for sending ether from portal (works) --- packages/website/ts/blockchain.ts | 26 ++++++++++++++ .../dialogs/eth_weth_conversion_dialog.tsx | 6 +--- .../website/ts/components/dialogs/send_dialog.tsx | 40 +++++++++++++++------- .../ts/components/inputs/eth_amount_input.tsx | 3 +- packages/website/ts/components/send_button.tsx | 14 +++++--- packages/website/ts/components/token_balances.tsx | 23 +++++++++---- .../ts/components/wallet/wrap_ether_item.tsx | 8 +---- 7 files changed, 82 insertions(+), 38 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 88461f8a9..5d497dfb1 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -276,6 +276,32 @@ export class Blockchain { ); await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash); } + public async sendAsync(toAddress: string, amountInBaseUnits: BigNumber): Promise { + utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); + const transaction = { + from: this._userAddressIfExists, + to: toAddress, + value: amountInBaseUnits, + gasPrice: this._defaultGasPrice, + }; + this._showFlashMessageIfLedger(); + const txHash = await this._web3Wrapper.sendTransactionAsync(transaction); + await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash); + const etherScanLinkIfExists = sharedUtils.getEtherScanLinkIfExists( + txHash, + this.networkId, + EtherscanLinkSuffixes.Tx, + ); + // TODO + // this._dispatcher.showFlashMessage( + // React.createElement(TokenSendCompleted, { + // etherScanLinkIfExists, + // token, + // toAddress, + // amountInBaseUnits, + // }), + // ); + } public async transferAsync(token: Token, toAddress: string, amountInBaseUnits: BigNumber): Promise { utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx index 7b09cc92c..5f4bf8519 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -1,15 +1,13 @@ import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; -import { EthAmountInput } from 'ts/components/inputs/eth_amount_input'; import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; +import { EthAmountInput } from 'ts/containers/inputs/eth_amount_input'; import { Side, Token } from 'ts/types'; -import { constants } from 'ts/utils/constants'; interface EthWethConversionDialogProps { blockchain: Blockchain; @@ -78,7 +76,6 @@ export class EthWethConversionDialog extends React.Component< ? 'Convert your Ether into a tokenized, tradable form.' : "Convert your Wrapped Ether back into it's native form."; const isWrappedVersion = this.props.direction === Side.Receive; - const etherBalanceInEth = Web3Wrapper.toUnitAmount(this.props.etherBalanceInWei, constants.DECIMAL_PLACES_ETH); return (
{explanation}
@@ -106,7 +103,6 @@ export class EthWethConversionDialog extends React.Component< /> ) : ( void; onCancelled: () => void; isOpen: boolean; - token: Token; + asset: Token | 'ETH'; lastForceTokenStateRefetch: number; } @@ -58,23 +59,23 @@ export class SendDialog extends React.Component -
- -
+ const input = + this.props.asset === 'ETH' ? ( + + ) : ( + ); + return ( +
+
+ +
+ {input}
); } diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx index 552d4277a..3a7905442 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -28,14 +28,13 @@ export class EthAmountInput extends React.Component = { shouldShowErrs: true, shouldShowUnderline: true, - style: { height: 63 }, }; public render(): React.ReactNode { const amount = this.props.amount ? Web3Wrapper.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) : undefined; return ( -
+
void; @@ -51,7 +51,7 @@ export class SendButton extends React.Component
@@ -67,10 +67,14 @@ export class SendButton extends React.ComponentCurrency Balance - {isTestNetwork && ( - - {isSmallScreen ? 'Faucet' : 'Request from faucet'} - - )} + {isTestNetwork && Action} + Send @@ -235,6 +232,20 @@ export class TokenBalances extends React.Component )} + + undefined} + /> + @@ -402,7 +413,7 @@ export class TokenBalances extends React.Component
{this._renderIsEthConversionHappeningSpinner()}
@@ -103,7 +98,6 @@ export class WrapEtherItem extends React.Component {isWrappingEth ? ( Date: Thu, 19 Jul 2018 06:57:00 -0700 Subject: Add lifecycle messages --- packages/website/ts/blockchain.ts | 24 ++++++++------- .../flash_messages/asset_send_completed.tsx | 35 +++++++++++++++++++++ .../flash_messages/token_send_completed.tsx | 34 -------------------- .../ts/containers/inputs/eth_amount_input.ts | 36 ++++++++++++++++++++++ 4 files changed, 84 insertions(+), 45 deletions(-) create mode 100644 packages/website/ts/components/flash_messages/asset_send_completed.tsx delete mode 100644 packages/website/ts/components/flash_messages/token_send_completed.tsx create mode 100644 packages/website/ts/containers/inputs/eth_amount_input.ts (limited to 'packages/website/ts') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 5d497dfb1..133cd1f2c 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/asset_send_completed.tsx b/packages/website/ts/components/flash_messages/asset_send_completed.tsx new file mode 100644 index 000000000..2c48f501b --- /dev/null +++ b/packages/website/ts/components/flash_messages/asset_send_completed.tsx @@ -0,0 +1,35 @@ +import { colors } from '@0xproject/react-shared'; +import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Token } from 'ts/types'; +import { utils } from 'ts/utils/utils'; + +interface AssetSendCompletedProps { + etherScanLinkIfExists?: string; + toAddress: string; + amountInBaseUnits: BigNumber; + decimals: number; + symbol: string; +} + +interface AssetSendCompletedState {} + +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.decimals); + const truncatedAddress = utils.getAddressBeginAndEnd(this.props.toAddress); + return ( +
+ {`Sent ${amountInUnits} ${this.props.symbol} to ${truncatedAddress}: `} + {etherScanLink} +
+ ); + } +} diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/token_send_completed.tsx deleted file mode 100644 index f3f1ea2fc..000000000 --- a/packages/website/ts/components/flash_messages/token_send_completed.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { Token } from 'ts/types'; -import { utils } from 'ts/utils/utils'; - -interface TokenSendCompletedProps { - etherScanLinkIfExists?: string; - token: Token; - toAddress: string; - amountInBaseUnits: BigNumber; -} - -interface TokenSendCompletedState {} - -export class TokenSendCompleted 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 truncatedAddress = utils.getAddressBeginAndEnd(this.props.toAddress); - return ( -
- {`Sent ${amountInUnits} ${this.props.token.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 000000000..9ef903b55 --- /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, +); -- cgit From c08b4aa6a100431ee19941fc38c161e5ace40f2b Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 19 Jul 2018 06:59:35 -0700 Subject: Remove unused Token import --- packages/website/ts/components/flash_messages/asset_send_completed.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/components/flash_messages/asset_send_completed.tsx b/packages/website/ts/components/flash_messages/asset_send_completed.tsx index 2c48f501b..f76e05fe1 100644 --- a/packages/website/ts/components/flash_messages/asset_send_completed.tsx +++ b/packages/website/ts/components/flash_messages/asset_send_completed.tsx @@ -3,7 +3,6 @@ import { BigNumber } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; -import { Token } from 'ts/types'; import { utils } from 'ts/utils/utils'; interface AssetSendCompletedProps { -- cgit From ff12aafc0fa30cfbd1c59f9a2fc3491395e2cdab Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 19 Jul 2018 07:04:48 -0700 Subject: Remove TODO --- packages/website/ts/blockchain.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 133cd1f2c..45994be5f 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -292,7 +292,6 @@ export class Blockchain { this.networkId, EtherscanLinkSuffixes.Tx, ); - // TODO this._dispatcher.showFlashMessage( React.createElement(AssetSendCompleted, { etherScanLinkIfExists, -- cgit