@coinbase/create-cdp-app 0.0.54 → 0.0.56

package/template-react-native/components/SignInForm.tsx

@@ -1,258 +1,77 @@
-import React, { useRef, useEffect } from "react";
+import React, { useState } from "react";
 import {
   View,
   TouchableOpacity,
   Text,
-  TextInput,
-  KeyboardAvoidingView,
-  Platform,
   StyleSheet,
-  ScrollView,
   Dimensions,
-  Keyboard,
+  Platform,
+  ScrollView,
+  KeyboardAvoidingView,
 } from "react-native";
-import { useTheme } from "../theme/ThemeContext";
 import { AuthMethod } from "../types";
+import { useTheme } from "../theme/ThemeContext";
+import { EmailForm } from "./EmailForm";
+import { SmsForm } from "./SmsForm";
+import { OAuthForm } from "./OAuthForm";
+import { OtpForm } from "./OtpForm";
 
-export interface SignInFormProps {
-  authMethod: AuthMethod;
-  onAuthMethodToggle: () => void;
-  email: string;
-  setEmail: (email: string) => void;
-  phoneNumber: string;
-  setPhoneNumber: (phoneNumber: string) => void;
-  otp: string;
-  setOtp: (otp: string) => void;
-  flowId: string;
-  isLoading: boolean;
-  onSignIn: () => void;
-  onVerifyOTP: () => void;
-  onBack?: () => void;
-}
+export interface SignInFormProps {}
 
-export const SignInForm: React.FC<SignInFormProps> = ({
-  authMethod,
-  onAuthMethodToggle,
-  email,
-  setEmail,
-  phoneNumber,
-  setPhoneNumber,
-  otp,
-  setOtp,
-  flowId,
-  isLoading,
-  onSignIn,
-  onVerifyOTP,
-  onBack,
-}) => {
+export const SignInForm: React.FC<SignInFormProps> = () => {
   const { colors } = useTheme();
-  const scrollViewRef = useRef<ScrollView>(null);
+  const [authMethod, setAuthMethod] = useState<AuthMethod>("email");
+  const [flowId, setFlowId] = useState("");
 
   const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
   const isSmallScreen = screenHeight < 700;
 
-  // Auto-scroll to ensure OTP field and button are visible
-  useEffect(() => {
-    if (flowId && scrollViewRef.current) {
-      // Initial scroll when OTP field appears
-      setTimeout(() => {
-        scrollViewRef.current?.scrollTo({
-          y: 200, // Scroll up enough to show both OTP field and button
-          animated: true,
-        });
-      }, 300);
-    }
-  }, [flowId]);
-
-  // Handle keyboard events for better positioning
-  useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => {
-      if (flowId && scrollViewRef.current) {
-        setTimeout(() => {
-          scrollViewRef.current?.scrollTo({
-            y: 250, // Scroll up more when keyboard is visible
-            animated: true,
-          });
-        }, 100);
-      }
-    });
+  const handleSignInSuccess = (newFlowId: string) => {
+    setFlowId(newFlowId);
+  };
 
-    const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
-      if (flowId && scrollViewRef.current) {
-        setTimeout(() => {
-          scrollViewRef.current?.scrollTo({
-            y: 150, // Scroll back down a bit when keyboard hides
-            animated: true,
-          });
-        }, 100);
-      }
-    });
+  const handleVerifySuccess = () => {
+    setFlowId("");
+  };
 
-    return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
-    };
-  }, [flowId]);
+  const handleBack = () => {
+    setFlowId("");
+  };
 
   const createStyles = () =>
     StyleSheet.create({
-      keyboardContainer: {
+      container: {
         flex: 1,
       },
-      scrollContainer: {
-        flexGrow: 1,
-        justifyContent: "center",
+      tabContainer: {
+        flexDirection: "row",
         paddingHorizontal: 20,
-        paddingVertical: isSmallScreen ? 20 : 40,
-        paddingBottom: flowId ? (isSmallScreen ? 150 : 180) : isSmallScreen ? 20 : 40,
-        minHeight: screenHeight - (Platform.OS === "ios" ? 100 : 80),
-      },
-      container: {
-        alignItems: "center",
-        justifyContent: "center",
-      },
-      card: {
-        backgroundColor: colors.cardBackground,
-        borderRadius: 16,
-        padding: isSmallScreen ? 24 : 32,
-        width: "100%",
-        maxWidth: 400,
-        minWidth: Math.min(screenWidth - 40, 280),
-        shadowColor: "#000",
-        shadowOffset: {
-          width: 0,
-          height: 2,
-        },
-        shadowOpacity: 0.1,
-        shadowRadius: 8,
-        elevation: 3,
-      },
-      header: {
-        alignItems: "center",
-        marginBottom: isSmallScreen ? 24 : 32,
-        position: "relative",
-      },
-      backButton: {
-        position: "absolute",
-        left: 0,
-        top: 0,
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: colors.inputBackground,
-        borderWidth: 1,
-        borderColor: colors.border,
-        justifyContent: "center",
-        alignItems: "center",
-      },
-      backButtonText: {
-        fontSize: 18,
-        color: colors.text,
-        fontWeight: "600",
-      },
-      logoCircle: {
-        width: isSmallScreen ? 56 : 64,
-        height: isSmallScreen ? 56 : 64,
-        borderRadius: isSmallScreen ? 28 : 32,
-        backgroundColor: colors.accent,
-        justifyContent: "center",
-        alignItems: "center",
-        marginBottom: 16,
+        paddingTop: 20,
+        gap: 12,
       },
-      logoText: {
-        color: "#ffffff",
-        fontSize: isSmallScreen ? 28 : 32,
-        fontWeight: "bold",
-      },
-      title: {
-        fontSize: isSmallScreen ? 20 : 24,
-        fontWeight: "500",
-        color: colors.text,
-        textAlign: "center",
-      },
-      form: {
-        width: "100%",
-      },
-      inputLabel: {
-        fontSize: 16,
-        fontWeight: "500",
-        color: colors.text,
-        marginBottom: 8,
-      },
-      input: {
-        backgroundColor: colors.inputBackground,
+      tab: {
+        flex: 1,
+        paddingVertical: 12,
         borderRadius: 8,
         borderWidth: 1,
         borderColor: colors.border,
-        paddingHorizontal: 16,
-        paddingVertical: Platform.OS === "ios" ? 16 : 14,
-        fontSize: 16,
-        color: colors.text,
-        marginBottom: isSmallScreen ? 20 : 24,
-        minHeight: Platform.OS === "android" ? 48 : 44,
-      },
-      inputDisabled: {
-        opacity: 0.6,
-        backgroundColor: colors.border,
-      },
-      inputContainer: {
-        flexDirection: "row",
-        alignItems: "stretch",
-        marginBottom: isSmallScreen ? 20 : 24,
-      },
-      flagContainer: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: 12,
-        paddingVertical: Platform.OS === "ios" ? 16 : 14,
-        borderWidth: 1,
-        borderColor: colors.border,
-        borderTopLeftRadius: 8,
-        borderBottomLeftRadius: 8,
         backgroundColor: colors.inputBackground,
-        minHeight: Platform.OS === "android" ? 48 : 44,
-        justifyContent: "center",
+        alignItems: "center",
       },
-      flagText: {
-        fontSize: 16,
-        marginRight: 4,
+      tabActive: {
+        backgroundColor: colors.accent,
+        borderColor: colors.accent,
       },
-      countryCode: {
-        fontSize: 16,
-        color: colors.text,
+      tabText: {
+        fontSize: 14,
         fontWeight: "500",
-      },
-      phoneInput: {
-        backgroundColor: colors.inputBackground,
-        borderRadius: 0,
-        borderTopRightRadius: 8,
-        borderBottomRightRadius: 8,
-        borderWidth: 1,
-        borderLeftWidth: 0,
-        borderColor: colors.border,
-        paddingHorizontal: 16,
-        paddingVertical: Platform.OS === "ios" ? 16 : 14,
-        fontSize: 16,
         color: colors.text,
-        flex: 1,
-        minHeight: Platform.OS === "android" ? 48 : 44,
-      },
-      continueButton: {
-        backgroundColor: colors.accent,
-        borderRadius: 8,
-        paddingVertical: 16,
-        alignItems: "center",
-        marginBottom: isSmallScreen ? 20 : 24,
-        minHeight: 48,
-        justifyContent: "center",
       },
-      continueButtonText: {
+      tabTextActive: {
         color: "#ffffff",
-        fontSize: 16,
-        fontWeight: "600",
       },
-      buttonDisabled: {
-        opacity: 0.6,
+      formContainer: {
+        flex: 1,
       },
       dividerContainer: {
         flexDirection: "row",
@@ -270,6 +89,9 @@ export const SignInForm: React.FC<SignInFormProps> = ({
         fontSize: 14,
         marginHorizontal: 16,
       },
+      toggleButtonContainer: {
+        gap: 12,
+      },
       toggleButton: {
         backgroundColor: colors.inputBackground,
         borderRadius: 8,
@@ -290,144 +112,110 @@ export const SignInForm: React.FC<SignInFormProps> = ({
         fontSize: 16,
         fontWeight: "500",
       },
+      loginContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+      },
+      card: {
+        backgroundColor: colors.cardBackground,
+        borderRadius: 16,
+        padding: isSmallScreen ? 24 : 32,
+        width: "100%",
+        maxWidth: 400,
+        minWidth: Math.min(screenWidth - 40, 280),
+        minHeight: screenHeight - (Platform.OS === "ios" ? 350 : 300),
+        shadowColor: "#000",
+        shadowOffset: {
+          width: 0,
+          height: 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 3,
+      },
+      keyboardContainer: {
+        flex: 1,
+      },
+      scrollContainer: {
+        flexGrow: 1,
+        justifyContent: "center",
+        paddingHorizontal: 20,
+        paddingVertical: isSmallScreen ? 20 : 40,
+        minHeight: screenHeight - (Platform.OS === "ios" ? 100 : 80),
+      },
     });
 
   const styles = createStyles();
 
-  return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === "ios" ? "padding" : "position"}
-      style={styles.keyboardContainer}
-      keyboardVerticalOffset={Platform.OS === "ios" ? 60 : -150}
-    >
-      <ScrollView
-        ref={scrollViewRef}
-        contentContainerStyle={styles.scrollContainer}
-        keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator={false}
-      >
-        <View style={styles.container}>
-          <View style={styles.card}>
-            <View style={styles.header}>
-              {flowId && onBack && (
-                <TouchableOpacity style={styles.backButton} onPress={onBack} disabled={isLoading}>
-                  <Text style={styles.backButtonText}>←</Text>
-                </TouchableOpacity>
-              )}
-              <View style={styles.logoCircle}>
-                <Text style={styles.logoText}>C</Text>
-              </View>
-              <Text style={styles.title}>
-                {flowId ? "Check your " + (authMethod === "email" ? "email" : "phone") : "Sign in"}
-              </Text>
-            </View>
+  // If we have a flowId, show the OTP form (without tabs)
+  if (flowId) {
+    return (
+      <OtpForm
+        authMethod={authMethod}
+        flowId={flowId}
+        onSuccess={handleVerifySuccess}
+        onBack={handleBack}
+      />
+    );
+  }
 
-            <View style={styles.form}>
-              {/* Email/Phone Input Section */}
-              <Text style={styles.inputLabel}>
-                {authMethod === "email" ? "Email address" : "Phone number"}
-              </Text>
-              {authMethod === "sms" ? (
-                <View style={styles.inputContainer}>
-                  <View style={styles.flagContainer}>
-                    <Text style={styles.flagText}>🇺🇸</Text>
-                    <Text style={styles.countryCode}>+1</Text>
-                  </View>
-                  <TextInput
-                    style={[styles.phoneInput, flowId && styles.inputDisabled]}
-                    value={phoneNumber}
-                    onChangeText={setPhoneNumber}
-                    placeholder="(000) 000-0000"
-                    keyboardType="phone-pad"
-                    autoCapitalize="none"
-                    autoCorrect={false}
-                    editable={!isLoading && !flowId}
-                    placeholderTextColor={colors.textSecondary}
-                    returnKeyType="done"
-                    onSubmitEditing={flowId ? undefined : onSignIn}
-                    blurOnSubmit={true}
-                  />
+  // Otherwise show tabs and the selected form
+  return (
+    <View style={styles.container}>
+      <View style={styles.formContainer}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : "position"}
+          style={styles.keyboardContainer}
+          keyboardVerticalOffset={Platform.OS === "ios" ? 60 : -150}
+        >
+          <ScrollView
+            contentContainerStyle={styles.scrollContainer}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+          >
+            <View style={styles.loginContainer}>
+              <View style={styles.card}>
+                {authMethod === "email" && <EmailForm onSuccess={handleSignInSuccess} />}
+                {authMethod === "sms" && <SmsForm onSuccess={handleSignInSuccess} />}
+                {authMethod === "oauth" && <OAuthForm />}
+                <View style={styles.dividerContainer}>
+                  <View style={styles.dividerLine} />
+                  <Text style={styles.dividerText}>OR</Text>
+                  <View style={styles.dividerLine} />
                 </View>
-              ) : (
-                <TextInput
-                  style={[styles.input, flowId && styles.inputDisabled]}
-                  value={email}
-                  onChangeText={setEmail}
-                  placeholder="name@example.com"
-                  keyboardType="email-address"
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                  editable={!isLoading && !flowId}
-                  placeholderTextColor={colors.textSecondary}
-                  returnKeyType="done"
-                  onSubmitEditing={flowId ? undefined : onSignIn}
-                  blurOnSubmit={true}
-                />
-              )}
-
-              {/* OTP Input Section - Shows when flowId exists */}
-              {flowId && (
-                <>
-                  <Text style={styles.inputLabel}>Verification code</Text>
-                  <TextInput
-                    style={styles.input}
-                    value={otp}
-                    onChangeText={setOtp}
-                    placeholder="Enter 6-digit code"
-                    keyboardType="number-pad"
-                    maxLength={6}
-                    editable={!isLoading}
-                    placeholderTextColor={colors.textSecondary}
-                    returnKeyType="done"
-                    onSubmitEditing={onVerifyOTP}
-                    blurOnSubmit={true}
-                    autoFocus={true}
-                  />
-                </>
-              )}
-
-              {/* Action Button */}
-              <TouchableOpacity
-                style={[styles.continueButton, isLoading && styles.buttonDisabled]}
-                onPress={flowId ? onVerifyOTP : onSignIn}
-                disabled={isLoading}
-              >
-                <Text style={styles.continueButtonText}>
-                  {isLoading
-                    ? flowId
-                      ? "Verifying..."
-                      : "Sending..."
-                    : flowId
-                      ? "Verify Code"
-                      : "Continue"}
-                </Text>
-              </TouchableOpacity>
-
-              {/* Auth Method Toggle - Only show when not in OTP mode */}
-              {!flowId && (
-                <>
-                  <View style={styles.dividerContainer}>
-                    <View style={styles.dividerLine} />
-                    <Text style={styles.dividerText}>OR</Text>
-                    <View style={styles.dividerLine} />
-                  </View>
-
-                  <TouchableOpacity
-                    style={styles.toggleButton}
-                    onPress={onAuthMethodToggle}
-                    disabled={isLoading}
-                  >
-                    <Text style={styles.toggleIcon}>{authMethod === "email" ? "📞" : "✉️"}</Text>
-                    <Text style={styles.toggleButtonText}>
-                      Continue with {authMethod === "email" ? "phone" : "email"}
-                    </Text>
-                  </TouchableOpacity>
-                </>
-              )}
+                <View style={styles.toggleButtonContainer}>
+                  {authMethod !== "email" && (
+                    <TouchableOpacity
+                      style={styles.toggleButton}
+                      onPress={() => setAuthMethod("email")}
+                    >
+                      <Text style={styles.toggleIcon}>{"✉️"}</Text>
+                      <Text style={styles.toggleButtonText}>Continue with Email</Text>
+                    </TouchableOpacity>
+                  )}
+                  {authMethod !== "sms" && (
+                    <TouchableOpacity
+                      style={styles.toggleButton}
+                      onPress={() => setAuthMethod("sms")}
+                    >
+                      <Text style={styles.toggleIcon}>{"📞"}</Text>
+                      <Text style={styles.toggleButtonText}>Continue with SMS</Text>
+                    </TouchableOpacity>
+                  )}
+                  {authMethod !== "oauth" && (
+                    <TouchableOpacity
+                      style={styles.toggleButton}
+                      onPress={() => setAuthMethod("oauth")}
+                    >
+                      <Text style={styles.toggleButtonText}>Continue with Social</Text>
+                    </TouchableOpacity>
+                  )}
+                </View>
+              </View>
             </View>
-          </View>
-        </View>
-      </ScrollView>
-    </KeyboardAvoidingView>
+          </ScrollView>
+        </KeyboardAvoidingView>
+      </View>
+    </View>
   );
 };

package/template-react-native/components/SmsForm.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { View, TouchableOpacity, Text, TextInput, Alert } from "react-native";
+import { useSignInWithSms } from "@coinbase/cdp-hooks";
+import { useTheme } from "../theme/ThemeContext";
+import { useSignInFormStyles } from "../hooks/useSignInFormStyles";
+
+export interface SmsFormProps {
+  onSuccess: (flowId: string) => void;
+}
+
+export const SmsForm: React.FC<SmsFormProps> = ({ onSuccess }) => {
+  const { colors } = useTheme();
+  const { signInWithSms } = useSignInWithSms();
+  const styles = useSignInFormStyles();
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSignIn = async () => {
+    if (!phoneNumber) {
+      Alert.alert("Error", "Please enter a phone number.");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      // Format phone number with country code for SMS
+      const formattedPhoneNumber = phoneNumber.startsWith("+")
+        ? phoneNumber
+        : `+1${phoneNumber.replace(/\D/g, "")}`;
+      const result = await signInWithSms({ phoneNumber: formattedPhoneNumber });
+      onSuccess(result.flowId);
+    } catch (error) {
+      Alert.alert("Error", error instanceof Error ? error.message : "Failed to sign in.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <View style={styles.header}>
+        <View style={styles.logoCircle}>
+          <Text style={styles.logoText}>C</Text>
+        </View>
+        <Text style={styles.title}>Sign in</Text>
+      </View>
+      <View style={styles.form}>
+        <Text style={styles.inputLabel}>Phone number</Text>
+        <View style={styles.inputContainer}>
+          <View style={styles.flagContainer}>
+            <Text style={styles.flagText}>🇺🇸</Text>
+            <Text style={styles.countryCode}>+1</Text>
+          </View>
+          <TextInput
+            style={styles.phoneInput}
+            value={phoneNumber}
+            onChangeText={setPhoneNumber}
+            placeholder="(000) 000-0000"
+            keyboardType="phone-pad"
+            autoCapitalize="none"
+            autoCorrect={false}
+            editable={!isLoading}
+            placeholderTextColor={colors.textSecondary}
+            returnKeyType="done"
+            onSubmitEditing={handleSignIn}
+            blurOnSubmit={true}
+          />
+        </View>
+
+        <TouchableOpacity
+          style={[styles.continueButton, isLoading && styles.buttonDisabled]}
+          onPress={handleSignIn}
+          disabled={isLoading}
+        >
+          <Text style={styles.continueButtonText}>{isLoading ? "Sending..." : "Continue"}</Text>
+        </TouchableOpacity>
+      </View>
+    </>
+  );
+};

package/template-react-native/env.example

@@ -4,3 +4,4 @@ EXPO_PUBLIC_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE=smart
 EXPO_PUBLIC_CDP_CREATE_SOLANA_ACCOUNT=false
 EXPO_PUBLIC_CDP_BASE_PATH=https://api.cdp.coinbase.com/platform
 EXPO_PUBLIC_USE_MOCK=false
+EXPO_PUBLIC_NATIVE_OAUTH_CALLBACK=cdp-rn-demo://callback