Adds connect to formatic button if the user does not have metamask installed

packages/instant/src/components/payment_method.tsx

@@ -23,6 +23,7 @@ export interface PaymentMethodProps {
     providerType: ProviderType | undefined;
     onInstallWalletClick: () => void;
     onUnlockWalletClick: (providerType?: ProviderType) => void;
+    onUnlockWalletWithFortmaticProvider: () => void;
 }
 
 export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
@@ -76,7 +77,7 @@ export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
         const secondaryColor = isMobile ? ColorOption.lightBlue : ColorOption.lightOrange;
         const colors = { primaryColor, secondaryColor };
         const onUnlockGenericWallet = () => this.props.onUnlockWalletClick(ProviderType.MetaMask);
-        const onUnlockFormatic = () => this.props.onUnlockWalletClick(ProviderType.Fortmatic);
+        const onUnlockFormatic = () => this.props.onUnlockWalletWithFortmaticProvider();
         switch (account.state) {
             case AccountState.Loading:
                 return null;
@@ -106,9 +107,19 @@ export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
                 );
             case AccountState.None:
                 return (
-                    <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo} {...colors}>
-                        {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'}
-                    </WalletPrompt>
+                    <Flex direction="column" justify="space-between" height="100%">
+                        <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo} {...colors}>
+                            {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'}
+                        </WalletPrompt>
+                        <WalletPrompt
+                            onClick={onUnlockFormatic}
+                            primaryColor={ColorOption.fortmaticPrimary}
+                            secondaryColor={ColorOption.fortmaticSecondary}
+                            marginTop="5px"
+                        >
+                            Connect with <Icon width={13} height={22} icon="lock" color={ColorOption.black} /> Fortmatic
+                        </WalletPrompt>
+                    </Flex>
                 );
             case AccountState.Ready:
                 return (

packages/instant/src/util/provider_state_factory.ts

@@ -1,9 +1,10 @@
 import { providerUtils } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import { SupportedProvider, ZeroExProvider } from 'ethereum-types';
+import * as Fortmatic from 'fortmatic';
 import * as _ from 'lodash';
 
-import { LOADING_ACCOUNT, NO_ACCOUNT } from '../constants';
+import {FORTMATIC_API_KEY, LOADING_ACCOUNT, NO_ACCOUNT} from '../constants';
 import { Maybe, Network, OrderSource, ProviderState } from '../types';
 import { envUtil } from '../util/env';
 
@@ -72,7 +73,18 @@ export const providerStateFactory = {
             };
             return providerState;
         } else {
-            return undefined;
+            // If there was no provider injected to the windows, uses fortmatic as default
+            const fm = new Fortmatic(FORTMATIC_API_KEY);
+            const fmProvider = fm.getProvider();
+            const providerState: ProviderState = {
+                displayName: envUtil.getProviderDisplayName(fmProvider),
+                name: envUtil.getProviderName(fmProvider),
+                provider: fmProvider,
+                web3Wrapper: new Web3Wrapper(fmProvider),
+                assetBuyer: assetBuyerFactory.getAssetBuyer(fmProvider, orderSource, network),
+                account: LOADING_ACCOUNT,
+            };
+            return providerState;
         }
     },
     getInitialProviderStateFallback: (