fix: display Metamask warning only for extension/mobile wallets

apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/MetamaskTransactionWarning/index.tsx

@@ -1,13 +1,19 @@
+import { useEffect, useState } from 'react'
+
 import { CHAIN_INFO } from '@cowprotocol/common-const'
 import { getIsNativeToken } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
+import { ProviderMetaInfoPayload, WidgetEthereumProvider } from '@cowprotocol/iframe-transport'
 import { InlineBanner } from '@cowprotocol/ui'
+import { METAMASK_RDNS, useIsMetamaskBrowserExtensionWallet, useWalletDetails } from '@cowprotocol/wallet'
 import { useWalletProvider } from '@cowprotocol/wallet-provider'
 import { Currency } from '@uniswap/sdk-core'
 
 import SVG from 'react-inlinesvg'
 import styled from 'styled-components/macro'
 
+const METAMASK_WALLET_NAME_REGEX = /metamask/i
+
 const Banner = styled(InlineBanner)`
   font-size: 14px;
   text-align: center;
@@ -21,9 +27,25 @@ const NetworkInfo = styled.div`
 `
 
 export function MetamaskTransactionWarning({ sellToken }: { sellToken: Currency }) {
-  const provider = useWalletProvider()
-  const ethereumProvider = (provider as unknown as { provider: typeof window.ethereum })?.provider
-  const isMetamask = !!ethereumProvider?.isMetaMask && !ethereumProvider.isRabby
+  const walletDetails = useWalletDetails()
+  const isMetamaskBrowserExtension = useIsMetamaskBrowserExtensionWallet()
+
+  const widgetProviderMetaInfo = useWidgetProviderMetaInfo()
+  const isMetamaskMobileInjectedBrowser = useIsMetamaskMobileInjectedWallet()
+
+  const isMetamaskViaWalletConnect = METAMASK_WALLET_NAME_REGEX.test(walletDetails.walletName || '')
+
+  const isWidgetMetamaskBrowserExtension = widgetProviderMetaInfo?.providerEip6963Info?.rdns === METAMASK_RDNS
+  const isWidgetMetamaskViaWalletConnect = METAMASK_WALLET_NAME_REGEX.test(
+    widgetProviderMetaInfo?.providerWcMetadata?.name || '',
+  )
+
+  const isMetamask =
+    isMetamaskBrowserExtension ||
+    isMetamaskViaWalletConnect ||
+    isMetamaskMobileInjectedBrowser ||
+    isWidgetMetamaskBrowserExtension ||
+    isWidgetMetamaskViaWalletConnect
   const isNativeSellToken = getIsNativeToken(sellToken)
 
   if (!isMetamask || !isNativeSellToken) return null
@@ -40,3 +62,31 @@ export function MetamaskTransactionWarning({ sellToken }: { sellToken: Currency
     </Banner>
   )
 }
+
+function useWidgetProviderMetaInfo() {
+  const provider = useWalletProvider()
+  const [widgetProviderMetaInfo, setWidgetProviderMetaInfo] = useState<ProviderMetaInfoPayload | null>(null)
+
+  const rawProvider = provider?.provider as unknown
+
+  useEffect(() => {
+    const isWidgetEthereumProvider = rawProvider instanceof WidgetEthereumProvider
+
+    if (!isWidgetEthereumProvider) return
+
+    rawProvider.onProviderMetaInfo(setWidgetProviderMetaInfo)
+  }, [rawProvider])
+
+  return widgetProviderMetaInfo
+}
+
+/**
+ * This is hacky way to detect if the wallet is metamask mobile injected wallet
+ * Many injected wallet browsers emulate isMetaMask, but only metamask mobile has _metamask
+ */
+function useIsMetamaskMobileInjectedWallet(): boolean {
+  const walletProvider = useWalletProvider()
+  const rawProvider = walletProvider?.provider as any
+
+  return Boolean(rawProvider?.isMetaMask && rawProvider._metamask && !rawProvider.isRabby)
+}

apps/cowswap-frontend/src/modules/wallet/containers/ConnectWalletOptions.tsx

@@ -1,5 +1,6 @@
 import { useTheme } from '@cowprotocol/common-hooks'
 import { isMobile, isInjectedWidget } from '@cowprotocol/common-utils'
+import { EIP6963ProviderDetail } from '@cowprotocol/types'
 import {
   CoinbaseWalletOption,
   InjectedOption as DefaultInjectedOption,
@@ -12,12 +13,10 @@ import {
   Eip6963Option,
   COINBASE_WALLET_RDNS,
   getIsInjectedMobileBrowser,
-  EIP6963ProviderDetail,
 } from '@cowprotocol/wallet'
 
 import { useSelectedWallet } from 'legacy/state/user/hooks'
 
-
 export function ConnectWalletOptions({ tryActivation }: { tryActivation: TryActivation }) {
   const selectedWallet = useSelectedWallet()
   const multiInjectedProviders = useMultiInjectedProviders()
@@ -35,7 +34,11 @@ export function ConnectWalletOptions({ tryActivation }: { tryActivation: TryActi
   const walletConnectionV2Option =
     ((!isInjectedMobileBrowser || isWidget) && <WalletConnectV2Option {...connectionProps} />) ?? null
   const trezorOption = (!isInjectedMobileBrowser && !isMobile && <TrezorOption {...connectionProps} />) ?? null
-  const injectedOption = (getIsInjected() && <InjectedOptions connectionProps={connectionProps} multiInjectedProviders={multiInjectedProviders} />) ?? null
+  const injectedOption =
+    (getIsInjected() && (
+      <InjectedOptions connectionProps={connectionProps} multiInjectedProviders={multiInjectedProviders} />
+    )) ??
+    null
 
   return (
     <>

libs/iframe-transport/src/iframeRpcProvider/IframeRpcProviderBridge.ts

@@ -1,13 +1,22 @@
+import { EIP6963AnnounceProviderEvent, EIP6963ProviderDetail } from '@cowprotocol/types'
+
 import {
   IframeRpcProviderEvents,
   iframeRpcProviderTransport,
   ProviderRpcResponsePayload,
   ProviderRpcRequestPayload,
 } from './iframeRpcProviderEvents'
+import { getEip6963ProviderInfo, getProviderWcMetadata } from './utils'
 
 import { EthereumProvider, JsonRpcRequestMessage } from '../types'
 
 const EVENTS_TO_FORWARD_TO_IFRAME = ['connect', 'disconnect', 'close', 'chainChanged', 'accountsChanged']
+const eip6963Providers: EIP6963ProviderDetail[] = []
+
+window.addEventListener('eip6963:announceProvider', (event: Event) => {
+  const providerEvent = event as EIP6963AnnounceProviderEvent
+  eip6963Providers.push(providerEvent.detail)
+})
 
 /**
  * Handles JSON-RPC request comming from an iFrame by delegating to a given Ethereum provider.
@@ -43,6 +52,12 @@ export class IframeRpcProviderBridge {
       IframeRpcProviderEvents.PROVIDER_RPC_REQUEST,
       this.processRpcCallFromWindow,
     )
+
+    iframeRpcProviderTransport.stopListeningToMessageFromWindow(
+      window,
+      IframeRpcProviderEvents.REQUEST_PROVIDER_META_INFO,
+      this.processProviderMetaInfoRequest,
+    )
   }
 
   /**
@@ -72,6 +87,13 @@ export class IframeRpcProviderBridge {
     EVENTS_TO_FORWARD_TO_IFRAME.forEach((event) => {
       newProvider.on(event, (params: unknown) => this.onProviderEvent(event, params))
     })
+
+    // Listen for provider meta info request
+    iframeRpcProviderTransport.listenToMessageFromWindow(
+      window,
+      IframeRpcProviderEvents.REQUEST_PROVIDER_META_INFO,
+      this.processProviderMetaInfoRequest,
+    )
   }
 
   private processPendingRequests() {
@@ -122,6 +144,19 @@ export class IframeRpcProviderBridge {
     this.processRpcRequest(rpcRequest)
   }
 
+  private processProviderMetaInfoRequest = (): void => {
+    if (!this.ethereumProvider) return
+    // We assume, that all EIP-6963 providers are already announced
+    const providerEip6963Info = getEip6963ProviderInfo(this.ethereumProvider, eip6963Providers)
+    const providerWcMetadata = getProviderWcMetadata(this.ethereumProvider)
+
+    // Send the provider meta info to the iFrame window
+    iframeRpcProviderTransport.postMessageToWindow(this.iframeWidow, IframeRpcProviderEvents.SEND_PROVIDER_META_INFO, {
+      providerEip6963Info,
+      providerWcMetadata,
+    })
+  }
+
   private onProviderEvent(event: string, params: unknown): void {
     iframeRpcProviderTransport.postMessageToWindow(this.iframeWidow, IframeRpcProviderEvents.PROVIDER_ON_EVENT, {
       event,

libs/iframe-transport/src/iframeRpcProvider/WidgetEthereumProvider.ts

@@ -15,6 +15,7 @@ import { EventEmitter } from 'eventemitter3'
 import {
   IframeRpcProviderEvents,
   iframeRpcProviderTransport,
+  ProviderMetaInfoPayload,
   ProviderOnEventPayload,
   ProviderRpcResponsePayload,
 } from './iframeRpcProviderEvents'
@@ -167,6 +168,8 @@ export class WidgetEthereumProvider extends EventEmitter<IFrameEthereumProviderE
   private readonly completers: {
     [id: string]: PromiseCompleter<any, any>
   } = {}
+  private providerMetaInfo: ProviderMetaInfoPayload | null = null
+  private providerMetaInfoCallback?: (data: ProviderMetaInfoPayload) => void
 
   public constructor({
     timeoutMilliseconds = DEFAULT_TIMEOUT_MILLISECONDS,
@@ -195,6 +198,18 @@ export class WidgetEthereumProvider extends EventEmitter<IFrameEthereumProviderE
         this.handleOnEvent(message)
       },
     )
+
+    iframeRpcProviderTransport.listenToMessageFromWindow(
+      this.eventSource,
+      IframeRpcProviderEvents.SEND_PROVIDER_META_INFO,
+      (message) => {
+        this.providerMetaInfo = message
+
+        if (this.providerMetaInfoCallback) {
+          this.providerMetaInfoCallback(this.providerMetaInfo)
+        }
+      },
+    )
   }
 
   /**
@@ -295,6 +310,24 @@ export class WidgetEthereumProvider extends EventEmitter<IFrameEthereumProviderE
     }
   }
 
+  /**
+   * Subscribe to provider meta info
+   * @param callback
+   */
+  public onProviderMetaInfo(callback: (data: ProviderMetaInfoPayload) => void) {
+    if (this.providerMetaInfo) {
+      callback(this.providerMetaInfo)
+    } else {
+      this.providerMetaInfoCallback = callback
+
+      iframeRpcProviderTransport.postMessageToWindow(
+        this.eventTarget,
+        IframeRpcProviderEvents.REQUEST_PROVIDER_META_INFO,
+        null,
+      )
+    }
+  }
+
   /**
    * Handle a Rpc Request
    */

libs/iframe-transport/src/iframeRpcProvider/iframeRpcProviderEvents.ts

@@ -1,5 +1,5 @@
 import { IframeTransport } from '../IframeTransport'
-import { JsonRpcRequestMessage, JsonRpcResponse } from '../types'
+import { EIP6963ProviderInfo, JsonRpcRequestMessage, JsonRpcResponse, ProviderWcMetadata } from '../types'
 
 export interface ProviderRpcRequestPayload {
   rpcRequest: JsonRpcRequestMessage
@@ -13,16 +13,25 @@ export interface ProviderOnEventPayload {
   params: unknown
 }
 
+export interface ProviderMetaInfoPayload {
+  providerEip6963Info?: EIP6963ProviderInfo
+  providerWcMetadata?: ProviderWcMetadata
+}
+
 export enum IframeRpcProviderEvents {
   PROVIDER_RPC_REQUEST = 'PROVIDER_RPC_REQUEST',
   PROVIDER_RPC_RESPONSE = 'PROVIDER_RPC_RESPONSE',
   PROVIDER_ON_EVENT = 'PROVIDER_ON_EVENT',
+  SEND_PROVIDER_META_INFO = 'SEND_PROVIDER_META_INFO',
+  REQUEST_PROVIDER_META_INFO = 'REQUEST_PROVIDER_META_INFO',
 }
 
 export interface IframeEventsPayloadMap {
   [IframeRpcProviderEvents.PROVIDER_RPC_REQUEST]: ProviderRpcRequestPayload
   [IframeRpcProviderEvents.PROVIDER_RPC_RESPONSE]: ProviderRpcResponsePayload
   [IframeRpcProviderEvents.PROVIDER_ON_EVENT]: ProviderOnEventPayload
+  [IframeRpcProviderEvents.SEND_PROVIDER_META_INFO]: ProviderMetaInfoPayload
+  [IframeRpcProviderEvents.REQUEST_PROVIDER_META_INFO]: null
 }
 
 export const iframeRpcProviderTransport = new IframeTransport<IframeEventsPayloadMap>(

libs/iframe-transport/src/iframeRpcProvider/utils.ts

@@ -0,0 +1,16 @@
+import type { EIP6963ProviderDetail } from '@cowprotocol/types'
+
+import { EIP6963ProviderInfo, ProviderWcMetadata } from '../types'
+
+export function getProviderWcMetadata(provider: any): ProviderWcMetadata | undefined {
+  if (!provider.isWalletConnect) return
+
+  return provider?.session?.peer?.metadata
+}
+
+export function getEip6963ProviderInfo(
+  provider: unknown,
+  eip6963Providers: EIP6963ProviderDetail[],
+): EIP6963ProviderInfo | undefined {
+  return eip6963Providers.find((p) => p.provider === provider)?.info
+}

libs/iframe-transport/src/types.ts

@@ -58,3 +58,22 @@ export interface EthereumProvider {
 }
 
 export type WindowListener = (event: MessageEvent<unknown>) => void
+
+export interface ProviderWcMetadata {
+  name: string
+  description: string
+  url: string
+  icons: string[]
+  verifyUrl?: string
+  redirect?: {
+    native?: string
+    universal?: string
+  }
+}
+
+export interface EIP6963ProviderInfo {
+  uuid: string
+  name: string
+  icon: string
+  rdns: string
+}

libs/wallet/src/api/eip6963-types.ts → libs/types/src/eip6963-types.ts

@@ -1,6 +1,6 @@
-import type { Command } from '@cowprotocol/types'
 import type { RequestArguments } from '@web3-react/types'
 
+import type { Command } from './common'
 import type EventEmitter from 'eventemitter3'
 
 export interface EIP6963ProviderInfo {

libs/types/src/index.ts

@@ -1 +1,2 @@
 export * from './common'
+export * from './eip6963-types'

libs/wallet/src/api/hooks.ts

@@ -8,7 +8,7 @@ import {
 } from './state/multiInjectedProvidersAtom'
 import { ConnectionType, GnosisSafeInfo, WalletDetails, WalletInfo } from './types'
 
-import { RABBY_RDNS, WATCH_ASSET_SUPPORED_WALLETS } from '../constants'
+import { METAMASK_RDNS, RABBY_RDNS, WATCH_ASSET_SUPPORED_WALLETS } from '../constants'
 import { useConnectionType } from '../web3-react/hooks/useConnectionType'
 import { useIsSafeApp } from '../web3-react/hooks/useWalletMetadata'
 
@@ -69,3 +69,14 @@ export function useIsRabbyWallet(): boolean {
 
   return RABBY_RDNS === info.info.rdns
 }
+
+export function useIsMetamaskBrowserExtensionWallet(): boolean {
+  const connectionType = useConnectionType()
+  const info = useSelectedEip6963ProviderInfo()
+
+  if (connectionType === ConnectionType.METAMASK) return true
+
+  if (!info || connectionType !== ConnectionType.INJECTED) return false
+
+  return METAMASK_RDNS === info.info.rdns
+}

libs/wallet/src/api/state/multiInjectedProvidersAtom.ts

@@ -2,16 +2,15 @@ import { atom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 
 import { getJotaiIsolatedStorage, jotaiStore } from '@cowprotocol/core'
-
-import { EIP6963AnnounceProviderEvent, EIP6963ProviderDetail } from '../eip6963-types'
+import { EIP6963AnnounceProviderEvent, EIP6963ProviderDetail } from '@cowprotocol/types'
 
 export const multiInjectedProvidersAtom = atom<EIP6963ProviderDetail[]>([])
 
 // RDNS of the selected EIP-6963 provider
 export const selectedEip6963ProviderRdnsAtom = atomWithStorage<string | null>(
   'selectedEip6963ProviderAtom:v0',
   null,
-  getJotaiIsolatedStorage()
+  getJotaiIsolatedStorage(),
 )
 
 export const selectedEip6963ProviderAtom = atom((get) => {

libs/wallet/src/api/types.ts

@@ -1,8 +1,6 @@
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { SafeInfoResponse } from '@safe-global/api-kit'
 
-export * from './eip6963-types'
-
 export enum ConnectionType {
   NETWORK = 'NETWORK',
   INJECTED = 'INJECTED',

libs/wallet/src/web3-react/connection/injectedOptions.tsx

@@ -1,11 +1,13 @@
 import { useCallback } from 'react'
 
+import { EIP1193Provider, EIP6963ProviderDetail } from '@cowprotocol/types'
+
 import { injectedWalletConnection } from './injectedWallet'
 
 import { default as InjectedImage, default as InjectedImageDark } from '../../api/assets/arrow-right.svg'
 import { useSelectedEip6963ProviderRdns, useSetEip6963Provider } from '../../api/hooks'
 import { ConnectWalletOption } from '../../api/pure/ConnectWalletOption'
-import { ConnectionType, type EIP1193Provider, EIP6963ProviderDetail } from '../../api/types'
+import { ConnectionType } from '../../api/types'
 import { getConnectionName } from '../../api/utils/connection'
 import { useIsActiveConnection } from '../hooks/useIsActiveConnection'
 import { ConnectionOptionProps, TryActivation } from '../types'