[SDK] Fix: fixes auto-connect on native <ConnectEmbed /> component (#7650)

Co-authored-by: Joaquim Verges <[email protected]>

Author: alecananian

.changeset/eighty-women-allow.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+react: fix native `<ConnectEmbed />` component not auto-connecting

packages/thirdweb/src/react/native/ui/connect/ConnectButton.tsx

@@ -16,7 +16,8 @@ import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.j
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import { useActiveWalletConnectionStatus } from "../../../core/hooks/wallets/useActiveWalletConnectionStatus.js";
 import { useConnectionManager } from "../../../core/providers/connection-manager.js";
-import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
+import { getDefaultWallets } from "../../wallets/defaultWallets.js";
+import { AutoConnect } from "../AutoConnect/AutoConnect.js";
 import { ThemedButton } from "../components/button.js";
 import { ThemedSpinner } from "../components/spinner.js";
 import { ThemedText } from "../components/text.js";
@@ -47,11 +48,6 @@ export function ConnectButton(props: ConnectButtonProps) {
   const status = useActiveWalletConnectionStatus();
   const connectionManager = useConnectionManager();
   const siweAuth = useSiweAuth(wallet, account, props.auth);
-  useAutoConnect({
-    ...props,
-    siweAuth: siweAuth,
-  });
-
   const fadeAnim = useRef(new Animated.Value(0)); // For background opacity
   const slideAnim = useRef(new Animated.Value(screenHeight)); // For bottom sheet position
 
@@ -109,6 +105,25 @@ export function ConnectButton(props: ConnectButtonProps) {
   const isConnectedAndNotAuth = isConnected && needsAuth;
   const isConnectedAndAuth = isConnected && !needsAuth;
 
+  const wallets = props.wallets || getDefaultWallets(props);
+
+  const autoConnectComp = props.autoConnect !== false && (
+    <AutoConnect
+      accountAbstraction={props.accountAbstraction}
+      appMetadata={props.appMetadata}
+      chain={props.chain}
+      client={props.client}
+      onConnect={props.onConnect}
+      siweAuth={siweAuth}
+      timeout={
+        typeof props.autoConnect === "boolean"
+          ? undefined
+          : props.autoConnect?.timeout
+      }
+      wallets={wallets}
+    />
+  );
+
   return (
     <View>
       {isConnectedAndAuth ? (
@@ -178,6 +193,7 @@ export function ConnectButton(props: ConnectButtonProps) {
           </Animated.View>
         </KeyboardAvoidingView>
       </Modal>
+      {autoConnectComp}
     </View>
   );
 }

packages/thirdweb/src/react/native/ui/connect/ConnectModal.tsx

@@ -14,10 +14,12 @@ import type { ConnectEmbedProps } from "../../../core/hooks/connection/ConnectEm
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
+import { useIsAutoConnecting } from "../../../core/hooks/wallets/useIsAutoConnecting.js";
 import { useConnectionManager } from "../../../core/providers/connection-manager.js";
 import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { radius, spacing } from "../../design-system/index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
+import { AutoConnect } from "../AutoConnect/AutoConnect.js";
 import { ThemedButton, ThemedButtonWithIcon } from "../components/button.js";
 import { type ContainerType, Header } from "../components/Header.js";
 import { RNImage } from "../components/RNImage.js";
@@ -32,6 +34,7 @@ import { TW_ICON, WALLET_ICON } from "../icons/svgs.js";
 import { ErrorView } from "./ErrorView.js";
 import { AllWalletsList, ExternalWalletsList } from "./ExternalWalletsList.js";
 import { InAppWalletUI, OtpLogin, PasskeyView } from "./InAppWalletUI.js";
+import { LoadingView } from "./LoadingView.js";
 import WalletLoadingThumbnail from "./WalletLoadingThumbnail.js";
 
 export type ModalState =
@@ -74,14 +77,43 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
     ...props,
     connectModal: { ...props },
   } as ConnectButtonProps;
-  return isConnected ? null : (
-    <ConnectModal
-      {...adaptedProps}
-      containerType="embed"
+  const isAutoConnecting = useIsAutoConnecting();
+  const wallets = props.wallets || getDefaultWallets(props);
+
+  const autoConnectComp = props.autoConnect !== false && (
+    <AutoConnect
+      accountAbstraction={props.accountAbstraction}
+      appMetadata={props.appMetadata}
+      chain={props.chain}
+      client={props.client}
+      onConnect={props.onConnect}
       siweAuth={siweAuth}
-      theme={theme}
+      timeout={
+        typeof props.autoConnect === "boolean"
+          ? undefined
+          : props.autoConnect?.timeout
+      }
+      wallets={wallets}
     />
   );
+
+  if (isAutoConnecting) {
+    return <LoadingView theme={theme} />;
+  }
+
+  return isConnected ? (
+    autoConnectComp
+  ) : (
+    <>
+      <ConnectModal
+        {...adaptedProps}
+        containerType="embed"
+        siweAuth={siweAuth}
+        theme={theme}
+      />
+      {autoConnectComp}
+    </>
+  );
 }
 
 export function ConnectModal(