"use client" import { Check } from 'lucide-react' import { motion } from "framer-motion" /** * TransactionConfirmed Component * * A component that displays a success message after a cryptocurrency transaction * has been completed successfully, with details and a link to view on blockchain. */ export function TransactionConfirmed() { // Animation variants const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { when: "beforeChildren", staggerChildren: 0.2, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" }, }, } const buttonVariants = { initial: { scale: 1 }, hover: { scale: 1.03, transition: { duration: 0.2 }, }, tap: { scale: 0.97, transition: { duration: 0.1 }, }, } // Animation for the wallet icon const walletIconVariants = { hidden: { opacity: 0, scale: 0.8 }, visible: { opacity: 1, scale: 1, transition: { duration: 0.5, ease: "easeOut", delay: 0.3 }, }, } // Animation for the checkmark const checkmarkVariants = { hidden: { opacity: 0, scale: 0 }, visible: { opacity: 1, scale: 1, transition: { type: "spring", stiffness: 300, damping: 15, delay: 0.8 }, }, } return ( {/* Wallet icon with checkmark */} {/* Wallet icon */} {/* Green checkmark circle */}

{/* Success text */} Transaction Successful! {/* Transaction details */} You have successfully transferred 0.1 BTC
to 0x585mi69...45in6iio address {/* View on blockchain button */} window.open("https://www.blockchain.com/explorer", "_blank")} > View Transaction on Blockchain ) }

Transaction Confirmed

Transaction Successful!