From 3898b8e8ab083689221e39de6b18fe31e6699d38 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 5 Jun 2018 21:36:05 -0700 Subject: Wrap AllowanceToggle in redux container --- .../ts/components/inputs/allowance_toggle.tsx | 8 +++-- .../onboarding/portal_onboarding_flow.tsx | 15 ++++++++ packages/website/ts/components/token_balances.tsx | 5 +-- packages/website/ts/components/wallet/wallet.tsx | 7 ++-- .../ts/containers/inputs/allowance_toggle.ts | 42 ++++++++++++++++++++++ 5 files changed, 66 insertions(+), 11 deletions(-) create mode 100644 packages/website/ts/containers/inputs/allowance_toggle.ts (limited to 'packages') diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index a8df4935a..ca4b89f77 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -18,11 +18,11 @@ interface AllowanceToggleProps { networkId: number; blockchain: Blockchain; dispatcher: Dispatcher; - onErrorOccurred: (errType: BalanceErrs) => void; token: Token; tokenState: TokenState; userAddress: string; - isDisabled: boolean; + isDisabled?: boolean; + onErrorOccurred?: (errType: BalanceErrs) => void; refetchTokenStateAsync: () => Promise; } @@ -57,6 +57,10 @@ const styles: Styles = { }; export class AllowanceToggle extends React.Component { + public static defaultProps = { + onErrorOccurred: _.noop, + isDisabled: false, + }; constructor(props: AllowanceToggleProps) { super(props); this.state = { diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index bf52684d7..65cb20733 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -5,6 +5,7 @@ import { BigNumber } from '@0xproject/utils'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; +import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; export interface PortalOnboardingFlowProps { stepIndex: number; @@ -77,6 +78,12 @@ export class PortalOnboardingFlow extends React.Component + ); + } } diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 2bc065b0f..f95bfb39d 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -22,7 +22,7 @@ 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/components/inputs/allowance_toggle'; +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'; @@ -362,13 +362,10 @@ export class TokenBalances extends React.Component diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 37233930e..f8ec05790 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -23,7 +23,7 @@ import ReactTooltip = require('react-tooltip'); import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; -import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle'; +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'; @@ -428,15 +428,12 @@ export class Wallet extends React.Component { ); } private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode { + // TODO: Error handling return ( this.props.refetchTokenStateAsync(config.token.address)} /> diff --git a/packages/website/ts/containers/inputs/allowance_toggle.ts b/packages/website/ts/containers/inputs/allowance_toggle.ts new file mode 100644 index 000000000..1dd7b2101 --- /dev/null +++ b/packages/website/ts/containers/inputs/allowance_toggle.ts @@ -0,0 +1,42 @@ +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 { AllowanceToggle as AllowanceToggleComponent } from 'ts/components/inputs/allowance_toggle'; +import { Dispatcher } from 'ts/redux/dispatcher'; + +interface AllowanceToggleProps { + blockchain: Blockchain; + onErrorOccurred?: (errType: BalanceErrs) => void; + token: Token; + tokenState: TokenState; + isDisabled: boolean; + refetchTokenStateAsync: () => Promise; +} + +interface ConnectedState { + networkId: number; + userAddress: string; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, ownProps: AllowanceToggleProps): ConnectedState => ({ + networkId: state.networkId, + userAddress: state.userAddress, +}); + +const mapDispatchTopProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const AllowanceToggle: React.ComponentClass = connect( + mapStateToProps, + mapDispatchTopProps, +)(AllowanceToggleComponent); -- cgit v1.2.3 From 612cc96e417c1397e1874be22208864f12acbda3 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 6 Jun 2018 11:47:11 -0700 Subject: Add utilities for getting tokens from tokensByAddress --- .../ts/components/onboarding/portal_onboarding_flow.tsx | 3 +++ packages/website/ts/components/portal/portal.tsx | 6 +++++- packages/website/ts/containers/portal_onboarding_flow.ts | 3 +++ packages/website/ts/utils/utils.ts | 11 +++++++++-- 4 files changed, 20 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 65cb20733..55d89d61e 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -2,12 +2,14 @@ import * as _ from 'lodash'; 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 { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; export interface PortalOnboardingFlowProps { + blockchain: Blockchain; stepIndex: number; isRunning: boolean; userAddress: string; @@ -20,6 +22,7 @@ export interface PortalOnboardingFlowProps { trackedTokenStateByAddress: TokenStateByAddress; updateIsRunning: (isRunning: boolean) => void; updateOnboardingStep: (stepIndex: number) => void; + refetchTokenStateAsync: (tokenAddress: string) => Promise; } export class PortalOnboardingFlow extends React.Component { diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 90d45208f..02a58cbf3 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -235,7 +235,11 @@ export class Portal extends React.Component { : TokenVisibility.TRACKED; return (
- + Promise; } interface ConnectedState { diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index b9d962b75..9c564ebc5 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -21,6 +21,7 @@ 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; @@ -322,8 +323,14 @@ export const utils = { return this.isDevelopment() || this.isStaging() || this.isDogfood(); }, getEthToken(tokenByAddress: TokenByAddress): Token { + return utils.getTokenBySymbol(constants.ETHER_TOKEN_SYMBOL, tokenByAddress); + }, + getZrxToken(tokenByAddress: TokenByAddress): Token { + return utils.getTokenBySymbol(constants.ZRX_TOKEN_SYMBOL, tokenByAddress); + }, + getTokenBySymbol(symbol: string, tokenByAddress: TokenByAddress): Token { const tokens = _.values(tokenByAddress); - const etherToken = _.find(tokens, { symbol: constants.ETHER_TOKEN_SYMBOL }); - return etherToken; + const token = _.find(tokens, { symbol }); + return token; }, }; -- cgit v1.2.3 From cbe5438a31a54a92a198b2cc5ad8a5d5feb033b4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 6 Jun 2018 18:06:03 -0700 Subject: Render TokenAllowance --- .../onboarding/portal_onboarding_flow.tsx | 21 ++++++++++++++++++--- .../ts/containers/inputs/allowance_toggle.ts | 4 ++-- 2 files changed, 20 insertions(+), 5 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 55d89d61e..78592c67f 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -4,7 +4,7 @@ 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 { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types'; +import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; @@ -83,7 +83,8 @@ 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', placement: 'right', continueButtonDisplay: 'disabled', }, @@ -135,9 +136,23 @@ export class PortalOnboardingFlow extends React.Component diff --git a/packages/website/ts/containers/inputs/allowance_toggle.ts b/packages/website/ts/containers/inputs/allowance_toggle.ts index 1dd7b2101..6f50072ca 100644 --- a/packages/website/ts/containers/inputs/allowance_toggle.ts +++ b/packages/website/ts/containers/inputs/allowance_toggle.ts @@ -14,8 +14,8 @@ interface AllowanceToggleProps { onErrorOccurred?: (errType: BalanceErrs) => void; token: Token; tokenState: TokenState; - isDisabled: boolean; - refetchTokenStateAsync: () => Promise; + isDisabled?: boolean; + refetchTokenStateAsync: (tokenAddress: string) => Promise; } interface ConnectedState { -- cgit v1.2.3 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') 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 v1.2.3 From 7d6700582006d201f8757107b4cf286bb0ee5661 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 14 Jun 2018 14:26:17 -0700 Subject: Run prettify --- .../ts/components/onboarding/portal_onboarding_flow.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 0809f5e9c..efb844cb5 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -82,18 +82,19 @@ export class PortalOnboardingFlow extends React.Component - Unlock your tokens for trading. You only need to do this once for each token. -
ETH: {this._renderEthAllowanceToggle()}
-
ZRX: {this._renderZrxAllowanceToggle()}
- , + 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: 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.', + content: 'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.', placement: 'right', continueButtonDisplay: 'enabled', }, -- cgit v1.2.3