Show eth balance in add eth balance onboarding step

3 files changed, 16 insertions, 11 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 62d44885c..7250ef971 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -1,15 +1,26 @@
+import { BigNumber } from '@0xproject/utils';
 import * as React from 'react';
 import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
 export interface AddEthOnboardingStepProps {
-    hasEth: boolean;
+    userEthBalanceInWei: BigNumber;
 }
 
 export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStepProps> = props =>
-    props.hasEth ? (
+    props.userEthBalanceInWei.gt(0) ? (
         <div className="flex items-center flex-column">
-            <Text> Great! Looks like you already have ETH in your wallet.</Text>
+            <Text>
+                Great! Looks like you already have{' '}
+                {utils.getFormattedAmount(
+                    props.userEthBalanceInWei,
+                    constants.DECIMAL_PLACES_ETH,
+                    constants.ETHER_SYMBOL,
+                )}{' '}
+                in your wallet.
+            </Text>
             <Container marginTop="15px" marginBottom="15px">
                 <img src="/images/ether_alt.svg" height="50px" width="50px" />
             </Container>
diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index 2d49a1d20..48e8ab022 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -1,12 +1,12 @@
 import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 
+import * as _ from 'lodash';
 import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { IconButton } from 'ts/components/ui/icon_button';
 import { Island } from 'ts/components/ui/island';
 import { Text, Title } from 'ts/components/ui/text';
-import * as _ from 'lodash';
 
 export type ContinueButtonDisplay = 'enabled' | 'disabled';
 
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index d2beeadfa..0eb7cd8af 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -97,13 +97,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 target: '.wallet',
                 title: 'Step 1: Add ETH',
                 content: (
-                    <AddEthOnboardingStep
-                        hasEth={
-                            !_.isUndefined(this.props.userEtherBalanceInWei)
-                                ? this.props.userEtherBalanceInWei.gt(0)
-                                : false
-                        }
-                    />
+                    <AddEthOnboardingStep userEthBalanceInWei={this.props.userEtherBalanceInWei || new BigNumber(0)} />
                 ),
                 placement: 'right',
                 continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',