aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/portal/drawer_menu.tsx3
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx116
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx2
-rw-r--r--packages/website/ts/types.ts7
-rw-r--r--packages/website/ts/utils/utils.ts27
5 files changed, 118 insertions, 37 deletions
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 (
<div style={styles.root}>
<Header userAddress={props.userAddress} displayMessage={displayMessage} />
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<ProviderDisplayProps, Provi
this.props.providerType,
this.props.injectedProviderName,
);
- 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
- ? this.props.injectedProviderName
- : 'Connect a wallet';
- const providerTitle =
- this.props.providerType === ProviderType.Injected ? injectedProviderName : 'Ledger Nano S';
- const isProviderMetamask = providerTitle === constants.PROVIDER_NAME_METAMASK;
const hoverActiveNode = (
- <Island className="flex items-center p1" style={styles.root}>
- <div>
- {this._isBlockchainReady() ? (
- <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} />
- ) : (
- <CircularProgress size={ROOT_HEIGHT} thickness={2} />
- )}
- </div>
+ <Island className="flex items-center py1 px2" style={styles.root}>
+ {this._renderIcon()}
<Container marginLeft="12px" marginRight="12px">
- <Text fontSize="14px" fontColor={colors.darkGrey}>
- {displayMessage}
- </Text>
+ {this._renderDisplayMessage()}
</Container>
- {isProviderMetamask && (
- <Image src="/images/metamask_icon.png" height={ROOT_HEIGHT} width={ROOT_HEIGHT} />
- )}
+ {this._renderInjectedProvider()}
</Island>
);
const hasLedgerProvider = this.props.providerType === ProviderType.Ledger;
@@ -168,7 +147,86 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
);
}
}
+ private _renderIcon(): React.ReactNode {
+ const accountState = this._getAccountState();
+ switch (accountState) {
+ case AccountState.Ready:
+ return <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} />;
+ case AccountState.Loading:
+ return <CircularProgress size={ROOT_HEIGHT} thickness={2} />;
+ case AccountState.Locked:
+ return <Lock color={colors.black} />;
+ case AccountState.Unconnected:
+ return <ActionAccountBalanceWallet color={colors.mediumBlue} />;
+ default:
+ return null;
+ }
+ }
+ private _renderDisplayMessage(): React.ReactNode {
+ const accountState = this._getAccountState();
+ const displayMessage = utils.getReadableAccountState(accountState, this.props.userAddress);
+ const fontColor = this._getDisplayMessageFontColor();
+ return (
+ <Text fontSize="16px" fontColor={fontColor} fontWeight={500}>
+ {displayMessage}
+ </Text>
+ );
+ }
+ 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 (
+ <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>
+ );
+ 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<WalletProps, WalletState> {
const userAddress = this.props.userAddress;
const main = (
<div className="flex flex-column">
- <Text fontSize="16px" lineHeight="19px" fontWeight={800}>
+ <Text fontSize="16px" lineHeight="19px" fontWeight={500}>
{utils.getAddressBeginAndEnd(userAddress)}
</Text>
<Container className="flex items-center">
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 {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-16 20:44:17 +0800