aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/top_bar
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-06-29 14:24:57 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-06-29 14:24:57 +0800
commit08f7666d210317d8caaca72f5a81c860478a2387 (patch)
tree1018b711ce8e8d51f5bb83fe5a2185180ae9281c /packages/website/ts/components/top_bar
parent81ff99276bec5420fd3822925e63b6ed60510b1c (diff)
downloaddexon-0x-contracts-08f7666d210317d8caaca72f5a81c860478a2387.tar.gz
dexon-0x-contracts-08f7666d210317d8caaca72f5a81c860478a2387.tar.zst
dexon-0x-contracts-08f7666d210317d8caaca72f5a81c860478a2387.zip
Create AccountConnection component
Diffstat (limited to 'packages/website/ts/components/top_bar')
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx26
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);
}