feat: MM Sdk integration

apps/web/.env

@@ -1,6 +1,8 @@
 # These API keys are intentionally public. Please do not report them - thank you for your concern.
 ESLINT_NO_DEV_ERRORS=true
 REACT_APP_AMPLITUDE_PROXY_URL="https://interface.gateway.uniswap.org/v1/amplitude-proxy"
+REACT_APP_AMPLITUDE_PROXY_URL_OVERRIDE="https://interface.gateway.uniswap.org/v1/amplitude-proxy"
+REACT_APP_AMPLITUDE_EXPERIMENTS_DEPLOYMENT_KEY="key"
 REACT_APP_AWS_API_ENDPOINT="https://beta.gateway.uniswap.org/v1/graphql"
 REACT_APP_AWS_REALTIME_ENDPOINT="wss://beta.realtime.gateway.uniswap.org/graphql"
 REACT_APP_AWS_REALTIME_TOKEN="realtime-3DDE0DA0-3408-4FD0-9DC3-5E285D70D29C"

apps/web/package.json

@@ -297,7 +297,7 @@
     "uuid": "9.0.0",
     "video-extensions": "1.2.0",
     "viem": "2.x",
-    "wagmi": "2.9.3",
+    "wagmi": "2.14.7",
     "wcag-contrast": "3.0.0",
     "web-vitals": "2.1.4",
     "xml2js": "0.6.2",

apps/web/public/csp.json

@@ -36,6 +36,7 @@
     "https://*.gemini.com",
     "https://*.googleapis.com",
     "https://*.infura.io",
+    "https://*.metamask.io",
     "https://*.nodereal.io",
     "https://*.optimism.io",
     "https://*.quiknode.pro",
@@ -101,7 +102,8 @@
     "wss://relay.walletconnect.com",
     "wss://relay.walletconnect.org",
     "wss://ws-us3.pusher.com/",
-    "wss://www.walletlink.org"
+    "wss://www.walletlink.org",
+    "wss://metamask-sdk.api.cx.metamask.io"
   ],
   "workerSrc": [
     "'self'",

apps/web/src/components/WalletModal/useOrderedConnections.test.tsx

@@ -49,7 +49,7 @@ describe('useOrderedConnections', () => {
     const { result } = renderHook(() => useOrderedConnections())
 
     const expectedConnectors = [
-      { id: CONNECTION_PROVIDER_IDS.METAMASK_RDNS },
+      { id: CONNECTION_PROVIDER_IDS.METAMASK_SDK_ID },
       { id: CONNECTION_PROVIDER_IDS.WALLET_CONNECT_CONNECTOR_ID },
       { id: CONNECTION_PROVIDER_IDS.COINBASE_SDK_CONNECTOR_ID },
     ]
@@ -75,7 +75,7 @@ describe('useOrderedConnections', () => {
 
     const expectedConnectors = [
       { id: CONNECTION_PROVIDER_IDS.WALLET_CONNECT_CONNECTOR_ID },
-      { id: CONNECTION_PROVIDER_IDS.METAMASK_RDNS },
+      { id: CONNECTION_PROVIDER_IDS.METAMASK_SDK_ID },
       { id: CONNECTION_PROVIDER_IDS.COINBASE_SDK_CONNECTOR_ID },
     ]
 
@@ -89,7 +89,7 @@ describe('useOrderedConnections', () => {
     UserAgentMock.isMobileWeb = true
     const { result } = renderHook(() => useOrderedConnections())
     expect(result.current.length).toEqual(1)
-    expect(result.current[0].id).toEqual(CONNECTION_PROVIDER_IDS.METAMASK_RDNS)
+    expect(result.current[0].id).toEqual(CONNECTION_PROVIDER_IDS.METAMASK_SDK_ID)
   })
 
   it('should return only the Coinbase injected connector in the Coinbase Wallet', async () => {
@@ -109,7 +109,7 @@ describe('useOrderedConnections', () => {
     const { result } = renderHook(() => useOrderedConnections())
 
     const expectedConnectors = [
-      { id: CONNECTION_PROVIDER_IDS.METAMASK_RDNS },
+      { id: CONNECTION_PROVIDER_IDS.METAMASK_SDK_ID },
       { id: CONNECTION_PROVIDER_IDS.WALLET_CONNECT_CONNECTOR_ID },
       { id: CONNECTION_PROVIDER_IDS.COINBASE_SDK_CONNECTOR_ID },
     ]

apps/web/src/components/WalletModal/useOrderedConnections.tsx

@@ -39,16 +39,7 @@ export function useConnectorWithId(id: ConnectorID, options?: { shouldThrow: tru
 }
 
 function getInjectedConnectors(connectors: readonly Connector[]) {
-  let isCoinbaseWalletBrowser = false
   const injectedConnectors = connectors.filter((c) => {
-    // Special-case: Ignore coinbase eip6963-injected connector; coinbase connection is handled via the SDK connector.
-    if (c.id === CONNECTION_PROVIDER_IDS.COINBASE_RDNS) {
-      if (isMobileWeb) {
-        isCoinbaseWalletBrowser = true
-      }
-      return false
-    }
-
     // Special-case: Ignore the Uniswap Extension injection here if it's being displayed separately.
     if (c.id === CONNECTION_PROVIDER_IDS.UNISWAP_EXTENSION_RDNS) {
       return false
@@ -61,14 +52,14 @@ function getInjectedConnectors(connectors: readonly Connector[]) {
   })
 
   // Special-case: Return deprecated window.ethereum connector when no eip6963 injectors are present.
-  const fallbackInjector = getConnectorWithId(connectors, CONNECTION_PROVIDER_IDS.INJECTED_CONNECTOR_ID, {
-    shouldThrow: true,
-  })
-  if (!injectedConnectors.length && Boolean(window.ethereum)) {
-    return { injectedConnectors: [fallbackInjector], isCoinbaseWalletBrowser }
+  if (!injectedConnectors.length && Boolean(window.ethereum) && !window.ethereum?.isMetaMask) {
+    const defaultInjected = getConnectorWithId(connectors, CONNECTION_PROVIDER_IDS.INJECTED_CONNECTOR_ID, {
+      shouldThrow: true,
+    })
+    return { injectedConnectors: [defaultInjected] }
   }
 
-  return { injectedConnectors, isCoinbaseWalletBrowser }
+  return { injectedConnectors }
 }
 
 /**
@@ -94,9 +85,9 @@ export function useOrderedConnections(): InjectableConnector[] {
   )
 
   return useMemo(() => {
-    const { injectedConnectors: injectedConnectorsBase, isCoinbaseWalletBrowser } = getInjectedConnectors(connectors)
-    const injectedConnectors = injectedConnectorsBase.map((c) => ({ ...c, isInjected: true }))
+    const { injectedConnectors } = getInjectedConnectors(connectors)
 
+    const metaMaskConnector = getConnectorWithId(connectors, CONNECTION_PROVIDER_IDS.METAMASK_SDK_ID, SHOULD_THROW)
     const coinbaseSdkConnector = getConnectorWithId(
       connectors,
       CONNECTION_PROVIDER_IDS.COINBASE_SDK_CONNECTOR_ID,
@@ -107,7 +98,7 @@ export function useOrderedConnections(): InjectableConnector[] {
       CONNECTION_PROVIDER_IDS.WALLET_CONNECT_CONNECTOR_ID,
       SHOULD_THROW,
     )
-    if (!coinbaseSdkConnector || !walletConnectConnector) {
+    if (!coinbaseSdkConnector || !walletConnectConnector || !metaMaskConnector) {
       throw new Error('Expected connector(s) missing from wagmi context.')
     }
 
@@ -116,19 +107,15 @@ export function useOrderedConnections(): InjectableConnector[] {
       return injectedConnectors
     }
 
-    // Special-case: Only display the Coinbase connector in the Coinbase Wallet.
-    if (isCoinbaseWalletBrowser) {
-      return [coinbaseSdkConnector]
-    }
-
     const orderedConnectors: InjectableConnector[] = []
 
     // Injected connectors should appear next in the list, as the user intentionally installed/uses them.
     orderedConnectors.push(...injectedConnectors)
 
-    // WalletConnect and Coinbase are added last in the list.
-    orderedConnectors.push(walletConnectConnector)
+    // MetaMask, WalletConnect and Coinbase are added last in the list.
+    orderedConnectors.push(metaMaskConnector)
     orderedConnectors.push(coinbaseSdkConnector)
+    orderedConnectors.push(walletConnectConnector)
 
     // Place the most recent connector at the top of the list.
     orderedConnectors.sort(sortByRecent)

apps/web/src/components/Web3Provider/constants.ts

@@ -9,7 +9,7 @@ import { CONNECTION_PROVIDER_IDS } from 'uniswap/src/constants/web3'
 export const UNISWAP_EXTENSION_CONNECTOR_NAME = 'Uniswap Extension'
 
 export const CONNECTOR_ICON_OVERRIDE_MAP: { [id in string]?: string } = {
-  [CONNECTION_PROVIDER_IDS.METAMASK_RDNS]: METAMASK_ICON,
+  [CONNECTION_PROVIDER_IDS.METAMASK_SDK_ID]: METAMASK_ICON,
   [CONNECTION_PROVIDER_IDS.UNISWAP_WALLET_CONNECT_CONNECTOR_ID]: UNIWALLET_ICON,
   [CONNECTION_PROVIDER_IDS.COINBASE_SDK_CONNECTOR_ID]: COINBASE_ICON,
   [CONNECTION_PROVIDER_IDS.WALLET_CONNECT_CONNECTOR_ID]: WALLET_CONNECT_ICON,

apps/web/src/components/Web3Provider/defaultInjected.ts

@@ -0,0 +1,19 @@
+import INJECTED_LIGHT_ICON from 'assets/wallets/browser-wallet-light.svg'
+import { createConnector } from 'wagmi'
+import { injected } from 'wagmi/connectors'
+
+export function defaultInjected() {
+  return createConnector((config) => {
+    const injectedConnector = injected()(config)
+
+    return {
+      ...injectedConnector,
+      get icon() {
+        return INJECTED_LIGHT_ICON
+      },
+      get name() {
+        return 'Browser Wallet'
+      },
+    }
+  })
+}

apps/web/src/components/Web3Provider/wagmiConfig.ts

@@ -1,5 +1,5 @@
 import { QueryClient } from '@tanstack/react-query'
-import { injectedWithFallback } from 'components/Web3Provider/injectedWithFallback'
+import { defaultInjected } from 'components/Web3Provider/defaultInjected'
 import { WC_PARAMS } from 'components/Web3Provider/walletConnect'
 import { UNISWAP_LOGO } from 'ui/src/assets'
 import { UNISWAP_WEB_URL } from 'uniswap/src/constants/urls'
@@ -8,7 +8,7 @@ import { ALL_CHAIN_IDS, UniverseChainId } from 'uniswap/src/features/chains/type
 import { createClient } from 'viem'
 import { createConfig, http } from 'wagmi'
 import { connect } from 'wagmi/actions'
-import { coinbaseWallet, injected, safe, walletConnect } from 'wagmi/connectors'
+import { coinbaseWallet, metaMask, safe, walletConnect } from 'wagmi/connectors'
 
 declare module 'wagmi' {
   interface Register {
@@ -19,8 +19,15 @@ declare module 'wagmi' {
 export const wagmiConfig = createConfig({
   chains: [getChainInfo(UniverseChainId.Mainnet), ...ALL_CHAIN_IDS.map(getChainInfo)],
   connectors: [
-    injectedWithFallback(),
+    defaultInjected(),
     walletConnect(WC_PARAMS),
+    metaMask({
+      dappMetadata: {
+        name: 'Uniswap',
+        url: `${UNISWAP_WEB_URL}`,
+        iconUrl: `${UNISWAP_WEB_URL}${UNISWAP_LOGO}`,
+      },
+    }),
     coinbaseWallet({
       appName: 'Uniswap',
       // CB SDK doesn't pass the parent origin context to their passkey site
@@ -45,5 +52,5 @@ export const queryClient = new QueryClient()
 
 // Automatically connect if running in Cypress environment
 if ((window as any).Cypress?.eagerlyConnect) {
-  connect(wagmiConfig, { connector: injected() })
+  connect(wagmiConfig, { connector: defaultInjected() })
 }

package.json

@@ -88,7 +88,8 @@
     "semver": "7.5.2",
     "typescript": "5.3.3",
     "xml2js": "0.5.0",
-    "yaml": "2.2.2"
+    "yaml": "2.2.2",
+    "viem": "2.18.5"
   },
   "scripts": {
     "extension": "yarn workspace @uniswap/extension",

packages/uniswap/package.json

@@ -93,7 +93,7 @@
     "ui": "workspace:^",
     "utilities": "workspace:^",
     "uuid": "9.0.0",
-    "wagmi": "2.9.3",
+    "wagmi": "2.14.7",
     "wcag-contrast": "3.0.0",
     "zod": "3.22.4"
   },

packages/uniswap/src/constants/web3.ts

@@ -4,8 +4,7 @@ export const CONNECTION_PROVIDER_IDS = {
   INJECTED_CONNECTOR_ID: 'injected',
   INJECTED_CONNECTOR_TYPE: 'injected',
   COINBASE_SDK_CONNECTOR_ID: 'coinbaseWalletSDK',
-  COINBASE_RDNS: 'com.coinbase.wallet',
-  METAMASK_RDNS: 'io.metamask',
+  METAMASK_SDK_ID: 'metaMaskSDK',
   UNISWAP_EXTENSION_RDNS: 'org.uniswap.app',
   SAFE_CONNECTOR_ID: 'safe',
 } as const