Merge pull request #1266 from 0xProject/feature/instant/fix-mobile-specific-content

[instant] Fix mobile specific content

1 files changed, 29 insertions, 6 deletions

diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index 69c2ddf19..eacbadfca 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -3,10 +3,16 @@ import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
 import { PaymentMethod, PaymentMethodProps } from '../components/payment_method';
+import {
+    COINBASE_WALLET_ANDROID_APP_STORE_URL,
+    COINBASE_WALLET_IOS_APP_STORE_URL,
+    COINBASE_WALLET_SITE_URL,
+} from '../constants';
 import { Action, actions } from '../redux/actions';
 import { asyncData } from '../redux/async_data';
 import { State } from '../redux/reducer';
-import { Network, Omit, ProviderState, StandardSlidingPanelContent } from '../types';
+import { Network, Omit, OperatingSystem, ProviderState, StandardSlidingPanelContent } from '../types';
+import { envUtil } from '../util/env';
 
 export interface ConnectedAccountPaymentMethodProps {}
 
@@ -16,7 +22,7 @@ interface ConnectedState {
 }
 
 interface ConnectedDispatch {
-    onInstallWalletClick: () => void;
+    openInstallWalletPanel: () => void;
     unlockWalletAndDispatchToStore: (providerState: ProviderState) => void;
 }
 
@@ -33,7 +39,7 @@ const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
     ownProps: ConnectedAccountPaymentMethodProps,
 ): ConnectedDispatch => ({
-    onInstallWalletClick: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)),
+    openInstallWalletPanel: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)),
     unlockWalletAndDispatchToStore: async (providerState: ProviderState) =>
         asyncData.fetchAccountInfoAndDispatchToStore(providerState, dispatch, true),
 });
@@ -46,10 +52,27 @@ const mergeProps = (
     ...ownProps,
     network: connectedState.network,
     account: connectedState.providerState.account,
-    onInstallWalletClick: connectedDispatch.onInstallWalletClick,
     walletName: connectedState.providerState.name,
-    onUnlockWalletClick: () => {
-        connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState);
+    onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
+    onInstallWalletClick: () => {
+        const isMobile = envUtil.isMobileOperatingSystem();
+        if (!isMobile) {
+            connectedDispatch.openInstallWalletPanel();
+            return;
+        }
+        const operatingSystem = envUtil.getOperatingSystem();
+        let url = COINBASE_WALLET_SITE_URL;
+        switch (operatingSystem) {
+            case OperatingSystem.Android:
+                url = COINBASE_WALLET_ANDROID_APP_STORE_URL;
+                break;
+            case OperatingSystem.iOS:
+                url = COINBASE_WALLET_IOS_APP_STORE_URL;
+                break;
+            default:
+                break;
+        }
+        window.open(url, '_blank');
     },
 });