Fix key issue and remove WalletDisconnectedItem

packages/website/ts/components/wallet/wallet.tsx

@@ -27,7 +27,6 @@ import { Island } from 'ts/components/ui/island';
 import { Text } from 'ts/components/ui/text';
 import { TokenIcon } from 'ts/components/ui/token_icon';
 import { BodyOverlay } from 'ts/components/wallet/body_overlay';
-import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item';
 import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { Dispatcher } from 'ts/redux/dispatcher';
@@ -195,7 +194,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         return (
             <div key={BODY_ITEM_KEY} className="flex flex-column" style={bodyStyle}>
                 {_.map(loadingRowsRange, index => {
-                    return <NullTokenRow />;
+                    return <NullTokenRow key={index} />;
                 })}
                 <Container
                     className="flex items-center"
@@ -249,16 +248,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             />
         );
     }
-    private _renderDisconnectedRows(): React.ReactElement<{}> {
-        return (
-            <WalletDisconnectedItem
-                key={DISCONNECTED_ITEM_KEY}
-                providerType={this.props.providerType}
-                injectedProviderName={this.props.injectedProviderName}
-                onToggleLedgerDialog={this.props.onToggleLedgerDialog}
-            />
-        );
-    }
     private _renderConnectedHeaderRows(): React.ReactElement<{}> {
         const userAddress = this.props.userAddress;
         const main = (

packages/website/ts/components/wallet/wallet_disconnected_item.tsx

@@ -1,100 +0,0 @@
-import { Styles } from '@0xproject/react-shared';
-import FlatButton from 'material-ui/FlatButton';
-import * as React from 'react';
-
-import { colors } from 'ts/style/colors';
-import { BrowserType, ProviderType } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
-
-export interface WalletDisconnectedItemProps {
-    providerType: ProviderType;
-    injectedProviderName: string;
-    onToggleLedgerDialog: () => void;
-}
-
-const styles: Styles = {
-    button: {
-        border: colors.walletBorder,
-        borderStyle: 'solid',
-        borderWidth: 1,
-        height: 80,
-    },
-    hrefAdjustment: {
-        paddingTop: 20, // HACK: For some reason when we set the href prop of a FlatButton material-ui reduces the top padding
-    },
-    otherWalletText: {
-        fontSize: 14,
-        color: colors.grey500,
-        textDecoration: 'underline',
-    },
-};
-
-const ITEM_HEIGHT = 381;
-const METAMASK_ICON_WIDTH = 35;
-const LEDGER_ICON_WIDTH = 30;
-const BUTTON_BOTTOM_PADDING = 80;
-
-export const WalletDisconnectedItem: React.StatelessComponent<WalletDisconnectedItemProps> = (
-    props: WalletDisconnectedItemProps,
-) => {
-    const isExternallyInjectedProvider = utils.isExternallyInjected(props.providerType, props.injectedProviderName);
-    return (
-        <div className="flex flex-center">
-            <div className="mx-auto">
-                <div className="table" style={{ height: ITEM_HEIGHT }}>
-                    <div className="table-cell align-middle">
-                        <ProviderButton isExternallyInjectedProvider={isExternallyInjectedProvider} />
-                        <div className="flex flex-center py2" style={{ paddingBottom: BUTTON_BOTTOM_PADDING }}>
-                            <div className="mx-auto">
-                                <div onClick={props.onToggleLedgerDialog} style={{ cursor: 'pointer' }}>
-                                    <img src="/images/ledger_icon.png" style={{ width: LEDGER_ICON_WIDTH }} />
-                                    <span className="px1" style={styles.otherWalletText}>
-                                        user other wallet
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-interface ProviderButtonProps {
-    isExternallyInjectedProvider: boolean;
-}
-
-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}
-        />
-    );
-};