Fix walletconnect double qr code

package.json

@@ -84,7 +84,7 @@
     "@web3-react/fortmatic-connector": "^6.1.6",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/portis-connector": "^6.1.9",
-    "@web3-react/walletconnect-connector": "6.2.4",
+    "@web3-react/walletconnect-connector": "^7.0.2-alpha.0",
     "@web3-react/walletlink-connector": "^6.2.12",
     "ajv": "^6.12.3",
     "array.prototype.flat": "^1.2.4",

src/custom/components/WalletModal/WalletModalMod.tsx

@@ -27,6 +27,8 @@ import Option from 'components/WalletModal/Option'
 import PendingView from 'components/WalletModal/PendingView'
 import { LightCard } from 'components/Card'
 
+import { SupportedChainId } from 'constants/chains'
+
 export const CloseIcon = styled.div`
   position: absolute;
   right: 1rem;
@@ -209,7 +211,7 @@ export default function WalletModal({
     setWalletView(WALLET_VIEWS.PENDING)
 
     // if the connector is walletconnect and the user has already tried to connect, manually reset the connector
-    if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
+    if (connector instanceof WalletConnectConnector) {
       connector.walletConnectProvider = undefined
     }
 
@@ -219,6 +221,15 @@ export default function WalletModal({
         //   const walletAddress = await connector.getAccount()
         //   logMonitoringEvent({ walletAddress })
         // })
+        .then(() => {
+          // Manually set the WalletConnectConnector http.connection.url to currently connected network url
+          // Fix for this https://github.com/gnosis/cowswap/issues/1930
+          if (connector instanceof WalletConnectConnector) {
+            const { http, rpc, signer } = connector.walletConnectProvider
+            const chainId = signer.connection.chainId || SupportedChainId.MAINNET
+            http.connection.url = rpc.custom[chainId]
+          }
+        })
         .catch((error) => {
           if (error instanceof UnsupportedChainIdError) {
             activate(connector) // a little janky...can't use setError because the connector isn't set

src/custom/hooks/useWalletInfo.ts

@@ -60,7 +60,8 @@ function checkIsSupportedWallet(params: {
 async function getWcPeerMetadata(connector: WalletConnectConnector): Promise<{ walletName?: string; icon?: string }> {
   const provider = (await connector.getProvider()) as WalletConnectProvider
 
-  const meta = provider.walletMeta
+  // fix for this https://github.com/gnosis/cowswap/issues/1929
+  const meta = provider.walletMeta || provider.signer.connection.wc.peerMeta
   if (meta) {
     return {
       walletName: meta.name,

src/custom/hooks/web3.ts

@@ -7,8 +7,9 @@ import { injected, gnosisSafe, walletconnect, getProviderType, WalletProvider, f
 import { isMobile } from 'utils/userAgent'
 
 import { STORAGE_KEY_LAST_PROVIDER, WAITING_TIME_RECONNECT_LAST_PROVIDER } from 'constants/index'
+import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 
-// exports from the original file
+// Exports from the original file
 export { useInactiveListener, useActiveWeb3React } from '@src/hooks/web3'
 
 enum DefaultProvidersInjected {
@@ -20,11 +21,11 @@ export function useEagerConnect() {
   const { activate, active, connector } = useWeb3React()
   const [tried, setTried] = useState(false)
 
-  // gnosisSafe.isSafeApp() races a timeout against postMessage, so it delays pageload if we are not in a safe app;
-  // if we are not embedded in an iframe, it is not worth checking
+  // GnosisSafe.isSafeApp() races a timeout against postMessage, so it delays pageload if we are not in a safe app;
+  // If we are not embedded in an iframe, it is not worth checking
   const [triedSafe, setTriedSafe] = useState(!IS_IN_IFRAME)
 
-  // handle setting/removing wallet provider in local storage
+  // Handle setting/removing wallet provider in local storage
   const handleBeforeUnload = useCallback(() => {
     const walletType = getProviderType(connector)
 
@@ -37,7 +38,7 @@ export function useEagerConnect() {
 
   const connectInjected = useCallback(
     (providerName = DefaultProvidersInjected.METAMASK) => {
-      // check if the our application is authorized/connected with Metamask
+      // Check if our application is authorized/connected with Metamask
       injected.isAuthorized().then((isAuthorized) => {
         if (isAuthorized) {
           setDefaultInjected(providerName)
@@ -84,7 +85,7 @@ export function useEagerConnect() {
     if (!active) {
       const latestProvider = localStorage.getItem(STORAGE_KEY_LAST_PROVIDER)
 
-      // if there is no last saved provider set tried state to true
+      // If there is no last saved provider set tried state to true
       if (!latestProvider) {
         if (!triedSafe) {
           // First try to connect using Gnosis Safe
@@ -109,7 +110,7 @@ export function useEagerConnect() {
     }
   }, [connectInjected, active, connectSafe, triedSafe, reconnectUninjectedProvider]) // intentionally only running on mount (make sure it's only mounted once :))
 
-  // if the connection worked, wait until we get confirmation of that to flip the flag
+  // If the connection worked, wait until we get confirmation of that to flip the flag
   useEffect(() => {
     let timeout: NodeJS.Timeout | undefined
 
@@ -126,10 +127,29 @@ export function useEagerConnect() {
   }, [active])
 
   useEffect(() => {
-    // add beforeunload event listener on initial component mount
+    // Check if current connector is of type WalletConnect
+    // Fix for this https://github.com/gnosis/cowswap/issues/1923
+    if (connector instanceof WalletConnectConnector) {
+      const walletConnect = connector.walletConnectProvider.signer.connection.wc
+
+      // Listen on disconnect events directly on WalletConnect client and close the connection
+      // Important in case the connection is closed from the wallet side after the page is refreshed
+      walletConnect.on('disconnect', (error: Error) => {
+        if (error) {
+          console.error('[WalletConnectConnector] Error during disconnect:', error)
+        } else {
+          connector.close()
+          localStorage.removeItem(STORAGE_KEY_LAST_PROVIDER)
+        }
+      })
+    }
+  }, [connector])
+
+  useEffect(() => {
+    // Add beforeunload event listener on initial component mount
     window.addEventListener('beforeunload', handleBeforeUnload)
 
-    // remove beforeunload event listener on component unmount
+    // Remove beforeunload event listener on component unmount
     return () => {
       window.removeEventListener('beforeunload', handleBeforeUnload)
     }

src/custom/utils/signatures.ts

@@ -21,6 +21,9 @@ import { registerOnWindow } from 'utils/misc'
 // - https://www.jsonrpc.org/specification#error_object
 const METAMASK_SIGNATURE_ERROR_CODE = -32603
 const METHOD_NOT_FOUND_ERROR_CODE = -32601
+// Added the following because of 1Inch walet who doesn't send the error code
+// So we will check the actual error text
+const METHOD_NOT_FOUND_ERROR_MSG_REGEX = /Method not found/i
 const V4_ERROR_MSG_REGEX = /eth_signTypedData_v4 does not exist/i
 const V3_ERROR_MSG_REGEX = /eth_signTypedData_v3 does not exist/i
 const RPC_REQUEST_FAILED_REGEX = /RPC request failed/i
@@ -159,7 +162,12 @@ async function _signPayload(
   try {
     signature = (await signFn({ ...payload, signer: _signer, signingScheme })) as EcdsaSignature // Only ECDSA signing supported for now
   } catch (e) {
-    if (e.code === METHOD_NOT_FOUND_ERROR_CODE || RPC_REQUEST_FAILED_REGEX.test(e.message)) {
+    const regexErrorCheck = [METHOD_NOT_FOUND_ERROR_MSG_REGEX, RPC_REQUEST_FAILED_REGEX].some((regex) =>
+      // for example 1Inch error doesn't have e.message so we will check the output of toString()
+      [e.message, e.toString()].some((msg) => regex.test(msg))
+    )
+
+    if (e.code === METHOD_NOT_FOUND_ERROR_CODE || regexErrorCheck) {
       // Maybe the wallet returns the proper error code? We can only hope 🤞
       // OR it failed with a generic message, there's no error code set, and we also hope it'll work
       // with other methods...

yarn.lock

@@ -5205,7 +5205,7 @@
   resolved "https://registry.yarnpkg.com/@walletconnect/environment/-/environment-1.0.0.tgz#c4545869fa9c389ec88c364e1a5f8178e8ab5034"
   integrity sha512-4BwqyWy6KpSvkocSaV7WR3BlZfrxLbJSLkg+j7Gl6pTDE+U55lLhJvQaMuDVazXYxcjBsG09k7UlH7cGiUI5vQ==
 
-"@walletconnect/[email protected]":
+"@walletconnect/[email protected]", "@walletconnect/ethereum-provider@^1.5.4":
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/@walletconnect/ethereum-provider/-/ethereum-provider-1.6.4.tgz#ffe3fee5aab7d0d7f02da2d31e7125e82de1ab53"
   integrity sha512-QhrBcAv/XJKz+UGRChjOl/SSJfbf0+QL86KjHzPufSTIGazusjNRtXc60QdFMy3Nh5u3xLODUbjXeSYIUR9UHQ==
@@ -5340,7 +5340,7 @@
     js-sha3 "0.8.0"
     query-string "6.13.5"
 
-"@walletconnect/web3-provider@^1.5.0", "@walletconnect/web3-provider@^1.6.6":
+"@walletconnect/web3-provider@^1.6.6":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@walletconnect/web3-provider/-/web3-provider-1.7.0.tgz#14d67a75555547205e9fd916a7142b1f951a143e"
   integrity sha512-tX0nKVJAs1jrRmFAP8nv1h27ZttWQ/4pOW8hkH32JIB76zbsncdUOjHpnzpzgXrzMyrCzfeXeZ8dbdW4jS1KDw==
@@ -5416,12 +5416,12 @@
   resolved "https://registry.yarnpkg.com/@web3-react/types/-/types-6.0.7.tgz#34a6204224467eedc6123abaf55fbb6baeb2809f"
   integrity sha512-ofGmfDhxmNT1/P/MgVa8IKSkCStFiyvXe+U5tyZurKdrtTDFU+wJ/LxClPDtFerWpczNFPUSrKcuhfPX1sI6+A==
 
-"@web3-react/walletconnect-connector@6.2.4":
-  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@web3-react/walletconnect-connector/-/walletconnect-connector-6.2.4.tgz#0a128699fc93ddac885935f4aeca32925f6285f0"
-  integrity sha512-IEVjCXrlcfVa6ggUBEyKtLRaLQuZGtT2lGuzOFtdbJJkN84u1++pzzeDrcsVhKAoS5wq33zyJT9baEbG1Aed8g==
+"@web3-react/walletconnect-connector@^7.0.2-alpha.0":
+  version "7.0.2-alpha.0"
+  resolved "https://registry.yarnpkg.com/@web3-react/walletconnect-connector/-/walletconnect-connector-7.0.2-alpha.0.tgz#dacd59db626b42137a1e4f34ea23ef1f04cc8b99"
+  integrity sha512-Qr+AecDt5/gbAb8sFfW5kbMo0nberCAU/6AB9KmmwCm2YGEEqJrj8fW3Kin7SGxv8pgDxgXwPYsW7qMUzayXEQ==
   dependencies:
-    "@walletconnect/web3-provider" "^1.5.0"
+    "@walletconnect/ethereum-provider" "^1.5.4"
     "@web3-react/abstract-connector" "^6.0.7"
     "@web3-react/types" "^6.0.7"
     tiny-invariant "^1.0.6"