diff --git a/packages/thirdweb/src/react/native/ui/connect/ConnectModal.tsx b/packages/thirdweb/src/react/native/ui/connect/ConnectModal.tsx
index 050d7a3d179..b2800d9f676 100644
--- a/packages/thirdweb/src/react/native/ui/connect/ConnectModal.tsx
+++ b/packages/thirdweb/src/react/native/ui/connect/ConnectModal.tsx
@@ -475,6 +475,7 @@ function WalletLoadingView({
authProvider?: InAppWalletAuth;
}) {
const walletInfo = useWalletInfo(wallet.id);
+ const authProviderName = typeof authProvider === 'string' ? authProvider : authProvider?.type;
return (
- {authProvider ? (
+ {authProviderName ? (
@@ -516,14 +517,14 @@ function WalletLoadingView({
- {authProvider
- ? `Connecting with ${capitalizeFirstLetter(authProvider)}`
+ {authProviderName
+ ? `Connecting with ${capitalizeFirstLetter(authProviderName)}`
: "Awaiting confirmation"}
- {authProvider
- ? `Signing into your ${capitalizeFirstLetter(authProvider)} account`
+ {authProviderName
+ ? `Signing into your ${capitalizeFirstLetter(authProviderName)} account`
: `Accept the connection request in ${walletInfo.data?.name}`}
diff --git a/packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx b/packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
index e555fea3031..a33b958e001 100644
--- a/packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
+++ b/packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
@@ -9,8 +9,10 @@ import type {
PreAuthArgsType,
} from "../../../../wallets/in-app/core/authentication/types.js";
import type {
+ AuthOption,
InAppWalletAuth,
InAppWalletSocialAuth,
+ AuthOptionWithOptions,
} from "../../../../wallets/in-app/core/wallet/types.js";
import { preAuthenticate } from "../../../../wallets/in-app/native/auth/index.js";
import { hasStoredPasskey } from "../../../../wallets/in-app/native/auth/passkeys.js";
@@ -91,6 +93,15 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
const [inputMode, setInputMode] = useState<"email" | "phone">("email");
+ const hasAuthOption = useCallback((key: AuthOption) => {
+ return authOptions.find((opt) => typeof opt === 'string' ? opt === key : opt.type === key);
+ }, [authOptions]);
+
+ const getAuthOptionDefaultValue = useCallback((key: AuthOption) => {
+ const option = authOptions.find((opt) => typeof opt === 'object' && opt.type === key) as AuthOptionWithOptions | undefined;
+ return option?.defaultValue;
+ }, [authOptions]);
+
return (
@@ -98,9 +109,9 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
))}
- {authOptions.includes("email") ? (
+ {hasAuthOption("email") ? (
inputMode === "email" ? (
-
+
) : (
)
) : null}
- {authOptions.includes("phone") ? (
+ {hasAuthOption("phone") ? (
inputMode === "phone" ? (
-
+
) : (
)
) : null}
- {authOptions.includes("passkey") ? (
+ {hasAuthOption("passkey") ? (
) : null}
- {authOptions.includes("guest") ? : null}
+ {hasAuthOption("guest") ? : null}
);
}
@@ -205,10 +216,11 @@ function SocialLogin(
function PreOtpLogin(
props: InAppWalletFormUIProps & {
auth: PreAuthArgsType["strategy"];
+ defaultValue?: string;
},
) {
- const { theme, auth, client, setScreen, wallet } = props;
- const [phoneOrEmail, setPhoneNumberOrEmail] = useState("");
+ const { theme, auth, client, setScreen, wallet, defaultValue = ''} = props;
+ const [phoneOrEmail, setPhoneNumberOrEmail] = useState(defaultValue);
const sendCode = useMutation({
mutationFn: async (options: {
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
index 762f86791e3..064448bd587 100644
--- a/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
+++ b/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
@@ -25,6 +25,7 @@ export function InputSelectionUI(props: {
disabled?: boolean;
defaultSmsCountryCode?: SupportedSmsCountry;
allowedSmsCountryCodes?: SupportedSmsCountry[];
+ defaultValue?: string;
}) {
const [countryCodeInfo, setCountryCodeInfo] = useState(
props.defaultSmsCountryCode
@@ -35,7 +36,7 @@ export function InputSelectionUI(props: {
? getCountrySelector(props.allowedSmsCountryCodes[0])
: "US +1",
);
- const [input, setInput] = useState("");
+ const [input, setInput] = useState(props.defaultValue || "");
const [error, setError] = useState();
const [showError, setShowError] = useState(false);
diff --git a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx b/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
index 240f23b8eb9..803996f1698 100644
--- a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
+++ b/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
@@ -136,9 +136,9 @@ export const ConnectWalletSocialOptions = (
? (ecosystemAuthOptions ?? defaultAuthOptions)
: (wallet.getConfig()?.auth?.options ?? defaultAuthOptions);
- const emailIndex = authOptions.indexOf("email");
+ const emailIndex = authOptions.findIndex((o) => typeof o === 'string' ? o === 'email' : o.type === 'email');
const isEmailEnabled = emailIndex !== -1;
- const phoneIndex = authOptions.indexOf("phone");
+ const phoneIndex = authOptions.findIndex((o) => typeof o === "string" ? o === "phone" : o.type === "phone");
const isPhoneEnabled = phoneIndex !== -1;
const socialLogins: SocialAuthOption[] = authOptions.filter((o) =>
socialAuthOptions.includes(o as SocialAuthOption),
@@ -410,6 +410,7 @@ export const ConnectWalletSocialOptions = (
disabled={props.disabled}
emptyErrorMessage={emptyErrorMessage}
submitButtonText={locale.submitEmail}
+ defaultValue={typeof authOptions[emailIndex] === 'object' ? authOptions[emailIndex].defaultValue : undefined}
/>
) : (
) : (