feat: Add sign-in with Phone number in in-app wallet (#2679)

Signed-off-by: Winston Yeo <44563205+ElasticBottle@users.noreply.github.com>
Signed-off-by: Jonas Daniels <jonas.daniels@outlook.com>
Co-authored-by: Jonas Daniels <jonas.daniels@outlook.com>
Co-authored-by: Manan Tank <manantankm@gmail.com>

Author: 3 people

.changeset/flat-hotels-scream.md

@@ -0,0 +1,82 @@
+---
+"thirdweb": minor
+---
+
+Add support for connecting in-app wallet using phone number
+
+## Usage in TypeScript
+
+```ts
+import { createThirdwebClient, createWallet } from "thirdweb";
+import { preAuthenticate } from "thirdweb/wallets/in-app";
+
+const client = createThirdwebClient({ clientId: "..." });
+
+const phoneNumber = '+123456789';
+
+// Send OTP to given phone number
+async function sendOTP() {
+  await preAuthenticate({
+    strategy: "phone",
+    phoneNumber,
+    client,
+  });
+}
+
+async function connect() {
+  // create a in-app wallet instance
+  const wallet = createWallet('inApp');
+  // if the OTP is correct, the wallet will be connected else an error will be thrown
+  const account = await wallet.connect({
+    client,
+    strategy: "phone";
+    phoneNumber,
+    verificationCode: '...' // Pass the OTP entered by the user
+  });
+
+  console.log('connected to', account);
+}
+```
+
+## Usage in React
+
+```tsx
+import { createThirdwebClient } from "thirdweb";
+import { preAuthenticate } from "thirdweb/wallets/in-app";
+import { useConnect } from "thirdweb/react";
+
+const client = createThirdwebClient({ clientId: "..." });
+
+function Component() {
+  const { connect } = useConnect();
+  const [phoneNumber, setPhoneNumber] = useState(''); // get phone number from user
+  const [otp, setOtp] = useState(''); // get OTP from user
+
+  // Send OTP to given phone number
+  async function sendOTP() {
+    await preAuthenticate({
+      strategy: "phone",
+      phoneNumber,
+      client,
+    });
+  }
+
+  async function connect() {
+    // create a in-app wallet instance
+    const wallet = createWallet('inApp');
+    // if the OTP is correct, the wallet will be connected else an error will be thrown
+    await wallet.connect({
+      client,
+      strategy: "phone";
+      phoneNumber,
+      verificationCode: otp
+    });
+
+    // set the wallet as active
+    connect(wallet)
+  }
+
+  // render UI to get OTP and phone number from user
+  return <div> ...  </div>
+}
+```

.changeset/lovely-parents-hear.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+Fix In-App wallet country selector styles on windows

legacy_packages/react/src/design-system/elements.ts

@@ -12,3 +12,4 @@ export const StyledH2 = /* @__PURE__ */ styled.h2;
 export const StyledP = /* @__PURE__ */ styled.p;
 export const StyledUl = /* @__PURE__ */ styled.ul;
 export const StyledSelect = /* @__PURE__ */ styled.select;
+export const StyledOption = /* @__PURE__ */ styled.option;

legacy_packages/react/src/wallet/wallets/embeddedWallet/CountrySelector.tsx

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import React, { useRef } from "react";
 import { fontSize, spacing } from "../../../design-system";
 import { useCustomTheme } from "../../../design-system/CustomThemeProvider";
-import { StyledSelect } from "../../../design-system/elements";
+import { StyledOption, StyledSelect } from "../../../design-system/elements";
 
 export function CountrySelector({
   countryCode,
@@ -52,20 +52,33 @@ export function CountrySelector({
         </option>
         {supportedCountriesForSms.map((country) => {
           return (
-            <option
+            <Option
               key={country.countryIsoCode}
               value={`${country.countryIsoCode} +${country.phoneNumberCode}`}
             >
               {country.countryName} +{country.phoneNumberCode}{" "}
-            </option>
+            </Option>
           );
         })}
       </Select>
     </>
   );
 }
 
-export const Select = /* @__PURE__ */ StyledSelect(() => {
+
+const Option = /* @__PURE__ */ StyledOption(() => {
+  const theme = useCustomTheme();
+  return {
+    color: theme.colors.primaryText,
+    background: theme.colors.modalBg,
+    transition: "background 0.3s ease",
+    "&:hover": {
+      background: theme.colors.walletSelectorButtonHoverBg,
+    },
+  };
+});
+
+const Select = /* @__PURE__ */ StyledSelect(() => {
   const theme = useCustomTheme();
   return {
     fontSize: fontSize.sm,

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 import {
   ChevronRightIcon,
   ExitIcon,
-  // EnterIcon,
   PaperPlaneIcon,
   PinBottomIcon,
   PlusIcon,
@@ -16,7 +15,6 @@ import { getContract } from "../../../../contract/contract.js";
 import { resolveAvatar } from "../../../../extensions/ens/resolve-avatar.js";
 import { resolveName } from "../../../../extensions/ens/resolve-name.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
-import { getUserEmail } from "../../../../wallets/in-app/core/authentication/index.js";
 import {
   useChainQuery,
   useChainsQuery,
@@ -27,7 +25,6 @@ import {
   useActiveAccount,
   useActiveWallet,
   useActiveWalletChain,
-  // useConnect,
   useDisconnect,
   useSwitchActiveWalletChain,
 } from "../../../core/hooks/wallets/wallet-hooks.js";
@@ -383,7 +380,10 @@ export const ConnectedWalletDetails: React.FC<{
 
       <Container px="lg">
         <ConnectedToSmartWallet />
-        <InAppWalletEmail />
+
+        {(activeWallet?.id === "embedded" || activeWallet?.id === "inApp") && (
+          <InAppWalletUserInfo />
+        )}
 
         {/* Send, Receive, Swap */}
         <Container
@@ -876,20 +876,31 @@ function ConnectedToSmartWallet() {
   return null;
 }
 
-function InAppWalletEmail() {
+function InAppWalletUserInfo() {
   const { client } = useConnectUI();
-  const emailQuery = useQuery({
-    queryKey: ["in-app-wallet-user", client],
-    queryFn: async () => {
-      const data = await getUserEmail({
-        client: client,
-      });
+  const account = useActiveAccount();
 
-      return data || null;
+  const userInfoQuery = useQuery({
+    queryKey: ["in-app-wallet-user", client, account?.address],
+    queryFn: async () => {
+      const { getUserEmail, getUserPhoneNumber } = await import(
+        "../../../../wallets/in-app/core/authentication/index.js"
+      );
+
+      const [email, phone] = await Promise.all([
+        getUserEmail({
+          client: client,
+        }),
+        getUserPhoneNumber({
+          client: client,
+        }),
+      ]);
+
+      return email || phone || null;
     },
   });
 
-  if (emailQuery.data) {
+  if (userInfoQuery.data) {
     return (
       <Container
         flex="row"
@@ -898,7 +909,7 @@ function InAppWalletEmail() {
           paddingBottom: spacing.md,
         }}
       >
-        <Text size="sm">{emailQuery.data}</Text>
+        <Text size="sm">{userInfoQuery.data}</Text>
       </Container>
     );
   }

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx

@@ -4,6 +4,7 @@ import { useActiveAccount } from "../../../../core/hooks/wallets/wallet-hooks.js
 import {
   useIsWalletModalOpen,
   useSetIsWalletModalOpen,
+  useSetSelectionData,
 } from "../../../providers/wallet-ui-states-provider.js";
 import { Modal } from "../../components/Modal.js";
 import { onModalUnmount, reservedScreens } from "../constants.js";
@@ -15,6 +16,7 @@ import { useSetupScreen } from "./screen.js";
  */
 const ConnectModal = () => {
   const screenSetup = useSetupScreen();
+  const setSelectionData = useSetSelectionData();
   const { screen, setScreen, initialScreen } = screenSetup;
   const isWalletModalOpen = useIsWalletModalOpen();
   const setIsWalletModalOpen = useSetIsWalletModalOpen();
@@ -25,8 +27,9 @@ const ConnectModal = () => {
     setIsWalletModalOpen(false);
     onModalUnmount(() => {
       setScreen(initialScreen);
+      setSelectionData({});
     });
-  }, [initialScreen, setIsWalletModalOpen, setScreen]);
+  }, [initialScreen, setIsWalletModalOpen, setScreen, setSelectionData]);
 
   const activeAccount = useActiveAccount();
 
@@ -72,16 +75,8 @@ const ConnectModal = () => {
           return;
         }
 
-        setIsWalletModalOpen(value);
-
         if (!value) {
-          onModalUnmount(() => {
-            // if (connectionStatus === "connecting") {
-            //   disconnect();
-            // }
-
-            setScreen(initialScreen);
-          });
+          closeModal();
         }
       }}
     >

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx

@@ -3,6 +3,7 @@ import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { useConnect } from "../../../../core/hooks/wallets/wallet-hooks.js";
+import { useSetSelectionData } from "../../../providers/wallet-ui-states-provider.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { WalletSelector } from "../WalletSelector.js";
 import { onModalUnmount, reservedScreens } from "../constants.js";
@@ -39,6 +40,7 @@ export const ConnectModalContent = (props: {
     client,
   } = useConnectUI();
   const { connect } = useConnect();
+  const setSelectionData = useSetSelectionData();
 
   const siweAuth = useSiweAuth(auth);
   const showSignatureScreen = siweAuth.requiresAuth && !siweAuth.isLoggedIn;
@@ -52,6 +54,7 @@ export const ConnectModalContent = (props: {
       }
 
       onModalUnmount(() => {
+        setSelectionData({});
         setModalVisibility(true);
       });
 
@@ -69,6 +72,7 @@ export const ConnectModalContent = (props: {
       connect,
       showSignatureScreen,
       setScreen,
+      setSelectionData,
     ],
   );
 

packages/thirdweb/src/react/web/ui/design-system/elements.ts

@@ -11,3 +11,5 @@ export const StyledInput = /* @__PURE__ */ styled.input;
 export const StyledH2 = /* @__PURE__ */ styled.h2;
 export const StyledP = /* @__PURE__ */ styled.p;
 export const StyledUl = /* @__PURE__ */ styled.ul;
+export const StyledSelect = /* @__PURE__ */ styled.select;
+export const StyledOption = /* @__PURE__ */ styled.option;