diff options
| -rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 50 | ||||
| -rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 31 |
2 files changed, 69 insertions, 12 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index b5e8150c4..4cbc65ce4 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -14,8 +14,10 @@ import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { FlashMessage } from 'ts/components/ui/flash_message'; import { Wallet } from 'ts/components/wallet/wallet'; import { localStorage } from 'ts/local_storage/local_storage'; +import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage'; import { Dispatcher } from 'ts/redux/dispatcher'; import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, TokenVisibility } from 'ts/types'; +import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -49,7 +51,13 @@ interface PortalState { prevPathname: string; isDisclaimerDialogOpen: boolean; isLedgerDialogOpen: boolean; - isAssetPickerDialogOpen: boolean; + tokenManagementState: TokenManagementState; +} + +enum TokenManagementState { + Add = 'Add', + Remove = 'Remove', + None = 'None', } const THROTTLE_TIMEOUT = 100; @@ -90,7 +98,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { prevUserAddress: this.props.userAddress, prevPathname: this.props.location.pathname, isDisclaimerDialogOpen: !hasAcceptedDisclaimer, - isAssetPickerDialogOpen: false, + tokenManagementState: TokenManagementState.None, isLedgerDialogOpen: false, }; } @@ -142,6 +150,11 @@ export class Portal extends React.Component<PortalProps, PortalState> { ); const allTokens = _.values(this.props.tokenByAddress); const trackedTokens = _.filter(allTokens, t => t.isTracked); + const isAssetPickerDialogOpen = this.state.tokenManagementState !== TokenManagementState.None; + const tokenVisibility = + this.state.tokenManagementState === TokenManagementState.Add + ? TokenVisibility.UNTRACKED + : TokenVisibility.TRACKED; return ( <div style={styles.root}> <DocumentTitle title="0x Portal DApp" /> @@ -180,6 +193,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { providerType={this.props.providerType} onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)} onAddToken={this._onAddToken.bind(this)} + onRemoveToken={this._onRemoveToken.bind(this)} /> </div> <div className="flex-auto px3" style={styles.scrollContainer}> @@ -217,11 +231,11 @@ export class Portal extends React.Component<PortalProps, PortalState> { networkId={this.props.networkId} blockchain={this._blockchain} dispatcher={this.props.dispatcher} - isOpen={this.state.isAssetPickerDialogOpen} + isOpen={isAssetPickerDialogOpen} currentTokenAddress={''} onTokenChosen={this._onTokenChosen.bind(this)} tokenByAddress={this.props.tokenByAddress} - tokenVisibility={TokenVisibility.UNTRACKED} + tokenVisibility={tokenVisibility} /> </div> </div> @@ -230,14 +244,29 @@ export class Portal extends React.Component<PortalProps, PortalState> { private _onTokenChosen(tokenAddress: string) { if (_.isEmpty(tokenAddress)) { this.setState({ - isAssetPickerDialogOpen: false, + tokenManagementState: TokenManagementState.None, }); return; } const token = this.props.tokenByAddress[tokenAddress]; - this.props.dispatcher.updateTokenByAddress([token]); + const isDefaultTrackedToken = _.includes(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, token.symbol); + if (this.state.tokenManagementState === TokenManagementState.Remove && !isDefaultTrackedToken) { + if (token.isRegistered) { + // Remove the token from tracked tokens + const newToken = { + ...token, + isTracked: false, + }; + this.props.dispatcher.updateTokenByAddress([newToken]); + } else { + this.props.dispatcher.removeTokenToTokenByAddress(token); + } + trackedTokenStorage.removeTrackedToken(this.props.userAddress, this.props.networkId, tokenAddress); + } else if (isDefaultTrackedToken) { + this.props.dispatcher.showFlashMessage(`Cannot remove ${token.name} because it's a default token`); + } this.setState({ - isAssetPickerDialogOpen: false, + tokenManagementState: TokenManagementState.None, }); } private _onToggleLedgerDialog() { @@ -247,7 +276,12 @@ export class Portal extends React.Component<PortalProps, PortalState> { } private _onAddToken() { this.setState({ - isAssetPickerDialogOpen: !this.state.isAssetPickerDialogOpen, + tokenManagementState: TokenManagementState.Add, + }); + } + private _onRemoveToken() { + this.setState({ + tokenManagementState: TokenManagementState.Remove, }); } private _onPortalDisclaimerAccepted() { 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} /> ); } |