Merge branch 'feature/oct-846-proposal-skeletons-when-ipfs-down' into…

… 'master'

OCT-846 Implement skeletons to handle IPFS fetching error

See merge request golemfoundation/governance/octant!930

client/src/api/errorMessages/index.ts

@@ -7,7 +7,11 @@ import triggerToast from 'utils/triggerToast';
 
 import { QueryMutationError, QueryMutationErrorConfig, IgnoredQueries } from './types';
 
-const IGNORED_QUERIES: IgnoredQueries = [ROOTS.cryptoValues, QUERY_KEYS.glmClaimCheck[0]];
+const IGNORED_QUERIES: IgnoredQueries = [
+  ROOTS.cryptoValues,
+  ROOTS.proposalsIpfsResults,
+  QUERY_KEYS.glmClaimCheck[0],
+];
 
 const errors: QueryMutationErrorConfig = {
   4001: {

client/src/api/errorMessages/types.ts

@@ -10,4 +10,8 @@ export type QueryMutationErrorConfig = {
   [key: string]: QueryMutationError;
 };
 
-export type IgnoredQueries = [Root['cryptoValues'], QueryKeys['glmClaimCheck'][0]];
+export type IgnoredQueries = [
+  Root['cryptoValues'],
+  Root['proposalsIpfsResults'],
+  QueryKeys['glmClaimCheck'][0],
+];

client/src/components/dedicated/AllocationItem/AllocationItem.tsx

@@ -6,7 +6,6 @@ import BoxRounded from 'components/core/BoxRounded/BoxRounded';
 import Img from 'components/core/Img/Img';
 import Svg from 'components/core/Svg/Svg';
 import AllocationItemSkeleton from 'components/dedicated/AllocationItem/AllocationItemSkeleton/AllocationItemSkeleton';
-import ProposalLoadingStates from 'components/dedicated/ProposalLoadingStates/ProposalLoadingStates';
 import env from 'env';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
 import useProposalRewardsThreshold from 'hooks/queries/useProposalRewardsThreshold';
@@ -53,12 +52,7 @@ const AllocationItem: FC<AllocationItemProps> = ({
       className={cx(styles.root, className)}
       onClick={isConnected && !isDisabled ? () => onSelectItem(address) : undefined}
     >
-      {(isLoading || isLoadingError) && (
-        <ProposalLoadingStates isLoading={isLoading} isLoadingError={isLoadingError}>
-          <AllocationItemSkeleton />
-        </ProposalLoadingStates>
-      )}
-
+      {(isLoading || isLoadingError) && <AllocationItemSkeleton />}
       {!isLoading && !isLoadingError && (
         <Fragment>
           {(isAllocatedTo || isManuallyEdited) && (

client/src/components/dedicated/History/HistoryItemDetails/HistoryItemDateAndTime/utils.ts

@@ -1,5 +1,6 @@
 import format from 'date-fns/format';
 
 export function getHistoryItemDateAndTime(timestamp: string): string {
-  return format(parseInt(timestamp, 10) / 1000, 'h:mmaaa, dd MMM yyyy');
+  // Timestamp from subgraph is in microseconds, needs to be changed to milliseconds.
+  return format(Math.floor(parseInt(timestamp, 10) / 1000), 'h:mmaaa, dd MMM yyyy');
 }

client/src/components/dedicated/ProposalsList/ProposalsListItem/ProposalsListItem.tsx

@@ -5,7 +5,6 @@ import { useNavigate } from 'react-router-dom';
 import Description from 'components/core/Description/Description';
 import Img from 'components/core/Img/Img';
 import ButtonAddToAllocate from 'components/dedicated/ButtonAddToAllocate/ButtonAddToAllocate';
-import ProposalLoadingStates from 'components/dedicated/ProposalLoadingStates/ProposalLoadingStates';
 import ProposalRewards from 'components/dedicated/ProposalRewards/ProposalRewards';
 import ProposalItemSkeleton from 'components/dedicated/ProposalsList/ProposalsListItemSkeleton/ProposalsListItemSkeleton';
 import env from 'env';
@@ -66,9 +65,7 @@ const ProposalsListItem: FC<ProposalsListItemProps> = ({
       }
     >
       {isLoadingError ? (
-        <ProposalLoadingStates isLoadingError={isLoadingError}>
-          <ProposalItemSkeleton />
-        </ProposalLoadingStates>
+        <ProposalItemSkeleton />
       ) : (
         <Fragment>
           <div className={styles.header}>

client/src/hooks/queries/useProposalsIpfs.ts

@@ -1,9 +1,12 @@
 import { useQueries, UseQueryResult } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { apiGetProposal } from 'api/calls/proposals';
 import { QUERY_KEYS } from 'api/queryKeys';
 import { ExtendedProposal } from 'types/extended-proposal';
 import { BackendProposal } from 'types/gen/backendproposal';
+import triggerToast from 'utils/triggerToast';
 
 import useProposalsCid from './useProposalsCid';
 import useProposalsContract from './useProposalsContract';
@@ -13,6 +16,7 @@ export default function useProposalsIpfs(proposalsAddresses?: string[]): {
   isFetching: boolean;
   refetch: () => void;
 } {
+  const { t } = useTranslation('translation', { keyPrefix: 'api.errorMessage' });
   const { data: proposalsCid, isFetching: isFetchingProposalsCid } = useProposalsCid();
   const { refetch } = useProposalsContract();
 
@@ -21,9 +25,21 @@ export default function useProposalsIpfs(proposalsAddresses?: string[]): {
       enabled: !!address && !!proposalsCid,
       queryFn: () => apiGetProposal(`${proposalsCid}/${address}`),
       queryKey: QUERY_KEYS.proposalsIpfsResults(address),
+      retry: false,
     })),
   });
 
+  const isAnyError = proposalsIpfsResults.some(element => element.isError);
+  useEffect(() => {
+    if (!isAnyError) {
+      return;
+    }
+    triggerToast({
+      message: t('ipfs.message'),
+      type: 'error',
+    });
+  }, [isAnyError, t]);
+
   const isProposalsIpfsResultsFetching =
     isFetchingProposalsCid ||
     proposalsIpfsResults.length === 0 ||

client/src/locales/en/translation.json

@@ -17,6 +17,9 @@
       "default": {
         "title": "Sorry, something went wrong there",
         "message": "Please reload the app and try again"
+      },
+      "ipfs": {
+        "message": "We seem to be having trouble loading data from IPFS, please hang on or try reloading"
       }
     }
   },
@@ -216,9 +219,6 @@
       "modalWithdrawEth": {
         "withdrawETH": "Withdraw ETH"
       },
-      "proposalLoadingStates": {
-        "text": "Loading of a proposal <br/> encountered an error."
-      },
       "proposalRewards": {
         "epoch": "Epoch {{epoch}}",
         "currentTotal": "Current total",