We recently upgraded to the latest version of Web3Auth to support chain switch. However, we’ve noticed a significant slowdown in the wallet login process. The total time for a user to log in using socials has increased considerably, impacting the overall user experience.
Could you please investigate this issue? I’ve provided all the relevant integration details below for your reference.
“dependencies”: {
“web3auth/base”: “^8.0.0”, // removed @ to create this post
“web3auth/ethereum-provider”: “^8.0.1”, // removed @ to create this post
“web3auth/no-modal”: “^8.0.1”, // removed @ to create this post
“web3auth/openlogin-adapter”: “^8.0.1”, // removed @ to create this post
“web3auth/wallet-services-plugin”: “^8.0.1”, // removed @ to create this post
“web3auth/web3auth-wagmi-connector”: “^6.0.0”, // removed @ to create this post
“ethers”: “^5.7.2”,
“next”: “^14.0.3”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“viem”: “^2.7.12”,
“wagmi”: “^2.5.7”
},
“devDependencies”: {
“safe-global/safe-core-sdk-types”: “^2.3.0”, // removed @ to create this post
“types/node”: “^20.9.4”, // removed @ to create this post
“types/react”: “^18.2.38”, // removed @ to create this post
“types/react-dom”: “^18.2.17”, // removed @ to create this post
“typescript”: “^5.3.2”
}
web3authInsatnce
import { Web3AuthNoModal } from ‘web3auth/no-modal’; // removed @ to create this post
import { EthereumPrivateKeyProvider } from ‘web3auth/ethereum-provider’; // removed @ to create this post
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK, UX_MODE } from ‘web3auth/base’; // removed @ to create this post
import { Chain } from ‘wagmi/chains’;
import { OpenloginAdapter } from ‘web3auth/openlogin-adapter’; // removed @ to create this post
export default function Web3AuthConnectorInstance(chains: Chain[]) {
// Create Web3Auth Instance
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: ‘0x’ + chains[0].id.toString(16),
rpcTarget: chains[0].rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
displayName: chains[0].name,
tickerName: chains[0].nativeCurrency?.name,
ticker: chains[0].nativeCurrency?.symbol,
blockExplorerUrl: chains[0].blockExplorers?.default.url[0] as string,
};
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
const web3AuthInstance = new Web3AuthNoModal({
clientId: process.env.NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID || ‘’,
chainConfig,
privateKeyProvider,
uiConfig: {
appName: ‘Parifi’,
appUrl: ‘https://parifi.org’,
defaultLanguage: ‘en’, // en, de, ja, ko, zh, es, fr, pt, nl
theme: {
primary: ‘#ea633e’,
},
},
web3AuthNetwork: WEB3AUTH_NETWORK.CYAN,
enableLogging: true,
});
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
uxMode: UX_MODE.REDIRECT,
},
});
web3AuthInstance.configureAdapter(openloginAdapter);
return web3AuthInstance;
}
wagmiConfig
‘use client’;
import { type ReactNode } from ‘react’;
import { createConfig, http } from ‘wagmi’;
import { walletConnect } from ‘wagmi/connectors’;
import { injected } from ‘wagmi/connectors’;
import { coinbaseWallet } from ‘wagmi/connectors’;
import { arbitrumSepolia } from ‘wagmi/chains’;
import { Web3AuthConnector } from ‘@web3auth/web3auth-wagmi-connector’;
import Web3AuthConnectorInstance from ‘./web3AuthConnectorInstance’;
import { LOGIN_PROVIDER } from ‘@web3auth/openlogin-adapter’;
import { WagmiProvider } from ‘wagmi’;
import { QueryClient, QueryClientProvider } from ‘@tanstack/react-query’;
type LoginProvider = (typeof LOGIN_PROVIDER)[keyof typeof LOGIN_PROVIDER];
export function getWeb3AuthConnector(
loginProvider: LoginProvider,
hint?: string,
) {
return Web3AuthConnector({
// Web3AuthConnectorInstance([mainnet, sepolia, polygon]),
web3AuthInstance: Web3AuthConnectorInstance([arbitrumSepolia]),
loginParams: {
loginProvider: loginProvider,
extraLoginOptions: {
login_hint: hint,
},
},
});
}
const projectId = ‘’;
export const coinbaseConnector = coinbaseWallet({
appName: ‘Parifi’,
});
export const injectedConnector = injected();
export const walletConnectConnector = walletConnect({
projectId: projectId,
showQrModal: true,
});
export const wagmiConfig = createConfig({
chains: [arbitrumSepolia],
transports: {
[arbitrumSepolia.id]: http(),
},
connectors: [
injected(),
walletConnect({
projectId: projectId,
showQrModal: true,
}),
coinbaseWallet({
appName: ‘Parifi’,
}),
…Object.values(LOGIN_PROVIDER)
.filter(
(provider) =>
provider !== ‘email_passwordless’ && provider !== ‘sms_passwordless’,
)
.map((provider) => getWeb3AuthConnector(provider)),
],
});
const queryClient = new QueryClient();
export default function WagmiProviderP({ children }: { children: ReactNode }) {
return (
{children}
);
}
login code
const { connect }= useConnect({
onSuccess:(data)=> {
if (!data.chain.unsupported)
router.push(/${chainNameById[data.chain.id]}/perpetuals?market=ETH);
},
});
constgeneralConnector =({
connector,
loginProvider,
}:{
connector:Connector<any,any>;
loginProvider:string;
}) => {
if (!isClientSide()) return;
logger.info(‘generalConnector’,{ connector, loginProvider });
returnconnect({ connector: connector });
};
generalConnector({ connector:getWeb3AuthConnector(‘google’), loginProvider:‘google’, }) } {icons.google_icon}
