Currency Transfer

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Currency Transfer
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import {
14  ArrowDownIcon,
15  ArrowUpDown,
16  ArrowUpIcon,
17  Check,
18  InfoIcon,
19} from "lucide-react";
20import { AnimatePresence, motion } from "motion/react";
21import { useEffect, useState } from "react";
22import { Card, CardContent } from "@/components/ui/card";
23import {
24  Tooltip,
25  TooltipContent,
26  TooltipProvider,
27  TooltipTrigger,
28} from "@/components/ui/tooltip";
29import { cn } from "@/lib/utils";
30 
31interface CheckmarkProps {
32  size?: number;
33  strokeWidth?: number;
34  color?: string;
35  className?: string;
36}
37 
38const draw = {
39  hidden: { pathLength: 0, opacity: 0 },
40  visible: (i: number) => ({
41    pathLength: 1,
42    opacity: 1,
43    transition: {
44      pathLength: {
45        delay: i * 0.2,
46        type: "spring",
47        duration: 1.5,
48        bounce: 0.2,
49        ease: [0.22, 1, 0.36, 1],
50      },
51      opacity: { delay: i * 0.2, duration: 0.3 },
52    },
53  }),
54};
55 
56export function Checkmark({
57  size = 100,
58  strokeWidth = 2,
59  color = "currentColor",
60  className = "",
61}: CheckmarkProps) {
62  return (
63    <motion.svg
64      animate="visible"
65      className={className}
66      height={size}
67      initial="hidden"
68      viewBox="0 0 100 100"
69      width={size}
70    >
71      <title>Animated Checkmark</title>
72      <motion.circle
73        custom={0}
74        cx="50"
75        cy="50"
76        r="42"
77        stroke={color}
78        style={{
79          strokeWidth,
80          strokeLinecap: "round",
81          fill: "transparent",
82          filter: "drop-shadow(0 0 2px rgba(16, 185, 129, 0.2))",
83        }}
84        variants={draw as any}
85      />
86      <motion.path
87        custom={1}
88        d="M32 50L45 63L68 35"
89        stroke={color}
90        style={{
91          strokeWidth: strokeWidth + 0.5,
92          strokeLinecap: "round",
93          strokeLinejoin: "round",
94          fill: "transparent",
95          filter: "drop-shadow(0 0 1px rgba(16, 185, 129, 0.3))",
96        }}
97        variants={draw as any}
98      />
99    </motion.svg>
100  );
101}
102 
103export default function CurrencyTransfer() {
104  const [isCompleted, setIsCompleted] = useState(false);
105  const transactionId = "TXN-DAB3UL494";
106 
107  useEffect(() => {
108    const timer = setTimeout(() => {
109      setIsCompleted(true);
110    }, 1500);
111 
112    return () => clearTimeout(timer);
113  }, []);
114 
115  return (
116    <TooltipProvider>
117// … truncated