I have a Next.js app that is supposed to allow wallet connection with Torus wallet via socials (i.e. google login).
This is the function for my connection, using ether.js:
const TorusProviderOptions: TorusParams = {
buildEnv: "production", // must be production to use app.tor.us endpoint
enableLogging: true,
showTorusButton: true,
network: {
host: ENV === "production" ? "matic" : "mumbai",
},
integrity: {
check: false,
},
};
const _torus = new Torus();
await _torus.init(TorusProviderOptions);
if (web3Cache !== "torus") {
await _torus.login();
}
_ethersProvider = new providers.Web3Provider(_torus.provider);
setTorus(_torus);
localStorage.setItem(WEB3_CACHE_PROVIDER, JSON.stringify("torus"));
I am able to initialize the flow no problem, and log in with a google account, but when I get to this page:
I can’t click “Continur to app” and my app isn’t registering the connection. Here are the consoles from opening the connection to closing the popup because it won’t redirect:
This is my package.json:
{
"name": "@cloud9/next-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"precommit": "npx lint-staged"
},
"dependencies": {
"@apollo/client": "^3.5.8",
"@auth0/nextjs-auth0": "^1.9.2",
"@chakra-ui/icons": "^1.0.17",
"@chakra-ui/react": "^1.8.9",
"@chakra-ui/theme-tools": "^1.3.1",
"@cloud9/contracts": "*",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@firebase/util": "^1.9.3",
"@mdx-js/loader": "^2.1.3",
"@mdx-js/react": "^2.1.3",
"@merokudao/storekit-sdk": "^0.0.13",
"@metamask/detect-provider": "^1.2.0",
"@next/mdx": "12.2.5",
"@opengsn/provider": "^2.2.4",
"@react-three/drei": "^8.6.3",
"@react-three/fiber": "7.0.25",
"@reduxjs/toolkit": "^1.9.5",
"@sentry/nextjs": "^7.11.1",
"@sentry/utils": "^7.13.0",
"@toruslabs/torus-embed": "^1.39.0",
"@types/three": "^0.136.1",
"@types/validator": "^13.7.1",
"@walletconnect/web3-provider": "^1.6.6",
"@web3auth/base": "^1.1.0",
"@web3auth/web3auth": "^1.1.0",
"axios": "^0.24.0",
"copy-to-clipboard": "^3.3.1",
"detect-browser": "^5.3.0",
"dotenv": "^16.0.3",
"eslint-config-prettier": "^8.3.0",
"ethers": "^5.5.1",
"firebase": "^9.22.0",
"firebase-admin": "^11.9.0",
"framer-motion": "^4.1.17",
"graphql": "^16.3.0",
"ipfs-http-client": "^54.0.2",
"lodash": "^4.17.21",
"next": "^12.3.1",
"next-transpile-modules": "^9.0.0",
"react": "17.0.2",
"react-detect-click-outside": "^1.1.7",
"react-device-detect": "^2.2.3",
"react-dom": "17.0.2",
"react-dropzone": "^11.4.2",
"react-hook-form": "^7.27.0",
"react-hover-video-player": "^9.7.0",
"react-icons": "^4.9.0",
"react-image-crop": "^10.0.9",
"react-markdown": "^8.0.7",
"react-parallax-tilt": "1.5.81",
"react-player": "^2.9.0",
"react-query": "^3.34.8",
"react-redux": "^8.0.5",
"react-responsive-carousel": "^3.2.23",
"react-slick": "^0.28.1",
"react-spinners": "^0.11.0",
"react-toastify": "^8.1.0",
"slick-carousel": "^1.8.1",
"swiper": "^8.2.6",
"three": "^0.136.0",
"validator": "^13.7.0",
"walletlink": "^2.2.8",
"web3modal": "^1.9.8",
"zustand": "^3.7.2"
},
"devDependencies": {
"@shopify/eslint-plugin": "^40.4.0",
"@types/gtag.js": "^0.0.10",
"@types/react": "17.0.29",
"@types/react-slick": "^0.23.8",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"eslint": "^8.0.1",
"eslint-config-labrys": "^0.6.5",
"eslint-config-next": "11.1.2",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.3.0",
"typescript": "4.4.4"
},
"lint-staged": {
"*.{js,ts,tsx}": "eslint --cache --fix --plugin tsc --rule 'tsc/config: [2, {configFile: \"./tsconfig.json\"}]'"
}
}
This connection was working before. It broke, but then I upgraded the packages and it worked again for a few weeks, but now it is broken again. What am I missing? Please help.