feat: support object auth option with default value

Author: coreyar

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 (
     <View
       style={{
@@ -491,7 +492,7 @@ function WalletLoadingView({
         animate={true}
         roundLoader={authProvider === "passkey"}
       >
-        {authProvider ? (
+        {authProviderName ? (
           <View
             style={{
               borderRadius: spacing.md,
@@ -501,7 +502,7 @@ function WalletLoadingView({
             <RNImage
               theme={theme}
               size={80}
-              data={getAuthProviderImage(authProvider)}
+              data={getAuthProviderImage(authProviderName)}
               color={theme.colors.accentButtonBg}
             />
           </View>
@@ -516,14 +517,14 @@ function WalletLoadingView({
       </WalletLoadingThumbnail>
       <Spacer size="xl" />
       <ThemedText theme={theme} type="subtitle">
-        {authProvider
-          ? `Connecting with ${capitalizeFirstLetter(authProvider)}`
+        {authProviderName
+          ? `Connecting with ${capitalizeFirstLetter(authProviderName)}`
           : "Awaiting confirmation"}
       </ThemedText>
       <Spacer size="sm" />
       <ThemedText theme={theme} type="subtext">
-        {authProvider
-          ? `Signing into your ${capitalizeFirstLetter(authProvider)} account`
+        {authProviderName
+          ? `Signing into your ${capitalizeFirstLetter(authProviderName)} account`
           : `Accept the connection request in ${walletInfo.data?.name}`}
       </ThemedText>
     </View>

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,16 +93,25 @@ 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 (
     <View style={styles.container}>
       <View style={styles.row}>
         {socialLogins.map((auth) => (
           <SocialLogin key={auth} auth={auth} {...props} />
         ))}
       </View>
-      {authOptions.includes("email") ? (
+      {hasAuthOption("email") ? (
         inputMode === "email" ? (
-          <PreOtpLogin auth="email" {...props} />
+          <PreOtpLogin auth="email" defaultValue={getAuthOptionDefaultValue('email')} {...props} />
         ) : (
           <ThemedButtonWithIcon
             theme={theme}
@@ -110,9 +121,9 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
           />
         )
       ) : null}
-      {authOptions.includes("phone") ? (
+      {hasAuthOption("phone") ? (
         inputMode === "phone" ? (
-          <PreOtpLogin auth="phone" {...props} />
+          <PreOtpLogin auth="phone" defaultValue={getAuthOptionDefaultValue('phone')} {...props} />
         ) : (
           <ThemedButtonWithIcon
             theme={theme}
@@ -122,7 +133,7 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
           />
         )
       ) : null}
-      {authOptions.includes("passkey") ? (
+      {hasAuthOption("passkey") ? (
         <ThemedButtonWithIcon
           theme={theme}
           title="Passkey"
@@ -132,7 +143,7 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
           }}
         />
       ) : null}
-      {authOptions.includes("guest") ? <GuestLogin {...props} /> : null}
+      {hasAuthOption("guest") ? <GuestLogin {...props} /> : null}
     </View>
   );
 }
@@ -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: {

packages/thirdweb/src/wallets/in-app/core/wallet/types.ts

@@ -39,7 +39,9 @@ export type WalletUser = UserStatus;
 
 export type InAppWalletSocialAuth = SocialAuthOption;
 export type InAppWalletOAuth = OAuthOption;
-export type InAppWalletAuth = AuthOption;
+export type AuthOptionWithOptions = {type: AuthOption, defaultValue: string };
+export type InAppWalletAuth = AuthOption | AuthOptionWithOptions;
+export type { AuthOption };
 
 export type ExecutionModeOptions =
   | {