fix missing %

Tea-Fi · Oct 16, 2024 · 13f3554 · 13f3554
1 parent 20aa9da
commit 13f3554
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 37 deletions.
diff --git a/src/app/components/claim/claim-card.tsx b/src/app/components/claim/claim-card.tsx
@@ -11,6 +11,7 @@ interface ClaimCardProps {
   vestingInfo?: VestingInfo;
   investmentInfo: InvestmentInfoType;
   onClaimCallback: () => Promise<void>;
+  claimPercent: number;
 }
 
 const isTGEStarted = (date?: Date) => {
@@ -23,7 +24,7 @@ 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, claimPercent }) => {
   const { balance, tge, price, address } = investmentInfo;
   const parsedBalance = parseHumanReadable(balance, 18, 1);
   const hasTGEStarted = false;
@@ -58,7 +59,7 @@ export const ClaimCard: React.FC<ClaimCardProps> = ({ investmentInfo, vestingInf
         >
           <span className="text-lg">{parsedBalance} $TEA</span>
           <span className="text-base">
-            {hasTGEStarted ? "Claim now " : "Claim after TGE "}({vestingInfo?.claimPercent}
+            {hasTGEStarted ? "Claim now " : "Claim after TGE "}({claimPercent}
             %): <br />
             {parseHumanReadable(claimValue, 18, 2)} $TEA
           </span>

diff --git a/src/app/components/claim/investment-info.tsx b/src/app/components/claim/investment-info.tsx
@@ -9,18 +9,16 @@ import { VestingCard } from "./vesting-card";
 interface InvestmentInfoProps {
   investmentInfo: InvestmentInfoType;
   refetchInvestmentInfo: () => Promise<void>;
+  claimPercent: number;
 }
 export const InvestmentInfo: React.FC<InvestmentInfoProps> = ({
   investmentInfo,
   refetchInvestmentInfo,
+  claimPercent,
 }) => {
-  const { data: vestingInfo, refetch: refetchVestingInfo } = useVestingInfo(
-    investmentInfo.address
-  );
+  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);
 
@@ -36,8 +34,10 @@ export const InvestmentInfo: React.FC<InvestmentInfoProps> = ({
         vestingInfo={vestingInfo}
         investmentInfo={investmentInfo}
         onClaimCallback={onClaimCallback}
+        claimPercent={claimPercent}
       />
       <VestingCard
+        claimPercent={claimPercent}
         vestingInfo={vestingInfo}
         tokenAddress={investmentInfo.address}
         claimableValue={data?.userUnlockReward}

diff --git a/src/app/components/claim/vesting-card.tsx b/src/app/components/claim/vesting-card.tsx
@@ -14,6 +14,7 @@ interface ClaimCardProps {
   tokenAddress?: string;
   claimableValue?: bigint;
   onClaimCallback: () => Promise<void>;
+  claimPercent: number;
 }
 
 function formatDateToDDMMYY(date?: Date) {
@@ -34,24 +35,17 @@ export const VestingCard: React.FC<ClaimCardProps> = ({
   tokenAddress,
   claimableValue = 0n,
   onClaimCallback,
+  claimPercent,
 }) => {
   if (!vestingInfo || vestingInfo.tokensForVesting == 0n) return;
-  const {
-    claimed,
-    totalVested,
-    totalAmount,
-    totalInitialUnlock,
-    totalAmountBurn,
-  } = useSubgraphInfo(tokenAddress as Address);
+  const { claimed, totalVested, totalAmount, totalInitialUnlock, totalAmountBurn } = useSubgraphInfo(
+    tokenAddress as Address
+  );
 
   const dateEnd = formatDateToDDMMYY(vestingInfo.dateEnd);
 
   const parsedTotalVested = parseHumanReadable(totalVested, 18, 2);
-  const parsedTotalInitialUnlocked = parseHumanReadable(
-    totalInitialUnlock,
-    18,
-    2
-  );
+  const parsedTotalInitialUnlocked = parseHumanReadable(totalInitialUnlock, 18, 2);
   const parsedClaimed = parseHumanReadable(claimed, 18, 2);
   const parsedTotalAmountBurn = parseHumanReadable(totalAmountBurn, 18, 2);
   const parsedTotalAmount = parseHumanReadable(totalAmount, 18, 2);
@@ -68,14 +62,10 @@ export const VestingCard: React.FC<ClaimCardProps> = ({
       <VestingChart
         min={parsedTotalInitialUnlocked}
         max={parsedTotalAmountBurn}
-        months={VESTING_PERIOD_MONTHS[vestingInfo.claimPercent]}
+        months={VESTING_PERIOD_MONTHS[claimPercent]}
         dateStart={vestingInfo.dateStart}
       />
-      <ProgressBar
-        value1={parsedClaimed}
-        value2={parsedTotalVested}
-        maxValue={parsedTotalAmount}
-      />
+      <ProgressBar value1={parsedClaimed} value2={parsedTotalVested} maxValue={parsedTotalAmount} />
       <div className="flex justify-between text-sm">
         <span className="text-[#f716a2]">Vested</span>
         <span>
@@ -88,11 +78,7 @@ export const VestingCard: React.FC<ClaimCardProps> = ({
           {parsedClaimed}/{parsedTotalAmount} $TEA
         </span>
       </div>
-      <VestingButton
-        tokenAddress={tokenAddress!}
-        claimableValue={claimableValue}
-        onClaimCallback={onClaimCallback}
-      />
+      <VestingButton tokenAddress={tokenAddress!} claimableValue={claimableValue} onClaimCallback={onClaimCallback} />
     </Card>
   );
 };
diff --git a/src/app/hooks/useVestingInfo.tsx b/src/app/hooks/useVestingInfo.tsx
@@ -17,11 +17,7 @@ export const useVestingInfo = (token?: Address) => {
     isLoading: isVestingTokensLoading,
     refetch: refetchVestingTokens,
   } = useVestingTokens(token);
-  const {
-    data: vestingUser,
-    isLoading: isVestingUserLoading,
-    refetch: refetchVestingUser,
-  } = useVestingUsers(token);
+  const { data: vestingUser, isLoading: isVestingUserLoading, refetch: refetchVestingUser } = useVestingUsers(token);
 
   const vestingInfoData: VestingInfo | undefined = useMemo(() => {
     if (!vestingTokens || !vestingUser) return;

diff --git a/src/app/pages/claim.tsx b/src/app/pages/claim.tsx
@@ -2,6 +2,7 @@ import Spinner from "../components/spinner";
 
 import { useInvestmentInfos } from "../hooks/useInvestmentInfos";
 import { InvestmentInfo } from "../components/claim/investment-info";
+import { TOKENS_TGE } from "../utils/constants";
 
 export const Claim = () => {
   const { totalSoldTeaPerAccount, loading, investmentInfos, refetchInvestmentInfo } = useInvestmentInfos();
@@ -17,7 +18,11 @@ export const Claim = () => {
         {!loading &&
           investmentInfos.map((investmentInfo, index) => (
             <div key={index} className="flex flex-col gap-4 ">
-              <InvestmentInfo investmentInfo={investmentInfo} refetchInvestmentInfo={refetchInvestmentInfo} />
+              <InvestmentInfo
+                investmentInfo={investmentInfo}
+                claimPercent={Number(TOKENS_TGE[index])}
+                refetchInvestmentInfo={refetchInvestmentInfo}
+              />
             </div>
           ))}
       </div>