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

2 files changed, 47 insertions, 18 deletions

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),