diff options
| -rw-r--r-- | packages/website/ts/components/generate_order/asset_picker.tsx | 1 | ||||
| -rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 10 | ||||
| -rw-r--r-- | packages/website/ts/components/token_balances.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 18 | ||||
| -rw-r--r-- | packages/website/ts/types.ts | 1 | ||||
| -rw-r--r-- | packages/website/ts/utils/utils.ts | 5 |
6 files changed, 26 insertions, 11 deletions
diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index 0f569e1ad..e78324346 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -260,6 +260,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt }; newTokenEntry.isTracked = true; + newTokenEntry.trackedTimestamp = Date.now(); trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry); this.props.dispatcher.updateTokenByAddress([newTokenEntry]); diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 4166fde53..6d70a4733 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -192,7 +192,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { this._fetchBalancesAndAllowancesAsync(trackedTokenAddresses); } - const nextTrackedTokens = this._getTrackedTokens(nextProps.tokenByAddress); + const nextTrackedTokens = utils.getTrackedTokens(nextProps.tokenByAddress); const trackedTokens = this._getCurrentTrackedTokens(); if (!_.isEqual(nextTrackedTokens, trackedTokens)) { @@ -610,13 +610,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { } private _getCurrentTrackedTokens(): Token[] { - return this._getTrackedTokens(this.props.tokenByAddress); - } - - private _getTrackedTokens(tokenByAddress: TokenByAddress): Token[] { - const allTokens = _.values(tokenByAddress); - const trackedTokens = _.filter(allTokens, t => t.isTracked); - return trackedTokens; + return utils.getTrackedTokens(this.props.tokenByAddress); } private _getInitialTrackedTokenStateByAddress(trackedTokens: Token[]): TokenStateByAddress { diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 7af80745c..fc802a7b3 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -308,7 +308,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala const trackedTokensStartingWithEtherToken = trackedTokens.sort( firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL) .thenBy((t: Token) => t.symbol !== ZRX_TOKEN_SYMBOL) - .thenBy('address'), + .thenBy('trackedTimestamp'), ); const tableRows = _.map( trackedTokensStartingWithEtherToken, diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index dc48d6619..5c90aa3da 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -156,6 +156,20 @@ export class Wallet extends React.Component<WalletProps, WalletState> { isHoveringSidebar: false, }; } + public componentDidUpdate(prevProps: WalletProps): void { + const currentTrackedTokens = this.props.trackedTokens; + const differentTrackedTokens = _.difference(currentTrackedTokens, prevProps.trackedTokens); + const firstDifferentTrackedToken = _.head(differentTrackedTokens); + // check if there is only one different token, and if that token is a member of the current tracked tokens + // this means that the token was added, not removed + if ( + !_.isUndefined(firstDifferentTrackedToken) && + _.size(differentTrackedTokens) === 1 && + currentTrackedTokens.includes(firstDifferentTrackedToken) + ) { + document.getElementById(firstDifferentTrackedToken.address).scrollIntoView(); + } + } public render(): React.ReactNode { const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; return ( @@ -318,7 +332,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const trackedTokensStartingWithEtherToken = trackedTokens.sort( firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL) .thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL) - .thenBy('address'), + .thenBy('trackedTimestamp'), ); return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); } @@ -383,7 +397,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const style = { ...styles.tokenItem, ...additionalStyle }; const etherToken = this._getEthToken(); return ( - <div key={key} className={`flex flex-column ${className || ''}`}> + <div id={key} key={key} className={`flex flex-column ${className || ''}`}> <StandardIconRow icon={icon} main={ diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 8a88c31b2..79885d7fd 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -15,6 +15,7 @@ export interface Token { decimals: number; isTracked: boolean; isRegistered: boolean; + trackedTimestamp?: number; } export interface TokenByAddress { diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index ff06d923d..0ebcf737c 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -355,6 +355,11 @@ export const utils = { const token = _.find(tokens, { symbol }); return token; }, + getTrackedTokens(tokenByAddress: TokenByAddress): Token[] { + const allTokens = _.values(tokenByAddress); + const trackedTokens = _.filter(allTokens, t => t.isTracked); + return trackedTokens; + }, getFormattedAmountFromToken(token: Token, tokenState: TokenState): string { return utils.getFormattedAmount(tokenState.balance, token.decimals, token.symbol); }, |