SOV-3945: prevent creation of "dead vestings" (#964)

* feat: custom row wrapper for table component

* feat: add alert message

* chore: fix review comments

* chore: add changeset

---------

Co-authored-by: soulBit <its.soulBit@gmail.com>

Author: creed-victor

.changeset/orange-lizards-admire.md

@@ -0,0 +1,5 @@
+---
+'@sovryn/ui': patch
+---
+
+feat: allow custom row wrapper in table component

.changeset/real-paws-poke.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3945: prevent "dead vestings" from LM rewards

apps/frontend/src/app/4_templates/PageContainer/PageContainer.tsx

@@ -5,9 +5,14 @@ import { Outlet } from 'react-router-dom';
 
 import { applyDataAttr } from '@sovryn/ui';
 
+import { RSK_CHAIN_ID } from '../../../config/chains';
+
 import { DappLocked } from '../../1_atoms/DappLocked/DappLocked';
 import { Header, Footer } from '../../3_organisms';
+import { UnclaimcedVestingAlert } from '../../5_pages/RewardsPage/components/Vesting/components/UnclaimedVestingAlert/UnclaimedVestingAlert';
 import { useIsDappLocked } from '../../../hooks/maintenances/useIsDappLocked';
+import { useAccount } from '../../../hooks/useAccount';
+import { useCurrentChain } from '../../../hooks/useChainStore';
 
 type PageContainerProps = {
   className?: string;
@@ -21,6 +26,8 @@ export const PageContainer: FC<PageContainerProps> = ({
   dataAttribute,
 }) => {
   const dappLocked = useIsDappLocked();
+  const { account } = useAccount();
+  const chainID = useCurrentChain();
   return (
     <div
       className={classNames('flex flex-col flex-grow', className)}
@@ -31,6 +38,7 @@ export const PageContainer: FC<PageContainerProps> = ({
       ) : (
         <>
           <Header />
+          {account && chainID === RSK_CHAIN_ID && <UnclaimcedVestingAlert />}
           <div
             className={classNames('my-2 px-4 flex flex-grow', contentClassName)}
           >

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/Vesting.tsx

@@ -10,6 +10,7 @@ import { translations } from '../../../../../locales/i18n';
 import { VestingContractType } from '../../../../../utils/graphql/rsk/generated';
 import { columnsConfig } from './Vestings.constants';
 import { generateRowTitle } from './Vestings.utils';
+import { VestingContextProvider } from './context/VestingContext';
 import { useGetVestingContracts } from './hooks/useGetVestingContracts';
 
 const pageSize = DEFAULT_PAGE_SIZE;
@@ -57,6 +58,7 @@ export const Vesting: FC = () => {
         isLoading={loading}
         dataAttribute="vesting-rewards-history-table"
         rowTitle={generateRowTitle}
+        rowComponent={VestingContextProvider}
       />
       <Pagination
         page={page}

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/components/UnclaimedVestingAlert/UnclaimedVestingAlert.constants.ts

@@ -0,0 +1,2 @@
+export const MIN_ALERT_COUNT = 32;
+export const LOCK_CLAIM_COUNT = 43;

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/components/UnclaimedVestingAlert/UnclaimedVestingAlert.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { t } from 'i18next';
+import { Link } from 'react-router-dom';
+
+import { Paragraph } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { useGetUnclaimedUserVestingCount } from '../../hooks/useLmLimit';
+import {
+  LOCK_CLAIM_COUNT,
+  MIN_ALERT_COUNT,
+} from './UnclaimedVestingAlert.constants';
+
+export const UnclaimcedVestingAlert = () => {
+  const count = useGetUnclaimedUserVestingCount();
+
+  if (count > MIN_ALERT_COUNT && count < LOCK_CLAIM_COUNT) {
+    return (
+      <div className="bg-error-light bg-opacity-50 p-4 rounded-lg mt-12 my-4 mx-8">
+        <Paragraph>
+          {t(translations.unclaimedVestings.text, { value: count })}{' '}
+          <Link
+            to="/rewards"
+            className="underline text-primary-20 hover:text-primary-10"
+          >
+            {t(translations.unclaimedVestings.cta)}
+          </Link>
+        </Paragraph>
+      </div>
+    );
+  }
+
+  return null;
+};

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/components/UnlockSchedule/UnlockSchedule.tsx

@@ -1,13 +1,15 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { Button, ButtonStyle, ButtonType } from '@sovryn/ui';
 
 import { VestingContractTableRecord } from '../../Vesting.types';
 import { vestingTypeToTitleMapping } from '../../Vestings.utils';
+import { useVestingContext } from '../../context/VestingContext';
 import { useGetUnlockSchedule } from '../../hooks/useGetUnlockSchedule';
 import { UnlockScheduleDialog } from '../UnlockScheduleDialog/UnlockScheduleDialog';
 
 export const UnlockSchedule = (item: VestingContractTableRecord) => {
+  const update = useVestingContext().update;
   const unlockSchedule = useGetUnlockSchedule(item);
 
   const [showDialog, setShowDialog] = useState(false);
@@ -17,6 +19,10 @@ export const UnlockSchedule = (item: VestingContractTableRecord) => {
     [item.type],
   );
 
+  useEffect(() => {
+    update(state => (state.item = item));
+  }, [item, update]);
+
   return (
     <>
       <Button

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/components/WithdrawButton/WithdrawButton.tsx

@@ -5,15 +5,25 @@ import { t } from 'i18next';
 import { Button, ButtonType, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
+import { VestingContractType } from '../../../../../../../utils/graphql/rsk/generated';
 import { VestingContractTableRecord } from '../../Vesting.types';
+import { useVestingContext } from '../../context/VestingContext';
 import { useGetUnlockedBalance } from '../../hooks/useGetUnlockedBalance';
 import { useHandleWithdraw } from '../../hooks/useHandleWithdraw';
+import { LOCK_CLAIM_COUNT } from '../UnclaimedVestingAlert/UnclaimedVestingAlert.constants';
 
 export const WithdrawButton = (item: VestingContractTableRecord) => {
+  const { count } = useVestingContext();
   const handleWithdraw = useHandleWithdraw(item);
 
   const { isLoading, result } = useGetUnlockedBalance(item);
-  const isDisabled = useMemo(() => !result || result === 0, [result]);
+  const isDisabled = useMemo(
+    () =>
+      !result ||
+      result === 0 ||
+      (count >= LOCK_CLAIM_COUNT && item.type === VestingContractType.Rewards),
+    [count, item.type, result],
+  );
 
   return (
     <div className="flex justify-end w-full md:w-auto h-full pt-3">

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/context/VestingContext.tsx

@@ -0,0 +1,59 @@
+import React, {
+  useContext,
+  createContext,
+  useState,
+  useCallback,
+  FC,
+  PropsWithChildren,
+} from 'react';
+
+import { produce } from 'immer';
+
+import { VestingContractTableRecord } from '../Vesting.types';
+
+export type State = {
+  count: number;
+  item?: VestingContractTableRecord;
+};
+
+type Update = (state: State) => void;
+
+type Actions = {
+  update: (handler: Update) => void;
+};
+
+const defaultValue: State & Actions = {
+  count: 0,
+  item: undefined,
+  update: () => {},
+};
+
+const VestingContext = createContext<State & Actions>(defaultValue);
+
+export function useVestingContext() {
+  const context = useContext(VestingContext);
+  if (context === undefined) {
+    throw new Error(
+      'useVestingContext must be used within a VestingContextProvider',
+    );
+  }
+  return context;
+}
+
+export const VestingContextProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [state, setState] = useState<State>({
+    count: 0,
+    item: undefined,
+  });
+
+  const handleOnChange = useCallback(
+    (handler: (value: State) => void) => setState(produce(handler)),
+    [],
+  );
+
+  return (
+    <VestingContext.Provider value={{ ...state, update: handleOnChange }}>
+      {children}
+    </VestingContext.Provider>
+  );
+};

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import dayjs from 'dayjs';
 
@@ -8,12 +8,14 @@ import {
   VestingContractTableRecord,
   VestingHistoryItem,
 } from '../Vesting.types';
+import { useVestingContext } from '../context/VestingContext';
 
 const MAXIMUM_UNLOCKED_DATES = 2;
 
 export const useGetUnlockSchedule = (
   item: VestingContractTableRecord,
 ): VestingHistoryItem[] | undefined => {
+  const update = useVestingContext().update;
   const { data } = useGetVestingHistoryQuery({
     variables: { vestingAddress: item.address },
     client: rskClient,
@@ -49,11 +51,20 @@ export const useGetUnlockSchedule = (
     const pastDatesLength = unlockDates?.filter(item => item.isUnlocked).length;
 
     if (!pastDatesLength || pastDatesLength < MAXIMUM_UNLOCKED_DATES) {
-      return unlockDates;
+      return { unlockDates, pastDatesLength };
     }
 
-    return unlockDates.slice(pastDatesLength - MAXIMUM_UNLOCKED_DATES);
+    return {
+      unlockDates: unlockDates.slice(pastDatesLength - MAXIMUM_UNLOCKED_DATES),
+      pastDatesLength,
+    };
   }, [data?.vestingContracts]);
 
-  return result;
+  useEffect(() => {
+    update(state => {
+      state.count = result?.pastDatesLength || 0;
+    });
+  }, [result?.pastDatesLength, update]);
+
+  return result?.unlockDates;
 };