Implement new locked and uninstalled states

7 files changed, 178 insertions, 7 deletions

diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index cbbd39c70..24fbb45ec 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -156,7 +156,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                 return <CircularProgress size={ROOT_HEIGHT} thickness={2} />;
             case AccountState.Locked:
                 return <Lock color={colors.black} />;
-            case AccountState.Unconnected:
+            case AccountState.Disconnected:
                 return <ActionAccountBalanceWallet color={colors.mediumBlue} />;
             default:
                 return null;
@@ -179,7 +179,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                 return colors.darkGrey;
             case AccountState.Ready:
             case AccountState.Locked:
-            case AccountState.Unconnected:
+            case AccountState.Disconnected:
             default:
                 return colors.black;
         }
@@ -200,7 +200,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                         </Container>
                     </Container>
                 );
-            case AccountState.Unconnected:
+            case AccountState.Disconnected:
             case AccountState.Loading:
             default:
                 return null;
@@ -213,7 +213,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                 return colors.green;
             case AccountState.Locked:
             case AccountState.Loading:
-            case AccountState.Unconnected:
+            case AccountState.Disconnected:
             default:
                 return colors.red;
         }
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 2abcc00f6..fb718d731 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -14,6 +14,7 @@ export interface ContainerProps {
     backgroundColor?: string;
     borderRadius?: StringOrNum;
     maxWidth?: StringOrNum;
+    maxHeight?: StringOrNum;
     width?: StringOrNum;
     height?: StringOrNum;
     minHeight?: StringOrNum;
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 1e2a123b7..88f216d4e 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -15,6 +15,7 @@ export interface TextProps {
     minHeight?: string;
     center?: boolean;
     fontWeight?: number | string;
+    textDecorationLine?: string;
     onClick?: () => void;
 }
 
@@ -28,6 +29,7 @@ export const Text = styled(PlainText)`
     font-family: ${props => props.fontFamily};
     font-weight: ${props => props.fontWeight};
     font-size: ${props => props.fontSize};
+    text-decoration-line: ${props => props.textDecorationLine};
     ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
     ${props => (props.center ? 'text-align: center' : '')};
     color: ${props => props.fontColor};
@@ -45,6 +47,7 @@ Text.defaultProps = {
     fontColor: colors.black,
     fontSize: '15px',
     lineHeight: '1.5em',
+    textDecorationLine: 'none',
     Tag: 'div',
 };
 
diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx
new file mode 100644
index 000000000..8f8899a92
--- /dev/null
+++ b/packages/website/ts/components/wallet/body_overlay.tsx
@@ -0,0 +1,147 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Blockchain } from 'ts/blockchain';
+import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
+import { Island } from 'ts/components/ui/island';
+import { Text } from 'ts/components/ui/text';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
+import { AccountState, BrowserType, ProviderType } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
+
+const METAMASK_IMG_SRC = '/images/metamask_icon.png';
+
+export interface BodyOverlayProps {
+    dispatcher: Dispatcher;
+    userAddress: string;
+    injectedProviderName: string;
+    providerType: ProviderType;
+    onToggleLedgerDialog: () => void;
+    blockchain?: Blockchain;
+    blockchainIsLoaded: boolean;
+}
+
+interface BodyOverlayState {}
+
+export class BodyOverlay extends React.Component<BodyOverlayProps, BodyOverlayState> {
+    public render(): React.ReactNode {
+        const accountState = this._getAccountState();
+        switch (accountState) {
+            case AccountState.Locked:
+                return <LockedOverlay onUseDifferentWalletClicked={this.props.onToggleLedgerDialog} />;
+            case AccountState.Disconnected:
+                return <DisconnectedOverlay onUseDifferentWalletClicked={this.props.onToggleLedgerDialog} />;
+            case AccountState.Ready:
+            case AccountState.Loading:
+            default:
+                return null;
+        }
+    }
+    private _isBlockchainReady(): boolean {
+        return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain);
+    }
+    private _getAccountState(): AccountState {
+        return utils.getAccountState(
+            this._isBlockchainReady(),
+            this.props.providerType,
+            this.props.injectedProviderName,
+            this.props.userAddress,
+        );
+    }
+}
+
+interface LockedOverlayProps {
+    className?: string;
+    onUseDifferentWalletClicked?: () => void;
+}
+const PlainLockedOverlay: React.StatelessComponent<LockedOverlayProps> = ({
+    className,
+    onUseDifferentWalletClicked,
+}) => (
+    <div className={className}>
+        <Container
+            className="flex flex-column items-center"
+            marginBottom="24px"
+            marginTop="24px"
+            marginLeft="48px"
+            marginRight="48px"
+        >
+            <Image src={METAMASK_IMG_SRC} height="70px" />
+            <Container marginTop="12px">
+                <Text fontColor="#F68C24" fontSize="16px" fontWeight="bold">
+                    Please Unlock MetaMask
+                </Text>
+            </Container>
+            <UseDifferentWallet fontColor={colors.darkGrey} onClick={onUseDifferentWalletClicked} />
+        </Container>
+    </div>
+);
+const LockedOverlay = styled(PlainLockedOverlay)`
+    background: rgba(255, 248, 242, 0.8);
+    border: 1px solid #f68c24;
+    box-sizing: border-box;
+    border-radius: 10px;
+`;
+
+interface DisconnectedOverlayProps {
+    onUseDifferentWalletClicked?: () => void;
+}
+const DisconnectedOverlay = (props: DisconnectedOverlayProps) => {
+    return (
+        <div className="flex flex-column items-center">
+            <GetMetaMask />
+            <UseDifferentWallet fontColor={colors.mediumBlue} onClick={props.onUseDifferentWalletClicked} />
+        </div>
+    );
+};
+
+interface UseDifferentWallet {
+    fontColor: string;
+    onClick?: () => void;
+}
+const UseDifferentWallet = (props: UseDifferentWallet) => {
+    return (
+        <Container marginTop="12px">
+            <Text fontColor={props.fontColor} fontSize="16px" textDecorationLine="underline" onClick={props.onClick}>
+                Use a different wallet
+            </Text>
+        </Container>
+    );
+};
+
+const GetMetaMask = () => {
+    const browserType = utils.getBrowserType();
+    let extensionLink;
+    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 (
+        <a href={extensionLink} target="_blank" style={{ textDecoration: 'none' }}>
+            <Island
+                className="flex items-center py1 px2"
+                style={{ height: 28, borderRadius: 28, backgroundColor: colors.mediumBlue }}
+            >
+                <Image src={METAMASK_IMG_SRC} width="28px" />
+                <Container marginLeft="8px" marginRight="12px">
+                    <Text fontColor={colors.white} fontSize="16px" fontWeight={500}>
+                        Get Metamask Wallet
+                    </Text>
+                </Container>
+            </Island>
+        </a>
+    );
+};
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 4c1d27598..9e9bb2e97 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -26,6 +26,7 @@ import { Identicon } from 'ts/components/ui/identicon';
 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';
@@ -196,6 +197,25 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 {_.map(loadingRowsRange, index => {
                     return <NullTokenRow />;
                 })}
+                <Container
+                    className="flex items-center"
+                    position="absolute"
+                    width="100%"
+                    height="100%"
+                    maxHeight={bodyStyle.maxHeight}
+                >
+                    <div className="mx-auto">
+                        <BodyOverlay
+                            dispatcher={this.props.dispatcher}
+                            userAddress={this.props.userAddress}
+                            injectedProviderName={this.props.injectedProviderName}
+                            providerType={this.props.providerType}
+                            onToggleLedgerDialog={this.props.onToggleLedgerDialog}
+                            blockchain={this.props.blockchain}
+                            blockchainIsLoaded={this.props.blockchainIsLoaded}
+                        />
+                    </div>
+                </Container>
             </div>
         );
     }
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index cd1f3d7bb..5c44395a3 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -565,7 +565,7 @@ export enum BrowserType {
 }
 
 export enum AccountState {
-    Unconnected = 'Unconnected',
+    Disconnected = 'Disconnected',
     Ready = 'Ready',
     Loading = 'Loading',
     Locked = 'Locked',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 5a180fdca..726e1815f 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -201,7 +201,7 @@ export const utils = {
                 return utils.getAddressBeginAndEnd(userAddress);
             case AccountState.Locked:
                 return 'Please Unlock';
-            case AccountState.Unconnected:
+            case AccountState.Disconnected:
                 return 'Connect a Wallet';
             default:
                 return '';
@@ -223,7 +223,7 @@ export const utils = {
         } else if (isExternallyInjectedProvider) {
             return AccountState.Locked;
         } else {
-            return AccountState.Unconnected;
+            return AccountState.Disconnected;
         }
     },
     hasUniqueNameAndSymbol(tokens: Token[], token: Token): boolean {