2 files changed, 49 insertions, 16 deletions

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index dc48d6619..785b2da88 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));
     }
@@ -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/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
index 1015dce29..024b28544 100644
--- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
+++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
@@ -3,7 +3,7 @@ import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
 
 import { colors } from 'ts/style/colors';
-import { ProviderType } from 'ts/types';
+import { BrowserType, ProviderType } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
@@ -66,16 +66,35 @@ interface ProviderButtonProps {
     isExternallyInjectedProvider: boolean;
 }
 
-const ProviderButton: React.StatelessComponent<ProviderButtonProps> = (props: ProviderButtonProps) => (
-    <FlatButton
-        label={props.isExternallyInjectedProvider ? 'Please unlock account' : 'Get Metamask Wallet Extension'}
-        labelStyle={{ color: colors.black }}
-        labelPosition="after"
-        primary={true}
-        icon={<img src="/images/metamask_icon.png" width={METAMASK_ICON_WIDTH.toString()} />}
-        style={props.isExternallyInjectedProvider ? styles.button : { ...styles.button, ...styles.hrefAdjustment }}
-        href={props.isExternallyInjectedProvider ? undefined : constants.URL_METAMASK_CHROME_STORE}
-        target={props.isExternallyInjectedProvider ? undefined : '_blank'}
-        disabled={props.isExternallyInjectedProvider}
-    />
-);
+const ProviderButton: React.StatelessComponent<ProviderButtonProps> = (props: ProviderButtonProps) => {
+    const browserType = utils.getBrowserType();
+    let extensionLink;
+    if (!props.isExternallyInjectedProvider) {
+        switch (browserType) {
+            case BrowserType.Chrome:
+                extensionLink = constants.URL_METAMASK_CHROME_STORE;
+                break;
+            case BrowserType.Firefox:
+                extensionLink = constants.URL_METAMASK_FIREFOX_STORE;
+                break;
+            case BrowserType.Opera:
+                extensionLink = constants.URL_METAMASK_OPERA_STORE;
+                break;
+            default:
+                extensionLink = constants.URL_METAMASK_HOMEPAGE;
+        }
+    }
+    return (
+        <FlatButton
+            label={props.isExternallyInjectedProvider ? 'Please unlock account' : 'Get Metamask Wallet Extension'}
+            labelStyle={{ color: colors.black }}
+            labelPosition="after"
+            primary={true}
+            icon={<img src="/images/metamask_icon.png" width={METAMASK_ICON_WIDTH.toString()} />}
+            style={props.isExternallyInjectedProvider ? styles.button : { ...styles.button, ...styles.hrefAdjustment }}
+            href={extensionLink}
+            target={props.isExternallyInjectedProvider ? undefined : '_blank'}
+            disabled={props.isExternallyInjectedProvider}
+        />
+    );
+};