From 8419db53bb94354280ed4776540386fc271e4589 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 26 Jun 2018 16:13:35 -0700
Subject: Implement provider name in header

---
 packages/website/ts/components/wallet/wallet.tsx | 20 +++++++++++++++++---
 packages/website/ts/utils/constants.ts           |  2 +-
 2 files changed, 18 insertions(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 9f3266cc9..75f950513 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -110,7 +110,7 @@ const styles: Styles = {
         color: colors.black,
     },
     valueLabel: {
-        color: colors.grey,
+        color: colors.darkGrey,
         fontSize: 14,
     },
     paddedItem: {
@@ -238,12 +238,26 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
     }
     private _renderConnectedHeaderRows(): React.ReactElement<{}> {
         const userAddress = this.props.userAddress;
-        const primaryText = utils.getAddressBeginAndEnd(userAddress);
+        const main = (
+            <div className="flex flex-column">
+                <Text fontSize="16px" lineHeight="19px" fontWeight={800}>
+                    {utils.getAddressBeginAndEnd(userAddress)}
+                </Text>
+                <Container className="flex items-center">
+                    <Circle diameter={6} fillColor="#37D400" />
+                    <Container marginLeft="6px">
+                        <Text fontSize="12px" lineHeight="14px" fontColor={colors.darkGrey}>
+                            {this.props.injectedProviderName}
+                        </Text>
+                    </Container>
+                </Container>
+            </div>
+        );
         return (
             <Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
                 <StandardIconRow
                     icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
-                    main={primaryText}
+                    main={main}
                     style={styles.borderedItem}
                 />
             </Link>
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index a3f8eacb0..d3a2aa107 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -26,7 +26,7 @@ export const constants = {
     NETWORK_ID_TESTRPC: 50,
     NULL_ADDRESS: '0x0000000000000000000000000000000000000000',
     PROVIDER_NAME_LEDGER: 'Ledger',
-    PROVIDER_NAME_METAMASK: 'Metamask',
+    PROVIDER_NAME_METAMASK: 'MetaMask',
     PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer',
     PROVIDER_NAME_MIST: 'Mist',
     PROVIDER_NAME_GENERIC: 'Injected Web3',
-- 
cgit v1.2.3