aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/generate_order/asset_picker.tsx1
-rw-r--r--packages/website/ts/components/portal/portal.tsx10
-rw-r--r--packages/website/ts/components/token_balances.tsx2
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx18
-rw-r--r--packages/website/ts/types.ts1
-rw-r--r--packages/website/ts/utils/utils.ts5
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);
},