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} /> ) : ( ) : (