feat: display the correct provider type and change unlock / install prompt content

10 files changed, 110 insertions, 94 deletions

diff --git a/packages/instant/package.json b/packages/instant/package.json
index f71fe45ef..aa9157bcc 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -54,6 +54,7 @@
         "@0x/typescript-typings": "^3.0.4",
         "@0x/utils": "^2.0.4",
         "@0x/web3-wrapper": "^3.1.3",
+        "bowser": "^2.0.0-beta.3",
         "copy-to-clipboard": "^3.0.8",
         "ethereum-types": "^1.1.2",
         "lodash": "^4.17.10",
diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx
index 1fe8df807..f5a7be81c 100644
--- a/packages/instant/src/components/coinbase_wallet_logo.tsx
+++ b/packages/instant/src/components/coinbase_wallet_logo.tsx
@@ -2,11 +2,10 @@ import * as React from 'react';
 
 export interface CoinbaseWalletLogoProps {
     width?: number;
-    height?: number;
 }
 
-export const CoinbaseWalletLogo: React.StatelessComponent<CoinbaseWalletLogoProps> = ({ width, height }) => (
-    <svg width={width} height={height} viewBox="0 0 164 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const CoinbaseWalletLogo: React.StatelessComponent<CoinbaseWalletLogoProps> = ({ width }) => (
+    <svg width={width} viewBox="0 0 164 28" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             fillRule="evenodd"
             clipRule="evenodd"
@@ -30,5 +29,4 @@ CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo';
 
 CoinbaseWalletLogo.defaultProps = {
     width: 164,
-    height: 28,
 };
diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx
index 6cddb81f5..0700e9051 100644
--- a/packages/instant/src/components/install_wallet_panel_content.tsx
+++ b/packages/instant/src/components/install_wallet_panel_content.tsx
@@ -48,7 +48,7 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
                     break;
             }
             return {
-                image: <CoinbaseWalletLogo width={246} height={42} />,
+                image: <CoinbaseWalletLogo width={246} />,
                 description,
                 moreInfoSettings: {
                     href: COINBASE_WALLET_SITE_URL,
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 49ec22164..0f9f3ebfa 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -3,7 +3,9 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 import { Account, AccountState, Network } from '../types';
+import { envUtil } from '../util/env';
 
+import { CoinbaseWalletLogo } from './coinbase_wallet_logo';
 import { MetaMaskLogo } from './meta_mask_logo';
 import { PaymentMethodDropdown } from './payment_method_dropdown';
 import { Circle } from './ui/circle';
@@ -11,10 +13,12 @@ import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 import { Icon } from './ui/icon';
 import { Text } from './ui/text';
+import { WalletPrompt } from './wallet_prompt';
 
 export interface PaymentMethodProps {
     account: Account;
     network: Network;
+    walletName: string;
     onInstallWalletClick: () => void;
     onUnlockWalletClick: () => void;
 }
@@ -62,7 +66,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
                     <Circle diameter={8} color={circleColor} />
                     <Container marginLeft="3px">
                         <Text fontColor={ColorOption.darkGrey} fontSize="12px">
-                            MetaMask
+                            {this.props.walletName}
                         </Text>
                     </Container>
                 </React.Fragment>
@@ -72,6 +76,9 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
     };
     private readonly _renderMainContent = (): React.ReactNode => {
         const { account, network } = this.props;
+        const isMobile = envUtil.isMobileOperatingSystem();
+        // TODO: Use Toshi logo
+        const logo = isMobile ? undefined : <MetaMaskLogo width={19} height={18} />;
         switch (account.state) {
             case AccountState.Loading:
                 // Just take up the same amount of space as the other states.
@@ -82,16 +89,13 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
                         onClick={this.props.onUnlockWalletClick}
                         image={<Icon width={13} icon="lock" color={ColorOption.black} />}
                     >
-                        Please Unlock MetaMask
+                        Please Unlock {this.props.walletName}
                     </WalletPrompt>
                 );
             case AccountState.None:
                 return (
-                    <WalletPrompt
-                        onClick={this.props.onInstallWalletClick}
-                        image={<MetaMaskLogo width={19} height={18} />}
-                    >
-                        Install MetaMask
+                    <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo}>
+                        {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'}
                     </WalletPrompt>
                 );
             case AccountState.Ready:
@@ -105,28 +109,3 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
         }
     };
 }
-
-interface WalletPromptProps {
-    image: React.ReactNode;
-    onClick?: () => void;
-}
-
-const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, image, children }) => (
-    <Container
-        padding="14.5px"
-        border={`1px solid ${ColorOption.darkOrange}`}
-        backgroundColor={ColorOption.lightOrange}
-        width="100%"
-        borderRadius="4px"
-        onClick={onClick}
-        cursor={onClick ? 'pointer' : undefined}
-        boxShadowOnHover={!!onClick}
-    >
-        <Flex>
-            <Container marginRight="10px">{image}</Container>
-            <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
-                {children}
-            </Text>
-        </Flex>
-    </Container>
-);
diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx
new file mode 100644
index 000000000..cd0a7828b
--- /dev/null
+++ b/packages/instant/src/components/wallet_prompt.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
+
+export interface WalletPromptProps {
+    image: React.ReactNode;
+    onClick?: () => void;
+}
+
+export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, image, children }) => (
+    <Container
+        padding="14.5px"
+        border={`1px solid ${ColorOption.darkOrange}`}
+        backgroundColor={ColorOption.lightOrange}
+        width="100%"
+        borderRadius="4px"
+        onClick={onClick}
+        cursor={onClick ? 'pointer' : undefined}
+        boxShadowOnHover={!!onClick}
+    >
+        <Flex>
+            <Container marginRight="10px">{image}</Container>
+            <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
+                {children}
+            </Text>
+        </Flex>
+    </Container>
+);
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index 65b3710a6..69c2ddf19 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -47,6 +47,7 @@ const mergeProps = (
     network: connectedState.network,
     account: connectedState.providerState.account,
     onInstallWalletClick: connectedDispatch.onInstallWalletClick,
+    walletName: connectedState.providerState.name,
     onUnlockWalletClick: () => {
         connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState);
     },
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index e2ba9238a..cbb1e2caf 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -95,6 +95,7 @@ export interface AffiliateInfo {
 }
 
 export interface ProviderState {
+    name: string;
     provider: Provider;
     assetBuyer: AssetBuyer;
     web3Wrapper: Web3Wrapper;
@@ -156,3 +157,11 @@ export enum OperatingSystem {
     Linux = 'Linux',
     Other = 'Other',
 }
+
+export enum ProviderType {
+    Parity = 'Parity',
+    MetaMask = 'MetaMask',
+    Mist = 'Mist',
+    CoinbaseWallet = 'Coinbase Wallet',
+    Cipher = 'Cipher',
+}
diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts
index 038ec6c88..448ad5262 100644
--- a/packages/instant/src/util/env.ts
+++ b/packages/instant/src/util/env.ts
@@ -1,6 +1,8 @@
 import * as bowser from 'bowser';
+import { Provider } from 'ethereum-types';
+import * as _ from 'lodash';
 
-import { Browser, OperatingSystem } from '../types';
+import { Browser, OperatingSystem, ProviderType } from '../types';
 
 export const envUtil = {
     getBrowser(): Browser {
@@ -19,24 +21,47 @@ export const envUtil = {
         }
     },
     isMobileOperatingSystem(): boolean {
-        return true;
+        return bowser.mobile;
     },
     getOperatingSystem(): OperatingSystem {
-        return OperatingSystem.iOS;
-        // if (bowser.android) {
-        //     return OperatingSystem.Android;
-        // } else if (bowser.ios) {
-        //     return OperatingSystem.iOS;
-        // } else if (bowser.mac) {
-        //     return OperatingSystem.Mac;
-        // } else if (bowser.windows) {
-        //     return OperatingSystem.Windows;
-        // } else if (bowser.windowsphone) {
-        //     return OperatingSystem.WindowsPhone;
-        // } else if (bowser.linux) {
-        //     return OperatingSystem.Linux;
-        // } else {
-        //     return OperatingSystem.Other;
-        // }
+        if (bowser.android) {
+            return OperatingSystem.Android;
+        } else if (bowser.ios) {
+            return OperatingSystem.iOS;
+        } else if (bowser.mac) {
+            return OperatingSystem.Mac;
+        } else if (bowser.windows) {
+            return OperatingSystem.Windows;
+        } else if (bowser.windowsphone) {
+            return OperatingSystem.WindowsPhone;
+        } else if (bowser.linux) {
+            return OperatingSystem.Linux;
+        } else {
+            return OperatingSystem.Other;
+        }
+    },
+    getProviderName(provider: Provider): ProviderType | string {
+        const constructorName = provider.constructor.name;
+        let parsedProviderName = constructorName;
+        // https://ethereum.stackexchange.com/questions/24266/elegant-way-to-detect-current-provider-int-web3-js
+        switch (constructorName) {
+            case 'EthereumProvider':
+                parsedProviderName = ProviderType.Mist;
+                break;
+
+            default:
+                parsedProviderName = constructorName;
+                break;
+        }
+        if ((provider as any).isParity) {
+            parsedProviderName = ProviderType.Parity;
+        } else if ((provider as any).isMetaMask) {
+            parsedProviderName = ProviderType.MetaMask;
+        } else if (!_.isUndefined(_.get(window, 'SOFA'))) {
+            parsedProviderName = ProviderType.CoinbaseWallet;
+        } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) {
+            parsedProviderName = ProviderType.Cipher;
+        }
+        return parsedProviderName;
     },
 };
diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts
index 3281f6bfb..452a71460 100644
--- a/packages/instant/src/util/provider_state_factory.ts
+++ b/packages/instant/src/util/provider_state_factory.ts
@@ -4,6 +4,7 @@ import * as _ from 'lodash';
 
 import { LOADING_ACCOUNT, NO_ACCOUNT } from '../constants';
 import { Maybe, Network, OrderSource, ProviderState } from '../types';
+import { envUtil } from '../util/env';
 
 import { assetBuyerFactory } from './asset_buyer_factory';
 import { providerFactory } from './provider_factory';
@@ -29,6 +30,7 @@ export const providerStateFactory = {
         provider: Provider,
     ): ProviderState => {
         const providerState: ProviderState = {
+            name: envUtil.getProviderName(provider),
             provider,
             web3Wrapper: new Web3Wrapper(provider),
             assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
@@ -40,6 +42,7 @@ export const providerStateFactory = {
         const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists();
         if (!_.isUndefined(injectedProviderIfExists)) {
             const providerState: ProviderState = {
+                name: envUtil.getProviderName(injectedProviderIfExists),
                 provider: injectedProviderIfExists,
                 web3Wrapper: new Web3Wrapper(injectedProviderIfExists),
                 assetBuyer: assetBuyerFactory.getAssetBuyer(injectedProviderIfExists, orderSource, network),
@@ -53,6 +56,7 @@ export const providerStateFactory = {
     getInitialProviderStateFallback: (orderSource: OrderSource, network: Network): ProviderState => {
         const provider = providerFactory.getFallbackNoSigningProvider(network);
         const providerState: ProviderState = {
+            name: envUtil.getProviderName(provider),
             provider,
             web3Wrapper: new Web3Wrapper(provider),
             assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
diff --git a/yarn.lock b/yarn.lock
index 928326e00..2a44c7c80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1906,10 +1906,6 @@ aes-js@^0.2.3:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d"
 
-aes-js@^3.1.1:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a"
-
 agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
@@ -3201,6 +3197,10 @@ bowser@^1.7.3, bowser@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.3.tgz#6643ae4d783f31683f6d23156976b74183862162"
 
+bowser@^2.0.0-beta.3:
+  version "2.0.0-beta.3"
+  resolved "https://registry.npmjs.org/bowser/-/bowser-2.0.0-beta.3.tgz#1b74d4fd69199aa237bc0f1f4c5e80df711635d8"
+
 boxen@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@@ -3347,7 +3347,7 @@ bs-logger@0.x:
   dependencies:
     fast-json-stable-stringify "^2.0.0"
 
-bs58@=4.0.1, bs58@^4.0.0:
+bs58@=4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
   dependencies:
@@ -3370,14 +3370,6 @@ bs58check@^1.0.8:
     bs58 "^3.1.0"
     create-hash "^1.1.0"
 
-bs58check@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
-  dependencies:
-    bs58 "^4.0.0"
-    create-hash "^1.1.0"
-    safe-buffer "^5.1.2"
-
 bser@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
@@ -5965,19 +5957,6 @@ ethereumjs-wallet@0.6.0:
     utf8 "^2.1.1"
     uuid "^2.0.1"
 
-ethereumjs-wallet@~0.6.0:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda"
-  dependencies:
-    aes-js "^3.1.1"
-    bs58check "^2.1.2"
-    ethereumjs-util "^5.2.0"
-    hdkey "^1.0.0"
-    safe-buffer "^5.1.2"
-    scrypt.js "^0.2.0"
-    utf8 "^3.0.0"
-    uuid "^3.3.2"
-
 ethers@~4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.4.tgz#d3f85e8b27f4b59537e06526439b0fb15b44dc65"
@@ -6786,7 +6765,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep:
     ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default"
     ethereumjs-util "^5.2.0"
     ethereumjs-vm "2.3.5"
-    ethereumjs-wallet "0.6.0"
+    ethereumjs-wallet "~0.6.0"
     fake-merkle-patricia-tree "~1.0.1"
     heap "~0.2.6"
     js-scrypt "^0.2.0"
@@ -7511,14 +7490,6 @@ hdkey@^0.7.0, hdkey@^0.7.1:
     coinstring "^2.0.0"
     secp256k1 "^3.0.1"
 
-hdkey@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29"
-  dependencies:
-    coinstring "^2.0.0"
-    safe-buffer "^5.1.1"
-    secp256k1 "^3.0.1"
-
 he@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@@ -15605,10 +15576,6 @@ utf8@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96"
 
-utf8@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
-
 util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"