thirdweb 5.32.1 → 5.32.2-nightly-229561e1a79fe2ab3f010c5a8659c7e0fc497ec3-20240703090013

package/dist/types/react/native/ui/components/WalletImage.d.ts

@@ -6,4 +6,5 @@ export declare const WalletImage: (props: {
     size: number;
     ensAvatar?: string | null;
 }) => import("react/jsx-runtime.js").JSX.Element;
+export declare function getAuthProviderImage(lastAuthProvider: string | null): string;
 //# sourceMappingURL=WalletImage.d.ts.map

package/dist/types/react/native/ui/components/WalletImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletImage.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/components/WalletImage.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAYlE,eAAO,MAAM,WAAW,UAAW;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,+CA0DA,CAAC"}
+{"version":3,"file":"WalletImage.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/components/WalletImage.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAYlE,eAAO,MAAM,WAAW,UAAW;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,+CAuCA,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,gBAAgB,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAe5E"}

package/dist/types/react/native/ui/connect/ConnectButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectButton.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/connect/ConnectButton.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAC;AAY/F;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,8CA8HtD"}
+{"version":3,"file":"ConnectButton.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/connect/ConnectButton.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAC;AAY/F;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,8CAmHtD"}

package/dist/types/react/native/ui/connect/ConnectModal.d.ts

@@ -1,4 +1,5 @@
 import type { MultiStepAuthProviderType } from "../../../../wallets/in-app/core/authentication/type.js";
+import type { InAppWalletAuth } from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
@@ -6,6 +7,13 @@ import type { ConnectEmbedProps } from "../../../core/hooks/connection/ConnectEm
 import { type ContainerType } from "../components/Header.js";
 export type ModalState = {
     screen: "base";
+} | {
+    screen: "connecting";
+    wallet: Wallet;
+    authMethod?: InAppWalletAuth;
+} | {
+    screen: "error";
+    error: string;
 } | {
     screen: "otp";
     auth: MultiStepAuthProviderType;

package/dist/types/react/native/ui/connect/ConnectModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectModal.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/connect/ConnectModal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wDAAwD,CAAC;AACxG,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAC;AAC/F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAM7F,OAAO,EAAE,KAAK,aAAa,EAAU,MAAM,yBAAyB,CAAC;AASrE,MAAM,MAAM,UAAU,GAClB;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,GAClB;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,yBAAyB,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAA;CAAE,GAC3E;IAAE,MAAM,EAAE,kBAAkB,CAAA;CAAE,CAAC;AAEnC;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qDAUpD;AAED,wBAAgB,YAAY,CAC1B,KAAK,EAAE,kBAAkB,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,aAAa,CAAC;CAC9B,8CAkKF"}
+{"version":3,"file":"ConnectModal.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/connect/ConnectModal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wDAAwD,CAAC;AACxG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iDAAiD,CAAC;AACvF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAC;AAC/F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAO7F,OAAO,EAAE,KAAK,aAAa,EAAU,MAAM,yBAAyB,CAAC;AAgBrE,MAAM,MAAM,UAAU,GAClB;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,GAClB;IAAE,MAAM,EAAE,YAAY,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,eAAe,CAAA;CAAE,GACtE;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAClC;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,yBAAyB,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAA;CAAE,GAC3E;IAAE,MAAM,EAAE,kBAAkB,CAAA;CAAE,CAAC;AAEnC;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qDAUpD;AAED,wBAAgB,YAAY,CAC1B,KAAK,EAAE,kBAAkB,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,aAAa,CAAC;CAC9B,8CAiPF"}

package/dist/types/react/native/ui/connect/ExternalWalletsList.d.ts

@@ -1,12 +1,14 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
-import type { useConnect } from "../../hooks/wallets/useConnect.js";
 import type { ContainerType } from "../components/Header.js";
 export type ExternalWalletsUiProps = {
     theme: Theme;
     client: ThirdwebClient;
-    connectMutation: ReturnType<typeof useConnect>;
+    connector: (args: {
+        wallet: Wallet;
+        connectFn: () => Promise<Wallet>;
+    }) => Promise<void>;
     containerType: ContainerType;
 };
 export declare function ExternalWalletsList(props: ExternalWalletsUiProps & {

package/dist/types/react/native/ui/connect/ExternalWalletsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalWalletsList.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/connect/ExternalWalletsList.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAGlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAK7D,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,eAAe,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAC/C,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,sBAAsB,GAAG;IAAE,eAAe,EAAE,MAAM,EAAE,CAAA;CAAE,8CAyC9D"}
+{"version":3,"file":"ExternalWalletsList.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/connect/ExternalWalletsList.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAGlE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAI7D,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,CAAC,IAAI,EAAE;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;KAClC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,sBAAsB,GAAG;IAAE,eAAe,EAAE,MAAM,EAAE,CAAA;CAAE,8CAsC9D"}

package/dist/types/react/native/ui/connect/InAppWalletUI.d.ts

@@ -1,15 +1,19 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { MultiStepAuthProviderType } from "../../../../wallets/in-app/core/authentication/type.js";
+import type { InAppWalletAuth } from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
-import type { useConnect } from "../../hooks/wallets/useConnect.js";
 import type { ModalState } from "./ConnectModal.js";
 type InAppWalletFormUIProps = {
     client: ThirdwebClient;
     theme: Theme;
     wallet: Wallet<"inApp">;
     setScreen: (screen: ModalState) => void;
-    connectMutation: ReturnType<typeof useConnect>;
+    connector: (args: {
+        wallet: Wallet;
+        connectFn: () => Promise<Wallet>;
+        authMethod?: InAppWalletAuth;
+    }) => Promise<void>;
 };
 export declare function InAppWalletUI(props: InAppWalletFormUIProps): import("react/jsx-runtime.js").JSX.Element;
 export declare function OtpLogin(props: InAppWalletFormUIProps & {

package/dist/types/react/native/ui/connect/InAppWalletUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InAppWalletUI.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/connect/InAppWalletUI.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,wDAAwD,CAAC;AAMhE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAGlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAcpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAgBpD,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,SAAS,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;CAChD,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,sBAAsB,8CAuC1D;AAqHD,wBAAgB,QAAQ,CACtB,KAAK,EAAE,sBAAsB,GAAG;IAC9B,IAAI,EAAE,yBAAyB,CAAC;CACjC,8CAiFF"}
+{"version":3,"file":"InAppWalletUI.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/connect/InAppWalletUI.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,wDAAwD,CAAC;AAChE,OAAO,KAAK,EACV,eAAe,EAEhB,MAAM,iDAAiD,CAAC;AAEzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAelE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAgBpD,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,SAAS,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,CAAC,IAAI,EAAE;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;QACjC,UAAU,CAAC,EAAE,eAAe,CAAC;KAC9B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,sBAAsB,8CAuC1D;AA+GD,wBAAgB,QAAQ,CACtB,KAAK,EAAE,sBAAsB,GAAG;IAC9B,IAAI,EAAE,yBAAyB,CAAC;CACjC,8CAmEF"}

package/dist/types/react/native/ui/connect/WalletLoadingThumbnail.d.ts

@@ -0,0 +1,10 @@
+import type { Theme } from "../../../core/design-system/index.js";
+interface Props {
+    theme: Theme;
+    children?: React.ReactNode;
+    imageSize: number;
+    showError?: boolean;
+}
+declare function WalletLoadingThumbnail({ theme, children, showError, imageSize, }: Props): import("react/jsx-runtime.js").JSX.Element;
+export default WalletLoadingThumbnail;
+//# sourceMappingURL=WalletLoadingThumbnail.d.ts.map

package/dist/types/react/native/ui/connect/WalletLoadingThumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletLoadingThumbnail.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/connect/WalletLoadingThumbnail.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAQlE,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,iBAAS,sBAAsB,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,GACV,EAAE,KAAK,8CA8DP;AAYD,eAAe,sBAAsB,CAAC"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.32.1";
+export declare const version = "5.32.2-nightly-229561e1a79fe2ab3f010c5a8659c7e0fc497ec3-20240703090013";
 //# sourceMappingURL=version.d.ts.map

package/dist/types/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,2EAA2E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.32.1",
+  "version": "5.32.2-nightly-229561e1a79fe2ab3f010c5a8659c7e0fc497ec3-20240703090013",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

package/src/react/core/hooks/wallets/useConnect.ts

@@ -18,13 +18,13 @@ export function useConnectCore(
       // reset error state
       setError(null);
       if (typeof walletOrFn !== "function") {
-        return connect(walletOrFn, options);
+        return await connect(walletOrFn, options);
       }
 
       setIsConnecting(true);
       try {
         const w = await walletOrFn();
-        return connect(w, options);
+        return await connect(w, options);
       } catch (e) {
         console.error(e);
         setError(e as Error);

package/src/react/native/ui/components/WalletImage.tsx

@@ -42,26 +42,7 @@ export const WalletImage = (props: {
         (wallet.id === "inApp" || wallet.id === "smart")
       ) {
         const lastAuthProvider = await getLastAuthProvider(nativeLocalStorage);
-        switch (lastAuthProvider) {
-          case "phone":
-            imageData = PHONE_ICON;
-            break;
-          case "email":
-            imageData = EMAIL_ICON;
-            break;
-          case "google":
-            imageData = GOOGLE_ICON;
-            break;
-          case "apple":
-            imageData = APPLE_ICON;
-            break;
-          case "facebook":
-            imageData = FACEBOOK_ICON;
-            break;
-          default:
-            imageData = WALLET_ICON;
-            break;
-        }
+        imageData = getAuthProviderImage(lastAuthProvider);
         return imageData;
       }
       try {
@@ -79,3 +60,20 @@ export const WalletImage = (props: {
   const data = ensAvatar || imageData || WALLET_ICON;
   return <RNImage theme={props.theme} data={data} size={size} />;
 };
+
+export function getAuthProviderImage(lastAuthProvider: string | null): string {
+  switch (lastAuthProvider) {
+    case "phone":
+      return PHONE_ICON;
+    case "email":
+      return EMAIL_ICON;
+    case "google":
+      return GOOGLE_ICON;
+    case "apple":
+      return APPLE_ICON;
+    case "facebook":
+      return FACEBOOK_ICON;
+    default:
+      return WALLET_ICON;
+  }
+}

package/src/react/native/ui/connect/ConnectButton.tsx

@@ -138,17 +138,6 @@ export function ConnectButton(props: ConnectButtonProps) {
                   wallet={wallet}
                   account={account}
                 />
-              ) : status === "connecting" ? (
-                <View
-                  style={{
-                    flexDirection: "column",
-                    flex: 1,
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                >
-                  <ThemedSpinner color={theme.colors.primaryText} size={32} />
-                </View>
               ) : (
                 <ConnectModal
                   {...props}

package/src/react/native/ui/connect/ConnectModal.tsx

@@ -1,28 +1,39 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { SvgXml } from "react-native-svg";
 import type { MultiStepAuthProviderType } from "../../../../wallets/in-app/core/authentication/type.js";
+import type { InAppWalletAuth } from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import type { ConnectEmbedProps } from "../../../core/hooks/connection/ConnectEmbedProps.js";
 import { genericWalletIcon } from "../../../core/utils/socialIcons.js";
+import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { radius, spacing } from "../../design-system/index.js";
 import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useConnect } from "../../hooks/wallets/useConnect.js";
+import { connectionManager } from "../../index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 import { type ContainerType, Header } from "../components/Header.js";
+import { RNImage } from "../components/RNImage.js";
+import {
+  WalletImage,
+  getAuthProviderImage,
+} from "../components/WalletImage.js";
 import { ThemedButtonWithIcon } from "../components/button.js";
 import { Spacer } from "../components/spacer.js";
 import { ThemedText } from "../components/text.js";
 import { ThemedView } from "../components/view.js";
 import { TW_ICON } from "../icons/svgs.js";
+import { ErrorView } from "./ErrorView.js";
 import { ExternalWalletsList } from "./ExternalWalletsList.js";
 import { InAppWalletUI, OtpLogin } from "./InAppWalletUI.js";
+import WalletLoadingThumbnail from "./WalletLoadingThumbnail.js";
 
 export type ModalState =
   | { screen: "base" }
+  | { screen: "connecting"; wallet: Wallet; authMethod?: InAppWalletAuth }
+  | { screen: "error"; error: string }
   | { screen: "otp"; auth: MultiStepAuthProviderType; wallet: Wallet<"inApp"> }
   | { screen: "external_wallets" };
 
@@ -63,17 +74,44 @@ export function ConnectModal(
     containerType: ContainerType;
   },
 ) {
-  const { theme, client, containerType, accountAbstraction, onConnect } = props;
-  const connectMutation = useConnect({
+  const {
+    theme,
     client,
+    containerType,
     accountAbstraction,
-    onConnect: (wallet) => {
-      props.onClose?.();
-      onConnect?.(wallet);
+    onConnect,
+    onClose,
+  } = props;
+  const [modalState, setModalState] = useState<ModalState>({ screen: "base" });
+  const connector = useCallback(
+    async (args: {
+      wallet: Wallet;
+      connectFn: () => Promise<Wallet>;
+      authMethod?: InAppWalletAuth;
+    }) => {
+      setModalState({
+        screen: "connecting",
+        wallet: args.wallet,
+        authMethod: args.authMethod,
+      });
+      try {
+        const w = await args.connectFn();
+        await connectionManager.connect(w, {
+          client,
+          accountAbstraction,
+          onConnect,
+        });
+        onClose?.();
+      } catch (error) {
+        setModalState({
+          screen: "error",
+          error: (error as Error)?.message || "unknown error",
+        });
+      }
     },
-  });
+    [client, accountAbstraction, onConnect, onClose],
+  );
   const wallets = props.wallets || getDefaultWallets(props);
-  const [modalState, setModalState] = useState<ModalState>({ screen: "base" });
   const inAppWallet = wallets.find((wallet) => wallet.id === "inApp") as
     | Wallet<"inApp">
     | undefined;
@@ -105,7 +143,7 @@ export function ConnectModal(
               client={client}
               setScreen={setModalState}
               theme={theme}
-              connectMutation={connectMutation}
+              connector={connector}
             />
           </View>
           {containerType === "modal" ? (
@@ -131,9 +169,61 @@ export function ConnectModal(
             theme={theme}
             externalWallets={externalWallets}
             client={client}
-            connectMutation={connectMutation}
+            connector={connector}
+            containerType={containerType}
+          />
+        </>
+      );
+      break;
+    }
+    case "connecting": {
+      content = (
+        <>
+          <Header
+            theme={theme}
+            onClose={props.onClose}
             containerType={containerType}
+            onBack={() => setModalState({ screen: "base" })}
+          />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="lg" />
+          )}
+          <LoadingView
+            theme={theme}
+            wallet={modalState.wallet}
+            authProvider={modalState.authMethod}
           />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="md" />
+          )}
+        </>
+      );
+      break;
+    }
+    case "error": {
+      content = (
+        <>
+          <Header
+            theme={theme}
+            onClose={props.onClose}
+            containerType={containerType}
+            onBack={() => setModalState({ screen: "base" })}
+          />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="lg" />
+          )}
+          <ErrorView theme={theme} title={modalState.error} />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="md" />
+          )}
         </>
       );
       break;
@@ -165,7 +255,7 @@ export function ConnectModal(
                   setScreen={setModalState}
                   client={client}
                   theme={theme}
-                  connectMutation={connectMutation}
+                  connector={connector}
                 />
                 {externalWallets.length > 0 ? (
                   <>
@@ -199,7 +289,7 @@ export function ConnectModal(
                   theme={theme}
                   externalWallets={externalWallets}
                   client={client}
-                  connectMutation={connectMutation}
+                  connector={connector}
                   containerType={containerType}
                 />
               </View>
@@ -225,6 +315,56 @@ export function ConnectModal(
   );
 }
 
+function LoadingView({
+  theme,
+  wallet,
+  authProvider,
+}: { theme: Theme; wallet: Wallet; authProvider?: InAppWalletAuth }) {
+  const walletInfo = useWalletInfo(wallet.id);
+  return (
+    <View
+      style={{
+        flexDirection: "column",
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: spacing.xl,
+      }}
+    >
+      <WalletLoadingThumbnail theme={theme} imageSize={100}>
+        {authProvider ? (
+          <View
+            style={{
+              borderRadius: spacing.md,
+              padding: spacing.xs,
+            }}
+          >
+            <RNImage
+              theme={theme}
+              size={90}
+              data={getAuthProviderImage(authProvider)}
+            />
+          </View>
+        ) : (
+          <WalletImage theme={theme} size={90} wallet={wallet} />
+        )}
+      </WalletLoadingThumbnail>
+      <Spacer size="xl" />
+      <ThemedText theme={theme} type="subtitle">
+        {authProvider
+          ? `Connecting with ${capitalizeFirstLetter(authProvider)}`
+          : "Awaiting confirmation"}
+      </ThemedText>
+      <Spacer size="sm" />
+      <ThemedText theme={theme} type="subtext">
+        {authProvider
+          ? `Sign into your ${capitalizeFirstLetter(authProvider)} account`
+          : `Accept the connection request in ${walletInfo.data?.name}`}
+      </ThemedText>
+    </View>
+  );
+}
+
 function OrDivider({ theme }: { theme: Theme }) {
   return (
     <View
@@ -284,6 +424,11 @@ function PoweredByThirdweb({ theme }: { theme: Theme }) {
   );
 }
 
+function capitalizeFirstLetter(str: string): string {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
 const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,

package/src/react/native/ui/connect/ExternalWalletsList.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
   Image,
   Linking,
@@ -12,32 +11,33 @@ import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { useWalletImage, useWalletInfo } from "../../../core/utils/wallet.js";
 import { spacing } from "../../design-system/index.js";
-import type { useConnect } from "../../hooks/wallets/useConnect.js";
 import type { ContainerType } from "../components/Header.js";
 import { Skeleton } from "../components/Skeleton.js";
-import { ThemedSpinner } from "../components/spinner.js";
 import { ThemedText } from "../components/text.js";
 
 export type ExternalWalletsUiProps = {
   theme: Theme;
   client: ThirdwebClient;
-  connectMutation: ReturnType<typeof useConnect>;
+  connector: (args: {
+    wallet: Wallet;
+    connectFn: () => Promise<Wallet>;
+  }) => Promise<void>;
   containerType: ContainerType;
 };
 
 export function ExternalWalletsList(
   props: ExternalWalletsUiProps & { externalWallets: Wallet[] },
 ) {
-  const { connectMutation, client, theme } = props;
-  const [selectedWallet, setSelectedWallet] = useState<Wallet>();
-
+  const { connector, client, theme } = props;
   const connectWallet = (wallet: Wallet) => {
-    setSelectedWallet(wallet);
-    connectMutation.connect(async () => {
-      await wallet.connect({
-        client,
-      });
-      return wallet;
+    connector({
+      wallet,
+      connectFn: async () => {
+        await wallet.connect({
+          client,
+        });
+        return wallet;
+      },
     });
   };
 
@@ -57,9 +57,6 @@ export function ExternalWalletsList(
               wallet={wallet}
               connectWallet={connectWallet}
               theme={theme}
-              isConnecting={
-                connectMutation.isConnecting && wallet.id === selectedWallet?.id
-              }
             />
           ))}
         </View>
@@ -72,32 +69,18 @@ export function ExternalWalletsList(
 function ExternalWalletRow(props: {
   theme: Theme;
   wallet: Wallet;
-  isConnecting: boolean;
   connectWallet: (wallet: Wallet) => void;
 }) {
-  const { wallet, theme, isConnecting, connectWallet } = props;
+  const { wallet, theme, connectWallet } = props;
   const imageQuery = useWalletImage(wallet.id);
   const infoQuery = useWalletInfo(wallet.id);
   return (
     <TouchableOpacity style={styles.row} onPress={() => connectWallet(wallet)}>
       {imageQuery.data ? (
-        isConnecting ? (
-          <View
-            style={{
-              width: 52,
-              height: 52,
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <ThemedSpinner color={theme.colors.primaryText} />
-          </View>
-        ) : (
-          <Image
-            source={{ uri: imageQuery.data ?? "" }}
-            style={{ width: 52, height: 52, borderRadius: 6 }}
-          />
-        )
+        <Image
+          source={{ uri: imageQuery.data ?? "" }}
+          style={{ width: 52, height: 52, borderRadius: 6 }}
+        />
       ) : (
         <Skeleton
           theme={theme}