aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/onboarding
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-07 05:09:36 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-07 05:21:30 +0800
commit9669a4d1216b7d22107580daf3e2bff464eb2ade (patch)
treee408ae8281b8fc09ac253b7547027639e5f2943c /packages/website/ts/components/onboarding
parent7418926ebb156165f328a89cf58ec758737ee999 (diff)
downloaddexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar.gz
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar.bz2
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar.lz
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar.xz
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.tar.zst
dexon-sol-tools-9669a4d1216b7d22107580daf3e2bff464eb2ade.zip
Create Balance component and make token symbols smaller than token amounts
Diffstat (limited to 'packages/website/ts/components/onboarding')
-rw-r--r--packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx14
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx13
-rw-r--r--packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx19
3 files changed, 20 insertions, 26 deletions
diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
index bccdc0c18..ca71fcd50 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -1,10 +1,10 @@
import { BigNumber } from '@0xproject/utils';
import * as React from 'react';
+import { Balance } from 'ts/components/ui/balance';
import { Container } from 'ts/components/ui/container';
import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
export interface AddEthOnboardingStepProps {
userEthBalanceInWei: BigNumber;
@@ -15,13 +15,11 @@ export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStep
<div className="flex items-center flex-column">
<Text>
Great! Looks like you already have{' '}
- <b>
- {utils.getFormattedAmount(
- props.userEthBalanceInWei,
- constants.DECIMAL_PLACES_ETH,
- constants.ETHER_SYMBOL,
- )}{' '}
- </b>
+ <Balance
+ amount={props.userEthBalanceInWei}
+ decimals={constants.DECIMAL_PLACES_ETH}
+ symbol={constants.ETHER_SYMBOL}
+ />{' '}
in your wallet.
</Text>
<Container marginTop="15px" marginBottom="15px">
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 503f2163d..a79cf1ee1 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -140,13 +140,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
{
position: nextToWalletPosition,
title: 'Step 2: Wrap ETH',
- content: (
- <WrapEthOnboardingStep3
- formattedWethBalanceIfExists={
- this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
- }
- />
- ),
+ content: <WrapEthOnboardingStep3 wethAmount={this._getWethBalance()} />,
continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
},
{
@@ -187,11 +181,6 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
return ethTokenState.balance;
}
- private _getFormattedWethBalance(): string {
- const ethToken = utils.getEthToken(this.props.tokenByAddress);
- const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
- return utils.getFormattedAmountFromToken(ethToken, ethTokenState);
- }
private _userHasVisibleWeth(): boolean {
return this._getWethBalance() > new BigNumber(0);
}
diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
index 4d336c80f..e4332de75 100644
--- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
@@ -1,8 +1,11 @@
import { colors } from '@0xproject/react-shared';
+import { BigNumber } from '@0xproject/utils';
import * as React from 'react';
+import { Balance } from 'ts/components/ui/balance';
import { Container } from 'ts/components/ui/container';
import { IconButton } from 'ts/components/ui/icon_button';
import { Text } from 'ts/components/ui/text';
+import { constants } from 'ts/utils/constants';
export interface WrapEthOnboardingStep1Props {}
@@ -51,16 +54,20 @@ export const WrapEthOnboardingStep2: React.StatelessComponent<WrapEthOnboardingS
);
export interface WrapEthOnboardingStep3Props {
- formattedWethBalanceIfExists?: string;
+ wethAmount: BigNumber;
}
-export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingStep3Props> = ({
- formattedWethBalanceIfExists,
-}) => (
+export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingStep3Props> = ({ wethAmount }) => (
<div className="flex items-center flex-column">
<Text>
- You have <b>{formattedWethBalanceIfExists || '0 WETH'}</b> in your wallet.
- {formattedWethBalanceIfExists && ' Great!'}
+ You have{' '}
+ <Balance
+ amount={wethAmount}
+ decimals={constants.DECIMAL_PLACES_ETH}
+ symbol={constants.ETHER_TOKEN_SYMBOL}
+ />{' '}
+ in your wallet.
+ {wethAmount.gt(0) && ' Great!'}
</Text>
<Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
<div className="flex flex-column items-center">