Create Balance component and make token symbols smaller than token amounts

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

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);
     }

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

packages/website/ts/components/ui/balance.tsx

@@ -0,0 +1,27 @@
+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 { utils } from 'ts/utils/utils';
+
+export interface BalanceProps {
+    amount: BigNumber;
+    decimals: number;
+    symbol: string;
+}
+
+export const Balance: React.StatelessComponent<BalanceProps> = ({ amount, decimals, symbol }) => {
+    const formattedAmout = utils.getFormattedAmount(amount, decimals);
+    return (
+        <span>
+            <Text Tag="span" fontSize="16px" fontWeight="700" lineHeight="1em">
+                {formattedAmout}
+            </Text>
+            <Container marginLeft="0.3em" Tag="span">
+                <Text Tag="span" fontSize="12px" fontWeight="700" lineHeight="1em">
+                    {symbol}
+                </Text>
+            </Container>
+        </span>
+    );
+};

packages/website/ts/components/ui/container.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 
 type StringOrNum = string | number;
 
+export type ContainerTag = 'div' | 'span';
+
 export interface ContainerProps {
     marginTop?: StringOrNum;
     marginBottom?: StringOrNum;
@@ -28,15 +30,21 @@ export interface ContainerProps {
     right?: string;
     bottom?: string;
     zIndex?: number;
+    Tag?: ContainerTag;
 }
 
-export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => {
+export const Container: React.StatelessComponent<ContainerProps> = props => {
+    const { children, className, Tag, isHidden, ...style } = props;
     const visibility = isHidden ? 'hidden' : undefined;
     return (
-        <div style={{ ...style, visibility }} className={className}>
+        <Tag style={{ ...style, visibility }} className={className}>
             {children}
-        </div>
+        </Tag>
     );
 };
 
+Container.defaultProps = {
+    Tag: 'div',
+};
+
 Container.displayName = 'Container';

packages/website/ts/components/wallet/wallet.tsx

@@ -8,6 +8,7 @@ import firstBy = require('thenby');
 
 import { Blockchain } from 'ts/blockchain';
 import { AccountConnection } from 'ts/components/ui/account_connection';
+import { Balance } from 'ts/components/ui/balance';
 import { Container } from 'ts/components/ui/container';
 import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
 import { IconButton } from 'ts/components/ui/icon_button';
@@ -436,12 +437,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 </PlaceHolder>
             );
         } else {
-            const result = utils.getFormattedAmount(amount, decimals, symbol);
-            return (
-                <Text fontSize="16px" fontWeight="bold" lineHeight="1em">
-                    {result}
-                </Text>
-            );
+            return <Balance amount={amount} decimals={decimals} symbol={symbol} />;
         }
     }
     private _renderValue(

packages/website/ts/utils/utils.ts

@@ -381,9 +381,9 @@ export const utils = {
         return trackedTokens;
     },
     getFormattedAmountFromToken(token: Token, tokenState: TokenState): string {
-        return utils.getFormattedAmount(tokenState.balance, token.decimals, token.symbol);
+        return utils.getFormattedAmount(tokenState.balance, token.decimals);
     },
-    getFormattedAmount(amount: BigNumber, decimals: number, symbol: string): string {
+    getFormattedAmount(amount: BigNumber, decimals: number): string {
         const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
         // if the unit amount is less than 1, show the natural number of decimal places with a max of 4
         // if the unit amount is greater than or equal to 1, show only 2 decimal places
@@ -392,7 +392,7 @@ export const utils = {
             : 2;
         const format = `0,0.${_.repeat('0', precision)}`;
         const formattedAmount = numeral(unitAmount).format(format);
-        return `${formattedAmount} ${symbol}`;
+        return formattedAmount;
     },
     getUsdValueFormattedAmount(amount: BigNumber, decimals: number, price: BigNumber): string {
         const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);