Clean up a bit of the provider display logic

3 files changed, 80 insertions, 73 deletions

diff --git a/packages/website/ts/components/top_bar/install_prompt.tsx b/packages/website/ts/components/top_bar/install_prompt.tsx
new file mode 100644
index 000000000..8d1a9c48a
--- /dev/null
+++ b/packages/website/ts/components/top_bar/install_prompt.tsx
@@ -0,0 +1,59 @@
+import RaisedButton from 'material-ui/RaisedButton';
+import * as React from 'react';
+
+import { colors } from 'ts/style/colors';
+import { constants } from 'ts/utils/constants';
+
+export interface InstallPromptProps {
+    onToggleLedgerDialog: () => void;
+}
+
+export const InstallPrompt: React.StatelessComponent<InstallPromptProps> = ({ onToggleLedgerDialog }) => {
+    return (
+        <div className="px2" style={{ maxWidth: 420 }}>
+            <div className="center h4 py2" style={{ color: colors.grey700 }}>
+                Choose a wallet:
+            </div>
+            <div className="flex pb3">
+                <div className="center px2">
+                    <div style={{ color: colors.darkGrey }}>Install a browser wallet</div>
+                    <div className="py2">
+                        <img src="/images/metamask_or_parity.png" width="135" />
+                    </div>
+                    <div>
+                        Use
+                        <a
+                            href={constants.URL_METAMASK_CHROME_STORE}
+                            target="_blank"
+                            style={{ color: colors.lightBlueA700 }}
+                        >
+                            Metamask
+                        </a>
+                        or
+                        <a
+                            href={constants.URL_PARITY_CHROME_STORE}
+                            target="_blank"
+                            style={{ color: colors.lightBlueA700 }}
+                        >
+                            Parity Signer
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <div className="pl1 ml1" style={{ borderLeft: `1px solid ${colors.grey300}`, height: 65 }} />
+                    <div className="py1">or</div>
+                    <div className="pl1 ml1" style={{ borderLeft: `1px solid ${colors.grey300}`, height: 68 }} />
+                </div>
+                <div className="px2 center">
+                    <div style={{ color: colors.darkGrey }}>Connect to a ledger hardware wallet</div>
+                    <div style={{ paddingTop: 21, paddingBottom: 29 }}>
+                        <img src="/images/ledger_icon.png" style={{ width: 80 }} />
+                    </div>
+                    <div>
+                        <RaisedButton style={{ width: '100%' }} label="Use Ledger" onClick={onToggleLedgerDialog} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 8743e4320..18afee4ea 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -7,6 +7,7 @@ import Lock from 'material-ui/svg-icons/action/lock';
 import * as React from 'react';
 
 import { Blockchain } from 'ts/blockchain';
+import { InstallPrompt } from 'ts/components/top_bar/install_prompt';
 import { ProviderPicker } from 'ts/components/top_bar/provider_picker';
 import { AccountConnection } from 'ts/components/ui/account_connection';
 import { Container } from 'ts/components/ui/container';
@@ -72,78 +73,25 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
         );
     }
     public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean): React.ReactNode {
-        if (!this._isBlockchainReady()) {
-            return null;
-        } else if (hasInjectedProvider || hasLedgerProvider) {
-            return (
-                <ProviderPicker
-                    dispatcher={this.props.dispatcher}
-                    networkId={this.props.networkId}
-                    injectedProviderName={this.props.injectedProviderName}
-                    providerType={this.props.providerType}
-                    onToggleLedgerDialog={this.props.onToggleLedgerDialog}
-                    blockchain={this.props.blockchain}
-                />
-            );
-        } else {
-            // Nothing to connect to, show install/info popover
-            return (
-                <div className="px2" style={{ maxWidth: 420 }}>
-                    <div className="center h4 py2" style={{ color: colors.grey700 }}>
-                        Choose a wallet:
-                    </div>
-                    <div className="flex pb3">
-                        <div className="center px2">
-                            <div style={{ color: colors.darkGrey }}>Install a browser wallet</div>
-                            <div className="py2">
-                                <img src="/images/metamask_or_parity.png" width="135" />
-                            </div>
-                            <div>
-                                Use{' '}
-                                <a
-                                    href={constants.URL_METAMASK_CHROME_STORE}
-                                    target="_blank"
-                                    style={{ color: colors.lightBlueA700 }}
-                                >
-                                    Metamask
-                                </a>{' '}
-                                or{' '}
-                                <a
-                                    href={constants.URL_PARITY_CHROME_STORE}
-                                    target="_blank"
-                                    style={{ color: colors.lightBlueA700 }}
-                                >
-                                    Parity Signer
-                                </a>
-                            </div>
-                        </div>
-                        <div>
-                            <div
-                                className="pl1 ml1"
-                                style={{ borderLeft: `1px solid ${colors.grey300}`, height: 65 }}
-                            />
-                            <div className="py1">or</div>
-                            <div
-                                className="pl1 ml1"
-                                style={{ borderLeft: `1px solid ${colors.grey300}`, height: 68 }}
-                            />
-                        </div>
-                        <div className="px2 center">
-                            <div style={{ color: colors.darkGrey }}>Connect to a ledger hardware wallet</div>
-                            <div style={{ paddingTop: 21, paddingBottom: 29 }}>
-                                <img src="/images/ledger_icon.png" style={{ width: 80 }} />
-                            </div>
-                            <div>
-                                <RaisedButton
-                                    style={{ width: '100%' }}
-                                    label="Use Ledger"
-                                    onClick={this.props.onToggleLedgerDialog}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            );
+        const accountState = this._getAccountState();
+        switch (accountState) {
+            case AccountState.Ready:
+            case AccountState.Locked:
+                return (
+                    <ProviderPicker
+                        dispatcher={this.props.dispatcher}
+                        networkId={this.props.networkId}
+                        injectedProviderName={this.props.injectedProviderName}
+                        providerType={this.props.providerType}
+                        onToggleLedgerDialog={this.props.onToggleLedgerDialog}
+                        blockchain={this.props.blockchain}
+                    />
+                );
+            case AccountState.Disconnected:
+                return <InstallPrompt onToggleLedgerDialog={this.props.onToggleLedgerDialog} />;
+            case AccountState.Loading:
+            default:
+                return null;
         }
     }
     private _renderIcon(): React.ReactNode {
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 22cb942f8..7d900d685 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -66,7 +66,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                     targetOrigin={this.props.targetOrigin}
                     onRequestClose={this._closePopover.bind(this)}
                     useLayerForClickAway={false}
-                    animation={PopoverAnimationVertical}
+                    animated={false}
                     zDepth={this.props.zDepth}
                 >
                     <div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}>