@coinbase/create-cdp-app 0.0.42 → 0.0.44

package/template-react/src/SignedInScreen.tsx

@@ -1,116 +0,0 @@
-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 { CDP_CONFIG } from "./config";
-import Header from "./Header";
-import Loading from "./Loading";
-import UserBalance from "./UserBalance";
-
-const isSolana = !!CDP_CONFIG.solana;
-const isSmartAccount = CDP_CONFIG.ethereum?.createOnLogin === "smart";
-
-// Dynamically determine component path to avoid Vite static analysis
-const getComponentPath = () => {
-  if (isSolana) {
-    return "./SolanaTransaction";
-  } else if (isSmartAccount) {
-    return "./SmartAccountTransaction";
-  } else {
-    return "./EOATransaction";
-  }
-};
-
-const TransactionComponent = lazy(() => import(/* @vite-ignore */ getComponentPath()));
-
-/**
- * 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
- */
-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} />
-          </div>
-          <div className="card card--transaction">
-            {isSignedIn && address && (
-              <Suspense fallback={<Loading />}>
-                <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(/\.$/, "");
-}
-
-export default SignedInScreen;

package/template-react-native/Transaction.tsx

@@ -1,101 +0,0 @@
-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;