@coinbase/create-cdp-app 0.0.27 → 0.0.29

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

@@ -0,0 +1,342 @@
+import React from "react";
+import {
+  Modal,
+  Animated,
+  View,
+  TouchableOpacity,
+  Text,
+  TextInput,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+} from "react-native";
+import { useTheme } from "../theme/ThemeContext";
+import { SignInModalProps } from "../types";
+
+export const SignInModal: React.FC<SignInModalProps> = ({
+  visible,
+  onClose,
+  authMethod,
+  onAuthMethodToggle,
+  email,
+  setEmail,
+  phoneNumber,
+  setPhoneNumber,
+  otp,
+  setOtp,
+  flowId,
+  isLoading,
+  onSignIn,
+  onVerifyOTP,
+  slideAnim,
+}) => {
+  const { colors } = useTheme();
+
+  const createStyles = () =>
+    StyleSheet.create({
+      modalOverlay: {
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        justifyContent: "flex-end",
+      },
+      modalContainer: {
+        backgroundColor: colors.cardBackground,
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+        minHeight: "60%",
+        maxHeight: "90%",
+      },
+      modalContent: {
+        flex: 1,
+        padding: 24,
+      },
+      modalCloseButton: {
+        position: "absolute",
+        top: 16,
+        right: 16,
+        zIndex: 1,
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        justifyContent: "center",
+        alignItems: "center",
+      },
+      modalCloseText: {
+        color: colors.text,
+        fontSize: 20,
+        fontWeight: "300",
+        textAlign: "center",
+        lineHeight: 20,
+        includeFontPadding: false,
+      },
+      modalHeader: {
+        alignItems: "center",
+        marginTop: 32,
+        marginBottom: 32,
+      },
+      logoCircle: {
+        width: 64,
+        height: 64,
+        borderRadius: 32,
+        backgroundColor: colors.accent,
+        justifyContent: "center",
+        alignItems: "center",
+      },
+      logoText: {
+        color: "#ffffff",
+        fontSize: 32,
+        fontWeight: "bold",
+      },
+      modalTitle: {
+        fontSize: 24,
+        fontWeight: "500",
+        color: colors.text,
+        textAlign: "center",
+        marginTop: 16,
+      },
+      modalForm: {
+        flex: 1,
+      },
+      inputLabel: {
+        fontSize: 16,
+        fontWeight: "500",
+        color: colors.text,
+        marginBottom: 8,
+      },
+      modalInput: {
+        backgroundColor: colors.inputBackground,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: colors.border,
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        fontSize: 16,
+        color: colors.text,
+        marginBottom: 24,
+      },
+      inputContainer: {
+        flexDirection: "row",
+        alignItems: "stretch",
+        marginBottom: 24,
+      },
+      flagContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 12,
+        paddingVertical: 14,
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderTopLeftRadius: 8,
+        borderBottomLeftRadius: 8,
+        backgroundColor: colors.inputBackground,
+      },
+      flagText: {
+        fontSize: 16,
+        marginRight: 4,
+      },
+      countryCode: {
+        fontSize: 16,
+        color: colors.text,
+        fontWeight: "500",
+      },
+      phoneInput: {
+        backgroundColor: colors.inputBackground,
+        borderRadius: 0,
+        borderTopRightRadius: 8,
+        borderBottomRightRadius: 8,
+        borderWidth: 1,
+        borderLeftWidth: 0,
+        borderColor: colors.border,
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        fontSize: 16,
+        color: colors.text,
+        flex: 1,
+      },
+      continueButton: {
+        backgroundColor: colors.accent,
+        borderRadius: 8,
+        paddingVertical: 16,
+        alignItems: "center",
+        marginBottom: 24,
+      },
+      continueButtonText: {
+        color: "#ffffff",
+        fontSize: 16,
+        fontWeight: "600",
+      },
+      buttonDisabled: {
+        opacity: 0.6,
+      },
+      dividerContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: 24,
+      },
+      dividerLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: colors.border,
+      },
+      dividerText: {
+        color: colors.textSecondary,
+        fontSize: 14,
+        marginHorizontal: 16,
+      },
+      phoneButton: {
+        backgroundColor: colors.inputBackground,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: colors.border,
+        paddingVertical: 16,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: 32,
+      },
+      phoneIcon: {
+        fontSize: 18,
+        marginRight: 8,
+      },
+      phoneButtonText: {
+        color: colors.text,
+        fontSize: 16,
+        fontWeight: "500",
+      },
+    });
+
+  const styles = createStyles();
+
+  return (
+    <Modal visible={visible} transparent={true} animationType="none" onRequestClose={onClose}>
+      <View style={styles.modalOverlay}>
+        <Animated.View
+          style={[
+            styles.modalContainer,
+            {
+              transform: [{ translateY: slideAnim }],
+            },
+          ]}
+        >
+          <KeyboardAvoidingView
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            style={styles.modalContent}
+          >
+            <TouchableOpacity style={styles.modalCloseButton} onPress={onClose}>
+              <Text style={styles.modalCloseText}>×</Text>
+            </TouchableOpacity>
+
+            <View style={styles.modalHeader}>
+              <View style={styles.logoCircle}>
+                <Text style={styles.logoText}>C</Text>
+              </View>
+              <Text style={styles.modalTitle}>
+                {flowId ? "Enter verification code" : "Sign in"}
+              </Text>
+            </View>
+
+            {flowId ? (
+              <View style={styles.modalForm}>
+                <Text style={styles.inputLabel}>Verification code</Text>
+                <TextInput
+                  style={styles.modalInput}
+                  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}
+                />
+
+                <TouchableOpacity
+                  style={[styles.continueButton, isLoading && styles.buttonDisabled]}
+                  onPress={onVerifyOTP}
+                  disabled={isLoading}
+                >
+                  <Text style={styles.continueButtonText}>
+                    {isLoading ? "Verifying..." : "Continue"}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            ) : (
+              <View style={styles.modalForm}>
+                <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}
+                      value={phoneNumber}
+                      onChangeText={setPhoneNumber}
+                      placeholder="(000) 000-0000"
+                      keyboardType="phone-pad"
+                      autoCapitalize="none"
+                      autoCorrect={false}
+                      editable={!isLoading}
+                      placeholderTextColor={colors.textSecondary}
+                      returnKeyType="done"
+                      onSubmitEditing={onSignIn}
+                      blurOnSubmit={true}
+                    />
+                  </View>
+                ) : (
+                  <TextInput
+                    style={styles.modalInput}
+                    value={email}
+                    onChangeText={setEmail}
+                    placeholder="name@example.com"
+                    keyboardType="email-address"
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    editable={!isLoading}
+                    placeholderTextColor={colors.textSecondary}
+                    returnKeyType="done"
+                    onSubmitEditing={onSignIn}
+                    blurOnSubmit={true}
+                  />
+                )}
+
+                <TouchableOpacity
+                  style={[styles.continueButton, isLoading && styles.buttonDisabled]}
+                  onPress={onSignIn}
+                  disabled={isLoading}
+                >
+                  <Text style={styles.continueButtonText}>
+                    {isLoading ? "Sending..." : "Continue"}
+                  </Text>
+                </TouchableOpacity>
+
+                <View style={styles.dividerContainer}>
+                  <View style={styles.dividerLine} />
+                  <Text style={styles.dividerText}>OR</Text>
+                  <View style={styles.dividerLine} />
+                </View>
+
+                <TouchableOpacity
+                  style={styles.phoneButton}
+                  onPress={onAuthMethodToggle}
+                  disabled={isLoading}
+                >
+                  <Text style={styles.phoneIcon}>{authMethod === "email" ? "📞" : "✉️"}</Text>
+                  <Text style={styles.phoneButtonText}>
+                    Continue with {authMethod === "email" ? "phone" : "email"}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            )}
+          </KeyboardAvoidingView>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,105 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+
+interface SunMoonIconProps {
+  isDarkMode: boolean;
+  size?: number;
+  color?: string;
+}
+
+export const SunMoonIcon: React.FC<SunMoonIconProps> = ({
+  isDarkMode,
+  size = 16,
+  color = "#666666",
+}) => {
+  const createStyles = () =>
+    StyleSheet.create({
+      container: {
+        width: size,
+        height: size,
+        alignItems: "center",
+        justifyContent: "center",
+      },
+      // Sun icon (circle with rays)
+      sunContainer: {
+        width: size,
+        height: size,
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+      },
+      sunCore: {
+        width: size * 0.6,
+        height: size * 0.6,
+        borderRadius: (size * 0.6) / 2,
+        backgroundColor: color,
+      },
+      sunRay: {
+        position: "absolute",
+        width: 2,
+        height: size * 0.2,
+        backgroundColor: color,
+      },
+      sunRayTop: {
+        top: 0,
+        left: (size - 2) / 2,
+      },
+      sunRayRight: {
+        right: 0,
+        top: (size - size * 0.2) / 2,
+        transform: [{ rotate: "90deg" }],
+      },
+      sunRayBottom: {
+        bottom: 0,
+        left: (size - 2) / 2,
+      },
+      sunRayLeft: {
+        left: 0,
+        top: (size - size * 0.2) / 2,
+        transform: [{ rotate: "90deg" }],
+      },
+      // Moon icon (simple crescent shape)
+      moonContainer: {
+        width: size,
+        height: size,
+        alignItems: "center",
+        justifyContent: "center",
+      },
+      moonShape: {
+        width: size * 0.7,
+        height: size * 0.7,
+        borderRadius: (size * 0.7) / 2,
+        backgroundColor: "transparent",
+        borderWidth: 2,
+        borderColor: color,
+        borderRightColor: "transparent",
+        transform: [{ rotate: "20deg" }],
+      },
+    });
+
+  const styles = createStyles();
+
+  if (isDarkMode) {
+    // Show sun icon (switching to light mode)
+    return (
+      <View style={styles.container}>
+        <View style={styles.sunContainer}>
+          <View style={[styles.sunRay, styles.sunRayTop]} />
+          <View style={[styles.sunRay, styles.sunRayRight]} />
+          <View style={[styles.sunRay, styles.sunRayBottom]} />
+          <View style={[styles.sunRay, styles.sunRayLeft]} />
+          <View style={styles.sunCore} />
+        </View>
+      </View>
+    );
+  } else {
+    // Show moon icon (switching to dark mode)
+    return (
+      <View style={styles.container}>
+        <View style={styles.moonContainer}>
+          <View style={styles.moonShape} />
+        </View>
+      </View>
+    );
+  }
+};

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+
+interface UserIconProps {
+  size?: number;
+  color?: string;
+}
+
+export const UserIcon: React.FC<UserIconProps> = ({ size = 24, color = "#666666" }) => {
+  const createStyles = () =>
+    StyleSheet.create({
+      container: {
+        width: size,
+        height: size,
+        alignItems: "center",
+        justifyContent: "center",
+      },
+      circle: {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        borderWidth: 1.5,
+        borderColor: color,
+        alignItems: "center",
+        justifyContent: "flex-start",
+        overflow: "hidden",
+      },
+      head: {
+        width: size * 0.3,
+        height: size * 0.3,
+        borderRadius: (size * 0.3) / 2,
+        backgroundColor: color,
+        marginTop: size * 0.15,
+      },
+      body: {
+        width: size * 0.55,
+        height: size * 0.35,
+        borderRadius: size * 0.275,
+        backgroundColor: color,
+        marginTop: size * 0.05,
+      },
+    });
+
+  const styles = createStyles();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.circle}>
+        <View style={styles.head} />
+        <View style={styles.body} />
+      </View>
+    </View>
+  );
+};

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

@@ -0,0 +1,102 @@
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
+import * as Clipboard from "expo-clipboard";
+import { useEvmAddress, useCurrentUser } from "@coinbase/cdp-hooks";
+import { useTheme } from "../theme/ThemeContext";
+import { UserIcon } from "./UserIcon";
+
+interface WalletHeaderProps {
+  onSignOut: () => void;
+}
+
+export const WalletHeader: React.FC<WalletHeaderProps> = ({ onSignOut }) => {
+  const { colors } = useTheme();
+  const { evmAddress } = useEvmAddress();
+  const { currentUser } = useCurrentUser();
+
+  // Use EVM address if available, otherwise fall back to smart account
+  const walletAddress = evmAddress || currentUser?.evmSmartAccounts?.[0];
+
+  const formatAddress = (address: string) => {
+    if (!address) return "";
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  };
+
+  const copyWalletAddress = async () => {
+    if (!walletAddress) return;
+
+    try {
+      await Clipboard.setStringAsync(walletAddress);
+      Alert.alert("Copied!", "Wallet address copied to clipboard.");
+    } catch (error) {
+      Alert.alert("Error", "Failed to copy wallet address.");
+    }
+  };
+
+  const createStyles = () =>
+    StyleSheet.create({
+      container: {
+        backgroundColor: colors.cardBackground,
+        paddingHorizontal: 20,
+        paddingVertical: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+      },
+      leftContent: {
+        flexDirection: "row",
+        alignItems: "center",
+        flex: 1,
+      },
+      avatar: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: colors.textSecondary,
+        marginRight: 12,
+        justifyContent: "center",
+        alignItems: "center",
+      },
+      addressContainer: {
+        flex: 1,
+      },
+      address: {
+        fontSize: 16,
+        fontWeight: "500",
+        color: colors.text,
+      },
+      signOutButton: {
+        backgroundColor: colors.accent,
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 20,
+      },
+      signOutButtonText: {
+        color: "#ffffff",
+        fontSize: 14,
+        fontWeight: "600",
+      },
+    });
+
+  const styles = createStyles();
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.leftContent} onPress={copyWalletAddress}>
+        <View style={styles.avatar}>
+          <UserIcon size={18} color={colors.cardBackground} />
+        </View>
+        <View style={styles.addressContainer}>
+          <Text style={styles.address}>
+            {walletAddress ? formatAddress(walletAddress) : "Loading..."}
+          </Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.signOutButton} onPress={onSignOut}>
+        <Text style={styles.signOutButtonText}>Sign out</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { useTheme } from "../theme/ThemeContext";
+import { WelcomeScreenProps } from "../types";
+
+export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ onSignInPress }) => {
+  const { colors } = useTheme();
+
+  const createStyles = () =>
+    StyleSheet.create({
+      container: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 20,
+      },
+      card: {
+        backgroundColor: colors.cardBackground,
+        borderRadius: 12,
+        padding: 32,
+        alignItems: "center",
+        width: "100%",
+        maxWidth: 400,
+        shadowColor: "#000",
+        shadowOffset: {
+          width: 0,
+          height: 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 3,
+      },
+      title: {
+        fontSize: 28,
+        fontWeight: "bold",
+        color: colors.text,
+        marginBottom: 8,
+        textAlign: "center",
+      },
+      subtitle: {
+        fontSize: 16,
+        color: colors.textSecondary,
+        marginBottom: 24,
+        textAlign: "center",
+      },
+      signInButton: {
+        backgroundColor: colors.accent,
+        borderRadius: 12,
+        paddingVertical: 16,
+        paddingHorizontal: 48,
+        alignItems: "center",
+      },
+      signInButtonText: {
+        color: "#ffffff",
+        fontSize: 16,
+        fontWeight: "600",
+      },
+    });
+
+  const styles = createStyles();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.card}>
+        <Text style={styles.title}>Welcome!</Text>
+        <Text style={styles.subtitle}>Please sign in to continue.</Text>
+        <TouchableOpacity style={styles.signInButton} onPress={onSignInPress}>
+          <Text style={styles.signInButtonText}>Sign in</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};