aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-06-13 07:54:37 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-06-13 07:54:37 +0800
commit421e5682329d6047703be926d20a906f6fe2529e (patch)
tree1ef48d4bda379b41676a9cd91f87766453fdabbe /packages/website
parent39692a8b3fd69e5b37e2de568ee74766840ad4b8 (diff)
downloaddexon-sol-tools-421e5682329d6047703be926d20a906f6fe2529e.tar
dexon-sol-tools-421e5682329d6047703be926d20a906f6fe2529e.tar.gz
dexon-sol-tools-421e5682329d6047703be926d20a906f6fe2529e.tar.bz2
dexon-sol-tools-421e5682329d6047703be926d20a906f6fe2529e.tar.lz
dexon-sol-tools-421e5682329d6047703be926d20a906f6fe2529e.tar.xz
dexon-sol-tools-421e5682329d6047703be926d20a906f6fe2529e.tar.zst
dexon-sol-tools-421e5682329d6047703be926d20a906f6fe2529e.zip
Implement allowance and final flow step
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/inputs/allowance_toggle.tsx1
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx50
-rw-r--r--packages/website/ts/components/token_balances.tsx2
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx2
-rw-r--r--packages/website/ts/containers/inputs/allowance_toggle.ts7
-rw-r--r--packages/website/ts/utils/utils.ts1
6 files changed, 42 insertions, 21 deletions
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<PortalOnboardingFlowPr
/>
);
}
-
private _getSteps(): Step[] {
const steps: Step[] = [
{
@@ -83,23 +82,30 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
},
{
target: '.weth-row',
- // content: <div> Unlock your tokens for trading. You only need to do this once for each token. {this._renderEthAllowanceToggle()}</div>,
- content: 'blah',
+ content: <div>
+ Unlock your tokens for trading. You only need to do this once for each token.
+ <div> ETH: {this._renderEthAllowanceToggle()}</div>
+ <div> ZRX: {this._renderZrxAllowanceToggle()}</div>
+ </div>,
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<PortalOnboardingFlowPr
const wethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
return wethTokenState.balance > 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<PortalOnboardingFlowPr
this.props.injectedProviderName,
);
if (isExternallyInjected) {
- this.props.updateOnboardingStep(1);
+ if (stepIndex !== 1) {
+ this.props.updateOnboardingStep(1);
+ }
return;
}
- this.props.updateOnboardingStep(0);
+ if (stepIndex !== 0) {
+ this.props.updateOnboardingStep(0);
+ }
}
private _autoStartOnboardingIfShould(): void {
if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
@@ -137,7 +157,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
}
}
private _renderZrxAllowanceToggle(): React.ReactNode {
- const zrxToken = utils.getZrxToken(this.props.tokenByAddress)
+ const zrxToken = utils.getZrxToken(this.props.tokenByAddress);
return this._renderAllowanceToggle(zrxToken);
}
private _renderEthAllowanceToggle(): React.ReactNode {
@@ -153,8 +173,10 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
<AllowanceToggle
token={token}
tokenState={tokenState}
+ isDisabled={!tokenState.isLoaded}
blockchain={this.props.blockchain}
- refetchTokenStateAsync={this.props.refetchTokenStateAsync}
+ // tslint:disable-next-line:jsx-no-lambda
+ refetchTokenStateAsync={async () => 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<void>;
+ refetchTokenStateAsync: () => Promise<void>;
}
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;