diff options
Diffstat (limited to 'packages/website/ts/components')
4 files changed, 61 insertions, 47 deletions
diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index 8ac2b9091..4bd07769f 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -2,10 +2,12 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; +import { Blockchain } from 'ts/blockchain'; import { defaultMenuItemEntries, Menu } from 'ts/components/portal/menu'; import { Identicon } from 'ts/components/ui/identicon'; +import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; -import { WebsitePaths } from 'ts/types'; +import { ProviderType, WebsitePaths } from 'ts/types'; import { utils } from 'ts/utils/utils'; const IDENTICON_DIAMETER = 45; @@ -25,14 +27,15 @@ const styles: Styles = { MozBorderRadius: BORDER_RADIUS, WebkitBorderRadius: BORDER_RADIUS, }, - userAddress: { - color: colors.white, - }, }; export interface DrawerMenuProps { selectedPath?: string; userAddress?: string; + injectedProviderName: string; + providerType: ProviderType; + blockchain?: Blockchain; + blockchainIsLoaded: boolean; } export const DrawerMenu = (props: DrawerMenuProps) => { const relayerItemEntry = { @@ -41,9 +44,15 @@ export const DrawerMenu = (props: DrawerMenuProps) => { iconName: 'zmdi-portable-wifi', }; const menuItemEntries = _.concat(relayerItemEntry, defaultMenuItemEntries); + const displayMessage = utils.getReadableAccountState( + props.blockchainIsLoaded && !_.isUndefined(props.blockchain), + props.providerType, + props.injectedProviderName, + props.userAddress, + ); return ( <div style={styles.root}> - <Header userAddress={props.userAddress} /> + <Header userAddress={props.userAddress} displayMessage={displayMessage} /> <Menu selectedPath={props.selectedPath} menuItemEntries={menuItemEntries} /> </div> ); @@ -51,17 +60,16 @@ export const DrawerMenu = (props: DrawerMenuProps) => { interface HeaderProps { userAddress?: string; + displayMessage: string; } const Header = (props: HeaderProps) => { return ( <div className="flex flex-center py4"> <div className="flex flex-column mx-auto"> <Identicon address={props.userAddress} diameter={IDENTICON_DIAMETER} style={styles.identicon} /> - {!_.isUndefined(props.userAddress) && ( - <div className="pt2" style={styles.userAddress}> - {utils.getAddressBeginAndEnd(props.userAddress)} - </div> - )} + <Text className="pt2" fontColor={colors.white}> + {props.displayMessage} + </Text> </div> </div> ); diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index cb7c9b483..0e9954350 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -6,8 +6,10 @@ import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; +import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; +import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { ProviderType } from 'ts/types'; @@ -40,23 +42,16 @@ const styles: Styles = { export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> { public render(): React.ReactNode { - const isAddressAvailable = !_.isEmpty(this.props.userAddress); const isExternallyInjectedProvider = utils.isExternallyInjected( this.props.providerType, this.props.injectedProviderName, ); - let displayMessage; - if (!this._isBlockchainReady()) { - displayMessage = 'loading account'; - } else if (isAddressAvailable) { - displayMessage = utils.getAddressBeginAndEnd(this.props.userAddress); - // tslint:disable-next-line: prefer-conditional-expression - } else if (isExternallyInjectedProvider) { - displayMessage = 'Account locked'; - } else { - displayMessage = '0x0000...0000'; - } - + const displayMessage = utils.getReadableAccountState( + this._isBlockchainReady(), + this.props.providerType, + this.props.injectedProviderName, + this.props.userAddress, + ); // If the "injected" provider is our fallback public node, then we want to // show the "connect a wallet" message instead of the providerName const injectedProviderName = isExternallyInjectedProvider @@ -66,7 +61,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi this.props.providerType === ProviderType.Injected ? injectedProviderName : 'Ledger Nano S'; const isProviderMetamask = providerTitle === constants.PROVIDER_NAME_METAMASK; const hoverActiveNode = ( - <div className="flex right lg-pr0 md-pr2 sm-pr2 p1" style={styles.root}> + <div className="flex items-center p1" style={styles.root}> <div> {this._isBlockchainReady() ? ( <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} /> @@ -74,13 +69,13 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi <CircularProgress size={ROOT_HEIGHT} thickness={2} /> )} </div> - <div style={{ marginLeft: 12, paddingTop: 3 }}> - <div style={{ fontSize: 16, color: colors.darkGrey }}>{displayMessage}</div> - </div> + <Container marginLeft="12px" marginRight="12px"> + <Text fontSize="14px" fontColor={colors.darkGrey}> + {displayMessage} + </Text> + </Container> {isProviderMetamask && ( - <div style={{ marginLeft: 16 }}> - <img src="/images/metamask_icon.png" style={{ width: ROOT_HEIGHT, height: ROOT_HEIGHT }} /> - </div> + <img src="/images/metamask_icon.png" style={{ width: ROOT_HEIGHT, height: ROOT_HEIGHT }} /> )} </div> ); diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 1a69827a4..537edc7bb 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -297,7 +297,14 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { openSecondary={true} onRequestChange={this._onMenuButtonClick.bind(this)} > - <DrawerMenu selectedPath={this.props.location.pathname} userAddress={this.props.userAddress} /> + <DrawerMenu + selectedPath={this.props.location.pathname} + userAddress={this.props.userAddress} + injectedProviderName={this.props.injectedProviderName} + providerType={this.props.providerType} + blockchainIsLoaded={this.props.blockchainIsLoaded} + blockchain={this.props.blockchain} + /> </Drawer> ); } diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx index 83c86a144..6a9b94e5b 100644 --- a/packages/website/ts/components/ui/identicon.tsx +++ b/packages/website/ts/components/ui/identicon.tsx @@ -1,7 +1,8 @@ import blockies = require('blockies'); import * as _ from 'lodash'; import * as React from 'react'; -import { constants } from 'ts/utils/constants'; + +import { colors } from 'ts/style/colors'; interface IdenticonProps { address: string; @@ -16,14 +17,9 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> { style: {}, }; public render(): React.ReactNode { - let address = this.props.address; - if (_.isEmpty(address)) { - address = constants.NULL_ADDRESS; - } + const address = this.props.address; const diameter = this.props.diameter; - const icon = blockies({ - seed: address.toLowerCase(), - }); + const radius = diameter / 2; return ( <div className="circle mx-auto relative transitionFix" @@ -34,14 +30,22 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> { ...this.props.style, }} > - <img - src={icon.toDataURL()} - style={{ - width: diameter, - height: diameter, - imageRendering: 'pixelated', - }} - /> + {!_.isEmpty(address) ? ( + <img + src={blockies({ + seed: address.toLowerCase(), + }).toDataURL()} + style={{ + width: diameter, + height: diameter, + imageRendering: 'pixelated', + }} + /> + ) : ( + <svg height={diameter} width={diameter}> + <circle cx={radius} cy={radius} r={radius} fill={colors.grey200} /> + </svg> + )} </div> ); } |