diff --git a/src/components/Icon/ArrowForward.tsx b/src/components/Icon/ArrowForward.tsx index 5495ba8..a4a5be2 100644 --- a/src/components/Icon/ArrowForward.tsx +++ b/src/components/Icon/ArrowForward.tsx @@ -5,12 +5,12 @@ export const ArrowForward: React.FC> = ({ }) => { return ( + xmlns="http://www.w3.org/2000/svg" + {...props}> > = ({ return ( @@ -39,7 +39,7 @@ export const CollectionsLeft: React.FC> = ({ stroke="#297AFF" /> @@ -56,26 +56,13 @@ export const CollectionsLeft: React.FC> = ({ fill="#403BEB" /> - - - - - - - @@ -104,99 +91,169 @@ export const CollectionsLeft: React.FC> = ({ fill="#14171C" /> + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + - - - - - - + > = ({ stroke="#297AFF" /> @@ -56,29 +56,16 @@ export const CollectionsRight: React.FC> = ({ fill="#403BEB" /> - - - - - - - - + > = ({ fill="#14171C" /> + - + - - + + + + + + + + + + + + + + + - - - - - - + > = ({ + width="91" + x="576" + y="578"> > = ({ height="91" id="filter3_d_1351_2576" width="91" - x="576" - y="578"> + x="662" + y="392"> > = ({ return ( diff --git a/src/components/Icon/Votes.tsx b/src/components/Icon/Votes.tsx index 08916df..a193670 100644 --- a/src/components/Icon/Votes.tsx +++ b/src/components/Icon/Votes.tsx @@ -4,475 +4,446 @@ export const Votes: React.FC> = ({ ...props }) => { return ( + + - - - - - + fillOpacity="0.8" + height="43" + rx="12" + width="801" + x="-15" + y="48" + /> + + + + + + + + + + + + + + - - - - - + fillOpacity="0.8" + height="43" + rx="12" + width="801" + x="-15" + y="150" + /> + + + + - - - - - + fillOpacity="0.8" + height="43" + rx="12" + width="801" + x="-15" + y="201" + /> + + + + + + - - - - - - - - - - - - - + - + + + + + + + - - - - - + fillOpacity="0.8" + height="43" + rx="12" + width="801" + x="-15" + y="303" + /> + + + + + + - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + ) } diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index d56d259..f85d9af 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -4,15 +4,19 @@ import { ConnectWalletButton } from '@/components/ConnectWalletButton' import { useSession } from '@/context/session' import cn from 'classnames' import { useState } from 'react' +import { formatMilliseconds } from '@/utils/helpers' +import useCountdown from '@/hooks/useCountDown' +import { PAIRWISE_RELEASE_DATE } from '@/utils/contants' export function Header() { const { user } = useSession() + const [count] = useCountdown(PAIRWISE_RELEASE_DATE.valueOf() - Date.now()) const [showButton, setShowButton] = useState(false) return (
setShowButton(false)}>
@@ -20,13 +24,21 @@ export function Header() {
-
setShowButton(true)}> - -
+ {count > 0 ? ( + + ) : ( +
setShowButton(true)}> + +
+ )} + {user && showButton && (
+ 'absolute right-0 top-12 whitespace-nowrap rounded-2xl bg-white px-10 py-6 text-black' + )}> My account diff --git a/src/hooks/useCountDown.tsx b/src/hooks/useCountDown.tsx new file mode 100644 index 0000000..29dc592 --- /dev/null +++ b/src/hooks/useCountDown.tsx @@ -0,0 +1,31 @@ +import { useState, useEffect } from 'react' + +const useCountdown = ( + initialCount: number, + interval: number = 1000 +): [number, () => void] => { + const [count, setCount] = useState(initialCount) + + useEffect(() => { + const countdownInterval = setInterval(() => { + setCount((prevCount) => prevCount - 1) + }, interval) + + // Clear the interval when the component is unmounted or when the countdown reaches 0 + if (count <= 0) { + clearInterval(countdownInterval) + } + + return () => clearInterval(countdownInterval) + }, [count, interval]) + + // Reset the countdown to the initial value + const reset = () => { + setCount(initialCount) + } + + // Return the current count and the reset function + return [count, reset] +} + +export default useCountdown diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8d4c6c6..731a22a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,6 @@ import { ConnectWalletButton } from '@/components/ConnectWalletButton' import { ArrowDown } from '@/components/Icon/ArrowDown' +import { ArrowForward } from '@/components/Icon/ArrowForward' import { CollectionsLeft } from '@/components/Icon/CollectionsLeft' import { CollectionsRight } from '@/components/Icon/CollectionsRight' import { ColoredGrid } from '@/components/Icon/ColoredGrid' @@ -15,9 +16,14 @@ import { VectorHorizontal2 } from '@/components/Icon/VectorHorizontal2' import { VectorHorizontal3 } from '@/components/Icon/VectorHorizontal3' import { VectorHorizontal4 } from '@/components/Icon/VectorHorizontal4' import { Votes } from '@/components/Icon/Votes' +import useCountdown from '@/hooks/useCountDown' +import { PAIRWISE_RELEASE_DATE } from '@/utils/contants' +import { formatMilliseconds } from '@/utils/helpers' import Image from 'next/image' +import Link from 'next/link' export default function Home() { + const [count] = useCountdown(PAIRWISE_RELEASE_DATE.valueOf() - Date.now()) return (
@@ -30,21 +36,25 @@ export default function Home() { /> Galaxy - -
-

+ +
+

Retroactive Public Goods Funding

-

Impact = Profit

- +

+ Impact Profit +

+

Starting on Nov 6

+ + + {' '}
Galaxy

-
+

Check and Modify Your Votes

Review and refine your votes at any time. Your opinions matter, and we want to make sure your choices reflect your passion for the projects that resonate with you.

- +
@@ -145,13 +155,17 @@ export default function Home() {

Ready to Shape the Galaxy?

-

- Kickstart Your Journey: Connect Your Wallet Now -

- + {count > 0 ? ( + + ) : ( + + )} + ({RPGF3_Application_UID: item.id, OPAmount: totalOp * item.share})).filter((el) => el.OPAmount > 0) + listContent: flattenRanking(ranking) + .map((item) => ({ + RPGF3_Application_UID: item.id, + OPAmount: totalOp * item.share, + })) + .filter((el) => el.OPAmount > 0), } - const listName = "List created by Pairwise" + const listName = 'List created by Pairwise' const listMetadataPtrType = 1 - console.log("list:", obj.listContent) + console.log('list:', obj.listContent) return { listName, listMetadataPtrType, - listMetadataPtr: "https://ipfs.io/ipfs/QmXoypizjW3WknFiJnKLwHCnL72vedxjQkDDP1mXWo6uco/wiki/" + listMetadataPtr: + 'https://ipfs.io/ipfs/QmXoypizjW3WknFiJnKLwHCnL72vedxjQkDDP1mXWo6uco/wiki/', } } + +export function formatMilliseconds(milliseconds: number): string { + const seconds: number = Math.floor(milliseconds / 1000) + const minutes: number = Math.floor(seconds / 60) + const hours: number = Math.floor(minutes / 60) + const days: number = Math.floor(hours / 24) + + const remainingHours: number = hours % 24 + const remainingMinutes: number = minutes % 60 + + return `${ + days ? `${days} days, ` : '' + }${remainingHours} hours and ${remainingMinutes} minutes` +}