Merge pull request #335 from zkLinkProtocol/feat/zkl-claim-ad

add ZKL claim ad
zkLinkProtocol · Jul 22, 2024 · 95ad79d · 95ad79d
2 parents 7bf0995 + d127045
commit 95ad79d
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 1 deletion.
diff --git a/public/img/s2/zkl-claim.png b/public/img/s2/zkl-claim.png
diff --git a/src/components/DashboardS2/ZKLClaimAd.tsx 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 (
+    <Container className={`${isOpen ? "block" : "hidden"}`}>
+      <GradientBox
+        className={`rounded-[16px] px-[20px] pt-[16px] pb-[20px] w-[392px] overflow-hidden relative`}
+      >
+        <div>
+          <img
+            src="/img/modal-close.svg"
+            alt=""
+            width={24}
+            height={24}
+            className="absolute top-[16px] right-[12px] cursor-pointer"
+            onClick={handleClose}
+          />
+        </div>
+        <div>
+          <img
+            src="/img/s2/zkl-claim.png"
+            alt=""
+            width={352}
+            height={192}
+            className="min-w-[352px] mx-auto"
+            onClick={handleJump}
+          />
+        </div>
+
+        <div className="mt-[16px]">
+          <DefaultButton className="w-full" onClick={handleJump}>
+            <span className="btn-text">Claim Now</span>
+          </DefaultButton>
+        </div>
+
+        {/* {isOpen && (
+          <div className="progress-bar">
+            <div className="progress"></div>
+          </div>
+        )} */}
+      </GradientBox>
+    </Container>
+  );
+}
diff --git 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 (
     <Container>
-      <PremiusAd />
+      {/* <PremiusAd /> */}
+      <ZKLClaimAd />
       <div className="mt-[29.6px] mx-auto max-w-[1246px] ">
         <CardBox2 className="flex justify-between">
           <div className="px-[16px] py-[10px]">