aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/portal/portal.tsx50
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx31
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}
/>
);
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 17:38:02 +0800