Merge branch 'v2-prototype' into fix/five_decimal_scenario

* v2-prototype: (75 commits)
  Update relayer grid tiles to use Text
  Fix build
  Update file structure
  Update 2.0.0 artifacts
  Move ledgerhq module declarations to typescript-typings
  Export LedgerEthereumClient type in subproviders
  Update artifacts
  Add logging and updated artifacts
  Fix migrations
  Run prettier
  Add Kovan artifacts
  Use ledger subprovider
  Add Kovan migrations
  Remove state variable from Link component in Portal
  Make registerAssetProxy append only
  Update staging api link
  Change getTransactionReceipt to awaitTransactionMined
  Move /docs route to the end
  Remove extra call to scrollIntoView for wallet in onboarding
  Update expectRevertReasonOrAlwaysFailingTransactionAsync to check status codes
  ...

1 files changed, 37 insertions, 13 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 31ce99d31..bccdc0c18 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -1,18 +1,42 @@
+import { BigNumber } from '@0xproject/utils';
 import * as React from 'react';
 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 {}
+export interface AddEthOnboardingStepProps {
+    userEthBalanceInWei: BigNumber;
+}
 
-export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStepProps> = () => (
-    <div className="flex items-center flex-column">
-        <Text> Before you begin you will need to send some ETH to your metamask wallet.</Text>
-        <Container marginTop="15px" marginBottom="15px">
-            <img src="/images/ether_alt.svg" height="50px" width="50px" />
-        </Container>
-        <Text>
-            Click on the <img src="/images/metamask_icon.png" height="20px" width="20px" /> metamask extension in your
-            browser and click either <b>BUY</b> or <b>DEPOSIT</b>.
-        </Text>
-    </div>
-);
+export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStepProps> = props =>
+    props.userEthBalanceInWei.gt(0) ? (
+        <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>
+                in your wallet.
+            </Text>
+            <Container marginTop="15px" marginBottom="15px">
+                <Image src="/images/ether_alt.svg" height="50px" width="50px" />
+            </Container>
+        </div>
+    ) : (
+        <div className="flex items-center flex-column">
+            <Text> Before you begin you will need to send some ETH to your wallet.</Text>
+            <Container marginTop="15px" marginBottom="15px">
+                <Image src="/images/ether_alt.svg" height="50px" width="50px" />
+            </Container>
+            <Text className="xs-hide">
+                Click on the <Image src="/images/metamask_icon.png" height="20px" width="20px" /> MetaMask extension in
+                your browser and click either <b>BUY</b> or <b>DEPOSIT</b>.
+            </Text>
+        </div>
+    );