diff options
Diffstat (limited to 'packages/website/ts/components/wallet/wallet.tsx')
| -rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 92 |
1 files changed, 59 insertions, 33 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 95f31582e..dab8b7d2f 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -1,6 +1,5 @@ import { ZeroEx } from '0x.js'; import { - colors, constants as sharedConstants, EtherscanLinkSuffixes, Styles, @@ -18,6 +17,7 @@ import NavigationArrowDownward from 'material-ui/svg-icons/navigation/arrow-down import NavigationArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward'; import Close from 'material-ui/svg-icons/navigation/close'; import * as React from 'react'; +import { Link } from 'react-router-dom'; import ReactTooltip = require('react-tooltip'); import firstBy = require('thenby'); @@ -38,8 +38,10 @@ import { TokenByAddress, TokenState, TokenStateByAddress, + WebsitePaths, } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; +import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; @@ -80,7 +82,7 @@ interface AccessoryItemConfig { const styles: Styles = { root: { - width: 346, + width: '100%', backgroundColor: colors.white, borderBottomRightRadius: 10, borderBottomLeftRadius: 10, @@ -134,6 +136,10 @@ const styles: Styles = { overflow: 'auto', WebkitOverflowScrolling: 'touch', }, + manageYourWalletText: { + color: colors.mediumBlue, + fontWeight: 'bold', + }, }; const ETHER_ICON_PATH = '/images/ether.png'; @@ -237,13 +243,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const userAddress = this.props.userAddress; const primaryText = utils.getAddressBeginAndEnd(userAddress); return ( - <ListItem - key={HEADER_ITEM_KEY} - primaryText={primaryText} - leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />} - style={{ ...styles.paddedItem, ...styles.borderedItem }} - innerDivStyle={styles.headerItemInnerDiv} - /> + <Link key={HEADER_ITEM_KEY} to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}> + <ListItem + primaryText={primaryText} + leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />} + style={{ ...styles.paddedItem, ...styles.borderedItem }} + innerDivStyle={styles.headerItemInnerDiv} + /> + </Link> ); } private _renderBody(): React.ReactElement<{}> { @@ -275,31 +282,50 @@ export class Wallet extends React.Component<WalletProps, WalletState> { } private _renderFooterRows(): React.ReactElement<{}> { return ( - <ListItem - key={FOOTER_ITEM_KEY} - primaryText={ - <div className="flex"> - <FloatingActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}> - <ContentAdd /> - </FloatingActionButton> - <FloatingActionButton mini={true} zDepth={0} className="px1" onClick={this.props.onRemoveToken}> - <ContentRemove /> - </FloatingActionButton> - <div - style={{ - paddingLeft: 10, - position: 'relative', - top: '50%', - transform: 'translateY(33%)', - }} - > - add/remove tokens + <div key={FOOTER_ITEM_KEY}> + <ListItem + primaryText={ + <div className="flex"> + <FloatingActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}> + <ContentAdd /> + </FloatingActionButton> + <FloatingActionButton + mini={true} + zDepth={0} + className="px1" + onClick={this.props.onRemoveToken} + > + <ContentRemove /> + </FloatingActionButton> + <div + style={{ + paddingLeft: 10, + position: 'relative', + top: '50%', + transform: 'translateY(33%)', + }} + > + add/remove tokens + </div> </div> - </div> - } - disabled={true} - innerDivStyle={styles.footerItemInnerDiv} - /> + } + disabled={true} + innerDivStyle={styles.footerItemInnerDiv} + style={styles.borderedItem} + /> + <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}> + <ListItem + primaryText={ + <div className="flex right" style={styles.manageYourWalletText}> + {'manage your wallet'} + </div> + // https://github.com/palantir/tslint-react/issues/140 + // tslint:disable-next-line:jsx-curly-spacing + } + style={{ ...styles.paddedItem, ...styles.borderedItem }} + /> + </Link> + </div> ); } private _renderEthRows(): React.ReactNode { |