Skip to content

Commit 426bb8b

Browse files
[SDK] Fix: fixes auto-connect on native <ConnectEmbed /> component (#7650)
Co-authored-by: Joaquim Verges <joaquim.verges@gmail.com>
1 parent 823af01 commit 426bb8b

File tree

3 files changed

+64
-11
lines changed

3 files changed

+64
-11
lines changed

.changeset/eighty-women-allow.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
react: fix native `<ConnectEmbed />` component not auto-connecting

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

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.j
1616
import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
1717
import { useActiveWalletConnectionStatus } from "../../../core/hooks/wallets/useActiveWalletConnectionStatus.js";
1818
import { useConnectionManager } from "../../../core/providers/connection-manager.js";
19-
import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
19+
import { getDefaultWallets } from "../../wallets/defaultWallets.js";
20+
import { AutoConnect } from "../AutoConnect/AutoConnect.js";
2021
import { ThemedButton } from "../components/button.js";
2122
import { ThemedSpinner } from "../components/spinner.js";
2223
import { ThemedText } from "../components/text.js";
@@ -47,11 +48,6 @@ export function ConnectButton(props: ConnectButtonProps) {
4748
const status = useActiveWalletConnectionStatus();
4849
const connectionManager = useConnectionManager();
4950
const siweAuth = useSiweAuth(wallet, account, props.auth);
50-
useAutoConnect({
51-
...props,
52-
siweAuth: siweAuth,
53-
});
54-
5551
const fadeAnim = useRef(new Animated.Value(0)); // For background opacity
5652
const slideAnim = useRef(new Animated.Value(screenHeight)); // For bottom sheet position
5753

@@ -109,6 +105,25 @@ export function ConnectButton(props: ConnectButtonProps) {
109105
const isConnectedAndNotAuth = isConnected && needsAuth;
110106
const isConnectedAndAuth = isConnected && !needsAuth;
111107

108+
const wallets = props.wallets || getDefaultWallets(props);
109+
110+
const autoConnectComp = props.autoConnect !== false && (
111+
<AutoConnect
112+
accountAbstraction={props.accountAbstraction}
113+
appMetadata={props.appMetadata}
114+
chain={props.chain}
115+
client={props.client}
116+
onConnect={props.onConnect}
117+
siweAuth={siweAuth}
118+
timeout={
119+
typeof props.autoConnect === "boolean"
120+
? undefined
121+
: props.autoConnect?.timeout
122+
}
123+
wallets={wallets}
124+
/>
125+
);
126+
112127
return (
113128
<View>
114129
{isConnectedAndAuth ? (
@@ -178,6 +193,7 @@ export function ConnectButton(props: ConnectButtonProps) {
178193
</Animated.View>
179194
</KeyboardAvoidingView>
180195
</Modal>
196+
{autoConnectComp}
181197
</View>
182198
);
183199
}

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

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@ import type { ConnectEmbedProps } from "../../../core/hooks/connection/ConnectEm
1414
import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
1515
import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
1616
import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
17+
import { useIsAutoConnecting } from "../../../core/hooks/wallets/useIsAutoConnecting.js";
1718
import { useConnectionManager } from "../../../core/providers/connection-manager.js";
1819
import { useWalletInfo } from "../../../core/utils/wallet.js";
1920
import { radius, spacing } from "../../design-system/index.js";
2021
import { getDefaultWallets } from "../../wallets/defaultWallets.js";
22+
import { AutoConnect } from "../AutoConnect/AutoConnect.js";
2123
import { ThemedButton, ThemedButtonWithIcon } from "../components/button.js";
2224
import { type ContainerType, Header } from "../components/Header.js";
2325
import { RNImage } from "../components/RNImage.js";
@@ -32,6 +34,7 @@ import { TW_ICON, WALLET_ICON } from "../icons/svgs.js";
3234
import { ErrorView } from "./ErrorView.js";
3335
import { AllWalletsList, ExternalWalletsList } from "./ExternalWalletsList.js";
3436
import { InAppWalletUI, OtpLogin, PasskeyView } from "./InAppWalletUI.js";
37+
import { LoadingView } from "./LoadingView.js";
3538
import WalletLoadingThumbnail from "./WalletLoadingThumbnail.js";
3639

3740
export type ModalState =
@@ -74,14 +77,43 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
7477
...props,
7578
connectModal: { ...props },
7679
} as ConnectButtonProps;
77-
return isConnected ? null : (
78-
<ConnectModal
79-
{...adaptedProps}
80-
containerType="embed"
80+
const isAutoConnecting = useIsAutoConnecting();
81+
const wallets = props.wallets || getDefaultWallets(props);
82+
83+
const autoConnectComp = props.autoConnect !== false && (
84+
<AutoConnect
85+
accountAbstraction={props.accountAbstraction}
86+
appMetadata={props.appMetadata}
87+
chain={props.chain}
88+
client={props.client}
89+
onConnect={props.onConnect}
8190
siweAuth={siweAuth}
82-
theme={theme}
91+
timeout={
92+
typeof props.autoConnect === "boolean"
93+
? undefined
94+
: props.autoConnect?.timeout
95+
}
96+
wallets={wallets}
8397
/>
8498
);
99+
100+
if (isAutoConnecting) {
101+
return <LoadingView theme={theme} />;
102+
}
103+
104+
return isConnected ? (
105+
autoConnectComp
106+
) : (
107+
<>
108+
<ConnectModal
109+
{...adaptedProps}
110+
containerType="embed"
111+
siweAuth={siweAuth}
112+
theme={theme}
113+
/>
114+
{autoConnectComp}
115+
</>
116+
);
85117
}
86118

87119
export function ConnectModal(

0 commit comments

Comments
 (0)