Add indicator for pending proposal

src/components/Proposals/ProposalsList.tsx

@@ -18,8 +18,7 @@ export function ProposalsList({ proposals }: { proposals: FractalProposal[] }) {
   } = useFractal();
   const { canUserCreateProposal } = useCanUserCreateProposal();
   const { addressPrefix } = useNetworkConfig();
-
-  const { t } = useTranslation('proposal');
+  const { t } = useTranslation(['proposal']);
   return (
     <Flex
       flexDirection="column"
@@ -44,12 +43,7 @@ export function ProposalsList({ proposals }: { proposals: FractalProposal[] }) {
         <EmptyBox emptyText={t('emptyProposals')}>
           {canUserCreateProposal && daoAddress && (
             <Link to={DAO_ROUTES.proposalNew.relative(addressPrefix, daoAddress)}>
-              <Button
-                variant="text"
-                textStyle="text-xl-mono-bold"
-              >
-                {t('createProposal')}
-              </Button>
+              <Button variant="text">{t('createProposal')}</Button>
             </Link>
           )}
         </EmptyBox>

src/hooks/DAO/loaders/governance/useAzoriusListeners.ts

@@ -37,7 +37,7 @@ const proposalCreatedEventListener = (
   decode: (value: string, to: string, data?: string | undefined) => Promise<DecodedTransaction[]>,
   dispatch: Dispatch<FractalActions>,
 ): TypedListener<ProposalCreatedEvent> => {
-  return async (_strategyAddress, proposalId, proposer, transactions, metadata) => {
+  return async (_strategyAddress, proposalId, proposer, transactions, metadata, createdEvent) => {
     if (!metadata) {
       return;
     }
@@ -68,6 +68,7 @@ const proposalCreatedEventListener = (
     };
 
     const proposal = await mapProposalCreatedEventToProposal(
+      createdEvent,
       erc20StrategyContract,
       erc721StrategyContract,
       strategyType,

src/hooks/DAO/loaders/governance/useAzoriusProposals.ts

@@ -161,6 +161,8 @@ export const useAzoriusProposals = () => {
         payload: true,
       });
 
+      // TODO: `SET_LOADING_PROPOSALS` seems like the kind of action to be called once all proposals are finished loading.
+      // So, it's strange that this function takes a single proposals as an argument.
       const completeProposalLoad = (proposal: AzoriusProposal) => {
         if (currentAzoriusAddress.current !== azoriusContractAddress) {
           // The DAO has changed, don't load the just-fetched proposal,
@@ -232,6 +234,7 @@ export const useAzoriusProposals = () => {
         }
 
         const proposal = await mapProposalCreatedEventToProposal(
+          proposalCreatedEvent,
           _erc20StrategyContract,
           _erc721StrategyContract,
           _strategyType,

src/hooks/DAO/proposal/useSubmitProposal.ts

@@ -10,6 +10,7 @@ import { ADDRESS_MULTISIG_METADATA } from '../../../constants/common';
 import { buildSafeAPIPost, encodeMultiSend } from '../../../helpers';
 import { logError } from '../../../helpers/errorLogging';
 import { useFractal } from '../../../providers/App/AppProvider';
+import { FractalGovernanceAction } from '../../../providers/App/governance/action';
 import useIPFSClient from '../../../providers/App/hooks/useIPFSClient';
 import { useSafeAPI } from '../../../providers/App/hooks/useSafeAPI';
 import { useEthersProvider } from '../../../providers/Ethers/hooks/useEthersProvider';
@@ -70,6 +71,7 @@ export default function useSubmitProposal() {
     node: { safe, fractalModules },
     guardContracts: { freezeVotingContractAddress },
     governanceContracts: { ozLinearVotingContractAddress, erc721LinearVotingContractAddress },
+    action,
   } = useFractal();
   const baseContracts = useSafeContracts();
   const safeAPI = useSafeAPI();
@@ -91,6 +93,16 @@ export default function useSubmitProposal() {
   const { chain, safeBaseURL, addressPrefix } = useNetworkConfig();
   const ipfsClient = useIPFSClient();
 
+  const pendingProposalAdd = useCallback(
+    (txHash: string) => {
+      action.dispatch({
+        type: FractalGovernanceAction.PENDING_PROPOSAL_ADD,
+        payload: txHash,
+      });
+    },
+    [action],
+  );
+
   const submitMultisigProposal = useCallback(
     async ({
       pendingToastMessage,
@@ -173,7 +185,7 @@ export default function useSubmitProposal() {
         }
 
         const safeContract = GnosisSafeL2__factory.connect(safeAddress, signerOrProvider);
-        await axios.post(
+        const response = await axios.post(
           buildSafeApiUrl(safeBaseURL, `/safes/${safeAddress}/multisig-transactions/`),
           await buildSafeAPIPost(
             safeContract,
@@ -188,8 +200,13 @@ export default function useSubmitProposal() {
             },
           ),
         );
-        await new Promise(resolve => setTimeout(resolve, 1000));
+
+        const responseData = JSON.parse(response.config.data);
+        const txHash = responseData.contractTransactionHash;
+        pendingProposalAdd(txHash);
+
         await loadDAOProposals();
+
         if (successCallback) {
           successCallback(addressPrefix, safeAddress);
         }
@@ -204,12 +221,13 @@ export default function useSubmitProposal() {
       }
     },
     [
+      baseContracts,
       signerOrProvider,
       safeBaseURL,
-      chain,
+      chain.id,
       loadDAOProposals,
+      pendingProposalAdd,
       ipfsClient,
-      baseContracts,
       addressPrefix,
     ],
   );
@@ -246,7 +264,7 @@ export default function useSubmitProposal() {
         }));
 
         // @todo: Implement voting strategy proposal selection when/if we will support multiple strategies on single Azorius instance
-        await (
+        const receipt = await (
           await azoriusContract.submitProposal(
             votingStrategyAddress,
             '0x',
@@ -260,6 +278,9 @@ export default function useSubmitProposal() {
         ).wait();
         toast.dismiss(toastId);
         toast(successToastMessage);
+
+        pendingProposalAdd(receipt.transactionHash);
+
         if (successCallback) {
           successCallback(addressPrefix, safeAddress!);
         }
@@ -271,7 +292,7 @@ export default function useSubmitProposal() {
         setPendingCreateTx(false);
       }
     },
-    [provider, addressPrefix],
+    [provider, pendingProposalAdd, addressPrefix],
   );
 
   const submitProposal: SubmitProposalFunction = useCallback(

src/hooks/utils/useSafeTransactions.ts

@@ -307,7 +307,10 @@ export const useSafeTransactions = () => {
                 : undefined,
             proposalId: eventSafeTxHash,
             targets,
-            transactionHash: multiSigTransaction.transactionHash,
+            // @todo typing for `multiSigTransaction.transactionHash` is misleading, as ` multiSigTransaction.transactionHash` is not always defined (if ever). Need to tighten up the typing here.
+            transactionHash:
+              multiSigTransaction.transactionHash ||
+              (transaction as SafeMultisigTransactionWithTransfersResponse).safeTxHash,
             data: data,
             state: null,
             nonce: eventNonce,

src/i18n/locales/en/proposal.json

@@ -136,5 +136,6 @@
   "shielded": "Shielded",
   "shutterPrivacy": "Shielded",
   "shutterVotesHidden": "Results hidden during voting",
-  "totalVotes": "Total votes"
+  "totalVotes": "Total votes",
+  "pendingProposalNotice": "Pending proposal still processing"
 }

src/pages/DAOController.tsx

@@ -1,17 +1,45 @@
 import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Outlet } from 'react-router-dom';
+import { toast } from 'react-toastify';
 import useDAOController from '../hooks/DAO/useDAOController';
 import { useUpdateSafeData } from '../hooks/utils/useUpdateSafeData';
 import { useFractal } from '../providers/App/AppProvider';
 import LoadingProblem from './LoadingProblem';
 
+const useTemporaryProposals = () => {
+  const {
+    governance: { pendingProposals },
+  } = useFractal();
+  const { t } = useTranslation(['proposal']);
+
+  useEffect(() => {
+    if (pendingProposals === null || pendingProposals.length === 0) {
+      return;
+    }
+
+    const toastId = toast.info(t('pendingProposalNotice'), {
+      autoClose: false,
+      closeOnClick: false,
+      draggable: false,
+      closeButton: false,
+    });
+
+    return () => {
+      toast.dismiss(toastId);
+    };
+  }, [t, pendingProposals]);
+};
+
 export default function DAOController() {
   const { errorLoading, wrongNetwork, invalidQuery } = useDAOController();
   useUpdateSafeData();
   const {
     node: { daoName },
   } = useFractal();
 
+  useTemporaryProposals();
+
   useEffect(() => {
     if (daoName) {
       document.title = `${import.meta.env.VITE_APP_NAME} | ${daoName}`;

src/providers/App/governance/action.ts

@@ -35,6 +35,7 @@ export enum FractalGovernanceAction {
   SET_CLAIMING_CONTRACT = 'SET_CLAIMING_CONTRACT',
   RESET_TOKEN_ACCOUNT_DATA = 'RESET_TOKEN_ACCOUNT_DATA',
   SET_UNDERLYING_TOKEN_DATA = 'SET_UNDERLYING_TOKEN_DATA',
+  PENDING_PROPOSAL_ADD = 'PENDING_PROPOSAL_ADD',
 }
 
 export enum DecentGovernanceAction {
@@ -119,6 +120,10 @@ export type FractalGovernanceActions =
   | {
       type: FractalGovernanceAction.RESET_TOKEN_ACCOUNT_DATA;
     }
+  | {
+      type: FractalGovernanceAction.PENDING_PROPOSAL_ADD;
+      payload: string;
+    }
   | DecentGovernanceActions;
 
 export type DecentGovernanceActions =

src/providers/App/governance/reducer.ts

@@ -17,6 +17,7 @@ export const initialGovernanceState: FractalGovernance = {
   loadingProposals: true,
   allProposalsLoaded: false,
   proposals: null,
+  pendingProposals: null,
   proposalTemplates: null,
   type: undefined,
   votingStrategy: undefined,
@@ -30,6 +31,17 @@ export const initialVotesTokenAccountData = {
   isDelegatesSet: null,
 };
 
+const createPendingProposals = (
+  pendingProposals: string[] | null,
+  proposalIds: string[],
+): string[] | null => {
+  if (pendingProposals === null || proposalIds.length === 0) {
+    return null;
+  }
+
+  return pendingProposals.filter(p => !proposalIds.includes(p));
+};
+
 export const governanceReducer = (state: FractalGovernance, action: FractalGovernanceActions) => {
   const { proposals } = state;
   switch (action.type) {
@@ -43,17 +55,30 @@ export const governanceReducer = (state: FractalGovernance, action: FractalGover
       return {
         ...state,
         proposals: [
+          // dev: what this does, is takes an array of proposals. the payload should, in practice,
+          // never be Snapshot Proposals objects.
+          // Then we create a new proposals list, by appending the payload to what already exists,
+          // while at the same time filtering out all of the non-Snapshot proposals from
+          // the existing list. This "refrehes" the non Snapshot propsoals while leaving Snapshot
+          // proposals alone.
           ...action.payload,
           ...(proposals || []).filter(
             proposal => !!(proposal as SnapshotProposal).snapshotProposalId,
           ),
         ],
+        pendingProposals: createPendingProposals(
+          state.pendingProposals,
+          action.payload.map(p => p.transactionHash),
+        ),
       };
     }
     case FractalGovernanceAction.SET_AZORIUS_PROPOSAL: {
       return {
         ...state,
         proposals: [...(proposals || []), action.payload],
+        pendingProposals: createPendingProposals(state.pendingProposals, [
+          action.payload.transactionHash,
+        ]),
       };
     }
     case FractalGovernanceAction.SET_PROPOSAL_TEMPLATES: {
@@ -66,7 +91,16 @@ export const governanceReducer = (state: FractalGovernance, action: FractalGover
       };
     }
     case FractalGovernanceAction.SET_SNAPSHOT_PROPOSALS:
-      return { ...state, proposals: [...(proposals || []), ...action.payload] };
+      // TODO: what happens if this is called after some azorius or multisig proposals have already loaded in?
+      // I would expect that we lose them. Worth some investigation into when this action is called.
+      return {
+        ...state,
+        proposals: [...(proposals || []), ...action.payload],
+        pendingProposals: createPendingProposals(
+          state.pendingProposals,
+          action.payload.map(p => p.transactionHash),
+        ),
+      };
     case FractalGovernanceAction.UPDATE_PROPOSALS_NEW:
       return {
         ...state,
@@ -77,6 +111,9 @@ export const governanceReducer = (state: FractalGovernance, action: FractalGover
           (proposal, index, array) =>
             index === array.findIndex(p => p.proposalId === proposal.proposalId),
         ),
+        pendingProposals: createPendingProposals(state.pendingProposals, [
+          action.payload.transactionHash,
+        ]),
       };
     case FractalGovernanceAction.UPDATE_NEW_AZORIUS_ERC20_VOTE: {
       const { proposalId, voter, support, votesSummary, weight } = action.payload;
@@ -172,6 +209,9 @@ export const governanceReducer = (state: FractalGovernance, action: FractalGover
       const { votesToken } = state as AzoriusGovernance;
       return { ...state, votesToken: { ...votesToken, ...initialVotesTokenAccountData } };
     }
+    case FractalGovernanceAction.PENDING_PROPOSAL_ADD: {
+      return { ...state, pendingProposals: [action.payload, ...(state.pendingProposals || [])] };
+    }
     // Decent Governance only
     case DecentGovernanceAction.SET_LOCKED_TOKEN_ACCOUNT_DATA: {
       const { lockedVotesToken } = state as DecentGovernance;

src/types/fractal.ts

@@ -155,7 +155,7 @@ export interface ActivityBase {
   eventDate: Date;
   eventType: ActivityEventType;
   transaction?: ActivityTransactionType;
-  transactionHash?: string | null;
+  transactionHash: string;
 }
 
 export type Activity = TreasuryActivity | MultisigProposal | AzoriusProposal | SnapshotProposal;
@@ -306,6 +306,7 @@ export interface Governance {
   loadingProposals: boolean;
   allProposalsLoaded: boolean;
   proposals: FractalProposal[] | null;
+  pendingProposals: string[] | null;
   proposalTemplates?: ProposalTemplate[] | null;
   tokenClaimContract?: ERC20Claim;
 }

src/utils/azorius.ts

@@ -3,7 +3,10 @@ import {
   LinearERC20Voting,
   LinearERC721Voting,
 } from '@fractal-framework/fractal-contracts';
-import { ProposalExecutedEvent } from '@fractal-framework/fractal-contracts/dist/typechain-types/contracts/azorius/Azorius';
+import {
+  ProposalCreatedEvent,
+  ProposalExecutedEvent,
+} from '@fractal-framework/fractal-contracts/dist/typechain-types/contracts/azorius/Azorius';
 import { VotedEvent as ERC20VotedEvent } from '@fractal-framework/fractal-contracts/dist/typechain-types/contracts/azorius/LinearERC20Voting';
 import { VotedEvent as ERC721VotedEvent } from '@fractal-framework/fractal-contracts/dist/typechain-types/contracts/azorius/LinearERC721Voting';
 import { SafeMultisigTransactionWithTransfersResponse } from '@safe-global/safe-service-client';
@@ -149,6 +152,7 @@ const getProposalVotes = (
 };
 
 export const mapProposalCreatedEventToProposal = async (
+  createdEvent: ProposalCreatedEvent,
   erc20StrategyContract: LinearERC20Voting | undefined,
   erc721StrategyContract: LinearERC721Voting | undefined,
   strategyType: VotingStrategyType,
@@ -217,7 +221,14 @@ export const mapProposalCreatedEventToProposal = async (
     const executedEvent = (await executedEvents)?.find(
       event => BigInt(event.args[0]) === proposalId,
     );
-    transactionHash = executedEvent?.transactionHash;
+
+    if (!executedEvent) {
+      throw new Error('Proposal state is EXECUTED, but no event found');
+    }
+
+    transactionHash = executedEvent.transactionHash;
+  } else {
+    transactionHash = createdEvent.transactionHash;
   }
 
   const proposal: AzoriusProposal = {