diff options
4 files changed, 22 insertions, 7 deletions
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 3880e018a..7e40192f6 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -1,6 +1,7 @@ import { constants as sharedConstants } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; +import { RouteComponentProps, withRouter } from 'react-router'; import { BigNumber } from '@0xproject/utils'; import { Blockchain } from 'ts/blockchain'; @@ -17,7 +18,7 @@ import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/typ import { analytics } from 'ts/utils/analytics'; import { utils } from 'ts/utils/utils'; -export interface PortalOnboardingFlowProps { +export interface PortalOnboardingFlowProps extends RouteComponentProps<any> { networkId: number; blockchain: Blockchain; stepIndex: number; @@ -35,9 +36,15 @@ export interface PortalOnboardingFlowProps { refetchTokenStateAsync: (tokenAddress: string) => Promise<void>; } -export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> { +class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> { + private _unlisten: () => void; public componentDidMount(): void { this._overrideOnboardingStateIfShould(); + // If there is a route change, just close onboarding. + this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false)); + } + public componentWillUnmount(): void { + this._unlisten(); } public componentDidUpdate(): void { this._overrideOnboardingStateIfShould(); @@ -224,3 +231,5 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr ); } } + +export const PortalOnboardingFlow = withRouter(PlainPortalOnboardingFlow); diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index debebb47c..2b2273a09 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -33,6 +33,7 @@ import { localStorage } from 'ts/local_storage/local_storage'; import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage'; import { FullscreenMessage } from 'ts/pages/fullscreen_message'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { zIndex } from 'ts/style/z_index'; import { BlockchainErrs, HashData, @@ -74,6 +75,7 @@ export interface PortalProps { flashMessage?: string | React.ReactNode; lastForceTokenStateRefetch: number; translate: Translate; + isPortalOnboardingShowing: boolean; portalOnboardingStep: number; } @@ -337,6 +339,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { return ( <div> <Wallet + style={this.props.isPortalOnboardingShowing ? { zIndex: zIndex.aboveOverlay } : undefined} userAddress={this.props.userAddress} networkId={this.props.networkId} blockchain={this._blockchain} diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 8c8d74e58..ac2fe0d31 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -29,7 +29,6 @@ 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'; import { BlockchainErrs, ProviderType, @@ -66,6 +65,7 @@ export interface WalletProps { onAddToken: () => void; onRemoveToken: () => void; refetchTokenStateAsync: (tokenAddress: string) => Promise<void>; + style: React.CSSProperties; } interface WalletState { @@ -86,7 +86,6 @@ interface AccessoryItemConfig { const styles: Styles = { root: { width: '100%', - zIndex: zIndex.aboveOverlay, position: 'relative', }, footerItemInnerDiv: { @@ -141,6 +140,9 @@ const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`; export class Wallet extends React.Component<WalletProps, WalletState> { + public static defaultProps = { + style: {}, + }; constructor(props: WalletProps) { super(props); this.state = { @@ -148,11 +150,10 @@ export class Wallet extends React.Component<WalletProps, WalletState> { isHoveringSidebar: false, }; } - public render(): React.ReactNode { const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; return ( - <Island className="flex flex-column wallet" style={styles.root}> + <Island className="flex flex-column wallet" style={{ ...styles.root, ...this.props.style }}> {isBlockchainLoaded ? this._renderLoadedRows() : this._renderLoadingRows()} </Island> ); @@ -276,7 +277,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { <ListItem primaryText={ <div className="flex right" style={styles.manageYourWalletText}> - {'manage your wallet'} + manage your wallet </div> // https://github.com/palantir/tslint-react/issues/140 // tslint:disable-next-line:jsx-curly-spacing diff --git a/packages/website/ts/containers/portal.ts b/packages/website/ts/containers/portal.ts index 4f33ca1b1..6747cdf4e 100644 --- a/packages/website/ts/containers/portal.ts +++ b/packages/website/ts/containers/portal.ts @@ -28,6 +28,7 @@ interface ConnectedState { userSuppliedOrderCache: Order; flashMessage?: string | React.ReactNode; translate: Translate; + isPortalOnboardingShowing: boolean; portalOnboardingStep: number; } @@ -77,6 +78,7 @@ const mapStateToProps = (state: State, _ownProps: PortalComponentProps): Connect userSuppliedOrderCache: state.userSuppliedOrderCache, flashMessage: state.flashMessage, translate: state.translate, + isPortalOnboardingShowing: state.isPortalOnboardingShowing, portalOnboardingStep: state.portalOnboardingStep, }; }; |