diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-07-24 13:43:26 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-07-24 13:43:26 +0800 |
commit | e49d136b99cea375052c7278c0bca0df6524d2d8 (patch) | |
tree | d9ef67f50cfa860fd5da76b686aca2a7578f1d27 /packages/website/ts/components | |
parent | 6ffa907f0ef3c94d3ea7d79d99a24939f62e0eb8 (diff) | |
parent | a05b14e4d9659be1cc495ee33fd8962ce773f87f (diff) | |
download | dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar.gz dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar.bz2 dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar.lz dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar.xz dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.tar.zst dexon-sol-tools-e49d136b99cea375052c7278c0bca0df6524d2d8.zip |
Merge branch 'v2-prototype' into feature/website/jobs-page-part2
* v2-prototype: (38 commits)
Revert "Publish"
Publish
Remove ERC721 callback functions
Use != instead of > in loops, add sanity checks to market fill functions
Add more tests and fixes
Remove MConstants and MixinConstants for LibConstants
Remove redundant external call by reimplementing fillOrderNoThrow
Remove orders length check
Add assertValidFillResults
Update web3Wrapper CHANGELOG
Get actual gasPrice from transaction instead of setting default
Store orders length in varible before looping over orders
Use transferFrom instead of safeTransferFrom
Fix minimal tests
Fix rounding error issues, use different logic when makerAsset is ZRX
Rename marketSellEth => marketSellWeth
Update percentage constants
Update transferEthFeeAndRefund, add check to ERC721 transfer
Refactor forwarding contract architecture, remove batch functions
Updated CHANGELOGS
...
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r-- | packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx | 6 | ||||
-rw-r--r-- | packages/website/ts/components/dialogs/send_dialog.tsx | 40 | ||||
-rw-r--r-- | packages/website/ts/components/flash_messages/asset_send_completed.tsx (renamed from packages/website/ts/components/flash_messages/token_send_completed.tsx) | 14 | ||||
-rw-r--r-- | packages/website/ts/components/inputs/eth_amount_input.tsx | 3 | ||||
-rw-r--r-- | packages/website/ts/components/send_button.tsx | 14 | ||||
-rw-r--r-- | packages/website/ts/components/token_balances.tsx | 23 | ||||
-rw-r--r-- | packages/website/ts/components/wallet/wrap_ether_item.tsx | 8 |
7 files changed, 63 insertions, 45 deletions
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 ( <div> <div className="pb2">{explanation}</div> @@ -106,7 +103,6 @@ export class EthWethConversionDialog extends React.Component< /> ) : ( <EthAmountInput - balance={etherBalanceInEth} amount={this.state.value} onChange={this._onValueChange.bind(this)} shouldCheckBalance={true} diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx index 8a98fdf69..c1179dbd0 100644 --- a/packages/website/ts/components/dialogs/send_dialog.tsx +++ b/packages/website/ts/components/dialogs/send_dialog.tsx @@ -6,6 +6,7 @@ import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { AddressInput } from 'ts/components/inputs/address_input'; import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; +import { EthAmountInput } from 'ts/containers/inputs/eth_amount_input'; import { Token } from 'ts/types'; interface SendDialogProps { @@ -15,7 +16,7 @@ interface SendDialogProps { onComplete: (recipient: string, value: BigNumber) => void; onCancelled: () => void; isOpen: boolean; - token: Token; + asset: Token | 'ETH'; lastForceTokenStateRefetch: number; } @@ -58,23 +59,23 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState ); } private _renderSendDialogBody(): React.ReactNode { - return ( - <div className="mx-auto" style={{ maxWidth: 300 }}> - <div style={{ height: 80 }}> - <AddressInput - initialAddress={this.state.recipient} - updateAddress={this._onRecipientChange.bind(this)} - isRequired={true} - label={'Recipient address'} - hintText={'Address'} - /> - </div> + const input = + this.props.asset === 'ETH' ? ( + <EthAmountInput + label="Amount to send" + shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} + shouldCheckBalance={true} + shouldShowErrs={true} + onChange={this._onValueChange.bind(this)} + amount={this.state.value} + /> + ) : ( <TokenAmountInput blockchain={this.props.blockchain} userAddress={this.props.userAddress} networkId={this.props.networkId} label="Amount to send" - token={this.props.token} + token={this.props.asset} shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} shouldCheckBalance={true} shouldCheckAllowance={false} @@ -82,6 +83,19 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState amount={this.state.value} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} /> + ); + return ( + <div className="mx-auto" style={{ maxWidth: 300 }}> + <div style={{ height: 80 }}> + <AddressInput + initialAddress={this.state.recipient} + updateAddress={this._onRecipientChange.bind(this)} + isRequired={true} + label="Recipient address'" + hintText="Address" + /> + </div> + {input} </div> ); } diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/asset_send_completed.tsx index f3f1ea2fc..f76e05fe1 100644 --- a/packages/website/ts/components/flash_messages/token_send_completed.tsx +++ b/packages/website/ts/components/flash_messages/asset_send_completed.tsx @@ -3,30 +3,30 @@ 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 { +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> ); 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<EthAmountInputProps, EthAmou public static defaultProps: Partial<EthAmountInputProps> = { 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 ( - <div className="flex overflow-hidden" style={this.props.style}> + <div className="flex" style={this.props.style}> <BalanceBoundedInput label={this.props.label} balance={this.props.balance} diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx index ac55d430b..107983dee 100644 --- a/packages/website/ts/components/send_button.tsx +++ b/packages/website/ts/components/send_button.tsx @@ -12,7 +12,7 @@ import { utils } from 'ts/utils/utils'; interface SendButtonProps { userAddress: string; networkId: number; - token: Token; + asset: Token | 'ETH'; dispatcher: Dispatcher; blockchain: Blockchain; onError: () => void; @@ -51,7 +51,7 @@ export class SendButton extends React.Component<SendButtonProps, SendButtonState isOpen={this.state.isSendDialogVisible} onComplete={this._onSendAmountSelectedAsync.bind(this)} onCancelled={this._toggleSendDialog.bind(this)} - token={this.props.token} + asset={this.props.asset} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} /> </div> @@ -67,10 +67,14 @@ export class SendButton extends React.Component<SendButtonProps, SendButtonState isSending: true, }); this._toggleSendDialog(); - const token = this.props.token; try { - await this.props.blockchain.transferAsync(token, recipient, value); - await this.props.refetchTokenStateAsync(token.address); + if (this.props.asset === 'ETH') { + await this.props.blockchain.sendAsync(recipient, value); + } else { + const token = this.props.asset; + await this.props.blockchain.transferAsync(token, recipient, value); + await this.props.refetchTokenStateAsync(token.address); + } } catch (err) { const errMsg = `${err}`; if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) { diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index c8d80702b..550438e76 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -204,11 +204,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala <TableHeaderColumn>Currency</TableHeaderColumn> <TableHeaderColumn>Balance</TableHeaderColumn> <TableRowColumn className="sm-hide xs-hide" style={stubColumnStyle} /> - {isTestNetwork && ( - <TableHeaderColumn style={{ paddingLeft: 3 }}> - {isSmallScreen ? 'Faucet' : 'Request from faucet'} - </TableHeaderColumn> - )} + {isTestNetwork && <TableHeaderColumn style={{ paddingLeft: 3 }}>Action</TableHeaderColumn>} + <TableHeaderColumn>Send</TableHeaderColumn> </TableRow> </TableHeader> <TableBody displayRowCheckbox={false}> @@ -235,6 +232,20 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala /> </TableRowColumn> )} + <TableRowColumn> + <SendButton + userAddress={this.props.userAddress} + networkId={this.props.networkId} + blockchain={this.props.blockchain} + dispatcher={this.props.dispatcher} + asset="ETH" + onError={this._onSendFailed.bind(this)} + lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + // This is not necessary for ETH. + // tslint:disable:jsx-no-lambda + refetchTokenStateAsync={() => undefined} + /> + </TableRowColumn> </TableRow> </TableBody> </Table> @@ -402,7 +413,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala networkId={this.props.networkId} blockchain={this.props.blockchain} dispatcher={this.props.dispatcher} - token={token} + asset={token} onError={this._onSendFailed.bind(this)} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this, token.address)} diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index fcab5d1dd..54ace7ae2 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -6,9 +6,9 @@ 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 { Container } from 'ts/components/ui/container'; +import { EthAmountInput } from 'ts/containers/inputs/eth_amount_input'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { BlockchainCallErrs, Side, Token } from 'ts/types'; @@ -87,13 +87,8 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther }; } public render(): React.ReactNode { - const etherBalanceInEth = Web3Wrapper.toUnitAmount( - this.props.userEtherBalanceInWei, - constants.DECIMAL_PLACES_ETH, - ); const isWrappingEth = this.props.direction === Side.Deposit; const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1'; - return ( <Container className="flex" backgroundColor={colors.walletFocusedItemBackground} paddingTop="25px"> <div>{this._renderIsEthConversionHappeningSpinner()} </div> @@ -103,7 +98,6 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther <div style={styles.inputContainer}> {isWrappingEth ? ( <EthAmountInput - balance={etherBalanceInEth} amount={this.state.currentInputAmount} hintText="0.00" onChange={this._onValueChange.bind(this)} |