From dc3be992a3a1d5f352b65effa5c05f69f8e3272c Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 20 Mar 2018 20:55:11 -0700 Subject: Implement ETH/WETH conversion and allowance toggle styling --- .../dialogs/eth_weth_conversion_dialog.tsx | 2 + .../ts/components/inputs/allowance_toggle.tsx | 31 +- .../ts/components/inputs/balance_bounded_input.tsx | 18 +- .../ts/components/inputs/eth_amount_input.tsx | 14 +- .../ts/components/inputs/token_amount_input.tsx | 14 +- packages/website/ts/components/portal.tsx | 2 +- packages/website/ts/components/wallet.tsx | 373 ----------------- packages/website/ts/components/wallet/wallet.tsx | 443 +++++++++++++++++++++ .../ts/components/wallet/wrap_ether_item.tsx | 185 +++++++++ packages/website/ts/utils/mui_theme.ts | 10 +- packages/website/ts/utils/wallet_item_styles.ts | 7 + 11 files changed, 711 insertions(+), 388 deletions(-) delete mode 100644 packages/website/ts/components/wallet.tsx create mode 100644 packages/website/ts/components/wallet/wallet.tsx create mode 100644 packages/website/ts/components/wallet/wrap_ether_item.tsx create mode 100644 packages/website/ts/utils/wallet_item_styles.ts (limited to 'packages/website/ts') 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 d1bdb447f..f61b6495e 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -104,6 +104,8 @@ export class EthWethConversionDialog extends React.Component< onChange={this._onValueChange.bind(this)} amount={this.state.value} onVisitBalancesPageClick={this.props.onCancelled} + shouldShowErrs={true} + shouldShowUnderline={true} /> ) : ( { constructor(props: AllowanceToggleProps) { super(props); @@ -54,6 +79,10 @@ export class AllowanceToggle extends React.Component {this.state.isSpinnerVisible && ( diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index 253b01871..e9b8dd369 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -12,6 +12,7 @@ interface BalanceBoundedInputProps { label?: string; balance: BigNumber; amount?: BigNumber; + hintText?: string; onChange: ValidatedBigNumberCallback; shouldShowIncompleteErrs?: boolean; shouldCheckBalance: boolean; @@ -19,6 +20,8 @@ interface BalanceBoundedInputProps { onVisitBalancesPageClick?: () => void; shouldHideVisitBalancesLink?: boolean; isDisabled?: boolean; + shouldShowErrs?: boolean; + shouldShowUnderline?: boolean; } interface BalanceBoundedInputState { @@ -31,6 +34,9 @@ export class BalanceBoundedInput extends React.Componentamount} + hintText={{this.props.hintText}} onChange={this._onValueChange.bind(this)} underlineStyle={{ width: 'calc(100% + 50px)' }} + underlineShow={this.props.shouldShowUnderline} disabled={this.props.isDisabled} /> ); diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx index a66f92c8c..f3a879065 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -10,22 +10,31 @@ interface EthAmountInputProps { label?: string; balance: BigNumber; amount?: BigNumber; + hintText?: string; onChange: ValidatedBigNumberCallback; shouldShowIncompleteErrs: boolean; onVisitBalancesPageClick?: () => void; shouldCheckBalance: boolean; shouldHideVisitBalancesLink?: boolean; + shouldShowErrs?: boolean; + shouldShowUnderline?: boolean; + style?: React.CSSProperties; } interface EthAmountInputState {} export class EthAmountInput extends React.Component { + public static defaultProps: Partial = { + shouldShowErrs: true, + shouldShowUnderline: true, + style: { height: 63 }, + }; public render() { const amount = this.props.amount ? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) : undefined; return ( -
+
ETH
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index b55840fc4..591be7c0c 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -15,12 +15,16 @@ interface TokenAmountInputProps { token: Token; label?: string; amount?: BigNumber; + hintText?: string; shouldShowIncompleteErrs: boolean; shouldCheckBalance: boolean; shouldCheckAllowance: boolean; onChange: ValidatedBigNumberCallback; onVisitBalancesPageClick?: () => void; lastForceTokenStateRefetch: number; + shouldShowErrs?: boolean; + shouldShowUnderline?: boolean; + style?: React.CSSProperties; } interface TokenAmountInputState { @@ -30,6 +34,10 @@ interface TokenAmountInputState { } export class TokenAmountInput extends React.Component { + public static defaultProps: Partial = { + shouldShowErrs: true, + shouldShowUnderline: true, + }; private _isUnmounted: boolean; constructor(props: TokenAmountInputProps) { super(props); @@ -64,8 +72,9 @@ export class TokenAmountInput extends React.Component +
{this.props.token.symbol}
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx index 59eaca67e..55013e105 100644 --- a/packages/website/ts/components/portal.tsx +++ b/packages/website/ts/components/portal.tsx @@ -19,7 +19,7 @@ import { TokenBalances } from 'ts/components/token_balances'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { FlashMessage } from 'ts/components/ui/flash_message'; -import { Wallet } from 'ts/components/wallet'; +import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; import { localStorage } from 'ts/local_storage/local_storage'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/components/wallet.tsx b/packages/website/ts/components/wallet.tsx deleted file mode 100644 index 8c6ef9cad..000000000 --- a/packages/website/ts/components/wallet.tsx +++ /dev/null @@ -1,373 +0,0 @@ -import { ZeroEx } from '0x.js'; -import { - colors, - constants as sharedConstants, - EtherscanLinkSuffixes, - Styles, - utils as sharedUtils, -} from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import * as _ from 'lodash'; -import FlatButton from 'material-ui/FlatButton'; -import { List, ListItem } from 'material-ui/List'; -import NavigationArrowDownward from 'material-ui/svg-icons/navigation/arrow-downward'; -import NavigationArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward'; -import * as React from 'react'; -import ReactTooltip = require('react-tooltip'); -import firstBy = require('thenby'); - -import { Blockchain } from 'ts/blockchain'; -import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle'; -import { Identicon } from 'ts/components/ui/identicon'; -import { TokenIcon } from 'ts/components/ui/token_icon'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { BalanceErrs, BlockchainErrs, Token, TokenByAddress, TokenState, TokenStateByAddress } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; - -export interface WalletProps { - userAddress?: string; - networkId?: number; - blockchain: Blockchain; - blockchainIsLoaded: boolean; - blockchainErr: BlockchainErrs; - dispatcher: Dispatcher; - tokenByAddress: TokenByAddress; - trackedTokens: Token[]; - userEtherBalanceInWei: BigNumber; - lastForceTokenStateRefetch: number; -} - -interface WalletState { - trackedTokenStateByAddress: TokenStateByAddress; -} - -enum WrappedEtherAction { - Wrap, - Unwrap, -} - -interface AllowanceToggleConfig { - token: Token; - tokenState: TokenState; -} - -interface AccessoryItemConfig { - wrappedEtherAction?: WrappedEtherAction; - allowanceToggleConfig?: AllowanceToggleConfig; -} - -const styles: Styles = { - wallet: { - width: 346, - backgroundColor: colors.white, - borderBottomRightRadius: 10, - borderBottomLeftRadius: 10, - borderTopRightRadius: 10, - borderTopLeftRadius: 10, - boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, - overflow: 'hidden', - }, - list: { - padding: 0, - }, - tokenItemInnerDiv: { - paddingLeft: 60, - }, - headerItemInnerDiv: { - paddingLeft: 65, - }, - footerItemInnerDiv: { - paddingLeft: 24, - }, - borderedItem: { - borderBottomColor: colors.walletBorder, - borderBottomStyle: 'solid', - borderWidth: 1, - }, - tokenItem: { - backgroundColor: colors.walletDefaultItemBackground, - paddingTop: 8, - paddingBottom: 8, - }, - headerItem: { - paddingTop: 8, - paddingBottom: 8, - }, - wrappedEtherButtonLabel: { - fontSize: 12, - }, - amountLabel: { - fontWeight: 'bold', - color: colors.black, - }, -}; - -const ETHER_ICON_PATH = '/images/ether.png'; -const ETHER_TOKEN_SYMBOL = 'WETH'; -const ZRX_TOKEN_SYMBOL = 'ZRX'; -const ETHER_SYMBOL = 'ETH'; -const ICON_DIMENSION = 24; -const TOKEN_AMOUNT_DISPLAY_PRECISION = 3; - -export class Wallet extends React.Component { - private _isUnmounted: boolean; - constructor(props: WalletProps) { - super(props); - this._isUnmounted = false; - const initialTrackedTokenStateByAddress = this._getInitialTrackedTokenStateByAddress(props.trackedTokens); - this.state = { - trackedTokenStateByAddress: initialTrackedTokenStateByAddress, - }; - } - public componentWillMount() { - const trackedTokenAddresses = _.keys(this.state.trackedTokenStateByAddress); - // tslint:disable-next-line:no-floating-promises - this._fetchBalancesAndAllowancesAsync(trackedTokenAddresses); - } - public componentWillUnmount() { - this._isUnmounted = true; - } - public componentWillReceiveProps(nextProps: WalletProps) { - if ( - nextProps.userAddress !== this.props.userAddress || - nextProps.networkId !== this.props.networkId || - nextProps.lastForceTokenStateRefetch !== this.props.lastForceTokenStateRefetch - ) { - const trackedTokenAddresses = _.keys(this.state.trackedTokenStateByAddress); - // tslint:disable-next-line:no-floating-promises - this._fetchBalancesAndAllowancesAsync(trackedTokenAddresses); - } - if (!_.isEqual(nextProps.trackedTokens, this.props.trackedTokens)) { - const newTokens = _.difference(nextProps.trackedTokens, this.props.trackedTokens); - const newTokenAddresses = _.map(newTokens, token => token.address); - // Add placeholder entry for this token to the state, since fetching the - // balance/allowance is asynchronous - const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress; - _.each(newTokenAddresses, (tokenAddress: string) => { - trackedTokenStateByAddress[tokenAddress] = { - balance: new BigNumber(0), - allowance: new BigNumber(0), - isLoaded: false, - }; - }); - this.setState({ - trackedTokenStateByAddress, - }); - // Fetch the actual balance/allowance. - // tslint:disable-next-line:no-floating-promises - this._fetchBalancesAndAllowancesAsync(newTokenAddresses); - } - } - public render() { - const isReadyToRender = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; - return
{isReadyToRender && this._renderRows()}
; - } - private _renderRows() { - return ( - - {_.concat( - this._renderHeaderRows(), - this._renderEthRows(), - this._renderTokenRows(), - this._renderFooterRows(), - )} - - ); - } - private _renderHeaderRows() { - const userAddress = this.props.userAddress; - const primaryText = utils.getAddressBeginAndEnd(userAddress); - return ( - } - style={{ ...styles.headerItem, ...styles.borderedItem }} - innerDivStyle={styles.headerItemInnerDiv} - /> - ); - } - private _renderFooterRows() { - const primaryText = '+ other tokens'; - return ( - - ); - } - private _renderEthRows() { - const primaryText = this._renderAmount( - this.props.userEtherBalanceInWei, - constants.DECIMAL_PLACES_ETH, - ETHER_SYMBOL, - ); - const accessoryItemConfig = { - wrappedEtherAction: WrappedEtherAction.Wrap, - }; - return ( - } - rightAvatar={this._renderAccessoryItems(accessoryItemConfig)} - style={{ ...styles.tokenItem, ...styles.borderedItem }} - innerDivStyle={styles.tokenItemInnerDiv} - /> - ); - } - private _renderTokenRows() { - const trackedTokens = this.props.trackedTokens; - const trackedTokensStartingWithEtherToken = trackedTokens.sort( - firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL) - .thenBy((t: Token) => t.symbol !== ZRX_TOKEN_SYMBOL) - .thenBy('address'), - ); - return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); - } - private _renderTokenRow(token: Token) { - const tokenState = this.state.trackedTokenStateByAddress[token.address]; - const tokenLink = sharedUtils.getEtherScanLinkIfExists( - token.address, - this.props.networkId, - EtherscanLinkSuffixes.Address, - ); - const amount = this._renderAmount(tokenState.balance, token.decimals, token.symbol); - const wrappedEtherAction = token.symbol === ETHER_TOKEN_SYMBOL ? WrappedEtherAction.Unwrap : undefined; - const accessoryItemConfig: AccessoryItemConfig = { - wrappedEtherAction, - allowanceToggleConfig: { - token, - tokenState, - }, - }; - return ( - - ); - } - private _renderAccessoryItems(config: AccessoryItemConfig) { - const shouldShowWrappedEtherAction = !_.isUndefined(config.wrappedEtherAction); - const shouldShowToggle = !_.isUndefined(config.allowanceToggleConfig); - return ( -
-
-
- {shouldShowWrappedEtherAction && this._renderWrappedEtherButton(config.wrappedEtherAction)} -
-
- {shouldShowToggle && this._renderAllowanceToggle(config.allowanceToggleConfig)} -
-
-
- ); - } - private _renderAllowanceToggle(config: AllowanceToggleConfig) { - return ( - - ); - } - private _renderAmount(amount: BigNumber, decimals: number, symbol: string) { - const unitAmount = ZeroEx.toUnitAmount(amount, decimals); - const formattedAmount = unitAmount.toPrecision(TOKEN_AMOUNT_DISPLAY_PRECISION); - const result = `${formattedAmount} ${symbol}`; - return
{result}
; - } - private _renderTokenIcon(token: Token, tokenLink?: string) { - const tooltipId = `tooltip-${token.address}`; - const tokenIcon = ; - if (_.isUndefined(tokenLink)) { - return tokenIcon; - } else { - return ( - - {tokenIcon} - - ); - } - } - private _renderWrappedEtherButton(action: WrappedEtherAction) { - let buttonLabel; - let buttonIcon; - switch (action) { - case WrappedEtherAction.Wrap: - buttonLabel = 'wrap'; - buttonIcon = ; - break; - case WrappedEtherAction.Unwrap: - buttonLabel = 'unwrap'; - buttonIcon = ; - break; - default: - throw utils.spawnSwitchErr('wrappedEtherAction', action); - } - return ( - - ); - } - private _getInitialTrackedTokenStateByAddress(trackedTokens: Token[]) { - const trackedTokenStateByAddress: TokenStateByAddress = {}; - _.each(trackedTokens, token => { - trackedTokenStateByAddress[token.address] = { - balance: new BigNumber(0), - allowance: new BigNumber(0), - isLoaded: false, - }; - }); - return trackedTokenStateByAddress; - } - private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]) { - const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress; - const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; - for (const tokenAddress of tokenAddresses) { - const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( - userAddressIfExists, - tokenAddress, - ); - trackedTokenStateByAddress[tokenAddress] = { - balance, - allowance, - isLoaded: true, - }; - } - if (!this._isUnmounted) { - this.setState({ - trackedTokenStateByAddress, - }); - } - } - private async _refetchTokenStateAsync(tokenAddress: string) { - const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; - const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( - userAddressIfExists, - tokenAddress, - ); - this.setState({ - trackedTokenStateByAddress: { - ...this.state.trackedTokenStateByAddress, - [tokenAddress]: { - balance, - allowance, - isLoaded: true, - }, - }, - }); - } -} diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx new file mode 100644 index 000000000..670dc07dd --- /dev/null +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -0,0 +1,443 @@ +import { ZeroEx } from '0x.js'; +import { + colors, + constants as sharedConstants, + EtherscanLinkSuffixes, + Styles, + utils as sharedUtils, +} from '@0xproject/react-shared'; +import { BigNumber } from '@0xproject/utils'; +import * as _ from 'lodash'; +import FlatButton from 'material-ui/FlatButton'; +import { List, ListItem } from 'material-ui/List'; +import NavigationArrowDownward from 'material-ui/svg-icons/navigation/arrow-downward'; +import NavigationArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward'; +import Close from 'material-ui/svg-icons/navigation/close'; +import * as React from 'react'; +import ReactTooltip = require('react-tooltip'); +import firstBy = require('thenby'); + +import { Blockchain } from 'ts/blockchain'; +import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle'; +import { Identicon } from 'ts/components/ui/identicon'; +import { TokenIcon } from 'ts/components/ui/token_icon'; +import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { BalanceErrs, BlockchainErrs, Side, Token, TokenByAddress, TokenState, TokenStateByAddress } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; +import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; + +export interface WalletProps { + userAddress: string; + networkId: number; + blockchain: Blockchain; + blockchainIsLoaded: boolean; + blockchainErr: BlockchainErrs; + dispatcher: Dispatcher; + tokenByAddress: TokenByAddress; + trackedTokens: Token[]; + userEtherBalanceInWei: BigNumber; + lastForceTokenStateRefetch: number; +} + +interface WalletState { + trackedTokenStateByAddress: TokenStateByAddress; + wrappedEtherDirection?: Side; +} + +interface AllowanceToggleConfig { + token: Token; + tokenState: TokenState; +} + +interface AccessoryItemConfig { + wrappedEtherDirection?: Side; + allowanceToggleConfig?: AllowanceToggleConfig; +} + +const styles: Styles = { + wallet: { + width: 346, + backgroundColor: colors.white, + borderBottomRightRadius: 10, + borderBottomLeftRadius: 10, + borderTopRightRadius: 10, + borderTopLeftRadius: 10, + boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, + overflow: 'hidden', + }, + list: { + padding: 0, + }, + tokenItemInnerDiv: { + paddingLeft: 60, + }, + headerItemInnerDiv: { + paddingLeft: 65, + }, + footerItemInnerDiv: { + paddingLeft: 24, + }, + borderedItem: { + borderBottomColor: colors.walletBorder, + borderBottomStyle: 'solid', + borderWidth: 1, + }, + tokenItem: { + backgroundColor: colors.walletDefaultItemBackground, + }, + wrappedEtherOpenButtonLabel: { + fontSize: 10, + }, + amountLabel: { + fontWeight: 'bold', + color: colors.black, + }, + paddedItem: { + paddingTop: 8, + paddingBottom: 8, + }, + accessoryItemsContainer: { width: 150, right: 8 }, +}; + +const ETHER_ICON_PATH = '/images/ether.png'; +const ETHER_TOKEN_SYMBOL = 'WETH'; +const ZRX_TOKEN_SYMBOL = 'ZRX'; +const ETHER_SYMBOL = 'ETH'; +const ICON_DIMENSION = 24; +const TOKEN_AMOUNT_DISPLAY_PRECISION = 3; + +export class Wallet extends React.Component { + private _isUnmounted: boolean; + constructor(props: WalletProps) { + super(props); + this._isUnmounted = false; + const initialTrackedTokenStateByAddress = this._getInitialTrackedTokenStateByAddress(props.trackedTokens); + this.state = { + trackedTokenStateByAddress: initialTrackedTokenStateByAddress, + wrappedEtherDirection: undefined, + }; + } + public componentWillMount() { + const trackedTokenAddresses = _.keys(this.state.trackedTokenStateByAddress); + // tslint:disable-next-line:no-floating-promises + this._fetchBalancesAndAllowancesAsync(trackedTokenAddresses); + } + public componentWillUnmount() { + this._isUnmounted = true; + } + public componentWillReceiveProps(nextProps: WalletProps) { + if ( + nextProps.userAddress !== this.props.userAddress || + nextProps.networkId !== this.props.networkId || + nextProps.lastForceTokenStateRefetch !== this.props.lastForceTokenStateRefetch + ) { + const trackedTokenAddresses = _.keys(this.state.trackedTokenStateByAddress); + // tslint:disable-next-line:no-floating-promises + this._fetchBalancesAndAllowancesAsync(trackedTokenAddresses); + } + if (!_.isEqual(nextProps.trackedTokens, this.props.trackedTokens)) { + const newTokens = _.difference(nextProps.trackedTokens, this.props.trackedTokens); + const newTokenAddresses = _.map(newTokens, token => token.address); + // Add placeholder entry for this token to the state, since fetching the + // balance/allowance is asynchronous + const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress; + _.each(newTokenAddresses, (tokenAddress: string) => { + trackedTokenStateByAddress[tokenAddress] = { + balance: new BigNumber(0), + allowance: new BigNumber(0), + isLoaded: false, + }; + }); + this.setState({ + trackedTokenStateByAddress, + }); + // Fetch the actual balance/allowance. + // tslint:disable-next-line:no-floating-promises + this._fetchBalancesAndAllowancesAsync(newTokenAddresses); + } + } + public render() { + const isReadyToRender = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; + return
{isReadyToRender && this._renderRows()}
; + } + private _renderRows() { + return ( + + {_.concat( + this._renderHeaderRows(), + this._renderEthRows(), + this._renderTokenRows(), + this._renderFooterRows(), + )} + + ); + } + private _renderHeaderRows() { + const userAddress = this.props.userAddress; + const primaryText = utils.getAddressBeginAndEnd(userAddress); + return ( + } + style={{ ...styles.paddedItem, ...styles.borderedItem }} + innerDivStyle={styles.headerItemInnerDiv} + /> + ); + } + private _renderFooterRows() { + const primaryText = '+ other tokens'; + return ; + } + private _renderEthRows() { + const primaryText = this._renderAmount( + this.props.userEtherBalanceInWei, + constants.DECIMAL_PLACES_ETH, + ETHER_SYMBOL, + ); + const accessoryItemConfig = { + wrappedEtherDirection: Side.Deposit, + }; + const isInWrappedEtherState = + !_.isUndefined(this.state.wrappedEtherDirection) && + this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection; + const style = isInWrappedEtherState + ? { ...walletItemStyles.focusedItem, ...styles.paddedItem } + : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; + const etherToken = this._getEthToken(); + return ( +
+ } + rightAvatar={this._renderAccessoryItems(accessoryItemConfig)} + disableTouchRipple={true} + style={style} + innerDivStyle={styles.tokenItemInnerDiv} + /> + {isInWrappedEtherState && ( + + )} +
+ ); + } + private _renderTokenRows() { + const trackedTokens = this.props.trackedTokens; + const trackedTokensStartingWithEtherToken = trackedTokens.sort( + firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL) + .thenBy((t: Token) => t.symbol !== ZRX_TOKEN_SYMBOL) + .thenBy('address'), + ); + return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); + } + private _renderTokenRow(token: Token) { + const tokenState = this.state.trackedTokenStateByAddress[token.address]; + const tokenLink = sharedUtils.getEtherScanLinkIfExists( + token.address, + this.props.networkId, + EtherscanLinkSuffixes.Address, + ); + const amount = this._renderAmount(tokenState.balance, token.decimals, token.symbol); + const wrappedEtherDirection = token.symbol === ETHER_TOKEN_SYMBOL ? Side.Receive : undefined; + const accessoryItemConfig: AccessoryItemConfig = { + wrappedEtherDirection, + allowanceToggleConfig: { + token, + tokenState, + }, + }; + const shouldShowWrapEtherItem = + !_.isUndefined(this.state.wrappedEtherDirection) && + this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection; + const style = shouldShowWrapEtherItem + ? { ...walletItemStyles.focusedItem, ...styles.paddedItem } + : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; + const etherToken = this._getEthToken(); + return ( +
+ + {shouldShowWrapEtherItem && ( + + )} +
+ ); + } + private _renderAccessoryItems(config: AccessoryItemConfig) { + const shouldShowWrappedEtherAction = !_.isUndefined(config.wrappedEtherDirection); + const shouldShowToggle = !_.isUndefined(config.allowanceToggleConfig); + return ( +
+
+
+ {shouldShowWrappedEtherAction && this._renderWrappedEtherButton(config.wrappedEtherDirection)} +
+
+ {shouldShowToggle && this._renderAllowanceToggle(config.allowanceToggleConfig)} +
+
+
+ ); + } + private _renderAllowanceToggle(config: AllowanceToggleConfig) { + return ( + + ); + } + private _renderAmount(amount: BigNumber, decimals: number, symbol: string) { + const unitAmount = ZeroEx.toUnitAmount(amount, decimals); + const formattedAmount = unitAmount.toPrecision(TOKEN_AMOUNT_DISPLAY_PRECISION); + const result = `${formattedAmount} ${symbol}`; + return
{result}
; + } + private _renderTokenIcon(token: Token, tokenLink?: string) { + const tooltipId = `tooltip-${token.address}`; + const tokenIcon = ; + if (_.isUndefined(tokenLink)) { + return tokenIcon; + } else { + return ( + + {tokenIcon} + + ); + } + } + private _renderWrappedEtherButton(wrappedEtherDirection: Side) { + const isWrappedEtherDirectionOpen = this.state.wrappedEtherDirection === wrappedEtherDirection; + let buttonLabel; + let buttonIcon; + if (isWrappedEtherDirectionOpen) { + buttonLabel = 'cancel'; + buttonIcon = ; + } else { + switch (wrappedEtherDirection) { + case Side.Deposit: + buttonLabel = 'wrap'; + buttonIcon = ; + break; + case Side.Receive: + buttonLabel = 'unwrap'; + buttonIcon = ; + break; + default: + throw utils.spawnSwitchErr('wrappedEtherDirection', wrappedEtherDirection); + } + } + const onClick = isWrappedEtherDirectionOpen + ? this._closeWrappedEtherActionRow.bind(this) + : this._openWrappedEtherActionRow.bind(this, wrappedEtherDirection); + return ( + + ); + } + private _getInitialTrackedTokenStateByAddress(trackedTokens: Token[]) { + const trackedTokenStateByAddress: TokenStateByAddress = {}; + _.each(trackedTokens, token => { + trackedTokenStateByAddress[token.address] = { + balance: new BigNumber(0), + allowance: new BigNumber(0), + isLoaded: false, + }; + }); + return trackedTokenStateByAddress; + } + private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]) { + const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress; + const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; + for (const tokenAddress of tokenAddresses) { + const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( + userAddressIfExists, + tokenAddress, + ); + trackedTokenStateByAddress[tokenAddress] = { + balance, + allowance, + isLoaded: true, + }; + } + if (!this._isUnmounted) { + this.setState({ + trackedTokenStateByAddress, + }); + } + } + private async _refetchTokenStateAsync(tokenAddress: string) { + const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; + const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( + userAddressIfExists, + tokenAddress, + ); + this.setState({ + trackedTokenStateByAddress: { + ...this.state.trackedTokenStateByAddress, + [tokenAddress]: { + balance, + allowance, + isLoaded: true, + }, + }, + }); + } + private _openWrappedEtherActionRow(wrappedEtherDirection: Side) { + this.setState({ + wrappedEtherDirection, + }); + } + private _closeWrappedEtherActionRow() { + this.setState({ + wrappedEtherDirection: undefined, + }); + } + private _getEthToken() { + const tokens = _.values(this.props.tokenByAddress); + const etherToken = _.find(tokens, { symbol: ETHER_TOKEN_SYMBOL }); + return etherToken; + } +} diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx new file mode 100644 index 000000000..71ce6894f --- /dev/null +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -0,0 +1,185 @@ +import { ZeroEx } from '0x.js'; +import { colors, Styles } from '@0xproject/react-shared'; +import { BigNumber, logUtils } from '@0xproject/utils'; +import * as _ from 'lodash'; +import FlatButton from 'material-ui/FlatButton'; +import { ListItem } from 'material-ui/List'; +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 { Dispatcher } from 'ts/redux/dispatcher'; +import { BlockchainCallErrs, Side, Token } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { errorReporter } from 'ts/utils/error_reporter'; +import { utils } from 'ts/utils/utils'; +import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; + +export interface WrapEtherItemProps { + userAddress: string; + networkId: number; + blockchain: Blockchain; + dispatcher: Dispatcher; + userEtherBalanceInWei: BigNumber; + direction: Side; + etherToken: Token; + lastForceTokenStateRefetch: number; + onConversionSuccessful?: () => void; + refetchEthTokenStateAsync: () => Promise; +} + +interface WrapEtherItemState { + currentInputAmount?: BigNumber; + currentInputHasErrors: boolean; + isEthConversionHappening: boolean; +} + +const styles: Styles = { + topLabel: { color: colors.black, fontSize: 11 }, + inputContainer: { + backgroundColor: colors.white, + borderBottomRightRadius: 3, + borderBottomLeftRadius: 3, + borderTopRightRadius: 3, + borderTopLeftRadius: 3, + padding: 4, + width: 125, + }, + ethAmountInput: { height: 32 }, + innerDiv: { paddingLeft: 60, paddingTop: 0 }, + wrapEtherConfirmationButtonContainer: { width: 128, top: 16 }, + wrapEtherConfirmationButtonLabel: { + fontSize: 10, + color: colors.white, + }, +}; + +export class WrapEtherItem extends React.Component { + constructor(props: WrapEtherItemProps) { + super(props); + this.state = { + currentInputAmount: undefined, + currentInputHasErrors: false, + isEthConversionHappening: false, + }; + } + public render() { + const etherBalanceInEth = ZeroEx.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 ( + +
{topLabelText}
+
+ {isWrappingEth ? ( + + ) : ( + + )} +
+
+ } + secondaryTextLines={2} + disableTouchRipple={true} + style={walletItemStyles.focusedItem} + innerDivStyle={styles.innerDiv} + leftIcon={this.state.isEthConversionHappening && this._renderIsEthConversionHappeningSpinner()} + rightAvatar={this._renderWrapEtherConfirmationButton()} + /> + ); + } + private _onValueChange(isValid: boolean, amount?: BigNumber) { + this.setState({ + currentInputAmount: amount, + currentInputHasErrors: !isValid, + }); + } + private _renderIsEthConversionHappeningSpinner() { + return ( +
+ +
+ ); + } + private _renderWrapEtherConfirmationButton() { + const isWrappingEth = this.props.direction === Side.Deposit; + const labelText = isWrappingEth ? 'wrap' : 'unwrap'; + return ( +
+ +
+ ); + } + private async _wrapEtherConfirmationAction() { + this.setState({ + isEthConversionHappening: true, + }); + try { + const etherToken = this.props.etherToken; + const amountToConvert = this.state.currentInputAmount; + if (this.props.direction === Side.Deposit) { + await this.props.blockchain.convertEthToWrappedEthTokensAsync(etherToken.address, amountToConvert); + const ethAmount = ZeroEx.toUnitAmount(amountToConvert, constants.DECIMAL_PLACES_ETH); + this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`); + } else { + await this.props.blockchain.convertWrappedEthTokensToEthAsync(etherToken.address, amountToConvert); + const tokenAmount = ZeroEx.toUnitAmount(amountToConvert, etherToken.decimals); + this.props.dispatcher.showFlashMessage(`Successfully unwrapped ${tokenAmount.toString()} WETH to ETH`); + } + await this.props.refetchEthTokenStateAsync(); + this.props.onConversionSuccessful(); + } catch (err) { + const errMsg = `${err}`; + if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) { + this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); + } else if (!utils.didUserDenyWeb3Request(errMsg)) { + logUtils.log(`Unexpected error encountered: ${err}`); + logUtils.log(err.stack); + const errorMsg = + this.props.direction === Side.Deposit + ? 'Failed to wrap your ETH. Please try again.' + : 'Failed to unwrap your WETH. Please try again.'; + this.props.dispatcher.showFlashMessage(errorMsg); + await errorReporter.reportAsync(err); + } + } + this.setState({ + isEthConversionHappening: false, + }); + } +} diff --git a/packages/website/ts/utils/mui_theme.ts b/packages/website/ts/utils/mui_theme.ts index 41bc2844b..d611f0895 100644 --- a/packages/website/ts/utils/mui_theme.ts +++ b/packages/website/ts/utils/mui_theme.ts @@ -9,9 +9,9 @@ export const muiTheme = getMuiTheme({ }, palette: { accent1Color: colors.lightBlueA700, - pickerHeaderColor: colors.lightBlue, - primary1Color: colors.lightBlue, - primary2Color: colors.lightBlue, + pickerHeaderColor: colors.mediumBlue, + primary1Color: colors.mediumBlue, + primary2Color: colors.mediumBlue, textColor: colors.grey700, }, datePicker: { @@ -29,8 +29,4 @@ export const muiTheme = getMuiTheme({ selectColor: colors.darkestGrey, selectTextColor: colors.darkestGrey, }, - toggle: { - thumbOnColor: colors.limeGreen, - trackOnColor: colors.lightGreen, - }, }); diff --git a/packages/website/ts/utils/wallet_item_styles.ts b/packages/website/ts/utils/wallet_item_styles.ts new file mode 100644 index 000000000..1ad304ce1 --- /dev/null +++ b/packages/website/ts/utils/wallet_item_styles.ts @@ -0,0 +1,7 @@ +import { colors, Styles } from '@0xproject/react-shared'; + +export const styles: Styles = { + focusedItem: { + backgroundColor: colors.walletFocusedItemBackground, + }, +}; -- cgit v1.2.3