diff options
3 files changed, 24 insertions, 8 deletions
diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index f2af551a5..bccdc0c18 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -1,6 +1,7 @@ import { BigNumber } from '@0xproject/utils'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -24,17 +25,17 @@ export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStep in your wallet. </Text> <Container marginTop="15px" marginBottom="15px"> - <img src="/images/ether_alt.svg" height="50px" width="50px" /> + <Image src="/images/ether_alt.svg" height="50px" width="50px" /> </Container> </div> ) : ( <div className="flex items-center flex-column"> <Text> Before you begin you will need to send some ETH to your wallet.</Text> <Container marginTop="15px" marginBottom="15px"> - <img src="/images/ether_alt.svg" height="50px" width="50px" /> + <Image src="/images/ether_alt.svg" height="50px" width="50px" /> </Container> <Text className="xs-hide"> - Click on the <img src="/images/metamask_icon.png" height="20px" width="20px" /> metamask extension in + Click on the <Image src="/images/metamask_icon.png" height="20px" width="20px" /> MetaMask extension in your browser and click either <b>BUY</b> or <b>DEPOSIT</b>. </Text> </div> diff --git a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx index b50484047..3a27b6854 100644 --- a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; export interface IntroOnboardingStepProps {} @@ -11,15 +12,15 @@ export const IntroOnboardingStep: React.StatelessComponent<IntroOnboardingStepPr </Text> <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around"> <div className="flex flex-column items-center"> - <img src="/images/ether.png" height="50px" width="50px" /> + <Image src="/images/ether.png" height="50px" width="50px" /> <Text> Add ETH </Text> </div> <div className="flex flex-column items-center"> - <img src="/images/eth_token.svg" height="50px" width="50x" /> + <Image src="/images/eth_token.svg" height="50px" width="50x" /> <Text> Wrap ETH </Text> </div> <div className="flex flex-column items-center"> - <img src="/images/fake_toggle.svg" height="50px" width="50px" /> + <Image src="/images/fake_toggle.svg" height="50px" width="50px" /> <Text> Unlock tokens </Text> </div> </Container> diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 5dde0f4e7..e1a2d4ce7 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 && + _.includes(currentTrackedTokens, 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)); } @@ -375,7 +389,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={ |