@coinbase/create-cdp-app 0.0.35 → 0.0.37

package/template-react/src/config.ts

@@ -1,14 +1,34 @@
-import { type Config } from "@coinbase/cdp-hooks";
-import { type AppConfig } from "@coinbase/cdp-react";
+import { type Config } from "@coinbase/cdp-react";
 
-export const CDP_CONFIG: Config = {
-  projectId: import.meta.env.VITE_CDP_PROJECT_ID,
-  createAccountOnLogin:
-    import.meta.env.VITE_CDP_CREATE_ACCOUNT_TYPE === "evm-smart" ? "evm-smart" : "evm-eoa",
-};
+const ethereumAccountType = import.meta.env.VITE_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE
+  ? import.meta.env.VITE_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart"
+    ? "smart"
+    : "eoa"
+  : undefined;
+
+const solanaAccountType = import.meta.env.VITE_CDP_CREATE_SOLANA_ACCOUNT
+  ? import.meta.env.VITE_CDP_CREATE_SOLANA_ACCOUNT === "true"
+  : undefined;
 
-export const APP_CONFIG: AppConfig = {
-  name: "CDP React StarterKit",
-  logoUrl: "http://localhost:3000/logo.svg",
+if (!ethereumAccountType && !solanaAccountType) {
+  throw new Error(
+    "Either VITE_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE or VITE_CDP_CREATE_SOLANA_ACCOUNT must be defined",
+  );
+}
+
+export const CDP_CONFIG = {
+  projectId: import.meta.env.VITE_CDP_PROJECT_ID,
+  ...(ethereumAccountType && {
+    ethereum: {
+      createOnLogin: ethereumAccountType,
+    },
+  }),
+  ...(solanaAccountType && {
+    solana: {
+      createOnLogin: solanaAccountType,
+    },
+  }),
+  appName: "CDP React StarterKit",
+  appLogoUrl: "http://localhost:3000/logo.svg",
   authMethods: ["email", "sms"],
-};
+} as Config;

package/template-react/src/index.css

@@ -343,6 +343,12 @@ header .wallet-address {
   margin: 0;
 }
 
+.transaction-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 @media (min-width: 540px) {
   .header-inner {
     flex-direction: row;

package/template-react/src/main.tsx

@@ -3,13 +3,13 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import App from "./App.tsx";
-import { APP_CONFIG, CDP_CONFIG } from "./config.ts";
+import { CDP_CONFIG } from "./config.ts";
 import { theme } from "./theme.ts";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <CDPReactProvider config={CDP_CONFIG} app={APP_CONFIG} theme={theme}>
+    <CDPReactProvider config={CDP_CONFIG} theme={theme}>
       <App />
     </CDPReactProvider>
   </StrictMode>,

package/template-react-native/App.tsx

@@ -1,6 +1,5 @@
 import {
   CDPHooksProvider,
-  useConfig,
   useIsInitialized,
   useSignInWithEmail,
   useVerifyEmailOTP,
@@ -8,27 +7,15 @@ import {
   useVerifySmsOTP,
   useIsSignedIn,
   useSignOut,
-  useCurrentUser,
   Config,
 } from "@coinbase/cdp-hooks";
 import { StatusBar } from "expo-status-bar";
 import { useState } from "react";
-import {
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-  Alert,
-  ScrollView,
-  SafeAreaView,
-  Animated,
-  Dimensions,
-} from "react-native";
+import { StyleSheet, Text, View, Alert, ScrollView, SafeAreaView } from "react-native";
 
 import Transaction from "./Transaction";
 import { ThemeProvider, useTheme } from "./theme/ThemeContext";
-import { WelcomeScreen } from "./components/WelcomeScreen";
-import { SignInModal } from "./components/SignInModal";
+import { SignInForm } from "./components/SignInForm";
 import { DarkModeToggle } from "./components/DarkModeToggle";
 import { WalletHeader } from "./components/WalletHeader";
 import { AuthMethod } from "./types";
@@ -36,7 +23,10 @@ import { AuthMethod } from "./types";
 const cdpConfig: Config = {
   projectId: process.env.EXPO_PUBLIC_CDP_PROJECT_ID,
   basePath: process.env.EXPO_PUBLIC_CDP_BASE_PATH,
-  createAccountOnLogin: process.env.EXPO_PUBLIC_CDP_CREATE_ACCOUNT_TYPE,
+  ethereum: {
+    createOnLogin:
+      process.env.EXPO_PUBLIC_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart" ? "smart" : "eoa",
+  },
   useMock: process.env.EXPO_PUBLIC_CDP_USE_MOCK === "true",
 };
 
@@ -66,9 +56,7 @@ function CDPApp() {
   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("");
@@ -76,8 +64,6 @@ function CDPApp() {
   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 (authMethod === "email") {
@@ -132,7 +118,6 @@ function CDPApp() {
       }
       setOtp("");
       setFlowId("");
-      closeSignInModal();
     } catch (error) {
       Alert.alert("Error", error instanceof Error ? error.message : "Failed to verify OTP.");
     } finally {
@@ -156,31 +141,11 @@ function CDPApp() {
     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 handleBack = () => {
+    setOtp("");
+    setFlowId("");
   };
 
   const createStyles = () =>
@@ -266,7 +231,21 @@ function CDPApp() {
 
       <View style={styles.content}>
         {!isSignedIn ? (
-          <WelcomeScreen onSignInPress={openSignInModal} />
+          <SignInForm
+            authMethod={authMethod}
+            onAuthMethodToggle={handleAuthMethodToggle}
+            email={email}
+            setEmail={setEmail}
+            phoneNumber={phoneNumber}
+            setPhoneNumber={setPhoneNumber}
+            otp={otp}
+            setOtp={setOtp}
+            flowId={flowId}
+            isLoading={isLoading}
+            onSignIn={handleSignIn}
+            onVerifyOTP={handleVerifyOTP}
+            onBack={handleBack}
+          />
         ) : (
           <>
             <WalletHeader onSignOut={handleSignOut} />
@@ -283,24 +262,6 @@ function CDPApp() {
         )}
       </View>
 
-      <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>
   );
@@ -312,6 +273,65 @@ function CDPApp() {
  * @returns {JSX.Element} The rendered main component
  */
 export default function App() {
+  // Check if project ID is empty or the placeholder value
+  const projectId = process.env.EXPO_PUBLIC_CDP_PROJECT_ID;
+  const isPlaceholderProjectId = !projectId || projectId === "your-project-id-here";
+
+  if (isPlaceholderProjectId) {
+    return (
+      <ThemeProvider>
+        <SafeAreaView
+          style={{
+            flex: 1,
+            backgroundColor: "#f5f5f5",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: 20,
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 24,
+              fontWeight: "bold",
+              color: "#333",
+              textAlign: "center",
+              marginBottom: 16,
+            }}
+          >
+            ⚠️ CDP Project ID Required
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: "#666",
+              textAlign: "center",
+              lineHeight: 24,
+              marginBottom: 24,
+            }}
+          >
+            Please configure your CDP project ID in the .env file. Create a .env file in the project
+            root and add your CDP project ID.
+          </Text>
+          <View
+            style={{
+              backgroundColor: "#f0f0f0",
+              padding: 16,
+              borderRadius: 8,
+              borderWidth: 1,
+              borderColor: "#ddd",
+            }}
+          >
+            <Text
+              style={{ fontFamily: "monospace", fontSize: 14, color: "#333", textAlign: "center" }}
+            >
+              EXPO_PUBLIC_CDP_PROJECT_ID=your-actual-project-id
+            </Text>
+          </View>
+        </SafeAreaView>
+      </ThemeProvider>
+    );
+  }
+
   return (
     <CDPHooksProvider config={cdpConfig}>
       <ThemeProvider>

package/template-react-native/EOATransaction.tsx

@@ -23,6 +23,9 @@ interface Props {
   onSuccess?: () => void;
 }
 
+// ETH Faucet contract address on Base Sepolia
+const FAUCET_ADDRESS = "0x3e4ed2D6d6235f9D26707fd5d5AF476fb9C91B0F" as const;
+
 function EOATransaction(props: Props) {
   const { onSuccess } = props;
   const { colors } = useTheme();
@@ -69,7 +72,7 @@ function EOATransaction(props: Props) {
         network: "base-sepolia",
         evmAccount: evmAddress,
         transaction: {
-          to: evmAddress,
+          to: FAUCET_ADDRESS,
           value: 1000000000n,
           gas: 21000n,
           chainId: 84532,
@@ -97,6 +100,27 @@ function EOATransaction(props: Props) {
     }
   };
 
+  const openFaucet = () => {
+    const ethFaucetUrl = `https://portal.cdp.coinbase.com/products/faucet?token=ETH&address=${evmAddress}`;
+    Alert.alert(
+      "Get testnet ETH",
+      "",
+      [
+        {
+          text: "Copy ETH Faucet Link",
+          onPress: () => copyToClipboard(ethFaucetUrl, "ETH Faucet Link"),
+        },
+        {
+          text: "Open ETH Faucet",
+          onPress: () => Linking.openURL(ethFaucetUrl),
+          style: "default",
+        },
+        { text: "Cancel", style: "cancel" },
+      ],
+      { cancelable: true },
+    );
+  };
+
   const createStyles = () =>
     StyleSheet.create({
       container: {
@@ -226,6 +250,10 @@ function EOATransaction(props: Props) {
         fontStyle: "italic",
         textAlign: "center",
       },
+      faucetLink: {
+        color: colors.accent,
+        textDecorationLine: "underline",
+      },
     });
 
   const styles = createStyles();
@@ -241,24 +269,7 @@ function EOATransaction(props: Props) {
             : `${parseFloat(formattedBalance).toFixed(8)} ETH`}
         </Text>
         {!hasBalance && (
-          <TouchableOpacity
-            style={styles.faucetButton}
-            onPress={() => {
-              const ethFaucetUrl = `https://portal.cdp.coinbase.com/products/faucet?token=ETH&address=${evmAddress}`;
-              Alert.alert("Get testnet ETH", "", [
-                {
-                  text: "Copy ETH Faucet Link",
-                  onPress: () => copyToClipboard(ethFaucetUrl, "ETH Faucet Link"),
-                },
-                {
-                  text: "Open ETH Faucet",
-                  onPress: () => Linking.openURL(ethFaucetUrl),
-                  style: "default",
-                },
-                { text: "Cancel", style: "cancel" },
-              ]);
-            }}
-          >
+          <TouchableOpacity style={styles.faucetButton} onPress={openFaucet}>
             <Text style={styles.faucetButtonText}>Get funds from faucet</Text>
           </TouchableOpacity>
         )}
@@ -268,9 +279,11 @@ function EOATransaction(props: Props) {
       <View style={styles.transactionSection}>
         <Text style={styles.sectionTitle}>Transfer ETH</Text>
         <Text style={styles.sectionDescription}>
-          This example transaction sends a tiny amount of ETH from your wallet to itself. This
-          transfer carries a small transaction fee, so you will see your balance decrease despite
-          transferring to yourself.
+          This example transaction sends a tiny amount of ETH from your wallet to the{" "}
+          <Text style={styles.faucetLink} onPress={openFaucet}>
+            CDP Faucet
+          </Text>
+          .
         </Text>
 
         <TouchableOpacity

package/template-react-native/SmartAccountTransaction.tsx

@@ -24,6 +24,9 @@ import { useTheme } from "./theme/ThemeContext";
 // USDC contract address on Base Sepolia
 const USDC_ADDRESS = "0x036CbD53842c5426634e7929541eC2318f3dCF7e" as const;
 
+// USDC Faucet contract address on Base Sepolia
+const FAUCET_ADDRESS = "0x8fDDcc0c5C993A1968B46787919Cc34577d6dC5c" as const;
+
 // ERC20 ABI for balance and transfer
 const ERC20_ABI = [
   {
@@ -72,11 +75,6 @@ function SmartAccountTransaction(props: Props) {
 
   const smartAccount = currentUser?.evmSmartAccounts?.[0];
 
-  const formattedBalance = useMemo(() => {
-    if (balance === undefined) return undefined;
-    return formatEther(balance);
-  }, [balance]);
-
   const formattedUsdcBalance = useMemo(() => {
     if (usdcBalance === undefined) return undefined;
     return formatUnits(usdcBalance, 6); // USDC has 6 decimals
@@ -120,13 +118,13 @@ function SmartAccountTransaction(props: Props) {
     setErrorMessage("");
 
     try {
-      // Send 1 USDC to self as an example
+      // Send 1 USDC to the faucet
       const usdcAmount = parseUnits("1", 6); // USDC has 6 decimals
 
       const transferData = encodeFunctionData({
         abi: ERC20_ABI,
         functionName: "transfer",
-        args: [smartAccount, usdcAmount],
+        args: [FAUCET_ADDRESS, usdcAmount],
       });
 
       const result = await sendUserOperation({
@@ -189,7 +187,6 @@ function SmartAccountTransaction(props: Props) {
     );
   };
 
-  const hasBalance = balance && balance > 0n; // Still check ETH for gas
   const hasUsdcBalance = usdcBalance && usdcBalance > 0n;
 
   const createStyles = () =>
@@ -378,7 +375,10 @@ function SmartAccountTransaction(props: Props) {
       <View style={styles.transactionSection}>
         <Text style={styles.sectionTitle}>Transfer 1 USDC</Text>
         <Text style={styles.sectionSubtitle}>
-          This example transaction sends 1 USDC from your wallet to itself.
+          This example transaction sends 1 USDC from your wallet to the{" "}
+          <Text style={styles.faucetLink} onPress={openFaucet}>
+            CDP Faucet
+          </Text>
         </Text>
 
         {!hasUsdcBalance && (