@coinbase/create-cdp-app 0.0.43 → 0.0.44

package/template-react/src/solana/UserBalance.tsx

@@ -0,0 +1,44 @@
+import { LoadingSkeleton } from "@coinbase/cdp-react/components/ui/LoadingSkeleton";
+
+interface Props {
+  balance?: string;
+}
+
+/**
+ * A component that displays the user's balance.
+ *
+ * @param {Props} props - The props for the UserBalance component.
+ * @param {string} [props.balance] - The user's balance.
+ * @returns A component that displays the user's balance.
+ */
+function UserBalance(props: Props) {
+  const { balance } = props;
+
+  return (
+    <>
+      <h2 className="card-title">Available balance</h2>
+      <p className="user-balance flex-col-container flex-grow">
+        {balance === undefined && <LoadingSkeleton as="span" className="loading--balance" />}
+        {balance !== undefined && (
+          <span className="flex-row-container">
+            <img src="/sol.svg" alt="" className="balance-icon" />
+            <span>{balance}</span>
+            <span className="sr-only">Solana</span>
+          </span>
+        )}
+      </p>
+      <p>
+        Get testnet SOL from{" "}
+        <a
+          href="https://portal.cdp.coinbase.com/products/faucet?network=solana-devnet"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Solana Devnet Faucet
+        </a>
+      </p>
+    </>
+  );
+}
+
+export default UserBalance;

package/template-react-native/{components → evm-eoa}/WalletHeader.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
 import * as Clipboard from "expo-clipboard";
-import { useEvmAddress, useCurrentUser, useSolanaAddress } from "@coinbase/cdp-hooks";
+import { useEvmAddress, useCurrentUser } from "@coinbase/cdp-hooks";
 import { useTheme } from "../theme/ThemeContext";
-import { UserIcon } from "./UserIcon";
+import { UserIcon } from "../components/UserIcon";
 
 interface WalletHeaderProps {
   onSignOut: () => void;
@@ -12,26 +12,24 @@ 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 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 (address: string, type: "EVM" | "Solana") => {
-    if (!address) return;
+  const copyWalletAddress = async () => {
+    if (!evmWalletAddress) return;
 
     try {
-      await Clipboard.setStringAsync(address);
-      Alert.alert("Copied!", `${type} address copied to clipboard.`);
+      await Clipboard.setStringAsync(evmWalletAddress);
+      Alert.alert("Copied!", "EVM address copied to clipboard.");
     } catch (error) {
-      Alert.alert("Error", `Failed to copy ${type} address.`);
+      Alert.alert("Error", "Failed to copy EVM address.");
     }
   };
 
@@ -97,23 +95,14 @@ export const WalletHeader: React.FC<WalletHeaderProps> = ({ onSignOut }) => {
           <UserIcon size={18} color={colors.cardBackground} />
         </View>
         <View style={styles.addressContainer}>
-          {evmWalletAddress && (
+          {evmWalletAddress ? (
             <>
               <Text style={styles.addressLabel}>EVM</Text>
-              <TouchableOpacity onPress={() => copyWalletAddress(evmWalletAddress, "EVM")}>
+              <TouchableOpacity onPress={copyWalletAddress}>
                 <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>

package/template-react-native/evm-smart/WalletHeader.tsx

@@ -0,0 +1,115 @@
+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 "../components/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 evmWalletAddress = evmAddress || currentUser?.evmSmartAccounts?.[0];
+
+  const formatAddress = (address: string) => {
+    if (!address) return "";
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  };
+
+  const copyWalletAddress = async () => {
+    if (!evmWalletAddress) return;
+
+    try {
+      await Clipboard.setStringAsync(evmWalletAddress);
+      Alert.alert("Copied!", "EVM address copied to clipboard.");
+    } catch (error) {
+      Alert.alert("Error", "Failed to copy EVM 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: 14,
+        fontWeight: "500",
+        color: colors.text,
+        marginBottom: 2,
+      },
+      addressLabel: {
+        fontSize: 12,
+        color: colors.textSecondary,
+        marginBottom: 1,
+      },
+      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}>
+      <View style={styles.leftContent}>
+        <View style={styles.avatar}>
+          <UserIcon size={18} color={colors.cardBackground} />
+        </View>
+        <View style={styles.addressContainer}>
+          {evmWalletAddress ? (
+            <>
+              <Text style={styles.addressLabel}>EVM</Text>
+              <TouchableOpacity onPress={copyWalletAddress}>
+                <Text style={styles.address}>{formatAddress(evmWalletAddress)}</Text>
+              </TouchableOpacity>
+            </>
+          ) : (
+            <Text style={styles.address}>Loading...</Text>
+          )}
+        </View>
+      </View>
+      <TouchableOpacity style={styles.signOutButton} onPress={onSignOut}>
+        <Text style={styles.signOutButtonText}>Sign out</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};

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

@@ -0,0 +1,111 @@
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
+import * as Clipboard from "expo-clipboard";
+import { useSolanaAddress } from "@coinbase/cdp-hooks";
+import { useTheme } from "../theme/ThemeContext";
+import { UserIcon } from "../components/UserIcon";
+
+interface WalletHeaderProps {
+  onSignOut: () => void;
+}
+
+export const WalletHeader: React.FC<WalletHeaderProps> = ({ onSignOut }) => {
+  const { colors } = useTheme();
+  const { solanaAddress } = useSolanaAddress();
+
+  const formatAddress = (address: string) => {
+    if (!address) return "";
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  };
+
+  const copyWalletAddress = async () => {
+    if (!solanaAddress) return;
+
+    try {
+      await Clipboard.setStringAsync(solanaAddress);
+      Alert.alert("Copied!", "Solana address copied to clipboard.");
+    } catch (error) {
+      Alert.alert("Error", "Failed to copy Solana 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: 14,
+        fontWeight: "500",
+        color: colors.text,
+        marginBottom: 2,
+      },
+      addressLabel: {
+        fontSize: 12,
+        color: colors.textSecondary,
+        marginBottom: 1,
+      },
+      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}>
+      <View style={styles.leftContent}>
+        <View style={styles.avatar}>
+          <UserIcon size={18} color={colors.cardBackground} />
+        </View>
+        <View style={styles.addressContainer}>
+          {solanaAddress ? (
+            <>
+              <Text style={styles.addressLabel}>Solana</Text>
+              <TouchableOpacity onPress={copyWalletAddress}>
+                <Text style={styles.address}>{formatAddress(solanaAddress)}</Text>
+              </TouchableOpacity>
+            </>
+          ) : (
+            <Text style={styles.address}>Loading...</Text>
+          )}
+        </View>
+      </View>
+      <TouchableOpacity style={styles.signOutButton} onPress={onSignOut}>
+        <Text style={styles.signOutButtonText}>Sign out</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};

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

@@ -1,116 +0,0 @@
-"use client";
-
-import { useEvmAddress, useSolanaAddress, useIsSignedIn } from "@coinbase/cdp-hooks";
-import { Connection, clusterApiUrl, LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js";
-import { useCallback, useEffect, useMemo, useState, lazy, Suspense } from "react";
-import { createPublicClient, http, formatEther } from "viem";
-import { baseSepolia } from "viem/chains";
-
-import Header from "@/components/Header";
-import UserBalance from "@/components/UserBalance";
-
-const isSolana = process.env.NEXT_PUBLIC_CDP_CREATE_SOLANA_ACCOUNT === "true";
-const isSmartAccount = process.env.NEXT_PUBLIC_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart";
-
-// Dynamically import components based on configuration
-const TransactionComponent = lazy(() => {
-  if (isSolana) {
-    return import("@/components/SolanaTransaction");
-  } else if (isSmartAccount) {
-    return import("@/components/SmartAccountTransaction");
-  } else {
-    return import("@/components/EOATransaction");
-  }
-});
-
-/**
- * Create a viem client to access user's balance on the Base Sepolia network
- */
-const client = createPublicClient({
-  chain: baseSepolia,
-  transport: http(),
-});
-
-/**
- * Create a Solana connection to access user's balance on Solana Devnet
- */
-const solanaConnection = new Connection(clusterApiUrl("devnet"));
-
-/**
- * The Signed In screen
- */
-export default function SignedInScreen() {
-  const { isSignedIn } = useIsSignedIn();
-  const { evmAddress } = useEvmAddress();
-  const { solanaAddress } = useSolanaAddress();
-  const [balance, setBalance] = useState<bigint | undefined>(undefined);
-
-  const address = isSolana ? solanaAddress : evmAddress;
-
-  const formattedBalance = useMemo(() => {
-    if (balance === undefined) return undefined;
-    if (isSolana) {
-      // Convert lamports to SOL
-      return formatSol(Number(balance));
-    } else {
-      // Convert wei to ETH
-      return formatEther(balance);
-    }
-  }, [balance]);
-
-  const getBalance = useCallback(async () => {
-    if (isSolana && solanaAddress) {
-      // Get Solana balance in lamports
-      const lamports = await solanaConnection.getBalance(new PublicKey(solanaAddress));
-      setBalance(BigInt(lamports));
-    } else if (!isSolana && evmAddress) {
-      // Get EVM balance in wei
-      const weiBalance = await client.getBalance({
-        address: evmAddress,
-      });
-      setBalance(weiBalance);
-    }
-  }, [evmAddress, solanaAddress]);
-
-  useEffect(() => {
-    getBalance();
-    const interval = setInterval(getBalance, 500);
-    return () => clearInterval(interval);
-  }, [getBalance]);
-
-  return (
-    <>
-      <Header />
-      <main className="main flex-col-container flex-grow">
-        <div className="main-inner flex-col-container">
-          <div className="card card--user-balance">
-            <UserBalance
-              balance={formattedBalance}
-              faucetName={isSolana ? "Solana Faucet" : "Base Sepolia Faucet"}
-              faucetUrl={`https://portal.cdp.coinbase.com/products/faucet${isSolana ? "?network=solana-devnet" : ""}`}
-            />
-          </div>
-          <div className="card card--transaction">
-            {isSignedIn && address && (
-              <Suspense fallback={<div>Loading transaction component...</div>}>
-                <TransactionComponent balance={formattedBalance} onSuccess={getBalance} />
-              </Suspense>
-            )}
-          </div>
-        </div>
-      </main>
-    </>
-  );
-}
-
-/**
- * Format a Solana balance.
- *
- * @param lamports - The balance in lamports.
- * @returns The formatted balance.
- */
-function formatSol(lamports: number) {
-  const maxDecimalPlaces = 9;
-  const roundedStr = (lamports / LAMPORTS_PER_SOL).toFixed(maxDecimalPlaces);
-  return roundedStr.replace(/0+$/, "").replace(/\.$/, "");
-}

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

@@ -1,239 +0,0 @@
-"use client";
-
-import { useEvmAddress, useIsSignedIn, useSolanaAddress } from "@coinbase/cdp-hooks";
-import { Connection, clusterApiUrl, LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js";
-import { useCallback, useEffect, useMemo, useState, lazy, Suspense } from "react";
-import {
-  createPublicClient,
-  http,
-  formatEther,
-  type PublicClient,
-  type Transport,
-  type Address,
-} from "viem";
-import { baseSepolia, base } from "viem/chains";
-
-import FundWallet from "@/components/FundWallet";
-import Header from "@/components/Header";
-import UserBalance from "@/components/UserBalance";
-
-// Dynamically determine component path for EVM transactions
-const getEVMComponentPath = () => {
-  const isSmartAccount = process.env.NEXT_PUBLIC_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart";
-
-  if (isSmartAccount) {
-    return "@/components/SmartAccountTransaction";
-  } else {
-    return "@/components/EOATransaction";
-  }
-};
-
-const EVMTransactionComponent = lazy(() => import(/* @vite-ignore */ getEVMComponentPath()));
-const SolanaTransactionComponent = lazy(() => import("@/components/SolanaTransaction"));
-
-/**
- * Create a viem client to access user's balance on the Base network
- */
-const client = createPublicClient({
-  chain: base,
-  transport: http(),
-});
-
-/**
- * Create a viem client to access user's balance on the Base Sepolia network
- */
-const sepoliaClient = createPublicClient({
-  chain: baseSepolia,
-  transport: http(),
-});
-
-/**
- * Create a Solana connection to access user's balance on Solana Mainnet
- */
-const solanaMainnetConnection = new Connection(clusterApiUrl("mainnet-beta"));
-
-/**
- * Create a Solana connection to access user's balance on Solana Devnet
- */
-const solanaDevnetConnection = new Connection(clusterApiUrl("devnet"));
-
-const useEvmBalance = (
-  address: Address | null,
-  client: PublicClient<Transport, typeof base | typeof baseSepolia, undefined, undefined>,
-  poll = false,
-) => {
-  const [balance, setBalance] = useState<bigint | undefined>(undefined);
-
-  const formattedBalance = useMemo(() => {
-    if (balance === undefined) return undefined;
-    return formatEther(balance);
-  }, [balance]);
-
-  const getBalance = useCallback(async () => {
-    if (!address) return;
-    const balance = await client.getBalance({ address });
-    setBalance(balance);
-  }, [address, client]);
-
-  useEffect(() => {
-    if (!poll) {
-      return;
-    }
-    getBalance();
-    const interval = setInterval(getBalance, 500);
-    return () => clearInterval(interval);
-  }, [getBalance, poll]);
-
-  return { balance, formattedBalance, getBalance };
-};
-
-const useSolanaBalance = (address: string | null, connection: Connection, poll = false) => {
-  const [balance, setBalance] = useState<bigint | undefined>(undefined);
-
-  const formattedBalance = useMemo(() => {
-    if (balance === undefined) return undefined;
-    // Convert lamports to SOL
-    return formatSol(Number(balance));
-  }, [balance]);
-
-  const getBalance = useCallback(async () => {
-    if (!address) return;
-    try {
-      const lamports = await connection.getBalance(new PublicKey(address));
-      setBalance(BigInt(lamports));
-    } catch (error) {
-      console.error("Error fetching Solana balance:", error);
-      setBalance(BigInt(0));
-    }
-  }, [address, connection]);
-
-  useEffect(() => {
-    if (!poll) {
-      return;
-    }
-    getBalance();
-    const interval = setInterval(getBalance, 500);
-    return () => clearInterval(interval);
-  }, [getBalance, poll]);
-
-  return { balance, formattedBalance, getBalance };
-};
-
-/**
- * Format a Solana balance.
- *
- * @param lamports - The balance in lamports.
- * @returns The formatted balance.
- */
-function formatSol(lamports: number) {
-  const maxDecimalPlaces = 9;
-  const roundedStr = (lamports / LAMPORTS_PER_SOL).toFixed(maxDecimalPlaces);
-  return roundedStr.replace(/0+$/, "").replace(/\.$/, "");
-}
-
-/**
- * The Signed In screen with onramp support for both EVM and Solana
- */
-export default function SignedInScreen() {
-  const { isSignedIn } = useIsSignedIn();
-  const { evmAddress } = useEvmAddress();
-  const { solanaAddress } = useSolanaAddress();
-
-  const { formattedBalance, getBalance } = useEvmBalance(evmAddress, client, true);
-  const { formattedBalance: formattedBalanceSepolia, getBalance: getBalanceSepolia } =
-    useEvmBalance(evmAddress, sepoliaClient, true);
-
-  const { formattedBalance: formattedBalanceSolana, getBalance: getBalanceSolana } =
-    useSolanaBalance(solanaAddress, solanaMainnetConnection);
-  const { formattedBalance: formattedBalanceSolanaDevnet, getBalance: getBalanceSolanaDevnet } =
-    useSolanaBalance(solanaAddress, solanaDevnetConnection, true);
-
-  return (
-    <>
-      <Header />
-      <main className="main flex-col-container flex-grow">
-        {evmAddress && (
-          <>
-            <p className="page-heading">Fund your EVM wallet on Base</p>
-            <div className="main-inner flex-col-container">
-              <div className="card card--user-balance">
-                <UserBalance balance={formattedBalance} />
-              </div>
-              <div className="card card--transaction">
-                {isSignedIn && (
-                  <FundWallet
-                    onSuccess={getBalance}
-                    network="base"
-                    cryptoCurrency="eth"
-                    destinationAddress={evmAddress}
-                  />
-                )}
-              </div>
-            </div>
-            <hr className="page-divider" />
-            <p className="page-heading">Send an EVM transaction on Base Sepolia</p>
-            <div className="main-inner flex-col-container">
-              <div className="card card--user-balance">
-                <UserBalance
-                  balance={formattedBalanceSepolia}
-                  faucetName="Base Sepolia Faucet"
-                  faucetUrl="https://portal.cdp.coinbase.com/products/faucet"
-                />
-              </div>
-              <div className="card card--transaction">
-                {isSignedIn && (
-                  <Suspense fallback={<div>Loading transaction component...</div>}>
-                    <EVMTransactionComponent
-                      balance={formattedBalanceSepolia}
-                      onSuccess={getBalanceSepolia}
-                    />
-                  </Suspense>
-                )}
-              </div>
-            </div>
-          </>
-        )}
-
-        {solanaAddress && (
-          <>
-            {evmAddress && <hr className="page-divider" />}
-            <p className="page-heading">Fund your Solana wallet on Mainnet</p>
-            <div className="main-inner flex-col-container">
-              <div className="card card--user-balance">
-                <UserBalance balance={formattedBalanceSolana} />
-              </div>
-              <div className="card card--transaction">
-                {isSignedIn && (
-                  <FundWallet
-                    onSuccess={getBalanceSolana}
-                    network="solana"
-                    cryptoCurrency="sol"
-                    destinationAddress={solanaAddress}
-                  />
-                )}
-              </div>
-            </div>
-            <hr className="page-divider" />
-            <p className="page-heading">Send a Solana transaction on Devnet</p>
-            <div className="main-inner flex-col-container">
-              <div className="card card--user-balance">
-                <UserBalance
-                  balance={formattedBalanceSolanaDevnet}
-                  faucetName="Solana Devnet Faucet"
-                  faucetUrl="https://portal.cdp.coinbase.com/products/faucet?network=solana-devnet"
-                />
-              </div>
-              <div className="card card--transaction">
-                {isSignedIn && (
-                  <Suspense fallback={<div>Loading transaction component...</div>}>
-                    <SolanaTransactionComponent onSuccess={getBalanceSolanaDevnet} />
-                  </Suspense>
-                )}
-              </div>
-            </div>
-          </>
-        )}
-      </main>
-    </>
-  );
-}