diff --git a/public/img/s2/zkl-claim.png b/public/img/s2/zkl-claim.png new file mode 100644 index 00000000..d868b1c2 Binary files /dev/null and b/public/img/s2/zkl-claim.png differ diff --git a/src/components/DashboardS2/ZKLClaimAd.tsx b/src/components/DashboardS2/ZKLClaimAd.tsx new file mode 100644 index 00000000..9b43431e --- /dev/null +++ b/src/components/DashboardS2/ZKLClaimAd.tsx @@ -0,0 +1,150 @@ +import { GradientBox } from "@/styles/common"; +import { Button } from "@nextui-org/react"; +import { useEffect, useState } from "react"; +import styled from "styled-components"; + +const Container = styled.div` + position: fixed; + top: 120px; + right: 32px; + background: #181d20; + color: #fff; + font-family: Satoshi; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + z-index: 999; + transition: all 0.3s; + + .progress-bar { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + + @keyframes shrinkWidth { + from { + width: 100%; + } + to { + width: 0%; + } + } + + .progress { + height: 4px; + background: var( + --Button-Rainbow, + linear-gradient( + 90deg, + #4ba790 0%, + rgba(251, 251, 251, 0.6) 50.31%, + #9747ff 100% + ) + ); + width: 100%; + animation: shrinkWidth 30.3s linear; + } + } +`; + +const DefaultButton = styled(Button)` + border-radius: 8px; + background: #282828; + .btn-text { + font-family: Satoshi; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: normal; + background: var( + --Button-Rainbow, + 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; + } +`; + +export default function ZKLClaimAd() { + const [isOpen, setIsOpen] = useState(true); + + // useEffect(() => { + // const premius_ts = localStorage.getItem("premius_ts"); + // const now = new Date().getTime(); + + // console.log("premius_ts", premius_ts, now, now - Number(premius_ts)); + + // if (!premius_ts || now - Number(premius_ts) > 12 * 60 * 60 * 1000) { + // setIsOpen(true); + // } + // }, []); + + // useEffect(() => { + // if (!isOpen) return; + // const timer = setTimeout(() => { + // setIsOpen(false); + // }, 30000); + + // return () => clearTimeout(timer); + // }, [isOpen]); + + const handleClose = () => { + setIsOpen(false); + // const now = new Date().getTime(); + // localStorage.setItem("premius_ts", now.toString()); + }; + + const handleJump = () => { + handleClose(); + window.open("https://zklink.io/novadrop/", "_blank"); + }; + + return ( + + +
+ +
+
+ +
+ +
+ + Claim Now + +
+ + {/* {isOpen && ( +
+
+
+ )} */} +
+
+ ); +} diff --git a/src/pages/DashboardS2/index2.tsx b/src/pages/DashboardS2/index2.tsx index 5a82361b..446f5b7c 100644 --- a/src/pages/DashboardS2/index2.tsx +++ b/src/pages/DashboardS2/index2.tsx @@ -26,6 +26,7 @@ import DailyRoulette from "@/components/DashboardS2/DailyRoulette"; import { Tooltip } from "@nextui-org/react"; import { epochList } from "@/constants/epoch"; import PremiusAd from "@/components/DashboardS2/PremiusAd"; +import ZKLClaimAd from "@/components/DashboardS2/ZKLClaimAd"; export type TotalTvlItem = { symbol: string; tokenAddress: string; @@ -596,7 +597,8 @@ export default function Dashboard() { return ( - + {/* */} +