SOV-2913: vesting delegate history

.changeset/pretty-starfishes-collect.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-2913: vesting delegate history

apps/frontend/src/app/3_organisms/StakingHistoryFrame/StakingHistoryFrame.constants.ts

@@ -20,4 +20,8 @@ export const stakingHistoryOptions = [
     value: StakingHistoryType.delegate,
     label: t(translations.stakingHistory.delegate),
   },
+  {
+    value: StakingHistoryType.delegateVesting,
+    label: t(translations.stakingHistory.delegateVesting),
+  },
 ];

apps/frontend/src/app/3_organisms/StakingHistoryFrame/StakingHistoryFrame.tsx

@@ -5,6 +5,7 @@ import { StakingDelegateChanges } from './components/StakingDelegateChanges/Stak
 import { StakingExtendedDuration } from './components/StakingExtendedDuration/StakingExtendedDuration';
 import { StakingHistory } from './components/StakingHistory/StakingHistory';
 import { StakingWithdraws } from './components/StakingWithdraws/StakingWithdraws';
+import { VestingDelegateChanges } from './components/VestingDelegateChanges/VestingDelegateChanges';
 
 export const StakingHistoryFrame: FC = () => {
   const [selectedHistoryType, setSelectedHistoryType] = useState(
@@ -40,6 +41,12 @@ export const StakingHistoryFrame: FC = () => {
           onChangeHistoryType={onChangeHistoryType}
         />
       )}
+      {selectedHistoryType === StakingHistoryType.delegateVesting && (
+        <VestingDelegateChanges
+          selectedHistoryType={selectedHistoryType}
+          onChangeHistoryType={onChangeHistoryType}
+        />
+      )}
     </div>
   );
 };

apps/frontend/src/app/3_organisms/StakingHistoryFrame/StakingHistoryFrame.type.ts

@@ -3,6 +3,7 @@ export enum StakingHistoryType {
   unstake = 'unstake',
   extend = 'extend',
   delegate = 'delegate',
+  delegateVesting = 'delegateVesting',
 }
 
 export type StakingHistoryProps = {

apps/frontend/src/app/3_organisms/StakingHistoryFrame/components/VestingDelegateChanges/VestingDelegateChanges.constants.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { t } from 'i18next';
+
+import { TransactionIdRenderer } from '../../../../2_molecules/TransactionIdRenderer/TransactionIdRenderer';
+import { TxIdWithNotification } from '../../../../2_molecules/TxIdWithNotification/TransactionIdWithNotification';
+import { translations } from '../../../../../locales/i18n';
+import { dateFormat, getRskExplorerUrl } from '../../../../../utils/helpers';
+import { VestingDelegateChangeItem } from './VestingDelegateChanges.types';
+
+const rskExplorerUrl = getRskExplorerUrl();
+
+export const COLUMNS_CONFIG = [
+  {
+    id: 'timestamp',
+    title: t(translations.common.tables.columnTitles.timestamp),
+    cellRenderer: (tx: VestingDelegateChangeItem) => dateFormat(tx.timestamp),
+    sortable: true,
+  },
+  {
+    id: 'transactionType',
+    title: t(translations.common.tables.columnTitles.transactionType),
+    cellRenderer: () => t(translations.stakingHistory.delegate),
+  },
+  {
+    id: 'delegate',
+    title: t(translations.stakingHistory.newDelegate),
+    cellRenderer: (tx: VestingDelegateChangeItem) => (
+      <TxIdWithNotification
+        href={`${rskExplorerUrl}/address/${tx.delegatee?.id}`}
+        value={tx.delegatee?.id}
+      />
+    ),
+  },
+  {
+    id: 'txId',
+    title: t(translations.common.tables.columnTitles.transactionID),
+    cellRenderer: (item: VestingDelegateChangeItem) => (
+      <TransactionIdRenderer
+        hash={item.transaction.id}
+        dataAttribute="staking-delegate-history-tx-hash"
+      />
+    ),
+  },
+];

apps/frontend/src/app/3_organisms/StakingHistoryFrame/components/VestingDelegateChanges/VestingDelegateChanges.tsx

@@ -0,0 +1,172 @@
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+
+import { nanoid } from 'nanoid';
+import { useTranslation } from 'react-i18next';
+
+import {
+  ErrorBadge,
+  ErrorLevel,
+  NotificationType,
+  OrderDirection,
+  OrderOptions,
+  Pagination,
+  Select,
+  Table,
+} from '@sovryn/ui';
+
+import { ExportCSV } from '../../../../2_molecules/ExportCSV/ExportCSV';
+import {
+  DEFAULT_HISTORY_FRAME_PAGE_SIZE,
+  EXPORT_RECORD_LIMIT,
+} from '../../../../../constants/general';
+import { useNotificationContext } from '../../../../../contexts/NotificationContext';
+import { useAccount } from '../../../../../hooks/useAccount';
+import { useMaintenance } from '../../../../../hooks/useMaintenance';
+import { translations } from '../../../../../locales/i18n';
+import { rskClient } from '../../../../../utils/clients';
+import {
+  useGetDelegateChangesForVestingsLazyQuery,
+  VestingHistoryItem_OrderBy,
+} from '../../../../../utils/graphql/rsk/generated';
+import { dateFormat } from '../../../../../utils/helpers';
+import { stakingHistoryOptions } from '../../StakingHistoryFrame.constants';
+import { StakingHistoryProps } from '../../StakingHistoryFrame.type';
+import { COLUMNS_CONFIG } from './VestingDelegateChanges.constants';
+import { generateRowTitle } from './VestingDelegateChanges.utils';
+import { useGetStakingDelegateChanges } from './hooks/useGetStakingDelegateChanges';
+
+const pageSize = DEFAULT_HISTORY_FRAME_PAGE_SIZE;
+
+export const VestingDelegateChanges: FC<StakingHistoryProps> = ({
+  onChangeHistoryType,
+  selectedHistoryType,
+}) => {
+  const { t } = useTranslation();
+  const { account } = useAccount();
+  const { addNotification } = useNotificationContext();
+
+  const [page, setPage] = useState(0);
+
+  const { checkMaintenance, States } = useMaintenance();
+  const exportLocked = checkMaintenance(States.ZERO_EXPORT_CSV);
+
+  const [orderOptions, setOrderOptions] = useState<OrderOptions>({
+    orderBy: 'timestamp',
+    orderDirection: OrderDirection.Desc,
+  });
+
+  const { data, loading, ids } = useGetStakingDelegateChanges(
+    account,
+    pageSize,
+    page,
+    orderOptions,
+  );
+
+  const [getStakes] = useGetDelegateChangesForVestingsLazyQuery({
+    client: rskClient,
+  });
+
+  const onPageChange = useCallback(
+    (value: number) => {
+      if (data.length < pageSize && value > page) {
+        return;
+      }
+      setPage(value);
+    },
+    [page, data.length],
+  );
+
+  const isNextButtonDisabled = useMemo(
+    () => !loading && data?.length < pageSize,
+    [loading, data],
+  );
+
+  const exportData = useCallback(async () => {
+    const { data } = await getStakes({
+      variables: {
+        vestingContracts: ids,
+        skip: 0,
+        pageSize: EXPORT_RECORD_LIMIT,
+        orderBy: orderOptions.orderBy as VestingHistoryItem_OrderBy,
+        orderDirection: orderOptions.orderDirection,
+      },
+    });
+
+    let list = data?.vestingHistoryItems || [];
+
+    if (!list || !list.length) {
+      addNotification({
+        type: NotificationType.warning,
+        title: t(translations.common.tables.actions.noDataToExport),
+        content: '',
+        dismissible: true,
+        id: nanoid(),
+      });
+    }
+
+    return list.map(item => ({
+      timestamp: dateFormat(item.timestamp),
+      transactionType: t(translations.stakingHistory.delegate),
+      newDelegate: item.delegatee?.id,
+      TXID: item.transaction.id,
+    }));
+  }, [
+    getStakes,
+    ids,
+    orderOptions.orderBy,
+    orderOptions.orderDirection,
+    addNotification,
+    t,
+  ]);
+
+  useEffect(() => {
+    setPage(0);
+  }, [orderOptions]);
+
+  return (
+    <>
+      <div className="flex-row items-center gap-4 mb-7 flex justify-center lg:justify-start">
+        <Select
+          dataAttribute={`staking-history-${selectedHistoryType}`}
+          value={selectedHistoryType}
+          onChange={onChangeHistoryType}
+          options={stakingHistoryOptions}
+        />
+        <div className="flex-row items-center ml-2 gap-4 hidden lg:inline-flex">
+          <ExportCSV
+            getData={exportData}
+            filename="change-delegate"
+            disabled={!data || data.length === 0 || exportLocked}
+          />
+          {exportLocked && (
+            <ErrorBadge
+              level={ErrorLevel.Warning}
+              message={t(translations.maintenanceMode.featureDisabled)}
+            />
+          )}
+        </div>
+      </div>
+      <div className="bg-gray-80 py-4 px-4 rounded">
+        <Table
+          setOrderOptions={setOrderOptions}
+          orderOptions={orderOptions}
+          columns={COLUMNS_CONFIG}
+          rows={data}
+          rowTitle={generateRowTitle}
+          isLoading={loading}
+          className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
+          noData={t(translations.common.tables.noData)}
+          dataAttribute="staking-delegate-change-history-table"
+        />
+        <Pagination
+          page={page}
+          className="lg:pb-6 mt-3 lg:mt-6 justify-center lg:justify-start"
+          onChange={onPageChange}
+          itemsPerPage={pageSize}
+          isNextButtonDisabled={isNextButtonDisabled}
+          dataAttribute="staking-delegate-change-history-pagination"
+        />
+      </div>
+    </>
+  );
+};

apps/frontend/src/app/3_organisms/StakingHistoryFrame/components/VestingDelegateChanges/VestingDelegateChanges.types.ts

@@ -0,0 +1,11 @@
+export type VestingDelegateChangeItem = {
+  id: string;
+  timestamp: number;
+  delegatee: {
+    id: string;
+  };
+  transaction: {
+    id: string;
+  };
+  amount: string;
+};

apps/frontend/src/app/3_organisms/StakingHistoryFrame/components/VestingDelegateChanges/VestingDelegateChanges.utils.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { t } from 'i18next';
+
+import { Paragraph, ParagraphSize } from '@sovryn/ui';
+
+import { translations } from '../../../../../locales/i18n';
+import { dateFormat } from '../../../../../utils/helpers';
+import { VestingDelegateChangeItem } from './VestingDelegateChanges.types';
+
+export const generateRowTitle = (item: VestingDelegateChangeItem) => (
+  <Paragraph size={ParagraphSize.small} className="text-left">
+    {t(translations.stakingHistory.delegate)}
+    {' - '}
+    {dateFormat(item.timestamp)}
+  </Paragraph>
+);

apps/frontend/src/app/3_organisms/StakingHistoryFrame/components/VestingDelegateChanges/hooks/useGetStakingDelegateChanges.ts

@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+
+import { OrderOptions } from '@sovryn/ui';
+
+import { rskClient } from '../../../../../../utils/clients';
+import {
+  VestingHistoryItem_OrderBy,
+  useGetDelegateChangesForVestingsQuery,
+  useGetUserVestingContractsQuery,
+} from '../../../../../../utils/graphql/rsk/generated';
+import { VestingDelegateChangeItem } from '../VestingDelegateChanges.types';
+
+export const useGetStakingDelegateChanges = (
+  account: string,
+  pageSize: number,
+  page: number,
+  orderOptions: OrderOptions,
+) => {
+  const { data: vestings, loading: loadingVestings } =
+    useGetUserVestingContractsQuery({
+      variables: {
+        userAddress: account.toLowerCase(),
+      },
+      client: rskClient,
+    });
+
+  const config = useMemo(
+    () => ({
+      vestingContracts: (vestings?.vestingContracts ?? []).map(v => v.id),
+      skip: page * pageSize,
+      pageSize,
+      orderBy: orderOptions.orderBy as VestingHistoryItem_OrderBy,
+      orderDirection: orderOptions.orderDirection,
+    }),
+    [
+      orderOptions.orderBy,
+      orderOptions.orderDirection,
+      page,
+      pageSize,
+      vestings?.vestingContracts,
+    ],
+  );
+
+  const { loading, data } = useGetDelegateChangesForVestingsQuery({
+    variables: config,
+    client: rskClient,
+  });
+
+  const list = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+
+    return data.vestingHistoryItems;
+  }, [data]);
+
+  return {
+    loading: loading && loadingVestings,
+    data: list as VestingDelegateChangeItem[],
+    ids: (vestings?.vestingContracts ?? []).map(v => v.id),
+  };
+};

apps/frontend/src/locales/en/translations.json

@@ -990,6 +990,7 @@
         "unstake": "Unstake",
         "extend": "Extend staking duration",
         "delegate": "Change delegate",
+        "delegateVesting": "Vesting delegate changes",
         "newDelegate": "New delegate",
         "newDate": "New date",
         "previousDate": "Previous date",