feat: added cancel with reputation

fix after rebase fix: translations, duplicated steps fix: cancel step fixes after rebase fix: auto claim, stepper Feat: Add willPunishExpenditureStaker field to colony motion feat: add penalty badge fix: pending buttons, penalise saga fix: types fix: permission badge fix: reclaim, badge fixes after rebase fixes after rebase fix: cancel and reclaim step fix: remove finalize step from cancel
JoinColony · Jan 22, 2025 · c3455ef · c3455ef
1 parent eef756b
commit c3455ef
Show file tree

Hide file tree

Showing 42 changed files with 1,181 additions and 163 deletions.
diff --git a/amplify/backend/api/colonycdapp/schema/schema.graphql b/amplify/backend/api/colonycdapp/schema/schema.graphql
@@ -3010,6 +3010,12 @@ type ColonyMotion @model {
   the details of tokens and amounts to be funded
   """
   expenditureFunding: [ExpenditureFundingItem!]
+
+  """
+  In case of motions cancelling a staked expenditure, boolean indicating
+  whether the expenditure staker will be punished by losing their stake
+  """
+  willPunishExpenditureStaker: Boolean
 }
 
 type ExpenditureFundingItem {

diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/Motions.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/Motions.tsx
@@ -342,7 +342,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
     >
       <Stepper<Steps>
         activeStepKey={activeStepKey}
-        setActiveStepKey={setActiveStepKey}
+        setActiveStepKey={(key: Steps) => setActiveStepKey(key)}
         items={items}
       />
     </MotionProvider>

diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx
@@ -6,9 +6,12 @@ import { defineMessages } from 'react-intl';
 import { useAppContext } from '~context/AppContext/AppContext.ts';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
 import { ColonyActionType } from '~gql';
+import useAsyncFunction from '~hooks/useAsyncFunction.ts';
 import usePrevious from '~hooks/usePrevious.ts';
 import { ActionTypes } from '~redux/index.ts';
+import { type ReclaimExpenditureStakePayload } from '~redux/sagas/expenditures/reclaimExpenditureStake.ts';
 import { ActionForm } from '~shared/Fields/index.ts';
+import { getMotionAssociatedActionId } from '~utils/actions.ts';
 import { MotionState } from '~utils/colonyMotions.ts';
 import { formatText } from '~utils/intl.ts';
 import { getSafePollingInterval } from '~utils/queries.ts';
@@ -45,7 +48,7 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
   const { onFinalizeSuccessCallback } = useFinalizeSuccessCallback();
   const { canInteract } = useAppContext();
   const [isPolling, setIsPolling] = useState(false);
-  const { refetchColony } = useColonyContext();
+  const { refetchColony, colony } = useColonyContext();
   const {
     isFinalizable,
     transform: finalizePayload,
@@ -60,6 +63,7 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
     claimPayload,
     canClaimStakes,
   } = useClaimConfig(actionData, startPollingAction);
+  const { type, expenditure } = actionData;
 
   const isMotionFinalized = actionData.motionData.isFinalized;
   const previousIsMotionFinalized = usePrevious(isMotionFinalized);
@@ -73,11 +77,32 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
       !isMotionFailed &&
       !isMotionFailedNotFinalizable) ||
     (isMotionAgreement && !isClaimed);
+  const reclaimExpenditureStake = useAsyncFunction({
+    submit: ActionTypes.RECLAIM_EXPENDITURE_STAKE,
+    error: ActionTypes.RECLAIM_EXPENDITURE_STAKE_ERROR,
+    success: ActionTypes.RECLAIM_EXPENDITURE_STAKE_SUCCESS,
+  });
+  const associatedActionId = getMotionAssociatedActionId(actionData);
 
-  const handleSuccess = () => {
+  const handleSuccess = async () => {
     startPollingAction(getSafePollingInterval());
     setIsPolling(true);
     onFinalizeSuccessCallback(actionData);
+    const associatedActionId = getMotionAssociatedActionId(actionData);
+
+    if (
+      type === ColonyActionType.CancelExpenditureMotion &&
+      !actionData.motionData.willPunishExpenditureStaker &&
+      expenditure?.isStaked
+    ) {
+      const payload: ReclaimExpenditureStakePayload = {
+        colonyAddress: colony.colonyAddress,
+        nativeExpenditureId: expenditure.nativeId,
+        associatedActionId,
+      };
+
+      await reclaimExpenditureStake(payload);
+    }
   };
 
   /* Stop polling when mounted / dismounted */

diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/hooks.tsx
@@ -178,7 +178,7 @@ export const useClaimConfig = (
   const buttonTextId = isClaimed ? 'button.claimed' : 'button.claim';
   const remainingStakesNumber = remainingStakes.length;
   const canClaimStakes = userTotalStake ? !userTotalStake.isZero() : false;
-  const handleClaimSuccess = () => {
+  const handleClaimSuccess = async () => {
     setIsClaimed(true);
     startPollingAction(getSafePollingInterval());
     pollLockedTokenBalance();

diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx
@@ -32,6 +32,7 @@ const RevealStep: FC<RevealStepProps> = ({
   stopPollingAction,
   transactionId,
   rootHash,
+  isActionCancelled,
 }) => {
   const { canInteract } = useAppContext();
   const [isInformationAccordionOpen, { toggle: toggleInformationAccordion }] =
@@ -111,6 +112,19 @@ const RevealStep: FC<RevealStepProps> = ({
         </>
       }
       sections={[
+        ...(isActionCancelled
+          ? [
+              {
+                key: '3',
+                content: (
+                  <p className="text-sm">
+                    {formatText({ id: 'motion.cancelled' })}
+                  </p>
+                ),
+                className: 'bg-negative-100 text-negative-400 !py-3',
+              },
+            ]
+          : []),
         {
           key: '1',
           content: (
@@ -172,7 +186,7 @@ const RevealStep: FC<RevealStepProps> = ({
                   : 'motion.revealStep.buttonShow',
               })}
               isOpen={isInformationAccordionOpen}
-              onToggle={toggleInformationAccordion}
+              onToggle={() => toggleInformationAccordion()}
               className={clsx(
                 `
                   [&_.accordion-toggler]:text-sm

diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/types.ts b/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/types.ts
@@ -7,4 +7,5 @@ export interface RevealStepProps {
   rootHash: string | undefined;
   transactionId: string;
   motionState?: number;
+  isActionCancelled?: boolean;
 }
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/StakingStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/StakingStep.tsx
@@ -24,7 +24,11 @@ import { type StakingStepProps } from './types.ts';
 const displayName =
   'v5.common.ActionSidebar.partials.motions.MotionSimplePayment.steps.StakingStep';
 
-const StakingStep: FC<StakingStepProps> = ({ className, isActive }) => {
+const StakingStep: FC<StakingStepProps> = ({
+  className,
+  isActive,
+  isActionCancelled,
+}) => {
   const { canInteract } = useAppContext();
   const { motionAction } = useMotionContext();
   const [isAccordionOpen, { toggle: toggleAccordion }] = useToggle();
@@ -134,6 +138,19 @@ const StakingStep: FC<StakingStepProps> = ({ className, isActive }) => {
                 },
               ]
             : []),
+          ...(isActionCancelled
+            ? [
+                {
+                  key: '3',
+                  content: (
+                    <p className="text-sm">
+                      {formatText({ id: 'motion.cancelled' })}
+                    </p>
+                  ),
+                  className: 'bg-negative-100 text-negative-400 !py-3',
+                },
+              ]
+            : []),
           {
             key: '2',
             content: (

diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/types.ts b/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/types.ts
@@ -1,4 +1,5 @@
 export interface StakingStepProps {
   className?: string;
   isActive?: boolean;
+  isActionCancelled?: boolean;
 }
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx
@@ -45,6 +45,7 @@ const VotingStep: FC<VotingStepProps> = ({
   startPollingAction,
   stopPollingAction,
   transactionId,
+  isActionCancelled,
 }) => {
   const {
     currentReputationPercent,
@@ -112,6 +113,19 @@ const VotingStep: FC<VotingStepProps> = ({
         </div>
       }
       sections={[
+        ...(isActionCancelled
+          ? [
+              {
+                key: '1',
+                content: (
+                  <p className="text-sm">
+                    {formatText({ id: 'motion.cancelled' })}
+                  </p>
+                ),
+                className: 'bg-negative-100 text-negative-400 !py-3',
+              },
+            ]
+          : []),
         {
           key: VotingStepSections.Vote,
           content: (

diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/types.ts b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/types.ts
@@ -5,6 +5,7 @@ export interface VotingStepProps {
   stopPollingAction: () => void;
   actionData: MotionAction;
   transactionId: string;
+  isActionCancelled?: boolean;
 }
 
 export interface VotingFormValues {

diff --git a/.../common/ActionSidebar/partials/MultiSigSidebar/partials/MultiSigWidget/MultiSigWidget.tsx b/.../common/ActionSidebar/partials/MultiSigSidebar/partials/MultiSigWidget/MultiSigWidget.tsx
@@ -155,7 +155,7 @@ const MultiSigWidget: FC<MultiSigWidgetProps> = ({
       <Stepper<MultiSigState>
         items={items}
         activeStepKey={activeStepKey}
-        setActiveStepKey={setActiveStepKey}
+        setActiveStepKey={(key: MultiSigState) => setActiveStepKey(key)}
       />
     );
   }

diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/PaymentBuilder.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/PaymentBuilder.tsx
@@ -41,7 +41,6 @@ import { type MeatBallMenuItem } from '~v5/shared/MeatBallMenu/types.ts';
 
 import CompletedExpenditureContent from '../CompletedExpenditureContent/CompletedExpenditureContent.tsx';
 
-import CancelModal from './partials/CancelModal/CancelModal.tsx';
 import PaymentBuilderTable from './partials/PaymentBuilderTable/PaymentBuilderTable.tsx';
 import { ExpenditureStep } from './partials/PaymentBuilderWidget/types.ts';
 import { getExpenditureStep } from './partials/PaymentBuilderWidget/utils.ts';
@@ -76,18 +75,17 @@ const PaymentBuilder = ({ action }: PaymentBuilderProps) => {
   const { initiatorUser, transactionHash, fromDomain, annotation } = action;
   const allTokens = useGetAllTokens();
 
-  const { expenditure, loadingExpenditure, refetchExpenditure } =
-    useGetExpenditureData(action.expenditureId);
+  const { expenditure, loadingExpenditure } = useGetExpenditureData(
+    action.expenditureId,
+  );
   const expenditureStep = getExpenditureStep(expenditure);
   const { user: recipient } = useUserByAddress(
     expenditure?.slots?.[0]?.recipientAddress || '',
   );
   const {
     expectedExpenditureType,
     setExpectedExpenditureType,
-    isCancelModalOpen,
     toggleOnCancelModal,
-    toggleOffCancelModal,
   } = usePaymentBuilderContext();
 
   useEffect(() => {
@@ -214,12 +212,6 @@ const PaymentBuilder = ({ action }: PaymentBuilderProps) => {
           isLoading={!expenditure.metadata?.stages?.length}
           isPaymentStep={expenditureStep === ExpenditureStep.Payment}
         />
-        <CancelModal
-          isOpen={isCancelModalOpen}
-          expenditure={expenditure}
-          onClose={toggleOffCancelModal}
-          refetchExpenditure={refetchExpenditure}
-        />
       </>
     );
   }
@@ -268,12 +260,6 @@ const PaymentBuilder = ({ action }: PaymentBuilderProps) => {
         finalizedTimestamp={finalizedAt}
         expectedNumberOfPayouts={expectedNumberOfPayouts}
       />
-      <CancelModal
-        isOpen={isCancelModalOpen}
-        expenditure={expenditure}
-        onClose={toggleOffCancelModal}
-        refetchExpenditure={refetchExpenditure}
-      />
     </>
   );
 };