Not able to switch chain using wagmi useSwitchNetwork() hook.
When we click on button to change the chain sucess function gets called and we dont get any error but still chain didn’t get switched. As asked I have all the dependencies. web3auth init, instance as well as wagmi provider, login code, component we are using to switch chain and screenshot of browser console.
Note** - we have removed @ from web3auth dependencies because we were not able to create this post.
Package.json - these are dependencies
dependencies":{
“newrelic/next”:“^0.7.0”,
“parifi/references”:“0.2.2”,
“pythnetwork/pyth-evm-js”:“^1.29.2”,
“safe-global/relay-kit”:“^1.3.0”,
“toruslabs/eccrypto”:“^4.0.0”,
“types/js-cookie”:“^3.0.6”,
“web3auth/base”:“^7.1.0”,
“web3auth/ethereum-provider”:“^7.1.2”,
“web3auth/no-modal”:“^7.1.2”,
“web3auth/openlogin-adapter”:“^7.1.2”,
“web3auth/web3auth-wagmi-connector”:“^5.0.1”,
“newrelic”:“^11.5.0”,
“next”:“^14.0.3”,
“pino”:“^8.16.2”,
“react”:“^18.2.0”,
“swr”:“^2.2.4”,
“viem”:“^1.19.6”,
“wagmi”:“^1.4.13”
},
“devDependencies”:{
“@safe-global/safe-core-sdk-types”:“^2.3.0”,
“@types/node”:“^20.9.4”,
“@types/react”:“^18.2.38”,
“typescript”:“^5.3.2”
}
Wagmi and web3auth config and instance
const USED_CHAINS= [arbitrumSepolia,arbitrumGoerli]
const{ chains,publicClient }= configureChains(USED_CHAINS, [
publicProvider(),
alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY|| ‘’ }),
]);
// Create Web3Auth Instance
constchainConfig ={
chainNamespace:CHAIN_NAMESPACES.EIP155,
chainId:‘0x’+ chains[0].id.toString(16),
rpcTarget: chains[0].rpcUrls.default.http[0],
displayName: chains[0].name,
tickerName: chains[0].nativeCurrency.name,
ticker: chains[0].nativeCurrency.symbol,
blockExplorer: chains[0].blockExplorers?.default.url || ‘’,
};
constoptions:Web3AuthNoModalOptions ={
clientId: process.env.NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID|| ‘’,
chainConfig,
web3AuthNetwork:OPENLOGIN_NETWORK.CYAN,
};
constweb3AuthInstance =new Web3AuthNoModal(options);
// Add openlogin adapter for customisations
constprivateKeyProvider =new EthereumPrivateKeyProvider({
config:{ chainConfig },
});
constopenloginAdapterInstance =new OpenloginAdapter({
privateKeyProvider,
adapterSettings:{
network:OPENLOGIN_NETWORK.CYAN,
uxMode:‘redirect’,
redirectUrl:
process.env.NEXT_PUBLIC_WEB3_AUTH_REDIRECT_URL||
‘https://test-ui-dev.parifi.org/’,//Web3Auth Redirect URL after user sucessfully connect wallet
sessionTime:259200, // 3 days (6060243) in seconds*
whiteLabel:{
appName:‘Parifi’,
appUrl:‘https://parifi.org’,
defaultLanguage:‘en’,// en, de, ja, ko, zh, es, fr, pt, nl
theme:{
primary:‘#ea633e’,
},
},
},
});
web3AuthInstance.configureAdapter(openloginAdapterInstance);
typeLoginProvider = (typeof LOGIN_PROVIDER)[keyoftypeof LOGIN_PROVIDER];
exportfunction getWeb3AuthConnector(
loginProvider:LoginProvider,
hint?:string,
){
returnnew Web3AuthConnector({
chains: chains,
options:{
web3AuthInstance,
loginParams:{
loginProvider: loginProvider,
extraLoginOptions:{
login_hint: hint,
},
},
},
});
}
constprojectId =‘be96f3154a4bbc8744b43d4f9d956088’;
exportconst coinbaseConnector= newCoinbaseWalletConnector({
chains,
options:{
appName:‘Parifi’,
},
});
exportconst injectedConnector= newInjectedConnector({
chains,
});
exportconst walletConnectConnector= newWalletConnectConnector({
chains,
options:{ projectId },
});
constwagmiConfig =createConfig({
autoConnect:true,
connectors: [
injectedConnector,
walletConnectConnector,
coinbaseConnector,
…Object.values(LOGIN_PROVIDER)
.filter(
(provider)=>
provider !== ‘email_passwordless’&& provider !==‘sms_passwordless’,
)
.map((provider)=> getWeb3AuthConnector(provider)),
],
publicClient,
});
exportdefault functionWagmiProvider({children }:{ children:ReactNode }){
return<WagmiConfigconfig={wagmiConfig}>{children};
}
login code
const { connect }= useConnect({
onSuccess:(data)=> {
Cookies.set(‘login’,‘true’);
Cookies.set(‘chainId’,String(data.chain.id))
if (!data.chain.unsupported)
router.push(/${chainNameById[data.chain.id]}/perpetuals?market=ETH);
},
});
//router.push is not working in onSucess, cookies get set but router.push doesnt work.
constgeneralConnector =({
connector,
loginProvider,
}:{
connector:Connector<any,any>;
loginProvider:string;
}) => {
if (!isClientSide()) return;
logger.info(‘generalConnector’,{ connector, loginProvider });
returnconnect({ connector: connector });
};
SwitchChainComponent -
import{ useNetwork,useSwitchNetwork } from’wagmi’
constSwitchChain =() => {
const{ chain }= useNetwork()
const{ chains,error,pendingChainId,switchNetwork,status } =
useSwitchNetwork({
onSuccess:(data)=> {
console.log(“inside onSucess”)
console.log(data)
}
})
return (
