From 8c5dc7cecdb8766e68a1d70d007904eb62ac1c55 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 2 Jul 2018 15:52:59 -0700 Subject: Only auto-start onboarding if blockchain is loaded --- .../website/ts/components/onboarding/portal_onboarding_flow.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 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 6bfa5c75f..6d8007659 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -46,7 +46,7 @@ class PlainPortalOnboardingFlow extends React.Component this.props.updateIsRunning(false)); } @@ -61,6 +61,9 @@ class PlainPortalOnboardingFlow extends React.Component Date: Mon, 2 Jul 2018 15:58:53 -0700 Subject: Remove max-width from onboarding card to support iPad --- packages/website/ts/components/onboarding/onboarding_card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx index 48e8ab022..ba5b3d6ea 100644 --- a/packages/website/ts/components/onboarding/onboarding_card.tsx +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -39,7 +39,7 @@ export const OnboardingCard: React.StatelessComponent = ({ borderRadius, }) => ( - +
{title} -- cgit v1.2.3 From a5231df6d9d8c9b89431df2e4674f46d307f6d80 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 2 Jul 2018 17:26:48 -0700 Subject: Add media query abstraction around ScreenWidths and stop relayer grid hover effect on mobile --- packages/website/public/index.html | 12 +++++++++++- .../components/onboarding/unlock_wallet_onboarding_step.tsx | 2 +- .../ts/components/relayer_index/relayer_grid_tile.tsx | 4 ++++ packages/website/ts/types.ts | 7 ++++--- packages/website/ts/utils/utils.ts | 7 ++----- 5 files changed, 22 insertions(+), 10 deletions(-) (limited to 'packages') diff --git a/packages/website/public/index.html b/packages/website/public/index.html index 4c0985c71..c7a40875f 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -70,7 +70,17 @@ })(document, 'script', 'twitter-wjs'); - + + diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx index 0039aa545..4ed7137d4 100644 --- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx @@ -10,7 +10,7 @@ export const UnlockWalletOnboardingStep: React.StatelessComponent - Unlock your metamask extension to get started. + Unlock your MetaMask extension to get started.
); diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index b26bf512b..20594e5ca 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -9,6 +9,7 @@ import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; +import { media } from 'ts/style/media'; import { styled } from 'ts/style/theme'; import { WebsiteBackendRelayerInfo } from 'ts/types'; import { utils } from 'ts/utils/utils'; @@ -111,6 +112,9 @@ const GridTile = styled(PlainGridTile)` &:hover { transform: translate(0px, -3px); } + ${media.small` + transform: none; + `}; `; interface SectionProps { diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 498a0a5b8..e8fdbc255 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -215,10 +215,11 @@ export interface ContractEvent { } export type ValidatedBigNumberCallback = (isValid: boolean, amount?: BigNumber) => void; +// Associated values are in `em` units export enum ScreenWidths { - Sm = 'SM', - Md = 'MD', - Lg = 'LG', + Sm = 40, + Md = 52, + Lg = 64, } export enum AlertTypes { diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 726e1815f..73dacc1d6 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -27,9 +27,6 @@ import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import * as u2f from 'ts/vendor/u2f_api'; -const LG_MIN_EM = 64; -const MD_MIN_EM = 52; - const isDogfood = (): boolean => _.includes(window.location.href, configs.DOMAIN_DOGFOOD); export const utils = { @@ -134,9 +131,9 @@ export const utils = { // This logic mirrors the CSS media queries in BassCSS for the `lg-`, `md-` and `sm-` CSS // class prefixes. Do not edit these. - if (widthInEm > LG_MIN_EM) { + if (widthInEm > ScreenWidths.Lg) { return ScreenWidths.Lg; - } else if (widthInEm > MD_MIN_EM) { + } else if (widthInEm > ScreenWidths.Md) { return ScreenWidths.Md; } else { return ScreenWidths.Sm; -- cgit v1.2.3 From a31f7a5112e9a74a64dd4079a08c0c749e3ffaeb Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 2 Jul 2018 18:12:08 -0700 Subject: Implement fixed position onboarding option --- .../ts/components/onboarding/onboarding_flow.tsx | 55 ++++++++++++++++------ .../onboarding/portal_onboarding_flow.tsx | 45 ++++++++++-------- 2 files changed, 67 insertions(+), 33 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 1f4c6df82..9abbc1c82 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -1,18 +1,35 @@ +import * as _ from 'lodash'; import * as React from 'react'; import { Placement, Popper, PopperChildrenProps } from 'react-popper'; import { OnboardingCard } from 'ts/components/onboarding/onboarding_card'; +import { PointerDirection } from 'ts/components/ui/pointer'; import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; import { Animation } from 'ts/components/ui/animation'; import { Container } from 'ts/components/ui/container'; import { Overlay } from 'ts/components/ui/overlay'; import { zIndex } from 'ts/style/z_index'; -export interface Step { +export interface FixedPositionSettings { + type: 'fixed'; + top?: string; + bottom?: string; + left?: string; + right?: string; + pointerDirection?: PointerDirection; +} + +export interface TargetPositionSettings { + type: 'target'; target: string; + placement: Placement; +} + +export interface Step { + // Provide either a CSS selector, or fixed position settings. Only applies to desktop. + position: TargetPositionSettings | FixedPositionSettings; title?: string; content: React.ReactNode; - placement?: Placement; shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; continueButtonDisplay?: ContinueButtonDisplay; @@ -40,18 +57,30 @@ export class OnboardingFlow extends React.Component { return null; } let onboardingElement = null; + const currentStep = this._getCurrentStep(); if (this.props.isMobile) { - onboardingElement = {this._renderOnboardignCard()}; - } else { + onboardingElement = {this._renderOnboardingCard()}; + } else if (currentStep.position.type === 'target') { + const { placement, target } = currentStep.position; onboardingElement = ( - + {this._renderPopperChildren.bind(this)} ); + } else if (currentStep.position.type === 'fixed') { + const { top, right, bottom, left, pointerDirection } = currentStep.position; + onboardingElement = ( + + {this._renderToolTip(pointerDirection)} + + ); } if (this.props.disableOverlay) { return onboardingElement; @@ -63,9 +92,6 @@ export class OnboardingFlow extends React.Component { ); } - private _getElementForStep(): Element { - return document.querySelector(this._getCurrentStep().target); - } private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode { const customStyles = { zIndex: zIndex.aboveOverlay }; // On re-render, we want to re-center the popper. @@ -76,7 +102,7 @@ export class OnboardingFlow extends React.Component { ); } - private _renderToolTip(): React.ReactNode { + private _renderToolTip(pointerDirection?: PointerDirection): React.ReactNode { const { steps, stepIndex } = this.props; const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; @@ -94,12 +120,13 @@ export class OnboardingFlow extends React.Component { continueButtonDisplay={step.continueButtonDisplay} continueButtonText={step.continueButtonText} onContinueButtonClick={step.onContinueButtonClick} + pointerDirection={pointerDirection} /> ); } - private _renderOnboardignCard(): React.ReactNode { + private _renderOnboardingCard(): React.ReactNode { const { steps, stepIndex } = this.props; const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 6d8007659..f83736aae 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -9,7 +9,12 @@ import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboardin import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboarding_step'; import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; -import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; +import { + OnboardingFlow, + Step, + TargetPositionSettings, + FixedPositionSettings, +} from 'ts/components/onboarding/onboarding_flow'; import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowances_onboarding_step'; import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step'; import { @@ -79,56 +84,61 @@ class PlainPortalOnboardingFlow extends React.Component, - placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, }, { - target: '.wallet', + position: underMetamaskExtension, title: '0x Ecosystem Setup', content: , - placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, }, { - target: '.wallet', + position: nextToWalletPosition, title: '0x Ecosystem Account Setup', content: , - placement: 'right', shouldHideBackButton: true, continueButtonDisplay: 'enabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: 'Step 1: Add ETH', content: ( ), - placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: 'Step 2: Wrap ETH', content: , - placement: 'right', continueButtonDisplay: 'enabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: 'Step 2: Wrap ETH', content: , - placement: 'right', continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: 'Step 2: Wrap ETH', content: ( ), - placement: 'right', continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: 'Step 3: Unlock Tokens', content: ( ), - placement: 'right', continueButtonDisplay: this._doesUserHaveAllowancesForWethAndZrx() ? 'enabled' : 'disabled', }, { - target: '.wallet', + position: nextToWalletPosition, title: '🎉 The Ecosystem Awaits', content: , - placement: 'right', continueButtonDisplay: 'enabled', shouldHideNextButton: true, continueButtonText: 'Enter the 0x Ecosystem', -- cgit v1.2.3 From f62044c1e3f35e0985724ebc1bac3a9b23dc2c2e Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 2 Jul 2018 18:14:21 -0700 Subject: Add media file and remove stray comment --- .../ts/components/onboarding/portal_onboarding_flow.tsx | 2 -- packages/website/ts/style/media.ts | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 packages/website/ts/style/media.ts (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 6d8007659..c8786da13 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -45,8 +45,6 @@ class PlainPortalOnboardingFlow extends React.Component void; public componentDidMount(): void { this._adjustStepIfShould(); - // Wait until the step is adjusted to decide whether we should show onboarding. - // setTimeout(this._autoStartOnboardingIfShould.bind(this), 1000); // If there is a route change, just close onboarding. this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false)); } diff --git a/packages/website/ts/style/media.ts b/packages/website/ts/style/media.ts new file mode 100644 index 000000000..2f8551f34 --- /dev/null +++ b/packages/website/ts/style/media.ts @@ -0,0 +1,15 @@ +import * as _ from 'lodash'; +import { css } from 'ts/style/theme'; +import { ScreenWidths } from 'ts/types'; + +const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css` + @media (max-width: ${screenWidth}) { + ${css.apply(css, args)}; + } +`; + +export const media = { + small: generateMediaWrapper(ScreenWidths.Sm), + medium: generateMediaWrapper(ScreenWidths.Md), + large: generateMediaWrapper(ScreenWidths.Lg), +}; -- cgit v1.2.3 From 8929543b550cad73987a795d97bbe7dee6bb0d45 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 2 Jul 2018 18:15:41 -0700 Subject: Add end comment to hotjar tracking code --- packages/website/public/index.html | 1 + 1 file changed, 1 insertion(+) (limited to 'packages') diff --git a/packages/website/public/index.html b/packages/website/public/index.html index c7a40875f..060f2c3c2 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -81,6 +81,7 @@ a.appendChild(r); })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv='); + -- cgit v1.2.3 From 6fc5c0cd460cf1cb8ac8fbe86e6d2fdbaa23ffe1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 2 Jul 2018 18:36:41 -0700 Subject: Remove unused import --- packages/website/ts/style/media.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/style/media.ts b/packages/website/ts/style/media.ts index 2f8551f34..3c992eb9f 100644 --- a/packages/website/ts/style/media.ts +++ b/packages/website/ts/style/media.ts @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import { css } from 'ts/style/theme'; import { ScreenWidths } from 'ts/types'; -- cgit v1.2.3 From c30b42434a8999356d7537e50c88ea96481e8c60 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 3 Jul 2018 11:31:40 -0700 Subject: Fix linting --- packages/website/ts/components/onboarding/onboarding_flow.tsx | 3 +-- packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 9abbc1c82..c2b4a4ca7 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -1,13 +1,12 @@ -import * as _ from 'lodash'; import * as React from 'react'; import { Placement, Popper, PopperChildrenProps } from 'react-popper'; import { OnboardingCard } from 'ts/components/onboarding/onboarding_card'; -import { PointerDirection } from 'ts/components/ui/pointer'; import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; import { Animation } from 'ts/components/ui/animation'; import { Container } from 'ts/components/ui/container'; import { Overlay } from 'ts/components/ui/overlay'; +import { PointerDirection } from 'ts/components/ui/pointer'; import { zIndex } from 'ts/style/z_index'; export interface FixedPositionSettings { diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 573196547..b7c5a9f64 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -10,10 +10,10 @@ import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboar import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; import { + FixedPositionSettings, OnboardingFlow, Step, TargetPositionSettings, - FixedPositionSettings, } from 'ts/components/onboarding/onboarding_flow'; import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowances_onboarding_step'; import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step'; -- cgit v1.2.3 From 32c25a20341964498c3594758aa02908c98dbfc0 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 3 Jul 2018 11:48:34 -0700 Subject: Persist whether onboarding is open or close across refreshes --- packages/website/ts/redux/store.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/redux/store.ts b/packages/website/ts/redux/store.ts index 0d0e6cea1..2672e3f61 100644 --- a/packages/website/ts/redux/store.ts +++ b/packages/website/ts/redux/store.ts @@ -13,9 +13,11 @@ export const store: ReduxStore = createStore( ); store.subscribe( _.throttle(() => { + const state = store.getState(); // Persisted state stateStorage.saveState({ - hasPortalOnboardingBeenClosed: store.getState().hasPortalOnboardingBeenClosed, + hasPortalOnboardingBeenClosed: state.hasPortalOnboardingBeenClosed, + isPortalOnboardingShowing: state.isPortalOnboardingShowing, }); }, ONE_SECOND), ); -- cgit v1.2.3