From eeaa92971465fed7657706354b3d1e15bab4a35c Mon Sep 17 00:00:00 2001 From: Corey Date: Thu, 5 Jun 2025 23:08:59 -0300 Subject: [PATCH 1/4] feat: support object auth option with default value --- .../react/native/ui/connect/ConnectModal.tsx | 13 +++++---- .../react/native/ui/connect/InAppWalletUI.tsx | 28 +++++++++++++------ .../src/wallets/in-app/core/wallet/types.ts | 4 ++- 3 files changed, 30 insertions(+), 15 deletions(-) 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/wallets/in-app/core/wallet/types.ts b/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts index 98c5906a49e..cab479e9c86 100644 --- a/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts +++ b/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 = | { From 71a39746b1ccc37eba53900aff05ee30f87467eb Mon Sep 17 00:00:00 2001 From: Corey Date: Sat, 7 Jun 2025 11:54:10 -0300 Subject: [PATCH 2/4] feat: support default values for phone and email on web --- .../src/react/web/wallets/in-app/InputSelectionUI.tsx | 3 ++- .../react/web/wallets/shared/ConnectWalletSocialOptions.tsx | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) 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} /> ) : ( ) : ( Date: Sat, 7 Jun 2025 11:54:31 -0300 Subject: [PATCH 3/4] refactor: add more specific type --- packages/thirdweb/src/wallets/in-app/core/wallet/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts b/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts index cab479e9c86..0e4c57afe53 100644 --- a/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts +++ b/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts @@ -39,7 +39,7 @@ export type WalletUser = UserStatus; export type InAppWalletSocialAuth = SocialAuthOption; export type InAppWalletOAuth = OAuthOption; -export type AuthOptionWithOptions = {type: AuthOption, defaultValue: string }; +export type AuthOptionWithOptions = {type: 'email' | 'phone', defaultValue: string }; export type InAppWalletAuth = AuthOption | AuthOptionWithOptions; export type { AuthOption }; From 3abbf7c9dc527e0afa9a443571bbb0cbfec42efc Mon Sep 17 00:00:00 2001 From: Corey Date: Sat, 7 Jun 2025 11:54:48 -0300 Subject: [PATCH 4/4] docs: add doc string --- .../thirdweb/src/wallets/in-app/web/in-app.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/thirdweb/src/wallets/in-app/web/in-app.ts b/packages/thirdweb/src/wallets/in-app/web/in-app.ts index 1e60d716543..885110c1826 100644 --- a/packages/thirdweb/src/wallets/in-app/web/in-app.ts +++ b/packages/thirdweb/src/wallets/in-app/web/in-app.ts @@ -297,6 +297,22 @@ import type { InAppWalletCreationOptions } from "../core/wallet/types.js"; * }); * ``` * + * ### Set the default value for the email and phone auth options + * + * By default,the email and phone auth options will be empty. You can change this behavior by passing the auth option for phone or email as an object with the `defaultValue` property. + * + * ```ts + * import { inAppWallet } from "thirdweb/wallets"; + * const wallet = inAppWallet({ + * auth: { + * options: [ + * { type: "email", defaultValue: "test@test.com" }, + * { type: "phone", defaultValue: "+5555555555" }, + * ] + * } + * }); + * ``` + * * @returns The created in-app wallet. * @wallet */