Merge pull request #806 from 0xProject/feature/website/mobile-readable-web3-names

Add detection logic for Toshi and Cipher

4 files changed, 11 insertions, 0 deletions

diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index d18c34c32..b59306974 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -73,6 +73,8 @@ const providerToName: { [provider: string]: string } = {
     [Providers.Metamask]: constants.PROVIDER_NAME_METAMASK,
     [Providers.Parity]: constants.PROVIDER_NAME_PARITY_SIGNER,
     [Providers.Mist]: constants.PROVIDER_NAME_MIST,
+    [Providers.Toshi]: constants.PROVIDER_NAME_TOSHI,
+    [Providers.Cipher]: constants.PROVIDER_NAME_CIPHER,
 };
 
 export class Blockchain {
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 498a0a5b8..2e4cf84d0 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -487,6 +487,8 @@ export enum Providers {
     Parity = 'PARITY',
     Metamask = 'METAMASK',
     Mist = 'MIST',
+    Toshi = 'TOSHI',
+    Cipher = 'CIPHER',
 }
 
 export interface InjectedProviderUpdate {
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 71c0092d2..0c4b88780 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -29,6 +29,8 @@ export const constants = {
     PROVIDER_NAME_METAMASK: 'MetaMask',
     PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer',
     PROVIDER_NAME_MIST: 'Mist',
+    PROVIDER_NAME_CIPHER: 'Cipher Browser',
+    PROVIDER_NAME_TOSHI: 'Toshi',
     PROVIDER_NAME_GENERIC: 'Injected Web3',
     PROVIDER_NAME_PUBLIC: '0x Public',
     ROLLBAR_ACCESS_TOKEN: 'a6619002b51c4464928201e6ea94de65',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index b27c6e48b..fc7901463 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -326,6 +326,7 @@ export const utils = {
     getProviderType(provider: Provider): Providers | 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 = Providers.Mist;
@@ -339,6 +340,10 @@ export const utils = {
             parsedProviderName = Providers.Parity;
         } else if ((provider as any).isMetaMask) {
             parsedProviderName = Providers.Metamask;
+        } else if (!_.isUndefined(_.get(window, 'SOFA'))) {
+            parsedProviderName = Providers.Toshi;
+        } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) {
+            parsedProviderName = Providers.Cipher;
         }
         return parsedProviderName;
     },