feat: remove fortmatic (#4167)

* rm fortmatic (wip for test)

* remove isChainAllowed

* handle unexpected connector

* clear on catch

* Revert "remove isChainAllowed"

This reverts commit d505cac39a446cb2c273016d03896469ba39eb60.

* fix to actually use ALLOWED_CHAIN_IDS

* fix

package.json

@@ -181,7 +181,6 @@
     "ethers": "^5.1.4",
     "firebase": "^9.1.3",
     "focus-visible": "^5.2.0",
-    "fortmatic": "^2.4.0",
     "graphql": "^16.5.0",
     "graphql-request": "^3.4.0",
     "immer": "^9.0.6",

public/index.html

@@ -16,7 +16,6 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="theme-color" content="#ff007a" />
-    <meta name="fortmatic-site-verification" content="j93LgcVZk79qcgyo" />
 
     <!--
       manifest.json provides metadata used when the app is installed as a PWA.

src/components/Header/NetworkSelector.tsx

@@ -281,7 +281,7 @@ const NETWORK_SELECTOR_CHAINS = [
 ]
 
 export default function NetworkSelector() {
-  const { chainId, provider, connector } = useWeb3React()
+  const { chainId, provider } = useWeb3React()
 
   const node = useRef<HTMLDivElement>(null)
   const isOpen = useModalIsOpen(ApplicationModal.NETWORK_SELECTOR)
@@ -329,7 +329,7 @@ export default function NetworkSelector() {
               <Trans>Select a {!onSupportedChain ? ' supported ' : ''}network</Trans>
             </FlyoutHeader>
             {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) =>
-              isChainAllowed(connector, chainId) ? (
+              isChainAllowed(chainId) ? (
                 <Row
                   onSelectChain={async (targetChainId: SupportedChainId) => {
                     await selectChain(targetChainId)

src/components/Identicon/StatusIcon.tsx

@@ -2,7 +2,6 @@ import { ConnectionType } from 'connection'
 import styled from 'styled-components/macro'
 
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
-import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
 import Identicon from '../Identicon'
 
@@ -33,9 +32,6 @@ export default function StatusIcon({ connectionType, size }: { connectionType: C
     case ConnectionType.COINBASE_WALLET:
       image = <img src={CoinbaseWalletIcon} alt="Coinbase Wallet" />
       break
-    case ConnectionType.FORTMATIC:
-      image = <img src={FortmaticIcon} alt="Fortmatic" />
-      break
   }
 
   return <IconWrapper size={size ?? 16}>{image}</IconWrapper>

src/components/NavBar/ChainSwitcher.tsx

@@ -57,7 +57,7 @@ interface ChainSwitcherProps {
 }
 
 export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
-  const { chainId, connector } = useWeb3React()
+  const { chainId } = useWeb3React()
   const [isOpen, toggleOpen] = useReducer((s) => !s, false)
 
   const ref = useRef<HTMLDivElement>(null)
@@ -89,7 +89,7 @@ export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
         <NavDropdown top={60} leftAligned={isMobile}>
           <Column gap="4">
             {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) =>
-              isChainAllowed(connector, chainId) ? (
+              isChainAllowed(chainId) ? (
                 <ChainRow
                   onSelectChain={async (targetChainId: SupportedChainId) => {
                     await selectChain(targetChainId)

src/components/WalletModal/FortmaticOption.tsx

@@ -1,24 +0,0 @@
-import { Connector } from '@web3-react/types'
-import FORTMATIC_ICON_URL from 'assets/images/fortmaticIcon.png'
-import { ConnectionType, fortmaticConnection } from 'connection'
-import { getConnectionName } from 'connection/utils'
-
-import Option from './Option'
-
-const BASE_PROPS = {
-  color: '#6748FF',
-  icon: FORTMATIC_ICON_URL,
-  id: 'fortmatic',
-}
-
-export function FortmaticOption({ tryActivation }: { tryActivation: (connector: Connector) => void }) {
-  const isActive = fortmaticConnection.hooks.useIsActive()
-  return (
-    <Option
-      {...BASE_PROPS}
-      isActive={isActive}
-      onClick={() => tryActivation(fortmaticConnection.connector)}
-      header={getConnectionName(ConnectionType.FORTMATIC)}
-    />
-  )
-}

src/components/WalletModal/index.test.tsx

@@ -81,8 +81,7 @@ it('loads Wallet Modal on desktop', async () => {
   expect(screen.getByText('Install MetaMask')).toBeInTheDocument()
   expect(screen.getByText('Coinbase Wallet')).toBeInTheDocument()
   expect(screen.getByText('WalletConnect')).toBeInTheDocument()
-  expect(screen.getByText('Fortmatic')).toBeInTheDocument()
-  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(4)
+  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(3)
 })
 
 it('loads Wallet Modal on desktop with generic Injected', async () => {
@@ -94,8 +93,7 @@ it('loads Wallet Modal on desktop with generic Injected', async () => {
   expect(screen.getByText('Injected')).toBeInTheDocument()
   expect(screen.getByText('Coinbase Wallet')).toBeInTheDocument()
   expect(screen.getByText('WalletConnect')).toBeInTheDocument()
-  expect(screen.getByText('Fortmatic')).toBeInTheDocument()
-  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(4)
+  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(3)
 })
 
 it('loads Wallet Modal on desktop with MetaMask installed', async () => {
@@ -107,8 +105,7 @@ it('loads Wallet Modal on desktop with MetaMask installed', async () => {
   expect(screen.getByText('MetaMask')).toBeInTheDocument()
   expect(screen.getByText('Coinbase Wallet')).toBeInTheDocument()
   expect(screen.getByText('WalletConnect')).toBeInTheDocument()
-  expect(screen.getByText('Fortmatic')).toBeInTheDocument()
-  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(4)
+  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(3)
 })
 
 it('loads Wallet Modal on mobile', async () => {
@@ -121,8 +118,7 @@ it('loads Wallet Modal on mobile', async () => {
   render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)
   expect(screen.getByText('Open in Coinbase Wallet')).toBeInTheDocument()
   expect(screen.getByText('WalletConnect')).toBeInTheDocument()
-  expect(screen.getByText('Fortmatic')).toBeInTheDocument()
-  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(3)
+  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(2)
 })
 
 it('loads Wallet Modal on MetaMask browser', async () => {

src/components/WalletModal/index.tsx

@@ -13,7 +13,6 @@ import { formatToDecimal, getTokenAddress } from 'components/AmplitudeAnalytics/
 import { sendEvent } from 'components/analytics'
 import { AutoColumn } from 'components/Column'
 import { AutoRow } from 'components/Row'
-import { ConnectionType } from 'connection'
 import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsInjected, getIsMetaMask } from 'connection/utils'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
@@ -39,7 +38,6 @@ import AccountDetails from '../AccountDetails'
 import { LightCard } from '../Card'
 import Modal from '../Modal'
 import { CoinbaseWalletOption, OpenCoinbaseWalletOption } from './CoinbaseWalletOption'
-import { FortmaticOption } from './FortmaticOption'
 import { InjectedOption, InstallMetaMaskOption, MetaMaskOption } from './InjectedOption'
 import PendingView from './PendingView'
 import { WalletConnectOption } from './WalletConnectOption'
@@ -281,12 +279,6 @@ export default function WalletModal({
       })
 
       try {
-        // Fortmatic opens it's own modal on activation to log in. This modal has a tabIndex
-        // collision into the WalletModal, so we special case by closing the modal.
-        if (connectionType === ConnectionType.FORTMATIC) {
-          toggleWalletModal()
-        }
-
         setPendingConnector(connector)
         setWalletView(WALLET_VIEWS.PENDING)
         dispatch(updateConnectionError({ connectionType, error: undefined }))
@@ -304,7 +296,7 @@ export default function WalletModal({
         })
       }
     },
-    [dispatch, toggleWalletModal]
+    [dispatch]
   )
 
   function getOptions() {
@@ -339,14 +331,11 @@ export default function WalletModal({
     const walletConnectionOption =
       (!isInjectedMobileBrowser && <WalletConnectOption tryActivation={tryActivation} />) ?? null
 
-    const fortmaticOption = (!isInjectedMobileBrowser && <FortmaticOption tryActivation={tryActivation} />) ?? null
-
     return (
       <>
         {injectedOption}
         {coinbaseWalletOption}
         {walletConnectionOption}
-        {fortmaticOption}
       </>
     )
   }

src/connection/index.ts

@@ -1,13 +1,11 @@
 import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
 import { initializeConnector, Web3ReactHooks } from '@web3-react/core'
-import { EIP1193 } from '@web3-react/eip1193'
 import { GnosisSafe } from '@web3-react/gnosis-safe'
 import { MetaMask } from '@web3-react/metamask'
 import { Network } from '@web3-react/network'
 import { Connector } from '@web3-react/types'
 import { WalletConnect } from '@web3-react/walletconnect'
 import { SupportedChainId } from 'constants/chains'
-import Fortmatic from 'fortmatic'
 
 import UNISWAP_LOGO_URL from '../assets/svg/logo.svg'
 import { RPC_URLS } from '../constants/networks'
@@ -16,7 +14,6 @@ export enum ConnectionType {
   INJECTED = 'INJECTED',
   COINBASE_WALLET = 'COINBASE_WALLET',
   WALLET_CONNECT = 'WALLET_CONNECT',
-  FORTMATIC = 'FORTMATIC',
   NETWORK = 'NETWORK',
   GNOSIS_SAFE = 'GNOSIS_SAFE',
 }
@@ -71,15 +68,6 @@ export const walletConnectConnection: Connection = {
   type: ConnectionType.WALLET_CONNECT,
 }
 
-const [web3Fortmatic, web3FortmaticHooks] = initializeConnector<EIP1193>(
-  (actions) => new EIP1193({ actions, provider: new Fortmatic(process.env.REACT_APP_FORTMATIC_KEY).getProvider() })
-)
-export const fortmaticConnection: Connection = {
-  connector: web3Fortmatic,
-  hooks: web3FortmaticHooks,
-  type: ConnectionType.FORTMATIC,
-}
-
 const [web3CoinbaseWallet, web3CoinbaseWalletHooks] = initializeConnector<CoinbaseWallet>(
   (actions) =>
     new CoinbaseWallet({

src/connection/utils.ts

@@ -2,7 +2,6 @@ import { Connector } from '@web3-react/types'
 import {
   coinbaseWalletConnection,
   ConnectionType,
-  fortmaticConnection,
   gnosisSafeConnection,
   injectedConnection,
   networkConnection,
@@ -26,7 +25,6 @@ const CONNECTIONS = [
   injectedConnection,
   coinbaseWalletConnection,
   walletConnectConnection,
-  fortmaticConnection,
   networkConnection,
 ]
 export function getConnection(c: Connector | ConnectionType) {
@@ -44,8 +42,6 @@ export function getConnection(c: Connector | ConnectionType) {
         return coinbaseWalletConnection
       case ConnectionType.WALLET_CONNECT:
         return walletConnectConnection
-      case ConnectionType.FORTMATIC:
-        return fortmaticConnection
       case ConnectionType.NETWORK:
         return networkConnection
       case ConnectionType.GNOSIS_SAFE:
@@ -62,8 +58,6 @@ export function getConnectionName(connectionType: ConnectionType, isMetaMask?: b
       return 'Coinbase Wallet'
     case ConnectionType.WALLET_CONNECT:
       return 'WalletConnect'
-    case ConnectionType.FORTMATIC:
-      return 'Fortmatic'
     case ConnectionType.NETWORK:
       return 'Network'
     case ConnectionType.GNOSIS_SAFE:

src/hooks/useEagerlyConnect.ts

@@ -1,8 +1,9 @@
 import { Connector } from '@web3-react/types'
-import { gnosisSafeConnection, networkConnection } from 'connection'
+import { Connection, gnosisSafeConnection, networkConnection } from 'connection'
 import { getConnection } from 'connection/utils'
 import { useEffect } from 'react'
-import { useAppSelector } from 'state/hooks'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { updateSelectedWallet } from 'state/user/reducer'
 
 async function connect(connector: Connector) {
   try {
@@ -17,14 +18,25 @@ async function connect(connector: Connector) {
 }
 
 export default function useEagerlyConnect() {
+  const dispatch = useAppDispatch()
+
   const selectedWallet = useAppSelector((state) => state.user.selectedWallet)
 
+  let selectedConnection: Connection | undefined
+  if (selectedWallet) {
+    try {
+      selectedConnection = getConnection(selectedWallet)
+    } catch {
+      dispatch(updateSelectedWallet({ wallet: undefined }))
+    }
+  }
+
   useEffect(() => {
     connect(gnosisSafeConnection.connector)
     connect(networkConnection.connector)
 
-    if (selectedWallet) {
-      connect(getConnection(selectedWallet).connector)
+    if (selectedConnection) {
+      connect(selectedConnection.connector)
     } // The dependency list is empty so this is only run once on mount
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 }

src/hooks/useOrderedConnections.ts

@@ -3,12 +3,7 @@ import { getConnection } from 'connection/utils'
 import { useMemo } from 'react'
 import { useAppSelector } from 'state/hooks'
 
-const SELECTABLE_WALLETS = [
-  ConnectionType.INJECTED,
-  ConnectionType.COINBASE_WALLET,
-  ConnectionType.WALLET_CONNECT,
-  ConnectionType.FORTMATIC,
-]
+const SELECTABLE_WALLETS = [ConnectionType.INJECTED, ConnectionType.COINBASE_WALLET, ConnectionType.WALLET_CONNECT]
 
 export default function useOrderedConnections() {
   const selectedWallet = useAppSelector((state) => state.user.selectedWallet)

src/lib/hooks/useCurrency.ts

@@ -30,8 +30,8 @@ function parseStringOrBytes32(str: string | undefined, bytes32: string | undefin
  * Returns undefined if tokenAddress is invalid or token does not exist.
  */
 export function useTokenFromNetwork(tokenAddress: string | null | undefined): Token | null | undefined {
-  const { chainId, connector } = useWeb3React()
-  const chainAllowed = chainId && isChainAllowed(connector, chainId)
+  const { chainId } = useWeb3React()
+  const chainAllowed = chainId && isChainAllowed(chainId)
 
   const formattedAddress = isAddress(tokenAddress)
 
@@ -96,7 +96,7 @@ export function useTokenFromMapOrNetwork(tokens: TokenMap, tokenAddress?: string
  */
 export function useCurrencyFromMap(tokens: TokenMap, currencyId?: string | null): Currency | null | undefined {
   const nativeCurrency = useNativeCurrency()
-  const { chainId, connector } = useWeb3React()
+  const { chainId } = useWeb3React()
   const isNative = Boolean(nativeCurrency && currencyId?.toUpperCase() === 'ETH')
   const shorthandMatchAddress = useMemo(() => {
     const chain = supportedChainId(chainId)
@@ -105,7 +105,7 @@ export function useCurrencyFromMap(tokens: TokenMap, currencyId?: string | null)
 
   const token = useTokenFromMapOrNetwork(tokens, isNative ? undefined : shorthandMatchAddress ?? currencyId)
 
-  const chainAllowed = chainId && isChainAllowed(connector, chainId)
+  const chainAllowed = chainId && isChainAllowed(chainId)
   if (currencyId === null || currencyId === undefined || !chainAllowed) return null
 
   // this case so we use our builtin wrapped token instead of wrapped tokens on token lists

src/react-app-env.d.ts

@@ -4,8 +4,6 @@ declare module '@metamask/jazzicon' {
   export default function (diameter: number, seed: number): HTMLElement
 }
 
-declare module 'fortmatic'
-
 interface Window {
   // walletLinkExtension is injected by the Coinbase Wallet extension
   walletLinkExtension?: any

src/state/connection/reducer.ts

@@ -8,7 +8,6 @@ export interface ConnectionState {
 export const initialState: ConnectionState = {
   errorByConnectionType: {
     [ConnectionType.INJECTED]: undefined,
-    [ConnectionType.FORTMATIC]: undefined,
     [ConnectionType.WALLET_CONNECT]: undefined,
     [ConnectionType.COINBASE_WALLET]: undefined,
     [ConnectionType.NETWORK]: undefined,

src/utils/switchChain.ts

@@ -1,12 +1,5 @@
 import { Connector } from '@web3-react/types'
-import {
-  coinbaseWalletConnection,
-  fortmaticConnection,
-  gnosisSafeConnection,
-  injectedConnection,
-  networkConnection,
-  walletConnectConnection,
-} from 'connection'
+import { networkConnection, walletConnectConnection } from 'connection'
 import { getChainInfo } from 'constants/chainInfo'
 import { ALL_SUPPORTED_CHAIN_IDS, SupportedChainId } from 'constants/chains'
 import { RPC_URLS } from 'constants/networks'
@@ -41,23 +34,12 @@ function getRpcUrls(chainId: SupportedChainId): [string] {
   throw new Error('RPC URLs must use public endpoints')
 }
 
-export function isChainAllowed(connector: Connector, chainId: number) {
-  switch (connector) {
-    case fortmaticConnection.connector:
-      return chainId === SupportedChainId.MAINNET
-    case injectedConnection.connector:
-    case coinbaseWalletConnection.connector:
-    case walletConnectConnection.connector:
-    case networkConnection.connector:
-    case gnosisSafeConnection.connector:
-      return ALL_SUPPORTED_CHAIN_IDS.includes(chainId)
-    default:
-      return false
-  }
+export function isChainAllowed(chainId: number) {
+  return ALL_SUPPORTED_CHAIN_IDS.includes(chainId)
 }
 
 export const switchChain = async (connector: Connector, chainId: SupportedChainId) => {
-  if (!isChainAllowed(connector, chainId)) {
+  if (!isChainAllowed(chainId)) {
     throw new Error(`Chain ${chainId} not supported for connector (${typeof connector})`)
   } else if (connector === walletConnectConnection.connector || connector === networkConnection.connector) {
     await connector.activate(chainId)

yarn.lock

@@ -10284,11 +10284,6 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
-fortmatic@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/fortmatic/-/fortmatic-2.4.0.tgz#0546803d5c6187c06b3367eba66235cf4a195ece"
-  integrity sha512-4LVxybyWcz8eFkTjIW12JRyRCUV9/qih435l0+5ncTVIb+zzXjvjQ5dZU0eBAXXyAgmV9BIRYkQL9H/lc76w/w==
-
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"