2218 BugFix: Queued Transactions not showing up

src/components/Activity/ActivityDescription.tsx

@@ -3,7 +3,6 @@ import { useGetMetadata } from '../../hooks/DAO/proposal/useGetMetadata';
 import { Activity, FractalProposal, SnapshotProposal } from '../../types';
 import Markdown from '../ui/proposal/Markdown';
 import { ProposalTitle } from './ActivityDescriptionGovernance';
-import { ActivityDescriptionTreasury } from './ActivityDescriptionTreasury';
 
 interface IActivityDescription {
   activity: Activity;
@@ -44,9 +43,6 @@ export function ActivityDescription({
           />
         </Box>
       )}
-      <Box mt={2}>
-        {!!activity.transaction && <ActivityDescriptionTreasury activity={activity} />}
-      </Box>
     </Box>
   );
 }

src/components/Activity/ActivityDescriptionGovernance.tsx

@@ -7,7 +7,6 @@ import {
   Activity,
   GovernanceActivity,
   MultisigProposal,
-  ActivityEventType,
   SnapshotProposal,
   FractalProposal,
   AzoriusProposal,
@@ -85,10 +84,6 @@ export function ProposalTitle({
 }) {
   const metaData = useGetMetadata(activity as FractalProposal);
 
-  if (activity.eventType !== ActivityEventType.Governance) {
-    return null;
-  }
-
   // Check if it's a SnapshotProposal and set variables accordingly
   const isSnapshotProposal = (activity as SnapshotProposal).snapshotProposalId !== undefined;
   const proposalIdText = isSnapshotProposal

src/components/Proposals/MultisigProposalDetails/TxActions.tsx

@@ -1,10 +1,9 @@
 import { Box, Button, Text, Flex, Tooltip } from '@chakra-ui/react';
 import { TypedDataSigner } from '@ethersproject/abstract-signer';
-import { SafeMultisigTransactionWithTransfersResponse } from '@safe-global/api-kit';
 import { Signer } from 'ethers';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Hex, getAddress, isHex } from 'viem';
+import { getAddress, isHex } from 'viem';
 import { Check } from '../../../assets/theme/custom/icons/Check';
 import { GnosisSafeL2__factory } from '../../../assets/typechain-types/usul/factories/@gnosis.pm/safe-contracts/contracts';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
@@ -51,28 +50,27 @@ export function TxActions({ proposal }: { proposal: MultisigProposal }) {
   const [contractCall, contractCallPending] = useTransaction();
   const { loadSafeMultisigProposals } = useSafeMultisigProposals();
   const baseContracts = useSafeContracts();
-  if (user.votingWeight === 0n) return <></>;
+  if (user.votingWeight === 0n) return null;
 
-  const multisigTx = proposal.transaction as SafeMultisigTransactionWithTransfersResponse;
-
-  if (!multisigTx) return null;
+  if (!proposal.transaction) return null;
 
   const signTransaction = async () => {
     if (
       !signerOrProvider ||
       !safe?.address ||
-      (multisigTx.data && !isHex(multisigTx.data)) ||
+      !proposal.transaction ||
+      !isHex(proposal.transaction.data) ||
       !safeAPI
     ) {
       return;
     }
     try {
       const safeTx = buildSafeTransaction({
-        ...multisigTx,
-        to: getAddress(multisigTx.to),
-        value: BigInt(multisigTx.value),
-        data: multisigTx.data as Hex | undefined,
-        operation: multisigTx.operation as 0 | 1,
+        ...proposal.transaction,
+        to: getAddress(proposal.transaction.to),
+        value: BigInt(proposal.transaction.value),
+        data: proposal.transaction.data,
+        operation: proposal.transaction.operation as 0 | 1,
       });
 
       asyncRequest({
@@ -98,22 +96,23 @@ export function TxActions({ proposal }: { proposal: MultisigProposal }) {
   const timelockTransaction = async () => {
     try {
       if (
-        !multisigTx.confirmations ||
+        !proposal.transaction ||
+        !proposal.transaction.confirmations ||
         !baseContracts ||
         !freezeGuardContractAddress ||
-        (multisigTx.data && !isHex(multisigTx.data))
+        !isHex(proposal.transaction.data)
       ) {
         return;
       }
       const safeTx = buildSafeTransaction({
-        ...multisigTx,
-        to: getAddress(multisigTx.to),
-        value: BigInt(multisigTx.value),
-        data: multisigTx.data as Hex | undefined,
-        operation: multisigTx.operation as 0 | 1,
+        ...proposal.transaction,
+        to: getAddress(proposal.transaction.to),
+        value: BigInt(proposal.transaction.value),
+        data: proposal.transaction.data,
+        operation: proposal.transaction.operation as 0 | 1,
       });
       const signatures = buildSignatureBytes(
-        multisigTx.confirmations.map(confirmation => {
+        proposal.transaction.confirmations.map(confirmation => {
           if (!isHex(confirmation.signature)) {
             throw new Error('Confirmation signature is malfunctioned');
           }
@@ -158,24 +157,25 @@ export function TxActions({ proposal }: { proposal: MultisigProposal }) {
     try {
       if (
         !signerOrProvider ||
+        !proposal.transaction ||
         !safe?.address ||
-        !multisigTx.confirmations ||
-        (multisigTx.data && !isHex(multisigTx.data))
+        !proposal.transaction.confirmations ||
+        !isHex(proposal.transaction.data)
       ) {
         return;
       }
       const safeContract = GnosisSafeL2__factory.connect(safe.address, signerOrProvider);
 
       const safeTx = buildSafeTransaction({
-        ...multisigTx,
-        to: getAddress(multisigTx.to),
-        value: BigInt(multisigTx.value),
-        data: multisigTx.data as Hex | undefined,
-        operation: multisigTx.operation as 0 | 1,
+        ...proposal.transaction,
+        to: getAddress(proposal.transaction.to),
+        value: BigInt(proposal.transaction.value),
+        data: proposal.transaction.data,
+        operation: proposal.transaction.operation as 0 | 1,
       });
 
       const signatures = buildSignatureBytes(
-        multisigTx.confirmations.map(confirmation => {
+        proposal.transaction.confirmations.map(confirmation => {
           if (!isHex(confirmation.signature)) {
             throw new Error('Confirmation signature is malfunctioned');
           }
@@ -257,7 +257,7 @@ export function TxActions({ proposal }: { proposal: MultisigProposal }) {
       pageTitle: 'executeTitle',
     },
   };
-  const isActiveNonce = !!safe && multisigTx.nonce === safe.nonce;
+  const isActiveNonce = !!safe && proposal.transaction.nonce === safe.nonce;
   const isButtonDisabled =
     isSubmitDisabled ||
     isPending ||

src/components/Proposals/ProposalCard/ProposalCard.tsx

@@ -5,12 +5,7 @@ import { Link } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../constants/routes';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import {
-  ActivityEventType,
-  AzoriusProposal,
-  FractalProposal,
-  SnapshotProposal,
-} from '../../../types';
+import { AzoriusProposal, FractalProposal, SnapshotProposal } from '../../../types';
 import { DEFAULT_DATE_FORMAT } from '../../../utils';
 import { ActivityDescription } from '../../Activity/ActivityDescription';
 import { Badge } from '../../ui/badges/Badge';
@@ -25,14 +20,6 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) {
   const { addressPrefix } = useNetworkConfig();
   const { t } = useTranslation('common');
 
-  const eventDateLabel = t(
-    proposal.eventType === ActivityEventType.Treasury
-      ? proposal.transaction?.to === daoAddress
-        ? 'received'
-        : 'sent'
-      : 'created',
-  );
-
   const isSnapshotProposal = !!(proposal as SnapshotProposal).snapshotProposalId;
   const isAzoriusProposal = !!(proposal as AzoriusProposal).votesSummary;
 
@@ -87,7 +74,7 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) {
               textStyle="helper-text-base"
               color="neutral-6"
             >
-              {eventDateLabel} {format(proposal.eventDate, DEFAULT_DATE_FORMAT)}
+              {t('created')} {format(proposal.eventDate, DEFAULT_DATE_FORMAT)}
             </Text>
           )}
         </Box>

src/components/pages/DAOTreasury/components/Transactions.tsx

@@ -4,14 +4,9 @@ import { useTranslation } from 'react-i18next';
 import { useDateTimeDisplay } from '../../../../helpers/dateTime';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
-import { TransferType } from '../../../../types';
+import { TokenEventType, TransferDisplayData, TransferType } from '../../../../types';
 import { DisplayAddress } from '../../../ui/links/DisplayAddress';
 import EtherscanLink from '../../../ui/links/EtherscanLink';
-import {
-  TokenEventType,
-  TransferDisplayData,
-  useFormatTransfers,
-} from '../hooks/useFormatTransfers';
 
 function TransferRow({ displayData }: { displayData: TransferDisplayData }) {
   const { t } = useTranslation(['treasury', 'common']);
@@ -116,24 +111,25 @@ function EmptyTransactions() {
 
 export function Transactions({ shownTransactions }: { shownTransactions: number }) {
   const {
-    treasury: { transfers },
+    treasury: { transfers, transfersLoaded },
   } = useFractal();
 
-  const displayData = useFormatTransfers();
-
-  if (!transfers || displayData.length === 0) return <EmptyTransactions />;
-
+  if (!transfers) {
+    return null;
+  }
+  if (transfers.length === 0 && transfersLoaded) return <EmptyTransactions />;
   return (
     <Box
       overflowX="auto"
       className="scroll-dark"
     >
-      {displayData.slice(0, shownTransactions - 1).map((transfer, i) => (
+      {transfers.slice(0, shownTransactions - 1).map((transfer, i) => (
         <TransferRow
           key={i}
           displayData={transfer}
         />
       ))}
+      {(transfers === null || !transfersLoaded) && <Box>{/* @todo add Wave Loader */}</Box>}
     </Box>
   );
 }