From 7ee37fb62af7014f8a2aae435458302887781be0 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 27 Jun 2018 14:17:58 -0700
Subject: Implement new locked and uninstalled states

---
 .../website/ts/components/wallet/body_overlay.tsx  | 147 +++++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 packages/website/ts/components/wallet/body_overlay.tsx

(limited to 'packages/website/ts/components/wallet/body_overlay.tsx')

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>
+    );
+};
-- 
cgit v1.2.3


From 1a11283086d0c95e10f40dfe3f826bc04889dbcb Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 27 Jun 2018 16:23:37 -0700
Subject: Fix body overlay on mobile

---
 packages/website/ts/components/wallet/body_overlay.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages/website/ts/components/wallet/body_overlay.tsx')

diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx
index 8f8899a92..38820c840 100644
--- a/packages/website/ts/components/wallet/body_overlay.tsx
+++ b/packages/website/ts/components/wallet/body_overlay.tsx
@@ -83,7 +83,6 @@ const PlainLockedOverlay: React.StatelessComponent<LockedOverlayProps> = ({
 const LockedOverlay = styled(PlainLockedOverlay)`
     background: rgba(255, 248, 242, 0.8);
     border: 1px solid #f68c24;
-    box-sizing: border-box;
     border-radius: 10px;
 `;
 
-- 
cgit v1.2.3


From 67007455851630d05b9c07108a3e545724e07690 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 27 Jun 2018 16:33:09 -0700
Subject: Fix typo

---
 packages/website/ts/components/wallet/body_overlay.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components/wallet/body_overlay.tsx')

diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx
index 38820c840..41e64de8b 100644
--- a/packages/website/ts/components/wallet/body_overlay.tsx
+++ b/packages/website/ts/components/wallet/body_overlay.tsx
@@ -137,7 +137,7 @@ const GetMetaMask = () => {
                 <Image src={METAMASK_IMG_SRC} width="28px" />
                 <Container marginLeft="8px" marginRight="12px">
                     <Text fontColor={colors.white} fontSize="16px" fontWeight={500}>
-                        Get Metamask Wallet
+                        Get MetaMask Wallet
                     </Text>
                 </Container>
             </Island>
-- 
cgit v1.2.3


From 0b5a49c17dde87130a659e4101bd6e2f5666b9c7 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 28 Jun 2018 23:31:17 -0700
Subject: Remove some hardcoded MetaMask colors

---
 packages/website/ts/components/wallet/body_overlay.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/components/wallet/body_overlay.tsx')

diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx
index 41e64de8b..5ced704f9 100644
--- a/packages/website/ts/components/wallet/body_overlay.tsx
+++ b/packages/website/ts/components/wallet/body_overlay.tsx
@@ -72,7 +72,7 @@ const PlainLockedOverlay: React.StatelessComponent<LockedOverlayProps> = ({
         >
             <Image src={METAMASK_IMG_SRC} height="70px" />
             <Container marginTop="12px">
-                <Text fontColor="#F68C24" fontSize="16px" fontWeight="bold">
+                <Text fontColor={colors.metaMaskOrange} fontSize="16px" fontWeight="bold">
                     Please Unlock MetaMask
                 </Text>
             </Container>
@@ -81,8 +81,8 @@ const PlainLockedOverlay: React.StatelessComponent<LockedOverlayProps> = ({
     </div>
 );
 const LockedOverlay = styled(PlainLockedOverlay)`
-    background: rgba(255, 248, 242, 0.8);
-    border: 1px solid #f68c24;
+    background: ${colors.metaMaskTransparentOrange};
+    border: 1px solid ${colors.metaMaskOrange};
     border-radius: 10px;
 `;
 
-- 
cgit v1.2.3