From 1ca182e741fbdff4cd4df5877de18174b83a532b Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 26 Jun 2018 17:28:38 -0700 Subject: Update ProviderDisplay with new design --- .../website/ts/components/portal/drawer_menu.tsx | 3 +- .../ts/components/top_bar/provider_display.tsx | 116 +++++++++++++++------ packages/website/ts/components/wallet/wallet.tsx | 2 +- packages/website/ts/types.ts | 7 ++ packages/website/ts/utils/utils.ts | 27 +++-- 5 files changed, 118 insertions(+), 37 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index 205a60afc..a6707e86c 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -44,12 +44,13 @@ export const DrawerMenu = (props: DrawerMenuProps) => { iconName: 'zmdi-portable-wifi', }; const menuItemEntries = _.concat(relayerItemEntry, defaultMenuItemEntries); - const displayMessage = utils.getReadableAccountState( + const accountState = utils.getAccountState( props.blockchainIsLoaded && !_.isUndefined(props.blockchain), props.providerType, props.injectedProviderName, props.userAddress, ); + const displayMessage = utils.getReadableAccountState(accountState, props.userAddress); return (
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 496e5cae0..cbbd39c70 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -2,10 +2,13 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; +import Lock from 'material-ui/svg-icons/action/lock'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; +import { Circle } from 'ts/components/ui/circle'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; @@ -14,7 +17,7 @@ import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; -import { ProviderType } from 'ts/types'; +import { AccountState, ProviderType } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -46,37 +49,13 @@ export class ProviderDisplay extends React.Component -
- {this._isBlockchainReady() ? ( - - ) : ( - - )} -
+ + {this._renderIcon()} - - {displayMessage} - + {this._renderDisplayMessage()} - {isProviderMetamask && ( - - )} + {this._renderInjectedProvider()} ); const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; @@ -168,7 +147,86 @@ export class ProviderDisplay extends React.Component; + case AccountState.Loading: + return ; + case AccountState.Locked: + return ; + case AccountState.Unconnected: + return ; + default: + return null; + } + } + private _renderDisplayMessage(): React.ReactNode { + const accountState = this._getAccountState(); + const displayMessage = utils.getReadableAccountState(accountState, this.props.userAddress); + const fontColor = this._getDisplayMessageFontColor(); + return ( + + {displayMessage} + + ); + } + private _getDisplayMessageFontColor(): string { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Loading: + return colors.darkGrey; + case AccountState.Ready: + case AccountState.Locked: + case AccountState.Unconnected: + default: + return colors.black; + } + } + private _renderInjectedProvider(): React.ReactNode { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Ready: + case AccountState.Locked: + const circleColor = this._getInjectedProviderColor(); + return ( + + + + + {this.props.injectedProviderName} + + + + ); + case AccountState.Unconnected: + case AccountState.Loading: + default: + 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.Unconnected: + default: + return colors.red; + } + } 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, + ); + } } diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 75f950513..2474ec3fa 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -240,7 +240,7 @@ export class Wallet extends React.Component { const userAddress = this.props.userAddress; const main = (
- + {utils.getAddressBeginAndEnd(userAddress)} diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 2db947ba3..cd1f3d7bb 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -563,4 +563,11 @@ export enum BrowserType { Opera = 'Opera', Other = 'Other', } + +export enum AccountState { + Unconnected = 'Unconnected', + Ready = 'Ready', + Loading = 'Loading', + Locked = 'Locked', +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index d12ae6a98..5a180fdca 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -9,6 +9,7 @@ import deepEqual = require('deep-equal'); import * as _ from 'lodash'; import * as moment from 'moment'; import { + AccountState, BlockchainCallErrs, BrowserType, Environments, @@ -192,23 +193,37 @@ export const utils = { const truncatedAddress = `${address.substring(0, 6)}...${address.substr(-4)}`; // 0x3d5a...b287 return truncatedAddress; }, - getReadableAccountState( + getReadableAccountState(accountState: AccountState, userAddress: string): string { + switch (accountState) { + case AccountState.Loading: + return 'Loading...'; + case AccountState.Ready: + return utils.getAddressBeginAndEnd(userAddress); + case AccountState.Locked: + return 'Please Unlock'; + case AccountState.Unconnected: + return 'Connect a Wallet'; + default: + return ''; + } + }, + getAccountState( isBlockchainReady: boolean, providerType: ProviderType, injectedProviderName: string, userAddress?: string, - ): string { + ): AccountState { const isAddressAvailable = !_.isUndefined(userAddress) && !_.isEmpty(userAddress); const isExternallyInjectedProvider = utils.isExternallyInjected(providerType, injectedProviderName); if (!isBlockchainReady) { - return 'Loading account'; + return AccountState.Loading; } else if (isAddressAvailable) { - return utils.getAddressBeginAndEnd(userAddress); + return AccountState.Ready; // tslint:disable-next-line: prefer-conditional-expression } else if (isExternallyInjectedProvider) { - return 'Account locked'; + return AccountState.Locked; } else { - return 'No wallet detected'; + return AccountState.Unconnected; } }, hasUniqueNameAndSymbol(tokens: Token[], token: Token): boolean { -- cgit