From 64d864f8313ff090157f83b4b19da99e691ec1fc Mon Sep 17 00:00:00 2001 From: Aliu Salaudeen Date: Thu, 7 Dec 2023 16:53:49 +0100 Subject: [PATCH] using a uniform animation --- src/components/layouts/Iqtoken.tsx | 357 +++++++++--------- src/components/layouts/ecosystem/Iqwiki.tsx | 185 +++++---- .../transitions/InViewAnimateBottom.tsx | 85 ++--- 3 files changed, 309 insertions(+), 318 deletions(-) diff --git a/src/components/layouts/Iqtoken.tsx b/src/components/layouts/Iqtoken.tsx index c5a5bc3..c233162 100644 --- a/src/components/layouts/Iqtoken.tsx +++ b/src/components/layouts/Iqtoken.tsx @@ -1,206 +1,199 @@ -"use client"; +'use client'; -import { useErc20 } from "@/hooks/useEr20"; -import { useLockOverview } from "@/hooks/useLockOverview"; -import { useTheme } from "next-themes"; -import Image from "next/image"; -import React, { useEffect, useRef, useState } from "react"; -import InViewAnimateBottom from "../transitions/InViewAnimateBottom"; -import InViewAnimateSlideDown from "../transitions/InViewSlideDown"; -import InViewAnimateSlideUp from "../transitions/inViewSlideUp"; -import { fetchPriceChange, numFormatter } from "../utils/stats-utils"; +import { useErc20 } from '@/hooks/useEr20'; +import { useLockOverview } from '@/hooks/useLockOverview'; +import { useTheme } from 'next-themes'; +import Image from 'next/image'; +import React, { useEffect, useRef, useState } from 'react'; +import InViewAnimateBottom from '../transitions/InViewAnimateBottom'; +import InViewAnimateSlideDown from '../transitions/InViewSlideDown'; +import InViewAnimateSlideUp from '../transitions/inViewSlideUp'; +import { fetchPriceChange, numFormatter } from '../utils/stats-utils'; +import { motion } from 'framer-motion'; export const StatsPointers = ({ - title, - content, - className, - headerSize, + title, + content, + className, + headerSize, }: { - title: string; - content: string; - className?: string; - headerSize?: string; + title: string; + content: string; + className?: string; + headerSize?: string; }) => { - return ( - -
-
-

- {title} -

- {content} -
-
- - ); + return ( + +
+
+

+ {title} +

+ {content} +
+
+ + ); }; export const TokenBrief = ({ - title, - description, - description2, - buttonText, - action, + title, + description, + description2, + buttonText, + action, }: { - title: string; - description: string; - description2?: string; - buttonText: string; - action: string; + title: string; + description: string; + description2?: string; + buttonText: string; + action: string; }) => { - return ( -
- -

- {title} -

- -
- -

- {description} -

- {description2 && ( -

- {description2} -

- )} - - - - {buttonText} - - -
-
- ); + return ( +
+ +

+ {title} +

+ +
+ +

+ {description} +

+ {description2 && ( +

+ {description2} +

+ )} + + + + {buttonText} + + +
+
+ ); }; const Iqtoken = () => { - const { theme } = useTheme(); - const [appTheme, setAppTheme] = useState(""); - const { tvl } = useErc20(); - const { totalHiiqSupply } = useLockOverview(); - const isFetchedData = useRef(false); - const [marketData, setMarketData] = useState<{ [x: string]: any } | null>( - null - ); + const { theme } = useTheme(); + const [appTheme, setAppTheme] = useState(''); + const { tvl } = useErc20(); + const { totalHiiqSupply } = useLockOverview(); + const isFetchedData = useRef(false); + const [marketData, setMarketData] = useState<{ [x: string]: any } | null>( + null + ); - useEffect(() => { - setAppTheme(theme || ""); - if (!isFetchedData.current) { - isFetchedData.current = true; - const res2 = fetchPriceChange(); + useEffect(() => { + setAppTheme(theme || ''); + if (!isFetchedData.current) { + isFetchedData.current = true; + const res2 = fetchPriceChange(); - Promise.resolve(res2).then((data) => { - setMarketData(data); - }); - } - }, [theme]); - let imageUrl; - if (appTheme === "light") { - imageUrl = "/images/aboutus.png"; - } - if (appTheme === "dark") { - imageUrl = "/images/aboutus-dark.png"; - } + Promise.resolve(res2).then((data) => { + setMarketData(data); + }); + } + }, [theme]); + let imageUrl; + if (appTheme === 'light') { + imageUrl = '/images/aboutus.png'; + } + if (appTheme === 'dark') { + imageUrl = '/images/aboutus-dark.png'; + } - return ( -
-
- -
-
-
- {imageUrl && ( - - )} -
- -
- - -
- -
-
-
-
- -

- HiIQ -

- - -

- HiIQ, launched to incentivize long-term engagement and - governance participation, allows users to lock up IQ tokens, - increasing HiIQ balance for voting power and earning IQ token - rewards, with 3 million tokens generated daily. -

- -
-
-
- - -
-
- - -
-
-
-
-
-
-
- ); + action='https://iq.wiki' + buttonText='Learn more' + /> +
+
+ + {imageUrl && ( + + )} + +
+
+ +

+ HiIQ +

+ + +

+ HiIQ, launched to incentivize long-term engagement and + governance participation, allows users to lock up IQ tokens, + increasing HiIQ balance for voting power and earning IQ token + rewards, with 3 million tokens generated daily. +

+ +
+
+
+ + +
+
+ + +
+
+
+
+
+ + + ); }; export default Iqtoken; diff --git a/src/components/layouts/ecosystem/Iqwiki.tsx b/src/components/layouts/ecosystem/Iqwiki.tsx index 830f684..beb1594 100644 --- a/src/components/layouts/ecosystem/Iqwiki.tsx +++ b/src/components/layouts/ecosystem/Iqwiki.tsx @@ -1,102 +1,99 @@ -"use client"; +'use client'; -import InViewAnimateBottom from "@/components/transitions/InViewAnimateBottom"; -import InViewAnimateSlideUp from "@/components/transitions/inViewSlideUp"; -import { useTheme } from "next-themes"; -import Image from "next/image"; -import React, { useEffect, useState } from "react"; -import { TokenBrief } from "../Iqtoken"; +import InViewAnimateBottom from '@/components/transitions/InViewAnimateBottom'; +import InViewAnimateSlideUp from '@/components/transitions/inViewSlideUp'; +import { useTheme } from 'next-themes'; +import Image from 'next/image'; +import React, { useEffect, useState } from 'react'; +import { TokenBrief } from '../Iqtoken'; const Iqwiki = () => { - const { theme } = useTheme(); - const [appTheme, setAppTheme] = useState(""); + const { theme } = useTheme(); + const [appTheme, setAppTheme] = useState(''); - useEffect(() => { - setAppTheme(theme || ""); - }, [theme]); - let imageUrl, imageUrl2, imageUrl3; - if (appTheme === "light") { - imageUrl = "/images/iqwiki-widget-new.png"; - imageUrl2 = "/images/wiki-rank.png"; - imageUrl3 = "/images/wiki-homepage.png"; - } - if (appTheme === "dark") { - imageUrl = "/images/iqwiki-widget-new-dark.png"; - imageUrl2 = "/images/wiki-rank-dark.png"; - imageUrl3 = "/images/wiki-homepage-dark.png"; - } + useEffect(() => { + setAppTheme(theme || ''); + }, [theme]); + let imageUrl, imageUrl2, imageUrl3; + if (appTheme === 'light') { + imageUrl = '/images/iqwiki-widget-new.png'; + imageUrl2 = '/images/wiki-rank.png'; + imageUrl3 = '/images/wiki-homepage.png'; + } + if (appTheme === 'dark') { + imageUrl = '/images/iqwiki-widget-new-dark.png'; + imageUrl2 = '/images/wiki-rank-dark.png'; + imageUrl3 = '/images/wiki-homepage-dark.png'; + } - return ( -
- -
-
-

- Explore a diverse range of wikis designed to guide you through the - realms of{" "} - - cryptocurrency and blockchain. - -

-
-
-
- {imageUrl3 && ( - - )} - -
- -
-
-
- -
-
- {imageUrl && ( - - )} -
-
-
- {imageUrl2 && ( - - )} -
-
- - Integrations: - -
-
-
-
-
-
-
- -
- ); + return ( +
+ +
+
+

+ Explore a diverse range of wikis designed to guide you through the + realms of{' '} + + cryptocurrency and blockchain. + +

+
+
+
+ {imageUrl3 && ( + + )} +
+
+
+ +
+
+ {imageUrl && ( + + )} +
+
+
+ {imageUrl2 && ( + + )} +
+
+ + Integrations: + +
+
+
+
+
+
+
+ +
+ ); }; export default Iqwiki; diff --git a/src/components/transitions/InViewAnimateBottom.tsx b/src/components/transitions/InViewAnimateBottom.tsx index c975b32..469860e 100644 --- a/src/components/transitions/InViewAnimateBottom.tsx +++ b/src/components/transitions/InViewAnimateBottom.tsx @@ -1,53 +1,54 @@ -"use client"; +'use client'; -import { useAnimation, motion } from "framer-motion"; -import React, { useEffect, useState } from "react"; -import { useInView } from "react-intersection-observer"; +import { useAnimation, motion } from 'framer-motion'; +import React, { useEffect, useState } from 'react'; +import { useInView } from 'react-intersection-observer'; export type TInViewAnimate = { - children: React.ReactNode; - className?: string; - delay?: number; + children: React.ReactNode; + className?: string; + delay?: number; }; const InViewAnimateBottom: React.FC = ({ - children, - className, - delay, + children, + className, + delay, }) => { - const { ref, inView } = useInView(); - const animation = useAnimation(); - const [hasAnimated, setHasAnimated] = useState(false); + const { ref, inView } = useInView(); + const animation = useAnimation(); + const [hasAnimated, setHasAnimated] = useState(false); - useEffect(() => { - if (inView && !hasAnimated) { - setHasAnimated(true); - animation.start({ - // y: 0, - opacity: 1, - transition: { - type: "tween", - duration: 1.5, - }, - }); - } - if (!inView && !hasAnimated) { - animation.start({ - // y: '100px', - opacity: 0, - }); - } - }, [animation, delay, inView, hasAnimated]); + useEffect(() => { + if (inView && !hasAnimated) { + setHasAnimated(true); + animation.start({ + // y: 0, + opacity: 1, + transition: { + type: 'tween', + duration: 1.5, + }, + }); + } + if (!inView && !hasAnimated) { + animation.start({ + // y: '100px', + opacity: 0, + }); + } + }, [animation, delay, inView, hasAnimated]); - return ( - - {children} - - ); + return ( + + {children} + + ); }; export default InViewAnimateBottom;