feat: weth check (#4685)

* feat: throw on invalid deposits

* feat: add new bug link

* chore: note the usage of error state

src/analytics/constants.ts

@@ -25,6 +25,7 @@ export enum EventName {
   WALLET_CONNECT_TXN_COMPLETED = 'Wallet Connect Transaction Completed',
   WALLET_SELECTED = 'Wallet Selected',
   WEB_VITALS = 'Web Vitals',
+  WRAP_TOKEN_TXN_INVALIDATED = 'Wrap Token Transaction Invalidated',
   WRAP_TOKEN_TXN_SUBMITTED = 'Wrap Token Transaction Submitted',
   // alphabetize additional event names.
 }

src/hooks/useWrapCallback.tsx

@@ -6,7 +6,7 @@ import { EventName } from 'analytics/constants'
 import { formatToDecimal, getTokenAddress } from 'analytics/utils'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 
 import { WRAPPED_NATIVE_CURRENCY } from '../constants/tokens'
 import { useCurrencyBalance } from '../state/connection/hooks'
@@ -70,6 +70,11 @@ export default function useWrapCallback(
   )
   const addTransaction = useTransactionAdder()
 
+  // This allows an async error to propagate within the React lifecycle.
+  // Without rethrowing it here, it would not show up in the UI - only the dev console.
+  const [error, setError] = useState<Error>()
+  if (error) throw error
+
   return useMemo(() => {
     if (!wethContract || !chainId || !inputCurrency || !outputCurrency) return NOT_APPLICABLE
     const weth = WRAPPED_NATIVE_CURRENCY[chainId]
@@ -94,6 +99,22 @@ export default function useWrapCallback(
           sufficientBalance && inputAmount
             ? async () => {
                 try {
+                  const network = await wethContract.provider.getNetwork()
+                  if (
+                    network.chainId !== chainId ||
+                    wethContract.address !== WRAPPED_NATIVE_CURRENCY[network.chainId]?.address
+                  ) {
+                    sendAnalyticsEvent(EventName.WRAP_TOKEN_TXN_INVALIDATED, {
+                      ...eventProperties,
+                      contract_address: wethContract.address,
+                      contract_chain_id: network.chainId,
+                      type: WrapType.WRAP,
+                    })
+                    const error = new Error(`Invalid WETH contract
+Please file a bug detailing how this happened - https://github.com/Uniswap/interface/issues/new?labels=bug&template=bug-report.md&title=Invalid%20WETH%20contract`)
+                    setError(error)
+                    throw error
+                  }
                   const txReceipt = await wethContract.deposit({ value: `0x${inputAmount.quotient.toString(16)}` })
                   addTransaction(txReceipt, {
                     type: TransactionType.WRAP,