aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-06-19 07:55:52 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-06-19 08:08:44 +0800
commitf97e605bf6769a17d0352219f5fb1133f7cb2430 (patch)
tree102f382273c38facd8ba8448b6cbfba2329623b4 /packages/website/ts/components
parent49f5495c459f194f3cab6ff24526da924bd64a53 (diff)
downloaddexon-sol-tools-f97e605bf6769a17d0352219f5fb1133f7cb2430.tar
dexon-sol-tools-f97e605bf6769a17d0352219f5fb1133f7cb2430.tar.gz
dexon-sol-tools-f97e605bf6769a17d0352219f5fb1133f7cb2430.tar.bz2
dexon-sol-tools-f97e605bf6769a17d0352219f5fb1133f7cb2430.tar.lz
dexon-sol-tools-f97e605bf6769a17d0352219f5fb1133f7cb2430.tar.xz
dexon-sol-tools-f97e605bf6769a17d0352219f5fb1133f7cb2430.tar.zst
dexon-sol-tools-f97e605bf6769a17d0352219f5fb1133f7cb2430.zip
Consolidate account state messaging logic
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/portal/drawer_menu.tsx28
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx35
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx9
-rw-r--r--packages/website/ts/components/ui/identicon.tsx36
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>
);
}