It works when i go through the happy path, although when i hit cancel or click the [x] it has a runtime error?
i even put a breakpoint and a try/catch and it didn’t hit:
maybe its coming from the plugin package itself?
i would have posted more images, although it wouldnt let me
Thanks for sharing all the details. Our team is looking into this and we will get back.
Hi @mattjaf, have you cloned any of our example apps? And what is the web3auth version that you are currently using?
/*eslint-disable*/
import Moralis from 'moralis-v1';
import { ethers } from 'ethers';
//import verifyChainId from '../utils/verifyChainId';
import { WALLET_ADAPTERS } from '@web3auth/base';
import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";
export default class Web3AuthConnector extends Moralis.AbstractWeb3Connector {
type = 'web3Auth';
connect = (web3auth) => {
return new Promise((resolve, reject) => {
const subscribeAuthEvents = (web3auth) => {
web3auth.loginModal.on('MODAL_VISIBILITY', async (visibility) => {
if (!visibility) {
reject(new Error('Web3Auth: User closed login modal.'));
}
});
};
subscribeAuthEvents(web3auth);
web3auth.connect().then(resolve).catch(reject);
});
};
activate = async ({
chainId = '0x1',
clientId,
theme,
appLogo,
loginMethodsOrder,
} = {}) => {
// Checking that all params are given
if (!clientId) {
throw new Error('"clientId" not provided, please provide clientId');
}
// Initalizing Web3Auth and getting constants
let Web3Auth;
try {
Web3Auth = require('@web3auth/modal')?.Web3Auth;
} catch {
// Do Nothing Individual Checks are done below
}
// Check if user is using CDN to import
if (!Web3Auth) {
Web3Auth = window?.Web3auth?.Web3Auth;
}
// Error checking for if library is not installed
if (!Web3Auth) {
throw new Error('"@web3auth/web3auth" not installed, please install');
}
// Build config
const ethChainConfig = {
chainNamespace: 'eip155',
chainId: chainId,
};
// Build Web3Auth
let web3auth;
try {
web3auth = new Web3Auth({
chainConfig: ethChainConfig,
uiConfig: {
theme: theme ?? 'dark',
appLogo:
appLogo ??
'https://moralis.io/wp-content/community/community/uploads/2021/05/moralisWhiteLogo.svg',
loginMethodsOrder,
},
clientId: clientId,
});
// Add Torus Wallet Connector Plugin
const torusPlugin = new TorusWalletConnectorPlugin({
torusWalletOpts: {},
walletInitOptions: {
whiteLabel: {
theme: { isDark: true, colors: { primary: "#00a8ff" } },
logoDark: "https://web3auth.io/community/images/w3a-L-Favicon-1.svg",
logoLight: "https://web3auth.io/community/images/w3a-D-Favicon-1.svg",
},
//useWalletConnect: true,
showTorusButton: true,
enableLogging: true,
},
});
await web3auth.addPlugin(torusPlugin);
} catch {
// Do Nothing error checked below
}
if (!web3auth) {
throw new Error(
'Could not connect via Web3Auth, error during initializing Web3Auth'
);
}
// Authenticate
await web3auth.initModal({
modalConfig: {
[WALLET_ADAPTERS.OPENLOGIN]: {
loginMethods: {
// change based on what you want to show
google: {
showOnModal: true,
},
facebook: {
showOnModal: false,
},
twitter: {
showOnModal: false,
},
},
// setting it to false will hide all social login methods from modal.
showOnModal: true,
},
},
});
let provider = null;
provider = await this.connect(web3auth);
if (!provider) {
throw new Error(
'Could not connect via Web3Auth, error in connecting to provider'
);
}
// Gather User data
try {
const isSocialLogin = web3auth?.provider ? false : true;
const ether = new ethers.providers.Web3Provider(
web3auth?.provider ? web3auth.provider : web3auth
);
const signer = ether.getSigner();
const values = await Promise.all([
ether.getNetwork(),
signer.getAddress(),
]);
const providerChainId = values[0].chainId;
this.account = values[1].toLocaleLowerCase();
this.chainId = `0x${providerChainId.toString(16)}`;
this.provider = isSocialLogin ? ether : web3auth?.provider;
this.web3Instance = web3auth;
this.subscribeToEvents(this.provider);
return {
chainId: this.chainId,
account: this.account,
provider: this.provider,
};
} catch {
throw new Error(
'Could not connect via Web3Auth, error while authenticating'
);
}
};
deactivate = async () => {
this.unsubscribeToEvents(this.provider);
if (this.web3Instance) {
await this.web3Instance.logout();
}
this.account = null;
this.chainId = null;
this.provider = null;
};
}
{
"name": "parse-server-react-client",
"version": "0.1.1",
"private": true,
"dependencies": {
"@babel/core": "^7.20.12",
"@babel/plugin-syntax-flow": "^7.18.6",
"@babel/plugin-transform-react-jsx": "^7.20.7",
"@babel/runtime": "^7.20.7",
"@chakra-ui/react": "^2.3.1",
"@chakra-ui/styled-system": "^2.3.1",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.2.4",
"@types/react": "^18.0.18",
"@types/react-dom": "^18.0.6",
"@web3auth/modal": "^6.1.1",
"assert": "^2.0.0",
"axios": "^1.2.1",
"browserify-zlib": "^0.2.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"ethers": "^5.7.2",
"framer-motion": "^6",
"https-browserify": "^1.0.0",
"magic-sdk": "^9.0.0",
"moralis-v1": "^1.13.0",
"os-browserify": "^0.3.0",
"process": "^0.11.10",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-moralis": "^1.4.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"typescript": "^4.9.4",
"url": "^0.11.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "cross-env SKIP_PREFLIGHT_CHECK=true GENERATE_SOURCEMAP=false react-app-rewired start",
"build": "cross-env SKIP_PREFLIGHT_CHECK=true GENERATE_SOURCEMAP=false react-app-rewired build",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@moralisweb3/eslint-config": "^1.0.3",
"@walletconnect/sign-client": "^2.8.6",
"@walletconnect/web3-provider": "^1.8.0",
"@web3auth/torus-wallet-connector-plugin": "^6.1.2",
"@web3auth/web3auth": "^2.1.3",
"cross-env": "^7.0.3",
"eslint": "^8.32.0",
"eslint-plugin-etc": "^2.0.2",
"react-app-rewired": "^2.2.1"
}
}
Hi @mattjaf, I’ll recommend you take a look at the example here. It has the switch chain method implemented as well. Also, we do not require as much poly filling for v6 SDKs unless specific blockchain libraries need it. Please have a look at that as well in the example mentioned above.
Let me know if this works for you.
any idea why it would be throwing that error? or where it is coming from?
Okay, it seems to be coming from the plugin package itself… I noticed that same exact error within the demo console when i tried to reproduce it there, and it seems like it is a case of “error boundaries”, where the error seems to behave differently in development vs production. When i tried to reproduce it from a served up production build, it did not crash although the error was still in the console.
I still feel like the error could of been handled differently within the plugin
This was the error, incase someone tries to google it:
Uncaught runtime errors:
×
ERROR
Provider change status error
at handleError (http://localhost:3000/static/js/bundle.js:368971:58)
at http://localhost:3000/static/js/bundle.js:368994:7
another issue i noticed, is sometimes when i authenticate, the plugin icon doesn’t seems to show up,
and when i logout, it sometimes doesn’t go away
I tried it out, it does throw this error. Tried handling it through try-catch but still the error was persistent. What I’ll do is, I’ll note this down as an error that does not block user operation and we can prioritise fixing this in further version releases.
