Create Balance component and make token symbols smaller than token amounts

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">