thirdweb-dev / js

Best in class web3 SDKs for Browser, Node and Mobile apps
https://thirdweb.com
Apache License 2.0
420 stars 314 forks source link

switchNetwork is undefined when connected through walletConnect. #710

Closed codescrafter closed 1 year ago

codescrafter commented 1 year ago

Hi. I am facing an issue regarding network switching. When connected through useWalletConnect, the switch network is always undefined. If I connect the wallet using useMetamask, it works just fine. I am using thirdweb version 3.10.3, react version 18.1.0, Next v13.2.3. Here is how I configured thirdweb.

` import "../styles/globals.css"; import { appWithTranslation } from "next-i18next"; import { MusicProvider } from "../context/music-context"; import { ModalsProvider } from "../context/Modals-context"; import { AppContextProvider } from "../context/app-context"; import { ThirdwebProvider } from "@thirdweb-dev/react"; import {Goerli,Ethereum} from "@thirdweb-dev/chains"

export const desiredChainId = process.env.PRODUCTION === "true" ? Ethereum: Goerli;

function MyApp({ Component, pageProps }) { return (

<ThirdwebProvider activeChain={desiredChainId}>
  <MusicProvider>
    <AppContextProvider>
      <ModalsProvider>
        <Component {...pageProps} />
      </ModalsProvider>
    </AppContextProvider>
  </MusicProvider>
</ThirdwebProvider>

); }

export default appWithTranslation(MyApp); Here is how I am trying to use it. import React, { useContext, useEffect, useState } from "react"; import { useMetamask, useWalletConnect, useNetwork, useAddress, useDisconnect, ChainId, } from "@thirdweb-dev/react"; import { shortenAddress } from "../src/utils/shortenAddress"; import { addTokenFunction } from "../src/utils/web3utils"; import { useTranslation } from "next-i18next"; import { useRouter } from "next/router"; import { AppContext } from "../context/app-context";

const ModalWallet = ({ SFTDemo }) => { const connectWithMetamask = useMetamask(); const connectWithWalletConnect = useWalletConnect(); const disconnectWallet = useDisconnect(); const address = useAddress(); const network = useNetwork(); const isGoerli = network[0]?.data?.chain?.name == "Goerli"; const [, switchNetwork] = useNetwork(); console.log("switchNetwork", switchNetwork); `

MananTank commented 1 year ago

Hey @abubakarafzal444 switchNetwork from useNetwork will be undefined if the wallet is not connected or wallet does not support programatic switching ( wallet connect v1, v2 or any other wallet connected through QR code scan )

in the latest version of react sdk, we have a new hook called useSwitchChain which always returns a function for switching network - you can try it out https://portal.thirdweb.com/react/react.useSwitchChain