added minor polish + bug fixes

packages/instant/src/components/buy_button.tsx

@@ -132,6 +132,14 @@ export class BuyButton extends React.PureComponent<BuyButtonProps> {
                 this.props.onSignatureDenied(swapQuote);
                 return;
             }
+            // Fortmatic specific error handling
+            if (e.message && e.message.includes('Fortmatic:')) {
+                if (e.message.includes('User denied transaction.')) {
+                    analytics.trackBuySignatureDenied(swapQuote);
+                    this.props.onSignatureDenied(swapQuote);
+                    return;
+                }
+            }
             throw e;
         }
         const startTimeUnix = new Date().getTime();

packages/instant/src/components/order_details.tsx

@@ -6,7 +6,7 @@ import { oc } from 'ts-optchain';
 
 import { BIG_NUMBER_ZERO, DEFAULT_UNKOWN_ASSET_NAME } from '../constants';
 import { ColorOption } from '../style/theme';
-import {Account, AccountState, BaseCurrency} from '../types';
+import { Account, AccountState, BaseCurrency } from '../types';
 import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
@@ -45,7 +45,6 @@ export class OrderDetails extends React.PureComponent<OrderDetailsProps> {
 
     private _renderRows(): React.ReactNode {
         const { swapQuoteInfo } = this.props;
-        console.log(swapQuoteInfo);
         return (
             <React.Fragment>
                 <OrderDetailsRow

packages/instant/src/components/payment_method.tsx

@@ -1,19 +1,17 @@
 import * as React from 'react';
 
 import PhoneIconSvg from '../assets/icons/phone.svg';
-import {ColorOption} from '../style/theme';
+import { ColorOption } from '../style/theme';
-import {Account, AccountState, Network, ProviderType} from '../types';
+import { Account, AccountState, Network, ProviderType } from '../types';
-import {envUtil} from '../util/env';
+import { envUtil } from '../util/env';
 
-import {CoinbaseWalletLogo} from './coinbase_wallet_logo';
+import { CoinbaseWalletLogo } from './coinbase_wallet_logo';
-import {MetaMaskLogo} from './meta_mask_logo';
+import { MetaMaskLogo } from './meta_mask_logo';
-import {PaymentMethodDropdown} from './payment_method_dropdown';
+import { PaymentMethodDropdown } from './payment_method_dropdown';
-import {SectionHeader} from './section_header';
+import { SectionHeader } from './section_header';
-import {Circle} from './ui/circle';
+import { Container } from './ui/container';
-import {Container} from './ui/container';
+import { Flex } from './ui/flex';
-import {Flex} from './ui/flex';
+import { WalletPrompt } from './wallet_prompt';
-import {Text} from './ui/text';
-import {WalletPrompt} from './wallet_prompt';
 
 export interface PaymentMethodProps {
     account: Account;
@@ -49,23 +47,6 @@ export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
                 return 'payment method';
         }
     };
-    private readonly _renderTitleLabel = (): React.ReactNode => {
-        const { account } = this.props;
-        if (account.state === AccountState.Ready || account.state === AccountState.Locked) {
-            const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red;
-            return (
-                <Flex align="center">
-                    <Circle diameter={8} color={circleColor} />
-                    <Container marginLeft="5px">
-                        <Text fontColor={ColorOption.darkGrey} fontSize="12px" lineHeight="30px">
-                            {this.props.walletDisplayName}
-                        </Text>
-                    </Container>
-                </Flex>
-            );
-        }
-        return null;
-    };
     private readonly _renderMainContent = (): React.ReactNode => {
         const { account, network } = this.props;
         const isMobile = envUtil.isMobileOperatingSystem();
@@ -93,12 +74,12 @@ export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
                             padding="15px 18px"
                             image={
                                 <Container position="relative" display="flex">
-                                    {metamaskLogo}
+                                    {logo}
                                 </Container>
                             }
                             {...colors}
                         >
-                            Metamask
+                            {isMobile ? 'Coinbase Wallet' : 'MetaMask'}
                         </WalletPrompt>
                         <WalletPrompt
                             onClick={onUnlockFormatic}
@@ -121,7 +102,14 @@ export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
             case AccountState.None:
                 return (
                     <Flex direction="column" justify="space-between" height="100%">
-                        <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo} {...colors} fontWeight="normal" marginLeft="19px" padding="15px 18px">
+                        <WalletPrompt
+                            onClick={this.props.onInstallWalletClick}
+                            image={logo}
+                            {...colors}
+                            fontWeight="normal"
+                            marginLeft="19px"
+                            padding="15px 18px"
+                        >
                             {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'}
                         </WalletPrompt>
                         <WalletPrompt

packages/instant/src/redux/reducer.ts

@@ -119,7 +119,6 @@ export const createReducer = (initialState: State) => {
                 const newSwapQuoteIfExists = action.data;
                 const shouldUpdate =
                     newSwapQuoteIfExists === undefined || doesSwapQuoteMatchState(newSwapQuoteIfExists, state);
-                console.log('shouldUpdate', newSwapQuoteIfExists, shouldUpdate);
                 if (shouldUpdate) {
                     return {
                         ...state,
@@ -281,13 +280,9 @@ const doesSwapQuoteMatchState = (swapQuote: MarketBuySwapQuote, state: State): b
     const selectedAssetIfExists = state.selectedAsset;
     const selectedAssetUnitAmountIfExists = state.selectedAssetUnitAmount;
     // if no selectedAsset or selectedAssetAmount exists on the current state, return false
-    console.log('hmmmm?');
     if (selectedAssetIfExists === undefined || selectedAssetUnitAmountIfExists === undefined) {
         return false;
     }
-    console.log('lol wut', selectedAssetIfExists.assetData);
-    console.log(selectedAssetIfExists.assetData);
-    console.log(swapQuote.makerAssetData);
     // if swapQuote's assetData does not match that of the current selected asset, return false
     if (selectedAssetIfExists.assetData !== swapQuote.makerAssetData) {
         return false;
@@ -295,14 +290,12 @@ const doesSwapQuoteMatchState = (swapQuote: MarketBuySwapQuote, state: State): b
     // if ERC20 and swapQuote's makerAssetFillAmount does not match selectedAssetAmount, return false
     // if ERC721, return true
     const selectedAssetMetaData = selectedAssetIfExists.metaData;
-    console.log('here then');
     if (selectedAssetMetaData.assetProxyId === AssetProxyId.ERC20) {
         const selectedAssetAmountBaseUnits = Web3Wrapper.toBaseUnitAmount(
             selectedAssetUnitAmountIfExists,
             selectedAssetMetaData.decimals,
         );
         const doesAssetAmountMatch = selectedAssetAmountBaseUnits.eq(swapQuote.makerAssetFillAmount);
-        console.log('doesAssetAmountMatch', doesAssetAmountMatch);
         return doesAssetAmountMatch;
     } else {
         return true;

packages/instant/src/util/provider_state_factory.ts

@@ -100,7 +100,6 @@ export const providerStateFactory = {
         providerType: ProviderType,
     ): ProviderState => {
         let providerState = currentProviderState;
-        console.log('lets see', providerState, providerType);
         const chainId = currentProviderState.swapQuoter.chainId;
         const orderSource = currentProviderState.orderSource;
         // Returns current provider if the provider type selected is not found

packages/instant/src/util/swap_quote_updater.ts

@@ -69,7 +69,6 @@ export const swapQuoteUpdater = {
         // We have a successful new swap quote
         errorFlasher.clearError(dispatch);
         // invalidate the last swap quote.
-        console.log('newSwapQuote', newSwapQuote);
         dispatch(actions.updateLatestSwapQuote(newSwapQuote));
         analytics.trackQuoteFetched(newSwapQuote, fetchOrigin);
     },