@coinbase/create-cdp-app 0.0.38 → 0.0.39

package/template-react-native/Transaction.tsx

@@ -1 +1,101 @@
-export { default } from "./EOATransaction";
+import React, { useState } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { useEvmAddress, useSolanaAddress } from "@coinbase/cdp-hooks";
+import { useTheme } from "./theme/ThemeContext";
+import EOATransaction from "./EOATransaction";
+import SolanaTransaction from "./SolanaTransaction";
+
+interface Props {
+  onSuccess?: () => void;
+}
+
+function Transaction(props: Props) {
+  const { onSuccess } = props;
+  const { colors } = useTheme();
+  const { evmAddress } = useEvmAddress();
+  const { solanaAddress } = useSolanaAddress();
+  const [activeTab, setActiveTab] = useState<"evm" | "solana">("evm");
+
+  // Show tabs only if both EVM and Solana addresses are available
+  const showTabs = !!evmAddress && !!solanaAddress;
+
+  const createStyles = () =>
+    StyleSheet.create({
+      container: {
+        flex: 1,
+        width: "100%",
+      },
+      tabContainer: {
+        flexDirection: "row",
+        marginBottom: 16,
+        backgroundColor: colors.cardBackground,
+        borderRadius: 8,
+        padding: 4,
+        borderWidth: 1,
+        borderColor: colors.border,
+      },
+      tab: {
+        flex: 1,
+        paddingVertical: 12,
+        alignItems: "center",
+        borderRadius: 6,
+      },
+      activeTab: {
+        backgroundColor: colors.accent,
+      },
+      tabText: {
+        fontSize: 16,
+        fontWeight: "600",
+        color: colors.textSecondary,
+      },
+      activeTabText: {
+        color: "#ffffff",
+      },
+    });
+
+  const styles = createStyles();
+
+  // If only one address type is available, show that component directly
+  if (!showTabs) {
+    if (evmAddress) {
+      return <EOATransaction onSuccess={onSuccess} />;
+    }
+    if (solanaAddress) {
+      return <SolanaTransaction onSuccess={onSuccess} />;
+    }
+    return null; // Loading state handled by parent
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Tab selector */}
+      <View style={styles.tabContainer}>
+        <TouchableOpacity
+          style={[styles.tab, activeTab === "evm" && styles.activeTab]}
+          onPress={() => setActiveTab("evm")}
+        >
+          <Text style={[styles.tabText, activeTab === "evm" && styles.activeTabText]}>
+            Ethereum
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.tab, activeTab === "solana" && styles.activeTab]}
+          onPress={() => setActiveTab("solana")}
+        >
+          <Text style={[styles.tabText, activeTab === "solana" && styles.activeTabText]}>
+            Solana
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Content */}
+      {activeTab === "evm" ? (
+        <EOATransaction onSuccess={onSuccess} />
+      ) : (
+        <SolanaTransaction onSuccess={onSuccess} />
+      )}
+    </View>
+  );
+}
+
+export default Transaction;

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

@@ -1,7 +1,7 @@
 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 { useEvmAddress, useCurrentUser, useSolanaAddress } from "@coinbase/cdp-hooks";
 import { useTheme } from "../theme/ThemeContext";
 import { UserIcon } from "./UserIcon";
 
@@ -12,24 +12,26 @@ interface WalletHeaderProps {
 export const WalletHeader: React.FC<WalletHeaderProps> = ({ onSignOut }) => {
   const { colors } = useTheme();
   const { evmAddress } = useEvmAddress();
+  const { solanaAddress } = useSolanaAddress();
   const { currentUser } = useCurrentUser();
 
   // Use EVM address if available, otherwise fall back to smart account
-  const walletAddress = evmAddress || currentUser?.evmSmartAccounts?.[0];
+  const evmWalletAddress = evmAddress || currentUser?.evmSmartAccounts?.[0];
+  const solanaWalletAddress = solanaAddress;
 
   const formatAddress = (address: string) => {
     if (!address) return "";
     return `${address.slice(0, 6)}...${address.slice(-4)}`;
   };
 
-  const copyWalletAddress = async () => {
-    if (!walletAddress) return;
+  const copyWalletAddress = async (address: string, type: "EVM" | "Solana") => {
+    if (!address) return;
 
     try {
-      await Clipboard.setStringAsync(walletAddress);
-      Alert.alert("Copied!", "Wallet address copied to clipboard.");
+      await Clipboard.setStringAsync(address);
+      Alert.alert("Copied!", `${type} address copied to clipboard.`);
     } catch (error) {
-      Alert.alert("Error", "Failed to copy wallet address.");
+      Alert.alert("Error", `Failed to copy ${type} address.`);
     }
   };
 
@@ -63,9 +65,15 @@ export const WalletHeader: React.FC<WalletHeaderProps> = ({ onSignOut }) => {
         flex: 1,
       },
       address: {
-        fontSize: 16,
+        fontSize: 14,
         fontWeight: "500",
         color: colors.text,
+        marginBottom: 2,
+      },
+      addressLabel: {
+        fontSize: 12,
+        color: colors.textSecondary,
+        marginBottom: 1,
       },
       signOutButton: {
         backgroundColor: colors.accent,
@@ -84,16 +92,32 @@ export const WalletHeader: React.FC<WalletHeaderProps> = ({ onSignOut }) => {
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity style={styles.leftContent} onPress={copyWalletAddress}>
+      <View style={styles.leftContent}>
         <View style={styles.avatar}>
           <UserIcon size={18} color={colors.cardBackground} />
         </View>
         <View style={styles.addressContainer}>
-          <Text style={styles.address}>
-            {walletAddress ? formatAddress(walletAddress) : "Loading..."}
-          </Text>
+          {evmWalletAddress && (
+            <>
+              <Text style={styles.addressLabel}>EVM</Text>
+              <TouchableOpacity onPress={() => copyWalletAddress(evmWalletAddress, "EVM")}>
+                <Text style={styles.address}>{formatAddress(evmWalletAddress)}</Text>
+              </TouchableOpacity>
+            </>
+          )}
+          {solanaWalletAddress && (
+            <>
+              <Text style={styles.addressLabel}>Solana</Text>
+              <TouchableOpacity onPress={() => copyWalletAddress(solanaWalletAddress, "Solana")}>
+                <Text style={styles.address}>{formatAddress(solanaWalletAddress)}</Text>
+              </TouchableOpacity>
+            </>
+          )}
+          {!evmWalletAddress && !solanaWalletAddress && (
+            <Text style={styles.address}>Loading...</Text>
+          )}
         </View>
-      </TouchableOpacity>
+      </View>
       <TouchableOpacity style={styles.signOutButton} onPress={onSignOut}>
         <Text style={styles.signOutButtonText}>Sign out</Text>
       </TouchableOpacity>

package/template-react-native/env.example

@@ -1,5 +1,6 @@
 # CDP Configuration for the main app
 EXPO_PUBLIC_CDP_PROJECT_ID=your-project-id-here
 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

package/template-react-native/index.ts

@@ -2,12 +2,19 @@ import structuredClone from "@ungap/structured-clone";
 import { registerRootComponent } from "expo";
 import { install } from "react-native-quick-crypto";
 import "react-native-get-random-values";
+import { Buffer } from "buffer";
 
 if (!("structuredClone" in globalThis)) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   globalThis.structuredClone = structuredClone as any;
 }
 
+// Setup Buffer global for Solana Web3.js compatibility
+if (!("Buffer" in globalThis)) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  globalThis.Buffer = Buffer as any;
+}
+
 install();
 
 import App from "./App";

package/template-react-native/metro.config.js

@@ -0,0 +1,19 @@
+const { getDefaultConfig } = require("expo/metro-config");
+
+const config = getDefaultConfig(__dirname);
+
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (moduleName.includes("zustand")) {
+    const result = require.resolve(moduleName);
+    return context.resolveRequest(context, result, platform);
+  }
+
+  if (moduleName.includes("rpc-websockets")) {
+    const result = require.resolve(moduleName);
+    return context.resolveRequest(context, result, platform);
+  }
+
+  return context.resolveRequest(context, moduleName, platform);
+};
+
+module.exports = config;

package/template-react-native/package.json

@@ -13,7 +13,9 @@
   "dependencies": {
     "@coinbase/cdp-hooks": "latest",
     "@react-native-async-storage/async-storage": "^2.2.0",
+    "@solana/web3.js": "^1.98.4",
     "@ungap/structured-clone": "^1.3.0",
+    "buffer": "^6.0.3",
     "expo": "~53.0.22",
     "expo-asset": "~11.1.7",
     "expo-clipboard": "~7.1.5",
@@ -24,6 +26,7 @@
     "react-native": "0.79.6",
     "react-native-get-random-values": "^1.11.0",
     "react-native-quick-crypto": "^0.7.17",
+    "readable-stream": "^4.6.0",
     "viem": "^2.21.45"
   },
   "devDependencies": {