diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithPermissionsInfo/ActionWithPermissionsInfo.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithPermissionsInfo/ActionWithPermissionsInfo.tsx index c9bc01e24e8..cbd94845827 100644 --- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithPermissionsInfo/ActionWithPermissionsInfo.tsx +++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithPermissionsInfo/ActionWithPermissionsInfo.tsx @@ -64,6 +64,7 @@ const formatDate = (value: string | undefined) => { }; const ActionWithPermissionsInfo: FC = ({ + title, action, }) => { if (!action) { @@ -83,9 +84,10 @@ const ActionWithPermissionsInfo: FC = ({ iconSize={16} iconClassName="text-gray-500" > - {formatText({ - id: 'action.executed.permissions.description', - })} + {title ?? + formatText({ + id: 'action.executed.permissions.description', + })} } sections={[ diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithPermissionsInfo/types.ts b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithPermissionsInfo/types.ts index 5a1fd469729..28affa48e28 100644 --- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithPermissionsInfo/types.ts +++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithPermissionsInfo/types.ts @@ -1,5 +1,6 @@ import { type ExpenditureAction } from '~types/graphql.ts'; export interface ActionWithPermissionsInfoProps { + title?: string; action?: ExpenditureAction | null; } diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithStakingInfo/ActionWithStakingInfo.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithStakingInfo/ActionWithStakingInfo.tsx index 05931254ac6..a19b3522d06 100644 --- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithStakingInfo/ActionWithStakingInfo.tsx +++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithStakingInfo/ActionWithStakingInfo.tsx @@ -37,6 +37,7 @@ const MSG = defineMessages({ const ActionWithStakingInfo: FC = ({ userAdddress, stakeAmount, + title, }) => { const { colony } = useColonyContext(); const { nativeToken } = colony; @@ -58,7 +59,7 @@ const ActionWithStakingInfo: FC = ({ iconSize={16} iconClassName="text-gray-500" > - {formatText(MSG.info)} + {title ?? formatText(MSG.info)} } sections={[ diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithStakingInfo/types.ts b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithStakingInfo/types.ts index 33f898efa8b..561398d36ce 100644 --- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithStakingInfo/types.ts +++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithStakingInfo/types.ts @@ -1,4 +1,5 @@ export interface ActionWithStakingInfoProps { + title?: string; userAdddress: string | undefined | null; stakeAmount: string; } diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderWidget/PaymentBuilderWidget.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderWidget/PaymentBuilderWidget.tsx index b5b47354eeb..63a1f61e650 100644 --- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderWidget/PaymentBuilderWidget.tsx +++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderWidget/PaymentBuilderWidget.tsx @@ -14,6 +14,7 @@ import useEnabledExtensions from '~hooks/useEnabledExtensions.ts'; import usePrevious from '~hooks/usePrevious.ts'; import { ActionTypes } from '~redux'; import { type LockExpenditurePayload } from '~redux/sagas/expenditures/lockExpenditure.ts'; +import Numeral from '~shared/Numeral/Numeral.tsx'; import SpinnerLoader from '~shared/Preloaders/SpinnerLoader.tsx'; import { DecisionMethod } from '~types/actions.ts'; import { notMaybe, notNull } from '~utils/arrays/index.ts'; @@ -25,6 +26,7 @@ import { getSafePollingInterval, removeCacheEntry, } from '~utils/queries.ts'; +import { getSelectedToken } from '~utils/tokens.ts'; import useGetColonyAction from '~v5/common/ActionSidebar/hooks/useGetColonyAction.ts'; import { useGetExpenditureData } from '~v5/common/ActionSidebar/hooks/useGetExpenditureData.ts'; import MotionCountDownTimer from '~v5/common/ActionSidebar/partials/Motions/partials/MotionCountDownTimer/MotionCountDownTimer.tsx'; @@ -35,6 +37,7 @@ import { LoadingBehavior } from '~v5/shared/Button/types.ts'; import MotionWidgetSkeleton from '~v5/shared/MotionWidgetSkeleton/MotionWidgetSkeleton.tsx'; import Stepper from '~v5/shared/Stepper/index.ts'; import { type StepperItem } from '~v5/shared/Stepper/types.ts'; +import UserPopover from '~v5/shared/UserPopover/UserPopover.tsx'; import ActionWithPermissionsInfo from '../ActionWithPermissionsInfo/ActionWithPermissionsInfo.tsx'; import ActionWithStakingInfo from '../ActionWithStakingInfo/ActionWithStakingInfo.tsx'; @@ -92,6 +95,11 @@ const PaymentBuilderWidget: FC = ({ action }) => { stopPolling, } = useGetExpenditureData(expenditureId, { pollUntilUnmount: true }); + const tokenData = getSelectedToken( + colony, + expenditure?.slots?.[0]?.payouts?.[0]?.tokenAddress ?? '', + ); + const { fundingActions, cancellingActions, @@ -369,27 +377,75 @@ const PaymentBuilderWidget: FC = ({ action }) => { ) : ( { - setExpectedStepKey(ExpenditureStep.Funding); - }} - loadingBehavior={LoadingBehavior.TxLoader} - text={formatText({ - id: 'expenditure.reviewStage.confirmDetails.button', - })} - values={lockExpenditurePayload} - actionType={ActionTypes.EXPENDITURE_LOCK} - mode="primarySolid" - isFullSize - isLoading={expectedStepKey === ExpenditureStep.Funding} - /> + !expenditure?.ownerAddress || + walletAddress !== expenditure?.ownerAddress ? ( +
+

+ {formatText({ + id: 'expenditure.reviewStage.confirmDetails.title', + })} +

+ +
+
+ {formatText({ + id: 'expenditure.reviewStage.confirmDetails.creator', + })} +
+
+
+ +
+
+
+ {isStaked && ( +
+
+ {formatText({ + id: 'expenditure.reviewStage.confirmDetails.stakeAmount', + })} +
+
+ {' '} + {tokenData?.symbol} +
+
+ )} +
+ ) : ( + { + setExpectedStepKey(ExpenditureStep.Funding); + }} + loadingBehavior={LoadingBehavior.TxLoader} + text={formatText({ + id: 'expenditure.reviewStage.confirmDetails.button', + })} + values={lockExpenditurePayload} + actionType={ActionTypes.EXPENDITURE_LOCK} + mode="primarySolid" + className="w-full" + isLoading={expectedStepKey === ExpenditureStep.Funding} + isFullSize + /> + ) } /> )} @@ -400,10 +456,16 @@ const PaymentBuilderWidget: FC = ({ action }) => { ) : ( )} diff --git a/src/i18n/en.json b/src/i18n/en.json index 356bc072367..b4bcb9b8a03 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -1887,7 +1887,12 @@ "expenditure.cancelPayment": "Cancel payment", "expenditure.copyLink": "Copy link", "expenditure.reviewStage.tooltip": "Payment is currently in review. The payment creator can make changes freely until details are confirmed.", - "expenditure.reviewStage.confirmDetails.info": "If all details are correct, confirm the payment details to move onto funding. Changing after this point will require a governance process.", + "expenditure.reviewStage.confirmDetails.creatorInfo": "Payment is in Review. While in review, changes can be freely made by the Payment creator. If correct, confirm details and proceed to funding.", + "expenditure.reviewStage.confirmDetails.info": "Payment is in Review. While in review, changes can be freely made by the Payment creator.", + "expenditure.reviewStage.confirmDetails.completedInfo": "Payment creator completed the review step.", + "expenditure.reviewStage.confirmDetails.title": "Overview", + "expenditure.reviewStage.confirmDetails.creator": "Payment creator", + "expenditure.reviewStage.confirmDetails.stakeAmount": "Stake amount", "expenditure.reviewStage.confirmDetails.button": "Confirm details", "expenditure.finalizeRequest.title": "Release requests", "expenditure.fundingRequest.title": "Funding requests",