aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx75
1 files changed, 41 insertions, 34 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 626d77ffe..219854f4a 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -92,9 +92,6 @@ const styles: Styles = {
zIndex: zIndex.aboveOverlay,
position: 'relative',
},
- headerItemInnerDiv: {
- paddingLeft: 65,
- },
footerItemInnerDiv: {
paddingLeft: 24,
borderTopColor: colors.walletBorder,
@@ -108,6 +105,7 @@ const styles: Styles = {
},
tokenItem: {
backgroundColor: colors.walletDefaultItemBackground,
+ minHeight: 85,
},
amountLabel: {
fontWeight: 'bold',
@@ -132,7 +130,7 @@ const styles: Styles = {
};
const ETHER_ICON_PATH = '/images/ether.png';
-const ICON_DIMENSION = 24;
+const ICON_DIMENSION = 28;
const TOKEN_AMOUNT_DISPLAY_PRECISION = 3;
const BODY_ITEM_KEY = 'BODY';
const HEADER_ITEM_KEY = 'HEADER';
@@ -211,12 +209,9 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const userAddress = this.props.userAddress;
const primaryText = 'wallet';
return (
- <ListItem
- key={HEADER_ITEM_KEY}
- primaryText={primaryText.toUpperCase()}
- leftIcon={<ActionAccountBalanceWallet color={colors.mediumBlue} />}
- style={styles.paddedItem}
- innerDivStyle={styles.headerItemInnerDiv}
+ <StandardIconRow
+ icon={<ActionAccountBalanceWallet color={colors.mediumBlue} />}
+ main={primaryText.toUpperCase()}
/>
);
}
@@ -235,11 +230,10 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const primaryText = utils.getAddressBeginAndEnd(userAddress);
return (
<Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
- <ListItem
- primaryText={primaryText}
- leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
- style={{ ...styles.paddedItem, ...styles.borderedItem }}
- innerDivStyle={styles.headerItemInnerDiv}
+ <StandardIconRow
+ icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
+ main={primaryText}
+ style={styles.borderedItem}
/>
</Link>
);
@@ -340,12 +334,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const accessoryItemConfig = {
wrappedEtherDirection: Side.Deposit,
};
- const isInWrappedEtherState =
- !_.isUndefined(this.state.wrappedEtherDirection) &&
- this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection;
- const style = isInWrappedEtherState
- ? { ...walletItemStyles.focusedItem, ...styles.paddedItem }
- : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
const key = ETHER_ITEM_KEY;
return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row');
}
@@ -398,21 +386,22 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const shouldShowWrapEtherItem =
!_.isUndefined(this.state.wrappedEtherDirection) &&
this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection;
- const style = shouldShowWrapEtherItem
- ? { ...walletItemStyles.focusedItem, ...styles.paddedItem }
- : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
+ const additionalStyle = shouldShowWrapEtherItem ? walletItemStyles.focusedItem : styles.borderedItem;
+ const style = { ...styles.tokenItem, ...additionalStyle };
const etherToken = this._getEthToken();
return (
<div key={key} className={`flex flex-column ${className || ''}`}>
- <div className="flex items-center" style={style}>
- <div className="px2">{icon}</div>
- <div className="flex-none pr2 pt2 pb2">
- {primaryText}
- {secondaryText}
- </div>
- <div className="flex-auto" />
- <div>{this._renderAccessoryItems(accessoryItemConfig)}</div>
- </div>
+ <StandardIconRow
+ icon={icon}
+ main={
+ <div>
+ {primaryText}
+ {secondaryText}
+ </div>
+ }
+ accessory={this._renderAccessoryItems(accessoryItemConfig)}
+ style={style}
+ />
{shouldShowWrapEtherItem && (
<WrapEtherItem
userAddress={this.props.userAddress}
@@ -595,4 +584,22 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
private _getEthToken(): Token {
return utils.getEthToken(this.props.tokenByAddress);
}
-} // tslint:disable:max-file-line-count
+}
+
+interface StandardIconRowProps {
+ icon: React.ReactNode;
+ main: React.ReactNode;
+ accessory?: React.ReactNode;
+ style?: React.CSSProperties;
+}
+const StandardIconRow = (props: StandardIconRowProps) => {
+ return (
+ <div className="flex items-center" style={props.style}>
+ <div className="p2">{props.icon}</div>
+ <div className="flex-none pr2 pt2 pb2">{props.main}</div>
+ <div className="flex-auto" />
+ <div>{props.accessory}</div>
+ </div>
+ );
+};
+// tslint:disable:max-file-line-count