Merge branch 'dev' of github.com:Tea-Fi/presale-ui into dev

Tea-Fi · Nov 1, 2024 · 9943546 · 9943546
2 parents 749de2e + a398fdf
commit 9943546
Show file tree

Hide file tree

Showing 26 changed files with 175 additions and 335 deletions.
diff --git a/package.json b/package.json
@@ -84,4 +84,4 @@
     "vite": "~5.0.0",
     "zustand": "^4.5.4"
   }
-}
+}
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -1,14 +1,7 @@
-import {
-  BrowserRouter as Router,
-  Route,
-  Routes,
-  Navigate,
-} from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
 import { useAccountEffect } from "wagmi";
 
 import { Layout } from "./components/layout";
-import { Login } from "./pages/login";
-import { Buy } from "./pages/buy";
 import { Claim } from "./pages/claim";
 import { NotFound } from "./pages/not-found";
 import { useWalletContext } from "./providers/wallet.context";
@@ -17,16 +10,11 @@ import { Referrals } from "./pages/referrals";
 import { Options } from "./pages/options";
 import { track } from "./utils/analytics";
 import { CodeNotFound } from "./pages/code-not-found.tsx";
-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 { useIsPresaleEnded } from "./hooks/useIsPresaleEnded.ts";
 
 export function App() {
   const { chainId, unsupportedChain } = useWalletContext();
-  const code = useReferralCode();
-  const isFinished = useIsPresaleEnded();
 
   useAccountEffect({
     onConnect(data) {
@@ -49,28 +37,15 @@ export function App() {
     <Router basename="/">
       <Routes>
         <Route element={<Layout />}>
-          <Route path="/" element={<Login />} />
+          <Route path="/buy" element={<Navigate to={`/`} replace={true} />} />
+          <Route path="/" element={<Options />} />
 
-          <Route element={<ProtectedRoutes />}>
-            <Route
-              path="/:code/buy"
-              element={
-                isFinished ? (
-                  <Navigate to={`/${code}/options`} replace={true} />
-                ) : (
-                  <Buy />
-                )
-              }
-            />
-            <Route path="/:code/options" element={<Options />} />
-
-            <Route element={<ClaimProtectedRoutes />}>
-              <Route path="/:code/claim" element={<Claim />} />
-            </Route>
+          <Route element={<ClaimProtectedRoutes />}>
+            <Route path="/claim" element={<Claim />} />
+          </Route>
 
-            <Route element={<AmbassadorProtectedRoutes />}>
-              <Route path="/:code/dashboard" element={<Referrals />} />
-            </Route>
+          <Route element={<AmbassadorProtectedRoutes />}>
+            <Route path="/dashboard" element={<Referrals />} />
           </Route>
           <Route path="/code-not-found" element={<CodeNotFound />} />
           <Route path="*" element={<NotFound />} />

diff --git a/src/app/components/claim/claim-card.tsx b/src/app/components/claim/claim-card.tsx
@@ -23,27 +23,19 @@ const calculateClaimAmount = (balance?: bigint, tge?: bigint) => {
   return (balance * tge) / 100n;
 };
 
-export const ClaimCard: React.FC<ClaimCardProps> = ({
-  investmentInfo,
-  vestingInfo,
-  onClaimCallback,
-}) => {
+export const ClaimCard: React.FC<ClaimCardProps> = ({ investmentInfo, vestingInfo, onClaimCallback }) => {
   const { balance, tge, price, address } = investmentInfo;
-  const parsedBalance = parseHumanReadable(balance, 18, 1);
+  const parsedBalance = parseHumanReadable(balance, 18, 6);
+  // const hasTGEStarted = false;
+
   const hasTGEStarted = isTGEStarted(vestingInfo?.dateStart);
   const hasVested = vestingInfo && vestingInfo?.tokensForVesting > 0n;
 
   const claimValue = calculateClaimAmount(balance, tge);
   const vestingValue = balance - claimValue;
 
   return (
-    <Card
-      className={cn(
-        "w-64",
-        hasVested && parsedBalance === 0 && "bg-[#262626] border-0",
-        hasTGEStarted && "h-80"
-      )}
-    >
+    <Card className={cn("w-64", hasVested && parsedBalance === 0 && "bg-[#262626] border-0", hasTGEStarted && "h-80")}>
       <CardTitle>{price} / $TEA</CardTitle>
       {hasVested && parsedBalance == 0 && (
         <>
@@ -53,9 +45,7 @@ export const ClaimCard: React.FC<ClaimCardProps> = ({
             <span>You have already claimed your tokens</span>
             <span>Check the vesting process below</span>
             <Button
-              className={cn(
-                "w-full disabled:bg-[#35232D] border-solid border-2 border-[#f716a2] text-[#f716a2]"
-              )}
+              className={cn("w-full disabled:bg-[#35232D] border-solid border-2 border-[#f716a2] text-[#f716a2]")}
               disabled
             >
               <SlIcon name="check-circle" className="m-2" /> {"Claimed"}
@@ -65,21 +55,17 @@ export const ClaimCard: React.FC<ClaimCardProps> = ({
       )}
       {(!hasVested || parsedBalance > 0) && (
         <CardDescription
-          className={cn(
-            "flex flex-col justify-between  gap-3 items-center",
-            hasTGEStarted ? "h-52" : "pb-3"
-          )}
+          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 "}(
-            {vestingInfo?.claimPercent}
-            %): {parseHumanReadable(claimValue, 18, 2)} $TEA
+            {hasTGEStarted ? "Claim now " : "Claim after TGE "}({Number(tge)}
+            %): <br />
+            {parseHumanReadable(claimValue, 18, 6)} $TEA
           </span>
           {hasVested && (
             <span className="text-sm">
-              {parseHumanReadable(vestingValue, 18, 2)} $TEA will be added to
-              your ongoing vesting
+              {parseHumanReadable(vestingValue, 18, 6)} $TEA will be added to your ongoing vesting
             </span>
           )}
           {hasTGEStarted && (

diff --git a/src/app/components/claim/investment-info.tsx b/src/app/components/claim/investment-info.tsx
@@ -10,17 +10,10 @@ interface InvestmentInfoProps {
   investmentInfo: InvestmentInfoType;
   refetchInvestmentInfo: () => Promise<void>;
 }
-export const InvestmentInfo: React.FC<InvestmentInfoProps> = ({
-  investmentInfo,
-  refetchInvestmentInfo,
-}) => {
-  const { data: vestingInfo, refetch: refetchVestingInfo } = useVestingInfo(
-    investmentInfo.address
-  );
+export const InvestmentInfo: React.FC<InvestmentInfoProps> = ({ investmentInfo, refetchInvestmentInfo }) => {
+  const { data: vestingInfo, refetch: refetchVestingInfo } = useVestingInfo(investmentInfo.address);
 
-  const { data, refetch: refetchUserUnlockReward } = useGetUserUnlockReward(
-    investmentInfo.address
-  );
+  const { data, refetch: refetchUserUnlockReward } = useGetUserUnlockReward(investmentInfo.address);
 
   const { refetchInfo } = useSubgraphInfo(investmentInfo.address as Address);
 
@@ -32,13 +25,10 @@ export const InvestmentInfo: React.FC<InvestmentInfoProps> = ({
 
   return (
     <>
-      <ClaimCard
-        vestingInfo={vestingInfo}
-        investmentInfo={investmentInfo}
-        onClaimCallback={onClaimCallback}
-      />
+      <ClaimCard vestingInfo={vestingInfo} investmentInfo={investmentInfo} onClaimCallback={onClaimCallback} />
       <VestingCard
         vestingInfo={vestingInfo}
+        investmentInfo={investmentInfo}
         tokenAddress={investmentInfo.address}
         claimableValue={data?.userUnlockReward}
         onClaimCallback={onClaimCallback}

diff --git a/src/app/components/claim/vesting-card.tsx b/src/app/components/claim/vesting-card.tsx
@@ -8,12 +8,14 @@ import ProgressBar from "../ui/progress-bar/progress-bar";
 import { VestingButton } from "./vesting-button";
 import { VestingChart } from "./vesting-chart";
 import { VESTING_PERIOD_MONTHS } from "../../utils/constants";
+import { InvestmentInfoType } from "../../hooks/useInvestmentInfos";
 
 interface ClaimCardProps {
   vestingInfo?: VestingInfo;
   tokenAddress?: string;
   claimableValue?: bigint;
   onClaimCallback: () => Promise<void>;
+  investmentInfo: InvestmentInfoType;
 }
 
 function formatDateToDDMMYY(date?: Date) {
@@ -34,6 +36,7 @@ export const VestingCard: React.FC<ClaimCardProps> = ({
   tokenAddress,
   claimableValue = 0n,
   onClaimCallback,
+  investmentInfo,
 }) => {
   if (!vestingInfo || vestingInfo.tokensForVesting == 0n) return;
   const { claimed, totalVested, totalAmount, totalInitialUnlock, totalAmountBurn } = useSubgraphInfo(
@@ -60,7 +63,7 @@ export const VestingCard: React.FC<ClaimCardProps> = ({
       <VestingChart
         min={parsedTotalInitialUnlocked}
         max={parsedTotalAmountBurn}
-        months={VESTING_PERIOD_MONTHS[vestingInfo.claimPercent]}
+        months={VESTING_PERIOD_MONTHS[Number(investmentInfo.tge)]}
         dateStart={vestingInfo.dateStart}
       />
       <ProgressBar value1={parsedClaimed} value2={parsedTotalVested} maxValue={parsedTotalAmount} />

diff --git a/src/app/components/countdown-by-checkpoints.tsx b/src/app/components/countdown-by-checkpoints.tsx
@@ -287,4 +287,4 @@ export const CountdownByCheckpoint = ({
       renderer={renderer}
     />
   );
-};
+};
diff --git a/src/app/components/layout.tsx b/src/app/components/layout.tsx
@@ -1,33 +1,15 @@
 import { /*React,*/ useLayoutEffect } from "react";
 import { TopBar } from "./top-bar";
-import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
-import { LoginStatus, useUserContext } from "../providers/user.context";
+import { Outlet, useLocation } from "react-router-dom";
+import { useUserContext } from "../providers/user.context";
 import { BackgroundBeams } from "./ui";
 import { MobileDrawerMenu } from "./mobile-drawer-menu";
 import { RevokeApprovalDialog } from "./revoke-approval-dialog";
-import { getReferralTreeById } from "../utils/referrals";
-import { useReferralStore } from "../state/referal.store.ts";
 
 export const Layout = () => {
-  const navigate = useNavigate();
-  const { referralId, setReferralCode } = useReferralStore();
-  const { code } = useParams();
-
   const { pathname } = useLocation();
   const { status } = useUserContext();
 
-  useLayoutEffect(() => {
-    if (status === LoginStatus.LOGGED_OUT) {
-      navigate("/");
-    }
-
-    if (status === LoginStatus.LOGGED_IN && code) {
-      getReferralTreeById(Number(referralId)).then((res) => {
-        setReferralCode(res?.referral ?? "");
-      });
-    }
-  }, [navigate, status]);
-
   useLayoutEffect(() => {
     window.scrollTo({ top: 0, behavior: "instant" });
   }, [pathname]);
@@ -37,15 +19,10 @@ export const Layout = () => {
   }
 
   return (
-    <main
-      vaul-drawer-wrapper=""
-      className="flex flex-col min-h-screen min-v-screen dark"
-    >
-      {status === LoginStatus.LOGGED_IN && <TopBar />}
+    <main vaul-drawer-wrapper="" className="flex flex-col min-h-screen min-v-screen dark">
+      <TopBar />
       <Outlet />
-      {pathname !== "/" && (
-        <BackgroundBeams className="hidden pointer-events-none md:block" />
-      )}
+      {pathname !== "/" && <BackgroundBeams className="hidden pointer-events-none md:block" />}
 
       {/* MODALS, DRAWERS */}
       <MobileDrawerMenu />