diff options
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 { |