incomplete, fixes for heartbeater

packages/instant/src/components/coinbase_wallet_logo.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 
 export interface CoinbaseWalletLogoProps {
     width?: number;
+    height?: number;
 }
 
-export const CoinbaseWalletLogo: React.StatelessComponent<CoinbaseWalletLogoProps> = ({ width }) => (
-    <svg width={width} viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const CoinbaseWalletLogo: React.StatelessComponent<CoinbaseWalletLogoProps> = ({ width, height }) => (
+    <svg width={width} height={height} viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
         <circle cx="25.5" cy="25.5" r="25.5" fill="#3263E9" />
         <path
             fillRule="evenodd"
@@ -20,4 +21,5 @@ CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo';
 
 CoinbaseWalletLogo.defaultProps = {
     width: 164,
+    height: 164,
 };

packages/instant/src/components/payment_method.tsx

@@ -51,7 +51,7 @@ export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
         const { account, network } = this.props;
         const isMobile = envUtil.isMobileOperatingSystem();
         const metamaskLogo = <MetaMaskLogo width={23} height={22} />;
-        const logo = isMobile ? <CoinbaseWalletLogo width={22} /> : metamaskLogo;
+        const logo = isMobile ? <CoinbaseWalletLogo width={22} height={22} /> : metamaskLogo;
         const primaryColor = ColorOption.grey;
         const secondaryColor = ColorOption.whiteBackground;
         const colors = { primaryColor, secondaryColor };

packages/instant/src/redux/actions.ts

@@ -30,6 +30,7 @@ export enum ActionTypes {
     SetAccountStateLoading = 'SET_ACCOUNT_STATE_LOADING',
     SetAccountStateLocked = 'SET_ACCOUNT_STATE_LOCKED',
     SetAccountStateReady = 'SET_ACCOUNT_STATE_READY',
+    SetAccountStateNone = 'SET_ACCOUNT_STATE_NONE',
     UpdateAccountEthBalance = 'UPDATE_ACCOUNT_ETH_BALANCE',
     UpdateEthUsdPrice = 'UPDATE_ETH_USD_PRICE',
     UpdateSelectedAssetUnitAmount = 'UPDATE_SELECTED_ASSET_UNIT_AMOUNT',
@@ -56,6 +57,7 @@ export enum ActionTypes {
 export const actions = {
     setAccountStateLoading: () => createAction(ActionTypes.SetAccountStateLoading),
     setAccountStateLocked: () => createAction(ActionTypes.SetAccountStateLocked),
+    setAccountStateNone: () => createAction(ActionTypes.SetAccountStateNone),
     setAccountStateReady: (address: string) => createAction(ActionTypes.SetAccountStateReady, address),
     updateAccountEthBalance: (addressAndBalance: AddressAndEthBalanceInWei) =>
         createAction(ActionTypes.UpdateAccountEthBalance, addressAndBalance),

packages/instant/src/redux/async_data.ts

@@ -66,6 +66,7 @@ export const asyncData = {
         if (shouldSetToLoading && providerState.account.state !== AccountState.Loading) {
             dispatch(actions.setAccountStateLoading());
         }
+        console.log('providerState', providerState);
         let availableAddresses: string[] = [];
         try {
             // TODO(bmillman): Add support at the web3Wrapper level for calling `eth_requestAccounts` instead of calling enable here
@@ -80,7 +81,11 @@ export const asyncData = {
             }
         } catch (e) {
             analytics.trackAccountUnlockDenied();
-            dispatch(actions.setAccountStateLocked());
+            if (e.message.includes('Fortmatic: User denied account access.')) {
+                dispatch(actions.setAccountStateNone());
+            } else {
+                dispatch(actions.setAccountStateLocked());
+            }
             return;
         }
         if (!_.isEmpty(availableAddresses)) {

packages/instant/src/redux/reducer.ts

@@ -4,7 +4,7 @@ import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
-import { LOADING_ACCOUNT, LOCKED_ACCOUNT } from '../constants';
+import { LOADING_ACCOUNT, LOCKED_ACCOUNT, NO_ACCOUNT } from '../constants';
 import { assetMetaDataMap } from '../data/asset_meta_data_map';
 import {
     Account,
@@ -77,6 +77,8 @@ export const createReducer = (initialState: State) => {
                 return reduceStateWithAccount(state, LOADING_ACCOUNT);
             case ActionTypes.SetAccountStateLocked:
                 return reduceStateWithAccount(state, LOCKED_ACCOUNT);
+            case ActionTypes.SetAccountStateNone:
+                return reduceStateWithAccount(state, NO_ACCOUNT);
             case ActionTypes.SetAccountStateReady: {
                 const address = action.data;
                 let newAccount: AccountReady = {

packages/instant/src/types.ts

@@ -118,7 +118,7 @@ export interface ProviderState {
 }
 
 export enum AccountState {
-    None = 'NONE,',
+    None = 'NONE',
     Loading = 'LOADING',
     Ready = 'READY',
     Locked = 'LOCKED',

packages/instant/src/util/heartbeater_factory.ts

@@ -11,6 +11,7 @@ export interface HeartbeatFactoryOptions {
 export const generateAccountHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
     const { store, shouldPerformImmediatelyOnStart } = options;
     return new Heartbeater(async () => {
+        console.log('beat');
         await asyncData.fetchAccountInfoAndDispatchToStore(store.getState().providerState, store.dispatch, false);
     }, shouldPerformImmediatelyOnStart);
 };

packages/instant/src/util/provider_state_factory.ts

@@ -83,6 +83,7 @@ export const providerStateFactory = {
         walletDisplayName?: string,
     ): ProviderState => {
         const provider = providerFactory.getFallbackNoSigningProvider(network);
+        console.log(walletDisplayName, envUtil.getProviderDisplayName(provider));
         const providerState: ProviderState = {
             name: 'Fallback',
             displayName: walletDisplayName || envUtil.getProviderDisplayName(provider),
@@ -99,14 +100,13 @@ export const providerStateFactory = {
         currentProviderState: ProviderState,
         providerType: ProviderType,
     ): ProviderState => {
-        let providerState = currentProviderState;
         const chainId = currentProviderState.swapQuoter.chainId;
         const orderSource = currentProviderState.orderSource;
         // Returns current provider if the provider type selected is not found
         if (providerType === ProviderType.MetaMask) {
             const provider = providerFactory.getInjectedProviderIfExists();
             if (provider) {
-                providerState = {
+                return {
                     displayName: envUtil.getProviderDisplayName(provider),
                     name: envUtil.getProviderName(provider),
                     provider,
@@ -121,7 +121,7 @@ export const providerStateFactory = {
         if (providerType === ProviderType.Fortmatic) {
             const fm = new Fortmatic(FORTMATIC_API_KEY);
             const fmProvider = fm.getProvider();
-            providerState = {
+            return {
                 displayName: envUtil.getProviderDisplayName(fmProvider),
                 name: envUtil.getProviderName(fmProvider),
                 provider: fmProvider,
@@ -132,6 +132,9 @@ export const providerStateFactory = {
                 orderSource,
             };
         }
-        return providerState;
+        return providerStateFactory.getInitialProviderState(
+            orderSource,
+            chainId,
+        );
     },
 };