aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx26
-rw-r--r--packages/website/ts/components/ui/account_connection.tsx40
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx26
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 {