Merge pull request #3512 from JoinColony/feat/16115956-staged-description

feat: add staged payment description

Author: CzarekDryl

src/components/common/ColonyActions/helpers/getActionTitleValues.ts

@@ -14,7 +14,7 @@ import {
 } from '~utils/colonyActions.ts';
 
 import { generateMessageValues } from './getEventTitleValues.ts';
-import { mapColonyActionToExpectedFormat } from './mapItemToMessageFormat.tsx';
+import { useMapColonyActionToExpectedFormat } from './mapItemToMessageFormat.tsx';
 
 import type React from 'react';
 
@@ -38,13 +38,15 @@ export enum ActionTitleMessageKeys {
   RecipientsNumber = 'recipientsNumber',
   TokensNumber = 'tokensNumber',
   SplitAmount = 'splitAmount',
+  MilestonesCount = 'milestonesCount',
+  Milestones = 'milestones',
+  StagedAmount = 'stagedAmount',
 }
 
 /* Maps actionTypes to message values as found in en-actions.ts */
 const getMessageDescriptorKeys = (actionType: AnyActionType) => {
   switch (true) {
-    case actionType.includes(ColonyActionType.Payment) &&
-      !actionType.includes(ExtendedColonyActionType.SplitPayment):
+    case actionType === ColonyActionType.Payment:
       return [
         ActionTitleMessageKeys.Recipient,
         ActionTitleMessageKeys.Amount,
@@ -128,6 +130,11 @@ const getMessageDescriptorKeys = (actionType: AnyActionType) => {
       return [
         ActionTitleMessageKeys.Initiator,
         ActionTitleMessageKeys.Recipient,
+        ActionTitleMessageKeys.StagedAmount,
+        ActionTitleMessageKeys.TokenSymbol,
+        ActionTitleMessageKeys.Milestones,
+        ActionTitleMessageKeys.MilestonesCount,
+        ActionTitleMessageKeys.TokensNumber,
       ];
     case actionType.includes(ExtendedColonyActionType.AddSafe):
       return [ActionTitleMessageKeys.ChainName];
@@ -159,29 +166,33 @@ const getMessageDescriptorKeys = (actionType: AnyActionType) => {
 };
 
 /* Returns the correct message values according to the action type. */
-const getActionTitleValues = ({
+const useGetActionTitleValues = ({
   actionData,
   colony,
   keyFallbackValues,
   expenditureData,
   networkInverseFee,
 }: {
-  actionData: ColonyAction;
-  colony: Pick<Colony, 'metadata' | 'nativeToken'>;
+  actionData: ColonyAction | null | undefined;
+  colony: Pick<Colony, 'metadata' | 'nativeToken'> | undefined;
   keyFallbackValues?: Partial<Record<ActionTitleMessageKeys, React.ReactNode>>;
   expenditureData?: Expenditure;
   networkInverseFee?: string;
 }) => {
-  const { isMotion, pendingColonyMetadata } = actionData;
+  const { isMotion, pendingColonyMetadata } = actionData || {};
 
-  const updatedItem = mapColonyActionToExpectedFormat({
+  const updatedItem = useMapColonyActionToExpectedFormat({
     actionData,
     colony,
     keyFallbackValues,
     expenditureData,
     networkInverseFee,
   });
 
+  if (!actionData || !colony) {
+    return {};
+  }
+
   const actionType = getExtendedActionType(
     actionData,
     isMotion ? pendingColonyMetadata : colony.metadata,
@@ -193,4 +204,4 @@ const getActionTitleValues = ({
   });
 };
 
-export default getActionTitleValues;
+export default useGetActionTitleValues;

src/components/common/ColonyActions/helpers/index.ts

@@ -1,2 +1,2 @@
-export { default as getActionTitleValues } from './getActionTitleValues.ts';
+export { default as useGetActionTitleValues } from './getActionTitleValues.ts';
 export * from './mapItemToMessageFormat.tsx';

src/components/common/ColonyActions/helpers/mapItemToMessageFormat.tsx

@@ -1,9 +1,12 @@
 import { AddressZero } from '@ethersproject/constants';
 import Decimal from 'decimal.js';
+import { BigNumber } from 'ethers';
 import React from 'react';
 
 import { ACTIONS_WITH_NETWORK_FEE } from '~constants/actions.ts';
-import { ColonyActionType, type SimpleTarget } from '~gql';
+import { getNetworkTokenList } from '~constants/tokens/getNetworkTokenList.ts';
+import { ColonyActionType, type TokenFragment, type SimpleTarget } from '~gql';
+import useUserByAddress from '~hooks/useUserByAddress.ts';
 import FriendlyName from '~shared/FriendlyName/index.ts';
 import MaskedAddress from '~shared/MaskedAddress/index.ts';
 import Numeral from '~shared/Numeral/index.ts';
@@ -16,8 +19,10 @@ import {
   type ColonyExtension,
   type Token,
   type Expenditure,
+  type ExpenditureStage,
+  type ExpenditureSlot,
 } from '~types/graphql.ts';
-import { notMaybe } from '~utils/arrays/index.ts';
+import { notMaybe, notNull } from '~utils/arrays/index.ts';
 import { formatRolesTitle } from '~utils/colonyActions.ts';
 import { getRecipientsNumber, getTokensNumber } from '~utils/expenditures.ts';
 import { getAmountLessFee } from '~utils/getAmountLessFee.ts';
@@ -53,8 +58,9 @@ const getDomainNameFromChangelog = (
   return changelogItem.newName;
 };
 
-const getRecipientData = (
-  actionData: ColonyAction,
+const useGetRecipientData = (
+  actionData: ColonyAction | null | undefined,
+  expenditure: Expenditure | null | undefined,
 ):
   | User
   | Colony
@@ -70,8 +76,13 @@ const getRecipientData = (
     recipientToken,
     safeTransaction,
     recipientAddress,
-  } = actionData;
+  } = actionData || {};
   const safeRecipient = safeTransaction?.transactions?.items[0]?.recipient;
+  const stagedPaymentRecipientAddress =
+    expenditure?.slots[0].recipientAddress || '';
+  const stagedPaymentRecipient = useUserByAddress(
+    stagedPaymentRecipientAddress,
+  );
 
   return (
     [
@@ -81,12 +92,16 @@ const getRecipientData = (
       recipientToken,
       safeRecipient,
       recipientAddress,
+      stagedPaymentRecipient.user,
     ].find(notMaybe) || undefined
   );
 };
 
-const getRecipient = (actionData: ColonyAction) => {
-  const recipient = getRecipientData(actionData);
+const useGetRecipient = (
+  actionData: ColonyAction | null | undefined,
+  expenditure: Expenditure | null | undefined,
+) => {
+  const recipient = useGetRecipientData(actionData, expenditure);
 
   return (
     <span>
@@ -135,22 +150,76 @@ const getInitiator = (actionData: ColonyAction) => {
   );
 };
 
-export const mapColonyActionToExpectedFormat = ({
+interface ExpenditureStagesData {
+  summedAmount: string;
+  stagedPaymentToken: TokenFragment | null | undefined;
+}
+
+const getExpenditureStagesData = (
+  stages: ExpenditureStage[],
+  slots: ExpenditureSlot[],
+  colony: Pick<Colony, 'tokens'>,
+) => {
+  const predefinedTokens = getNetworkTokenList();
+  const colonyTokens = colony.tokens?.items.filter(notNull) || [];
+  const allTokens = [...colonyTokens, ...predefinedTokens];
+
+  const tokensSet = new Set(
+    slots.flatMap(
+      (slot) => slot.payouts?.map((payout) => payout.tokenAddress) ?? [],
+    ),
+  );
+
+  const hasSingleTokenType = tokensSet.size === 1;
+
+  if (!hasSingleTokenType) {
+    return {
+      summedAmount: '0',
+      stagedPaymentToken: null,
+    };
+  }
+
+  const result = stages.reduce<ExpenditureStagesData>(
+    (acc, stage): ExpenditureStagesData => {
+      const currentSlot = slots.find((slot) => slot.id === stage.slotId);
+      const tokenAddress = currentSlot?.payouts?.[0]?.tokenAddress;
+
+      const token = allTokens.find(
+        ({ token: currentToken }) => currentToken.tokenAddress === tokenAddress,
+      );
+
+      return {
+        summedAmount: BigNumber.from(acc.summedAmount)
+          .add(BigNumber.from(currentSlot?.payouts?.[0]?.amount || '0'))
+          .toString(),
+        stagedPaymentToken: acc.stagedPaymentToken || token?.token,
+      };
+    },
+    {
+      summedAmount: BigNumber.from('0').toString(),
+      stagedPaymentToken: null,
+    },
+  );
+
+  return {
+    summedAmount: result.summedAmount.toString(),
+    stagedPaymentToken: result.stagedPaymentToken,
+  };
+};
+
+export const useMapColonyActionToExpectedFormat = ({
   actionData,
   colony,
   keyFallbackValues = {},
   expenditureData,
   networkInverseFee,
 }: {
-  actionData: ColonyAction;
-  colony: Pick<Colony, 'nativeToken' | 'tokens'>;
+  actionData: ColonyAction | null | undefined;
+  colony: Pick<Colony, 'nativeToken' | 'tokens'> | undefined;
   keyFallbackValues?: Partial<Record<ActionTitleMessageKeys, React.ReactNode>>;
   expenditureData?: Expenditure;
   networkInverseFee?: string;
 }) => {
-  //  // @TODO: item.actionType === ColonyMotions.SetUserRolesMotion ? updatedRoles : roles,
-  const formattedRolesTitle = formatRolesTitle(actionData.roles);
-
   const getFormattedValueWithFallback = (
     value: React.ReactNode,
     fallbackKey: ActionTitleMessageKeys,
@@ -163,6 +232,17 @@ export const mapColonyActionToExpectedFormat = ({
     return keyFallbackValues[fallbackKey];
   };
 
+  const recipient = getFormattedValueWithFallback(
+    useGetRecipient(actionData, expenditureData),
+    ActionTitleMessageKeys.Recipient,
+    notMaybe(useGetRecipientData(actionData, expenditureData)),
+  );
+  if (!actionData || !colony) {
+    return {};
+  }
+  //  // @TODO: item.actionType === ColonyMotions.SetUserRolesMotion ? updatedRoles : roles,
+  const formattedRolesTitle = formatRolesTitle(actionData.roles);
+
   const getAmount = (
     actionType: ColonyActionType,
     amount?: string | null,
@@ -209,6 +289,12 @@ export const mapColonyActionToExpectedFormat = ({
       actionData.fromDomain?.metadata || actionData.pendingDomainMetadata;
   }
 
+  const { stagedPaymentToken, summedAmount } = getExpenditureStagesData(
+    expenditureData?.metadata?.stages || [],
+    expenditureData?.slots || [],
+    colony,
+  );
+
   return {
     ...actionData,
     [ActionTitleMessageKeys.Amount]: getFormattedValueWithFallback(
@@ -237,11 +323,7 @@ export const mapColonyActionToExpectedFormat = ({
       ActionTitleMessageKeys.Initiator,
       notMaybe(getInitiatorData(actionData)),
     ),
-    [ActionTitleMessageKeys.Recipient]: getFormattedValueWithFallback(
-      getRecipient(actionData),
-      ActionTitleMessageKeys.Recipient,
-      notMaybe(getRecipientData(actionData)),
-    ),
+    [ActionTitleMessageKeys.Recipient]: recipient,
     [ActionTitleMessageKeys.ToDomain]: getFormattedValueWithFallback(
       actionData.toDomain?.metadata?.name ??
         formatMessage({ id: 'unknownDomain' }),
@@ -317,6 +399,12 @@ export const mapColonyActionToExpectedFormat = ({
           id: 'decisionMethod.multiSig',
         })} `
       : '',
+    [ActionTitleMessageKeys.StagedAmount]: (
+      <Numeral
+        value={summedAmount}
+        decimals={getTokenDecimalsWithFallback(stagedPaymentToken?.decimals)}
+      />
+    ),
     [ActionTitleMessageKeys.SplitAmount]: getFormattedValueWithFallback(
       <Numeral
         value={

src/components/common/ColonyActionsTable/partials/ActionDescription/ActionDescription.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { type FC } from 'react';
 
-import { getActionTitleValues } from '~common/ColonyActions/helpers/index.ts';
+import useGetActionTitleValues from '~common/ColonyActions/helpers/getActionTitleValues.ts';
 import { ADDRESS_ZERO } from '~constants/index.ts';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
 import { useMobile } from '~hooks';
@@ -63,7 +63,7 @@ const ActionDescription: FC<ActionDescriptionProps> = ({
 
   const actionMetadataDescription = formatText(
     { id: 'action.title' },
-    getActionTitleValues({
+    useGetActionTitleValues({
       actionData: {
         ...action,
         recipientAddress: recipientUser?.walletAddress ?? recipientAddress,

src/components/common/ColonyActionsTable/partials/ActionMobileDescription/ActionMobileDescription.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { type FC } from 'react';
 
-import getActionTitleValues from '~common/ColonyActions/helpers/getActionTitleValues.ts';
+import useGetActionTitleValues from '~common/ColonyActions/helpers/getActionTitleValues.ts';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
 import useNetworkInverseFee from '~hooks/useNetworkInverseFee.ts';
 import useShouldDisplayMotionCountdownTime from '~hooks/useShouldDisplayMotionCountdownTime.ts';
@@ -56,7 +56,7 @@ const ActionMobileDescription: FC<ActionMobileDescriptionProps> = ({
 
   const actionMetadataDescription = formatText(
     { id: 'action.title' },
-    getActionTitleValues({
+    useGetActionTitleValues({
       actionData: action,
       colony,
       expenditureData: expenditure ?? undefined,

src/components/common/Extensions/UserHub/partials/NotificationsTab/partials/Notification/Action/ActionNotification.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, type FC } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { getActionTitleValues } from '~common/ColonyActions/index.ts';
+import useGetActionTitleValues from '~common/ColonyActions/helpers/getActionTitleValues.ts';
 import {
   type NotificationColonyFragment,
   NotificationType,
@@ -67,25 +67,24 @@ const ActionNotification: FC<NotificationProps> = ({
     });
   };
 
+  const titleValues = useGetActionTitleValues({
+    actionData: action,
+    colony: colony
+      ? {
+          nativeToken: colony?.nativeToken,
+          metadata: colony?.metadata,
+        }
+      : undefined,
+    networkInverseFee,
+  });
+
   const actionMetadataDescription = useMemo(() => {
     if (!action || !colony) {
       return null;
     }
 
-    return formatText(
-      { id: 'action.title' },
-      getActionTitleValues({
-        actionData: action,
-        colony: {
-          nativeToken: {
-            ...colony.nativeToken,
-          },
-          metadata: colony.metadata,
-        },
-        networkInverseFee,
-      }),
-    );
-  }, [action, colony, networkInverseFee]);
+    return formatText({ id: 'action.title' }, titleValues);
+  }, [action, colony, titleValues]);
 
   const actionTitle =
     action?.metadata?.customTitle || action?.decisionData?.title || '';