Create AccountConnection component

1 files changed, 5 insertions, 21 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);
     }