diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-22 15:37:40 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-06-29 01:38:07 +0800 |
commit | 366a9502dd8ffc62f03b728ed46c592762fe170e (patch) | |
tree | 59e5836bccfe851b989ced2c0577c57325b18ad2 /packages/website/ts/components/wallet | |
parent | 988a3347582cd812aadeaa0cdaef67389c8d833d (diff) | |
download | dexon-0x-contracts-366a9502dd8ffc62f03b728ed46c592762fe170e.tar dexon-0x-contracts-366a9502dd8ffc62f03b728ed46c592762fe170e.tar.gz dexon-0x-contracts-366a9502dd8ffc62f03b728ed46c592762fe170e.tar.bz2 dexon-0x-contracts-366a9502dd8ffc62f03b728ed46c592762fe170e.tar.lz dexon-0x-contracts-366a9502dd8ffc62f03b728ed46c592762fe170e.tar.xz dexon-0x-contracts-366a9502dd8ffc62f03b728ed46c592762fe170e.tar.zst dexon-0x-contracts-366a9502dd8ffc62f03b728ed46c592762fe170e.zip |
Sort wallet tokens by timestamp added and scroll to newly added token
Diffstat (limited to 'packages/website/ts/components/wallet')
-rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 18 |
1 files changed, 16 insertions, 2 deletions
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={ |