diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-05-10 06:45:46 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-05-10 06:46:18 +0800 |
commit | eba6dcc49741e7c036189220e01090a952efb8b5 (patch) | |
tree | 75d24d0c4ba172b600fdd8bdb1499012059fb6e7 /packages/website/ts/components/wallet | |
parent | c7a147f49d6e16e677eab5a9a70191720ec61963 (diff) | |
download | dexon-0x-contracts-eba6dcc49741e7c036189220e01090a952efb8b5.tar dexon-0x-contracts-eba6dcc49741e7c036189220e01090a952efb8b5.tar.gz dexon-0x-contracts-eba6dcc49741e7c036189220e01090a952efb8b5.tar.bz2 dexon-0x-contracts-eba6dcc49741e7c036189220e01090a952efb8b5.tar.lz dexon-0x-contracts-eba6dcc49741e7c036189220e01090a952efb8b5.tar.xz dexon-0x-contracts-eba6dcc49741e7c036189220e01090a952efb8b5.tar.zst dexon-0x-contracts-eba6dcc49741e7c036189220e01090a952efb8b5.zip |
Update wallet footer and add remove token functionality
Diffstat (limited to 'packages/website/ts/components/wallet')
-rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 31 |
1 files changed, 27 insertions, 4 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index a28012aaf..079c0e3b3 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -9,8 +9,11 @@ import { import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import FlatButton from 'material-ui/FlatButton'; +import FloatingActionButton from 'material-ui/FloatingActionButton'; import { List, ListItem } from 'material-ui/List'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; +import ContentAdd from 'material-ui/svg-icons/content/add'; +import ContentRemove from 'material-ui/svg-icons/content/remove'; import NavigationArrowDownward from 'material-ui/svg-icons/navigation/arrow-downward'; import NavigationArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward'; import Close from 'material-ui/svg-icons/navigation/close'; @@ -56,6 +59,7 @@ export interface WalletProps { providerType: ProviderType; onToggleLedgerDialog: () => void; onAddToken: () => void; + onRemoveToken: () => void; } interface WalletState { @@ -138,6 +142,7 @@ const ZRX_TOKEN_SYMBOL = 'ZRX'; const ETHER_SYMBOL = 'ETH'; const ICON_DIMENSION = 24; const TOKEN_AMOUNT_DISPLAY_PRECISION = 3; +const BODY_ITEM_KEY = 'BODY'; const HEADER_ITEM_KEY = 'HEADER'; const FOOTER_ITEM_KEY = 'FOOTER'; const DISCONNECTED_ITEM_KEY = 'DISCONNECTED'; @@ -248,7 +253,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { }; return ( <ListItem - key="body" + key={BODY_ITEM_KEY} innerDivStyle={bodyStyle} onMouseEnter={this._onSidebarHover.bind(this)} onMouseLeave={this._onSidebarHoverOff.bind(this)} @@ -269,13 +274,31 @@ export class Wallet extends React.Component<WalletProps, WalletState> { }); } private _renderFooterRows() { - const primaryText = '+ other tokens'; return ( <ListItem key={FOOTER_ITEM_KEY} - primaryText={primaryText} + 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> + } + disabled={true} innerDivStyle={styles.footerItemInnerDiv} - onClick={this.props.onAddToken} /> ); } |