@coinbase/create-cdp-app 0.0.35 → 0.0.37

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

@@ -0,0 +1,157 @@
+"use client";
+
+import { Buffer } from "buffer";
+
+import { useSolanaAddress, useSignSolanaTransaction } from "@coinbase/cdp-hooks";
+import { Button } from "@coinbase/cdp-react/components/ui/Button";
+import {
+  PublicKey,
+  Transaction,
+  SystemProgram,
+  SYSVAR_RECENT_BLOCKHASHES_PUBKEY,
+} from "@solana/web3.js";
+import { useEffect, useState } from "react";
+
+import { IconCheck, IconCopy } from "./Icons";
+
+interface Props {
+  onSuccess?: () => void;
+}
+
+/**
+ * Solana transaction component that demonstrates signing transactions.
+ *
+ * @param props - The component props
+ */
+export default function SolanaTransaction(props: Props) {
+  const { onSuccess } = props;
+  const { solanaAddress } = useSolanaAddress();
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [signedTransaction, setSignedTransaction] = useState<string | null>(null);
+  const { signSolanaTransaction } = useSignSolanaTransaction();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleSignTransaction = async () => {
+    if (!solanaAddress) {
+      alert("No Solana address available.");
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+    setSignedTransaction(null);
+
+    try {
+      const transaction = createAndEncodeTransaction(solanaAddress);
+      const result = await signSolanaTransaction({
+        solanaAccount: solanaAddress,
+        transaction,
+      });
+
+      setSignedTransaction(result.signedTransaction);
+      onSuccess?.();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Transaction signing failed";
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const copyTransaction = async () => {
+    if (!signedTransaction) return;
+    try {
+      await navigator.clipboard.writeText(signedTransaction);
+      setIsCopied(true);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    if (!isCopied) return;
+    const timeout = setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  }, [isCopied]);
+
+  return (
+    <div className="transaction-container">
+      <div className="transaction-section">
+        <h3>Sign Solana Transaction</h3>
+        <p className="transaction-description">
+          This example demonstrates signing a Solana transaction with your embedded wallet.
+        </p>
+
+        <Button
+          className="tx-button"
+          onClick={handleSignTransaction}
+          variant="secondary"
+          disabled={!solanaAddress || isLoading}
+        >
+          {isLoading ? "Signing..." : "Sign Transaction"}
+        </Button>
+
+        {error && (
+          <div className="error-container">
+            <p className="error-text">{error}</p>
+          </div>
+        )}
+
+        {signedTransaction && (
+          <div className="success-container">
+            <h4>Transaction Signed Successfully</h4>
+            <div className="transaction-result">
+              <label>Signed Transaction:</label>
+              <button
+                aria-label="copy signed transaction"
+                className="flex-row-container copy-address-button"
+                onClick={copyTransaction}
+              >
+                {!isCopied && <IconCopy className="user-icon user-icon--copy" />}
+                {isCopied && <IconCheck className="user-icon user-icon--check" />}
+                <span className="wallet-address">
+                  {signedTransaction.slice(0, 4)}...{signedTransaction.slice(-4)}
+                </span>
+              </button>
+              <small>Click to copy signed transaction</small>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Creates and encodes a Solana transaction.
+ *
+ * @param address - The address of the sender.
+ * @returns The base64 encoded transaction.
+ */
+function createAndEncodeTransaction(address: string) {
+  const recipientAddress = new PublicKey(address);
+
+  const fromPubkey = new PublicKey(address);
+
+  const transferAmount = 1; // 1 Lamport
+
+  const transaction = new Transaction().add(
+    SystemProgram.transfer({
+      fromPubkey,
+      toPubkey: recipientAddress,
+      lamports: transferAmount,
+    }),
+  );
+
+  transaction.recentBlockhash = SYSVAR_RECENT_BLOCKHASHES_PUBKEY.toBase58();
+  transaction.feePayer = fromPubkey;
+
+  const serializedTransaction = transaction.serialize({
+    requireAllSignatures: false,
+  });
+
+  return Buffer.from(serializedTransaction).toString("base64");
+}

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

@@ -16,6 +16,8 @@ interface Props {
  */
 export default function UserBalance(props: Props) {
   const { balance, faucetUrl, faucetName } = props;
+  const isSolana = !!process.env.NEXT_PUBLIC_CDP_CREATE_SOLANA_ACCOUNT;
+
   return (
     <>
       <h2 className="card-title">Available balance</h2>
@@ -23,15 +25,15 @@ export default function UserBalance(props: Props) {
         {balance === undefined && <LoadingSkeleton as="span" className="loading--balance" />}
         {balance !== undefined && (
           <span className="flex-row-container">
-            <img src="/eth.svg" alt="" className="balance-icon" />
+            <img src={isSolana ? "/sol.svg" : "/eth.svg"} alt="" className="balance-icon" />
             <span>{balance}</span>
-            <span className="sr-only">Ethereum</span>
+            <span className="sr-only">{isSolana ? "Solana" : "Ethereum"}</span>
           </span>
         )}
       </p>
       {faucetUrl && faucetName && (
         <p>
-          Get testnet ETH from{" "}
+          Get testnet {isSolana ? "SOL" : "ETH"} from{" "}
           <a href={faucetUrl} target="_blank" rel="noopener noreferrer">
             {faucetName}
           </a>

package/template-react/README.md

@@ -66,7 +66,8 @@ Visit [http://localhost:3000](http://localhost:3000) to see your app.
 
 This template comes with:
 - CDP React components for authentication
-- Example transaction components for Base Sepolia
+- Example transaction components for Base Sepolia (EVM) and Solana Devnet
+- Support for EVM EOA, EVM Smart Accounts, and Solana account types
 - Vite for fast development and building
 - TypeScript for type safety
 - ESLint for code quality

package/template-react/env.example

@@ -1,6 +1,8 @@
 # CDP Configuration
 VITE_CDP_PROJECT_ID=example-id
 
-# Account type: "evm-eoa" for regular accounts, "evm-smart" for Smart Accounts (gasless transactions and improved UX)
-VITE_CDP_CREATE_ACCOUNT_TYPE=evm-eoa
+# Ethereum Account type: "eoa" for regular accounts, "smart" for Smart Accounts (gasless transactions and improved UX)
+VITE_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE=eoa
+# Whether to create a Solana Account
+VITE_CDP_CREATE_SOLANA_ACCOUNT=false
 

package/template-react/package.json

@@ -18,7 +18,9 @@
     "@coinbase/cdp-react": "latest",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "viem": "^2.33.0"
+    "viem": "^2.33.0",
+    "@solana/web3.js": "^1.98.4",
+    "buffer": "^6.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",

package/template-react/public/sol.svg

@@ -0,0 +1,13 @@
+<svg width="101" height="88" viewBox="0 0 101 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100.48 69.3817L83.8068 86.8015C83.4444 87.1799 83.0058 87.4816 82.5185 87.6878C82.0312 87.894 81.5055 88.0003 80.9743 88H1.93563C1.55849 88 1.18957 87.8926 0.874202 87.6912C0.558829 87.4897 0.31074 87.2029 0.160416 86.8659C0.0100923 86.529 -0.0359181 86.1566 0.0280382 85.7945C0.0919944 85.4324 0.263131 85.0964 0.520422 84.8278L17.2061 67.408C17.5676 67.0306 18.0047 66.7295 18.4904 66.5234C18.9762 66.3172 19.5002 66.2104 20.0301 66.2095H99.0644C99.4415 66.2095 99.8104 66.3169 100.126 66.5183C100.441 66.7198 100.689 67.0067 100.84 67.3436C100.99 67.6806 101.036 68.0529 100.972 68.415C100.908 68.7771 100.737 69.1131 100.48 69.3817ZM83.8068 34.3032C83.4444 33.9248 83.0058 33.6231 82.5185 33.4169C82.0312 33.2108 81.5055 33.1045 80.9743 33.1048H1.93563C1.55849 33.1048 1.18957 33.2121 0.874202 33.4136C0.558829 33.6151 0.31074 33.9019 0.160416 34.2388C0.0100923 34.5758 -0.0359181 34.9482 0.0280382 35.3103C0.0919944 35.6723 0.263131 36.0083 0.520422 36.277L17.2061 53.6968C17.5676 54.0742 18.0047 54.3752 18.4904 54.5814C18.9762 54.7875 19.5002 54.8944 20.0301 54.8952H99.0644C99.4415 54.8952 99.8104 54.7879 100.126 54.5864C100.441 54.3849 100.689 54.0981 100.84 53.7612C100.99 53.4242 101.036 53.0518 100.972 52.6897C100.908 52.3277 100.737 51.9917 100.48 51.723L83.8068 34.3032ZM1.93563 21.7905H80.9743C81.5055 21.7907 82.0312 21.6845 82.5185 21.4783C83.0058 21.2721 83.4444 20.9704 83.8068 20.592L100.48 3.17219C100.737 2.90357 100.908 2.56758 100.972 2.2055C101.036 1.84342 100.99 1.47103 100.84 1.13408C100.689 0.79713 100.441 0.510296 100.126 0.308823C99.8104 0.107349 99.4415 1.24074e-05 99.0644 0L20.0301 0C19.5002 0.000878397 18.9762 0.107699 18.4904 0.313848C18.0047 0.519998 17.5676 0.821087 17.2061 1.19848L0.524723 18.6183C0.267681 18.8866 0.0966198 19.2223 0.0325185 19.5839C-0.0315829 19.9456 0.0140624 20.3177 0.163856 20.6545C0.31365 20.9913 0.561081 21.2781 0.875804 21.4799C1.19053 21.6817 1.55886 21.7896 1.93563 21.7905Z" fill="url(#paint0_linear_174_4403)"/>
+<defs>
+<linearGradient id="paint0_linear_174_4403" x1="8.52558" y1="90.0973" x2="88.9933" y2="-3.01622" gradientUnits="userSpaceOnUse">
+<stop offset="0.08" stop-color="#9945FF"/>
+<stop offset="0.3" stop-color="#8752F3"/>
+<stop offset="0.5" stop-color="#5497D5"/>
+<stop offset="0.6" stop-color="#43B4CA"/>
+<stop offset="0.72" stop-color="#28E0B9"/>
+<stop offset="0.97" stop-color="#19FB9B"/>
+</linearGradient>
+</defs>
+</svg>

package/template-react/src/Header.tsx

@@ -1,7 +1,8 @@
-import { useEvmAddress } from "@coinbase/cdp-hooks";
+import { useEvmAddress, useSolanaAddress } from "@coinbase/cdp-hooks";
 import { AuthButton } from "@coinbase/cdp-react/components/AuthButton";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
+import { CDP_CONFIG } from "./config";
 import { IconCheck, IconCopy, IconUser } from "./Icons";
 
 /**
@@ -9,12 +10,25 @@ import { IconCheck, IconCopy, IconUser } from "./Icons";
  */
 function Header() {
   const { evmAddress } = useEvmAddress();
+  const { solanaAddress } = useSolanaAddress();
+  const isSolana = !!CDP_CONFIG.solana;
+  const address = isSolana ? solanaAddress : evmAddress;
   const [isCopied, setIsCopied] = useState(false);
 
+  const formatAddress = useCallback(
+    (address: string) => {
+      if (!address) return "";
+      return isSolana
+        ? `${address.slice(0, 4)}...${address.slice(-4)}`
+        : `${address.slice(0, 6)}...${address.slice(-4)}`;
+    },
+    [isSolana],
+  );
+
   const copyAddress = async () => {
-    if (!evmAddress) return;
+    if (!address) return;
     try {
-      await navigator.clipboard.writeText(evmAddress);
+      await navigator.clipboard.writeText(address);
       setIsCopied(true);
     } catch (error) {
       console.error(error);
@@ -29,7 +43,7 @@ function Header() {
     return () => clearTimeout(timeout);
   }, [isCopied]);
 
-  const isSmartAccountsEnabled = import.meta.env.VITE_CDP_CREATE_ACCOUNT_TYPE === "evm-smart";
+  const isSmartAccountsEnabled = import.meta.env.VITE_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart";
 
   return (
     <header>
@@ -39,7 +53,7 @@ function Header() {
           {isSmartAccountsEnabled && <span className="smart-badge">SMART</span>}
         </div>
         <div className="user-info flex-row-container">
-          {evmAddress && (
+          {address && (
             <button
               aria-label="copy wallet address"
               className="flex-row-container copy-address-button"
@@ -52,9 +66,7 @@ function Header() {
                 </>
               )}
               {isCopied && <IconCheck className="user-icon user-icon--check" />}
-              <span className="wallet-address">
-                {evmAddress.slice(0, 6)}...{evmAddress.slice(-4)}
-              </span>
+              <span className="wallet-address">{formatAddress(address)}</span>
             </button>
           )}
           <AuthButton />

package/template-react/src/SignedInScreen.tsx

@@ -1,12 +1,30 @@
-import { useEvmAddress, useIsSignedIn } from "@coinbase/cdp-hooks";
-import { useCallback, useEffect, useMemo, useState } from "react";
+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 Transaction from "./Transaction";
+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
  */
@@ -15,26 +33,47 @@ const client = createPublicClient({
   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 isSolana = !!CDP_CONFIG.solana;
+  const address = isSolana ? solanaAddress : evmAddress;
+
   const formattedBalance = useMemo(() => {
     if (balance === undefined) return undefined;
-    return formatEther(balance);
-  }, [balance]);
+    if (isSolana) {
+      // Convert lamports to SOL
+      return formatSol(Number(balance));
+    } else {
+      // Convert wei to ETH
+      return formatEther(balance);
+    }
+  }, [balance, isSolana]);
 
   const getBalance = useCallback(async () => {
-    if (!evmAddress) return;
-    const balance = await client.getBalance({
-      address: evmAddress,
-    });
-    setBalance(balance);
-  }, [evmAddress]);
+    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, isSolana]);
 
   useEffect(() => {
     getBalance();
@@ -51,8 +90,10 @@ function SignedInScreen() {
             <UserBalance balance={formattedBalance} />
           </div>
           <div className="card card--transaction">
-            {isSignedIn && evmAddress && (
-              <Transaction balance={formattedBalance} onSuccess={getBalance} />
+            {isSignedIn && address && (
+              <Suspense fallback={<Loading />}>
+                <TransactionComponent balance={formattedBalance} onSuccess={getBalance} />
+              </Suspense>
             )}
           </div>
         </div>
@@ -61,4 +102,16 @@ function SignedInScreen() {
   );
 }
 
+/**
+ * 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/src/SolanaTransaction.tsx

@@ -0,0 +1,158 @@
+import { Buffer } from "buffer";
+
+import { useSolanaAddress, useSignSolanaTransaction } from "@coinbase/cdp-hooks";
+import { Button } from "@coinbase/cdp-react/components/ui/Button";
+import {
+  PublicKey,
+  Transaction,
+  SystemProgram,
+  SYSVAR_RECENT_BLOCKHASHES_PUBKEY,
+} from "@solana/web3.js";
+import { useEffect, useState } from "react";
+
+import { IconCheck, IconCopy } from "./Icons";
+
+interface Props {
+  onSuccess?: () => void;
+}
+
+/**
+ * Solana transaction component that demonstrates signing transactions.
+ *
+ * @param props - The component props
+ */
+function SolanaTransaction(props: Props) {
+  const { onSuccess } = props;
+  const { solanaAddress } = useSolanaAddress();
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [signedTransaction, setSignedTransaction] = useState<string | null>(null);
+  const { signSolanaTransaction } = useSignSolanaTransaction();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleSignTransaction = async () => {
+    if (!solanaAddress) {
+      alert("No Solana address available.");
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+    setSignedTransaction(null);
+
+    try {
+      const transaction = createAndEncodeTransaction(solanaAddress);
+      const result = await signSolanaTransaction({
+        solanaAccount: solanaAddress,
+        transaction,
+      });
+
+      setSignedTransaction(result.signedTransaction);
+      onSuccess?.();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Transaction signing failed";
+      setError(errorMessage);
+      alert(`Transaction Failed: ${errorMessage}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const copyTransaction = async () => {
+    if (!signedTransaction) return;
+    try {
+      await navigator.clipboard.writeText(signedTransaction);
+      setIsCopied(true);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    if (!isCopied) return;
+    const timeout = setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  }, [isCopied]);
+
+  return (
+    <div className="transaction-container">
+      <div className="transaction-section">
+        <h3>Sign Solana Transaction</h3>
+        <p className="transaction-description">
+          This example demonstrates signing a Solana transaction with your embedded wallet.
+        </p>
+
+        <Button
+          className="tx-button"
+          onClick={handleSignTransaction}
+          variant="secondary"
+          disabled={!solanaAddress || isLoading}
+        >
+          {isLoading ? "Signing..." : "Sign Transaction"}
+        </Button>
+
+        {error && (
+          <div className="error-container">
+            <p className="error-text">{error}</p>
+          </div>
+        )}
+
+        {signedTransaction && (
+          <div className="success-container">
+            <h4>Transaction Signed Successfully</h4>
+            <div className="transaction-result">
+              <label>Signed Transaction:</label>
+              <Button
+                aria-label="copy signed transaction"
+                className="flex-row-container copy-address-button"
+                onClick={copyTransaction}
+              >
+                {!isCopied && <IconCopy className="user-icon user-icon--copy" />}
+                {isCopied && <IconCheck className="user-icon user-icon--check" />}
+                <span className="wallet-address">
+                  {signedTransaction.slice(0, 4)}...{signedTransaction.slice(-4)}
+                </span>
+              </Button>
+              <small>Click to copy signed transaction</small>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Creates and encodes a Solana transaction.
+ *
+ * @param address - The address of the sender.
+ * @returns The base64 encoded transaction.
+ */
+function createAndEncodeTransaction(address: string) {
+  const recipientAddress = new PublicKey(address);
+
+  const fromPubkey = new PublicKey(address);
+
+  const transferAmount = 1; // 1 Lamport
+
+  const transaction = new Transaction().add(
+    SystemProgram.transfer({
+      fromPubkey,
+      toPubkey: recipientAddress,
+      lamports: transferAmount,
+    }),
+  );
+
+  transaction.recentBlockhash = SYSVAR_RECENT_BLOCKHASHES_PUBKEY.toBase58();
+  transaction.feePayer = fromPubkey;
+
+  const serializedTransaction = transaction.serialize({
+    requireAllSignatures: false,
+  });
+
+  return Buffer.from(serializedTransaction).toString("base64");
+}
+
+export default SolanaTransaction;

package/template-react/src/UserBalance.tsx

@@ -1,5 +1,7 @@
 import { LoadingSkeleton } from "@coinbase/cdp-react/components/ui/LoadingSkeleton";
 
+import { CDP_CONFIG } from "./config";
+
 interface Props {
   balance?: string;
 }
@@ -13,6 +15,8 @@ interface Props {
  */
 function UserBalance(props: Props) {
   const { balance } = props;
+  const isSolana = !!CDP_CONFIG.solana;
+
   return (
     <>
       <h2 className="card-title">Available balance</h2>
@@ -20,21 +24,36 @@ function UserBalance(props: Props) {
         {balance === undefined && <LoadingSkeleton as="span" className="loading--balance" />}
         {balance !== undefined && (
           <span className="flex-row-container">
-            <img src="/eth.svg" alt="" className="balance-icon" />
+            <img src={isSolana ? "/sol.svg" : "/eth.svg"} alt="" className="balance-icon" />
             <span>{balance}</span>
-            <span className="sr-only">Ethereum</span>
+            <span className="sr-only">{isSolana ? "Solana" : "Ethereum"}</span>
           </span>
         )}
       </p>
       <p>
-        Get testnet ETH from{" "}
-        <a
-          href="https://portal.cdp.coinbase.com/products/faucet"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Base Sepolia Faucet
-        </a>
+        {isSolana ? (
+          <>
+            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>
+          </>
+        ) : (
+          <>
+            Get testnet ETH from{" "}
+            <a
+              href="https://portal.cdp.coinbase.com/products/faucet"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Base Sepolia Faucet
+            </a>
+          </>
+        )}
       </p>
     </>
   );