Adds webpack config to use env var

Updates env example
Adds unlockWalletWithFormaticProvider on connect

packages/instant/.env_example

@@ -6,4 +6,5 @@ INSTANT_INFURA_PROJECT_ID_PRODUCTION=
 INSTANT_INFURA_PROJECT_ID_DEVELOPMENT=
 # if you want to report to heap or rollbar when building in development mode, you can use the following:
 # INSTANT_HEAP_FORCE_DEVELOPMENT=true
-# INSTANT_ROLLBAR_FORCE_DEVELOPMENT=true
+# INSTANT_ROLLBAR_FORCE_DEVELOPMENT=true
+INSTANT_FORTMATIC_API_KEY=

packages/instant/src/containers/connected_account_payment_method.ts

@@ -7,7 +7,8 @@ import { PaymentMethod, PaymentMethodProps } from '../components/payment_method'
 import {
     COINBASE_WALLET_ANDROID_APP_STORE_URL,
     COINBASE_WALLET_IOS_APP_STORE_URL,
-    COINBASE_WALLET_SITE_URL, FORTMATIC_API_KEY,
+    COINBASE_WALLET_SITE_URL,
+    FORTMATIC_API_KEY, LOADING_ACCOUNT,
 } from '../constants';
 import { Action, actions } from '../redux/actions';
 import { asyncData } from '../redux/async_data';
@@ -23,7 +24,6 @@ import {
 } from '../types';
 import { analytics } from '../util/analytics';
 import { envUtil } from '../util/env';
-import { providerFactory } from '../util/provider_factory';
 
 export interface ConnectedAccountPaymentMethodProps {}
 
@@ -37,6 +37,7 @@ interface ConnectedState {
 interface ConnectedDispatch {
     openInstallWalletPanel: () => void;
     unlockWalletAndDispatchToStore: (providerState: ProviderState, providerType?: ProviderType) => void;
+    unlockWalletWithFormaticProvider: (providerState: ProviderState) => void;
 }
 
 type ConnectedProps = Omit<PaymentMethodProps, keyof ConnectedAccountPaymentMethodProps>;
@@ -55,41 +56,29 @@ const mapDispatchToProps = (
     ownProps: ConnectedAccountPaymentMethodProps,
 ): ConnectedDispatch => ({
     openInstallWalletPanel: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)),
-    unlockWalletAndDispatchToStore: (providerState: ProviderState, providerType?: ProviderType) => {
+    unlockWalletAndDispatchToStore: (providerState: ProviderState) => {
         analytics.trackAccountUnlockRequested();
-        let newProviderState: ProviderState = {
+        // tslint:disable-next-line:no-floating-promises
-            ...providerState,
+        asyncData.fetchAccountInfoAndDispatchToStore(providerState, dispatch, true);
+    },
+    unlockWalletWithFormaticProvider: (providerState: ProviderState) => {
+        // Sets fortmatic as the new provider and updates the state
+        const web3Wrapper = providerState.web3Wrapper;
+        const fm = new Fortmatic(FORTMATIC_API_KEY);
+        const fmProvider = fm.getProvider();
+        web3Wrapper.setProvider(fmProvider);
+        const newProviderState = {
+            name: envUtil.getProviderName(fmProvider),
+            displayName: envUtil.getProviderDisplayName(fmProvider),
+            provider: fmProvider,
+            web3Wrapper,
+            assetBuyer: providerState.assetBuyer,
+            account: LOADING_ACCOUNT,
         };
-        // Updates the provider state based on the provider type
-        if (providerType && providerType === ProviderType.Fortmatic) {
-            const web3Wrapper = providerState.web3Wrapper;
-            const fm = new Fortmatic(FORTMATIC_API_KEY);
-            const fmProvider = fm.getProvider();
-            web3Wrapper.setProvider(fmProvider);
-            newProviderState = {
-                ...newProviderState,
-                provider: fmProvider,
-                web3Wrapper,
-                displayName: envUtil.getProviderDisplayName(fmProvider),
-                name: envUtil.getProviderName(fmProvider),
-            };
-        } else {
-            // As default uses the injected provider
-            const injected = providerFactory.getInjectedProviderIfExists();
-            const web3Wrapper = providerState.web3Wrapper;
-            if (injected) {
-                web3Wrapper.setProvider(injected);
-                newProviderState = {
-                    ...newProviderState,
-                    provider: injected,
-                    web3Wrapper,
-                    displayName: envUtil.getProviderDisplayName(injected),
-                    name: envUtil.getProviderName(injected),
-                };
-            }
-        }
         // Updates provider state
         dispatch(actions.setProviderState(newProviderState));
+        // Unlocks wallet
+        analytics.trackAccountUnlockRequested();
         // tslint:disable-next-line:no-floating-promises
         asyncData.fetchAccountInfoAndDispatchToStore(newProviderState, dispatch, true);
     },
@@ -132,6 +121,7 @@ const mergeProps = (
             window.open(url, '_blank');
         }
     },
+    onUnlockWalletWithFortmaticProvider: () => connectedDispatch.unlockWalletWithFormaticProvider(connectedState.providerState),
 });
 
 export const ConnectedAccountPaymentMethod: React.ComponentClass<ConnectedAccountPaymentMethodProps> = connect(

packages/instant/webpack.config.js

@@ -94,12 +94,15 @@ const generateConfig = (dischargeTarget, heapConfigOptions, rollbarConfigOptions
             ? process.env.INSTANT_INFURA_PROJECT_ID_PRODUCTION
             : process.env.INSTANT_INFURA_PROJECT_ID_DEVELOPMENT;
 
+    const fortmaticApiKey = process.env.INSTANT_FORTMATIC_API_KEY;
+
     const envVars = {
         GIT_SHA: JSON.stringify(GIT_SHA),
         NPM_PACKAGE_VERSION: JSON.stringify(process.env.npm_package_version),
         ROLLBAR_ENABLED: rollbarEnabled,
         HEAP_ENABLED: heapEnabled,
         INSTANT_INFURA_PROJECT_ID: JSON.stringify(infuraProjectId),
+        INSTANT_FORTMATIC_API_KEY: fortmaticApiKey,
     };
     if (dischargeTarget) {
         envVars.INSTANT_DISCHARGE_TARGET = JSON.stringify(dischargeTarget);