Sherzodbakhodirov/emb 253 implement sms for wallet kit

packages/@magic-ext/wallet-kit/package.json

@@ -48,11 +48,12 @@
     "@styled/patterns": "./styled-system/patterns"
   },
   "dependencies": {
-    "@magiclabs/ui-components": "^1.49.3",
+    "@magiclabs/ui-components": "^1.50.0",
     "@reown/appkit": "^1.8.0",
     "@reown/appkit-adapter-wagmi": "^1.8.0",
     "@wagmi/core": "^2.0.0",
     "@walletconnect/ethereum-provider": "^2.23.0",
+    "libphonenumber-js": "^1.12.37",
     "wagmi": "^2.0.0"
   },
   "peerDependencies": {

packages/@magic-ext/wallet-kit/src/MagicWidget.tsx

@@ -12,14 +12,16 @@ import AdditionalProvidersView from './views/AdditionalProvidersView';
 import { getExtensionInstance } from './extension';
 import { EmailLoginProvider } from './context/EmailLoginContext';
 import { OAuthLoginProvider } from './context/OAuthLoginContext';
+import { SmsLoginProvider } from './context/SmsLoginContext';
 import { WidgetConfigProvider } from './context/WidgetConfigContext';
-import { EmailOTPView } from './views/EmailOTPView';
+import { OtpView } from './views/OtpView';
 import { DeviceVerificationView } from './views/DeviceVerificationView';
 import { LoginSuccessView } from './views/LoginSuccessView';
 import { MFAView } from './views/MfaView';
 import { RecoveryCodeView } from './views/RecoveryCode';
 import { LostRecoveryCode } from './views/LostRecoveryCode';
 import { WalletConnectView } from './views/WalletConnectView';
+import { SmsLoginView } from './views/SmsLoginView';
 import { FarcasterPendingView } from './views/FarcasterPendingView';
 import { FarcasterSuccessView } from './views/FarcasterSuccessView';
 import { FarcasterFailedView } from './views/FarcasterFailedView';
@@ -57,10 +59,12 @@ function WidgetContent({
   const renderView = () => {
     switch (state.view) {
       case 'login':
-        return <LoginView dispatch={dispatch} />;
+        return <LoginView dispatch={dispatch} state={state} />;
+      case 'sms_login':
+        return <SmsLoginView state={state} />;
       case 'wallet_pending':
         if (!state.selectedProvider) {
-          return <LoginView dispatch={dispatch} />;
+          return <LoginView dispatch={dispatch} state={state} />;
         }
         return (
           <WalletPendingView
@@ -74,7 +78,7 @@ function WidgetContent({
         return <WalletConnectView key="walletconnect" dispatch={dispatch} />;
       case 'oauth_pending':
         if (!state.selectedProvider) {
-          return <LoginView dispatch={dispatch} />;
+          return <LoginView dispatch={dispatch} state={state} />;
         }
         return (
           <OAuthPendingView
@@ -86,8 +90,8 @@ function WidgetContent({
         );
       case 'additional_providers':
         return <AdditionalProvidersView dispatch={dispatch} />;
-      case 'email_otp_pending':
-        return <EmailOTPView state={state} dispatch={dispatch} />;
+      case 'otp_pending':
+        return <OtpView state={state} dispatch={dispatch} />;
       case 'device_verification':
         return <DeviceVerificationView state={state} dispatch={dispatch} />;
       case 'mfa_pending':
@@ -105,20 +109,22 @@ function WidgetContent({
       case 'farcaster_failed':
         return <FarcasterFailedView state={state} dispatch={dispatch} />;
       default:
-        return <LoginView dispatch={dispatch} />;
+        return <LoginView dispatch={dispatch} state={state} />;
     }
   };
 
   return (
     <EmailLoginProvider dispatch={dispatch}>
-      <OAuthLoginProvider dispatch={dispatch}>
-        <Modal isWidget fullscreen={isModal && isMobile}>
-          <VStack width="full" minWidth="380px">
-            {renderView()}
-            <Footer showLogo={showFooterLogo} />
-          </VStack>
-        </Modal>
-      </OAuthLoginProvider>
+      <SmsLoginProvider dispatch={dispatch}>
+        <OAuthLoginProvider dispatch={dispatch}>
+          <Modal isWidget fullscreen={isModal && isMobile}>
+            <VStack width="full" minWidth="380px">
+              {renderView()}
+              <Footer showLogo={showFooterLogo} />
+            </VStack>
+          </Modal>
+        </OAuthLoginProvider>
+      </SmsLoginProvider>
     </EmailLoginProvider>
   );
 }

packages/@magic-ext/wallet-kit/src/components/ContinueWithSmsButton.tsx

@@ -0,0 +1,32 @@
+import { ButtonContainer, IcoMessage, IcoPhone, Text } from '@magiclabs/ui-components';
+import { css } from '@styled/css';
+import { Box, Flex } from '@styled/jsx';
+import { token } from '@styled/tokens';
+import React from 'react';
+import { getExtensionInstance } from '../extension';
+
+export const ContinueWithSmsButton = ({ onClick }: { onClick: () => void }) => {
+  const config = getExtensionInstance().getConfig();
+  const isDarkMode = config?.theme.themeColor === 'dark';
+
+  return (
+    <Box flex={1}>
+      <ButtonContainer
+        onPress={onClick}
+        borderRadius={14}
+        className={css({
+          w: 'full',
+          px: 4,
+          py: 3,
+          bg: 'neutral.quaternary',
+          _hover: { bg: 'neutral.tertiary' },
+        })}
+      >
+        <Flex gap={3} w="full" justifyContent={'flex-start'} alignItems="center">
+          <IcoPhone width={24} height={24} {...(isDarkMode ? { color: token('colors.ink.70') } : {})} />
+          <Text styles={{ lineHeight: '1.5rem' }}>Continue with SMS</Text>
+        </Flex>
+      </ButtonContainer>
+    </Box>
+  );
+};

packages/@magic-ext/wallet-kit/src/components/EmailInput.tsx

@@ -8,33 +8,39 @@ import { Box } from '@styled/jsx';
 import { token } from '@styled/tokens';
 import { getExtensionInstance } from 'src/extension';
 
-export const EmailInput = () => {
+interface EmailInputProps {
+  error?: string;
+  isLoading?: boolean;
+}
+
+export const EmailInput = ({ error: externalError, isLoading }: EmailInputProps) => {
   const { startEmailLogin } = useEmailLogin();
   const [email, setEmail] = useState('');
-  const [isValidating, setIsValidating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [localError, setLocalError] = useState<string | null>(null);
   const [disabled, setDisabled] = useState(true);
   const config = getExtensionInstance().getConfig();
   const isDarkMode = config?.theme.themeColor === 'dark';
 
+  // Use external error if available, otherwise fall back to local error
+  const displayError = externalError || localError;
+
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
     if (!isValidEmail(email)) {
-      setError(RpcErrorMessage.MalformedEmail);
+      setLocalError(RpcErrorMessage.MalformedEmail);
       return;
     } else if (isSanctionedEmail(email)) {
-      setError(RpcErrorMessage.SanEmail);
+      setLocalError(RpcErrorMessage.SanEmail);
       return;
     }
 
     setDisabled(true);
-    setIsValidating(true);
     startEmailLogin(email);
   };
 
   const handleInput = (e: string) => {
-    setError(null);
+    setLocalError(null);
     setDisabled(!e.length);
     setEmail(e.trim());
   };
@@ -52,7 +58,7 @@ export const EmailInput = () => {
               variant="text"
               textStyle="neutral"
               disabled={disabled}
-              validating={isValidating}
+              validating={isLoading}
               type="submit"
             >
               <Button.LeadingIcon color={token('colors.text.tertiary')}>
@@ -62,9 +68,9 @@ export const EmailInput = () => {
           </TextInput.ActionIcon>
         </TextInput>
       </Box>
-      {error && (
+      {displayError && (
         <Text variant="error" size="sm" styles={{ textAlign: 'center' }}>
-          {error}
+          {displayError}
         </Text>
       )}
     </form>

packages/@magic-ext/wallet-kit/src/components/ProviderButton.tsx

@@ -8,9 +8,10 @@ interface ProviderButtonProps {
   Icon: ElementType;
   onPress: () => void;
   hideLabel?: boolean;
+  center?: boolean;
 }
 
-export const ProviderButton = ({ label, Icon, onPress, hideLabel }: ProviderButtonProps) => {
+export const ProviderButton = ({ label, Icon, onPress, hideLabel, center }: ProviderButtonProps) => {
   return (
     <ButtonContainer
       onPress={onPress}
@@ -23,7 +24,7 @@ export const ProviderButton = ({ label, Icon, onPress, hideLabel }: ProviderButt
         _hover: { bg: 'neutral.tertiary' },
       })}
     >
-      <Flex gap={3} w="full" justifyContent={hideLabel ? 'center' : 'flex-start'} alignItems="center">
+      <Flex gap={3} w="full" justifyContent={hideLabel || center ? 'center' : 'flex-start'} alignItems="center">
         <Icon width={24} height={24} />
         {!hideLabel && label && (
           <Text fontWeight="medium" styles={{ lineHeight: '1.5rem' }}>

packages/@magic-ext/wallet-kit/src/context/EmailLoginContext.tsx

@@ -43,7 +43,7 @@ export function EmailLoginProvider({ children, dispatch }: EmailLoginProviderPro
   const startEmailLogin = useCallback(
     (email: string) => {
       emailRef.current = email;
-      dispatch({ type: 'EMAIL_OTP_START', email });
+      dispatch({ type: 'OTP_START', identifier: email, loginMethod: 'email' });
 
       try {
         const extension = getExtensionInstance();
@@ -56,17 +56,17 @@ export function EmailLoginProvider({ children, dispatch }: EmailLoginProviderPro
 
         // OTP was sent successfully
         handle.on(LoginWithEmailOTPEventOnReceived.EmailOTPSent, () => {
-          dispatch({ type: 'EMAIL_OTP_SENT' });
+          dispatch({ type: 'OTP_SENT' });
         });
 
         // Invalid OTP entered
         handle.on(LoginWithEmailOTPEventOnReceived.InvalidEmailOtp, () => {
-          dispatch({ type: 'EMAIL_OTP_INVALID' });
+          dispatch({ type: 'OTP_INVALID' });
         });
 
         // OTP has expired
         handle.on(LoginWithEmailOTPEventOnReceived.ExpiredEmailOtp, () => {
-          dispatch({ type: 'EMAIL_OTP_EXPIRED' });
+          dispatch({ type: 'OTP_EXPIRED' });
         });
 
         // Login throttled (too many attempts)
@@ -76,7 +76,7 @@ export function EmailLoginProvider({ children, dispatch }: EmailLoginProviderPro
 
         // Max attempts reached
         handle.on(LoginWithEmailOTPEventOnReceived.MaxAttemptsReached, () => {
-          dispatch({ type: 'EMAIL_OTP_MAX_ATTEMPTS_REACHED' });
+          dispatch({ type: 'OTP_MAX_ATTEMPTS_REACHED' });
         });
 
         // ==========================================
@@ -157,7 +157,7 @@ export function EmailLoginProvider({ children, dispatch }: EmailLoginProviderPro
   const submitOTP = useCallback(
     (otp: string) => {
       if (handleRef.current) {
-        dispatch({ type: 'EMAIL_OTP_VERIFYING' });
+        dispatch({ type: 'OTP_VERIFYING' });
         handleRef.current.emit(LoginWithEmailOTPEventEmit.VerifyEmailOtp, otp);
       }
     },