Fix/lm unclaimed calc (#975)

* fix: LM Vesting crashes rewards page

* fix: unclaimed vesting calculation

Author: creed-victor

.changeset/modern-ducks-shake.md

@@ -0,0 +1,5 @@
+---
+'frontend': patch
+---
+
+fix: LM Vesting crashes rewards page

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/hooks/useLmLimit.ts

@@ -5,20 +5,37 @@ import dayjs from 'dayjs';
 import { useAccount } from '../../../../../../hooks/useAccount';
 import { rskClient } from '../../../../../../utils/clients';
 import {
+  useGetLastWithdrawOfVestingTypeQuery,
   useGetUserVestingsOfTypeQuery,
   VestingContractType,
 } from '../../../../../../utils/graphql/rsk/generated';
 
 export const useGetUnclaimedUserVestingCount = () => {
   const { account } = useAccount();
-  const { data } = useGetUserVestingsOfTypeQuery({
+  const { data, loading } = useGetUserVestingsOfTypeQuery({
     variables: {
       user: account.toLowerCase(),
       type: VestingContractType.Rewards,
     },
     client: rskClient,
   });
 
+  const { data: withdraws, loading: loadingWithdraws } =
+    useGetLastWithdrawOfVestingTypeQuery({
+      variables: {
+        user: account,
+        type: VestingContractType.Rewards,
+      },
+      client: rskClient,
+    });
+
+  const lastWithdrawTimestamp = useMemo(
+    () =>
+      withdraws?.vestingContracts[0]?.stakeHistory?.[0]?.timestamp ||
+      dayjs().subtract(4, 'year').unix(),
+    [withdraws?.vestingContracts],
+  );
+
   const result = useMemo(() => {
     const stakeHistoryItems = data?.vestingContracts[0]?.stakeHistory?.map(
       item => ({
@@ -46,10 +63,12 @@ export const useGetUnclaimedUserVestingCount = () => {
       }),
     ).sort((a, b) => a.lockedUntil - b.lockedUntil);
 
-    const pastDatesLength = unlockDates?.filter(item => item.isUnlocked).length;
+    const pastDatesLength = unlockDates
+      ?.filter(item => item.isUnlocked)
+      .filter(item => item.lockedUntil > lastWithdrawTimestamp).length;
 
     return pastDatesLength;
-  }, [data?.vestingContracts]);
+  }, [data?.vestingContracts, lastWithdrawTimestamp]);
 
-  return result;
+  return loading || loadingWithdraws ? 0 : result;
 };

apps/frontend/src/utils/graphql/rsk/generated.tsx

@@ -16838,6 +16838,25 @@ export type GetUserVestingsOfTypeQuery = {
   }>;
 };
 
+export type GetLastWithdrawOfVestingTypeQueryVariables = Exact<{
+  user?: InputMaybe<Scalars['String']>;
+  type?: InputMaybe<VestingContractType>;
+}>;
+
+export type GetLastWithdrawOfVestingTypeQuery = {
+  __typename?: 'Query';
+  vestingContracts: Array<{
+    __typename?: 'VestingContract';
+    id: string;
+    stakeHistory?: Array<{
+      __typename?: 'VestingHistoryItem';
+      id: string;
+      amount: string;
+      timestamp: number;
+    }> | null;
+  }>;
+};
+
 export type GetVestingHistoryItemsQueryVariables = Exact<{
   stakers?: InputMaybe<Array<Scalars['String']> | Scalars['String']>;
   skip: Scalars['Int'];
@@ -19852,6 +19871,78 @@ export type GetUserVestingsOfTypeQueryResult = Apollo.QueryResult<
   GetUserVestingsOfTypeQuery,
   GetUserVestingsOfTypeQueryVariables
 >;
+export const GetLastWithdrawOfVestingTypeDocument = gql`
+  query getLastWithdrawOfVestingType(
+    $user: String
+    $type: VestingContractType
+  ) {
+    vestingContracts(where: { user: $user, type: $type }) {
+      id
+      stakeHistory(
+        where: { action: TokensWithdrawn }
+        orderBy: timestamp
+        orderDirection: desc
+        first: 1
+      ) {
+        id
+        amount
+        timestamp
+      }
+    }
+  }
+`;
+
+/**
+ * __useGetLastWithdrawOfVestingTypeQuery__
+ *
+ * To run a query within a React component, call `useGetLastWithdrawOfVestingTypeQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetLastWithdrawOfVestingTypeQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetLastWithdrawOfVestingTypeQuery({
+ *   variables: {
+ *      user: // value for 'user'
+ *      type: // value for 'type'
+ *   },
+ * });
+ */
+export function useGetLastWithdrawOfVestingTypeQuery(
+  baseOptions?: Apollo.QueryHookOptions<
+    GetLastWithdrawOfVestingTypeQuery,
+    GetLastWithdrawOfVestingTypeQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useQuery<
+    GetLastWithdrawOfVestingTypeQuery,
+    GetLastWithdrawOfVestingTypeQueryVariables
+  >(GetLastWithdrawOfVestingTypeDocument, options);
+}
+export function useGetLastWithdrawOfVestingTypeLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<
+    GetLastWithdrawOfVestingTypeQuery,
+    GetLastWithdrawOfVestingTypeQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useLazyQuery<
+    GetLastWithdrawOfVestingTypeQuery,
+    GetLastWithdrawOfVestingTypeQueryVariables
+  >(GetLastWithdrawOfVestingTypeDocument, options);
+}
+export type GetLastWithdrawOfVestingTypeQueryHookResult = ReturnType<
+  typeof useGetLastWithdrawOfVestingTypeQuery
+>;
+export type GetLastWithdrawOfVestingTypeLazyQueryHookResult = ReturnType<
+  typeof useGetLastWithdrawOfVestingTypeLazyQuery
+>;
+export type GetLastWithdrawOfVestingTypeQueryResult = Apollo.QueryResult<
+  GetLastWithdrawOfVestingTypeQuery,
+  GetLastWithdrawOfVestingTypeQueryVariables
+>;
 export const GetVestingHistoryItemsDocument = gql`
   query getVestingHistoryItems(
     $stakers: [String!]

apps/frontend/src/utils/graphql/rsk/operations/getVestingHistory.graphql

@@ -29,3 +29,19 @@ query getUserVestingsOfType($user: String, $type: VestingContractType) {
     }
   }
 }
+
+query getLastWithdrawOfVestingType($user: String, $type: VestingContractType) {
+  vestingContracts(where: { user: $user, type: $type }) {
+    id
+    stakeHistory(
+      where: { action: TokensWithdrawn }
+      orderBy: timestamp
+      orderDirection: desc
+      first: 1
+    ) {
+      id
+      amount
+      timestamp
+    }
+  }
+}