aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx35
-rw-r--r--packages/website/ts/components/wallet/wallet_disconnected_item.tsx2
2 files changed, 29 insertions, 8 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 74f3cc24f..65d0ab235 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -7,6 +7,7 @@ import {
import { BigNumber } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as _ from 'lodash';
+import CircularProgress from 'material-ui/CircularProgress';
import FlatButton from 'material-ui/FlatButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import { ListItem } from 'material-ui/List';
@@ -128,6 +129,9 @@ const styles: Styles = {
color: colors.mediumBlue,
fontWeight: 'bold',
},
+ loadingBody: {
+ height: 381,
+ },
};
const ETHER_ICON_PATH = '/images/ether.png';
@@ -204,7 +208,16 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
: _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows());
}
private _renderLoadingRows(): React.ReactNode {
- return <div />;
+ return _.concat(this._renderDisconnectedHeaderRows(), this._renderLoadingBodyRows());
+ }
+ private _renderLoadingBodyRows(): React.ReactElement<{}> {
+ return (
+ <div className="flex items-center" style={styles.loadingBody}>
+ <div className="mx-auto">
+ <CircularProgress size={40} thickness={5} />
+ </div>
+ </div>
+ );
}
private _renderDisconnectedHeaderRows(): React.ReactElement<{}> {
const userAddress = this.props.userAddress;
@@ -213,6 +226,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
<StandardIconRow
icon={<ActionAccountBalanceWallet color={colors.mediumBlue} />}
main={primaryText.toUpperCase()}
+ style={styles.borderedItem}
/>
);
}
@@ -472,12 +486,18 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
);
}
private _renderValue(isLoaded: boolean, amount: BigNumber, decimals: number, price?: BigNumber): React.ReactNode {
- let result = '$00.00';
- if (!_.isUndefined(price) && isLoaded) {
- const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
- const value = unitAmount.mul(price);
- const formattedAmount = value.toFixed(USD_DECIMAL_PLACES);
- result = `$${formattedAmount}`;
+ let result;
+ if (isLoaded) {
+ if (_.isUndefined(price)) {
+ result = '--';
+ } else {
+ const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
+ const value = unitAmount.mul(price);
+ const formattedAmount = value.toFixed(USD_DECIMAL_PLACES);
+ result = `$${formattedAmount}`;
+ }
+ } else {
+ result = '$0.00';
}
return (
<PlaceHolder hideChildren={!isLoaded}>
@@ -627,6 +647,7 @@ const PlaceHolder = (props: PlaceHolderProps) => {
const rootStyle: React.CSSProperties = {
backgroundColor: rootBackgroundColor,
display: 'inline-block',
+ borderRadius: 2,
};
const childrenVisibility = props.hideChildren ? 'hidden' : 'visible';
const childrenStyle: React.CSSProperties = { visibility: childrenVisibility };
diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
index 39a62e1fb..17fd8a19e 100644
--- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
+++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
@@ -31,7 +31,7 @@ const styles: Styles = {
},
};
-const ITEM_HEIGHT = 292;
+const ITEM_HEIGHT = 381;
const METAMASK_ICON_WIDTH = 35;
const LEDGER_ICON_WIDTH = 30;
const BUTTON_BOTTOM_PADDING = 80;