From 421e5682329d6047703be926d20a906f6fe2529e Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 12 Jun 2018 16:54:37 -0700 Subject: Implement allowance and final flow step --- .../ts/components/inputs/allowance_toggle.tsx | 1 + .../onboarding/portal_onboarding_flow.tsx | 50 ++++++++++++++++------ packages/website/ts/components/token_balances.tsx | 2 +- packages/website/ts/components/wallet/wallet.tsx | 2 +- .../ts/containers/inputs/allowance_toggle.ts | 7 ++- packages/website/ts/utils/utils.ts | 1 - 6 files changed, 42 insertions(+), 21 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 3e61e1b8b..0dd2a5aa5 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -1,5 +1,6 @@ import { constants as sharedConstants, Styles } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; +import * as _ from 'lodash'; import Toggle from 'material-ui/Toggle'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 78592c67f..0809f5e9c 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; import { Blockchain } from 'ts/blockchain'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; +import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; -import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; export interface PortalOnboardingFlowProps { blockchain: Blockchain; @@ -43,7 +43,6 @@ export class PortalOnboardingFlow extends React.Component ); } - private _getSteps(): Step[] { const steps: Step[] = [ { @@ -83,23 +82,30 @@ export class PortalOnboardingFlow extends React.Component Unlock your tokens for trading. You only need to do this once for each token. {this._renderEthAllowanceToggle()}, - content: 'blah', + content:
+ Unlock your tokens for trading. You only need to do this once for each token. +
ETH: {this._renderEthAllowanceToggle()}
+
ZRX: {this._renderZrxAllowanceToggle()}
+
, placement: 'right', - continueButtonDisplay: 'disabled', + continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled', + }, + { + target: '.wallet', + content: + 'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.', + placement: 'right', + continueButtonDisplay: 'enabled', }, ]; return steps; } - private _isAddressAvailable(): boolean { return !_.isEmpty(this.props.userAddress); } - private _userHasVisibleEth(): boolean { return this.props.userEtherBalanceInWei > new BigNumber(0); } - private _userHasVisibleWeth(): boolean { const ethToken = utils.getEthToken(this.props.tokenByAddress); if (!ethToken) { @@ -108,15 +114,25 @@ export class PortalOnboardingFlow extends React.Component new BigNumber(0); } - + private _userHasAllowancesForWethAndZrx(): boolean { + const ethToken = utils.getEthToken(this.props.tokenByAddress); + const zrxToken = utils.getZrxToken(this.props.tokenByAddress); + if (ethToken && zrxToken) { + const ethTokenAllowance = this.props.trackedTokenStateByAddress[ethToken.address].allowance; + const zrxTokenAllowance = this.props.trackedTokenStateByAddress[zrxToken.address].allowance; + return ethTokenAllowance > new BigNumber(0) && zrxTokenAllowance > new BigNumber(0); + } + return false; + } private _overrideOnboardingStateIfShould(): void { this._autoStartOnboardingIfShould(); this._adjustStepIfShould(); } private _adjustStepIfShould(): void { + const stepIndex = this.props.stepIndex; if (this._isAddressAvailable()) { - if (this.props.stepIndex < 2) { + if (stepIndex < 2) { this.props.updateOnboardingStep(2); } return; @@ -126,10 +142,14 @@ export class PortalOnboardingFlow extends React.Component this.props.refetchTokenStateAsync(token.address)} /> ); } diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 5edd8377a..7af80745c 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -20,11 +20,11 @@ import ReactTooltip = require('react-tooltip'); import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; import { AssetPicker } from 'ts/components/generate_order/asset_picker'; -import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { SendButton } from 'ts/components/send_button'; import { HelpTooltip } from 'ts/components/ui/help_tooltip'; import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button'; import { TokenIcon } from 'ts/components/ui/token_icon'; +import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage'; import { Dispatcher } from 'ts/redux/dispatcher'; import { diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 819f75ac4..4523b0ac9 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -13,7 +13,6 @@ import { Link } from 'react-router-dom'; import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; -import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; @@ -21,6 +20,7 @@ import { Island } from 'ts/components/ui/island'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; +import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { zIndex } from 'ts/style/z_index'; diff --git a/packages/website/ts/containers/inputs/allowance_toggle.ts b/packages/website/ts/containers/inputs/allowance_toggle.ts index 6f50072ca..545708f92 100644 --- a/packages/website/ts/containers/inputs/allowance_toggle.ts +++ b/packages/website/ts/containers/inputs/allowance_toggle.ts @@ -1,10 +1,9 @@ import * as React from 'react'; -import { BalanceErrs, Token, TokenState } from 'ts/types'; -import { ActionTypes, ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { Blockchain } from 'ts/blockchain'; import { State } from 'ts/redux/reducer'; +import { BalanceErrs, Token, TokenState } from 'ts/types'; import { AllowanceToggle as AllowanceToggleComponent } from 'ts/components/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -15,7 +14,7 @@ interface AllowanceToggleProps { token: Token; tokenState: TokenState; isDisabled?: boolean; - refetchTokenStateAsync: (tokenAddress: string) => Promise; + refetchTokenStateAsync: () => Promise; } interface ConnectedState { @@ -27,7 +26,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: AllowanceToggleProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: AllowanceToggleProps): ConnectedState => ({ networkId: state.networkId, userAddress: state.userAddress, }); diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index b2153321d..aaf7cf2a7 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -21,7 +21,6 @@ import { import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import * as u2f from 'ts/vendor/u2f_api'; -import { Container } from '../components/ui/container'; const LG_MIN_EM = 64; const MD_MIN_EM = 52; -- cgit