aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/public/images/unlock-mm.pngbin0 -> 21137 bytes
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx17
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx13
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx8
-rw-r--r--packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx8
5 files changed, 25 insertions, 21 deletions
diff --git a/packages/website/public/images/unlock-mm.png b/packages/website/public/images/unlock-mm.png
new file mode 100644
index 000000000..531c95dd2
--- /dev/null
+++ b/packages/website/public/images/unlock-mm.png
Binary files differ
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 46dc897bd..8aebdf1d3 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -2,11 +2,14 @@ import * as React from 'react';
import { Placement, Popper, PopperChildrenProps } from 'react-popper';
import { OnboardingCard } from 'ts/components/onboarding/onboarding_card';
-import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
+import {
+ ContinueButtonDisplay,
+ OnboardingTooltip,
+ TooltipPointerDisplay,
+} 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 {
@@ -15,7 +18,7 @@ export interface FixedPositionSettings {
bottom?: string;
left?: string;
right?: string;
- pointerDirection?: PointerDirection;
+ tooltipPointerDisplay?: TooltipPointerDisplay;
}
export interface TargetPositionSettings {
@@ -69,7 +72,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
</Popper>
);
} else if (currentStep.position.type === 'fixed') {
- const { top, right, bottom, left, pointerDirection } = currentStep.position;
+ const { top, right, bottom, left, tooltipPointerDisplay } = currentStep.position;
onboardingElement = (
<Container
position="fixed"
@@ -79,7 +82,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
bottom={bottom}
left={left}
>
- {this._renderToolTip(pointerDirection)}
+ {this._renderToolTip(tooltipPointerDisplay)}
</Container>
);
}
@@ -103,7 +106,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
</div>
);
}
- private _renderToolTip(pointerDirection?: PointerDirection): React.ReactNode {
+ private _renderToolTip(tooltipPointerDisplay?: TooltipPointerDisplay): React.ReactNode {
const { steps, stepIndex } = this.props;
const step = steps[stepIndex];
const isLastStep = steps.length - 1 === stepIndex;
@@ -121,7 +124,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
continueButtonDisplay={step.continueButtonDisplay}
continueButtonText={step.continueButtonText}
onContinueButtonClick={step.onContinueButtonClick}
- pointerDirection={pointerDirection}
+ pointerDisplay={tooltipPointerDisplay}
/>
</Container>
);
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index d8065625d..15d47908d 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -4,22 +4,27 @@ import { OnboardingCard, OnboardingCardProps } from 'ts/components/onboarding/on
import { Pointer, PointerDirection } from 'ts/components/ui/pointer';
export type ContinueButtonDisplay = 'enabled' | 'disabled';
+export type TooltipPointerDisplay = PointerDirection | 'none';
export interface OnboardingTooltipProps extends OnboardingCardProps {
className?: string;
- pointerDirection?: PointerDirection;
+ pointerDisplay?: TooltipPointerDisplay;
}
export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = props => {
- const { pointerDirection, className, ...cardProps } = props;
+ const { pointerDisplay, className, ...cardProps } = props;
+ const card = <OnboardingCard {...cardProps} />;
+ if (pointerDisplay === 'none') {
+ return card;
+ }
return (
- <Pointer className={className} direction={pointerDirection}>
+ <Pointer className={className} direction={pointerDisplay}>
<OnboardingCard {...cardProps} />
</Pointer>
);
};
OnboardingTooltip.defaultProps = {
- pointerDirection: 'left',
+ pointerDisplay: 'left',
};
OnboardingTooltip.displayName = 'OnboardingTooltip';
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index a79cf1ee1..3dec8a444 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -91,9 +91,9 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
};
const underMetamaskExtension: FixedPositionSettings = {
type: 'fixed',
- top: '30px',
- right: '10px',
- pointerDirection: 'top',
+ top: '5px',
+ right: '5px',
+ tooltipPointerDisplay: 'none',
};
const steps: Step[] = [
{
@@ -105,7 +105,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
},
{
position: underMetamaskExtension,
- title: '0x Ecosystem Setup',
+ title: 'Please Unlock Metamask...',
content: <UnlockWalletOnboardingStep />,
shouldHideBackButton: true,
shouldHideNextButton: true,
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 4ed7137d4..a1de469ad 100644
--- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
@@ -1,16 +1,12 @@
import * as React from 'react';
-import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
+import { Image } from 'ts/components/ui/image';
export interface UnlockWalletOnboardingStepProps {}
export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOnboardingStepProps> = () => (
<div className="flex items-center flex-column">
<div className="flex items-center flex-column">
- <Container marginTop="15px" marginBottom="15px">
- <img src="/images/metamask_icon.png" height="50px" width="50px" />
- </Container>
- <Text center={true}>Unlock your MetaMask extension to get started.</Text>
+ <Image src="/images/unlock-mm.png" />
</div>
</div>
);