diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-06-29 08:51:39 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-29 08:51:39 +0800 |
commit | 9ada8e4ddf621bb747ba1f35bfd62ac22db40d30 (patch) | |
tree | 5eea056b7f0f4ac1b4e7e9a306325a694e58ed00 /packages/website/ts/components | |
parent | 0142e7fa8f3c28737c6352945c1f1b72c5f7339d (diff) | |
download | dexon-0x-contracts-9ada8e4ddf621bb747ba1f35bfd62ac22db40d30.tar dexon-0x-contracts-9ada8e4ddf621bb747ba1f35bfd62ac22db40d30.tar.gz dexon-0x-contracts-9ada8e4ddf621bb747ba1f35bfd62ac22db40d30.tar.bz2 dexon-0x-contracts-9ada8e4ddf621bb747ba1f35bfd62ac22db40d30.tar.lz dexon-0x-contracts-9ada8e4ddf621bb747ba1f35bfd62ac22db40d30.tar.xz dexon-0x-contracts-9ada8e4ddf621bb747ba1f35bfd62ac22db40d30.tar.zst dexon-0x-contracts-9ada8e4ddf621bb747ba1f35bfd62ac22db40d30.zip |
Re-center react-popper on every step
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r-- | packages/website/ts/components/onboarding/onboarding_flow.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 18 |
2 files changed, 4 insertions, 16 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 834634909..1f4c6df82 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -68,6 +68,8 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> { } private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode { const customStyles = { zIndex: zIndex.aboveOverlay }; + // On re-render, we want to re-center the popper. + props.scheduleUpdate(); return ( <div ref={props.ref} style={{ ...props.style, ...customStyles }} data-placement={props.placement}> {this._renderToolTip()} diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index e1a2d4ce7..5dde0f4e7 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -156,20 +156,6 @@ 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 && - _.includes(currentTrackedTokens, firstDifferentTrackedToken) - ) { - document.getElementById(firstDifferentTrackedToken.address).scrollIntoView(); - } - } public render(): React.ReactNode { const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; return ( @@ -332,7 +318,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('trackedTimestamp'), + .thenBy('address'), ); return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); } @@ -389,7 +375,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const style = { ...styles.tokenItem, ...additionalStyle }; const etherToken = this._getEthToken(); return ( - <div id={key} key={key} className={`flex flex-column ${className || ''}`}> + <div key={key} className={`flex flex-column ${className || ''}`}> <StandardIconRow icon={icon} main={ |