Merge pull request #1404 from 0xProject/feature/instant/better-provider-fallback

[instant] Refactor provider name and provider display name logic, log the display name

6 files changed, 40 insertions, 6 deletions

diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 7ae27de23..204115fa9 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -38,6 +38,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             props.orderSource,
             networkId,
             props.provider,
+            props.walletDisplayName,
         );
         // merge the additional additionalAssetMetaDataMap with our default map
         const completeAssetMetaDataMap = {
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index bb68fdd57..f648f0b54 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -58,7 +58,7 @@ const mergeProps = (
     ...ownProps,
     network: connectedState.network,
     account: connectedState.providerState.account,
-    walletDisplayName: connectedState.walletDisplayName || connectedState.providerState.name,
+    walletDisplayName: connectedState.providerState.displayName,
     onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
     onInstallWalletClick: () => {
         const isMobile = envUtil.isMobileOperatingSystem();
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index e65961e95..1c7490e63 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -102,6 +102,7 @@ export interface AffiliateInfo {
 
 export interface ProviderState {
     name: string;
+    displayName: string;
     provider: Provider;
     assetBuyer: AssetBuyer;
     web3Wrapper: Web3Wrapper;
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index 6da52db16..e6128f857 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -106,6 +106,7 @@ export interface AnalyticsEventOptions {
     ethAddress?: string;
     networkId?: number;
     providerName?: string;
+    providerDisplayName?: string;
     gitSha?: string;
     npmVersion?: string;
     instantEnvironment?: string;
@@ -149,6 +150,7 @@ export const analytics = {
             embeddedUrl: window.location.href,
             networkId: network,
             providerName: providerState.name,
+            providerDisplayName: providerState.displayName,
             gitSha: GIT_SHA,
             npmVersion: NPM_PACKAGE_VERSION,
             orderSource: orderSourceName,
diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts
index 4a32f9cb1..0fda0cc0e 100644
--- a/packages/instant/src/util/env.ts
+++ b/packages/instant/src/util/env.ts
@@ -62,4 +62,11 @@ export const envUtil = {
         }
         return PROVIDER_TYPE_TO_NAME[providerTypeIfExists];
     },
+    getProviderDisplayName(provider: Provider): string {
+        const providerTypeIfExists = envUtil.getProviderType(provider);
+        if (_.isUndefined(providerTypeIfExists)) {
+            return 'Wallet';
+        }
+        return PROVIDER_TYPE_TO_NAME[providerTypeIfExists];
+    },
 };
diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts
index 7c788dff2..bd2d6dad5 100644
--- a/packages/instant/src/util/provider_state_factory.ts
+++ b/packages/instant/src/util/provider_state_factory.ts
@@ -10,27 +10,40 @@ import { assetBuyerFactory } from './asset_buyer_factory';
 import { providerFactory } from './provider_factory';
 
 export const providerStateFactory = {
-    getInitialProviderState: (orderSource: OrderSource, network: Network, provider?: Provider): ProviderState => {
+    getInitialProviderState: (
+        orderSource: OrderSource,
+        network: Network,
+        provider?: Provider,
+        walletDisplayName?: string,
+    ): ProviderState => {
         if (!_.isUndefined(provider)) {
-            return providerStateFactory.getInitialProviderStateFromProvider(orderSource, network, provider);
+            return providerStateFactory.getInitialProviderStateFromProvider(
+                orderSource,
+                network,
+                provider,
+                walletDisplayName,
+            );
         }
         const providerStateFromWindowIfExits = providerStateFactory.getInitialProviderStateFromWindowIfExists(
             orderSource,
             network,
+            walletDisplayName,
         );
         if (providerStateFromWindowIfExits) {
             return providerStateFromWindowIfExits;
         } else {
-            return providerStateFactory.getInitialProviderStateFallback(orderSource, network);
+            return providerStateFactory.getInitialProviderStateFallback(orderSource, network, walletDisplayName);
         }
     },
     getInitialProviderStateFromProvider: (
         orderSource: OrderSource,
         network: Network,
         provider: Provider,
+        walletDisplayName?: string,
     ): ProviderState => {
         const providerState: ProviderState = {
             name: envUtil.getProviderName(provider),
+            displayName: walletDisplayName || envUtil.getProviderDisplayName(provider),
             provider,
             web3Wrapper: new Web3Wrapper(provider),
             assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
@@ -38,11 +51,16 @@ export const providerStateFactory = {
         };
         return providerState;
     },
-    getInitialProviderStateFromWindowIfExists: (orderSource: OrderSource, network: Network): Maybe<ProviderState> => {
+    getInitialProviderStateFromWindowIfExists: (
+        orderSource: OrderSource,
+        network: Network,
+        walletDisplayName?: string,
+    ): Maybe<ProviderState> => {
         const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists();
         if (!_.isUndefined(injectedProviderIfExists)) {
             const providerState: ProviderState = {
                 name: envUtil.getProviderName(injectedProviderIfExists),
+                displayName: walletDisplayName || envUtil.getProviderDisplayName(injectedProviderIfExists),
                 provider: injectedProviderIfExists,
                 web3Wrapper: new Web3Wrapper(injectedProviderIfExists),
                 assetBuyer: assetBuyerFactory.getAssetBuyer(injectedProviderIfExists, orderSource, network),
@@ -53,10 +71,15 @@ export const providerStateFactory = {
             return undefined;
         }
     },
-    getInitialProviderStateFallback: (orderSource: OrderSource, network: Network): ProviderState => {
+    getInitialProviderStateFallback: (
+        orderSource: OrderSource,
+        network: Network,
+        walletDisplayName?: string,
+    ): ProviderState => {
         const provider = providerFactory.getFallbackNoSigningProvider(network);
         const providerState: ProviderState = {
             name: 'Fallback',
+            displayName: walletDisplayName || envUtil.getProviderDisplayName(provider),
             provider,
             web3Wrapper: new Web3Wrapper(provider),
             assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),