Fix: Do not needlessly show the Change Vote button

src/components/frame/Extensions/layouts/ColonyLayout.tsx

@@ -4,19 +4,20 @@
 
 import clsx from 'clsx';
 import { AnimatePresence } from 'framer-motion';
+//* Hide Initially */
+// import { defineMessages } from 'react-intl';
+// import { PaperPlaneTilt } from '@phosphor-icons/react';
 import React, {
   type FC,
   type PropsWithChildren,
   useCallback,
   useEffect,
 } from 'react';
-import { useLocation, useSearchParams } from 'react-router-dom';
-//* Hide Initially */
-// import { defineMessages } from 'react-intl';
-// import { PaperPlaneTilt } from '@phosphor-icons/react';
+import { useLocation } from 'react-router-dom';
 
 import { UserHubTab } from '~common/Extensions/UserHub/types.ts';
 import UserHubButton from '~common/Extensions/UserHubButton/index.ts';
+import { useActionContext } from '~context/ActionContext/ActionContext.ts';
 import { useActionSidebarContext } from '~context/ActionSidebarContext/ActionSidebarContext.ts';
 import { useAppContext } from '~context/AppContext/AppContext.ts';
 import { useColonyCreatedModalContext } from '~context/ColonyCreateModalContext/ColonyCreatedModalContext.ts';
@@ -26,7 +27,6 @@ import { useTablet } from '~hooks';
 import useLocationKeyChange from '~hooks/useLocationKeyChange.ts';
 import useLocationPathnameChange from '~hooks/useLocationPathnameChange.ts';
 import usePrevious from '~hooks/usePrevious.ts';
-import { TX_SEARCH_PARAM } from '~routes/index.ts';
 import { ACTION_TYPE_FIELD_NAME } from '~v5/common/ActionSidebar/consts.ts';
 import ActionSidebar from '~v5/common/ActionSidebar/index.ts';
 import ColonyCreatedModal from '~v5/common/Modals/ColonyCreatedModal/index.ts';
@@ -82,36 +82,40 @@ const ColonyLayout: FC<PropsWithChildren> = ({ children }) => {
 
   const { state: locationState } = useLocation();
   const hasRecentlyCreatedColony = locationState?.hasRecentlyCreatedColony;
-  const [searchParams] = useSearchParams();
-  const transactionId = searchParams?.get(TX_SEARCH_PARAM);
-  const previousTransactionId = usePrevious(transactionId);
+  const { transactionHash } = useActionContext();
+  const previousTransactionHash = usePrevious(transactionHash);
 
   const handleLocationPathnameChange = useCallback(() => {
-    if (!!previousTransactionId && !transactionId && isActionSidebarOpen) {
+    if (!!previousTransactionHash && !transactionHash && isActionSidebarOpen) {
       toggleActionSidebarOff();
     }
   }, [
-    previousTransactionId,
-    transactionId,
+    previousTransactionHash,
+    transactionHash,
     isActionSidebarOpen,
     toggleActionSidebarOff,
   ]);
 
   const handleLocationHistoryChange = useCallback(() => {
-    if (!transactionId && !actionType && isActionSidebarOpen) {
+    if (!transactionHash && !actionType && isActionSidebarOpen) {
       toggleActionSidebarOff();
     }
-  }, [transactionId, actionType, isActionSidebarOpen, toggleActionSidebarOff]);
+  }, [
+    transactionHash,
+    actionType,
+    isActionSidebarOpen,
+    toggleActionSidebarOff,
+  ]);
 
   useLocationPathnameChange(handleLocationPathnameChange);
 
   useLocationKeyChange(handleLocationHistoryChange);
 
   useEffect(() => {
-    if (transactionId) {
+    if (transactionHash) {
       toggleActionSidebarOn();
     }
-  }, [toggleActionSidebarOn, transactionId]);
+  }, [toggleActionSidebarOn, transactionHash]);
 
   useEffect(() => {
     if (hasRecentlyCreatedColony) {
@@ -189,10 +193,7 @@ const ColonyLayout: FC<PropsWithChildren> = ({ children }) => {
       </PageLayout>
       <AnimatePresence>
         {isActionSidebarOpen && (
-          <ActionSidebar
-            transactionId={transactionId || undefined}
-            className="modal-blur"
-          >
+          <ActionSidebar className="modal-blur">
             {isTablet ? getUserNavigation() : undefined}
           </ActionSidebar>
         )}

src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx

@@ -4,7 +4,7 @@ import FiltersContextProvider from '~common/ColonyActionsTable/FiltersContext/Fi
 import ColonyActionsTable from '~common/ColonyActionsTable/index.ts';
 import { useSetPageHeadingTitle } from '~context/PageHeadingContext/PageHeadingContext.ts';
 import { formatText } from '~utils/intl.ts';
-import useGetActionData from '~v5/common/ActionSidebar/hooks/useGetActionData.ts';
+import useGetActionFormData from '~v5/common/ActionSidebar/hooks/useGetActionFormData.ts';
 import WidgetBoxList from '~v5/common/WidgetBoxList/index.ts';
 import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';
 
@@ -20,7 +20,8 @@ const ActivityPage: FC = () => {
   const [selectedAction, setSelectedAction] = useState<string | undefined>(
     undefined,
   );
-  const { defaultValues } = useGetActionData(selectedAction || undefined);
+
+  const { defaultValues } = useGetActionFormData(selectedAction);
 
   return (
     <ContentWithTeamFilter>

src/components/frame/v5/pages/AgreementsPage/partials/AgreementCard/AgreementCard.tsx

@@ -1,6 +1,6 @@
 import { FilePlus, ShareNetwork, WarningCircle } from '@phosphor-icons/react';
 import clsx from 'clsx';
-import React, { type FC, useEffect } from 'react';
+import React, { type FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { generatePath, useNavigate } from 'react-router-dom';
 
@@ -52,8 +52,6 @@ const AgreementCard: FC<AgreementCardProps> = ({ transactionId }) => {
     loadingAction,
     networkMotionState,
     motionState,
-    startPollingForAction,
-    stopPollingForAction,
   } = useGetColonyAction(transactionId);
   const { decisionData, motionData, showInActionsList } = action || {};
   const {
@@ -71,11 +69,6 @@ const AgreementCard: FC<AgreementCardProps> = ({ transactionId }) => {
     (domain) => domain?.nativeId === motionDomainId,
   );
 
-  useEffect(() => {
-    startPollingForAction();
-    return () => stopPollingForAction();
-  }, [networkMotionState, startPollingForAction, stopPollingForAction]);
-
   const isMotionActive =
     motionStakes &&
     networkMotionState &&

src/components/v5/common/ActionSidebar/ActionSidebar.tsx

@@ -16,6 +16,7 @@ import React, {
 } from 'react';
 
 import { isFullScreen } from '~constants/index.ts';
+import { useActionContext } from '~context/ActionContext/ActionContext.ts';
 import { useActionSidebarContext } from '~context/ActionSidebarContext/ActionSidebarContext.ts';
 import { useMobile } from '~hooks/index.ts';
 import useCopyToClipboard from '~hooks/useCopyToClipboard.ts';
@@ -31,7 +32,6 @@ import PillsBase from '../Pills/PillsBase.tsx';
 
 import { ACTION_TYPE_FIELD_NAME, actionSidebarAnimation } from './consts.ts';
 import useCloseSidebarClick from './hooks/useCloseSidebarClick.ts';
-import useGetActionData from './hooks/useGetActionData.ts';
 import useGetGroupedActionComponent from './hooks/useGetGroupedActionComponent.tsx';
 import { ActionNotFound } from './partials/ActionNotFound.tsx';
 import ActionSidebarContent from './partials/ActionSidebarContent/ActionSidebarContent.tsx';
@@ -46,21 +46,21 @@ const displayName = 'v5.common.ActionSidebar';
 
 const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
   children,
-  transactionId,
   className,
 }) => {
   const {
+    transactionHash,
     action,
-    isInvalidTransactionHash,
+    isValidTransactionHash,
     loadingAction,
     isMotion,
     isMultiSig,
     motionState,
     expenditure,
     loadingExpenditure,
-    startPollingForAction,
-    stopPollingForAction,
-  } = useGetActionData(transactionId);
+    startActionPoll,
+    stopActionPoll,
+  } = useActionContext();
 
   const {
     actionSidebarToggle: [
@@ -92,14 +92,14 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
     // If the action has not been found for 20 seconds, then assume transaction doesn't exist.
     if (loadingAction) {
       timeout.current = setTimeout(() => {
-        stopPollingForAction();
+        stopActionPoll();
       }, 20000);
     }
 
     return () => {
       clearTimeout(timeout.current);
     };
-  }, [loadingAction, stopPollingForAction]);
+  }, [loadingAction, stopActionPoll]);
 
   const { formRef, closeSidebarClick } = useCloseSidebarClick();
 
@@ -112,10 +112,9 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
 
   useDisableBodyScroll(isActionSidebarOpen);
 
-  const isLoading =
-    transactionId !== undefined && (loadingAction || loadingExpenditure);
+  const isLoading = !!transactionHash && (loadingAction || loadingExpenditure);
 
-  const actionNotFound = transactionId && !action;
+  const actionNotFound = transactionHash && !action;
 
   const getSidebarContent = () => {
     if (action) {
@@ -125,9 +124,9 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
     if (actionNotFound) {
       return (
         <ActionNotFound
-          isInvalidTransactionHash={isInvalidTransactionHash}
+          isInvalidTransactionHash={!isValidTransactionHash}
           onCloseSidebar={toggleActionSidebarOff}
-          onRefetchAction={startPollingForAction}
+          onRefetchAction={startActionPoll}
         />
       );
     }
@@ -138,7 +137,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
 
     return (
       <ActionSidebarContent
-        transactionId={transactionId}
+        transactionHash={transactionHash}
         formRef={formRef}
         defaultValues={actionSidebarInitialValues}
         isMotion={!!isMotion}
@@ -147,7 +146,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
   };
 
   const getShareButton = () =>
-    !!transactionId && (
+    !!transactionHash && (
       <Tooltip
         tooltipContent={formatText({ id: 'copy.urlCopied' })}
         isOpen={isCopied}
@@ -203,8 +202,8 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
           'md:max-w-full': isSidebarFullscreen,
           'md:max-w-[43.375rem]': !isSidebarFullscreen && !isMotion,
           'md:max-w-[67.3125rem]':
-            (!isSidebarFullscreen && !!transactionId && !actionNotFound) ||
-            (!isSidebarFullscreen && !!transactionId && isLoading),
+            (!isSidebarFullscreen && !!transactionHash && !actionNotFound) ||
+            (!isSidebarFullscreen && !!transactionHash && isLoading),
         },
       )}
       ref={registerContainerRef}
@@ -227,7 +226,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
             {actionGroupType && (
               <GoBackButton
                 action={action}
-                onClick={transactionId ? closeSidebarClick : undefined}
+                onClick={transactionHash ? closeSidebarClick : undefined}
               />
             )}
             {!isMobile && (
@@ -279,15 +278,13 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
           <div>{children}</div>
         </div>
       </div>
-      {isLoading && <ActionSidebarLoadingSkeleton />}
-      <div
-        className={clsx('flex flex-grow overflow-y-auto', {
-          hidden: isLoading,
-        })}
-      >
-        {getSidebarContent()}
-      </div>
-
+      {isLoading ? (
+        <ActionSidebarLoadingSkeleton />
+      ) : (
+        <div className="flex flex-grow overflow-y-auto">
+          {getSidebarContent()}
+        </div>
+      )}
       <Modal
         title={formatText({ id: 'actionSidebar.cancelModal.title' })}
         subTitle={formatText({

src/components/v5/common/ActionSidebar/hooks/useGetActionData.ts → src/components/v5/common/ActionSidebar/hooks/useGetActionFormData.ts

@@ -35,23 +35,12 @@ import { ModificationOption } from '../partials/forms/ManageReputationForm/const
 import { calculatePercentageValue } from '../partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/utils.ts';
 
 import useGetColonyAction from './useGetColonyAction.ts';
-import { useGetExpenditureData } from './useGetExpenditureData.ts';
 
-const useGetActionData = (transactionId: string | undefined) => {
-  const {
-    action,
-    isInvalidTransactionHash,
-    loadingAction,
-    networkMotionState,
-    motionState,
-    startPollingForAction,
-    stopPollingForAction,
-  } = useGetColonyAction(transactionId);
+const useGetActionFormData = (transactionId: string | undefined) => {
+  const { action, expenditure } = useGetColonyAction(transactionId);
 
-  const { expenditure, loadingExpenditure } = useGetExpenditureData(
-    action?.expenditureId,
-  );
   const allTokens = useGetAllTokens();
+
   const defaultValues = useMemo(() => {
     if (!action) {
       return undefined;
@@ -406,19 +395,8 @@ const useGetActionData = (transactionId: string | undefined) => {
   }, [action, expenditure, allTokens]);
 
   return {
-    action,
     defaultValues,
-    isInvalidTransactionHash,
-    loadingAction,
-    isMotion: !!action?.isMotion,
-    isMultiSig: !!action?.isMultiSig,
-    networkMotionState,
-    motionState,
-    expenditure,
-    loadingExpenditure,
-    startPollingForAction,
-    stopPollingForAction,
   };
 };
 
-export default useGetActionData;
+export default useGetActionFormData;