fix: metamask explicit transaction type

Author: TateB

src/components/@molecules/TransactionDialogManager/stage/query.ts

@@ -26,7 +26,7 @@ import {
 import { getReadableError } from '@app/utils/errors'
 import { createAccessList } from '@app/utils/query/createAccessList'
 import { wagmiConfig } from '@app/utils/query/wagmi'
-import { hasParaConnection } from '@app/utils/utils'
+import { connectorIsMetaMask, hasParaConnection } from '@app/utils/utils'
 
 export const getUniqueTransaction = ({
   txKey,
@@ -211,6 +211,10 @@ export const createTransactionRequestUnsafe = async ({
     ...(isParaConnected ? { maxPriorityFeePerGas: largestMedianGasFee } : {}),
   })
 
+  if (connectorIsMetaMask(connections, connectorClient)) {
+    ;(request as any).__is_metamask = true
+  }
+
   return {
     ...request,
     chain: request.chain!,

src/constants/chains.ts

@@ -64,6 +64,7 @@ export const getChainsFromUrl = () => {
   const chain = process.env.NEXT_PUBLIC_CHAIN_NAME
   if (chain === 'holesky') return [holeskyWithEns]
   if (chain === 'sepolia') return [sepoliaWithEns]
+  if (chain === 'mainnet') return [mainnetWithEns]
 
   // Previews
   if (segments.length === 4) {

src/utils/query/wagmi.ts

@@ -1,4 +1,13 @@
-import { createClient, type FallbackTransport, type HttpTransport, type Transport } from 'viem'
+import {
+  createClient,
+  formatTransactionRequest,
+  type ExactPartial,
+  type FallbackTransport,
+  type HttpTransport,
+  type TransactionRequest,
+  type TransactionType,
+  type Transport,
+} from 'viem'
 import { createConfig, createStorage, fallback, http } from 'wagmi'
 import { holesky, localhost, mainnet, sepolia } from 'wagmi/chains'
 
@@ -87,7 +96,51 @@ export const transports = {
   [holesky.id]: initialiseTransports('holesky', [drpcUrl, tenderlyUrl]),
 } as const
 
-const chains = getChainsFromUrl() as unknown as readonly [SupportedChain, ...SupportedChain[]]
+// This is a workaround to fix MetaMask defaulting to the wrong transaction type
+// when no type is specified, but an access list is provided.
+// See: https://github.com/MetaMask/core/issues/5720
+// Viem by default doesn't include the type in a TransactionRequest, because it's generally not required.
+// To fix the MetaMask issue, we need to include it. However, we don't want to break other wallets, so we only add it
+// for MetaMask.
+// Viem will use a chain specific transactionRequest formatter if provided, so we can utilise this to
+// add `type`.
+// References to the formatter are:
+// 1. Call to `extract` with all extra parameters (i.e. unused by call by default), and the chain specific formatter
+//   a. If a formatter is not provided, the function returns `{}` (existing behaviour)
+//   b. If a formatter is provided, returns the formatted extra parameters
+// 2. Call to chain specific formatter if provided, otherwise `formatTransactionRequest`, with the request and the formatted extra parameters
+//
+// We want to capture only the first call, so `type` is added to the final request object without
+// modifying existing behaviour.
+const formatExtraTransactionRequestParameters = (
+  request:
+    | { type: TransactionType }
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    | { type: TransactionType; __is_metamask: boolean }
+    | ExactPartial<TransactionRequest>,
+) => {
+  // 1: Call will never have `from`
+  if (!('from' in request)) {
+    // 1a: Default behaviour when not MetaMask
+    if (!('__is_metamask' in request) || !request.__is_metamask) return {}
+    // 1b: Add `type` to the request
+    return {
+      type: request.type,
+    }
+  }
+  // 2: Standard call to formatter
+  return formatTransactionRequest(request)
+}
+
+const chains = getChainsFromUrl().map((c) => ({
+  ...c,
+  formatters: {
+    ...(c.formatters || {}),
+    transactionRequest: {
+      format: formatExtraTransactionRequestParameters,
+    },
+  },
+})) as unknown as readonly [SupportedChain, ...SupportedChain[]]
 
 const wagmiConfig_ = createConfig({
   syncConnectedChain: false,

src/utils/utils.ts

@@ -7,6 +7,7 @@ import { GetPriceReturnType } from '@ensdomains/ensjs/public'
 import { DecodedFuses } from '@ensdomains/ensjs/utils'
 
 import { KNOWN_RESOLVER_DATA } from '@app/constants/resolverAddressData'
+import type { ConnectorClientWithEns } from '@app/types'
 
 import { CURRENCY_FLUCTUATION_BUFFER_PERCENTAGE } from './constants'
 import { calculateDatesDiff } from './date'
@@ -231,3 +232,14 @@ export const hslToHex = (hsl: string) => {
 export const hasParaConnection = (connections: Connection[]) => {
   return connections?.some((connection) => connection?.connector?.id === 'para-integrated')
 }
+
+export const connectorIsMetaMask = (
+  connections: Connection[],
+  connectorClient: ConnectorClientWithEns,
+) => {
+  return connections?.some(
+    (connection) =>
+      connection?.connector?.id === 'io.metamask' &&
+      connection.accounts.some((a) => a === connectorClient.account.address),
+  )
+}