Create AccountConnection component

3 files changed, 61 insertions, 31 deletions

diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 24fbb45ec..613da4356 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -8,6 +8,7 @@ import * as React from 'react';
 
 import { Blockchain } from 'ts/blockchain';
 import { ProviderPicker } from 'ts/components/top_bar/provider_picker';
+import { AccountConnection } from 'ts/components/ui/account_connection';
 import { Circle } from 'ts/components/ui/circle';
 import { Container } from 'ts/components/ui/container';
 import { DropDown } from 'ts/components/ui/drop_down';
@@ -189,16 +190,11 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
         switch (accountState) {
             case AccountState.Ready:
             case AccountState.Locked:
-                const circleColor = this._getInjectedProviderColor();
                 return (
-                    <Container className="flex items-center">
-                        <Circle diameter={6} fillColor={circleColor} />
-                        <Container marginLeft="6px">
-                            <Text fontSize="12px" lineHeight="14px" fontColor={colors.darkGrey}>
-                                {this.props.injectedProviderName}
-                            </Text>
-                        </Container>
-                    </Container>
+                    <AccountConnection
+                        accountState={accountState}
+                        injectedProviderName={this.props.injectedProviderName}
+                    />
                 );
             case AccountState.Disconnected:
             case AccountState.Loading:
@@ -206,18 +202,6 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                 return null;
         }
     }
-    private _getInjectedProviderColor(): string {
-        const accountState = this._getAccountState();
-        switch (accountState) {
-            case AccountState.Ready:
-                return colors.green;
-            case AccountState.Locked:
-            case AccountState.Loading:
-            case AccountState.Disconnected:
-            default:
-                return colors.red;
-        }
-    }
     private _isBlockchainReady(): boolean {
         return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain);
     }
diff --git a/packages/website/ts/components/ui/account_connection.tsx b/packages/website/ts/components/ui/account_connection.tsx
new file mode 100644
index 000000000..0f61ecde4
--- /dev/null
+++ b/packages/website/ts/components/ui/account_connection.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { Circle } from 'ts/components/ui/circle';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+import { AccountState } from 'ts/types';
+
+export interface AccountConnectionProps {
+    accountState: AccountState;
+    injectedProviderName: string;
+}
+
+export const AccountConnection: React.StatelessComponent<AccountConnectionProps> = ({
+    accountState,
+    injectedProviderName,
+}) => {
+    return (
+        <Container className="flex items-center">
+            <Circle diameter={6} fillColor={getInjectedProviderColor(accountState)} />
+            <Container marginLeft="6px">
+                <Text fontSize="12px" lineHeight="14px" fontColor={colors.darkGrey}>
+                    {injectedProviderName}
+                </Text>
+            </Container>
+        </Container>
+    );
+};
+
+function getInjectedProviderColor(accountState: AccountState): string {
+    switch (accountState) {
+        case AccountState.Ready:
+            return colors.limeGreen;
+        case AccountState.Locked:
+        case AccountState.Loading:
+        case AccountState.Disconnected:
+        default:
+            return colors.red;
+    }
+}
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 9c805e62e..348800717 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -19,6 +19,7 @@ import { Link } from 'react-router-dom';
 import firstBy = require('thenby');
 
 import { Blockchain } from 'ts/blockchain';
+import { AccountConnection } from 'ts/components/ui/account_connection';
 import { Circle } from 'ts/components/ui/circle';
 import { Container } from 'ts/components/ui/container';
 import { IconButton } from 'ts/components/ui/icon_button';
@@ -33,6 +34,7 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 import {
+    AccountState,
     BlockchainErrs,
     ProviderType,
     ScreenWidths,
@@ -157,10 +159,9 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         }
     }
     public render(): React.ReactNode {
-        const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError;
         return (
             <Island className="flex flex-column wallet" style={this.props.style}>
-                {isBlockchainLoaded ? this._renderLoadedRows() : this._renderLoadingRows()}
+                {this._isBlockchainReady() ? this._renderLoadedRows() : this._renderLoadingRows()}
             </Island>
         );
     }
@@ -232,19 +233,13 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
     }
     private _renderConnectedHeaderRows(): React.ReactElement<{}> {
         const userAddress = this.props.userAddress;
+        const accountState = this._getAccountState();
         const main = (
             <div className="flex flex-column">
                 <Text fontSize="16px" lineHeight="19px" fontWeight={500}>
                     {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>
+                <AccountConnection accountState={accountState} injectedProviderName={this.props.injectedProviderName} />
             </div>
         );
         return (
@@ -535,6 +530,17 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
     private _getEthToken(): Token {
         return utils.getEthToken(this.props.tokenByAddress);
     }
+    private _isBlockchainReady(): boolean {
+        return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain);
+    }
+    private _getAccountState(): AccountState {
+        return utils.getAccountState(
+            this._isBlockchainReady(),
+            this.props.providerType,
+            this.props.injectedProviderName,
+            this.props.userAddress,
+        );
+    }
 }
 
 interface StandardIconRowProps {