aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx33
-rw-r--r--packages/website/ts/components/ui/container.tsx1
-rw-r--r--packages/website/ts/components/ui/text.tsx1
3 files changed, 32 insertions, 3 deletions
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 7e6ce6d02..11f1becfe 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -88,8 +88,24 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
{
target: '.wallet',
title: '0x Ecosystem Account Setup',
- content:
- 'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
+ content: (
+ <div className="flex items-center flex-column">
+ <Text>
+ In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two
+ simple steps.
+ </Text>
+ <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
+ <div className="flex flex-column items-center">
+ <img src="/images/eth_token.svg" height="50px" width="50x" />
+ <Text> Wrap ETH </Text>
+ </div>
+ <div className="flex flex-column items-center">
+ <img src="/images/fake_toggle.svg" height="50px" width="50px" />
+ <Text> Unlock tokens </Text>
+ </div>
+ </Container>
+ </div>
+ ),
placement: 'right',
shouldHideBackButton: true,
continueButtonDisplay: 'enabled',
@@ -97,7 +113,18 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
{
target: '.eth-row',
title: 'Add ETH',
- content: 'Before you begin you will need to send some ETH to your metamask wallet',
+ content: (
+ <div className="flex items-center flex-column">
+ <Text> Before you begin you will need to send some ETH to your metamask wallet.</Text>
+ <Container marginTop="15px" marginBottom="15px">
+ <img src="/images/ether_alt.svg" height="50px" width="50px" />
+ </Container>
+ <Text>
+ Click on the <img src="/images/metamask_icon.png" height="20px" width="20px" /> metamask
+ extension in your browser and click either <b>BUY</b> or <b>DEPOSIT</b>.
+ </Text>
+ </div>
+ ),
placement: 'right',
continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
},
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 3b55a18ce..d5665ec5d 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -14,6 +14,7 @@ export interface ContainerProps {
backgroundColor?: string;
borderRadius?: StringOrNum;
maxWidth?: StringOrNum;
+ width?: StringOrNum;
isHidden?: boolean;
className?: string;
position?: 'absolute' | 'fixed' | 'relative' | 'unset';
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 2bc4a1974..1e2a123b7 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -44,6 +44,7 @@ Text.defaultProps = {
fontWeight: 400,
fontColor: colors.black,
fontSize: '15px',
+ lineHeight: '1.5em',
Tag: 'div',
};