[bug] Unable to connect Wallet to site via Mobile QR scan

[SheeranJL]

Link to minimal reproducible example

https://lab.web3modal.com/library/ethers/

Summary

You can use the official demo site to test this, because it's also happening there. Alternatively you can attempt to connect your wallet to my site where I currently have WalletConnect integrated (https://eventhorizon.vote).

Steps to reproduce.

1. Click Connect Wallet
2. Select any external wallet you have on your phone (in my case, Metamask, Trust Wallet or TokenPocket)
3. Scan the QR code via one of the apps in step 2.
4. Nothing happens, no connection is made with no error messages. Nothing that would indicate any 'loading' or anything either.

Now, in some rare cases, it did actually manage to go through, but I'd say that occurs less than 5% of the time. I've tried multiple phones, both android and iOS and multiple web browsers too.

List of related npm package versions

"dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@ethersproject/providers": "^5.7.2", "@metamask/jazzicon": "^2.0.0", "@mui/icons-material": "^5.14.16", "@mui/material": "^5.14.16", "@next/font": "^13.0.4", "@sharemint/sdk": "^0.7.1", "@snapshot-labs/snapshot.js": "^0.9.5", "@types/material-ui": "^0.21.12", "@web3modal/ethers": "^4.2.1", "big.js": "^6.2.1", "classnames": "^2.3.2", "computer-name": "^0.1.0", "ethers": "^6.12.0", "i": "^0.3.7", "moment": "^2.30.1", "next": "^13.0.3", "npm": "^10.3.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scroll-parallax": "^3.3.1", "react-toastify": "^9.1.1", "react-tooltip": "^5.21.5", "recoil": "^0.7.7", "sass": "^1.56.0", "web3": "^1.7.4", "web3-eth-contract": "^1.2.11" }, "devDependencies": { "@svgr/webpack": "^6.5.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@typechain/web3-v1": "^6.0.1", "@types/node": "18.8.0", "@types/react": "18.0.26", "@types/react-dom": "18.0.6", "@types/web3": "^1.2.2", "@typescript-eslint/eslint-plugin": "^5.40.1", "@typescript-eslint/parser": "^5.40.1", "autoprefixer": "^10.4.12", "eslint": "8.22.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.0.0", "eslint-config-next": "^13.0.3", "eslint-config-prettier": "^8.5.0", "eslint-plugin-import": "^2.25.3", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.28.0", "eslint-plugin-react-hooks": "^4.3.0", "gray-matter": "^4.0.3", "jest": "^29.3.1", "jest-environment-jsdom": "^29.3.1", "matter": "^0.2.0", "next-images": "^1.8.4", "postcss": "^8.4.17", "prettier": "^2.7.1", "tailwindcss": "^3.1.8", "typechain": "^8.1.0", "typed-scss-modules": "^7.0.1", "typescript": "^4.8.4", "typescript-plugin-css-modules": "^3.4.0" }

[linear[bot]]

APKT-442 [bug] Unable to connect Wallet to site via Mobile QR scan

[SheeranJL]

Guys,

If you're using Next.JS. In your next.js.config you need to set swcMinify to false.

module.exports = { [the rest of your config..], swcMinify: false, }

This seemed to have resolved my issue.