@coinbase/create-cdp-app 0.0.28 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/create-cdp-app",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/template-nextjs/src/app/globals.css

@@ -9,6 +9,8 @@
   --cdp-example-accent-hover-color: #016969;
   --cdp-example-accent-foreground-color: #ffffff;
   --cdp-example-bg-low-contrast-color: #eeeeee;
+  --cdp-example-cdp-page-bg-color: #ffffff;
+  --cdp-example-cdp-page-bg-alt-color: #eef0f3;
   --cdp-example-card-bg-color: #ffffff;
   --cdp-example-card-border-color: #dcdcdc;
   --cdp-example-card-max-width: 30rem;
@@ -40,6 +42,8 @@
     --cdp-example-accent-hover-color: #04c0c0;
     --cdp-example-accent-foreground-color: #0a0b0d;
     --cdp-example-bg-low-contrast-color: #32353d;
+    --cdp-example-cdp-page-bg-color: #0a0b0d;
+    --cdp-example-cdp-page-bg-alt-color: #333333;
     --cdp-example-card-bg-color: #141519;
     --cdp-example-card-border-color: #24262a;
   }

package/template-nextjs/src/components/FundWallet.tsx

@@ -27,8 +27,8 @@ export default function FundWallet({ onSuccess }: { onSuccess: () => void }) {
       <FundModal
         country="US"
         subdivision="CA"
-        cryptoCurrency="ETH"
-        fiatCurrency="USD"
+        cryptoCurrency="eth"
+        fiatCurrency="usd"
         fetchBuyQuote={fetchBuyQuote}
         fetchBuyOptions={fetchBuyOptions}
         network="base"

package/template-nextjs/src/components/theme.ts

@@ -1,8 +1,8 @@
 import { type Theme } from "@coinbase/cdp-react/theme";
 
 export const theme: Partial<Theme> = {
-  "colors-bg-alternate": "var(--cdp-example-page-bg-alt-color)",
-  "colors-bg-default": "var(--cdp-example-card-bg-color)",
+  "colors-bg-alternate": "var(--cdp-example-cdp-page-bg-alt-color)",
+  "colors-bg-default": "var(--cdp-example-cdp-page-bg-color)",
   "colors-bg-overlay": "var(--cdp-example-bg-overlay-color)",
   "colors-bg-skeleton": "var(--cdp-example-bg-skeleton-color)",
   "colors-bg-primary": "var(--cdp-example-accent-color)",

package/template-react/src/index.css

@@ -9,6 +9,8 @@
   --cdp-example-accent-hover-color: #016969;
   --cdp-example-accent-foreground-color: #ffffff;
   --cdp-example-bg-low-contrast-color: #eeeeee;
+  --cdp-example-cdp-page-bg-color: #ffffff;
+  --cdp-example-cdp-page-bg-alt-color: #eef0f3;
   --cdp-example-card-bg-color: #ffffff;
   --cdp-example-card-border-color: #dcdcdc;
   --cdp-example-card-max-width: 30rem;
@@ -40,6 +42,8 @@
     --cdp-example-accent-hover-color: #04c0c0;
     --cdp-example-accent-foreground-color: #0a0b0d;
     --cdp-example-bg-low-contrast-color: #32353d;
+    --cdp-example-cdp-page-bg-color: #0a0b0d;
+    --cdp-example-cdp-page-bg-alt-color: #333333;
     --cdp-example-card-bg-color: #141519;
     --cdp-example-card-border-color: #24262a;
   }

package/template-react/src/theme.ts

@@ -1,8 +1,8 @@
 import { type Theme } from "@coinbase/cdp-react/theme";
 
 export const theme: Partial<Theme> = {
-  "colors-bg-alternate": "var(--cdp-example-page-bg-alt-color)",
-  "colors-bg-default": "var(--cdp-example-card-bg-color)",
+  "colors-bg-alternate": "var(--cdp-example-cdp-page-bg-alt-color)",
+  "colors-bg-default": "var(--cdp-example-cdp-page-bg-color)",
   "colors-bg-overlay": "var(--cdp-example-bg-overlay-color)",
   "colors-bg-skeleton": "var(--cdp-example-bg-skeleton-color)",
   "colors-bg-primary": "var(--cdp-example-accent-color)",

package/template-react-native/App.tsx

@@ -4,8 +4,11 @@ import {
   useIsInitialized,
   useSignInWithEmail,
   useVerifyEmailOTP,
+  useSignInWithSms,
+  useVerifySmsOTP,
   useIsSignedIn,
   useSignOut,
+  useCurrentUser,
   Config,
 } from "@coinbase/cdp-hooks";
 import { StatusBar } from "expo-status-bar";
@@ -15,13 +18,20 @@ import {
   Text,
   View,
   TouchableOpacity,
-  TextInput,
   Alert,
   ScrollView,
   SafeAreaView,
+  Animated,
+  Dimensions,
 } from "react-native";
 
 import Transaction from "./Transaction";
+import { ThemeProvider, useTheme } from "./theme/ThemeContext";
+import { WelcomeScreen } from "./components/WelcomeScreen";
+import { SignInModal } from "./components/SignInModal";
+import { DarkModeToggle } from "./components/DarkModeToggle";
+import { WalletHeader } from "./components/WalletHeader";
+import { AuthMethod } from "./types";
 
 const cdpConfig: Config = {
   projectId: process.env.EXPO_PUBLIC_CDP_PROJECT_ID,
@@ -31,15 +41,16 @@ const cdpConfig: Config = {
 };
 
 /**
- * A multi-step authentication component that handles email-based sign-in flow.
+ * A multi-step authentication component that handles email and SMS-based sign-in flows.
  *
- * The component manages three states:
- * 1. Initial state: Displays a welcome screen with a sign-in button
- * 2. Email input: Collects and validates the user's email address
- * 3. OTP verification: Validates the one-time password sent to the user's email
+ * The component manages authentication states:
+ * 1. Initial state: Displays a welcome screen with sign-in options
+ * 2. Input: Collects and validates the user's email address or phone number
+ * 3. OTP verification: Validates the one-time password sent to the user's email or SMS
  *
  * Features:
- * - Email validation using regex
+ * - Toggle between email and SMS authentication
+ * - Email and phone number validation
  * - 6-digit OTP validation
  * - Loading states during API calls
  * - Error handling for failed authentication attempts
@@ -52,46 +63,78 @@ function CDPApp() {
   const { isSignedIn } = useIsSignedIn();
   const { signInWithEmail } = useSignInWithEmail();
   const { verifyEmailOTP } = useVerifyEmailOTP();
+  const { signInWithSms } = useSignInWithSms();
+  const { verifySmsOTP } = useVerifySmsOTP();
   const { signOut } = useSignOut();
   const { config } = useConfig();
+  const { colors, isDarkMode } = useTheme();
+  const { currentUser } = useCurrentUser();
 
+  const [authMethod, setAuthMethod] = useState<AuthMethod>("email");
   const [email, setEmail] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
   const [otp, setOtp] = useState("");
   const [flowId, setFlowId] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [showSignInModal, setShowSignInModal] = useState(false);
+  const [slideAnim] = useState(new Animated.Value(Dimensions.get("window").height));
 
   const handleSignIn = async () => {
-    if (!email) {
-      Alert.alert("Error", "Please enter an email address");
-      return;
-    }
+    if (authMethod === "email") {
+      if (!email) {
+        Alert.alert("Error", "Please enter an email address.");
+        return;
+      }
 
-    setIsLoading(true);
-    try {
-      const result = await signInWithEmail({ email });
-      setFlowId(result.flowId);
-      Alert.alert("Success", "OTP sent to your email!");
-    } catch (error) {
-      Alert.alert("Error", error instanceof Error ? error.message : "Failed to sign in");
-    } finally {
-      setIsLoading(false);
+      setIsLoading(true);
+      try {
+        const result = await signInWithEmail({ email });
+        setFlowId(result.flowId);
+      } catch (error) {
+        Alert.alert("Error", error instanceof Error ? error.message : "Failed to sign in.");
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      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 });
+        setFlowId(result.flowId);
+      } catch (error) {
+        Alert.alert("Error", error instanceof Error ? error.message : "Failed to sign in.");
+      } finally {
+        setIsLoading(false);
+      }
     }
   };
 
   const handleVerifyOTP = async () => {
     if (!otp || !flowId) {
-      Alert.alert("Error", "Please enter the OTP");
+      Alert.alert("Error", "Please enter the OTP.");
       return;
     }
 
     setIsLoading(true);
     try {
-      await verifyEmailOTP({ flowId, otp });
-      Alert.alert("Success", "Successfully signed in!");
+      if (authMethod === "email") {
+        await verifyEmailOTP({ flowId, otp });
+      } else {
+        await verifySmsOTP({ flowId, otp });
+      }
       setOtp("");
       setFlowId("");
+      closeSignInModal();
     } catch (error) {
-      Alert.alert("Error", error instanceof Error ? error.message : "Failed to verify OTP");
+      Alert.alert("Error", error instanceof Error ? error.message : "Failed to verify OTP.");
     } finally {
       setIsLoading(false);
     }
@@ -101,21 +144,111 @@ function CDPApp() {
     try {
       await signOut();
       setEmail("");
+      setPhoneNumber("");
       setOtp("");
       setFlowId("");
-      Alert.alert("Success", "Signed out successfully");
     } catch (error) {
-      Alert.alert("Error", error instanceof Error ? error.message : "Failed to sign out");
+      Alert.alert("Error", error instanceof Error ? error.message : "Failed to sign out.");
     }
   };
 
+  const handleAuthMethodToggle = () => {
+    setAuthMethod(authMethod === "email" ? "sms" : "email");
+    setEmail("");
+    setPhoneNumber("");
+    setOtp("");
+    setFlowId("");
+  };
+
+  const openSignInModal = () => {
+    setShowSignInModal(true);
+    Animated.timing(slideAnim, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const closeSignInModal = () => {
+    Animated.timing(slideAnim, {
+      toValue: Dimensions.get("window").height,
+      duration: 300,
+      useNativeDriver: true,
+    }).start(() => {
+      setShowSignInModal(false);
+      setEmail("");
+      setPhoneNumber("");
+      setOtp("");
+      setFlowId("");
+    });
+  };
+
+  const createStyles = () =>
+    StyleSheet.create({
+      container: {
+        flex: 1,
+        backgroundColor: colors.background,
+      },
+      centerContent: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 20,
+      },
+      header: {
+        paddingHorizontal: 20,
+        paddingVertical: 16,
+        backgroundColor: colors.cardBackground,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border,
+      },
+      headerContent: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+      },
+      headerText: {
+        flex: 1,
+        alignItems: "flex-start",
+        paddingLeft: 4,
+      },
+      title: {
+        fontSize: 24,
+        fontWeight: "bold",
+        textAlign: "left",
+        color: colors.text,
+      },
+      text: {
+        fontSize: 16,
+        textAlign: "center",
+        color: colors.text,
+      },
+      content: {
+        flex: 1,
+      },
+      scrollView: {
+        flex: 1,
+      },
+      scrollContent: {
+        paddingVertical: 40,
+        paddingHorizontal: 20,
+      },
+      userContainer: {
+        width: "100%",
+        alignItems: "center",
+        marginBottom: 20,
+      },
+    });
+
+  const styles = createStyles();
+
   if (!isInitialized) {
     return (
       <SafeAreaView style={styles.container}>
         <View style={styles.centerContent}>
           <Text style={styles.text}>Initializing CDP...</Text>
         </View>
-        <StatusBar style="auto" />
+        <StatusBar style={isDarkMode ? "light" : "dark"} />
       </SafeAreaView>
     );
   }
@@ -123,78 +256,52 @@ function CDPApp() {
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
-        <Text style={styles.title}>CDP React Native Demo</Text>
-        <Text style={styles.subtitle}>Project ID: {config.projectId}</Text>
+        <View style={styles.headerContent}>
+          <View style={styles.headerText}>
+            <Text style={styles.title}>CDP React Native Demo</Text>
+          </View>
+          <DarkModeToggle style={{ width: 40, height: 40 }} />
+        </View>
       </View>
 
       <View style={styles.content}>
         {!isSignedIn ? (
-          <View style={styles.authContainer}>
-            <Text style={styles.label}>Email:</Text>
-            <TextInput
-              style={styles.input}
-              value={email}
-              onChangeText={setEmail}
-              placeholder="Enter your email"
-              keyboardType="email-address"
-              autoCapitalize="none"
-              autoCorrect={false}
-              editable={!isLoading}
-            />
-
-            <TouchableOpacity
-              style={[styles.button, isLoading && styles.buttonDisabled]}
-              onPress={handleSignIn}
-              disabled={isLoading}
-            >
-              <Text style={styles.buttonText}>
-                {isLoading ? "Sending..." : "Sign In with Email"}
-              </Text>
-            </TouchableOpacity>
-
-            {flowId && (
-              <>
-                <Text style={styles.label}>Enter OTP from email:</Text>
-                <TextInput
-                  style={styles.input}
-                  value={otp}
-                  onChangeText={setOtp}
-                  placeholder="Enter 6-digit OTP"
-                  keyboardType="number-pad"
-                  maxLength={6}
-                  editable={!isLoading}
-                />
-
-                <TouchableOpacity
-                  style={[styles.button, isLoading && styles.buttonDisabled]}
-                  onPress={handleVerifyOTP}
-                  disabled={isLoading}
-                >
-                  <Text style={styles.buttonText}>{isLoading ? "Verifying..." : "Verify OTP"}</Text>
-                </TouchableOpacity>
-              </>
-            )}
-          </View>
+          <WelcomeScreen onSignInPress={openSignInModal} />
         ) : (
-          <ScrollView
-            style={styles.scrollView}
-            showsVerticalScrollIndicator={false}
-            contentContainerStyle={styles.scrollContent}
-          >
-            <View style={styles.userContainer}>
-              <Text style={styles.welcomeText}>Welcome!</Text>
-
-              <Transaction onSuccess={() => console.log("Transaction successful!")} />
-
-              <TouchableOpacity style={styles.signOutButton} onPress={handleSignOut}>
-                <Text style={styles.buttonText}>Sign Out</Text>
-              </TouchableOpacity>
-            </View>
-          </ScrollView>
+          <>
+            <WalletHeader onSignOut={handleSignOut} />
+            <ScrollView
+              style={styles.scrollView}
+              showsVerticalScrollIndicator={false}
+              contentContainerStyle={styles.scrollContent}
+            >
+              <View style={styles.userContainer}>
+                <Transaction onSuccess={() => console.log("Transaction successful!")} />
+              </View>
+            </ScrollView>
+          </>
         )}
       </View>
 
-      <StatusBar style="auto" />
+      <SignInModal
+        visible={showSignInModal}
+        onClose={closeSignInModal}
+        authMethod={authMethod}
+        onAuthMethodToggle={handleAuthMethodToggle}
+        email={email}
+        setEmail={setEmail}
+        phoneNumber={phoneNumber}
+        setPhoneNumber={setPhoneNumber}
+        otp={otp}
+        setOtp={setOtp}
+        flowId={flowId}
+        isLoading={isLoading}
+        onSignIn={handleSignIn}
+        onVerifyOTP={handleVerifyOTP}
+        slideAnim={slideAnim}
+      />
+
+      <StatusBar style={isDarkMode ? "light" : "dark"} />
     </SafeAreaView>
   );
 }
@@ -207,153 +314,9 @@ function CDPApp() {
 export default function App() {
   return (
     <CDPHooksProvider config={cdpConfig}>
-      <CDPApp />
+      <ThemeProvider>
+        <CDPApp />
+      </ThemeProvider>
     </CDPHooksProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#eaeaea",
-  },
-  centerContent: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 20,
-  },
-  header: {
-    paddingHorizontal: 20,
-    paddingVertical: 16,
-    backgroundColor: "#ffffff",
-    alignItems: "center",
-    borderBottomWidth: 1,
-    borderBottomColor: "#dcdcdc",
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 20,
-    justifyContent: "center",
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingVertical: 20,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: "bold",
-    marginBottom: 10,
-    textAlign: "center",
-    color: "#111111",
-  },
-  subtitle: {
-    fontSize: 14,
-    color: "#757575",
-    marginBottom: 30,
-    textAlign: "center",
-  },
-  text: {
-    fontSize: 16,
-    textAlign: "center",
-    color: "#111111",
-  },
-  authContainer: {
-    width: "100%",
-    maxWidth: 300,
-    alignSelf: "center",
-  },
-  userContainer: {
-    width: "100%",
-    alignItems: "center",
-    marginBottom: 20,
-  },
-  copyableInfoContainer: {
-    width: "100%",
-    marginBottom: 16,
-    alignItems: "center",
-  },
-  infoLabel: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#757575",
-    marginBottom: 6,
-    textAlign: "center",
-  },
-  copyableInfo: {
-    backgroundColor: "rgba(0, 128, 128, 0.1)",
-    borderRadius: 8,
-    padding: 12,
-    borderWidth: 1,
-    borderColor: "rgba(0, 128, 128, 0.3)",
-    width: "100%",
-    maxWidth: 280,
-  },
-  copyableText: {
-    fontSize: 12,
-    fontFamily: "monospace",
-    color: "#008080",
-    textAlign: "center",
-    marginBottom: 4,
-  },
-  copyHint: {
-    fontSize: 10,
-    color: "#008080",
-    fontStyle: "italic",
-    textAlign: "center",
-  },
-  welcomeText: {
-    fontSize: 20,
-    fontWeight: "bold",
-    marginBottom: 20,
-    textAlign: "center",
-    color: "#111111",
-  },
-  userInfo: {
-    fontSize: 14,
-    marginBottom: 8,
-    textAlign: "center",
-    color: "#111111",
-  },
-  label: {
-    fontSize: 16,
-    fontWeight: "500",
-    marginBottom: 8,
-    color: "#111111",
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#dcdcdc",
-    borderRadius: 8,
-    padding: 12,
-    fontSize: 16,
-    marginBottom: 16,
-    backgroundColor: "#ffffff",
-    color: "#111111",
-  },
-  button: {
-    backgroundColor: "#008080",
-    padding: 15,
-    borderRadius: 8,
-    alignItems: "center",
-    marginBottom: 12,
-  },
-  buttonDisabled: {
-    opacity: 0.6,
-  },
-  buttonText: {
-    color: "#ffffff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-  signOutButton: {
-    backgroundColor: "#f44336",
-    padding: 15,
-    borderRadius: 8,
-    alignItems: "center",
-    marginTop: 20,
-    width: "100%",
-  },
-});