crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Break wrath ETH step into 2

Browse Source
This commit is contained in:
fragosti
2018-06-27 14:33:04 -07:00
parent 3c68d9c297
commit aad0804a1e
3 changed files with 72 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/ts/components/onboarding/onboarding_flow.tsx
View File

@@ -71,7 +71,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
const step = steps[stepIndex];
const isLastStep = steps.length - 1 === stepIndex;
return (
<Container marginLeft="30px" maxWidth={350}>
<Container marginLeft="30px" width="400px">
<OnboardingTooltip
title={step.title}
content={step.content}

19
packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
View File

@@ -12,7 +12,7 @@ import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_s
import { OnboardingFlow, Step } 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 { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step';
import { WrapEthOnboardingStep1, WrapEthOnboardingStep2 } from 'ts/components/onboarding/wrap_eth_onboarding_step';
import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
import { ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
import { analytics } from 'ts/utils/analytics';
@@ -98,16 +98,21 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
},
{
target: '.wallet',
title: 'Step 1/2',
title: 'Step 1: Wrap ETH',
content: <WrapEthOnboardingStep1 />,
placement: 'right',
continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
},
{
target: '.wallet',
title: 'Step 1: Wrap ETH',
content: (
<WrapEthOnboardingStep
formattedEthBalanceIfExists={
this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
}
<WrapEthOnboardingStep2
formattedEthBalance={this._userHasVisibleWeth() ? this._getFormattedWethBalance() : '0 WETH'}
/>
),
placement: 'right',
continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
continueButtonDisplay: 'enabled',
},
{
target: '.wallet',

121
packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
View File

@@ -4,70 +4,67 @@ import { Container } from 'ts/components/ui/container';
import { IconButton } from 'ts/components/ui/icon_button';
import { Text } from 'ts/components/ui/text';
export interface WrapEthOnboardingStepProps {
formattedEthBalanceIfExists?: string;
export interface WrapEthOnboardingStep1Props {}
export const WrapEthOnboardingStep1: React.StatelessComponent<WrapEthOnboardingStep1Props> = () => (
<div className="flex items-center flex-column">
<Text>
You need to convert some of your ETH into tradeable <b>Wrapped ETH (WETH)</b>.
</Text>
<Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
<div className="flex flex-column items-center">
<Text fontWeight={700}> 1 ETH </Text>
<img src="/images/eth_dollar.svg" height="75px" width="75x" />
</div>
<Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
<Text fontSize="36px">=</Text>
</Container>
<div className="flex flex-column items-center">
<Text fontWeight={700}> 1 WETH </Text>
<img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
</div>
</Container>
<Text>
Think of it like the coin version of a paper note. It has the same value, but some machines only take coins.
</Text>
<Text>
Click
<Container display="inline-block" marginLeft="10px" marginRight="10px">
<IconButton
iconName="zmdi-long-arrow-down"
color={colors.mediumBlue}
labelText="wrap"
display="inline-flex"
/>
</Container>
to wrap your ETH.
</Text>
</div>
);
export interface WrapEthOnboardingStep2Props {
formattedEthBalance: string;
}
export const WrapEthOnboardingStep: React.StatelessComponent<WrapEthOnboardingStepProps> = ({
formattedEthBalanceIfExists,
}) => {
if (formattedEthBalanceIfExists) {
return (
<div className="flex items-center flex-column">
<Text>Congrats you now have {formattedEthBalanceIfExists} in your wallet.</Text>
<Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
<div className="flex flex-column items-center">
<Text fontWeight={700}> 1 ETH </Text>
<img src="/images/eth_dollar.svg" height="75px" width="75x" />
</div>
<Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
<Text fontSize="25px">
<i className="zmdi zmdi-long-arrow-right" />
</Text>
</Container>
<div className="flex flex-column items-center">
<Text fontWeight={700}> 1 WETH </Text>
<img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
</div>
</Container>
export const WrapEthOnboardingStep2: React.StatelessComponent<WrapEthOnboardingStep2Props> = ({
formattedEthBalance,
}) => (
<div className="flex items-center flex-column">
<Text>You currently have {formattedEthBalance} in your wallet.</Text>
<Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
<div className="flex flex-column items-center">
<Text fontWeight={700}> 1 ETH </Text>
<img src="/images/eth_dollar.svg" height="75px" width="75x" />
</div>
);
} else {
return (
<div className="flex items-center flex-column">
<Text>
You need to convert some of your ETH into tradeable <b>Wrapped ETH (WETH)</b>.
</Text>
<Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
<div className="flex flex-column items-center">
<Text fontWeight={700}> 1 ETH </Text>
<img src="/images/eth_dollar.svg" height="75px" width="75x" />
</div>
<Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
<Text fontSize="36px">=</Text>
</Container>
<div className="flex flex-column items-center">
<Text fontWeight={700}> 1 WETH </Text>
<img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
</div>
</Container>
<Text>
Think of it like the coin version of a paper note. It has the same value, but some machines only
take coins.
</Text>
<Text>
Click
<Container display="inline-block" marginLeft="10px" marginRight="10px">
<IconButton
iconName="zmdi-long-arrow-down"
color={colors.mediumBlue}
labelText="wrap"
display="inline-flex"
/>
</Container>
to wrap your ETH.
<Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
<Text fontSize="25px">
<i className="zmdi zmdi-long-arrow-right" />
</Text>
</Container>
<div className="flex flex-column items-center">
<Text fontWeight={700}> 1 WETH </Text>
<img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
</div>
);
}
};
</Container>
</div>
);