diff options
Diffstat (limited to 'packages/website/ts/components')
20 files changed, 81 insertions, 63 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/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx index ce86df856..3ebab03ef 100644 --- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx +++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx @@ -14,9 +14,9 @@ export const U2fNotSupportedDialog = (props: U2fNotSupportedDialogProps) => { <Dialog title="U2F Not Supported" titleStyle={{ fontWeight: 100 }} - actions={[<FlatButton key="u2fNo" label="Ok" onTouchTap={props.onToggleDialog.bind(this)} />]} + actions={[<FlatButton key="u2fNo" label="Ok" onTouchTap={props.onToggleDialog} />]} open={props.isOpen} - onRequestClose={props.onToggleDialog.bind(this)} + onRequestClose={props.onToggleDialog} autoScrollBodyContent={true} > <div className="pt2" style={{ color: colors.grey700 }}> diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index d547a4e6a..b0091a1c1 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -37,7 +37,7 @@ export class EthWethConversionButton extends React.Component< > { public static defaultProps: Partial<EthWethConversionButtonProps> = { isDisabled: false, - onConversionSuccessful: _.noop, + onConversionSuccessful: _.noop.bind(_), }; public constructor(props: EthWethConversionButtonProps) { super(props); diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx index 83095b1d3..45c492221 100644 --- a/packages/website/ts/components/fill_warning_dialog.tsx +++ b/packages/website/ts/components/fill_warning_dialog.tsx @@ -18,16 +18,16 @@ export const FillWarningDialog = (props: FillWarningDialogProps) => { <FlatButton key="fillWarningCancel" label="Cancel" - onTouchTap={props.onToggleDialog.bind(this, didCancel)} + onTouchTap={() => props.onToggleDialog(didCancel)} // tslint:disable-line:jsx-no-lambda />, <FlatButton key="fillWarningContinue" label="Fill Order" - onTouchTap={props.onToggleDialog.bind(this, !didCancel)} + onTouchTap={() => props.onToggleDialog(!didCancel)} // tslint:disable-line:jsx-no-lambda />, ]} open={props.isOpen} - onRequestClose={props.onToggleDialog.bind(this)} + onRequestClose={() => props.onToggleDialog(didCancel)} // tslint:disable-line:jsx-no-lambda autoScrollBodyContent={true} modal={true} > 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/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index 5eada37b6..2dca3483f 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -46,7 +46,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt public static defaultProps: Partial<AssetPickerProps> = { tokenVisibility: TokenVisibility.ALL, }; - private _dialogConfigsByAssetView: { [assetView: string]: DialogConfigs }; + private readonly _dialogConfigsByAssetView: { [assetView: string]: DialogConfigs }; constructor(props: AssetPickerProps) { super(props); this.state = { diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 297617bef..05dce134a 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -57,7 +57,7 @@ const styles: Styles = { export class AllowanceToggle extends React.Component<AllowanceToggleProps, AllowanceToggleState> { public static defaultProps = { - onErrorOccurred: _.noop, + onErrorOccurred: _.noop.bind(_), isDisabled: false, }; constructor(props: AllowanceToggleProps) { diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index f23beb436..eb01e3ea6 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -35,7 +35,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp isDisabled: false, shouldShowErrs: true, hintText: 'amount', - onErrorMsgChange: _.noop, + onErrorMsgChange: _.noop.bind(_), shouldShowUnderline: true, }; constructor(props: BalanceBoundedInputProps) { @@ -125,7 +125,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount); return errMsg; } - private _setAmountState(amount: string, balance: BigNumber, callback: () => void = _.noop): void { + private _setAmountState(amount: string, balance: BigNumber, callback: () => void = _.noop.bind(_)): void { const errorMsg = this._validate(amount, balance); this.props.onErrorMsgChange(errorMsg); this.setState( 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/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx index 79dd2f568..5417ce715 100644 --- a/packages/website/ts/components/inputs/expiration_input.tsx +++ b/packages/website/ts/components/inputs/expiration_input.tsx @@ -17,7 +17,7 @@ interface ExpirationInputState { } export class ExpirationInput extends React.Component<ExpirationInputProps, ExpirationInputState> { - private _earliestPickableMoment: moment.Moment; + private readonly _earliestPickableMoment: moment.Moment; constructor(props: ExpirationInputProps) { super(props); // Set the earliest pickable date to today at 00:00, so users can only pick the current or later dates diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx index c2606bd56..cf06f10c8 100644 --- a/packages/website/ts/components/order_json.tsx +++ b/packages/website/ts/components/order_json.tsx @@ -127,7 +127,7 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> { href: this.state.shareLink, method: 'share', }, - _.noop, + _.noop.bind(_), ); } private _shareViaEmailAsync(): void { diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index ea821d038..1790a9678 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -110,8 +110,8 @@ const SIDE_PADDING = 20; export class Portal extends React.Component<PortalProps, PortalState> { private _blockchain: Blockchain; - private _sharedOrderIfExists: Order; - private _throttledScreenWidthUpdate: () => void; + private readonly _sharedOrderIfExists: Order; + private readonly _throttledScreenWidthUpdate: () => void; constructor(props: PortalProps) { super(props); this._sharedOrderIfExists = orderParser.parse(window.location.search); 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/ui/menu_item.tsx b/packages/website/ts/components/ui/menu_item.tsx index 64c0dc49d..0cb4b387c 100644 --- a/packages/website/ts/components/ui/menu_item.tsx +++ b/packages/website/ts/components/ui/menu_item.tsx @@ -15,7 +15,7 @@ interface MenuItemState { export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { public static defaultProps: Partial<MenuItemProps> = { - onClick: _.noop, + onClick: _.noop.bind(_), className: '', }; public constructor(props: MenuItemProps) { diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx index da26317de..fc7507475 100644 --- a/packages/website/ts/components/ui/overlay.tsx +++ b/packages/website/ts/components/ui/overlay.tsx @@ -26,7 +26,7 @@ export const Overlay: React.StatelessComponent<OverlayProps> = props => ( Overlay.defaultProps = { style: {}, - onClick: _.noop, + onClick: _.noop.bind(_), }; Overlay.displayName = 'Overlay'; diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index dcbc6946b..8a9349c6d 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -41,7 +41,7 @@ export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ <Text fontSize="14px" fontColor={colors.darkGrey} - onClick={onClick || _.noop} + onClick={onClick || _.noop.bind(_)} hoverColor={colors.mediumBlue} > {displayText} diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index e462ab3e0..40a8a23ea 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -204,7 +204,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { <AccountConnection accountState={accountState} injectedProviderName={this.props.injectedProviderName} /> </div> ); - const onClick = _.noop; + const onClick = _.noop.bind(_); const accessory = ( <DropDown activeNode={ 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)} |