diff --git a/src/app/components/CreditCard/CreditCard.tsx b/src/app/components/CreditCard/CreditCard.tsx new file mode 100644 index 0000000..0c9b7c6 --- /dev/null +++ b/src/app/components/CreditCard/CreditCard.tsx @@ -0,0 +1,29 @@ +import useGetAddress from "@/app/hooks/useGetAddress"; +import Balance from "../Balance/Balance"; +import { HoverBorderGradient } from "../ui/hover-border-gradient"; +import { TextGenerateEffect } from "../ui/text-generate-effect"; +import truncateEthAddress from "truncate-eth-address"; + +export default function CreditCard() { + + const address = useGetAddress(); + + return ( + <> + +
+ <> +
+ +
+ +
+
+
+ {truncateEthAddress(address as string)} +
+
+ + + ); +} \ No newline at end of file diff --git a/src/app/components/addAContact/addAContact.tsx b/src/app/components/addAContact/addAContact.tsx index 2b7c0f8..5c74900 100644 --- a/src/app/components/addAContact/addAContact.tsx +++ b/src/app/components/addAContact/addAContact.tsx @@ -106,7 +106,7 @@ export default function AddAContact({ style={{ width: '100%' }} value={newContactName} placeholder='Name' - className='w-full' + className='w-full text-base' /> {payee == '' && ( @@ -119,7 +119,7 @@ export default function AddAContact({ name='address' value={newContactAddress} placeholder='Address' - className='w-full' + className='w-full text-base' /> diff --git a/src/app/components/ui/background-gradient-animation.tsx b/src/app/components/ui/background-gradient-animation.tsx index dd10a5f..81ecdbf 100644 --- a/src/app/components/ui/background-gradient-animation.tsx +++ b/src/app/components/ui/background-gradient-animation.tsx @@ -6,12 +6,12 @@ import { useInView, motion, useScroll, useTransform } from 'framer-motion'; export const BackgroundGradientAnimation = ({ gradientBackgroundStart = 'rgb(108, 0, 162)', gradientBackgroundEnd = 'rgb(0, 17, 82)', - firstColor = '228, 83, 104', + firstColor = '9, 69, 223', secondColor = '9, 69, 223', - thirdColor = '223, 9, 9', - fourthColor = '200, 50, 50', - fifthColor = '180, 180, 50', - pointerColor = '140, 100, 255', + thirdColor = '9, 69, 223', + fourthColor = '9, 69, 223', + fifthColor = '9, 69, 223', + pointerColor = '9, 69, 223', size = '80%', blendingValue = 'hard-light', children, @@ -43,7 +43,7 @@ export const BackgroundGradientAnimation = ({ let { scrollYProgress } = useScroll(); let y = useTransform(scrollYProgress, [0, 1], ['0', '-50%']); - let opacity = useTransform(scrollYProgress, [0, 0.7], [0.7, 0]); + let opacity = useTransform(scrollYProgress, [0, 0.6], [0.6, 0]); let scale = useTransform(scrollYProgress, [0, 1], ['100%', '20%']); let scale2 = useTransform(scrollYProgress, [0, 1], ['100%', '60%']); @@ -97,7 +97,7 @@ export const BackgroundGradientAnimation = ({ return (
diff --git a/src/app/components/ui/hover-border-gradient.tsx b/src/app/components/ui/hover-border-gradient.tsx new file mode 100644 index 0000000..aab2d9b --- /dev/null +++ b/src/app/components/ui/hover-border-gradient.tsx @@ -0,0 +1,103 @@ +'use client'; +import React, { useState, useEffect, useRef } from 'react'; + +import { motion } from 'framer-motion'; +import { cn } from '@/lib/utils'; +type Direction = 'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'; + +export function HoverBorderGradient({ + children, + containerClassName, + className, + as: Tag = 'button', + duration = 1, + clockwise = true, + ...props +}: React.PropsWithChildren< + { + as?: React.ElementType; + containerClassName?: string; + className?: string; + duration?: number; + clockwise?: boolean; + } & React.HTMLAttributes +>) { + const [hovered, setHovered] = useState(false); + const [direction, setDirection] = useState('TOP'); + + const rotateDirection = (currentDirection: Direction): Direction => { + const directions: Direction[] = ['TOP', 'LEFT', 'BOTTOM', 'RIGHT']; + const currentIndex = directions.indexOf(currentDirection); + const nextIndex = clockwise + ? (currentIndex - 1 + directions.length) % directions.length + : (currentIndex + 1) % directions.length; + return directions[nextIndex]; + }; + + const movingMap: Record = { + TOP: 'radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)', + LEFT: 'radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)', + BOTTOM: + 'radial-gradient(20.7% 50% at 50% 100%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)', + RIGHT: + 'radial-gradient(16.2% 41.199999999999996% at 100% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)', + }; + + const highlight = + 'radial-gradient(75% 181.15942028985506% at 50% 50%, #3275F8 0%, rgba(255, 255, 255, 0) 100%)'; + + useEffect(() => { + if (!hovered) { + const interval = setInterval(() => { + setDirection((prevState) => rotateDirection(prevState)); + }, duration * 1000); + return () => clearInterval(interval); + } + }, [hovered]); + return ( + ) => { + setHovered(!hovered); + }} + /* onMouseEnter={(event: React.MouseEvent) => { + setHovered(true); + }} */ + /* onMouseLeave={() => setHovered(false)} */ + className={cn( + `relative flex h-min w-full flex-col flex-nowrap content-center items-center justify-center gap-10 overflow-visible rounded-xl border bg-black/${ + hovered ? 10 : 0 + } decoration-clone p-px transition duration-500 dark:bg-white/20`, + containerClassName + )} + {...props} + > +
+ {children} +
+ +
+ + ); +} diff --git a/src/app/components/ui/lamp.tsx b/src/app/components/ui/lamp.tsx new file mode 100644 index 0000000..87cc424 --- /dev/null +++ b/src/app/components/ui/lamp.tsx @@ -0,0 +1,92 @@ +'use client'; +import React from 'react'; +import { motion } from 'framer-motion'; +import { cn } from '@/lib/utils'; +export function LampDemo() { + return ( + + + + ); +} + +export const LampContainer = ({ + children, + className, +}: { + children: React.ReactNode; + className?: string; +}) => { + return ( +
+
+ +
+
+ + +
+
+ +
+
+
+ + + +
+
+ +
+ +
+
+ ); +}; diff --git a/src/app/components/ui/text-generate-effect.tsx b/src/app/components/ui/text-generate-effect.tsx index ac3a1ca..4120663 100644 --- a/src/app/components/ui/text-generate-effect.tsx +++ b/src/app/components/ui/text-generate-effect.tsx @@ -31,7 +31,7 @@ export const TextGenerateEffect = ({ return ( {word}{' '} @@ -43,7 +43,7 @@ export const TextGenerateEffect = ({ return (
-
+
{renderWords()}
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index e77c348..fef8418 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -36,6 +36,8 @@ import { motion, useScroll, useTransform } from 'framer-motion'; import useGetTokenBalance from '../hooks/useGetTokenBalance'; import AuthPage from '../components/AuthPage/AuthPage'; import { setContacts } from '@/GlobalRedux/Features/contacts/contactsSlice'; +import CreditCard from '../components/CreditCard/CreditCard'; +import { LampDemo } from '../components/ui/lamp'; export default function Page() { // privy @@ -100,16 +102,7 @@ export default function Page() {
- { - dispatch(setSheet(true)); - }} */ href={{ - pathname: '/menu', - query: { isNavOpen: true }, - }} - > - router.push(`/menu?isNavOpen=true`)} /> - +
@@ -117,10 +110,11 @@ export default function Page() {
- + {/* */} {/* {address} */} +
+ {/*