From b13a437c7c3e2e42d19b77252ec53108957e4b4f Mon Sep 17 00:00:00 2001 From: leo Date: Wed, 11 Dec 2024 20:15:25 +0800 Subject: [PATCH 1/3] update for aggparade parade end --- public/img/arrow-check-announcement.svg | 6 + src/App.tsx | 57 +--- src/components/Header.tsx | 64 +--- src/components/ReferralModal.tsx | 8 - src/constants/epoch.ts | 12 +- src/pages/AggregationParade/index.tsx | 11 +- src/pages/DashboardS2/index-end.tsx | 364 +++++++++++++++++++++ src/pages/DashboardS2/index.tsx | 416 ------------------------ src/pages/Home/index-end.tsx | 376 +++++++++++++++++++++ src/pages/{Home.tsx => Home/index.tsx} | 0 10 files changed, 776 insertions(+), 538 deletions(-) create mode 100644 public/img/arrow-check-announcement.svg create mode 100644 src/pages/DashboardS2/index-end.tsx delete mode 100644 src/pages/DashboardS2/index.tsx create mode 100644 src/pages/Home/index-end.tsx rename src/pages/{Home.tsx => Home/index.tsx} (100%) diff --git a/public/img/arrow-check-announcement.svg b/public/img/arrow-check-announcement.svg new file mode 100644 index 00000000..a923b1c3 --- /dev/null +++ b/public/img/arrow-check-announcement.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/App.tsx b/src/App.tsx index c06cab5c..0d2119bc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,12 @@ import { Suspense } from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Header from "./components/Header"; - -import Home from "./pages/Home"; +import Home from "./pages/Home/index-end"; import Toast from "./components/Toast"; import Countdown from "@/components/Countdown"; import styled from "styled-components"; import AggregationParade from "./pages/AggregationParade"; -import Bridge from "@/pages/Bridge"; -import Dashboard from "./pages/Dashboard"; -import Leaderboard from "./pages/Leaderboard"; -import About from "./pages/About/index2"; import UnwrapETH from "@/pages/UnwrapETH"; -import DashboardS2 from "./pages/DashboardS2/index2"; - -// const AggregationParade = lazy(() => import("@/pages/AggregationParade")); -// const Dashboard = lazy(() => import("@/pages/AggregationParade/Dashboard")); -// const Leaderboard = lazy(() => import("@/pages/Leaderboard")); -// const About = lazy(() => import("@/pages/About")); -// const Bridge = lazy(() => import('@/pages/Bridge')) const HideBox = styled.div` position: absolute; @@ -33,7 +21,6 @@ export default function App() {
- {/* } /> */} } /> - - - - } - /> - - - - - } - /> - - - - - } - /> - - - - } - /> - - - - } - /> */} - + Aggregation Parade @@ -484,16 +487,7 @@ export default function Header() { NovaDrop🔥 - - - Leaderboard - - - - - Bridge - - + - - - About - - @@ -537,14 +526,7 @@ export default function Header() { Unwrap ETH - - - User Guide - - + Explorer @@ -756,7 +738,10 @@ export default function Header() { - + Aggregation Parade @@ -779,11 +764,6 @@ export default function Header() { )} */} - - - Leaderboard - - - - - About - - - - - - Bridge - - - @@ -847,17 +815,7 @@ export default function Header() { - - - - User Guide - - - + { return ( <> - - - Your Invite Code: {invite?.code} - store.airdrop ); + const navigate = useNavigate(); // const [isLoading,setIsLoading] = useState(false) useEffect(() => { - console.log("isActiveUserisActiveUserisActiveUser", isActiveUser); + console.log("isActive", isActiveUser); + if (!isActiveUser) { + navigate("/"); + } }, [isActiveUser]); - return <>{isActiveUser ? : }; + return ; } diff --git a/src/pages/DashboardS2/index-end.tsx b/src/pages/DashboardS2/index-end.tsx new file mode 100644 index 00000000..287874f5 --- /dev/null +++ b/src/pages/DashboardS2/index-end.tsx @@ -0,0 +1,364 @@ +import { useEffect, useMemo, useState } from "react"; +import styled from "styled-components"; +import { + CategoryZKLItem, + NovaCategoryPoints, + NovaCategoryUserPointsTotal, + getCategoryZKL, + getNovaCategoryPoints, + getNovaCategoryUserPointsTotal, + getTvlCategoryMilestoneBySeason, +} from "@/api"; +import { useAccount } from "wagmi"; +import Portfolio from "@/components/DashboardS2/Tabs/Protfolio"; +import { epochList } from "@/constants/epoch"; +import MysteryBoxIII from "@/components/Dashboard/MysteryBoxIII"; + +export type TotalTvlItem = { + symbol: string; + tokenAddress: string; + amount: string; + tvl: string; + type: string; + yieldType: string; + iconURL: string | null; +}; + +export type AccountTvlItem = { + tvl: string; + amount: string; + tokenAddress: string; + symbol: string; + iconURL: string | null; +}; + +const Container = styled.div` + position: relative; + padding-top: 92px; + min-height: 100vh; + /* background-color: #000811; */ + background: url("/img/bg-s2-dashboard.jpg") no-repeat; + background-size: 100%; + background-position: center top; + + @media only screen and (max-width: 768px) { + max-width: 100%; + padding-left: 16px; + padding-right: 16px; + } +`; + +const TabsCard = styled.div` + .tab-item { + /* margin-bottom: -24px; */ + padding: 12px 14px 24px; + color: rgba(251, 251, 251, 0.6); + text-align: center; + font-family: Satoshi; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; + border-radius: 8px 8px 0 0; + border: 1px solid #635f5f; + border-bottom: none; + opacity: 0.6; + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(45, 45, 45, 0.1) 40.05%, + rgba(19, 19, 19, 0.1) 100% + ); + /* cursor: pointer; */ + + &.active { + position: relative; + color: #fff; + opacity: 1; + /* background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(145, 145, 145, 0.1) 40.05%, + rgba(19, 19, 19, 0.1) 100% + ); */ + border: 2px solid transparent; + border-bottom: 0; + background-clip: padding-box, border-box; + background-origin: padding-box, border-box; + background-image: linear-gradient(to right, #282828, #282828), + linear-gradient( + 100deg, + #fb2450 1%, + #fbc82e, + #6eee3f, + #5889f3, + #5095f1, + #b10af4 + ); + + &::after { + content: ""; + display: block; + position: absolute; + bottom: -2px; + left: 0px; + right: 0px; + /* width: 100%; */ + background: #282828; + height: 4px; + z-index: 3; + } + } + } + + .tab-container { + position: relative; + margin-top: -2px; + min-height: 965.435px; + border-radius: 24px; + border: 2px solid transparent; + background-clip: padding-box, border-box; + background-origin: padding-box, border-box; + background-image: linear-gradient(to bottom, #282828 5%, #000000), + linear-gradient( + 100deg, + #fb2450 1%, + #fbc82e, + #6eee3f, + #5889f3, + #5095f1, + #b10af4 + ); + overflow: hidden; + + &::before { + content: ""; + display: block; + height: 1800px; + width: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + background-image: url("/img/bg-s2-sectors.png"); + background-size: 100% 100%; + max-height: 1800px; + z-index: 0; + } + + .tab-content { + position: relative; + z-index: 2; + } + } +`; + +export interface NovaPointsListItem { + name: string; + category: string; + userTotalPoints: number; + userEcoPoints: number; + userReferralPoints: number; + userOtherPoints: number; + sectorTotalPoints: number; + sectorEcoPoints: number; + sectorReferralPoints: number; + sectorOtherPoints: number; + zkl: number; +} + +export default function Dashboard() { + const { address } = useAccount(); + const [tabs2Active, setTabs2Active] = useState(99); + + const [novaCategoryPoints, setNovaCategoryPoints] = useState< + NovaCategoryPoints[] + >([]); + + const getNovaCategoryPointsFunc = async () => { + setNovaCategoryPoints([]); + + const res = await getNovaCategoryPoints({ + season, + }); + console.log("getNovaCategoryPoints", res); + setNovaCategoryPoints(res?.data || []); + }; + + const [epochActive, setEpochActive] = useState(2); + + const season = useMemo(() => { + if (tabs2Active === 99) { + return epochList[epochActive].season; + } else { + return epochList[epochList.length - 1].season; + } + }, [tabs2Active, epochActive]); + + const [novaCategoryUserPointsTotal, setNovaCategoryUserPointsTotal] = + useState([]); + + const getNovaCategoryUserPointsTotalFunc = async () => { + setNovaCategoryUserPointsTotal([]); + if (!address) return; + + const { data } = await getNovaCategoryUserPointsTotal({ + address, + season, + }); + setNovaCategoryUserPointsTotal(data || []); + }; + + const [categoryZKLs, setCategoryZKLs] = useState([]); + + const getCategoryZKLFunc = async () => { + console.log("epoch", epochActive); + const { data } = + epochActive === 1 + ? await getTvlCategoryMilestoneBySeason({ season: 2 }) + : await getCategoryZKL(); + setCategoryZKLs(data || []); + }; + + const novaPointsList = useMemo(() => { + const categorys = [ + { + name: "Assets Points", + category: "holding", + }, + { + name: "Native Boost Points", + category: "nativeboost", + }, + { + name: "Spot DEX Points", + category: "spotdex", + }, + { + name: "Perp DEX Points", + category: "perpdex", + }, + { + name: "Lending Points", + category: "lending", + }, + { + name: "Others Points", + category: "other", + }, + ]; + + const arr = categorys.map((c) => { + const userCategoryData = novaCategoryUserPointsTotal.find( + (item) => item.category === c.category + ); + const gamefiData = novaCategoryUserPointsTotal.find( + (item) => item.category === "gamefi" + ); + const userEcoPoints = + epochActive === epochList.length - 1 && c.category === "other" + ? (Number(gamefiData?.ecoPoints) || 0) + + (Number(userCategoryData?.ecoPoints) || 0) + : Number(userCategoryData?.ecoPoints) || 0; + const userReferralPoints = + epochActive === epochList.length - 1 && c.category === "other" + ? (Number(gamefiData?.referralPoints) || 0) + + (Number(userCategoryData?.referralPoints) || 0) + : Number(userCategoryData?.referralPoints) || 0; + const userOtherPoints = Number(userCategoryData?.otherPoints) || 0; + const userTotalPoints = + userEcoPoints + userReferralPoints + userOtherPoints; + + const sectorCategoryData = novaCategoryPoints.find( + (item) => item.category === c.category + ); + const sectorEcoPoints = Number(sectorCategoryData?.ecoPoints) || 0; + const sectorReferralPoints = + Number(sectorCategoryData?.referralPoints) || 0; + const sectorOtherPoints = Number(sectorCategoryData?.otherPoints) || 0; + + const sectorTotalPoints = + sectorEcoPoints + sectorReferralPoints + sectorOtherPoints; + + const categoryZKLData = categoryZKLs.find( + (item) => item.name === c.category + ); + + const obj: NovaPointsListItem = { + name: c.name, + category: c.category, + userTotalPoints, + userEcoPoints, + userReferralPoints, + userOtherPoints, + sectorTotalPoints, + sectorEcoPoints, + sectorReferralPoints, + sectorOtherPoints, + zkl: categoryZKLData?.zkl || 0, + }; + + return obj; + }); + return arr; + }, [ + novaCategoryUserPointsTotal, + novaCategoryPoints, + categoryZKLs, + epochActive, + ]); + + useEffect(() => { + getNovaCategoryPointsFunc(); + getNovaCategoryUserPointsTotalFunc(); + }, [address, season]); + + useEffect(() => { + getCategoryZKLFunc(); + }, [address, epochActive]); + + return ( + +
+ +
+ +
+
+ +
+
+
+ + Portfolio +
+
+
+ +
+
+ +
+
+ +
+
+ + ); +} diff --git a/src/pages/DashboardS2/index.tsx b/src/pages/DashboardS2/index.tsx deleted file mode 100644 index 2ed0b046..00000000 --- a/src/pages/DashboardS2/index.tsx +++ /dev/null @@ -1,416 +0,0 @@ -import styled from "styled-components"; -import { Link } from "react-router-dom"; -import SideReferral from "@/components/DashboardS2/Side/SideReferral"; -import SideNovaPoints from "@/components/DashboardS2/Side/SideNovaPoints"; -import SideProjectPoints from "@/components/DashboardS2/Side/SideProjectPoints"; -import SideNovaNFT from "@/components/DashboardS2/Side/SideNovaNFT"; -import UserInfo from "@/components/DashboardS2/Side/UserInfo"; -import SocialMedia from "@/components/DashboardS2/Side/SocialMedia"; -import Banner from "@/components/DashboardS2/Banner"; -import EcoDApps from "@/components/DashboardS2/EcoDApps"; -import { useEffect, useMemo, useState } from "react"; -import { useAccount } from "wagmi"; -import { - NovaCategoryUserPoints, - SupportToken, - TvlCategory, - getAccountTvl, - getExplorerTokenTvl, - getNovaCategoryUserPoints, - getSupportTokens, - getTokenPrice, - getTotalTvlByToken, - getTvlCategory, -} from "@/api"; -import AssetsTable from "@/components/DashboardS2/AssetsTable"; -import TvlCard, { TvlItem } from "@/components/DashboardS2/TvlCard"; -import { formatNumberWithUnit } from "@/utils"; -import numeral from "numeral"; - -const Side = styled.div` - position: relative; - padding: 24px; - padding-bottom: 160px; - min-width: 440px; - min-height: 1200px; - background: #011a24; - - &.collapsed { - width: 80px; - min-width: 80px; - - .title, - .side-content { - display: none; - } - } - - .title { - color: #fff; - font-family: "Chakra Petch"; - font-size: 32px; - font-style: normal; - font-weight: 700; - line-height: 32px; /* 100% */ - letter-spacing: -0.5px; - } -`; - -const Content = styled.div` - margin-left: 10px; - padding: 40px 75px; - width: calc(100% - 440px); - &.collapsed { - width: calc(100% - 80px); - } - /* height: 1494px; */ - /* background: #011a24; */ -`; - -const Title = styled.div` - .main-title { - color: #fff; - font-family: "Chakra Petch"; - font-size: 40px; - font-style: normal; - font-weight: 700; - line-height: 40px; /* 100% */ - letter-spacing: -0.5px; - } - - .allocated { - font-family: "Chakra Petch"; - font-size: 36px; - font-style: normal; - font-weight: 400; - line-height: 36px; /* 100% */ - letter-spacing: -0.5px; - background: linear-gradient(90deg, #6276e7 0%, #e884fe 100%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - - .tag { - padding: 8px 16px; - border-radius: 8px; - background: #043f38; - color: #fff; - text-align: center; - font-family: "Chakra Petch"; - font-size: 16px; - font-style: normal; - font-weight: 700; - line-height: 16px; /* 100% */ - letter-spacing: -0.5px; - } - - .date { - color: #999; - font-family: "Chakra Petch"; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 14px; /* 100% */ - letter-spacing: -0.5px; - } - - .desc { - color: #999; - font-family: "Chakra Petch"; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 20px; /* 100% */ - letter-spacing: -0.5px; - } -`; - -export type TotalTvlItem = { - symbol: string; - tokenAddress: string; - amount: string; - tvl: string; - type: string; - yieldType: string; - iconURL: string | null; -}; - -export type AccountTvlItem = { - tvl: string; - amount: string; - tokenAddress: string; - symbol: string; - iconURL: string | null; -}; - -export default function DashboardS2() { - const [tabActive, setTabActive] = useState(undefined); - - const { address } = useAccount(); - - const [isCollapsed, setIsCollapsed] = useState(false); - - const [ethUsdPrice, setEthUsdPrice] = useState(0); - const [supportTokens, setSupportTokens] = useState([]); - const [totalTvlList, setTotalTvlList] = useState([]); - const [accountTvlData, setAccountTvlData] = useState([]); - - const getAccountTvlFunc = async () => { - let usdPrice = 0; - const tokenList = await getExplorerTokenTvl(true); - const ethToken = tokenList.find((item) => item.symbol === "ETH"); - if (ethToken) { - const res = await getTokenPrice(ethToken.l2Address); - usdPrice = +res.usdPrice || 0; - setEthUsdPrice(usdPrice); - } - - if (!address) return; - - const res = await getAccountTvl(address); - const { result } = res; - let data = []; - if (result && Array.isArray(result) && result.length > 0) { - data = result; - } - setAccountTvlData(data); - - let usd = 0; - let eth = 0; - data.forEach((item) => { - usd += +item?.tvl; - eth += +item?.tvl; - }); - // setStakingEthValue(eth); - // setStakingUsdValue(usd * usdPrice); - }; - - const getSupportTokensFunc = async () => { - const res = await getSupportTokens(); - if (res && Array.isArray(res)) { - setSupportTokens(res); - } - }; - - const getTotalTvlByTokenFunc = async () => { - const res = await getTotalTvlByToken(); - const { result } = res; - let arr = []; - if (result && Array.isArray(result) && result.length > 0) { - arr = result; - } - setTotalTvlList(arr); - }; - - const [novaCategoryPoints, setNovaCategoryPoints] = useState< - NovaCategoryUserPoints[] - >([]); - - const getNovaCategoryPointsFunc = async () => { - if (!address) return; - const res = await getNovaCategoryUserPoints(address); - console.log("getNovaCategoryUserPoints", res); - setNovaCategoryPoints(res?.data || []); - }; - - const getTvlCategoryByName = (name: string) => { - const category = tvlCategory.find((item) => item.name === name); - return category; - }; - - const [tvlCategory, setTvlCategory] = useState([]); - const tvlList = useMemo(() => { - const spotdex = getTvlCategoryByName("spotdex"); - const perpdex = getTvlCategoryByName("perpdex"); - const lending = getTvlCategoryByName("lending"); - const gamefi = getTvlCategoryByName("gamefi"); - const other = getTvlCategoryByName("other"); - - console.log("spotdex", spotdex, numeral(spotdex?.tvl || 0).format("0,0.00a")); - console.log("perpdex", perpdex, formatNumberWithUnit(perpdex?.tvl || 0)); - - const arr: TvlItem[] = [ - { - title: "3,500,000 $ZKL", - name: "HOLDING", - category: "holding", - currentTvl: formatNumberWithUnit(0), - targetTvl: "5m", - nextMilestone: "3,500,000 $ZKL", - progress: "100%", - }, - { - title: "500,000 $ZKL", - name: "SPOT DEX", - category: "spotdex", - currentTvl: formatNumberWithUnit(spotdex?.tvl || 0), - - targetTvl: "5m", - nextMilestone: "3,500,000 $ZKL", - progress: "20%", - }, - { - title: "500,000 $ZKL", - name: "PERP DEX", - category: "perpdex", - currentTvl: formatNumberWithUnit(perpdex?.tvl || 0), - targetTvl: "5m", - nextMilestone: "3,500,000 $ZKL", - progress: "20%", - }, - { - title: "100,000 $ZKL", - name: "LENDING", - category: "lending", - currentTvl: formatNumberWithUnit(lending?.tvl || 0), - targetTvl: "5m", - nextMilestone: "3,500,000 $ZKL", - progress: "20%", - }, - { - title: "100,000 $ZKL", - name: "GAMEFI", - category: "gamefi", - currentTvl: formatNumberWithUnit(gamefi?.tvl || 0), - targetTvl: "5m", - nextMilestone: "3,500,000 $ZKL", - progress: "20%", - }, - { - title: "100,000 $ZKL", - name: "OTHER", - category: "other", - currentTvl: formatNumberWithUnit(other?.tvl || 0), - targetTvl: "5m", - nextMilestone: "3,500,000 $ZKL", - progress: "20%", - }, - ]; - - return arr; - }, [tvlCategory]); - - const getTvlCategoryFunc = async () => { - const res = await getTvlCategory(); - console.log("getTvlCategory", res); - setTvlCategory(res?.data || []); - }; - - useEffect(() => { - getAccountTvlFunc(); - getSupportTokensFunc(); - getTotalTvlByTokenFunc(); - getNovaCategoryPointsFunc(); - getTvlCategoryFunc(); - }, [address]); - - return ( -
- - -
- -
- Portfolio - {isCollapsed ? ( - setIsCollapsed(false)} - /> - ) : ( - setIsCollapsed(true)} - /> - )} - {/* - */} -
-
- - - - - -
- -
- -
- - {isCollapsed ? ( - - ) : ( - "zkLink Nova Disclaimer" - )} - -
-
- - - - - <div className="flex justify-between"> - <span className="main-title">Aggregation Parade Season II</span> - <span className="allocated">Allocated: 30,000,000 $ZKL</span> - </div> - <div className="mt-[16px] flex items-center gap-[16px]"> - <span className="tag">Epoch One - 10,000,000 $ZKL Allocated</span> - <span className="date">From 06/15/2024 - 07/15/2024</span> - </div> - <div className="mt-[16px] desc"> - The Aggregation Parade has allocated 30,000,000 $ZKL for Season 2, - which will last at least three months. Each month, up to - 10,000,000 $ZKL will be distributed to participants. $ZKL will be - divided among various sectors, each starting with a minimum - allocation and its own set of milestones. Sectors can unlock - additional $ZKL by reaching their goals, and participants in each - sector will share the sector's $ZKL based on their Nova points - ratio. - </div> - - -
- {tvlList.map((tvlItem, index) => ( - - ))} -
- - {tabActive === "holding" ? ( - - ) : ( - - )} - -
-
- ); -} diff --git a/src/pages/Home/index-end.tsx b/src/pages/Home/index-end.tsx new file mode 100644 index 00000000..1bd36609 --- /dev/null +++ b/src/pages/Home/index-end.tsx @@ -0,0 +1,376 @@ +import { useEffect, useMemo, useState } from "react"; +import OTPInput from "react-otp-input"; +import styled from "styled-components"; +import { useDispatch, useSelector } from "react-redux"; +import { setInviteCode } from "@/store/modules/airdrop"; +import "@/styles/otp-input.css"; +import { RootState } from "@/store"; +import { Button } from "@nextui-org/react"; +import { useNavigate } from "react-router-dom"; +import Loading from "@/components/Loading"; +import { GradientBox } from "@/styles/common"; +import NovaNetworkTVL from "@/components/NovaNetworkTVL"; +import { useConnectModal } from "@rainbow-me/rainbowkit"; + +const BgBox = styled.div` + width: 100%; + /* min-height: 100vh; */ + min-height: 1384px; + /* background-image: image-set( + "/img/bg-home@0.5x.png" 0.5x, + "/img/bg-home@1x.png" 1x, + "/img/bg-home@2x.png" 2x + ); */ + background-image: url("/img/s2/bg-s2-home.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: 50%; +`; + +const CardBox = styled.div` + filter: blur(0.125px); + border: 4px solid transparent; + background-clip: padding-box, border-box; + background-origin: padding-box, border-box; + background-image: linear-gradient(to bottom, #282828, #000000), + linear-gradient( + 175deg, + #fb2450, + #fbc82e, + #6eee3f, + #5889f3, + #5095f1, + #b10af4 80% + ); +`; +const TitleBox = styled.div` + .flexBox { + justify-content: center; + } + .title { + color: #fff; + font-family: Satoshi; + font-style: normal; + font-weight: 900; + letter-spacing: -0.168px; + } + .sub-title { + color: #fff; + font-family: Satoshi; + font-style: normal; + } + @keyframes width { + 0% { + width: 118px; + } + 9% { + width: 118px; + } + 10% { + width: 296px; + } + 34% { + width: 296px; + } + 35% { + width: 132px; + } + 59% { + width: 132px; + } + 60% { + width: 136px; + } + 84% { + width: 136px; + } + 85% { + width: 412px; + } + 100% { + width: 412px; + } + } + .box { + position: relative; + /* width: 420px; */ + height: 60px; + overflow: hidden; + box-sizing: content-box; + + @keyframes move { + 0% { + top: 0; + } + 10% { + top: 0; + } + 20% { + top: -60px; + } + 33% { + top: -60px; + } + 43% { + top: -120px; + } + 56% { + top: -120px; + } + 66% { + top: -180px; + } + 79% { + top: -180px; + } + 89% { + top: -240px; + } + 95% { + top: -240px; + } + 100% { + top: 0px; + } + } + .move { + position: absolute; + animation-name: move; + animation-duration: 10s; + animation-timing-function: ease; + animation-iteration-count: infinite; + top: 0; + } + + @keyframes width1 { + 0% { + width: 86px; + } + 9% { + width: 86px; + } + 10% { + width: 264px; + } + 34% { + width: 264px; + } + 35% { + width: 100px; + } + 59% { + width: 100px; + } + 60% { + width: 104px; + } + 84% { + width: 104px; + } + 85% { + width: 380px; + } + 100% { + width: 380px; + } + } + .inner { + /* width: 420px; */ + text-align: center; + font-family: Satoshi; + font-size: 36.249px; + font-style: normal; + font-weight: 900; + line-height: 60px; + background: linear-gradient(180deg, #fff 0%, #bababa 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + @media (max-width: 768px) { + .box { + margin-left: 0; + .move { + left: 50%; + transform: translateX(-50%); + } + .inner { + width: 100%; + font-size: 30px; + text-align: center; + } + } + } +`; + +const SubmitButton = styled(Button)` + border-radius: 48px; + background: linear-gradient(180deg, #3a3a3a 0%, #282828 100%); + + .btn-text { + text-align: center; + font-family: Satoshi; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: normal; + background: linear-gradient( + 90deg, + #4ba790 0%, + rgba(251, 251, 251, 0.6) 50.31%, + #9747ff 100% + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +`; + +const GradientText = styled.div` + background: linear-gradient(90deg, #6276e7 23.64%, #e884fe 75.69%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + leading-trim: both; + text-edge: cap; + font-family: Satoshi; + font-size: 26px; + font-style: normal; + font-weight: 700; + line-height: 130%; +`; + +const LoginLine = styled.div` + height: 1.103px; + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(251, 251, 251, 0.6) 51.5%, + rgba(255, 255, 255, 0) 100% + ); +`; + +export default function Home() { + const { openConnectModal } = useConnectModal(); + + const { inviteCode, isActiveUser } = useSelector( + (store: RootState) => store.airdrop + ); + const [{ otp, numInputs, separator, placeholder, inputType }, setConfig] = + useState({ + otp: inviteCode || "", + numInputs: 6, + separator: "", + placeholder: "", + inputType: "text" as const, + }); + + const navigator = useNavigate(); + const dispatch = useDispatch(); + const handleOTPChange = (otp: string) => { + setConfig((prevConfig) => ({ ...prevConfig, otp })); + }; + const enterInviteCode = async () => { + console.log("enter invite code", otp); + if (!otp || otp.length !== 6) return; + + dispatch(setInviteCode(otp)); + navigator(`/aggregation-parade`); + }; + + const [isLoading, setIsLoading] = useState(false); + useEffect(() => { + if (isActiveUser) { + setIsLoading(true); + setTimeout(() => { + navigator("/aggregation-parade"); + }, 1000); + } + }, [isActiveUser]); + + useEffect(() => { + handleOTPChange(inviteCode); + }, [inviteCode]); + + const isSubmitDisabled = useMemo(() => { + return !otp || otp.length !== 6; + }, [otp]); + + return ( + + {isLoading && } +
+ {/* Title */} + +
+ + Welcome To zkLink Nova + +
+
+

+ Aggregation Parade has successfully ended +

+
+ +
+ +
1.2B TVL
+ +
+ + + {/* Form: Invite code */} + + +

+ Aggregation Parade Season II +

+ + + +
+ You could still check your Nova Points in the Aggregation Parade + Dashboard +
+ +
+ openConnectModal?.()} + > + Connect Wallet + +
+ +
+ + + + ); +} diff --git a/src/pages/Home.tsx b/src/pages/Home/index.tsx similarity index 100% rename from src/pages/Home.tsx rename to src/pages/Home/index.tsx From 3c4c5455c7517652bec82f9420392da183495276 Mon Sep 17 00:00:00 2001 From: leo Date: Wed, 11 Dec 2024 21:14:41 +0800 Subject: [PATCH 2/3] update for aggparade parade end --- src/constants/epoch.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/constants/epoch.ts b/src/constants/epoch.ts index 46754718..6a996084 100644 --- a/src/constants/epoch.ts +++ b/src/constants/epoch.ts @@ -7,11 +7,11 @@ export const epochList = [ { name: "Epoch Two", season: 3, - time: "Snapshot taken on July 15, 2024, at 12:00 PM UTC", + time: "Snapshot taken on August 31, 2024, at 12:00 PM UTC", }, { name: "Epoch Three", season: 4, - time: "Snapshot taken on July 15, 2024, at 12:00 PM UTC", + time: "Snapshot taken on December 13, 2024, at 12:00 PM UTC", }, ]; From ba187f8a636f5edb55bdb4f7900b49e432f26d35 Mon Sep 17 00:00:00 2001 From: leo Date: Fri, 13 Dec 2024 19:33:17 +0800 Subject: [PATCH 3/3] update portfolio --- src/components/DashboardS2/Tabs/Protfolio.tsx | 127 +++--------------- src/constants/epoch.ts | 2 +- src/pages/DashboardS2/index-end.tsx | 43 +++++- 3 files changed, 61 insertions(+), 111 deletions(-) diff --git a/src/components/DashboardS2/Tabs/Protfolio.tsx b/src/components/DashboardS2/Tabs/Protfolio.tsx index c547b2a4..5664d9a5 100644 --- a/src/components/DashboardS2/Tabs/Protfolio.tsx +++ b/src/components/DashboardS2/Tabs/Protfolio.tsx @@ -477,29 +477,6 @@ export default function Portfolio({
Your Nova Points - -

- Loyalty Booster -

-

- An extra boost for Loyalty users,tied with days in the - Aggregation parade (capped at 50%): -
-
- Loyalty Booster = min(50%, 0.5%*days joined) -

-
- } - > - - +{royaltyBoosterPencentage} - -
@@ -541,28 +518,24 @@ export default function Portfolio({ }} content={
- {epochActive !== epochList.length - 1 && ( -
- <> -
- Sector in {epochList[epochActive].name} -
- -
- +
+
+ Sector in {epochList[epochActive].name}
- )} + +
+
Your Sector Points in {epochList[epochActive].name} @@ -622,71 +595,7 @@ export default function Portfolio({
-
- Your Project Points -
- {`Hide Points < 0.1`} - -
-
-
- -
- {projectPointsList.map((item, index) => ( -
-
- {item?.iconURL && ( - - )} -
-
- {item?.eigenlayerName} -
-
-
-
- -
- {item.pointsName} - - {formatNumberWithUnit(item?.pointsValue)} - -
-
- -
- - {item.eigenlayerName} Eigenlayer Points - - - {formatNumberWithUnit(item?.eigenlayerValue)} - -
-
- - - Participate - - -
- ))} -
- -
-
+
Your Nova NFTs
diff --git a/src/constants/epoch.ts b/src/constants/epoch.ts index 6a996084..4ac654c1 100644 --- a/src/constants/epoch.ts +++ b/src/constants/epoch.ts @@ -12,6 +12,6 @@ export const epochList = [ { name: "Epoch Three", season: 4, - time: "Snapshot taken on December 13, 2024, at 12:00 PM UTC", + time: "Snapshot taken on December 13, 2024, at 10 AM UTC", }, ]; diff --git a/src/pages/DashboardS2/index-end.tsx b/src/pages/DashboardS2/index-end.tsx index 287874f5..3cd5612b 100644 --- a/src/pages/DashboardS2/index-end.tsx +++ b/src/pages/DashboardS2/index-end.tsx @@ -217,7 +217,48 @@ export default function Dashboard() { epochActive === 1 ? await getTvlCategoryMilestoneBySeason({ season: 2 }) : await getCategoryZKL(); - setCategoryZKLs(data || []); + if (epochActive === 2) { + setCategoryZKLs([ + { + name: "holding", + data: "", + type: "", + zkl: 100000, + }, + { + name: "spotdex", + data: "", + type: "", + zkl: 100000, + }, + { + name: "perpdex", + data: "", + type: "", + zkl: 100000, + }, + { + name: "lending", + data: "", + type: "", + zkl: 200000, + }, + { + name: "nativeboost", + data: "", + type: "", + zkl: 50000, + }, + { + name: "other", + data: "", + type: "", + zkl: 50000, + }, + ]); + } else { + setCategoryZKLs(data || []); + } }; const novaPointsList = useMemo(() => {