diff --git a/.changeset/silly-moles-punch.md b/.changeset/silly-moles-punch.md new file mode 100644 index 00000000000..21e9b0a5234 --- /dev/null +++ b/.changeset/silly-moles-punch.md @@ -0,0 +1,7 @@ +--- +"@thirdweb-dev/react": patch +--- + +Remove unnecessary ConnectModal auto opening. + +This also fixes the issue where Connect Modal opens on page load when `ThirdwebProvider` is dynamically imported and rendered in the app. diff --git a/packages/react/src/wallet/ConnectWallet/Modal/ConnectModal.tsx b/packages/react/src/wallet/ConnectWallet/Modal/ConnectModal.tsx index f42f94e7028..b13be47f245 100644 --- a/packages/react/src/wallet/ConnectWallet/Modal/ConnectModal.tsx +++ b/packages/react/src/wallet/ConnectWallet/Modal/ConnectModal.tsx @@ -9,7 +9,6 @@ import { useDisconnect, useThirdwebAuthContext, useUser, - useWallet, useWalletContext, useWallets, } from "@thirdweb-dev/react-core"; @@ -241,41 +240,8 @@ export const ConnectModal = () => { }); }, [initialScreen, setIsWalletModalOpen, setScreen]); - const [prevConnectionStatus, setPrevConnectionStatus] = - useState(connectionStatus); - - useEffect(() => { - setPrevConnectionStatus(connectionStatus); - }, [connectionStatus]); - const disconnect = useDisconnect(); - const wallet = useWallet(); - const isWrapperConnected = !!wallet?.getPersonalWallet(); - - const isWrapperScreen = - typeof screen !== "string" && !!screen.personalWallets; - - // reopen the screen to complete wrapper wallet's next step after connecting a personal wallet - useEffect(() => { - if ( - !isWrapperConnected && - isWrapperScreen && - !isWalletModalOpen && - connectionStatus === "connected" && - prevConnectionStatus === "connecting" - ) { - setIsWalletModalOpen(true); - } - }, [ - isWalletModalOpen, - connectionStatus, - setIsWalletModalOpen, - isWrapperScreen, - isWrapperConnected, - prevConnectionStatus, - ]); - useEffect(() => { if (!isWalletModalOpen) { onModalUnmount(() => {