Merge pull request #121 from Tea-Fi/dev

fix cards layout
Tea-Fi · Oct 1, 2024 · 6bd38ae · 6bd38ae
2 parents d75d475 + c741948
commit 6bd38ae
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 55 deletions.
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -21,8 +21,6 @@ import ProtectedRoutes from "./utils/ProtectedRoutes.tsx";
 import AmbassadorProtectedRoutes from "./utils/AmbassadorProtectedRoutes.tsx";
 import ClaimProtectedRoutes from "./utils/ClaimProtectedRoutes.tsx";
 import { useReferralCode } from "./hooks/useReferralCode.ts";
-import { useMemo } from "react";
-import { endOfPresaleDate } from "./utils/constants.ts";
 import { useIsPresaleEnded } from "./hooks/useIsPresaleEnded.ts";
 
 export function App() {
@@ -43,12 +41,6 @@ export function App() {
     },
   });
 
-  const haveAccessToBuy = useMemo(
-    () => !isFinished && endOfPresaleDate.getTime() > new Date().getTime(),
-
-    [isFinished]
-  );
-
   if (chainId && unsupportedChain) {
     return <WrongNetwork />;
   }
@@ -63,10 +55,10 @@ export function App() {
             <Route
               path="/:code/buy"
               element={
-                haveAccessToBuy ? (
-                  <Buy />
-                ) : (
+                isFinished ? (
                   <Navigate to={`/${code}/options`} replace={true} />
+                ) : (
+                  <Buy />
                 )
               }
             />

diff --git a/src/app/components/claim/claim-card.tsx b/src/app/components/claim/claim-card.tsx
@@ -1,10 +1,10 @@
-// import { Address } from "viem";
+import { Address } from "viem";
 import { SlIcon } from "@shoelace-style/shoelace/dist/react";
 
 import { VestingInfo } from "../../hooks/useVestingInfo";
 import { cn, parseHumanReadable, truncateAddress } from "../../utils";
 import { Button, Card, CardDescription, CardTitle } from "../ui";
-// import { ClaimButton } from "./claim-button";
+import { ClaimButton } from "./claim-button";
 import { InvestmentInfoType } from "../../hooks/useInvestmentInfos";
 
 interface ClaimCardProps {
@@ -26,9 +26,9 @@ const calculateClaimAmount = (balance?: bigint, tge?: bigint) => {
 export const ClaimCard: React.FC<ClaimCardProps> = ({
   investmentInfo,
   vestingInfo,
-  // onClaimCallback,
+  onClaimCallback,
 }) => {
-  const { balance, tge, price } = investmentInfo;
+  const { balance, tge, price, address } = investmentInfo;
   const parsedBalance = parseHumanReadable(balance, 18, 1);
   const hasTGEStarted = isTGEStarted(vestingInfo?.dateStart);
   const hasVested = vestingInfo && vestingInfo?.tokensForVesting > 0n;
@@ -39,8 +39,9 @@ export const ClaimCard: React.FC<ClaimCardProps> = ({
   return (
     <Card
       className={cn(
-        "w-64 h-80",
-        hasVested && parsedBalance === 0 && "bg-[#262626] border-0"
+        "w-64",
+        hasVested && parsedBalance === 0 && "bg-[#262626] border-0",
+        hasTGEStarted && "h-80"
       )}
     >
       <CardTitle>{price} / $TEA</CardTitle>
@@ -63,7 +64,12 @@ export const ClaimCard: React.FC<ClaimCardProps> = ({
         </>
       )}
       {(!hasVested || parsedBalance > 0) && (
-        <CardDescription className="flex flex-col justify-between  gap-3 items-center h-52">
+        <CardDescription
+          className={cn(
+            "flex flex-col justify-between  gap-3 items-center",
+            hasTGEStarted ? "h-52" : "pb-3"
+          )}
+        >
           <span className="text-lg">{parsedBalance} $TEA</span>
           <span className="text-base">
             {hasTGEStarted ? "Claim now " : "Claim at TGE "}(
@@ -76,13 +82,15 @@ export const ClaimCard: React.FC<ClaimCardProps> = ({
               your ongoing vesting
             </span>
           )}
-          {/* <ClaimButton
-            balance={balance}
-            vestingValue={vestingValue}
-            address={address as Address}
-            disabled={!isTGEStarted}
-            onClaimCallback={onClaimCallback}
-          /> */}
+          {hasTGEStarted && (
+            <ClaimButton
+              balance={balance}
+              vestingValue={vestingValue}
+              address={address as Address}
+              disabled={!isTGEStarted}
+              onClaimCallback={onClaimCallback}
+            />
+          )}
         </CardDescription>
       )}
     </Card>

diff --git a/src/app/hooks/useIsPresaleEnded.ts b/src/app/hooks/useIsPresaleEnded.ts
@@ -1,30 +1,3 @@
-import { useEffect, useRef, useState } from "react";
-import { endOfPresaleDate } from "../utils/constants";
-
 export const useIsPresaleEnded = () => {
-  const [isEnded, setIsEnded] = useState(false);
-
-  const timerRef = useRef<NodeJS.Timeout>();
-
-  useEffect(() => {
-    clearInterval(timerRef.current);
-
-    timerRef.current = setInterval(() => {
-      if (endOfPresaleDate.getTime() < new Date().getTime()) {
-        setIsEnded(true);
-      }
-    }, 1000);
-
-    return () => {
-      clearInterval(timerRef.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (isEnded) {
-      clearInterval(timerRef.current);
-    }
-  }, [isEnded]);
-
-  return isEnded;
+  return true;
 };
diff --git a/src/app/pages/options.tsx b/src/app/pages/options.tsx
@@ -28,12 +28,12 @@ import { ProjectInfoOption } from "../../types/options.ts";
 import { ProjectCard } from "../components/options/ProjectCard/ProjectCard.tsx";
 import { useReferralCode } from "../hooks/useReferralCode.ts";
 import { CountdownSmall } from "../components/countdown/countdown-sm.tsx";
-import { useCountdownStore } from "../state/countdown.store.ts";
+import { useIsPresaleEnded } from "../hooks/useIsPresaleEnded.ts";
 
 export const Options = () => {
   const [dropdownOpened, setDropdownOpened] = useState<boolean>(false);
   const code = useReferralCode();
-  const { isFinished } = useCountdownStore();
+  const isFinished = useIsPresaleEnded();
 
   const defaultProjectInfos: ProjectInfoOption[] = Object.keys(
     INVESTMENT_INFO